Added ability to change individual slots colors

holochain-apps · Nov 26, 2024 · 5fcb78f · 5fcb78f
1 parent ca99246
commit 5fcb78f
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 9 deletions.
diff --git a/ui/src/GameSpace/GameSpace.svelte b/ui/src/GameSpace/GameSpace.svelte
@@ -10,6 +10,7 @@
     type GameSpaceSyn,
     type GElement,
     type LibraryElement,
+    type PlayerSlot,
     createElement,
     getContext,
   } from '~/store';
@@ -122,6 +123,10 @@
 
     gameSpace.change({ type: 'set-players-slots', playersSlots: newPlayersSlots });
   }
+
+  function handlePlayersSlotsChange(playersSlots: PlayerSlot[]) {
+    gameSpace.change({ type: 'set-players-slots', playersSlots });
+  }
 </script>
 
 {#if $state}
@@ -163,6 +168,7 @@
           participants={$participants}
           onJoin={() => gameSpace.joinGame()}
           onLeave={() => gameSpace.leaveGame()}
+          onChangePlayersSlots={handlePlayersSlotsChange}
         />
       </div>
     {/if}

diff --git a/ui/src/GameSpace/topbar/PeopleBar.svelte b/ui/src/GameSpace/topbar/PeopleBar.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
   import cx from 'classnames';
   import UsersIcon from '~icons/fa6-solid/users';
-  import { decodeHashFromBase64 } from '@holochain/client';
   import AgentAvatar from '~/shared/AgentAvatar.svelte';
   import AgentName from '~/shared/AgentName.svelte';
-  import PlayerIcon from '../ui/PlayerIcon.svelte';
   import type { PlayerSlot } from '~/store/types';
 
+  import PlayersSlots from './PlayersSlots.svelte';
+
   export let canJoinGame: boolean;
   export let canLeaveGame: boolean;
   export let participants: Uint8Array[];
   export let playersSlots: PlayerSlot[];
   export let onJoin: () => void;
   export let onLeave: () => void;
+  export let onChangePlayersSlots: (playersSlots: PlayerSlot[]) => void;
 
   let showingParticipants = false;
 
@@ -38,9 +39,7 @@
       }}>Leave Game</button
     >
   {/if}
