From 309392c6febf75a6cebf8c2097c3db47d35b7a42 Mon Sep 17 00:00:00 2001
From: Ezequiel Adrian Schwartzman <zequez@gmail.com>
Date: Sat, 16 Nov 2024 19:11:39 -0300
Subject: [PATCH] Added import/export to the new home layout

---
 ui/src/HomePage2/GamesList.svelte       |  5 +++++
 ui/src/HomePage2/GamesListItem.svelte   |  7 ++++++-
 ui/src/HomePage2/HomePage2.svelte       | 11 ++++++++---
 ui/src/HomePage2/LibraryList.svelte     | 14 ++++++--------
 ui/src/HomePage2/LibraryListItem.svelte | 14 +++++++++++++-
 ui/src/store/rootStore.ts               |  2 +-
 6 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/ui/src/HomePage2/GamesList.svelte b/ui/src/HomePage2/GamesList.svelte
index 1bb38b6..5c768c1 100644
--- a/ui/src/HomePage2/GamesList.svelte
+++ b/ui/src/HomePage2/GamesList.svelte
@@ -49,6 +49,10 @@
     gameSpace.change({ type: 'set-is-archived', value: false }, true);
   }
 
+  function handleExport(gameSpace: GameSpaceSyn) {
+    gameSpace.exportAsJson();
+  }
+
   let showArchive = false;
 </script>
 
@@ -60,6 +64,7 @@
       onDuplicate={() => handleDuplicate($state)}
       onArchive={() => handleArchive(gameSpace)}
       onDelete={() => handleDelete(gameSpace.hash)}
+      onExport={() => handleExport(gameSpace)}
     />
   {/each}
 
diff --git a/ui/src/HomePage2/GamesListItem.svelte b/ui/src/HomePage2/GamesListItem.svelte
index e089f19..631b55c 100644
--- a/ui/src/HomePage2/GamesListItem.svelte
+++ b/ui/src/HomePage2/GamesListItem.svelte
@@ -15,6 +15,7 @@
   export let onArchive = () => {};
   export let onDelete = () => {};
   export let onUnarchive = () => {};
+  export let onExport = () => {};
 
   let menuOpen = false;
   let menuButtonEl: HTMLButtonElement;
@@ -40,7 +41,7 @@
   //   },
   // );
 
-  type MenuCommands = 'duplicate' | 'edit' | 'archive' | 'delete' | 'unarchive';
+  type MenuCommands = 'duplicate' | 'edit' | 'archive' | 'delete' | 'unarchive' | 'export';
 
   function onSelectMenu(command: MenuCommands) {
     switch (command) {
@@ -59,6 +60,9 @@
       case 'unarchive':
         onUnarchive();
         break;
+      case 'export':
+        onExport();
+        break;
     }
     menuOpen = false;
   }
@@ -130,6 +134,7 @@
         ]
       : [
           ['duplicate', 'Duplicate'],
+          ['export', 'Export'],
           ['archive', 'Archive'],
           ['delete', 'Delete'],
         ]}
diff --git a/ui/src/HomePage2/HomePage2.svelte b/ui/src/HomePage2/HomePage2.svelte
index 2cc6adf..889e9e8 100644
--- a/ui/src/HomePage2/HomePage2.svelte
+++ b/ui/src/HomePage2/HomePage2.svelte
@@ -54,10 +54,15 @@
     <GamesList />
   </div>
   <div class="w-100 bg-main-700 flex flex-col">
-    <div class="flexcc px1 h12 bg-main-500 text-white">
-      <h2 class="text-2xl p2 tracking-wider flex-grow">Library</h2>
+    <div class="flexcc px2 h12 bg-main-500 text-white">
+      <h2 class="text-2xl tracking-wider flex-grow ml2">Library</h2>
       <button
-        class="w10 h10 flexcc bg-white/20 rounded-md hover:bg-white/30"
+        on:click={handleImport}
+        class="bg-white/20 my2 h8 mr2 rounded-md b b-white/10 text-white/80 text-sm uppercase px2 hover:bg-white/30"
+        >Import</button
+      >
+      <button
+        class="w8 h8 flexcc bg-white/20 rounded-md b b-white/10 hover:bg-white/30"
         on:click={handleNewLibraryItem}><PlusIcon /></button
       >
     </div>
