diff --git a/README.md b/README.md index 8e3faf7..1460e49 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ # Vue Wordle +[Live demo](https://vue-wordle.netlify.app/) + A Vue implementation of the [Wordle game](https://www.powerlanguage.co.uk/wordle/). This is just for fun and doesn't aim to 100% replicate the original. -This repository is open sourced for learning purposes only - the original creator(s) of Wordle own all applicable rights to the game itself. +You can make your own Wordle and send it to friends by base64-encoding a word and include it as the URL query, e.g. https://vue-wordle.netlify.app/?dnVlanM= (this will also allow words that are not in the dictionary.) -[Live demo](https://vue-wordle.netlify.app/) +This repository is open sourced for learning purposes only - the original creator(s) of Wordle own all applicable rights to the game itself. diff --git a/src/Game.vue b/src/Game.vue index 7526175..022a947 100644 --- a/src/Game.vue +++ b/src/Game.vue @@ -23,6 +23,7 @@ const currentRow = $computed(() => board[currentRowIndex]) // Feedback state: message and shake let message = $ref('') +let grid = $ref('') let shakeRowIndex = $ref(-1) // Keep track of revealed letters for the virtual keyboard @@ -109,11 +110,12 @@ function completeRow() { if (currentRow.every((tile) => tile.state === LetterState.CORRECT)) { // yay! setTimeout(() => { + grid = genResultGrid() showMessage( ['Genius', 'Magnificent', 'Impressive', 'Splendid', 'Great', 'Phew'][ currentRowIndex ], - 2000 + -1 ) }, 1600) } else if (currentRowIndex < board.length - 1) { @@ -149,11 +151,30 @@ function shake() { shakeRowIndex = -1 }, 1000) } + +const icons = { + [LetterState.CORRECT]: '🟩', + [LetterState.PRESENT]: '🟨', + [LetterState.ABSENT]: '⬜', + [LetterState.INITIAL]: null +} + +function genResultGrid() { + return board + .slice(0, currentRowIndex + 1) + .map((row) => { + return row.map((tile) => icons[tile.state]).join('') + }) + .join('\n') +}