From f1e00f6cdb92375d7ce3cde1c7ab44ebdb2d6513 Mon Sep 17 00:00:00 2001
From: Alexandru Chirila <1538458+alexkiro@users.noreply.github.com>
Date: Wed, 13 Mar 2024 22:28:26 +0200
Subject: [PATCH] Move things around in the UI and add animations

---
 .eslintrc.cjs                    |   4 +-
 src/App.vue                      |  16 ++-
 src/assets/main.css              |  75 +++++-----
 src/components/FoundWordList.vue |  67 +++++++++
 src/components/GamePlay.vue      | 232 +++++++++++++++++--------------
 src/lib/animations.ts            |  62 +++++++++
 tsconfig.app.json                |   2 +-
 tsconfig.node.json               |   3 +-
 8 files changed, 306 insertions(+), 155 deletions(-)
 create mode 100644 src/components/FoundWordList.vue
 create mode 100644 src/lib/animations.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index be4f9b0..6d16344 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -31,6 +31,8 @@ module.exports = {
     "func-style": "off",
     // Exclude some commonly used iterators
     "id-length": ["error", { exceptions: ["i", "j", "k"] }],
+    // Disable max-params
+    "max-params": "off",
     // Disable max-statements
     "max-statements": "off",
     // Enforce separate lines for multiline comments
@@ -39,9 +41,9 @@ module.exports = {
     "no-continue": "off",
     // Allow magic numbers
     "no-magic-numbers": "off",
+    // Disable no-shadow because of upstream bug
     // Allow negated conditions
     "no-negated-condition": "off",
-    // Disable no-shadow because of upstream bug
     // https://github.com/typescript-eslint/tslint-to-eslint-config/issues/856
     "no-shadow": "off",
     // Force separate var declaration
diff --git a/src/App.vue b/src/App.vue
index 10b4569..eb9c73c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,15 +10,15 @@ const enum GameModes {
   // multiPlayer,
 }
 
-const selectedGameMode: Ref<GameModes> = ref(GameModes.singlePlayer);
+const selectedGameMode: Ref<GameModes> = ref(GameModes.notSet);
 </script>
 
 <template>
-  <template v-if="selectedGameMode === GameModes.notSet">
+  <main v-if="selectedGameMode === GameModes.notSet">
     <header>Letter Clash</header>
     <button @click="selectedGameMode = GameModes.singlePlayer" class="btn brutal-border">Start Game</button>
-  </template>
-  <game-play v-else-if="selectedGameMode === GameModes.singlePlayer" />
+  </main>
+  <game-play @close="selectedGameMode = GameModes.notSet" v-else-if="selectedGameMode === GameModes.singlePlayer" />
 </template>
 
 <style>
@@ -43,4 +43,12 @@ header {
 
   font-size: 1.5rem;
 }
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  gap: 2rem;
+}
 </style>
diff --git a/src/assets/main.css b/src/assets/main.css
index ad268be..c9b12f8 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -25,14 +25,6 @@
   --btn-primary-bg: var(--peach);
 }
 
