Added checkers and a faux global library using a file with hardcoded …

…games

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>

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>