Multi-Board Wordle (Extra Credit)

TIP

It is not mandatory for you to complete this assignment. However, it should give you more leverage in working with larger VueJS applications.

Objectives

• Apply more advanced techniques in VueJS component design
• Implement parent to child communication mechanism using VueJS props and watchers
• Implement child to parent communication mechanism using VueJS custom events

Overview

You will modify your implementation of the Wordle game to support multiple boards at the same time. An example of 2-board Wordle (called Dordle) can be found here. In a multi-board World one guess word entered by the player is checked against multiple secret words (one secret word per board).

In the starter code provided by your instructor, you will find two Vue components: App.vue (the "parent" component) and HelloWorld.vue (the child component).

The general approach for redesigning your single-board Wordle to multi-board Wordle is as follow:

1. Factor out any code related to handling user input (keyboard handler), starting a new game, selecting random secret words, etc. from the child component HelloWordle.vue to the parent component (App.vue)
2. Leave the code related to checking word match in the child component HelloWorlde.vue.

Inter Component Communication

With the logic split across parent and child components, there has to be a mechanism for both components to exchange data.

Parent to Child Communication

Recall that VueJS components can be designed to take (external) data via props. A common use case is to allow the child component to receive data from its parent component. For instance, if the child componentHelloWordle.vue defines the following props:

type WordleProps = {
  secretWord: string,
  guessWord: string
}

const myProps = defineProps<WordleProps>()

The parent component App.vue can pass the generated secret word and user guess using the following syntax:

<HelloWordle :secret-word="secret_variable_name" 
             :guess-word="guess_variable_name" />

The child component can then monitor any changes to these props by using VueJS watchers:

<!--- in the child component -->
<script setup lang="ts">
import {watch, defineProps} from "vue"

watch(() => myProps.guessWord, (guess: string) => {
  /* code that will execute when the parent guess_variable_name changes */
  console.log(`User guess word is ${guess}`)
})
</script>

Child to Parent Communication

To pass data from child to parent, VueJS depends on JavaScript event handling mechanism. In addition to builtin events such as click, keydown, keyup, mousemove, etc, JavaScript allows developers to define custom events. VueJS wraps all the technical details of event registration, dispatch, and handling via its defineEmits function:

<!--- in child component -->
<script setup lang="ts">
import {defineEmits} from "vue"
const myEvents = defineEmits(['game-won', 'game-lost'])

function example_of_firing_event() {
  /* more code here */
  myEvents('game-won', 719)
  /* more code here */
}
</script>

The parent component can handle the event using normal VueJS v-on syntax:

<!--- in parent component -->
<template>
  <HelloWorldle v-on:game-won="your_function_name" />
</template>

<script setup lang="ts">
function your_function_name(arg: number) {
  console.log(`From event ${arg}`)  // will print 719
}  
</script>