Add backup storage key and enhance state management with fallback logic

Author: sebastianhaeni

src/game/constants.ts

@@ -12,6 +12,7 @@ import type {
 } from "./types.js";
 
 export const STORAGE_KEY = "skills17.frontend.loc-clicker.state.v1";
+export const STORAGE_BACKUP_KEY = `${STORAGE_KEY}.backup`;
 
 export const DEVELOPER_LEVELS: Record<DeveloperLevel, DeveloperConfig> = {
   junior: {

src/game/persistence.ts

@@ -1,27 +1,48 @@
-import { STORAGE_KEY } from "./constants.js";
+import { STORAGE_BACKUP_KEY, STORAGE_KEY } from "./constants.js";
 import type { GameState, StorageLike } from "./types.js";
 import { createInitialState, normalizeState } from "./engine.js";
 
 export function saveState(
   state: GameState,
   storage: StorageLike = window.localStorage,
 ): void {
-  storage.setItem(STORAGE_KEY, JSON.stringify(state));
+  const serialized = JSON.stringify(state);
+  storage.setItem(STORAGE_KEY, serialized);
+  storage.setItem(STORAGE_BACKUP_KEY, serialized);
 }
 
 export function loadState(
   storage: StorageLike = window.localStorage,
   nowMs = Date.now(),
 ): GameState {
-  const raw = storage.getItem(STORAGE_KEY);
-  if (!raw) {
+  const candidates = [
+    readStoredState(storage, STORAGE_KEY, nowMs),
+    readStoredState(storage, STORAGE_BACKUP_KEY, nowMs),
+  ].filter((value): value is GameState => value !== null);
+
+  if (candidates.length === 0) {
     return createInitialState(nowMs);
   }
 
+  return candidates.reduce((latest, candidate) =>
+    candidate.lastTickAt > latest.lastTickAt ? candidate : latest,
+  );
+}
+
+function readStoredState(
+  storage: StorageLike,
+  key: string,
+  nowMs: number,
+): GameState | null {
+  const raw = storage.getItem(key);
+  if (!raw) {
+    return null;
+  }
+
   try {
     return normalizeState(JSON.parse(raw), nowMs);
   } catch {
-    return createInitialState(nowMs);
+    return null;
   }
 }
 

src/lib/css/styles.css

@@ -1489,6 +1489,34 @@ input {
     flex: 1 1 auto;
   }
 
+  .game-shell[data-mobile-screen="shop"] .tile-shop,
+  .game-shell[data-mobile-screen="shop"] .tile-owned {
+    flex: 0 0 auto;
+    overflow: visible;
+    padding-right: 0;
+  }
+
+  .game-shell[data-mobile-screen="shop"] .tile-shop {
+    order: 1;
+  }
+
+  .game-shell[data-mobile-screen="shop"] .tile-owned {
+    order: 2;
+  }
+
+  .game-shell[data-mobile-screen="release"] .tile-utility {
+    flex: 0 0 auto;
+    overflow: visible;
+    padding-right: 0;
+  }
+
+  .game-shell[data-mobile-screen="release"] [data-ui="prestige-upgrade-list"],
+  .game-shell[data-mobile-screen="release"] [data-ui="achievement-list"] {
+    max-height: none;
+    overflow: visible;
+    padding-right: 0;
+  }
+
   .game-shell[data-mobile-screen="ops"] .tile-bugs,
   .game-shell[data-mobile-screen="ops"] .tile-events,
   .game-shell[data-mobile-screen="play"] .tile-hero,
@@ -1503,7 +1531,7 @@ input {
     height: clamp(220px, calc(100svh - 430px), 284px);
     flex-direction: column;
     justify-content: space-between;
-    gap: 6px;
+    gap: 4px;
     overflow: hidden;
   }
 
@@ -1527,15 +1555,15 @@ input {
   }
 
   .game-shell[data-mobile-screen="play"] .tile-hero .company-progress {
-    margin-top: 4px;
+    margin-top: 2px;
   }
 
   .game-shell[data-mobile-screen="play"] .tile-hero .click-primary-wrap {
     margin: 0;
   }
 
   .game-shell[data-mobile-screen="play"] .tile-hero .loc-visual-wrap {
-    margin-top: 2px;
+    margin-top: 0;
   }
 
   .game-shell[data-mobile-screen="play"] .tile-hero .loc-visual {
@@ -1554,7 +1582,7 @@ input {
   }
 
   .game-shell[data-mobile-screen="play"] .tile-hero .combo-meter {
-    margin-top: 2px;
+    margin-top: 0;
   }
 
   .game-shell[data-mobile-screen="play"] .tile-hero .team-visual {

test/persistence.test.ts

@@ -1,22 +1,26 @@
 import { expect, test } from "vitest";
 
 import { createInitialState } from "../src/game/engine.js";
-import { STORAGE_KEY } from "../src/game/constants.js";
+import { STORAGE_BACKUP_KEY, STORAGE_KEY } from "../src/game/constants.js";
 import {
   decodeShareState,
   encodeShareState,
   loadState,
   saveState,
 } from "../src/game/persistence.js";
 
-function createStorage(seedValue: string | null = null) {
-  let currentValue = seedValue;
+function createStorage(seedValue: string | null = null, backupValue: string | null = null) {
+  const values = new Map<string, string | null>([
+    [STORAGE_KEY, seedValue],
+    [STORAGE_BACKUP_KEY, backupValue],
+  ]);
+
   return {
-    getItem() {
-      return currentValue;
+    getItem(key: string) {
+      return values.get(key) ?? null;
     },
-    setItem(_key: string, value: string) {
-      currentValue = value;
+    setItem(key: string, value: string) {
+      values.set(key, value);
     },
   };
 }
@@ -43,24 +47,22 @@ test("loadState falls back to a fresh state on bad JSON", () => {
 });
 
 test("saveState writes JSON to storage under the storage key", () => {
-  let writtenKey = "";
-  let writtenValue = "";
+  const written = new Map<string, string>();
   const storage = {
     getItem() {
       return null;
     },
     setItem(key: string, value: string) {
-      writtenKey = key;
-      writtenValue = value;
+      written.set(key, value);
     },
   };
   const state = createInitialState(1_500);
   state.totalClicks = 4;
 
   saveState(state, storage);
 
-  expect(writtenKey).toBe(STORAGE_KEY);
-  expect(JSON.parse(writtenValue).totalClicks).toBe(4);
+  expect(JSON.parse(written.get(STORAGE_KEY) ?? "").totalClicks).toBe(4);
+  expect(JSON.parse(written.get(STORAGE_BACKUP_KEY) ?? "").totalClicks).toBe(4);
 });
 
 test("loadState normalizes persisted values", () => {
@@ -90,6 +92,36 @@ test("loadState creates a fresh state when storage is empty", () => {
   expect(loaded.dollars).toBe(0);
 });
 
+test("loadState falls back to backup snapshot when primary is corrupted", () => {
+  const backup = JSON.stringify({
+    totalClicks: 23,
+    lastTickAt: 8_000,
+    dollars: 12,
+  });
+
+  const loaded = loadState(createStorage("{bad-json", backup), 9_000);
+
+  expect(loaded.totalClicks).toBe(23);
+  expect(loaded.dollars).toBe(12);
+  expect(loaded.lastTickAt).toBe(8_000);
+});
+
+test("loadState prefers the newest valid snapshot", () => {
+  const primary = JSON.stringify({
+    totalClicks: 11,
+    lastTickAt: 5_000,
+  });
+  const backup = JSON.stringify({
+    totalClicks: 17,
+    lastTickAt: 8_000,
+  });
+
+  const loaded = loadState(createStorage(primary, backup), 9_000);
+
+  expect(loaded.totalClicks).toBe(17);
+  expect(loaded.lastTickAt).toBe(8_000);
+});
+
 test("encode and decode use browser base64 helpers when available", () => {
   const originalWindow = globalThis.window;
   const state = createInitialState(1_000);