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.1 
+      GIT_TAG: 2.0
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

app/Filament/Resources/TlaSuggestions/Pages/ManageTlaSuggestions.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Filament\Resources\TlaSuggestions\Pages;
+
+use App\Filament\Resources\TlaSuggestions\TlaSuggestionResource;
+use Filament\Actions\CreateAction;
+use Filament\Resources\Pages\ManageRecords;
+
+class ManageTlaSuggestions extends ManageRecords
+{
+    protected static string $resource = TlaSuggestionResource::class;
+
+    protected function getHeaderActions(): array
+    {
+        return [
+            CreateAction::make(),
+        ];
+    }
+}

app/Filament/Resources/TlaSuggestions/TlaSuggestionResource.php

@@ -0,0 +1,96 @@
+<?php
+
+namespace App\Filament\Resources\TlaSuggestions;
+
+use App\Filament\Resources\TlaSuggestions\Pages\ManageTlaSuggestions;
+use App\Models\TlaSuggestion;
+use BackedEnum;
+use Filament\Actions\BulkActionGroup;
+use Filament\Actions\DeleteAction;
+use Filament\Actions\DeleteBulkAction;
+use Filament\Actions\EditAction;
+use Filament\Forms\Components\Select;
+use Filament\Forms\Components\TextInput;
+use Filament\Forms\Components\Textarea;
+use Filament\Resources\Resource;
+use Filament\Schemas\Schema;
+use Filament\Support\Icons\Heroicon;
+use Filament\Tables\Columns\TextColumn;
+use Filament\Tables\Table;
+use Filament\Actions\Action;
+
+class TlaSuggestionResource extends Resource
+{
+    protected static ?string $model = TlaSuggestion::class;
+
+    protected static string|BackedEnum|null $navigationIcon = Heroicon::OutlinedRectangleStack;
+
+    protected static ?string $recordTitleAttribute = 'Suggestions';
+
+    public static function form(Schema $schema): Schema
+    {
+        return $schema
+            ->components([
+                TextInput::make('acronym')
+                    ->required(),
+                TextInput::make('hint')
+                    ->default(null),
+                Select::make('language')
+                    ->options(['hu' => 'Hu', 'en' => 'En'])
+                    ->required(),
+                Textarea::make('context')
+                    ->default(null)
+                    ->columnSpanFull(),
+                TextInput::make('submitter')
+                    ->default(null),
+            ]);
+    }
+
+    public static function table(Table $table): Table
+    {
+        return $table
+            ->recordTitleAttribute('Suggestions')
+            ->columns([
+                TextColumn::make('acronym')
+                    ->searchable(),
+                TextColumn::make('hint')
+                    ->searchable(),
+                TextColumn::make('language')
+                    ->badge(),
+                TextColumn::make('submitter')
+                    ->searchable(),
+                TextColumn::make('created_at')
+                    ->dateTime()
+                    ->sortable()
+                    ->toggleable(isToggledHiddenByDefault: true),
+                TextColumn::make('updated_at')
+                    ->dateTime()
+                    ->sortable()
+                    ->toggleable(isToggledHiddenByDefault: true),
+            ])
+            ->filters([
+                //
+            ])
+            ->recordActions([
+                EditAction::make(),
+                DeleteAction::make(),
+                Action::make('Approve')
+                    ->action(fn (TlaSuggestion $record) => TlaSuggestion::ApproveTla($record))
+                    ->requiresConfirmation()
+                    ->modalHeading('Approve TLA')
+                    ->modalDescription('Are you sure you want to approve this TLA?')
+            ])
+            ->toolbarActions([
+                BulkActionGroup::make([
+                    DeleteBulkAction::make(),
+                ]),
+            ]);
+    }
+
+    public static function getPages(): array
+    {
+        return [
+            'index' => ManageTlaSuggestions::route('/'),
+        ];
+    }
+}

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

@@ -25,7 +25,7 @@ class TlaResource extends Resource
 
     protected static string|BackedEnum|null $navigationIcon = Heroicon::OutlinedRectangleStack;
 