-  {#each playersSlots as playerSlot, slot}
-    <PlayerIcon size={34} {slot} color={playerSlot.color} pubKey={playerSlot.pubKey} />
-  {/each}
+  <PlayersSlots {playersSlots} onChange={onChangePlayersSlots} />
   <button
     class={cx('relative h14 w14 flexcc b b-black/10 ', {
       'bg-black/30 text-white': showingParticipants,
@@ -56,7 +55,7 @@
   </button>
   {#if showingParticipants}
     <div class="bg-main-900 p4 rounded-bl-md top-full w-60 absolute flex flex-col space-y-2 z-1000">
-      <div>Sync Session Participants</div>
+      <div>In the space</div>
       {#each participants as participant}
         <div class="flexcs">
           <AgentAvatar pubKey={participant} size={32} />

diff --git a/ui/src/GameSpace/topbar/PlayersSlots.svelte b/ui/src/GameSpace/topbar/PlayersSlots.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import cx from 'classnames';
+  import FillDripIcon from '~icons/fa6-solid/fill-drip';
+  import PlayerIcon from '../ui/PlayerIcon.svelte';
+  import type { PlayerSlot } from '~/store/types';
+  import AgentName from '~/shared/AgentName.svelte';
+  import { cloneDeep } from 'lodash';
+  import SimpleColorPicker from '../ui/SimpleColorPicker.svelte';
+
+  export let playersSlots: PlayerSlot[];
+  export let onChange: (playersSlots: PlayerSlot[]) => void;
+
+  function handleMove() {}
+
+  function handleSetSlotColor(slot: number, color: string) {
+    const n = cloneDeep(playersSlots);
+    n[slot].color = color;
+    onChange(n);
+  }
+</script>
+
+{#each playersSlots as playerSlot, slot}
+  <div class="group relative">
+    <PlayerIcon
+      size={34}
+      {slot}
+      class="cursor-grab"
+      color={playerSlot.color}
+      pubKey={playerSlot.pubKey}
+    />
+    <div class="hidden group-hover:block absolute z-30 top-full left-1/2 -translate-x-1/2">
+      <div class="h4 w4 b-8 b-transparent b-b-gray-100 relative left-1/2 -translate-x-1/2 -mt1.8"
+      ></div>
+      <div class="bg-gray-100 rounded-md p1 shadow-md">
+        <SimpleColorPicker value={playerSlot.color} onChange={(v) => handleSetSlotColor(slot, v)} />
+        <div class="text-center">
+          {#if playerSlot.pubKey}
+            <AgentName pubKey={playerSlot.pubKey} />
+          {:else}
+            Player {slot + 1}
+          {/if}
+        </div>
+        {#if playerSlot.pubKey}
+          <button
+            class="text-xs bg-main-400 w-full rounded-md line-height-tight py1 text-white b b-black/10 hover:bg-main-500"
+            >Remove<br />Player</button
+          >
+        {:else}
+          <button
+            class="text-xs bg-main-400 w-full rounded-md line-height-tight py1 text-white b b-black/10 hover:bg-main-500"
+            >Join Here</button
+          >
+        {/if}
+      </div>
+    </div>
+  </div>
+{/each}
+<div class="w-16 h-8 flex-shrink-0 flex">
+  <button
+    class="flexcc text-xs font-bold h-full w-1/2 bg-main-400 w-full rounded-l-md text-white b b-black/10 hover:bg-main-500"
+    on:click={() => onChange(playersSlots)}>-</button
+  >
+  <button
+    class="flexcc text-xs font-bold h-full w-1/2 bg-main-400 w-full rounded-r-md text-white b b-black/10 hover:bg-main-500"
+    on:click={() => onChange(playersSlots)}>+</button
+  >
+</div>
diff --git a/ui/src/GameSpace/ui/PlayerIcon.svelte b/ui/src/GameSpace/ui/PlayerIcon.svelte
@@ -17,15 +17,17 @@
     const yiq = (r * 299 + g * 587 + b * 114) / 1000;
     return yiq >= 128 ? '#000' : '#fff';
   }
+
+  $: borderSize = size / 12;
   $: contrastingColor = getContrastingBlackOrWhite(color);
 </script>
 
 <div
-  class={`relative flexcc rounded-full b-black/10 shadow-md b-2 ${klass}`}
-  style={`background-color: ${color}; ${style}; height: ${size}px; width: ${size}px; ${style}`}
+  class={`relative flexcc rounded-full b-black/10 shadow-md ${klass}`}
+  style={`background-color: ${color}; ${style}; height: ${size}px; width: ${size}px; ${style}; border-width: ${borderSize}px;`}
 >
   {#if pubKey}
-    <AgentAvatar class="relative z-20" size={size - 4} {pubKey} />
+    <AgentAvatar class="relative z-20" size={size - borderSize * 2} {pubKey} />
   {/if}
   <div class="absolute z-10 inset-0 flexcc opacity-80" style="color: {contrastingColor};"
     >{slot + 1}</div

diff --git a/ui/src/GameSpace/ui/SimpleColorPicker.svelte b/ui/src/GameSpace/ui/SimpleColorPicker.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { colorSequence, cx } from '~/lib/util';
+
+  export let value: string;
+  export let onChange: (value: string) => void;
+
+  const COLORS = ['#222222', '#777777', '#f7f7f7'].concat(
+    Array.from(new Array(12)).map((_, i) => colorSequence(i, 12)),
+  );
+</script>
+
+<div class="w-full whitespace-nowrap">
+  {#each COLORS as color, i}
+    <button
+      style={`background: ${color};`}
+      class={cx('inline-block w-5 h-5 rounded-full b-2 b-black/10', {
+        'b-black/30 shadow-md scale-130': color === value,
+      })}
+      on:click={() => onChange(color)}
+    ></button>
+    {#if i % 5 === 4}
+      <br />
+    {/if}
+  {/each}
+</div>