Merge pull request #92 from jparkhouse/improved-config-modal

feat: improved variant configurability
jparkhouse · Jul 28, 2024 · 32cd5ee · 32cd5ee
2 parents 4d160f2 + 45b1228
commit 32cd5ee
Showing 1 changed file with 117 additions and 28 deletions.
diff --git a/src/lib/components/ConfigModal.svelte b/src/lib/components/ConfigModal.svelte
@@ -2,36 +2,92 @@
 <script lang="ts">
   import type { GameConfig } from "../stores/gameConfigStore";
   import { gameConfigStore } from "../stores/gameConfigStore";
-  import { SuitEnum, Variant } from "../models/variantEnums";
-  import { createEventDispatcher } from "svelte";
+  import { SuitEnum } from "../models/variantEnums";
   import { resetGameStore } from "../stores/resetGameStore";
+  import { get } from "svelte/store";
 
   export let isOpen = false;
+  interface ConfigOutput {
+    numberOfCards: number;
+    numberOfStandardSuits: number;
+    blacks: boolean;
+    rainbows: boolean;
+  }
 
-  let tempConfig: GameConfig = { numberOfCards: 4, variant: SuitEnum.Red }; // Initialize with default or current values
-  let get = false;
+  let tempConfig: ConfigOutput = {
+    numberOfCards: 0,
+    numberOfStandardSuits: 0,
+    blacks: false,
+    rainbows: false,
+  };
+
+  let loaded = false;
+  let validConfig = false;
+
+  function configOutputToGameConfig(input: ConfigOutput): GameConfig {
+    const output: GameConfig = {
+      numberOfCards: input.numberOfCards,
+      variant:
+        Math.pow(2, input.numberOfStandardSuits) -
+        1 +
+        (input.rainbows ? SuitEnum.Rainbow : 0) +
+        (input.blacks ? SuitEnum.Black : 0),
+    };
+    return output;
+  }
 
-  // Subscribe to gameConfig to initialize tempConfig
-  $: if (isOpen && !get) {
-    tempConfig = { ...$gameConfigStore };
-    get = true;
+  function gameConfigToConfigOutput(input: GameConfig): ConfigOutput {
+    const output: ConfigOutput = {
+      numberOfCards: input.numberOfCards,
+      numberOfStandardSuits: getStandardSuitAmount(input.variant),
+      blacks: (input.variant & SuitEnum.Black) > 0,
+      rainbows: (input.variant & SuitEnum.Rainbow) > 0,
+    };
+    return output;
   }
 
-  const resetDispatcher = createEventDispatcher();
+  function getStandardSuitAmount(suits: SuitEnum): number {
+    let output = 0;
+    let i = 0;
+    while (i <= 4) {
+      if ((suits & (1 << i)) > 0) {
+        output += 1;
+      }
+      i += 1;
+    }
+    return output;
+  }
 
+  // Subscribe to gameConfig to initialize tempConfig
+  $: if (isOpen) {
+    if (!loaded) {
+      const gameConfig = get(gameConfigStore);
+      tempConfig = gameConfigToConfigOutput(gameConfig);
+      loaded = true;
+      console.log("tempConfig initialized:", tempConfig); // Debug statement
+    }
 
+    if (tempConfig.numberOfStandardSuits === 0 && !tempConfig.blacks && !tempConfig.rainbows) {
+      validConfig = false;
+    } else {
+      validConfig = true;
+    }
+  }
 
   function closePanel() {
     isOpen = false;
-    get = false;
+    loaded = false;
   }
 
   function saveConfig() {
-    gameConfigStore.set(tempConfig);
-    resetGameStore.update((number) => {return number + 1})
+    gameConfigStore.set(configOutputToGameConfig(tempConfig));
+    resetGameStore.update((number) => {
+      return number + 1;
+    });
     closePanel();
   }
 
+  // set button text correctly
   function areGameConfigsEqual(
     config1: GameConfig,
     config2: GameConfig
@@ -44,8 +100,14 @@
 
   let updateButtonText = "Reset";
   let cancelButtonText = "Close";
+
   $: {
-    if (areGameConfigsEqual($gameConfigStore, tempConfig)) {
+    if (
+      areGameConfigsEqual(
+        get(gameConfigStore),
+        configOutputToGameConfig(tempConfig)
+      )
+    ) {
       updateButtonText = "Reset";
       cancelButtonText = "Close";
     } else {
@@ -59,25 +121,47 @@
   <div class="modal-overlay" on:click={closePanel}>
     <div class="config-modal" on:click|stopPropagation>
       <div class="config-form">
-        <label for="numberOfCards">Number of Cards:</label>
-        <select id="numberOfCards" bind:value={tempConfig.numberOfCards}>
-          <option value="3">3</option>
-          <option value="4">4</option>
-          <option value="5">5</option>
-        </select>
-        <label for="Variant">Variant:</label>
-        <select id="Variant" bind:value={tempConfig.variant}>
-          <option value={Variant.NoVariant}>No variant</option>
-          <option value={Variant.Rainbows}>Rainbows</option>
-          <option value={Variant.Blacks}>Blacks</option>
-          <option value={Variant.RainbowsAndBlacks}>Rainbows and Blacks</option>
-        </select>
+        <div class="cards">
+          <label for="numberOfCards">Number of cards:</label>
+          <select id="numberOfCards" bind:value={tempConfig.numberOfCards}>
+            <option value={3}>3</option>
+            <option value={4}>4</option>
+            <option value={5}>5</option>
+          </select>
+        </div>
+        <div>
+          <label for="StandardSuits">Number of standard suits</label>
+          <select
+            id="StandardSuits"
+            bind:value={tempConfig.numberOfStandardSuits}
+          >
+            <option value={0}>0</option>
+            <option value={1}>1</option>
+            <option value={2}>2</option>
+            <option value={3}>3</option>
+            <option value={4}>4</option>
+            <option value={5}>5</option>
+          </select>
+
+
+          <p>Special suits</p>
+          <label>
+            Rainbows: 
+            <input type="checkbox" bind:checked={tempConfig.rainbows} />
+          </label>
+          <label>
+            Blacks: 
+            <input type="checkbox" bind:checked={tempConfig.blacks} />
+          </label>
+        </div>
       </div>
 
       <!-- Additional configuration options here -->
 
-      <button on:click={saveConfig}>{updateButtonText}</button>
-      <button on:click={closePanel}>{cancelButtonText}</button>
+      <button on:click={saveConfig} hidden={!validConfig}>{updateButtonText}</button>
+      <button on:click={closePanel} hidden={!validConfig}>{cancelButtonText}</button>
+      <button class="error-button" hidden={validConfig}>Invalid config</button>
+
     </div>
   </div>
 {/if}
@@ -97,6 +181,7 @@
 
   .config-modal {
     background-color: dimgray;
+    color: white;
     padding: 20px;
     border-radius: 5px;
     border: 2px solid lightgray;
@@ -106,4 +191,8 @@
   .config-form {
     padding: 20px;
   }
+
+  .error-button {
+    background-color: chocolate;
+  }
 </style>