-    protected static ?string $recordTitleAttribute = 'tla';
+    protected static ?string $recordTitleAttribute = 'Tla';
 
     public static function form(Schema $schema): Schema
     {
@@ -42,13 +42,23 @@ class TlaResource extends Resource
                 Textarea::make('context')
                     ->default(null)
                     ->columnSpanFull(),
+                TextInput::make('submitter')
+                    ->default(null),
+                TextInput::make('likes')
+                    ->required()
+                    ->numeric()
+                    ->default(0),
+                TextInput::make('dislikes')
+                    ->required()
+                    ->numeric()
+                    ->default(0),
             ]);
     }
 
     public static function table(Table $table): Table
     {
         return $table
-            ->recordTitleAttribute('tla')
+            ->recordTitleAttribute('Tla')
             ->columns([
                 TextColumn::make('acronym')
                     ->searchable(),
@@ -59,6 +69,14 @@ class TlaResource extends Resource
                 TextColumn::make('used')
                     ->date()
                     ->sortable(),
+                TextColumn::make('submitter')
+                    ->searchable(),
+                TextColumn::make('likes')
+                    ->numeric()
+                    ->sortable(),
+                TextColumn::make('dislikes')
+                    ->numeric()
+                    ->sortable(),
                 TextColumn::make('created_at')
                     ->dateTime()
                     ->sortable()
@@ -80,6 +98,7 @@ class TlaResource extends Resource
                     DeleteBulkAction::make(),
                 ]),
             ]);
+            
     }
 
     public static function getPages(): array

app/Http/Controllers/TlaController.php

@@ -3,40 +3,21 @@
 namespace App\Http\Controllers;
 
 use App\Models\Tla;
+use App\Models\TlaSuggestion;
 use Illuminate\Http\Request;
 
 class TlaController extends Controller
 {
-    public function store(Request $request): RedirectResponse
-    {
-        $request->validate([
-            'title' => 'required',
-            'body' => 'required',
-        ]);
-
-        $tla = new Tla($requestData);
-
-        $tla->save();
-
-        return redirect()->route('admin')->with('success', 'Record added!');
-    }   //
-
-    public function destroy(Tla $tla): RedirectResponse
-    {
-        $tla->delete();
-
-        return redirect()->route('admin')->with('success', 'Record deleted');
-    }
-
     public function session_flush(Request $request, string $language)
     {
         $session = $request->session();
         if ($session->get('date-'.$language, NULL) != date('Y-m-d'))
         {
-            $session->forget('guesses--'.$language);
+            $session->forget('guesses-'.$language);
             $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'));
         }
     }
@@ -47,17 +28,22 @@ 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();
 
         return response()->json([
             'hint' => $tla->hint,
-            'guesses' => $session->get('guesses--'.$language, []),
-            'date' => $session->get('date--'.$language),
+            'guesses' => $session->get('guesses-'.$language, []),
+            'date' => $session->get('date-'.$language),
             'tla' => $session->get('tla-'.$language) == $tla->acronym ? $tla->acronym : NULL,
             '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),
         ]);
     } 
 
@@ -107,14 +93,22 @@ class TlaController extends Controller
            $score += $guess_array[$i + 3];
         }
 
-        $session->push('guesses--'.$language, $guess_array);
-        $guesses = $session->get('guesses--'.$language, NULL);
+        $session->push('guesses-'.$language, $guess_array);
+        $guesses = $session->get('guesses-'.$language, NULL);
 
         if ($score == 12 || count($guesses) == env('MAX_GUESSES', 10)) {
             $session->put('tla-'.$language, $tla_object->acronym);
             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'),
@@ -122,11 +116,23 @@ 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,
         ]);
     }
 
-    public function suggestion(?String $language = "en") {
+    public function suggestion(Request $request, ?String $language = "en") {
+        $request->validate([
+            'acronym' => 'required',
+            'hint' => 'required',
+            'context' => 'required',
+        ]);
 
+        $requestData = $request->input();
+        $tla = new TlaSuggestion($requestData);
+
+        $tla->save();
+
+        return response($tla);
     }
 
     public function review(Request $request, String $language, int $type) {
@@ -161,20 +167,4 @@ class TlaController extends Controller
         else return response(null, 403);
         
     }
-
-    public function update(Request $request, Tla $tla): RedirectResponse
-    {
-        $request->validate([
-            'title' => 'required',
-            'body' => 'required',
-        ]);
-        
-        $requestData = $request->all();
-
-        $tla->update($requestData);
-
-        $tla->save();
-
-        return redirect()->route('admin')->with('success', 'Record updated!');
-    }
 }

