work query + share grid

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.

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')
+}
 </script>
 
 <template>
   <Transition>
-    <div class="message" v-if="message">{{ message }}</div>
+    <div class="message" v-if="message">
+      {{ message }}
+      <pre v-if="grid">{{ grid }}</pre>
+    </div>
   </Transition>
   <header>
     <h1>VVORDLE</h1>
@@ -205,7 +226,7 @@ function shake() {
   left: 50%;
   top: 80px;
   color: #fff;
-  background-color: black;
+  background-color: rgba(0, 0, 0, 0.85);
   padding: 16px 20px;
   z-index: 2;
   border-radius: 4px;

src/words.ts

@@ -1,4 +1,17 @@
 export function getWordOfTheDay() {
+  if (location.search) {
+    try {
+     const query = atob(location.search.slice(1))
+     if (query.length !== 5) {
+      alert('incorrect word length from encoded query.')
+     } else {
+       return query
+     }
+    } catch (e) {
+      alert('malformed encoded word query.')
+    }
+  }
+
   const now = new Date()
   const start = new Date(2022, 0, 0)
   const diff = Number(now) - Number(start)