Merge pull request 'v2.0' (#7) from dev into master

Reviewed-on: #7

.gitea/workflows/build-image.yaml

@@ -7,7 +7,7 @@ jobs:
     env:
       IMAGE_NAME: tladle
       REGISTRY_NAME: gitea.sc0tt.org
-      GIT_TAG: 1.3 
+      GIT_TAG: 2.0
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

app/Filament/Resources/TlaSuggestions/TlaSuggestionResource.php

@@ -75,7 +75,7 @@ class TlaSuggestionResource extends Resource
                 EditAction::make(),
                 DeleteAction::make(),
                 Action::make('Approve')
-                    ->action(fn (TlaSuggestion $record) => $record->ApproveTla($record))
+                    ->action(fn (TlaSuggestion $record) => TlaSuggestion::ApproveTla($record))
                     ->requiresConfirmation()
                     ->modalHeading('Approve TLA')
                     ->modalDescription('Are you sure you want to approve this TLA?')

app/Filament/Resources/Tlas/Tables/TlasTable.php

@@ -31,7 +31,7 @@ class TlasTable
                     ->dateTime()
                     ->sortable()
                     ->toggleable(isToggledHiddenByDefault: true),
-            ])
+            ])->defaultSort('used', direction: 'asc')
             ->filters([
                 //
             ])

app/Filament/Resources/Tlas/TlaResource.php

@@ -98,6 +98,7 @@ class TlaResource extends Resource
                     DeleteBulkAction::make(),
                 ]),
             ]);
+            
     }
 
     public static function getPages(): array

app/Http/Controllers/TlaController.php

@@ -17,6 +17,7 @@ class TlaController extends Controller
             $session->forget('tla-'.$language);
             $session->forget('correct-'.$language);
             $session->forget('review-'.$language);
+            $session->put('tla-array-'.$language, ['', '', '']);
             $session->put('date-'.$language, date('Y-m-d'));
         }
     }
@@ -27,6 +28,9 @@ class TlaController extends Controller
         if ( !in_array($language, $allowedLanguages) ) $language = 'en';
 
         $tla = Tla::GetCurrentTla($language);
+
+        if ($tla == NULL) return response()->json([ 'no_tla' => true ]);
+
         $this->session_flush($request, $language);
 
         $session = $request->session();
@@ -39,6 +43,7 @@ class TlaController extends Controller
             'context' => $session->get('tla-'.$language) == $tla->acronym ? $tla->context : NULL,
             'submitter' => $tla->submitter,
             'correct' => $session->get('correct-'.$language),
+            'tla_array' => $session->get('tla-array-'.$language),
         ]);
     } 
 
@@ -96,6 +101,14 @@ class TlaController extends Controller
             if ($score == 12) $session->put('correct-'.$language, true);
         }
 
+        $tla_array = $session->get('tla-array-'.$language);
+
+        for ($i = 0; $i < 3; $i++) {
+            if ($tla_array[$i] == "" && $guess_array[$i + 3] == 2) $tla_array[$i] = $tla[$i];
+        }
+
+        $session->put('tla-array-'.$language, $tla_array);
+
         return response()->json([
             'guesses' => $guesses,
             'date' => $session->get('date'),
@@ -103,6 +116,7 @@ class TlaController extends Controller
             'context' => $session->get('tla-'.$language) == $tla_object->acronym ? $tla_object->context : NULL,
             'score' => $score,
             'correct' => $session->get('correct-'.$language),
+            'tla_array' => $tla_array,
         ]);
     }
 

app/Models/Tla.php

@@ -13,7 +13,7 @@ class Tla extends Model
 
     protected $fillable = ['acronym', 'hint', 'language', 'used', 'context', 'submitter', 'likes', 'dislikes'];
 
-    public static function GetCurrentTla( string $language ) : Tla {
+    public static function GetCurrentTla( string $language ) {
         $tla = Tla::where('used', date("Y-m-d"))
             ->where('language', $language)
             ->first();
@@ -24,6 +24,8 @@ class Tla extends Model
                 ->inRandomOrder()
                 ->first();
 
+            if ($tla == NULL) return NULL;
+
             $tla->used = date("Y-m-d");
             $tla->save();
         }

resources/css/app.css

@@ -11,6 +11,11 @@
 
 :root {
   --ui-primary: rgb(255, 200, 0);
+
+  --correct-guess: rgb(0, 126, 2);
+  --partial-correct-guess: rgb(37, 43, 154);
+  --incorrect-guess:  rgb(79, 79, 79);
+  
 }
 
 .main {

resources/js/components/GuessWord.vue

@@ -1,20 +1,39 @@
 <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 }">
-            <slot></slot>
-        </div>
-    </Transition>
+    <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>
+    </button>
 </template>
 
 <script lang="ts">
-import { Transition } from 'vue';
     export default {
+        data() {
+            return {
+                modal_open: false,
+            }
+        },
         props: {
             correctness: {
                 type: Number,
                 default: 0,
             }, 
-        }
+        },
+        methods: {
+            onclick () {
+                if (this.correctness == 2) this.$emit('pressed_wordle');
+            }
+        },
+        
     }
 </script>
 
