TLA/resources/js/pages/HomeView.vue

<script setup lang="ts">
  import axios from 'axios';
  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">
  export default {
    data() {
      return {
        hint: ' ',
        guesses: [''],
        words: [''],
        correct_words: [''],
        guess: '',
        tla: '', 
        context: '',
        submitter: '',
        victory: false,
        loss: false,
        maxGuesses: 10,
        correct: false,
        no_tla: false,
      };
    },
    
    mounted () {
      axios
        .get('/api/fetch_tla/en')
        .then(response => {
          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;
          }
        });
    },
    
    methods: {
      onSubmit() {

        if (this.words.length == 3 && this.guesses.length < this.maxGuesses) {
          axios
          .post("/api/check_tla/en", {
            guess: this.words,
          })
          .then((response) => {
            this.guesses = response.data.guesses;
            this.guess = '';
            this.words = [];

            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) {
              this.victory = !this.victory;
              this.tla = response.data.tla;
              this.context = response.data.context;
              this.correct = response.data.correct;
            }
            else if (this.guesses.length == this.maxGuesses) {
              this.loss = !this.loss;
              this.tla = response.data.tla;
              this.context = response.data.context;
              this.correct = response.data.correct;
            }
          })
        }
      },
      onkeyup() {
        this.words = this.guess.trim().split(/\s+/);
      }
    }
  }
 
</script>

<template>
  <UCard>
    <template #header>

      <h1>Motto:</h1>
      {{ hint }}

      <br>
    
    </template>

      <template v-for="guess in guesses" v-if="guesses.length>1">
        <div class="flex-container">
          <template v-for="i in 3">
            <GuessWord :correctness="Number(guess[i+2])" :correct="correct_words[i-1]">
              {{ guess[i-1] }}
            </GuessWord>
          </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>
        <UForm class="space-y-2" ref="main-form" @submit="onSubmit" onsubmit="return false">
          <UFormField>
            <UInput v-model="guess" @keyup="onkeyup()" autofocus/>
          </UFormField>

          <UButton type="submit">
            Guess
          </UButton>
        </UForm>
      </template>
      <template v-else>
        <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/>
      </template>
      <template v-if="correct">
        You completed todays TLAdle! Todays TLA was <b>{{ tla }}</b>
        <Review/>
      </template>
      <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>
    <UButton to="/suggestion" color="neutral" variant="subtle">
      Suggest a TLA!
    </UButton>
   
    <Modal v-model:open="victory">
          <h1>Congratulations!</h1>
            Todays TLA was: {{ tla }} 
          <h3>The context of todays TLA:</h3>
          {{ context }}
    </Modal>
    <Modal v-model:open="loss">
          <h1>What a shame!</h1>
            Todays TLA was: {{ tla }} 
          <h3>The context of todays TLA:</h3>
          {{ context }}
    </Modal>
    <Wordle correct="sadf"/>

</template>

<style>
  h3 {
    font-weight: bold;
    padding: 10px;

  }
  .flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hidden {
    color: transparent;
  }
</style>