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';
</script>

<script lang="ts">
  export default {
    data() {
      return {
        hint: ' ',
        guesses: [' '],
        words: [' '],
        guess: '',
        tla: '', 
        context: '',
        victory: false,
        loss: false,
        maxGuesses: 10,
        correct: false,
      };
    },
    
    mounted () {
      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;
        });
    },
    
    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,
          })
          .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>
    <UModal title="How to play">
      <UButton label="How to play" color="neutral" variant="subtle" />

      <template #body>
          You have to try and guess the TLA (Three Letter Acronym). You get a Motto to start on, and on each try you get more information about the kinds of words
          and letters the abbreviation has.

          <br>
          <br>
          You can use the following color codes to determine how close you were to the correct answer:
          <div class="flex-container">

            <GuessWord :correctness="4">Correct word, correct place</GuessWord>
            <GuessWord :correctness="3">Correct word, incorrect place</GuessWord>
            <GuessWord :correctness="2">Correct starting letter, correct place</GuessWord>
            <GuessWord :correctness="1">Correct starting letter, incorrect place</GuessWord>
          </div>
          <br>
          As an example, if the acronym of the day is
          <div class="flex-container">

            <GuessWord :correctness="4">Three</GuessWord>
            <GuessWord :correctness="4">Letter</GuessWord>
            <GuessWord :correctness="4">Acronym</GuessWord>
          </div>
          And your guess was "Letter True Acronym", then the colors would be as follows:
          <div class="flex-container">
            <GuessWord :correctness="3">Letter</GuessWord>
            <GuessWord :correctness="1">True</GuessWord>
            <GuessWord :correctness="4">Acronym</GuessWord>
          </div>

          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>
          
      </template>
    </UModal>

    </template>

      <template v-for="guess in guesses">
        <div class="flex-container">
          <template v-for="i in 3">
            <GuessWord :correctness="Number(guess[i+2])">
              {{ guess[i-1] }}
            </GuessWord>
          </template>
        </div>
      </template>

      
    <template #footer>
      
      <template v-if="guesses.length < maxGuesses && !correct">
      <div class="flex-container">
        <template v-for="word in words">
          <GuessWord :correctness="words.length == 3 ? -1 : (words.length > 3 ? -2 : -3)">
              {{ word }}
          </GuessWord>
        </template>
      </div>
        <form ref="main-form" @submit="onSubmit" onsubmit="return false">
          <UInput v-model="guess" @keyup="onkeyup()"/>
        </form>
      </template>
      <template v-if="!correct && guesses.length >= maxGuesses">
        You ran out of guesses. Todays TLA was {{ tla }}
      </template>
      <template v-if="correct">
        You completed todays TLAdle! Todays TLA was {{ tla }}
      </template>
      <h3>Guesses: {{ guesses.length }} / {{ maxGuesses }}</h3>

    </template>
  </UCard>
   
    <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>

</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>