@@ -22,8 +41,6 @@ import { Transition } from 'vue';
     .v-enter-active {
         transition: opacity 0.5s ease;
     }
-
-    
     .gw-div::first-letter {
         font-weight: bold;
     }
@@ -35,8 +52,11 @@ import { Transition } from 'vue';
         background-color: grey;
         color: white;
     }
+    .gw-button {
+    }
+    
     .default {
-        background-color: rgb(79, 79, 79);
+        background-color: var(--incorrect-guess)
     }
     .more {
         background-color: rgb(255, 0, 0);
@@ -45,13 +65,20 @@ import { Transition } from 'vue';
         background-color: rgb(129, 112, 0);
     }
     .cw-cp {
-        background-color: rgb(0, 126, 2);
+        background-color: var(--correct-guess)
     }
     .cw-ip {
         background-color: rgb(98, 175, 99);
     }
     .cf-cp {
-        background-color: rgb(37, 43, 154);
+        background-color: var(--partial-correct-guess);
+        border: solid white;
+    }
+    .cf-cp.hover {
+        background-color: #4CAF50; /* Green */
+    }
+    .cf-cp.focus {
+        background-color: red;
     }
     .cf-ip {
         background-color: rgb(106, 108, 160);

resources/js/components/HowToPlay.vue

@@ -35,8 +35,10 @@
             <GuessWord :correctness="4">Acronym</GuessWord>
           </div>
 
+          If you manage to figure out a letter in its correct position you unlock a mini wordle for that specific word. Press the word if it has a white outline to launch it!
+
           If you have any feedback, <a style="text-decoration: underline;" href="mailto:peter@sc0tt.org">
-          let me know in an email</a>, or create a <a style="text-decoration: underline;" href='https://gitea.sc0tt.org/Belupeti/TLA/pulls'>pull request</a>
+          let me know in an email</a>, or create an <a style="text-decoration: underline;" href='https://gitea.sc0tt.org/Belupeti/TLA/pulls'>issue</a>
           
       </template>
     </UModal>

resources/js/components/Wordle.vue

@@ -0,0 +1,91 @@
+<template>
+    <Modal v-model:open="open">
+        
+        <h1>Wordle for word {{ index }}</h1>
+        <br>
+        <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="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="correct.length" size="md" :correct="correct" />
+
+                    <WordleRow v-else :length="correct.length"/>
+
+                    <UButton type="submit" style="display: none;">
+                        Submit
+                    </UButton>
+                </UForm>
+
+                <WordleRow v-if="guesses.length < i" :length="correct.length"/>
+            </template>
+
+            <template v-if="guesses[guesses.length-1].toString().replace(/\,/gi, '') == correct">
+                You guessed word #{{ index }}! It was '{{ correct }}'
+            </template>
+        </div>
+
+        <UButton @click="onsubmit" class="m-3" v-if="guesses[guesses.length-1].toString().replace(/\,/gi, '') != correct">
+            Submit
+        </UButton>
+    </Modal>
+
+</template>
+
+<script setup lang="ts">
+    import Modal from './Modal.vue';
+    import WordleRow from './WordleRow.vue';
+</script>
+<script lang="ts">
+    export default {
+        data() {
+            return {
+                max_guesses: 10,
+                open: true,
+                guess: '',
+                guesses: [''],
+            }
+        },
+        props: {
+            correct: {
+                type: String,
+                default: 'nagyonhosszezugyselesz'
+            },
+            index: {
+                type: Number,
+                default: 0,
+            }, 
+            date: {
+                type: String,
+                default: '1970-01-01',
+            }
+            
+        },
+        mounted() {
+            if (localStorage.date) {
+                if (localStorage.date === this.date) this.guesses = JSON.parse(localStorage.getItem('guesses-' + this.index) || '[""]'); console.log(this.guesses);
+            } else localStorage.date = this.date;
+
+            this.max_guesses = this.correct.length > 5 ? this.correct.length : 6
+        },
+        methods: {
+            onsubmit () {
+                if (this.guess.length == this.correct.length) {
+                    this.guesses.push(this.guess);
+                    this.guess = '';
+
+                    localStorage.setItem('guesses-' + this.index, JSON.stringify(this.guesses));
+                }
+            },
+        },
+    }
+</script>
+
+<style scoped>
+    .flex-container-a {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+</style>

resources/js/components/WordleRow.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+
+</script>
+
+<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, 'incorrect' : getCorrectness[i-1]==0}" >
+            {{ guess[i-1] }}
+        </div>
+    </div>
+</template> 
+
+<script lang="ts">
+    export default {
+        data() {
+            return {
+            }
+        },
+        props: {
+            correct: {
+                type: String,
+                default: 'testword',
+            },
+            guess: {
+                type: String,
+                default: '',
+            },
+            index: Number,
+            empty: {
+                type: Boolean,
+                default: false,
+            },
+            length: Number,
+        },
+
+        computed: {
+            getCorrectness() : number[] {
+                let correctness_alt = [];
+                let correctness = [];
+                for (let i = 0; i < this.guess.length; i++) {
+                    if (this.guess[i] == this.correct[i]) {
+                        correctness.push(2);
+                    } else correctness.push(0);
+                }
+                correctness_alt = correctness.slice();
+
+                for (let i = 0; i < this.guess.length; i++) {
+                    for (let j = 0; j < this.correct.length; j++) {
+                        if (this.guess[i] == this.correct[j] && correctness[i] == 0 && correctness_alt[j] == 0) {
+                            correctness[i] = 1;
+                            correctness_alt[j] = 1;
+                        }
+                    }
+                }
+
+                return correctness;
+            }
+        },
+    }
+</script>
+
+<style scoped>
+    .wr-div {
+        justify-content: center;
+        border-radius: 6px;
+        width: 32px;
+        height: 32px;
+        line-height: 32px;
+        background-color: transparent;
+        text-transform: uppercase;
+        font-weight: bold;
+    }
+    .correct {
+        background-color: rgb(0, 126, 2);
+    }
+    .incorrect {
+        background-color: var(--incorrect-guess);
+    }
+    .wrong-place {
+        background-color: var(--partial-correct-guess);
+    }
+    .empty {
+        background-color: var(--incorrect-guess);
+    }
+</style>

resources/js/pages/HomeView.vue

@@ -3,6 +3,7 @@
   import GuessWord from '../components/GuessWord.vue';
   import Modal from '../components/Modal.vue';
   import Review from '../components/Review.vue';
+import Wordle from '../components/Wordle.vue';
 </script>
 
 <script lang="ts">
@@ -10,16 +11,22 @@
     data() {
       return {
         hint: ' ',
-        guesses: [' '],
-        words: [' '],
+        guesses: [''],
+        words: [''],
+        correct_words: [''],
         guess: '',
         tla: '', 
         context: '',
         submitter: '',
+        date: '',
         victory: false,
         loss: false,
         maxGuesses: 10,
         correct: false,
+        no_tla: false,
+        wordle_open: [false, false, false],
+        wordle_dontshow: false,
+        wordle_hint: false,
       };
     },
     
@@ -27,13 +34,22 @@
       axios
         .get('/api/fetch_tla/en')
         .then(response => {
-          this.hint = response.data.hint;
-          this.submitter = response.data.submitter;
-          this.guesses = response.data.guesses;
-          this.tla = response.data.tla;
-          this.context = response.data.context;
-          this.correct = response.data.correct;
+          if (response.data.no_tla) this.no_tla = true;
+          else {
+            this.hint = response.data.hint;
+            this.submitter = response.data.submitter;
+            this.guesses = response.data.guesses;
+            this.tla = response.data.tla;
+            this.context = response.data.context;
+            this.correct = response.data.correct;
+            this.correct_words = response.data.tla_array;
+            this.date = response.data.date;
+          }
         });
+
+        if (localStorage.wordle_dontshow) {
+          this.wordle_dontshow = localStorage.wordle_dontshow;
+        }
     },
     
     methods: {
@@ -48,6 +64,7 @@
             this.guesses = response.data.guesses;
             this.guess = '';
             this.words = [];
+            this.correct_words = response.data.tla_array;
 
             let current_guess = response.data.guesses[response.data.guesses.length-1]
             if (Number(current_guess[3]) + Number(current_guess[4]) + Number(current_guess[5]) == 12) {
@@ -67,6 +84,10 @@
       },
       onkeyup() {
         this.words = this.guess.trim().split(/\s+/);
+      },
+      wordle_disable() {
+        this.wordle_dontshow = true;
+        localStorage.wordle_dontshow = true;
       }
     }
   }
