From fca13acbbe665bc6fac3d7ed709e47e4240c5e59 Mon Sep 17 00:00:00 2001
From: Taha Shieenavaz <tahashieenavaz@gmail.com>
Date: Sat, 23 Jul 2022 16:16:16 +0430
Subject: [PATCH] Save functionality is added to the game

If a user completes the game, leaves and comes back the very same day we
show the board he played last time and he or she will not be fooled with
the same word again.
---
 .gitignore   |   4 +-
 src/Game.vue | 640 ++++++++++++++++++++++++++++-----------------------
 src/types.ts |   5 +
 3 files changed, 366 insertions(+), 283 deletions(-)

diff --git a/.gitignore b/.gitignore
index 53f7466..4bbb0c6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,6 @@ node_modules
 .DS_Store
 dist
 dist-ssr
-*.local
\ No newline at end of file
+*.local
+.idea
+.prettierrc
diff --git a/src/Game.vue b/src/Game.vue
index b61b749..b82db49 100644
--- a/src/Game.vue
+++ b/src/Game.vue
@@ -1,374 +1,450 @@
 <script setup lang="ts">
-import { onUnmounted } from 'vue'
-import { getWordOfTheDay, allWords } from './words'
-import Keyboard from './Keyboard.vue'
-import { LetterState } from './types'
+import { onUnmounted } from "vue";
+import { getWordOfTheDay, allWords } from "./words";
+import { LetterState, Tile } from './types';
+import Keyboard from "./Keyboard.vue";
 
 // Get word of the day
-const answer = getWordOfTheDay()
+const answer = getWordOfTheDay();
 
 // Board state. Each tile is represented as { letter, state }
 const board = $ref(
-  Array.from({ length: 6 }, () =>
-    Array.from({ length: 5 }, () => ({
-      letter: '',
-      state: LetterState.INITIAL
-    }))
-  )
-)
+	Array.from({ length: 6 }, () =>
+		Array.from({ length: 5 }, () => ({
+			letter: "",
+			state: LetterState.INITIAL,
+		}))
+	)
+);
+
 
 // Current active row.
-let currentRowIndex = $ref(0)
-const currentRow = $computed(() => board[currentRowIndex])
+let currentRowIndex = $ref(0);
+const currentRow = $computed(() => board[currentRowIndex]);
 
 // Feedback state: message and shake
-let message = $ref('')
-let grid = $ref('')
-let shakeRowIndex = $ref(-1)
-let success = $ref(false)
+let message = $ref("");
+let grid = $ref("");
+let shakeRowIndex = $ref(-1);
+let success = $ref(false);
 
 // Keep track of revealed letters for the virtual keyboard
-const letterStates: Record<string, LetterState> = $ref({})
+const letterStates: Record<string, LetterState> = $ref({});
 
 // Handle keyboard input.
-let allowInput = true
+let allowInput = true;
+
+// Check if user completed this word before or not
+// We store the last completed word in localStorage
+let hasCompletedWord: boolean = false;
+
+const localStorageLastWordKey: string = "vvordleLastCompletedWord";
+const localStorageLastBoardKey: string = "vvordleLastCompletedBoard";
+const lastCompletedWord: string | null = localStorage.getItem(
+  localStorageLastWordKey
+);
+
+if (lastCompletedWord && lastCompletedWord === answer) {
+  // User completed today's word already
+  hasCompletedWord = true
+}
+
+if(hasCompletedWord) {
+  const previousBoard: Array<Array<Tile>> = JSON.parse(
+    // @ts-ignore
+    localStorage.getItem(localStorageLastBoardKey)
+  )
+  // Change global board variable
+  previousBoard.forEach((row:Array<Tile>, rowIndex: number) => {
+    row.forEach((col: Tile, colIndex: number) => {
+      board[rowIndex][colIndex] = previousBoard[rowIndex][colIndex]
+    })
+  })
+
+  allowInput = false
+}
 
