Move things around in the UI and add animations

.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

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>

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);
 }

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>