From 53340e64af062feb9f6d143cd25b822e9a57d3cd Mon Sep 17 00:00:00 2001
From: CortezSMz <cortez_alexandre@hotmail.com>
Date: Mon, 11 Apr 2022 11:06:18 -0300
Subject: [PATCH] implement difficult settings

---
 README.md                   | 21 +++++------
 src/components/Controls.vue | 70 +++++++++++++++++++++++++++----------
 src/plugins/vuetify.ts      |  2 +-
 3 files changed, 63 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index 410023a..d5f657e 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,20 @@
-
 # Connect Four
 
-3D Connect Four game made with Three.js, TypeScript and Vue for UI. Play agains a minimax algorithm.
+3D Connect Four game made with Three.js, TypeScript and Vue for UI. Play against a minimax algorithm.
 
 ## [Live demo](https://connectfour.alexandrecortez.dev/)
 
 ## To Do
- - [ ] Minimax
-	 - [x] Implement minimax to play as yellow
-	 - [ ] Implement difficult settings (how many plays on the future does it see)
-	 - [ ] Optimize algorithm
-	 - [ ] Make it optional to play agains minimax - to control both discs and play locally
- - [ ] Polish UI
-	 - [ ] Include more animations
-	 - [ ] Better ending screen
+
+- [ ] Minimax
+  - [x] Implement minimax to play as yellow
+  - [x] Implement difficult settings (how many plays on the future does it see)
+  - [ ] Optimize algorithm
+  - [ ] Make it optional to play against minimax - to control both discs and play locally
+- [ ] Polish UI
+  - [ ] Include more animations
+  - [ ] Better ending screen
 
 ## Inspiration
+
 This app is inspired by [Areknawo's 2048](https://github.com/areknawo/2048).
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index 0323ff9..567797f 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -1,6 +1,7 @@
 <template>
   <v-footer color="primary" app>
     <v-row justify="center" align="center" class="footer-row text-center">
+      <!-- Github link -->
       <v-col cols="2">
         <v-btn
           light
@@ -19,10 +20,12 @@
         </v-btn>
       </v-col>
 
+      <!-- Title -->
       <v-col cols="8">
         <strong>Connect Four</strong>
       </v-col>
 
+      <!-- Controls -->
       <v-col cols="2">
         <v-bottom-sheet
           v-model="controls"
@@ -30,6 +33,17 @@
           eager
           overlay-opacity="0.05"
         >
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn light fab small v-bind="attrs" v-on="on">
+              <font-awesome-icon
+                icon="gear"
+                size="2x"
+                :style="{ color: 'var(--v-primary-base)' }"
+              />
+            </v-btn>
+          </template>
+
+          <!-- Finish alert -->
           <v-alert v-model="finished" class="text-center" color="primary">
             {{
               this.$parent.manager.state.finished
@@ -41,15 +55,8 @@
                 : ""
             }}
           </v-alert>
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn light fab small v-bind="attrs" v-on="on">
-              <font-awesome-icon
-                icon="gear"
-                size="2x"
-                :style="{ color: 'var(--v-primary-base)' }"
-              />
-            </v-btn>
-          </template>
+
+          <!-- Sheet -->
           <v-sheet class="footer-sheet" color="primary">
             <v-row align="center" justify="center">
               <v-col cols="12">
@@ -59,7 +66,24 @@
                   horizontal, vertical, or diagonal line of four discs.
                 </p>
               </v-col>
-              <v-col cols="12">
+              <v-col cols="10" lg="6">
+                <v-slider
+                  :readonly="finished"
+                  v-model="$parent.manager.minimax.depth"
+                  color="secondary"
+                  label="Difficult"
+                  min="1"
+                  max="8"
+                  thumb-label="always"
+                  persistent-hint
+                  :hint="difficultHint"
+                >
+                  <template v-slot:thumb-label="{ value }">
+                    <span class="v-btn">{{ value }}</span>
+                  </template>
+                </v-slider>
+              </v-col>
+              <v-col cols="auto">
                 <v-btn class="footer-btn" rounded light @click="resetCamera"
                   >Reset camera</v-btn
                 >
@@ -68,15 +92,6 @@
                 >
               </v-col>
             </v-row>
-            <v-row align="center" justify="center">
-              <v-btn class="footer-btn" small light fab v-if="false">
-                <font-awesome-icon
-                  icon="save"
-                  size="2x"
-                  :style="{ color: 'var(--v-primary-base)' }"
-                />
-              </v-btn>
-            </v-row>
           </v-sheet>
         </v-bottom-sheet>
       </v-col>
@@ -96,6 +111,23 @@ import { Watch } from "vue-property-decorator";
     finished() {
       return this.$parent.manager.state.finished;
     },
+    difficultHint() {
+      const difficult: Record<number, string> = {
+        1: "passive",
+        2: "passive",
+        3: "easy",
+        4: "easy",
+        5: "moderate",
+        6: "moderate",
+        7: "tougher",
+        8: "tougher",
+      };
+      return `AI will test ${
+        this.$parent.manager.minimax.depth
+      } plays in the future. (${
+        difficult[this.$parent.manager.minimax.depth]
+      })`;
+    },
   },
 })
 export default class Controls extends Vue {
diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts
index 3187a9c..dd48c23 100644
--- a/src/plugins/vuetify.ts
+++ b/src/plugins/vuetify.ts
@@ -12,7 +12,7 @@ export default new Vuetify({
     themes: {
       dark: {
         primary: "#4e79f4",
-        secondary: "#FF0000",
+        secondary: "#FFFFFF",
       },
     },
   },