-const onKeyup = (e: KeyboardEvent) => onKey(e.key)
+const onKeyup = (e: KeyboardEvent) => onKey(e.key);
 
-window.addEventListener('keyup', onKeyup)
+window.addEventListener("keyup", onKeyup);
 
 onUnmounted(() => {
-  window.removeEventListener('keyup', onKeyup)
-})
+	window.removeEventListener("keyup", onKeyup);
+});
 
 function onKey(key: string) {
-  if (!allowInput) return
-  if (/^[a-zA-Z]$/.test(key)) {
-    fillTile(key.toLowerCase())
-  } else if (key === 'Backspace') {
-    clearTile()
-  } else if (key === 'Enter') {
-    completeRow()
-  }
+	if (!allowInput) return;
+	if (/^[a-zA-Z]$/.test(key)) {
+		fillTile(key.toLowerCase());
+	} else if (key === "Backspace") {
+		clearTile();
+	} else if (key === "Enter") {
+		completeRow();
+	}
 }
 
 function fillTile(letter: string) {
-  for (const tile of currentRow) {
-    if (!tile.letter) {
-      tile.letter = letter
-      break
-    }
-  }
+	for (const tile of currentRow) {
+		if (!tile.letter) {
+			tile.letter = letter;
+			break;
+		}
+	}
 }
 
 function clearTile() {
-  for (const tile of [...currentRow].reverse()) {
-    if (tile.letter) {
-      tile.letter = ''
-      break
-    }
-  }
+	for (const tile of [...currentRow].reverse()) {
+		if (tile.letter) {
+			tile.letter = "";
+			break;
+		}
+	}
 }
 
 function completeRow() {
-  if (currentRow.every((tile) => tile.letter)) {
-    const guess = currentRow.map((tile) => tile.letter).join('')
-    if (!allWords.includes(guess) && guess !== answer) {
-      shake()
-      showMessage(`Not in word list`)
-      return
-    }
-
-    const answerLetters: (string | null)[] = answer.split('')
-    // first pass: mark correct ones
-    currentRow.forEach((tile, i) => {
-      if (answerLetters[i] === tile.letter) {
-        tile.state = letterStates[tile.letter] = LetterState.CORRECT
-        answerLetters[i] = null
-      }
-    })
-    // second pass: mark the present
-    currentRow.forEach((tile) => {
-      if (!tile.state && answerLetters.includes(tile.letter)) {
-        tile.state = LetterState.PRESENT
-        answerLetters[answerLetters.indexOf(tile.letter)] = null
-        if (!letterStates[tile.letter]) {
-          letterStates[tile.letter] = LetterState.PRESENT
-        }
-      }
-    })
-    // 3rd pass: mark absent
-    currentRow.forEach((tile) => {
-      if (!tile.state) {
-        tile.state = LetterState.ABSENT
-        if (!letterStates[tile.letter]) {
-          letterStates[tile.letter] = LetterState.ABSENT
-        }
-      }
-    })
+	if (currentRow.every((tile) => tile.letter)) {
+		const guess = currentRow.map((tile) => tile.letter).join("");
+		if (!allWords.includes(guess) && guess !== answer) {
+			shake();
+			showMessage(`Not in word list`);
+			return;
+		}
+
+		const answerLetters: (string | null)[] = answer.split("");
+		// first pass: mark correct ones
+		currentRow.forEach((tile, i) => {
+			if (answerLetters[i] === tile.letter) {
+				tile.state = letterStates[tile.letter] =
+					LetterState.CORRECT;
+				answerLetters[i] = null;
+			}
+		});
+		// second pass: mark the present
+		currentRow.forEach((tile) => {
+			if (
+				!tile.state &&
+				answerLetters.includes(tile.letter)
+			) {
+				tile.state = LetterState.PRESENT;
+				answerLetters[
+					answerLetters.indexOf(tile.letter)
+				] = null;
+				if (!letterStates[tile.letter]) {
+					letterStates[tile.letter] =
+						LetterState.PRESENT;
+				}
+			}
+		});
+		// 3rd pass: mark absent
+		currentRow.forEach((tile) => {
+			if (!tile.state) {
+				tile.state = LetterState.ABSENT;
+				if (!letterStates[tile.letter]) {
+					letterStates[tile.letter] =
+						LetterState.ABSENT;
+				}
+			}
+		});
+
+		allowInput = false;
+		if (
+			currentRow.every(
+				(tile) => tile.state === LetterState.CORRECT
+			)
+		) {
+			// yay!
+			setTimeout(() => {
+				grid = genResultGrid();
+				showMessage(
+					[
+						"Genius",
+						"Magnificent",
+						"Impressive",
+						"Splendid",
+						"Great",
+						"Phew",
+					][currentRowIndex],
+					-1
+				);
+
+				success = true;
 
-    allowInput = false
-    if (currentRow.every((tile) => tile.state === LetterState.CORRECT)) {
-      // yay!
-      setTimeout(() => {
-        grid = genResultGrid()
-        showMessage(
-          ['Genius', 'Magnificent', 'Impressive', 'Splendid', 'Great', 'Phew'][
-            currentRowIndex
-          ],
-          -1
-        )
-        success = true
-      }, 1600)
-    } else if (currentRowIndex < board.length - 1) {
-      // go the next row
-      currentRowIndex++
-      setTimeout(() => {
-        allowInput = true
-      }, 1600)
-    } else {
-      // game over :(
-      setTimeout(() => {
-        showMessage(answer.toUpperCase(), -1)
-      }, 1600)
-    }
-  } else {
-    shake()
-    showMessage('Not enough letters')
-  }
+        // Save the information we need to keep track of what user did
+        // in their last visit
+        saveFinishedBoard()
+        saveLastCompletedWord()
+			}, 1600);
+		} else if (currentRowIndex < board.length - 1) {
+			// go the next row
+			currentRowIndex++;
+			setTimeout(() => {
+				allowInput = true;
+			}, 1600);
+		} else {
+			// game over :(
+			setTimeout(() => {
+				showMessage(answer.toUpperCase(), -1);
+			}, 1600);
+		}
+	} else {
+		shake();
+		showMessage("Not enough letters");
+	}
 }
 
 function showMessage(msg: string, time = 1000) {
-  message = msg
-  if (time > 0) {
-    setTimeout(() => {
-      message = ''
-    }, time)
-  }
+	message = msg;
+	if (time > 0) {
+		setTimeout(() => {
+			message = "";
+		}, time);
+	}
 }
 
 function shake() {
-  shakeRowIndex = currentRowIndex
-  setTimeout(() => {
-    shakeRowIndex = -1
-  }, 1000)
+	shakeRowIndex = currentRowIndex;
+	setTimeout(() => {
+		shakeRowIndex = -1;
+	}, 1000);
 }
 
 const icons = {
-  [LetterState.CORRECT]: '🟩',
-  [LetterState.PRESENT]: '🟨',
-  [LetterState.ABSENT]: '⬜',
-  [LetterState.INITIAL]: null
-}
+	[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')
+	return board
+		.slice(0, currentRowIndex + 1)
+		.map((row) => {
+			return row.map((tile) => icons[tile.state]).join("");
+		})
+		.join("\n");
+}
+
+function saveFinishedBoard(): void {
+  localStorage.setItem(localStorageLastBoardKey, JSON.stringify(board))
+}
+function saveLastCompletedWord(): void {
+  localStorage.setItem(localStorageLastWordKey, answer)
 }
 </script>
 
 <template>
