Allow to move players to arbitrary slots

holochain-apps · Dec 1, 2024 · ddb14d3 · ddb14d3
1 parent ea6f209
commit ddb14d3
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 36 deletions.
diff --git a/ui/src/GameSpace/topbar/PlayersSlots.svelte b/ui/src/GameSpace/topbar/PlayersSlots.svelte
@@ -1,18 +1,25 @@
 <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';
-  import { COLORS } from '~/lib/util';
+  import { addWindowEventListener, COLORS, EMPTY_IMAGE, wrapFns } from '~/lib/util';
+  import { tooltip } from '~/shared/tooltip';
 
   export let pubKey: string;
   export let playersSlots: PlayerSlot[];
   export let onChange: (playersSlots: PlayerSlot[]) => void;
 
-  function handleMove() {}
+  function handleMove(from: number, to: number) {
+    if (from !== to) {
+      const newPlayersSlots = cloneDeep(playersSlots);
+      const fromKey = newPlayersSlots[from].pubKey;
+      newPlayersSlots[from].pubKey = newPlayersSlots[to].pubKey;
+      newPlayersSlots[to].pubKey = fromKey;
+      onChange(newPlayersSlots);
+    }
+  }
 
   function handleSetSlotColor(slot: number, color: string) {
     const n = cloneDeep(playersSlots);
@@ -50,44 +57,61 @@
   }
 </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">
+<div class="flex space-x-2">
+  {#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 mb1">
+            {#if playerSlot.pubKey}
+              <div class="flex">
+                <AgentName class="flex-grow" pubKey={playerSlot.pubKey} />
+                <select
+                  value={slot}
+                  class="outline-main-500 b b-black/10 rounded-md"
+                  on:change={(ev) => handleMove(slot, +ev.currentTarget.value)}
+                  use:tooltip={'Move to different slot'}
+                >
+                  {#each playersSlots as playerSlot, i}
+                    <option value={i}>{i + 1}</option>
+                  {/each}
+                </select>
+              </div>
+            {:else}
+              Player {slot + 1}
+            {/if}
+          </div>
           {#if playerSlot.pubKey}
-            <AgentName pubKey={playerSlot.pubKey} />
+            <button
+              on:click={() => handleRemovePlayer(slot)}
+              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}
-            Player {slot + 1}
+            <button
+              on:click={() => handleJoinSlot(slot)}
+              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>
-        {#if playerSlot.pubKey}
-          <button
-            on:click={() => handleRemovePlayer(slot)}
-            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
-            on:click={() => handleJoinSlot(slot)}
-            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}
+  {/each}
+</div>
 <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"

diff --git a/ui/src/lib/util.ts b/ui/src/lib/util.ts
@@ -80,3 +80,31 @@ export const COLORS = ['#222222', '#777777', '#f7f7f7'].concat(
 );
 
 export const cx = classnames;
+
+export const addWindowEventListeners = <K extends keyof WindowEventMap>(
+  eventCallbackPairs: [K, (event: WindowEventMap[K]) => void][],
+): (() => void) => (
+  eventCallbackPairs.forEach(([event, callback]) => {
+    window.addEventListener(event, callback);
+  }),
+  () => {
+    eventCallbackPairs.forEach(([event, callback]) => {
+      window.removeEventListener(event, callback);
+    });
+  }
+);
+export const addWindowEventListener = <K extends keyof WindowEventMap>(
+  event: K,
+  callback: (event: WindowEventMap[K]) => void,
+): (() => void) => {
+  window.addEventListener(event, callback);
+  return () => {
+    window.removeEventListener(event, callback);
+  };
+};
+
+export const wrapFns = (fns: (() => void)[]) => () => fns.forEach((fn) => fn());
+
+export const EMPTY_IMAGE = new Image(1, 1);
+EMPTY_IMAGE.src =
+  'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';