From 6500d8264306669df616eaa8d2be84c003231840 Mon Sep 17 00:00:00 2001
From: Ezequiel Adrian Schwartzman <zequez@gmail.com>
Date: Mon, 11 Nov 2024 12:09:38 -0300
Subject: [PATCH] Added checkers and a faux global library using a file with
 hardcoded games

---
 ui/src/HomePage2/DefaultGameItem.svelte |  24 +
 ui/src/HomePage2/GamesList.svelte       |  14 +-
 ui/src/store/defaultSpaces.ts           | 828 ++++++++++++++++++++++++
 ui/src/store/index.ts                   |   1 +
 4 files changed, 866 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/HomePage2/DefaultGameItem.svelte
 create mode 100644 ui/src/store/defaultSpaces.ts

diff --git a/ui/src/HomePage2/DefaultGameItem.svelte b/ui/src/HomePage2/DefaultGameItem.svelte
new file mode 100644
index 0000000..27b5554
--- /dev/null
+++ b/ui/src/HomePage2/DefaultGameItem.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { GameSpace } from '~/store';
+
+  export let gameSpace: GameSpace;
+  export let onImport: () => void;
+</script>
+
+<div class={'bg-white/10 p2 b b-white/10 rounded-md max-w-screen-sm mx-auto w-full flex'}>
+  <div class="h16 w16 flex-shrink-0 mr2 relative">
+    <img
+      src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Blank_Go_board.svg/600px-Blank_Go_board.svg.png?20140621020717"
+      alt=""
+    />
+  </div>
+  <div class="flex flex-grow h16 items-center content-">
+    <h2 class="text-xl flex-grow text-black/70">{gameSpace.name}</h2>
+    <div class="flex-grow"></div>
+    <button
+      on:click={onImport}
+      class="h8 bg-main-500 hover:bg-main-600 b b-black/10 rounded-md uppercase text-sm tracking-wider px2 text-white"
+      >Import</button
+    >
+  </div>
+</div>
diff --git a/ui/src/HomePage2/GamesList.svelte b/ui/src/HomePage2/GamesList.svelte
index e51bf36..9f5716e 100644
--- a/ui/src/HomePage2/GamesList.svelte
+++ b/ui/src/HomePage2/GamesList.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { get, derived } from 'svelte/store';
   import { zip } from 'lodash';
-  import { getContext } from '~/store';
+  import { getContext, defaultSpaces } from '~/store';
   import GamesListItem from './GamesListItem.svelte';
+  import DefaultGameItem from './DefaultGameItem.svelte';
 
   type Tag = 'active' | 'library' | 'globalLibrary' | 'draft' | 'archived';
   export let tag: Tag;
@@ -28,6 +29,11 @@
       .sort(([_1, $stA], [_2, $stB]) => $stB.lastChangeAt - $stA.lastChangeAt)
       .map(([gameSpace, _]) => gameSpace);
   });
+
+  $: allNames = derived(gameDocsStates, ($states) => $states.map(($state) => $state.name));
+  $: unimportedGlobalLibrary = derived(allNames, ($names) => {
+    return Object.values(defaultSpaces).filter((space) => $names.indexOf(space.name) === -1);
+  });
 </script>
 
 <div class="flex flex-col p2 space-y-2">