-  <Transition>
-    <div class="message" v-if="message">
-      {{ message }}
-      <pre v-if="grid">{{ grid }}</pre>
-    </div>
-  </Transition>
-  <header>
-    <h1>VVORDLE</h1>
-    <a
-      id="source-link"
-      href="https://github.com/yyx990803/vue-wordle"
-      target="_blank"
-      >Source</a
-    >
-  </header>
-  <div id="board">
-    <div
-      v-for="(row, index) in board"
-      :class="[
-        'row',
-        shakeRowIndex === index && 'shake',
-        success && currentRowIndex === index && 'jump'
-      ]"
-    >
-      <div
-        v-for="(tile, index) in row"
-        :class="['tile', tile.letter && 'filled', tile.state && 'revealed']"
-      >
-        <div class="front" :style="{ transitionDelay: `${index * 300}ms` }">
-          {{ tile.letter }}
-        </div>
-        <div
-          :class="['back', tile.state]"
-          :style="{
-            transitionDelay: `${index * 300}ms`,
-            animationDelay: `${index * 100}ms`
-          }"
-        >
-          {{ tile.letter }}
-        </div>
-      </div>
-    </div>
-  </div>
-  <Keyboard @key="onKey" :letter-states="letterStates" />
+	<Transition>
+		<div class="message" v-if="message">
+			{{ message }}
+			<pre v-if="grid">{{ grid }}</pre>
+		</div>
+	</Transition>
+	<header>
+		<h1>VVORDLE</h1>
+		<a
+			id="source-link"
+			href="https://github.com/yyx990803/vue-wordle"
+			target="_blank"
+			>Source</a
+		>
+	</header>
+	<div id="board">
+		<div
+			v-for="(row, index) in board"
+			:class="[
+				'row',
+				shakeRowIndex === index && 'shake',
+				success && currentRowIndex === index && 'jump',
+			]"
+		>
+			<div
+				v-for="(tile, index) in row"
+				:class="[
+					'tile',
+					tile.letter && 'filled',
+					tile.state && 'revealed',
+				]"
+			>
+				<div
+					class="front"
+					:style="{
+						transitionDelay: `${
+							index * 300
+						}ms`,
+					}"
+				>
+					{{ tile.letter }}
+				</div>
+				<div
+					:class="['back', tile.state]"
+					:style="{
+						transitionDelay: `${
+							index * 300
+						}ms`,
+						animationDelay: `${
+							index * 100
+						}ms`,
+					}"
+				>
+					{{ tile.letter }}
+				</div>
+			</div>
+		</div>
+	</div>
+	<Keyboard @key="onKey" :letter-states="letterStates" />
 </template>
 
 <style scoped>
 #board {
