feat: save GameContext on localStorage (no UI)

src/@types/storming.d.ts

@@ -157,3 +157,11 @@ interface GameContext {
   firstPlayer(player: Player): void;
   skip(): void;
 }
+
+// ----
+
+type Savegame = {
+  date: string;
+  empireSize: number;
+  gameContext: GameContext;
+}

src/App.tsx

@@ -1,7 +1,11 @@
 import {
-  Board, LogPanel,
-  Marketplace, PlayerHand, RoundSummary,
-  TimeLine
+  Board,
+  LogPanel,
+  Marketplace,
+  Menu,
+  PlayerHand,
+  RoundSummary,
+  TimeLine,
 } from "components";
 import { GameContextProvider } from "contexts";
 import { StrictMode } from "react";
@@ -14,6 +18,7 @@ function App() {
       <main className="game">
         <GameContextProvider>
           <TimeLine />
+          <Menu />
           <RoundSummary />
           <Board />
           <Marketplace />

src/components/index.ts

@@ -4,3 +4,5 @@ export { default as LogPanel } from "./log-panel/log-panel";
 export { default as RoundSummary } from "./round-summary/round-summary";
 export { default as TimeLine } from "./timeline/timeline-controller";
 export { default as Marketplace } from "./marketplace/marketplace";
+
+export { Menu } from "./menu/menu";

src/components/menu/menu.scss

@@ -0,0 +1,7 @@
+.menu {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 32px;
+  background-color: rgba(0, 0, 0, 0.5);
+}

src/components/menu/menu.tsx

@@ -0,0 +1,32 @@
+import { logRender } from "utils/console";
+import { savegame } from "services/db";
+import MenuIcon from "./menu-icon.svg";
+import { useGameContext } from "contexts";
+
+import "./menu.scss";
+
+export function Menu(): JSX.Element {
+  logRender("Menu");
+
+  const gameContext = useGameContext();
+
+  const saveHandler = () => {
+    savegame(gameContext);
+  };
+
+  const loadHandler = () => {
+    // TODO
+  };
+
+  return (
+    <div className="menu">
+      <img
+        src={MenuIcon}
+        alt="Menu Icon"
+        onClick={() => {
+          console.log("clicked");
+        }}
+      />
+    </div>
+  );
+}

src/services/db.ts

@@ -0,0 +1,39 @@
+/*
+ * using local storage for now (up to 5MB)
+ * check if i need to use Indexed DB instead
+ */
+
+import { empireSize } from "game-logic/empire-size";
+import { warnInconsistentState } from "utils/console";
+
+export function savegame(gameContext: GameContext) {
+  const date = Date.now().toString();
+  const playerEmpireSize = empireSize(gameContext.board).player;
+  const item: Savegame = {
+    date,
+    empireSize: playerEmpireSize,
+    gameContext,
+  };
+  try {
+    window.localStorage.setItem(date, JSON.stringify(item));
+  } catch (e) {
+    warnInconsistentState(`error while saving game context: ${e}`);
+    return undefined;
+  }
+  return date;
+}
+
+export function listSavegames() {
+  return Object.keys(window.localStorage);
+}
+
+export function loadSavegame(date: string): Savegame | undefined {
+  const raw = window.localStorage.getItem(date);
+  if (!raw) {
+    warnInconsistentState(
+      `trying to load game context with key ${key} but no data found`
+    );
+    return undefined;
+  }
+  return JSON.parse(raw);
+}