new gameid generation and undo button

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quibbble/boardgame",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "React component library for Quibbble boardgames.",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",

src/components/GamePage/GamePage.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, forwardRef, useState } from "react";
 import { BsArrowLeft } from "react-icons/bs";
 import { IoMdRefresh } from "react-icons/io";
+import { IoArrowUndoSharp } from "react-icons/io5"
 import { useParams, useNavigate } from "react-router-dom";
 import { ConnStatus } from "./ConnStatus";
 import { GetSnapshot } from "../../api/API";
@@ -22,7 +23,7 @@ export const GamePage = forwardRef((props, ref) => {
 
    useEffect(() => {
       if (connected && network && connected[network.Name]) {
-         sessionStorage.setItem(gameID, connected[network.Name]);
+         localStorage.setItem(gameID, connected[network.Name]);
       }
    }, [network, connected, gameID])
 
@@ -46,7 +47,7 @@ export const GamePage = forwardRef((props, ref) => {
          ws.current = new WebSocket(`${ config.websocket }/game/join?GameKey=${ config.key }&GameID=${ gameID }`);
          ws.current.onopen = () => {
             setIsConn(true)
-            let team = sessionStorage.getItem(gameID)
+            let team = localStorage.getItem(gameID)
             if (team) setTeam(team)
          };
          ws.current.onclose = () => {
@@ -84,6 +85,12 @@ export const GamePage = forwardRef((props, ref) => {
       ws.current.send(JSON.stringify({"ActionType": "Reset", "MoreDetails": {"MoreOptions": {"Seed": Date.now(), "Variant": variant }}}));
    }
 
+   const undoAction = () => {
+      if (!ws.current) return;
+      if (game && connected && network && game.Actions && game.Actions.length > 0 && game.Actions[game.Actions.length-1].Team !== connected[network.Name]) return;
+      ws.current.send(JSON.stringify({"ActionType": "Undo"}));
+   }
+
    // trigger used to force a refresh of the page
    const [trigger, setTrigger] = useState(true);
    useEffect(() => {
@@ -166,17 +173,19 @@ export const GamePage = forwardRef((props, ref) => {
                      </button>
                   </div>
                   <div className="flex">
-
-                     <button onClick={() => resetGame()} title="reset game" className={`p-2 ${ game && game.Winners.length > 0 ? "bg-green-500 animate-pulse" : "bg-zinc-500"} mr-3 md:mr-2 rounded-full`}>
+                     <button onClick={() => resetGame()} title="reset game" className={`p-2 ${ game && game.Winners.length > 0 ? "bg-blue-500" : "bg-zinc-500"} mr-3 md:mr-2 rounded-full`}>
                         <IoMdRefresh />
                      </button>
+                     <button onClick={() => undoAction()} title="undo move" className={`p-2 ${ game && connected && network && game.Actions && game.Actions.length > 0 && game.Actions[game.Actions.length-1].Team === connected[network.Name] ? "bg-amber-500" : "bg-zinc-700 text-zinc-500 cursor-default" } mr-3 md:mr-2 rounded-full`}>
+                        <IoArrowUndoSharp />
+                     </button>
                      <button onClick={() => {
                         sessionStorage.setItem("gameID", gameID);
                         navigate("/rules")
-                     }} title="how to play" className="p-2 bg-blue-500 mr-3 md:mr-2 italic text-xs font-bold">
+                     }} title="how to play" className="p-2 bg-blue-500 italic text-xs font-bold">
                         game rules
                      </button>
-                     <div className="italic text-xs  py-1 px-2 border-blue-500 border border-dashed text-blue-500">
+                     <div className="hidden md:flex italic text-xs ml-2 py-1 px-2 border-blue-500 border border-dashed text-blue-500">
                         <a href="https://quibbble.com" target="_blank">more <span className="text-zinc-200 font-['lobster'] text-sm not-italic">quibbble</span> games</a>
                      </div>
                   </div>

src/components/HomePage/HomePage.jsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { Adjectives, Nouns, NumToText } from "../../util/words";
+import { Adjectives } from "../../util/adjectives";
+import { Nouns } from "../../util/nouns";
+import { NumToText } from "../../util/util";
 import { useNavigate } from "react-router-dom";
 import { CreateGame, Health } from "../../api/API";
 import { Footer } from "../Footer"
@@ -8,7 +10,7 @@ export function HomePage({ config }) {
 
     const navigate = useNavigate();
 
-    const [gameID, setGameID] = useState(`${ Adjectives[Math.floor(Math.random()*Adjectives.length)] }-${ Nouns[Math.floor(Math.random()*Nouns.length)] }`);
+    const [gameID, setGameID] = useState(`${ Adjectives[Math.floor(Math.random()*Adjectives.length)] }-${ Nouns[Math.floor(Math.random()*Nouns.length)] }-${ Math.floor(Math.random() * (99 - 0 + 1) + 0) }`);
     const [teams, setTeams] = useState(config.minTeams);
     const [variant, setVariant] = useState(config.variants.length > 0 ? config.variants[0] : null)
 
@@ -47,7 +49,7 @@ export function HomePage({ config }) {
                                     game rules
                                 </button>
                                 <div className="italic text-xs  py-1 px-2 border-blue-500 border border-dashed text-blue-500">
-                                    <a href="https://quibbble.com" target="_blank">more <span className="text-zinc-200 font-['lobster'] text-sm not-italic">quibbble</span> games</a>
+                                    <a href="https://quibbble.com" target="_blank">more <span className="text-zinc-100 font-['lobster'] text-sm not-italic">quibbble</span> games</a>
                                 </div>
                             </div>
                             <div className="flex items-center order-1 md:order-2 mb-3 md:mb-0">