-  display: grid;
-  grid-template-rows: repeat(6, 1fr);
-  grid-gap: 5px;
-  padding: 10px;
-  box-sizing: border-box;
-  --height: min(420px, calc(var(--vh, 100vh) - 310px));
-  height: var(--height);
-  width: min(350px, calc(var(--height) / 6 * 5));
-  margin: 0px auto;
+	display: grid;
+	grid-template-rows: repeat(6, 1fr);
+	grid-gap: 5px;
+	padding: 10px;
+	box-sizing: border-box;
+	--height: min(420px, calc(var(--vh, 100vh) - 310px));
+	height: var(--height);
+	width: min(350px, calc(var(--height) / 6 * 5));
+	margin: 0px auto;
 }
 .message {
-  position: absolute;
-  left: 50%;
-  top: 80px;
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.85);
-  padding: 16px 20px;
-  z-index: 2;
-  border-radius: 4px;
-  transform: translateX(-50%);
-  transition: opacity 0.3s ease-out;
-  font-weight: 600;
+	position: absolute;
+	left: 50%;
+	top: 80px;
+	color: #fff;
+	background-color: rgba(0, 0, 0, 0.85);
+	padding: 16px 20px;
+	z-index: 2;
+	border-radius: 4px;
+	transform: translateX(-50%);
+	transition: opacity 0.3s ease-out;
+	font-weight: 600;
 }
 .message.v-leave-to {
-  opacity: 0;
+	opacity: 0;
 }
 .row {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  grid-gap: 5px;
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	grid-gap: 5px;
 }
 .tile {
-  width: 100%;
-  font-size: 2rem;
-  line-height: 2rem;
-  font-weight: bold;
-  vertical-align: middle;
-  text-transform: uppercase;
-  user-select: none;
-  position: relative;
+	width: 100%;
+	font-size: 2rem;
+	line-height: 2rem;
+	font-weight: bold;
+	vertical-align: middle;
+	text-transform: uppercase;
+	user-select: none;
+	position: relative;
 }
 .tile.filled {
-  animation: zoom 0.2s;
+	animation: zoom 0.2s;
 }
 .tile .front,
 .tile .back {
-  box-sizing: border-box;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition: transform 0.6s;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
+	box-sizing: border-box;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	transition: transform 0.6s;
+	backface-visibility: hidden;
+	-webkit-backface-visibility: hidden;
 }
 .tile .front {
-  border: 2px solid #d3d6da;
+	border: 2px solid #d3d6da;
 }
 .tile.filled .front {
-  border-color: #999;
+	border-color: #999;
 }
 .tile .back {
-  transform: rotateX(180deg);
+	transform: rotateX(180deg);
 }
 .tile.revealed .front {
-  transform: rotateX(180deg);
+	transform: rotateX(180deg);
 }
 .tile.revealed .back {
-  transform: rotateX(0deg);
+	transform: rotateX(0deg);
 }
 
 @keyframes zoom {
-  0% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
+	0% {
+		transform: scale(1.1);
+	}
+	100% {
+		transform: scale(1);
+	}
 }
 
 .shake {
-  animation: shake 0.5s;
+	animation: shake 0.5s;
 }
 
 @keyframes shake {
-  0% {
-    transform: translate(1px);
-  }
-  10% {
-    transform: translate(-2px);
-  }
-  20% {
-    transform: translate(2px);
-  }
-  30% {
-    transform: translate(-2px);
-  }
-  40% {
-    transform: translate(2px);
-  }
-  50% {
-    transform: translate(-2px);
-  }
-  60% {
-    transform: translate(2px);
-  }
-  70% {
-    transform: translate(-2px);
-  }
-  80% {
-    transform: translate(2px);
-  }
-  90% {
-    transform: translate(-2px);
-  }
-  100% {
-    transform: translate(1px);
-  }
+	0% {
+		transform: translate(1px);
+	}
+	10% {
+		transform: translate(-2px);
+	}
+	20% {
+		transform: translate(2px);
+	}
+	30% {
+		transform: translate(-2px);
+	}
+	40% {
+		transform: translate(2px);
+	}
+	50% {
+		transform: translate(-2px);
+	}
+	60% {
+		transform: translate(2px);
+	}
+	70% {
+		transform: translate(-2px);
+	}
+	80% {
+		transform: translate(2px);
+	}
+	90% {
+		transform: translate(-2px);
+	}
+	100% {
+		transform: translate(1px);
+	}
 }
 
 .jump .tile .back {
-  animation: jump 0.5s;
+	animation: jump 0.5s;
 }
 
 @keyframes jump {
-  0% {
-    transform: translateY(0px);
-  }
-  20% {
-    transform: translateY(5px);
-  }
-  60% {
-    transform: translateY(-25px);
-  }
-  90% {
-    transform: translateY(3px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
+	0% {
+		transform: translateY(0px);
+	}
+	20% {
+		transform: translateY(5px);
+	}
+	60% {
+		transform: translateY(-25px);
+	}
+	90% {
+		transform: translateY(3px);
+	}
+	100% {
+		transform: translateY(0px);
+	}
 }
 
 @media (max-height: 680px) {
-  .tile {
-    font-size: 3vh;
-  }
+	.tile {
+		font-size: 3vh;
+	}
 }
 </style>
diff --git a/src/types.ts b/src/types.ts
index 375f069..68d9aaf 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -4,3 +4,8 @@ export const enum LetterState {
   PRESENT = 'present',
   ABSENT = 'absent'
 }
+
+export interface Tile {
+  letter: string
+  state: LetterState
+}