Completely rework justone

src/App.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <RouterView />
+</template>
+
+<style>
+body {
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+  Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>

src/components/EndGame.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+
+const emits = defineEmits<{
+  (e: 'again'): void;
+  (e: 'wordlist'): void;
+}>();
+</script>
+
+<template>
+  <div class="container">
+    <h1>🎉Game over! Another one?</h1>
+    <button @click="emits('again')">♻️ Play again!</button>
+    <button @click="emits('wordlist')">🛠 New wordlist</button>
+  </div>
+</template>
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+button {
+  margin-top: 10px;
+  padding: 16px;
+  width: 300px;
+  height: 150px;
+  border-radius: 5px;
+  cursor: pointer;
+  background-color: #59a;
+  border: 1px solid black;
+  font-size: x-large;
+  box-shadow: 2px 2px 5px black;
+}
+
+</style>

src/components/GameLoop.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { random } from "../wordlist";
+import { computed, ref, watch } from "vue";
+
+const props = defineProps<{
+  words: string[],
+  numWords: number,
+}>();
+
+const emits = defineEmits<{
+  (e: 'end-game'): void;
+}>();
+
+const wordsLeft = ref<string[]>(props.words.slice());
+
+const currentWord = ref<string>('');
+const gameStartTime = performance.now();
+const gameTimeString = ref<string>('');
+const numWordsLeft = computed(() => {
+  const maxWordsLeft = props.numWords - (props.words.length - wordsLeft.value.length);
+
+  return Math.min(maxWordsLeft, wordsLeft.value.length);
+});
+const interval = setInterval(() => {
+  const gameDurationSeconds = (performance.now() - gameStartTime) / 1000;
+  const minutes = Math.floor(gameDurationSeconds / 60);
+  const seconds = Math.floor(gameDurationSeconds) % 60;
+  gameTimeString.value = `${minutes}:${seconds.toString().padStart(2, '0')} minute`;
+}, 1000);
+function selectNextWord() {
+  const nextWord = wordsLeft.value.splice(random(wordsLeft.value.length), 1)[0];
+  if (undefined === nextWord || numWordsLeft.value <= 0) {
+    clearInterval(interval);
+    emits('end-game');
+    return;
+  }
+  currentWord.value = nextWord;
+}
+</script>
+
+<template>
+  <div class="container">
+    <h2>You word:</h2>
+    <h1>&gt;&gt; {{currentWord}} &lt;&lt;</h1>
+    <button @click="selectNextWord">Next word 😏</button>
+    <p>{{numWordsLeft}} words left</p>
+    <p>{{gameTimeString}}</p>
+  </div>
+</template>
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+button {
+  margin-top: 10px;
+  padding: 16px;
+  width: 200px;
+  border-radius: 5px;
+  cursor: pointer;
+  background-color: #5a5;
+  border: 1px solid black;
+  font-size: x-large;
+  box-shadow: 2px 2px 5px black;
+}
+
+</style>

src/components/WordlistSelection.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { wordlists } from "../wordlist";
+
+// Assume the file exists in ./public/wordlists/<name>.txt
+import { ref } from "vue";
+import VueNumberInput from '@chenfengyuan/vue-number-input';
+
+const emits = defineEmits<{
+  (e: 'start-game', selectedWordLists: string[], numWords: number): void;
+}>();
+const numWords = ref<number>(21);
+
+const selectedWordLists = ref<Set<string>>(new Set<string>([]));
+function toggleInWordlist(name: string) {
+  if (selectedWordLists.value.has(name)) {
+    selectedWordLists.value.delete(name);
+  } else {
+    selectedWordLists.value.add(name);
+  }
+}
+function mouseover(event: MouseEvent, name: string) {
+  if (event.type === 'mouseover' && event.buttons === 0) {
+    return;
+  }
+  toggleInWordlist(name);
+}
+
+function startGame() {
+  emits(
+    'start-game',
+    [...selectedWordLists.value].map(name => `wordlists/${name.toLowerCase()}.txt`),
+    numWords.value
+  );
+}
+</script>
+
+<template>
+  <div class="container">
+    <h1>Just One</h1>
+    <p>How many words?</p>
+    <VueNumberInput
+      type="number"
+      v-model="numWords"
+      :min="10"
+      :max="100"
+      inline
+      controls
+    />
+    <p>Choose your wordlists:</p>
+    <div
+      v-for="name in wordlists"
+      :class="['card', { selected: selectedWordLists.has(name) }]"
+      @mouseover="mouseover($event, name)"
+      @mousedown="mouseover($event, name)"
+    >
+      {{ name }}
+    </div>
+    <button @click="startGame">Start Game 💨</button>
+  </div>
+</template>
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+.card {
+  border: 1px solid black;
+  border-radius: 5px;
+  padding: 5px;
+  margin: 5px;
+  cursor: pointer;
+  width: 200px;
+  text-align: center;
+}
+.selected {
+  background-color: #afa;
+  box-shadow: 2px 2px 3px black;
+}
+button {
+  margin-top: 10px;
+  padding: 16px;
+  width: 200px;
+  border-radius: 5px;
+  cursor: pointer;
+  background-color: #5a5;
+  border: 1px solid black;
+  font-size: x-large;
+  box-shadow: 2px 2px 5px black;
+}
+
+
+
+</style>

src/gamestate.ts

@@ -0,0 +1 @@
+export type GAMESTATE = 'wordlist-selection' | 'play' | 'end';

src/main.ts

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import JustOne from '../views/JustOne.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'justone',
+      component: JustOne
+    },
+  ]
+})
+
+export default router

src/views/JustOne.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { GAMESTATE } from "../gamestate";
+import { fetchWordLists } from "../wordlist";
+import { ref } from "vue";
+import WordlistSelection from '../components/WordlistSelection.vue';
+import GameLoop from '../components/GameLoop.vue';
+import EndGame from '../components/EndGame.vue';
+
+const gamestate = ref<GAMESTATE>('wordlist-selection');
+const words = ref<string[]>([]);
+const numWords = ref<number>(-1);
+
+async function selectWordlist(wordLists: string[], _numWords: number) {
+  words.value = await fetchWordLists(wordLists);
+  numWords.value = _numWords;
+  gamestate.value = 'play';
+}
+</script>
+
+<template>
+  <main>
+    <WordlistSelection
+      v-if="gamestate === 'wordlist-selection'"
+      @start-game="selectWordlist"
+    />
+    <GameLoop
+      v-else-if="gamestate === 'play'"
+      :words="words"
+      :num-words="numWords"
+      @end-game="() => gamestate = 'end'"
+    />
+    <EndGame v-else-if="gamestate === 'end'" />
+    <div v-else>Not implemented...</div>
+  </main>
+</template>

src/wordlist.ts

@@ -0,0 +1,33 @@
+export const wordlists = [
+    'Laura',
+    'Becker',
+    'Junior',
+    'Senior',
+    'Simon',
+    'Lars',
+    'Kompositwörter',
+    'Filme',
+];
+
+export async function fetchWordLists(filenames: string[]) {
+    let titles: string[] = [];
+    for (const filename of filenames) {
+        const response = await fetch(filename);
+        if (response.status !== 200) {
+            continue;
+        }
+        const text = await response.text();
+
+        const lines = text
+            .split('\n')
+            .map(title => title.trim())
+            .filter(title => title.length > 0)
+        titles.push(...lines);
+    }
+    return titles;
+
+}
+
+export function random(max: number): number {
+    return Math.floor(Math.random() * max);
+}