app/Models/Tla.php

@@ -11,9 +11,9 @@ class Tla extends Model
 
     use HasFactory;
 
-    protected $fillable = ['acronym', 'hint', 'language', 'used', 'context', 'likes', 'dislikes'];
+    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();
         }

app/Models/TlaSuggestion.php

@@ -3,10 +3,18 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
 
 class TlaSuggestion extends Model
 {
+    use HasFactory;
     protected $table = 'tla_suggestion';
 
-    protected $fillable = ['acronym', 'hint', 'language', 'context'];
+    protected $fillable = ['acronym', 'hint', 'language', 'context', 'submitter'];
+
+    public static function ApproveTla(TlaSuggestion $record) {
+        $tla = new Tla($record->toArray());
+        $record->delete();
+        $tla->save();
+    }
 }

database/migrations/2026_08_21_065241_add_suggestion_submitter.php

@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('tla_suggestion', function (Blueprint $table){
+            $table->string('submitter')->nullable()->after('context');
+        });
+        Schema::table('tla', function (Blueprint $table){
+            $table->string('submitter')->nullable()->after('context');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        //
+    }
+};

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

@@ -2,7 +2,8 @@
   import axios from 'axios';
   import GuessWord from '../components/GuessWord.vue';
   import Modal from '../components/Modal.vue';
-import Review from '../components/Review.vue';
+  import Review from '../components/Review.vue';
+import Wordle from '../components/Wordle.vue';
 </script>
 
 <script lang="ts">
@@ -10,15 +11,22 @@ import Review from '../components/Review.vue';
     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,
       };
     },
     