@@ -84,26 +105,25 @@
     
     </template>
 
-      <template v-for="guess in guesses">
+      <template v-for="guess in guesses" v-if="guesses.length>0">
         <div class="flex-container">
           <template v-for="i in 3">
-            <GuessWord :correctness="Number(guess[i+2])">
+            <GuessWord @pressed_wordle="wordle_open[i-1] = true" :correctness="Number(guess[i+2])" :index="i-1">
               {{ guess[i-1] }}
             </GuessWord>
+            <Wordle v-model:open="wordle_open[i-1]" :correct="correct_words[i-1]" :index="i" :date="date"/>
+          </template>
+        </div>
+      </template> 
+      
+      <template v-if="guesses.length < maxGuesses && !correct && !no_tla">
+        <div class="flex-container" v-if="guess.length > 0">
+          <template v-for="word in words">
+            <GuessWord :correctness="words.length == 3 ? -1 : (words.length > 3 ? -2 : -3)">
+                {{ word }}
+            </GuessWord>
           </template>
         </div>
-      </template>
-
-      
-      
-      <template v-if="guesses.length < maxGuesses && !correct">
-      <div class="flex-container" v-if="guess.length > 0">
-        <template v-for="word in words">
-          <GuessWord :correctness="words.length == 3 ? -1 : (words.length > 3 ? -2 : -3)">
-              {{ word }}
-          </GuessWord>
-        </template>
-      </div>
         <UForm class="space-y-2" ref="main-form" @submit="onSubmit" onsubmit="return false">
           <UFormField>
             <UInput v-model="guess" @keyup="onkeyup()" autofocus/>