diff --git a/ui/src/HomePage2/LibraryList.svelte b/ui/src/HomePage2/LibraryList.svelte
index b9f0729..d09c042 100644
--- a/ui/src/HomePage2/LibraryList.svelte
+++ b/ui/src/HomePage2/LibraryList.svelte
@@ -15,7 +15,7 @@
   $: sortedTaggedGameSpaces = derived(gameDocsStates, ($states) => {
     const loadedGameDocs = zip(Object.values($gameDocs), $states);
     return loadedGameDocs
-      .filter(([_, $state]) => $state !== null && $state.isLibraryItem)
+      .filter(([_, $state]) => $state !== null && $state.isLibraryItem && !$state.isArchived)
       .sort(([_1, $stA], [_2, $stB]) => $stB.lastChangeAt - $stA.lastChangeAt);
   });
 
@@ -28,13 +28,6 @@
 
   let presetsItems = Object.values(presets);
 
-  // $: allNames = derived(gameDocsStates, ($states) =>
-  //   $states.filter((s) => s).map(($state) => $state?.name),
-  // );
-  // $: unimportedGlobalLibrary = derived(allNames, ($names) => {
-  //   return Object.values(presets).filter((space) => $names.indexOf(space.name) === -1);
-  // });
-
   async function handlePlayFromLibrary(gameSpace: GameSpace) {
     const newGameSpace: GameSpace = {
       ...cloneDeep(gameSpace),
@@ -75,6 +68,10 @@
     gameSpace.change({ type: 'set-is-archived', value: false }, true);
   }
 
+  function handleExport(gameSpace: GameSpaceSyn) {
+    gameSpace.exportAsJson();
+  }
+
   let showArchive = false;
 </script>
 
@@ -89,6 +86,7 @@
         onEdit={() => handleEdit(gameSpace.hash)}
         onDuplicate={() => handleDuplicate($state)}
         onDelete={() => handleDelete(gameSpace.hash)}
+        onExport={() => handleExport(gameSpace)}
       />
     {/if}
   {/each}
diff --git a/ui/src/HomePage2/LibraryListItem.svelte b/ui/src/HomePage2/LibraryListItem.svelte
index 7decb70..a61642f 100644
--- a/ui/src/HomePage2/LibraryListItem.svelte
+++ b/ui/src/HomePage2/LibraryListItem.svelte
@@ -15,11 +15,19 @@
   export let onArchive = () => {};
   export let onDelete = () => {};
   export let onUnarchive = () => {};
+  export let onExport = () => {};
 
   let menuOpen = false;
   let menuButtonEl: HTMLButtonElement;
 
-  type MenuCommands = 'edit' | 'edit-copy' | 'duplicate' | 'archive' | 'delete' | 'unarchive';
+  type MenuCommands =
+    | 'edit'
+    | 'edit-copy'
+    | 'duplicate'
+    | 'archive'
+    | 'delete'
+    | 'unarchive'
+    | 'export';
 
   function onSelectMenu(command: MenuCommands) {
     switch (command) {
@@ -41,6 +49,9 @@
       case 'unarchive':
         onUnarchive();
         break;
+      case 'export':
+        onExport();
+        break;
     }
     menuOpen = false;
   }
@@ -98,6 +109,7 @@
         : [
             ['edit', 'Edit'],
             ['duplicate', 'Duplicate'],
+            ['export', 'Export'],
             ['archive', 'Archive'],
             ['delete', 'Delete'],
           ]}
diff --git a/ui/src/store/rootStore.ts b/ui/src/store/rootStore.ts
index 266581d..1cf7bdf 100644
--- a/ui/src/store/rootStore.ts
+++ b/ui/src/store/rootStore.ts
@@ -116,7 +116,6 @@ export function createRootStore(
       input.type = 'file';
       input.accept = '.json';
       input.addEventListener('change', (e: any) => {
-        console.log('READING!');
         const file = e.currentTarget.files[0];
         const reader = new FileReader();
         reader.onload = async (e) => {
@@ -124,6 +123,7 @@ export function createRootStore(
           const state = JSON.parse(text) as GameSpace;
           const validState = validateGameSpace(state);
           if (validState) {
+            validState.players = [];
             validState.creator = pubKey;
             resolve(createGameSpace(validState));
           } else {