Added ability to add an icon to represent each game space

ui/src/GameSpace/GameSpace.svelte

@@ -110,6 +110,10 @@
     gameSpace.change({ type: 'set-name', name });
   }
 
+  function handleIconChange(icon: string) {
+    gameSpace.change({ type: 'set-icon', icon });
+  }
+
   function handleMaxPlayersSlotsChange(maxPlayersSlots: number) {
     if (maxPlayersSlots === 0 || maxPlayersSlots === $state.playersSlots.length) {
       return;
@@ -201,6 +205,8 @@
               creator={$state.creator}
               name={$state.name}
               onNameChange={handleNameChange}
+              icon={$state.icon}
+              onIconChange={handleIconChange}
               maxPlayersSlots={$state.playersSlots.length}
               onMaxPlayersSlotsChange={handleMaxPlayersSlotsChange}
               onApplyColors={handleApplyColors}

ui/src/GameSpace/sidebar/SpaceConfigurator.svelte

@@ -6,27 +6,56 @@
   // import Checkbox from '../ui/Checkbox.svelte';
   import IntegerInput from '../ui/IntegerInput.svelte';
   import { tooltip } from '~/shared/tooltip';
+  import EmojiPicker from '~/shared/EmojiPicker.svelte';
 
   // export let isSteward: boolean;
   export let creator: string;
   export let name: string;
   export let onNameChange: (name: string) => void;
+  export let icon: string;
+  export let onIconChange: (icon: string) => void;
   // export let isStewarded: boolean;
   export let maxPlayersSlots: number;
   export let onMaxPlayersSlotsChange: (maxPlayersSlots: number) => void;
   export let onApplyColors: () => void;
   export let canEdit: boolean;
   // export let onIsStewardedChange: (isStewarded: boolean) => void;
+
+  let emojiPickerTarget: HTMLButtonElement;
+  let emojiPickerOpen = false;
+  function openEmojiPicker() {
+    emojiPickerOpen = true;
+  }
+
+  function pickedEmoji(emoji: string) {
+    emojiPickerOpen = false;
+    onIconChange(emoji);
+  }
+
+  function cancelPickEmoji() {
+    emojiPickerOpen = false;
+  }
 </script>
 
+{#if emojiPickerOpen}
+  <EmojiPicker target={emojiPickerTarget} onCancel={cancelPickEmoji} onSelect={pickedEmoji} />
+{/if}
+
 <div class="w-60 bg-main-800 h-full flex-shrink-0">
   <div class="h16 p2 relative bg-white/10 b b-black/10 flexcs">
     <div class="absolute right-2 top-1 opacity-50">Creator</div>
     <AgentAvatar pubKey={creator} size={32} />
     <AgentName class="ml2" pubKey={creator} />
   </div>
   <div class="p4 flex flex-col space-y-4">
-    <Input value={name} label="Name" disabled={!canEdit} onInput={onNameChange} />
+    <div class="flexcc">
+      <button
+        class="flexcc -mt-1 w10 h10 flex-shrink-0 mr2 rounded-md text-2xl text-white bg-main-400 hover:bg-main-500 b b-black/10 text-black"
+        on:click={openEmojiPicker}
+        bind:this={emojiPickerTarget}>{icon}</button
+      >
+      <Input value={name} label="Name" disabled={!canEdit} onInput={onNameChange} />
+    </div>
     <!-- <Checkbox
       value={isStewarded}
       label="Stewarded?"

ui/src/HomePage/GamesListItem.svelte

@@ -79,6 +79,7 @@
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Blank_Go_board.svg/600px-Blank_Go_board.svg.png?20140621020717"
         alt=""
       />
+      <div class="absolute inset-0 flexcc text-3xl text-white">{gameSpace.icon}</div>
       <div class="hidden group-hover:flexcc absolute inset-0 text-2xl text-main-900">
         <PlayIcon />
       </div>

ui/src/HomePage/LibraryListItem.svelte

@@ -68,6 +68,7 @@
         src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Blank_Go_board.svg/600px-Blank_Go_board.svg.png?20140621020717"
         alt=""
       />
+      <div class="absolute inset-0 flexcc text-2xl text-white">{gameSpace.icon}</div>
       <div class="hidden group-hover:flexcc absolute inset-0 text-2xl text-main-900">
         <PlayIcon />
       </div>

ui/src/store/grammar.ts

@@ -12,6 +12,7 @@ export type Delta =
   | { type: 'set-is-archived'; value: boolean }
   | { type: 'set-is-library-item'; value: boolean }
   | { type: 'set-name'; name: string }
+  | { type: 'set-icon'; icon: string }
   | { type: 'set-players-slots'; playersSlots: GameSpace['playersSlots'] }
   | { type: 'set-is-stewarded'; isStewarded: boolean }
   | { type: 'add-player'; player: AgentPubKeyB64 }
@@ -26,8 +27,9 @@ export type Delta =
 
 export function initialState(pubKey: string): GameSpace {
   return {
-    version: 7,
+    version: 8,
     name: 'Game Space',
+    icon: '♟',
     creator: pubKey,
     elements: [],
     wals: [],
@@ -55,6 +57,9 @@ export const applyDelta = (delta: Delta, $state: GameSpace) => {
     case 'set-name':
       $state.name = delta.name;
       break;
+    case 'set-icon':
+      $state.icon = delta.icon;
+      break;
     case 'set-players-slots':
       $state.playersSlots = delta.playersSlots;
       break;
@@ -165,5 +170,5 @@ export const applyDelta = (delta: Delta, $state: GameSpace) => {
   }
 
   $state.lastChangeAt = Date.now();
-  $state.version = 7;
+  $state.version = 8;
 };

ui/src/store/migration.ts

@@ -79,5 +79,11 @@ export default function migration(gottenState: GameSpace): GameSpace {
     gottenState.version = 7;
   }
 
+  if ((gottenState.version as 7) === 7) {
+    gottenState.icon = '♟';
+    // @ts-ignore
+    gottenState.version = 8;
+  }
+
   return gottenState;
 }

ui/src/store/presets/blank.ts

@@ -26,6 +26,7 @@ export default {
   ],
   isLibraryItem: true,
   isArchived: false,
-  version: 7,
+  version: 8,
+  icon: '🟩',
   wals: [],
 } as const satisfies GameSpace;

ui/src/store/presets/checkers.ts

@@ -831,6 +831,7 @@ export default {
   ],
   isLibraryItem: true,
   isArchived: false,
-  version: 7,
+  version: 8,
+  icon: '🔴',
   wals: [],
 } as const satisfies GameSpace;

ui/src/store/presets/chess.ts

@@ -831,6 +831,7 @@ export default {
   ],
   isLibraryItem: true,
   isArchived: false,
-  version: 7,
+  version: 8,
+  icon: '♟',
   wals: [],
 } as const satisfies GameSpace;

ui/src/store/presets/go.ts

@@ -143,6 +143,7 @@ export default {
   ],
   isLibraryItem: true,
   isArchived: false,
-  version: 7,
+  version: 8,
+  icon: '⚪️',
   wals: [],
 } as const satisfies GameSpace;

ui/src/store/presets/world.ts

@@ -90,6 +90,7 @@ export default {
   ],
   isLibraryItem: true,
   isArchived: false,
-  version: 7,
+  version: 8,
+  icon: '🗺',
   wals: [],
 } as const satisfies GameSpace;

ui/src/store/types.ts

@@ -2,10 +2,11 @@ import type { WeaveUrl } from '@theweave/api';
 
 import * as elements from '~/GameSpace/elements';
 
-export const VERSION = 7;
+export const VERSION = 8;
 
 export type GameSpace = {
-  version: 7;
+  version: typeof VERSION;
+  icon: string;
   name: string;
   creator: string;
   elements: GElement[];