@@ -114,6 +134,10 @@
           </UButton>
         </UForm>
       </template>
+      <template v-if="no_tla">
+        <h2>No TLA for today, please shoot me an email to <a style="text-decoration: underline;" href="mailto:peter@sc0tt.org">
+          peter@sc0tt.org</a></h2>
+      </template>
       <template v-if="!correct && guesses.length >= maxGuesses">
         You ran out of guesses. Todays TLA was <b>{{ tla }}</b>
         <Review/>
@@ -122,17 +146,17 @@
         You completed todays TLAdle! Todays TLA was <b>{{ tla }}</b>
         <Review/>
       </template>
-      <h3>Guesses left: {{ maxGuesses - guesses.length }}</h3>
+      <h3 v-if="!no_tla">Guesses left: {{ maxGuesses - guesses.length }}</h3>
     </UCard>
     <br>
-    <template v-if="submitter != ''">
+    <template v-if="submitter != null">
       Todays TLA was submitted by <b>{{ submitter }}</b>
       <br><br>
     </template>
     <UButton to="/suggestion" color="neutral" variant="subtle">
       Suggest a TLA!
     </UButton>
-   
+
     <Modal v-model:open="victory">
           <h1>Congratulations!</h1>
             Todays TLA was: {{ tla }} 
@@ -145,7 +169,27 @@
           <h3>The context of todays TLA:</h3>
           {{ context }}
     </Modal>
-    
+
+    <br>
+
+    <UForm @submit="wordle_disable" v-if="!wordle_dontshow">
+      <UAlert
+        title="Press the word if the starting letter is correct to launch a mini wordle!"
+        color="success"
+        style="text-align: left; margin-top: 10px;"
+        variant="subtle"
+        orientation="horizontal"
+        :actions="[
+          {
+            label: 'Don\'t show again',
+            color: 'warning',
+            type: 'submit',
+            variant: 'subtle'
+          }
+        ]"
+      />
+    </UForm>
+
 
 </template>
 

resources/js/pages/SuggestionView.vue

@@ -36,6 +36,9 @@ import Modal from '../components/Modal.vue';
         If you wish, you can submit adnother TLA by exiting this alert. <br><br>
        <UButton to="/">Main page</UButton> 
     </Modal>
+    <Modal v-model:open="missing_fields">
+        <b>Please fill out all required fields (marked with *)</b>
+    </Modal>
     
 </template>
 
@@ -50,8 +53,6 @@ import Modal from '../components/Modal.vue';
 
 <script lang="ts">
 import axios from 'axios';
-
-
     export default {
         data() {
             return {
@@ -62,6 +63,7 @@ import axios from 'axios';
                     language: '', 
                     submitter: '',
                 },
+                missing_fields: false,
                 submited: false,
 
             };