add some fixes

2026-08-24 20:39:55 +02:00
parent cab6a3e7f1
commit a79363b4da
3 changed files with 82 additions and 29 deletions
@@ -1,11 +1,14 @@
 <script setup lang="ts">
+import { empty } from 'valibot';
+

 </script>

 <template>
-    <div class="flex-container">
-        <div v-for="i in guess" class="wr-div">
-            {{ i }}
+    <div class="flex-container gap-1.5">
+        <div v-for="i in getGuess.length" class="border border-default wr-div" :class="{'correct' : getCorrectness[i-1]==2, 'wrong-place' : correctness[i-1]==1}">
+            {{ getGuess[i-1] }}
+            {{ correct[i-1] }}
        </div>
    </div>
 </template> 
@@ -14,31 +17,60 @@
    export default {
        data() {
            return {
-                guess: '',
+
            }
        },
        props: {
-            guess: '',
-            guess_count: 0,
-            index: 0,
-            length: 6,
-        }
+            correct: {
+                type: String,
+                default: 'testword',
+            },
+            guess: {
+                type: String,
+                default: '',
+            },
+            index: Number,
+        },
+
+        computed: {
+            getGuess() {
+                let guess = '';
+                if (this.guess.length == 0)
+                {
+                    for (let i = 0; i < length; i++) {
+                        guess += ' ';
+                    }
+                }
+                return guess;
+            },
+            getCorrectness() : number[] {
+                let correctness = [];
+                for (let i = 0; i < this.guess.length; i++) {
+                    if (this.guess[i] == this.correct[i]) {
+                        correctness.push(2);
+                    }
+                }
+                return correctness;
+            }
+        },
    }
 </script>

 <style scoped>
-    .flex-container {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
    .wr-div {
        justify-content: center;
        border-radius: 6px;
-        width: 40px;
-        height: 40px;
-        line-height: 24px;
-        background-color: red;
+        width: 36px;
+        height: 36px;
+        line-height: 22px;
+        background-color: transparent;
+        text-transform: uppercase;
+        font-weight: bold;
+    }
+    .correct {
+        background-color: rgb(0, 126, 2);
+    }
+    .wrong-place {
+        background-color: rgb(37, 43, 154);
    }
 </style>