-html {
-  box-sizing: border-box;
-  color: var(--font-color);
-  font-family: "Reem Kufi", sans-serif;
-  letter-spacing: 0.1em;
-  word-spacing: 0.5em;
-}
-
 *,
 *::before,
 *::after {
@@ -43,50 +35,47 @@ a {
   text-decoration: none;
 }
 
-#app {
-  background-color: var(--background-color);
-  /*noinspection CssOverwrittenProperties*/
-  min-height: 100vh;
-  /*noinspection CssOverwrittenProperties*/
-  min-height: 100dvh;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-items: center;
-}
-
-header {
-  font-size: 2.5rem;
+button {
+  cursor: pointer;
   text-transform: uppercase;
   font-weight: bold;
-  text-align: center;
-  padding: 2rem;
+  line-height: 1;
 }
 
-main {
-  max-width: 768px;
-  padding: 1rem;
-  flex: 1;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-items: center;
+html {
+  box-sizing: border-box;
+  color: var(--font-color);
+  font-family: "Reem Kufi", sans-serif;
+  letter-spacing: 0.1em;
+  word-spacing: 0.5em;
 }
 
-.btn {
-  display: flex;
+body {
+  background-color: var(--background-color);
+}
 
-  color: var(--btn-primary-fg);
-  background-color: var(--btn-primary-bg);
+.brutal-border {
   border: 4px solid var(--border-color);
   border-radius: 8px;
-  padding: 1rem 2.5rem;
-
   box-shadow: 2px 4px #000;
+}
 
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 1.5rem;
+.bg-white {
+  background-color: white;
+}
+
+.bg-peach {
+  background-color: var(--dark-peach);
+}
+
+.bg-dark-peach {
+  background-color: var(--peach);
+}
+
+.bg-ocean {
+  background-color: var(--dark-ocean);
+}
+
+.bg-dark-ocean {
+  background-color: var(--ocean);
 }
diff --git a/src/components/FoundWordList.vue b/src/components/FoundWordList.vue
new file mode 100644
index 0000000..7f067ff
--- /dev/null
+++ b/src/components/FoundWordList.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="found-words">
+    <div :key="wordLength" class="word-group" v-for="(words, wordLength) in wordsByLength">
+      <div class="group-title">{{ wordLength }} letters - {{ words.length }}</div>
+      <div class="word-list">
+        <span :data-word="word" :key="word" v-for="word in Array.from(words).reverse()">{{ word }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineProps } from "vue";
+
+const props = defineProps({
+  foundWords: {
+    required: true,
+    type: Array<string>,
+  },
+});
+const wordsByLength = computed(() => {
+  const result: Record<number, string[]> = {};
+  for (const word of props.foundWords) {
+    result[word.length] ??= [];
+    result[word.length].push(word);
+  }
+  return result;
+});
+</script>
+
+<style scoped>
+.found-words {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.found-words > *:first-child {
+  margin-top: auto;
+}
+
+.word-group {
+  margin-bottom: 0.5rem;
+}
+
+.group-title {
+  font-weight: bold;
+  line-height: 1.3;
+  margin-bottom: 0.25rem;
+}
+
+.word-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  letter-spacing: normal;
+}
+
+.word-list span {
+  font-size: 16px;
+  background-color: white;
+  border: 2px solid var(--border-color);
+  border-radius: 4px;
+  padding: 0.25rem;
+  box-shadow: 1px 2px #000;
+}
+</style>
diff --git a/src/components/GamePlay.vue b/src/components/GamePlay.vue
index f316892..e408fb7 100644
--- a/src/components/GamePlay.vue
+++ b/src/components/GamePlay.vue
@@ -1,8 +1,45 @@
+<template>
+  <div class="game-container">
+    <div class="game-header">
+      <button class="game-score top-icon brutal-border bg-white">{{ score }}</button>
+      <div>
+        <button @click="resetGame" class="top-icon brutal-border bg-white">⟳</button>
+        <button @click="$emit('close')" class="top-icon brutal-border bg-dark-peach">X</button>
+      </div>
+    </div>
+    <found-word-list :found-words="foundWords" />
+    <div>
+      <div class="user-input brutal-border">
+        <input autocomplete="off" placeholder="..." readonly size="1" type="text" v-model="userInput" />
+        <button :disabled="userInput.length < 2" @submit="submitWord" class="submit-btn brutal-border" type="submit">
+          ▸
+        </button>
+      </div>
+    </div>
+    <div class="available-letters">
+      <button
+        :class="{
+          selected: userInput.indexOf(letter) !== -1,
+        }"
+        :key="letter"
+        @click="addLetter(letter)"
+        class="available-letter brutal-border"
+        v-for="letter in currentGame"
+      >
+        {{ letter }}
+      </button>
+      <button @click="backspace" class="available-letter brutal-border">←</button>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
-import { type Ref, computed, onMounted, ref } from "vue";
+import { type Ref, computed, nextTick, onMounted, ref } from "vue";
 
 import gameList from "@/assets/words/game-list.json";
 import wordList from "@/assets/words/word-list.json";
+import FoundWordList from "@/components/FoundWordList.vue";
+import { animateShake, animateWiggle } from "@/lib/animations";
 import { difference, isSuperset, randomChoice, shuffle } from "@/lib/utils";
 
 const alphabet: Set<string> = new Set("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""));
@@ -10,18 +47,19 @@ const alphabet: Set<string> = new Set("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""));
 const currentGame: Ref<string> = ref("");
 const userInput: Ref<string> = ref("");
 const foundWords: Ref<string[]> = ref([]);
-const solutions = computed(() => {
-  const game = new Set(currentGame.value);
-  return new Set(wordList.filter((word) => isSuperset(game, word)));
-});
-const wordsByLength = computed(() => {
-  const result: Record<number, string[]> = {};
+const score = computed(() => {
+  let result = 0;
   for (const word of foundWords.value) {
-    result[word.length] ??= [];
-    result[word.length].push(word);
+    result += word.length;
   }
   return result;
 });
+const solutions = computed(() => {
+  const game = new Set(currentGame.value);
+  return new Set(wordList.filter((word) => isSuperset(game, word)));
+});
+
+defineEmits(["close"]);
 
 function getNewGame(): string {
   const game = Array.from(randomChoice(gameList));
@@ -51,26 +89,42 @@ function backspace() {
   userInput.value = userInput.value.slice(0, -1);
 }
 
-function submitWord() {
+async function submitWord() {
   const word = userInput.value.toUpperCase();
-  if (solutions.value.has(word)) {
+  if (word.length < 2) return;
+
+  userInput.value = "";
+  const isValidWord = solutions.value.has(word);
+
+  if (!isValidWord) {
+    animateShake(".user-input", "dark-peach");
+  } else if (foundWords.value.indexOf(word) === -1) {
     foundWords.value.push(word);
+    await nextTick();
+    animateWiggle(`[data-word=${word}]`, "ocean");
+  } else {
+    animateShake(`[data-word=${word}]`, "dark-peach");
   }
-  userInput.value = "";
 }
 
-// function cheat() {
-//   for (const word of Array.from(solutions.value)) {
-//     userInput.value = word;
-//     submitWord();
-//   }
-// }
-
-function resetGame() {
+async function resetGame() {
   userInput.value = "";
   currentGame.value = getNewGame();
   foundWords.value = [];
-  // cheat();
+  // CHEAT!!!
+  // for (const word of solutions.value) {
+  //   userInput.value = word;
+  //   submitWord();
+  // }
+  await nextTick();
+
+  const colors = ["dark-ocean", "dark-peach", "ocean", "peach"];
+  const letters = Array.from(document.querySelectorAll(".available-letter"));
+  for (let i = 0; i < letters.length; i += 1) {
+    animateWiggle(letters[i], colors[i % 4], { delay: 50 * i });
+  }
+  animateShake(".game-score", "ocean", { delay: 500 });
+  animateShake(".user-input", "ocean", { delay: 1000 });
 }
 
 function handleKeyboardEvents(event: KeyboardEvent) {
@@ -102,35 +156,6 @@ onMounted(() => {
 });
 </script>
 
-<template>
-  <div class="game-container">
-    <input autocomplete="off" class="user-input" placeholder="..." readonly type="text" v-model="userInput" />
-    <div class="found-words">
-      <div :key="wordLength" class="word-group" v-for="(words, wordLength) in wordsByLength">
-        <div class="group-title">{{ wordLength }} letters - {{ words.length }}</div>
-        <div class="word-list">
-          <span :key="word" v-for="word in Array.from(words).reverse()">{{ word }}</span>
-        </div>
-      </div>
-    </div>
-    <div class="available-letters">
-      <button
-        :class="{
-          selected: userInput.indexOf(letter) !== -1,
-        }"
-        :key="letter"
-        @click="addLetter(letter)"
-        class="available-letter"
-        v-for="letter in currentGame"
-      >
-        {{ letter }}
-      </button>
-      <button @click="backspace" class="available-letter">←</button>
-    </div>
-    <button :disabled="userInput.length < 2" @click="submitWord" class="submit-btn" type="submit">Submit</button>
-  </div>
-</template>
-
 <style scoped>
 .game-container {
   position: fixed;
@@ -140,56 +165,53 @@ onMounted(() => {
   left: 0;
   max-width: 768px;
   margin: auto;
+  padding: 1rem 0;
 
-  padding: 1rem;
   display: grid;
-  gap: 2rem;
+  gap: 1rem;
   grid-template-columns: 1fr;
   grid-template-rows: min-content 1fr min-content min-content;
 }
 
-.user-input {
-  width: 100%;
-  font-size: 42px;
-  font-weight: bold;
-  letter-spacing: 0.2em;
-  border: 4px solid var(--border-color);
-  border-radius: 8px;
-  box-shadow: 2px 4px #000;
-  padding: 0.5rem 2rem;
-  outline: none;
+.game-container > * {
+  padding: 0 1rem;
 }
 
-.found-words {
-  overflow: hidden;
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 0.5rem;
-}
+.user-input {
+  background-color: white;
+  padding: 0.5rem 1rem;
 
-.word-group {
-  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.group-title {
+.user-input input {
+  display: block;
+  font-size: 24px;
   font-weight: bold;
-  line-height: 1.3;
+  letter-spacing: 0.2em;
+  flex-grow: 1;
+  border: none;
+
+  outline: none;
 }
 
-.word-list {
+.submit-btn {
   display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-  letter-spacing: normal;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+
+  background-color: var(--dark-ocean);
+  width: 2em;
+  height: 2em;
+  border-radius: 50%;
+  color: white;
 }
 
-.word-list span {
-  font-size: 14px;
-  background-color: white;
-  border: 2px solid var(--border-color);
-  border-radius: 4px;
-  padding: 0.25rem;
-  box-shadow: 1px 2px #000;
+.submit-btn:disabled {
+  background-color: #9b9a9a;
 }
 
 .available-letters {
@@ -202,12 +224,9 @@ onMounted(() => {
 
 .available-letter {
   background-color: white;
-  font-size: 32px;
+  font-size: 28px;
   font-weight: bold;
   text-transform: uppercase;
-  border: 4px solid var(--border-color);
-  border-radius: 8px;
-  box-shadow: 2px 4px #000;
 
   display: flex;
   align-items: center;
@@ -229,27 +248,32 @@ onMounted(() => {
   color: white;
 }
 
-.submit-btn {
-  padding: 0.5rem;
-  width: 100%;
-
-  background-color: var(--ocean);
-  color: white;
+.game-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+}
 
-  font-size: 32px;
-  font-weight: bold;
-  text-transform: uppercase;
-  border: 4px solid var(--border-color);
-  border-radius: 8px;
-  box-shadow: 2px 4px #000;
-  cursor: pointer;
+.game-header > * {
+  display: flex;
+  gap: 0.5rem;
 }
 
-.submit-btn:hover {
-  background-color: var(--dark-ocean);
+.top-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 1rem;
+  border-radius: 50%;
+  font-size: 18px;
 }
 
-.submit-btn:disabled {
-  filter: grayscale();
+.game-score {
+  width: 5rem;
+  border-radius: 8px;
 }
 </style>
diff --git a/src/lib/animations.ts b/src/lib/animations.ts
new file mode 100644
index 0000000..24d920a
--- /dev/null
+++ b/src/lib/animations.ts
@@ -0,0 +1,62 @@
+function animate(thing: Element | null | string, colorName: string, keyframes: any[], animationOptions: any) {
+  let el = null;
+  if (typeof thing === "string") {
+    el = document.querySelector(thing);
+  } else {
+    el = thing as Element;
+  }
+
+  if (!el) return;
+  const color = `var(--${colorName})`;
+  const borderColor = color;
+
+  el.scrollIntoView({ behavior: "smooth", block: "center" });
+  el.animate(
+    keyframes.map((keyframe) => {
+      return {
+        borderColor,
+        color,
+        ...keyframe,
+      };
+    }),
+    animationOptions,
+  );
+}
+
+export function animateShake(thing: Element | string, colorName: string, options?: any) {
+  animate(
+    thing,
+    colorName,
+    [
+      { offset: 0, transform: "translate(0px)" },
+      { offset: 0.25, transform: "translate(5px)" },
+      { offset: 0.5, transform: "translate(-5px)" },
+      { offset: 0.75, transform: "translate(5px)" },
+      { offset: 1, transform: "translate(0px)" },
+    ],
+    {
+      duration: 150,
+      iterations: 2,
+      ...options,
+    },
+  );
+}
+
+export function animateWiggle(thing: Element | string, colorName: string, options?: any) {
+  animate(
+    thing,
+    colorName,
+    [
+      { offset: 0, transform: "rotate(0deg)" },
+      { offset: 0.25, transform: "rotate(5deg) scale(1.1)" },
+      { offset: 0.5, transform: "rotate(0deg) scale(1.1)" },
+      { offset: 0.75, transform: "rotate(-5deg) scale(1.1)" },
+      { offset: 1, transform: "rotate(0deg)" },
+    ],
+    {
+      duration: 250,
+      iterations: 2,
+      ...options,
+    },
+  );
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index cf5e662..85ee9e2 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/lib/*"],
   "exclude": ["src/**/__tests__/*", "src/scripts"],
   "compilerOptions": {
     "composite": true,
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 1e7a561..0842716 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -6,8 +6,7 @@
     "cypress.config.*",
     "nightwatch.conf.*",
     "playwright.config.*",
-    "src/scripts/**/*",
-    "src/lib/**/*"
+    "src/scripts/**/*"
   ],
   "compilerOptions": {
     "composite": true,