v5.0.0-alpha.272: Win By VVH and Computer Logic, Puzzle Remote Server…

… CORS Fix (#103) * feat(vvh): Win By View in VVH. * feat(cpu): CPU play by Strategy: remoteness or win by. * fix(vvh): Fixed issue where links between positions and moves would render on top of the positions and move nodes. * fix(vvh): Fixed issue where move nodes would render on top of position nodes. * fix(vvh): Fixed issue where links would render on top of move nodes. * docs: Added comments based on the @jsdocs standard, cleaned up code. --------- Co-authored-by: Robert Shi <[email protected]>
GamesCrafters · Nov 17, 2023 · 7a15373 · 7a15373
1 parent 238daf9
commit 7a15373
Show file tree

Hide file tree

Showing 8 changed files with 675 additions and 87 deletions.
diff --git a/package.json b/package.json
@@ -48,5 +48,5 @@
         "preview:https": "serve dist",
         "reinstall": "rm -rf node_modules; yarn; vue-tsc --noEmit"
     },
-    "version": "5.0.0-alpha.271"
+    "version": "5.0.0-alpha.272"
 }
diff --git a/src/components/units/GameBody/AppGameBodyHeaderOptions.vue b/src/components/units/GameBody/AppGameBodyHeaderOptions.vue
@@ -62,6 +62,25 @@
                                 type="checkbox"
                                 v-model="updatedLeftPlayer.isComputer" />
                             <label for="checkbox">Computer</label>
+                            <div v-if="updatedLeftPlayer.isComputer">
+                                <div class="strategy-dropdown" v-if="supportsWinBy">
+                                    <div class="strategy-dropdown-selection">
+                                        <b>{{ CPUsStrategy[0] }} ▼</b>
+                                    </div>
+                                    <div class="strategy-dropdown-options">
+                                        <div class="strategy-dropdown-option" :class="{active: CPUStrategyOption === CPUsStrategy[0]}" v-for="CPUStrategyOption in CPUStrategies" :key="CPUStrategyOption" @click="setCPUStrategy(0, CPUStrategyOption)">
+                                            <div v-if="CPUStrategyOption != CPUsStrategy[0]">
+                                            <b>{{ CPUStrategyOption }}</b>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div v-else>
+                                <b>Remoteness</b>
+                                </div>
+                                <br>
+                                Strategy
+                            </div>
                         </div>
                         <div class="name">
                             <h4 class="title">Second Player</h4>
@@ -79,6 +98,25 @@
                                 type="checkbox"
                                 v-model="updatedRightPlayer.isComputer" />
                             <label for="checkbox">Computer</label>
+                            <div v-if="updatedRightPlayer.isComputer">
+                                <div class="strategy-dropdown" v-if="supportsWinBy">
+                                    <div class="strategy-dropdown-selection">
+                                        <b>{{ CPUsStrategy[1] }} ▼</b>
+                                    </div>
+                                    <div class="strategy-dropdown-options">
+                                        <div class="strategy-dropdown-option" :class="{active: CPUStrategyOption === CPUsStrategy[1]}" v-for="CPUStrategyOption in CPUStrategies" :key="CPUStrategyOption" @click="setCPUStrategy(1, CPUStrategyOption)">
+                                            <div v-if="CPUStrategyOption != CPUsStrategy[1]">
+                                            <b>{{ CPUStrategyOption }}</b>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div v-else>
+                                <b>Remoteness</b>
+                                </div>
+                                <br>
+                                Strategy
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -154,6 +192,8 @@
     const currentRightPlayer = computed(() => store.getters.currentRightPlayer);
     const currentLeftPlayerName = computed(() => (currentLeftPlayer ? currentLeftPlayer.value.name : ""));
     const currentRightPlayerName = computed(() => (currentRightPlayer ? currentRightPlayer.value.name : ""));
+    const currentGameType = computed(() => store.getters.currentGameType);
+    const currentGameId = computed(() => store.getters.currentGameId); 
 
     const updatedLeftPlayer = ref({ name: "", isComputer: false });
     const updatedRightPlayer = ref({ name: "", isComputer: false });
@@ -206,6 +246,29 @@
             }
         }
     );
+
+    // Stores true or false, whether the current game supports the Win By view or it does not.
+    const supportsWinBy = computed(() =>
+        store.getters.supportsWinBy(currentGameType.value, currentGameId.value)
+    );
+    
+    // Array of the available computer strategies.
+    const CPUStrategies = ["Remoteness", "Win By"]
+
+    // Default computer strategies [Remoteness, Remoteness].
+    const CPUsStrategy = ref([CPUStrategies[0],CPUStrategies[0]]);
+
+    /** 
+     * Changes the strategy of play of the CPU player to a new CPU strategy.
+     * @param {number} CPUID - the id of the CPU player. 0 for the first player, 1 for the second player.
+     * @param {string} newCPUStrategy - new CPU player strategy.
+     * @returns none.
+    */
+    const setCPUStrategy = (CPUID: number, newCPUStrategy: string) => {
+        CPUsStrategy.value[CPUID] = newCPUStrategy;
+        store.commit(mutationTypes.setCPUsStrategy, CPUsStrategy.value);
+        
+    };
 </script>
 
 <style lang="scss" scoped>
@@ -254,6 +317,7 @@
                         flex-direction: column;
                         flex-wrap: nowrap;
                         justify-content: center;
+                        min-width: 192px;
                         > .title {
                             margin: 1rem;
                         }
@@ -306,4 +370,23 @@
             }
         }
     }
+    .strategy-dropdown {
+        min-width: 192px;
+        position: relative;
+        display: inline-block;
+        cursor: pointer;
+    }
+    .strategy-dropdown-options {
+        display: none;
+        position: absolute;
+        background-color: #f9f9f9;
+        min-width: 192px;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+        padding: 6px 0px 6px 0px;
+        z-index: 1;
+    }
+
+    .strategy-dropdown:hover .strategy-dropdown-options {
+        display: block;
+    }
 </style>