Added import/export to the new home layout

holochain-apps · Nov 16, 2024 · 309392c · 309392c
1 parent 514bb55
commit 309392c
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -116,14 +116,14 @@ 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) => {
           const text = e.target.result as string;
           const state = JSON.parse(text) as GameSpace;
           const validState = validateGameSpace(state);
           if (validState) {
+            validState.players = [];
             validState.creator = pubKey;
             resolve(createGameSpace(validState));
           } else {