@@ -26,19 +34,28 @@ import Review from '../components/Review.vue';
       axios
         .get('/api/fetch_tla/en')
         .then(response => {
-          this.hint = response.data.hint;
-          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: {
       onSubmit() {
 
         if (this.words.length == 3 && this.guesses.length < this.maxGuesses) {
-          console.log(this.words)
           axios
           .post("/api/check_tla/en", {
             guess: this.words,
@@ -47,6 +64,7 @@ import Review from '../components/Review.vue';
             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) {
@@ -66,6 +84,10 @@ import Review from '../components/Review.vue';
       },
       onkeyup() {
         this.words = this.guess.trim().split(/\s+/);
+      },
+      wordle_disable() {
+        this.wordle_dontshow = true;
+        localStorage.wordle_dontshow = true;
       }
     }
   }
@@ -83,27 +105,25 @@ import Review from '../components/Review.vue';
     
     </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 #footer>
-      
-      <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>
+      <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>
         <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 @@ import Review from '../components/Review.vue';
           </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,10 +146,16 @@ import Review from '../components/Review.vue';
         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 != null">
+      Todays TLA was submitted by <b>{{ submitter }}</b>
+      <br><br>
     </template>
-  </UCard>
+    <UButton to="/suggestion" color="neutral" variant="subtle">
+      Suggest a TLA!
+    </UButton>
 
     <Modal v-model:open="victory">
           <h1>Congratulations!</h1>
@@ -140,6 +170,27 @@ import Review from '../components/Review.vue';
           {{ 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>
 
 <style>

resources/js/pages/SuggestionView.vue

@@ -1,24 +1,44 @@
+<script setup lang="ts">
+import Modal from '../components/Modal.vue';
+</script>
+
 <template>
     <h1>TLA suggestion form</h1>
-    <UCard>
-    <UForm class="space-y-4" style="text-align: left;"  action="/api/suggestion" method="post"> 
-        <UFormField class="form-field" label="Acronym" required>
-            <UInput class="w-80" placeholder="Enter your TLA" name="tla"></UInput>
-        </UFormField>
-        <UFormField label="Motto" required>
-            <UInput class="w-80" placeholder="Enter the motto for your TLA"></UInput>
-        </UFormField>
-        <UFormField label="Contex" required>
-            <UTextarea class="w-80" rows=5 placeholder="Provide context for your TLA. This will be displayed upon completing the riddle of the day, either by guessing it correctly, or by running out of guesses."></UTextarea>
-        </UFormField>
-        <UFormField>
-            <URadioGroup orientation="horizontal" variant="table" size="xs" default-value="en" :items="['en', 'hu']" />
-        </UFormField>
-        <UButton type="submit">
-            Submit suggestion
-        </UButton>
-    </UForm>
-    </UCard>
+    <br>
+        <UCard class="align-center">
+
+        <UForm @submit="onSubmit" class="space-y-4" action="/api/suggestion" method="post"> 
+            <UFormField class="form-field" label="Acronym" required>
+                <UInput v-model="form.acronym" class="w-80" placeholder="Enter your TLA" name="tla"></UInput>
+            </UFormField>
+            <UFormField label="Motto" required>
+                <UInput class="w-80" v-model="form.hint" placeholder="Enter the motto for your TLA" name="hint"></UInput>
+            </UFormField>
+            <UFormField label="Contex" required>
+                <UTextarea class="w-80" v-model="form.context" name="context" rows=5 placeholder="Provide context for your TLA. This will be displayed upon completing the riddle of the day, either by guessing it correctly, or by running out of guesses."></UTextarea>
+            </UFormField>
+            <UFormField required>
+                <URadioGroup orientation="horizontal" v-model="form.language" name="language" variant="table" size="xs" default-value="en" :items="['en', 'hu']" />
+            </UFormField>
+            <UFormField class="form-field" label="Submitter (your name)">
+                <UInput v-model="form.submitter" class="w-80" placeholder="Anonymus" name="submitter"></UInput>
+            </UFormField>
+            <UButton type="submit">
+                Submit suggestion
+            </UButton>
+        </UForm>
+        <br>
+        Disclaimer: I'm going through these manually, approving them or even changing the context or motto for them, if I feel it's necessary. I don't guarantee, that your suggestion will be approved and even if it is, it may not be next days TLA.
+        </UCard>
+ 
+    <Modal v-model:open="submited">
+        <b>Your suggestion has been submitted!</b><br>
+        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>
 
@@ -32,5 +52,37 @@
 </style>
 
 <script lang="ts">
+import axios from 'axios';
+    export default {
+        data() {
+            return {
+                form: {
+                    acronym: '',
+                    hint: '',
+                    context: '', 
+                    language: '', 
+                    submitter: '',
+                },
+                missing_fields: false,
+                submited: false,
+
+            };
+        },
+        methods: {
+            onSubmit() {
+                axios.post('/api/suggestion/en', this.form).then( response => {
+                    if (response.status == 200)
+                    {
+                        this.form.acronym = '';
+                        this.form.hint = '';
+                        this.form.context = '';
+                        this.form.submitter = '';
+                        this.form.language = 'en';
+                        this.submited = true;
+                    }
+                });
+            }
+        }
+    }
 
 </script>

resources/views/vue.blade.php

@@ -12,7 +12,7 @@
     <!-- Dark mode favicon -->
     <link rel="icon" href="{{ asset('logo_full_tall_dark.svg') }}" type="image/x-icon" media="(prefers-color-scheme: dark)">
 
-    <title>TLAdle</title>
+    <title>{{ config('app.name') }}</title>
     @vite(['resources/js/app.js'])
 </head>
 <body>

routes/api.php

@@ -7,7 +7,7 @@ Route::middleware('web')->group(function () {
         Route::resource('people', \App\Http\Controllers\TlaController::class);
         Route::get('fetch_tla/{language?}', [\App\Http\Controllers\TlaController::class, 'fetch_tla']);
         Route::post('check_tla/{language?}', [\App\Http\Controllers\TlaController::class, 'check_tla']);
-        Route::post('suggestion /{language?}', [\App\Http\Controllers\TlaController::class, 'suggestion']);
+        Route::post('suggestion/{language?}', [\App\Http\Controllers\TlaController::class, 'suggestion']);
         Route::get('fetch_dev', function() {
                 return response()->json(['dev' => env('DEV_MESSAGE', false)]);
         });

routes/web.php

@@ -2,6 +2,6 @@
 
 use Illuminate\Support\Facades\Route;
 
-Route::any('{all}',function(){
+Route::get('{all}',function(){
     return view('vue');
 })->where(['all' => '.*'])->name("vue");