@@ -37,4 +43,10 @@
   {#each $sortedTaggedGameSpaces as gameSpace (gameSpace.hash)}
     <GamesListItem {gameSpace} />
   {/each}
+  {#if tag === 'library' && $unimportedGlobalLibrary.length > 0}
+    <h2 class="text-center py4 text-lg">Global library</h2>
+    {#each $unimportedGlobalLibrary as gameSpace (gameSpace.name)}
+      <DefaultGameItem {gameSpace} onImport={() => store.createGameSpace(gameSpace)} />
+    {/each}
+  {/if}
 </div>
diff --git a/ui/src/store/defaultSpaces.ts b/ui/src/store/defaultSpaces.ts
new file mode 100644
index 0000000..66e5efe
--- /dev/null
+++ b/ui/src/store/defaultSpaces.ts
@@ -0,0 +1,828 @@
+import type { GameSpace } from './types';
+
+const checkers: GameSpace = {
+  creator: '',
+  elements: [
+    {
+      height: 440,
+      lock: {
+        config: false,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Image',
+      url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Chessboard_green_squares.svg/512px-Chessboard_green_squares.svg.png',
+      uuid: 'c41c01f0-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 468,
+      x: 1.5,
+      y: 1,
+      z: 1,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'd042d120-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -190.5,
+      y: -191,
+      z: 3,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'd1da6110-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -134.5,
+      y: -191,
+      z: 4,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'd57fc260-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -80.5,
+      y: -190,
+      z: 5,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'e82307b0-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -24.5,
+      y: -190,
+      z: 6,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'eab8a6b0-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 30.5,
+      y: -191,
+      z: 7,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'ed197a10-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 87.5,
+      y: -189,
+      z: 8,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'eefae440-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 143.5,
+      y: -190,
+      z: 9,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'f1ae6b80-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 196.5,
+      y: -189,
+      z: 10,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'f46d8b80-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -188.5,
+      y: -135,
+      z: 11,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'f5e31480-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -133.5,
+      y: -135,
+      z: 12,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'f8c9b9b0-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -81.5,
+      y: -135,
+      z: 13,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'fbc54670-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -22.5,
+      y: -134,
+      z: 14,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: 'fe250860-a037-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 28.5,
+      y: -134,
+      z: 15,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '007c65e0-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 85.5,
+      y: -135,
+      z: 16,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '021b6fe0-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 142.5,
+      y: -135,
+      z: 17,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '⚫️',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '043d1760-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 196.5,
+      y: -133,
+      z: 18,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '1339c2e0-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -187.5,
+      y: 192,
+      z: 20,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '15982540-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -133.5,
+      y: 196,
+      z: 21,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '174b5380-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -78.5,
+      y: 194,
+      z: 22,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '193214e0-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -25.5,
+      y: 194,
+      z: 23,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '1b4b09d0-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 30.5,
+      y: 196,
+      z: 24,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '1d4ccd40-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 85.5,
+      y: 194,
+      z: 25,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '1f9117f0-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 138.5,
+      y: 194,
+      z: 26,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '21795ff0-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 196.5,
+      y: 194,
+      z: 27,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 42,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '2394c5e0-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -189.5,
+      y: 138,
+      z: 28,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '2545f850-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -136.5,
+      y: 139,
+      z: 29,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '277693f0-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -81.5,
+      y: 137,
+      z: 30,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '2960b0b0-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: -24.5,
+      y: 139,
+      z: 31,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '2aeb4850-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 30.5,
+      y: 139,
+      z: 32,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '2cbc10b0-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 86.5,
+      y: 141,
+      z: 33,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '2e4bb160-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 141.5,
+      y: 138,
+      z: 34,
+    },
+    {
+      display: {
+        mode: 'emoji',
+        value: '🔴',
+      },
+      height: 30,
+      lock: {
+        config: true,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      type: 'Piece',
+      uuid: '3046be10-a038-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 30,
+      x: 196.5,
+      y: 138,
+      z: 35,
+    },
+    {
+      height: 250,
+      lock: {
+        config: false,
+        position: false,
+        remove: false,
+        rotation: false,
+        size: false,
+        wals: false,
+      },
+      rotation: 0,
+      showTimers: true,
+      turnsLog: [],
+      type: 'TurnTracker',
+      uuid: 'b5ec7f90-a039-11ef-8b06-8597ca08db5f',
+      version: 1,
+      wals: [],
+      width: 200,
+      x: 354.5,
+      y: -16,
+      z: 36,
+    },
+  ],
+  isStewarded: false,
+  lastChangeAt: 1731335551423,
+  minMaxPlayers: [1, 4],
+  name: 'Checkers',
+  players: [],
+  status: 'library',
+  version: 4,
+  wals: [],
+};
+
+export { checkers };
diff --git a/ui/src/store/index.ts b/ui/src/store/index.ts
index af48518..f348f89 100644
--- a/ui/src/store/index.ts
+++ b/ui/src/store/index.ts
@@ -3,3 +3,4 @@ export { createRootStore, type RootStore, setContext, getContext } from './rootS
 export { type GameSpaceSyn } from './gameSpaceStore';
 export type { GameSpace, LockConfig, GElementBase, GElement } from './types';
 export { type LibraryElement, createElement, LIBRARY } from './library';
+export * as defaultSpaces from './defaultSpaces';