wordle backend and some frontend changes

resources/js/components/GuessWord.vue

@@ -1,20 +1,43 @@
 <template>
-    <Transition appear>
-        <div v-if="true" class="gw-div" :class="{ 'less': correctness==-3, 'more': correctness==-2, 'default': correctness==0, 'cw-cp': correctness==4, 'cw-ip': correctness==3, 'cf-cp': correctness==2, 'cf-ip': correctness==1 }">
+        <button v-if="true"
+                @click="onclick"
+                class="gw-div"
+                :class="{
+                    'less': correctness==-3,
+                    'more': correctness==-2,
+                    'default': correctness==0,
+                    'cw-cp': correctness==4,
+                    'cw-ip': correctness==3,
+                    'cf-cp': correctness==2,
+                    'cf-ip': correctness==1
+                }">
             <slot></slot>
-        </div>
-    </Transition>
+        </button>
 </template>
 
 <script lang="ts">
-import { Transition } from 'vue';
     export default {
+        data() {
+            return {
+                modal_open: false,
+            }
+        },
         props: {
             correctness: {
                 type: Number,
                 default: 0,
+                correct: {
+                    type: String,
+                    default: ''
+                }
             }, 
-        }
+        },
+        methods: {
+            onclick () {
+                if (this.correctness == 2) this.modal_open = true;
+            }
+        },
+        
     }
 </script>
 

resources/js/components/Wordle.vue

@@ -5,19 +5,19 @@
         <div class="flex-container-a gap-1.5">
             <template v-for="i in max_guesses">
 
-                <WordleRow v-if="guesses.length > i" :guess="guesses[i]" :length="length" :correct="correct"/>
+                <WordleRow v-if="guesses.length > i" :guess="guesses[i]" :length="correct.length" :correct="correct"/>
 
-                    <UForm @submit="onsubmit" v-if="guesses.length == i">
-                        
-                        <UPinInput v-if="guesses[guesses.length-1].toString().replace(/\,/gi, '') != correct" default class="mb-2" autofocus v-model="guess" color="neutral" :length="length" size="lg" :correct="correct" />
+                <UForm @submit="onsubmit" v-if="guesses.length == i">
+                    <UPinInput v-if="guesses[guesses.length-1].toString().replace(/\,/gi, '') != correct" default class="mb-2" autofocus v-model="guess" color="neutral" :length="correct.length" size="lg" :correct="correct" />
 
-                        <WordleRow v-else :length="length"/>
+                    <WordleRow v-else :length="correct.length"/>
 
-                        <UButton type="submit" style="display: none;">
-                            Submit
-                        </UButton>
-                    </UForm>
-                    <WordleRow v-if="guesses.length < i" :length="length"/>
+                    <UButton type="submit" style="display: none;">
+                        Submit
+                    </UButton>
+                </UForm>
+
+                <WordleRow v-if="guesses.length < i" :length="correct.length"/>
             </template>
         </div>
     </Modal>
@@ -35,7 +35,6 @@
                 max_guesses: 10,
                 open: true,
                 guess: '',
-                length: 8,
                 guesses: [''],
             }
         },
@@ -43,11 +42,12 @@
             correct: {
                 type: String,
                 default: 'nagyonhosszezugyselesz'
-            }
+            },
+            
         },
         methods: {
             onsubmit () {
-                if (this.guess.length == this.length) {
+                if (this.guess.length == this.correct.length) {
                     this.guesses.push(this.guess);
                     this.guess = '';
                 }

resources/js/components/WordleRow.vue

@@ -4,9 +4,9 @@
 
 <template>
     <div class="flex-container gap-1.5">
-            <div v-for="i in length" class="border border-default wr-div" :class="{'correct' : getCorrectness[i-1]==2, 'wrong-place' : getCorrectness[i-1]==1}">
-                {{ guess[i-1] }}
-            </div>
+        <div v-for="i in length" class="border border-default wr-div" :class="{'correct' : getCorrectness[i-1]==2, 'wrong-place' : getCorrectness[i-1]==1}">
+            {{ guess[i-1] }}
+        </div>
     </div>
 </template>