Added ability to change players slots number

ui/src/GameSpace/GameSpace.svelte

@@ -22,7 +22,7 @@
   import ConfigMenu from './ConfigMenu';
   import { tooltip } from '~/shared/tooltip';
   import { cloneDeep } from 'lodash';
-  import { uuid } from '~/lib/util';
+  import { colorSequence, uuid } from '~/lib/util';
 
   export let gameSpace: GameSpaceSyn;
   export let asAsset: boolean = false;
@@ -103,6 +103,25 @@
   function handleNameChange(name: string) {
     gameSpace.change({ type: 'set-name', name });
   }
+
+  function handleMaxPlayersSlotsChange(maxPlayersSlots: number) {
+    if (maxPlayersSlots === 0 || maxPlayersSlots === $state.playersSlots.length) {
+      return;
+    }
+
+    let newPlayersSlots = cloneDeep($state.playersSlots).slice(0, maxPlayersSlots);
+    if (newPlayersSlots.length < maxPlayersSlots) {
+      for (let i = newPlayersSlots.length; i < maxPlayersSlots; i++) {
+        newPlayersSlots.push({ color: '#000', pubKey: null });
+      }
+    }
+
+    for (let i = 0; i < newPlayersSlots.length; i++) {
+      newPlayersSlots[i].color = colorSequence(i, maxPlayersSlots);
+    }
+
+    gameSpace.change({ type: 'set-players-slots', playersSlots: newPlayersSlots });
+  }
 </script>
 
 {#if $state}
@@ -160,6 +179,8 @@
               creator={$state.creator}
               name={$state.name}
               onNameChange={handleNameChange}
+              maxPlayersSlots={$state.playersSlots.length}
+              onMaxPlayersSlotsChange={handleMaxPlayersSlotsChange}
               canEdit={$permissions.canEditSpace}
             />
           {/if}

ui/src/GameSpace/elements/PlayerPiece/Element.svelte

@@ -13,10 +13,10 @@
 
   $: state = gameSpace.state;
   $: playerInfo = $state ? $state.playersSlots[el.playerSlot] : null;
-  $: color = playerInfo?.color || '#000';
+  $: color = playerInfo ? playerInfo.color : '#000';
   $: contrastColor = '#fff';
 
-  $: size = Math.min(el.width, el.height) - (playerInfo.color ? 6 : 0);
+  $: size = Math.min(el.width, el.height);
 
   $: {
     console.log(el);

ui/src/GameSpace/elements/PlayerPieceSource/Element.svelte

@@ -142,7 +142,7 @@
 </script>
 
 <div class={cx(klass, 'h-full w-full bg-main-900 rounded-md p2')}>
-  {#if $state.playersSlots.filter((s) => s.pubKey).length === 0}
+  {#if $state.playersSlots.length === 0}
     <div class="opacity-70 flexcc h-full w-full">No players</div>
   {/if}
   <div

ui/src/GameSpace/sidebar/SpaceConfigurator.svelte

@@ -2,13 +2,16 @@
   import { decodeHashFromBase64 } from '@holochain/client';
   import Avatar from '~/shared/Avatar.svelte';
   import Input from '../ui/Input.svelte';
-  import Checkbox from '../ui/Checkbox.svelte';
+  // import Checkbox from '../ui/Checkbox.svelte';
+  import IntegerInput from '../ui/IntegerInput.svelte';
 
   // export let isSteward: boolean;
   export let creator: string;
   export let name: string;
   export let onNameChange: (name: string) => void;
   // export let isStewarded: boolean;
+  export let maxPlayersSlots: number;
+  export let onMaxPlayersSlotsChange: (maxPlayersSlots: number) => void;
   export let canEdit: boolean;
   // export let onIsStewardedChange: (isStewarded: boolean) => void;
 </script>
@@ -26,5 +29,11 @@
       disabled={!isSteward}
       onInput={onIsStewardedChange}
     /> -->
+    <IntegerInput
+      value={maxPlayersSlots}
+      label="Max players slots"
+      disabled={!canEdit}
+      onInput={onMaxPlayersSlotsChange}
+    />
   </div>
 </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-players-slots'; playersSlots: GameSpace['playersSlots'] }
   | { type: 'set-is-stewarded'; isStewarded: boolean }
   | { type: 'add-player'; player: AgentPubKeyB64 }
   | { type: 'remove-player'; player: AgentPubKeyB64 }
@@ -54,6 +55,9 @@ export const applyDelta = (delta: Delta, $state: GameSpace) => {
     case 'set-name':
       $state.name = delta.name;
       break;
+    case 'set-players-slots':
+      $state.playersSlots = delta.playersSlots;
+      break;
     case 'set-is-stewarded':
       $state.isStewarded = delta.isStewarded;
       break;