🌐 Added strings to translate

frontend/package.json

@@ -11,7 +11,7 @@
 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
 		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
 		"run:prod": "node index.js",
-		"translations-scan": "i18next-scanner --config i18next-scanner.config.engine.cjs src/routes/*/*.svelte"
+		"translations-scan": "i18next-scanner --config i18next-scanner.config.engine.cjs src/**/*.svelte"
 	},
 	"devDependencies": {
 		"@felte/validator-yup": "^1.0.1",

frontend/src/lib/editor.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
+
 	interface Data {
 		public: boolean;
 		title: string;
@@ -51,37 +55,37 @@
 </label>
 {#each data.questions as question, index_question}
 	<div class="ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2">
-		<h1 class="text-3xl">Question {index_question + 1}</h1>
+		<h1 class="text-3xl">{$t('words.question')} {index_question + 1}</h1>
 
 		<label>
 			<input
 				type="text"
-				placeholder="Question"
+				placeholder={$t('words.question')}
 				bind:value={question.question}
 				class="text-black"
 			/>
-			Question
+			{$t('words.question')}
 		</label>
 		<label>
 			<input type="text" placeholder="20" bind:value={question.time} class="text-black" />
-			Time in seconds
+			{$t('editor.time_in_seconds')}
 		</label>
 		{#each question.answers as answer, index_answer}
 			<div class="ml-8 grid grid-cols-1 gap-2 m-2 border border-black border-2">
-				<h1 class="text-3xl">Answer {index_answer + 1}</h1>
+				<h1 class="text-3xl">{$t('words.answer')} {index_answer + 1}</h1>
-				<p>Answer: {index_answer} Question: {index_question}</p>
+				<p>{$t('words.answer')}: {index_answer} {$t('words.question')}: {index_question}</p>
 				<label>
 					<input
 						type="text"
-						placeholder="Answer"
+						placeholder={$t('words.answer')}
 						bind:value={data.questions[index_question].answers[index_answer].answer}
 						class="text-black"
 					/>
-					Answer
+					{$t('words.answer')}
 				</label>
 				<label>
 					<input type="checkbox" bind:checked={answer.right} class="text-black" />
-					Right?
+					{$t('editor.right_or_true?')}?
 				</label>
 				<button
 					class="text-left"
@@ -93,7 +97,7 @@
 						];
 					}}
 				>
-					Add new answer
+					{$t('editor.add_new_answer')}
 				</button>
 			</div>
 		{/each}
@@ -104,7 +108,7 @@
 				data.questions = [...data.questions, { ...empty_question }];
 			}}
 		>
-			Add new question
+			{$t('editor.add_new_question')}
 		</button>
 	</div>
 {/each}

frontend/src/lib/i18n/locales/de.json

@@ -4,8 +4,6 @@
 			"title": "Home",
 			"description": "ClassQuiz ist eine Quiz-App wie KAHOOT! für Schüler*innen, welche open-source und kostenlos ist"
 		},
-		"stats": "Statistiken",
-		"features": "Features",
 		"features_description": {
 			"1": "ClassQuiz ist eine Quiz-Platform, welche das erstellen und managen von Quizzes erlaubt.",
 			"2": "Das Hauptfeature ist die KAHOOT!-Importfunktion, mit der man Quizzes von KAHOOT! importieren kann."
@@ -13,41 +11,24 @@
 		"slogan": "Die open-source Quiz-Platform!"
 	},
 	"overview_page": {
-		"create": "Erstellen",
-		"import": "Importieren",
-		"logout": "Ausloggen",
-		"title": "Titel",
 		"created_at": "Erstellt am",
-		"question_count": "Fragenanzahl",
+		"question_count": "Fragenanzahl"
-		"play": "Spielen",
-		"edit": "Bearbeiten",
-		"delete": "Löschen",
-		"public": "Öffentlich",
-		"start": "Starten"
 	},
 	"edit_page": {
-		"save": "Speichern",
 		"success_update_title": "Quiz erfolgreich aktualisiert!",
-		"success_update_body": "Das Quiz wurde erfolgreich aktualisiert!",
+		"success_update_body": "Das Quiz wurde erfolgreich aktualisiert!"
-		"close": "Schließen"
 	},
 	"create_page": {
 		"success": {
 			"title": "Quiz erfolgreich erstellt!",
 			"body": "Das Quiz wurde erfolgreich erstellt!"
-		},
+		}
-		"close": "Schließen"
 	},
 	"register_page": {
 		"greeting": "Schön, dich zu sehen!",
 		"create_account": "Account erstellen",
-		"email": "Email",
-		"username": "Nutzername",
-		"password": "Passwort",
 		"forgot_password?": "Passwort vergessen?",
-		"register": "Registrieren",
+		"already_have_account?": "Hast du schon einen Account?"
-		"already_have_account?": "Hast du schon einen Account?",
-		"login": "Login"
 	},
 	"login_page": {
 		"welcome_back": "Willkommen zurück!",
@@ -71,5 +52,53 @@
 				}
 			}
 		}
+	},
+	"words": {
+		"question": "",
+		"answer": "",
+		"stats": "",
+		"features": "",
+		"import": "",
+		"url": "",
+		"submit": "",
+		"create": "",
+		"logout": "",
+		"title": "",
+		"play": "",
+		"edit": "",
+		"delete": "",
+		"public": "",
+		"start": "",
+		"connect": "",
+		"pin": "",
+		"kick": "",
+		"register": "",
+		"login": "",
+		"docs": "",
+		"close": "",
+		"save": ""
+	},
+	"editor": {
+		"time_in_seconds": "",
+		"right_or_true?": "",
+		"add_new_answer": "",
+		"add_new_question": ""
+	},
+	"import": {
+		"need_help": "",
+		"visit_docs": ""
+	},
+	"admin": {
+		"already_registered_as_admin": ""
+	},
+	"admin_page": {
+		"already_registered_as_admin": "",
+		"start_game": "",
+		"time_left": "",
+		"get_results": ""
+	},
+	"import_page": {
+		"need_help": "",
+		"visit_docs": ""
 	}
 }

frontend/src/lib/i18n/locales/en.json

@@ -5,49 +5,30 @@
 			"description": "ClassQuiz is a quiz app like KAHOOT! for students, which is open source and free to use",
 			"title": "Home"
 		},
-		"stats": "Stats",
-		"features": "Features",
 		"features_description": {
 			"1": "ClassQuiz is a quiz-platform that allows you to create and manage quizzes.",
 			"2": "The main feature is a KAHOOT!-import function that allows you to import quizzes from KAHOOT!-quizzes."
 		}
 	},
 	"overview_page": {
-		"create": "Create",
-		"import": "Import",
-		"logout": "Logout",
-		"title": "Title",
 		"created_at": "Created at",
-		"question_count": "Question count",
+		"question_count": "Question count"
-		"play": "Play",
-		"edit": "Edit",
-		"delete": "Delete",
-		"public": "Public",
-		"start": "Start"
 	},
 	"edit_page": {
-		"save": "Save",
 		"success_update_title": "Successfully updated quiz!",
-		"success_update_body": "Updated the quiz successfully!",
+		"success_update_body": "Updated the quiz successfully!"
-		"close": "Close"
 	},
 	"create_page": {
 		"success": {
 			"title": "Successfully created quiz!",
 			"body": "Created the quiz successfully!"
-		},
+		}
-		"close": "Close"
 	},
 	"register_page": {
 		"greeting": "Nice to meet you!",
 		"create_account": "Create account",
-		"email": "Email",
-		"username": "Username",
-		"password": "Password",
 		"forgot_password?": "Forgot password?",
-		"register": "Register",
+		"already_have_account?": "Already have an account?"
-		"already_have_account?": "Already have an account?",
-		"login": "Login"
 	},
 	"login_page": {
 		"welcome_back": "Welcome back!",
@@ -71,5 +52,49 @@
 				}
 			}
 		}
+	},
+	"words": {
+		"question": "Question",
+		"answer": "Answer",
+		"stats": "Stats",
+		"features": "Features",
+		"login": "Login",
+		"email": "Email",
+		"username": "Username",
+		"password": "Password",
+		"play": "Play",
+		"edit": "Edit",
+		"delete": "Delete",
+		"public": "Public",
+		"start": "Start",
+		"create": "Create",
+		"import": "Import",
+		"logout": "Logout",
+		"title": "Title",
+		"url": "URL",
+		"submit": "Submit",
+		"connect": "Connect",
+		"pin": "PIN",
+		"kick": "Kick",
+		"register": "Register",
+		"docs": "Docs",
+		"close": "Close",
+		"save": "Save"
+	},
+	"editor": {
+		"time_in_seconds": "Time in seconds",
+		"right_or_true?": "Right?",
+		"add_new_answer": "Add new answer",
+		"add_new_question": "Add new question"
+	},
+	"import_page": {
+		"need_help": "Need help?",
+		"visit_docs": "Visit the documentation"
+	},
+	"admin_page": {
+		"already_registered_as_admin": "There is already an admin registered for this game.",
+		"start_game": "Start game",
+		"time_left": "Time left",
+		"get_results": "Get results"
 	}
 }

frontend/src/lib/navbar.svelte

@@ -1,5 +1,8 @@
 <script>
 	import '@fontsource/marck-script/index.css';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 
 	let openMenu = true;
 	let closeMenu = false;
@@ -82,19 +85,19 @@
 		<li class="py-2">
 			<a
 				class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-				href="/play">Play</a
+				href="/play">{$t('words.play')}</a
 			>
 		</li>
 		<li class="py-2">
 			<a
 				class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-				href="/account/register">Register</a
+				href="/account/register">{$t('words.register')}</a
 			>
 		</li>
 		<li class="py-2">
 			<a
 				class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-				href="/account/login">Login</a
+				href="/account/login">{$t('words.login')}</a
 			>
 		</li>
 		<li class="py-2">
@@ -106,7 +109,7 @@
 		<li class="py-2">
 			<a
 				class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
-				href="/docs">Docs</a
+				href="/docs">{$t('words.docs')}</a
 			>
 		</li>
 	</ul>

frontend/src/routes/account/register.svelte

@@ -103,7 +103,7 @@
 									name="email"
 									type="email"
 									class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
-									placeholder={$t('register_page.email')}
+									placeholder={$t('words.email')}
 									class:ring-red-700={$errors.email !== null}
 									class:ring-green-600={$touched.email === true &&
 										$errors.email === null}
@@ -112,7 +112,7 @@
 									for="email"
 									class="absolute cursor-text left-0 -top-3 text-sm text-gray-700 dark:text-white bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all"
 								>
-									{$t('register_page.email')}
+									{$t('words.email')}
 								</label>
 							</div>
 						</div>
@@ -123,7 +123,7 @@
 									name="username"
 									type="text"
 									class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
-									placeholder={$t('register_page.username')}
+									placeholder={$t('words.username')}
 									class:ring-red-700={$errors.username !== null}
 									class:ring-green-600={$touched.username === true &&
 										$errors.username === null}
@@ -132,7 +132,7 @@
 									for="username"
 									class="absolute cursor-text left-0 -top-3 text-sm text-gray-700 dark:text-white bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all"
 								>
-									{$t('register_page.username')}
+									{$t('words.username')}
 								</label>
 							</div>
 						</div>
@@ -146,13 +146,13 @@
 									class:ring-green-600={$touched.password1 === true &&
 										$errors.password1 === null}
 									class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
-									placeholder={$t('register_page.password')}
+									placeholder={$t('words.password')}
 								/>
 								<label
 									for="password1"
 									class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all"
 								>
-									{$t('register_page.password')}
+									{$t('words.password')}
 								</label>
 							</div>
 						</div>
@@ -163,7 +163,7 @@
 									name="password2"
 									type="password"
 									class="w-full peer bg-transparent h-10 rounded-lg text-gray-700 dark:text-white placeholder-transparent ring-2 px-2 ring-gray-500 focus:ring-sky-600 focus:outline-none focus:border-rose-600"
-									placeholder={$t('register_page.password')}
+									placeholder={$t('words.password')}
 									class:ring-red-700={$errors.password2 !== null}
 									class:ring-green-600={$touched.password2 === true &&
 										$errors.password2 === null}
@@ -172,7 +172,7 @@
 									for="password2"
 									class="absolute cursor-text left-0 -top-3 text-sm text-gray-500 bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all"
 								>
-									{$t('register_page.password')}
+									{$t('words.password')}
 								</label>
 							</div>
 						</div>
@@ -203,7 +203,7 @@
 										/>
 									</svg>
 								{:else}
-									{$t('register_page.register')}
+									{$t('words.register')}
 								{/if}
 							</button>
 						</div>
@@ -221,7 +221,7 @@
 				<a
 					href="/account/login"
 					class="mx-2 text-sm font-bold text-blue-500 dark:text-blue-400 hover:underline"
-					>{$t('register_page.login')}</a
+					>{$t('words.login')}</a
 				>
 			</div>
 		</div>
@@ -327,6 +327,7 @@
 						<div class="mt-2">
 							<p class="text-sm text-gray-500">
 								{#if responseData.data === '200'}
+									<!-- TODO: Add translation -->
 									You signed up successfully! Please check your mailbox to confirm
 									your email address!
 								{:else if responseData.data === '409'}
@@ -350,7 +351,7 @@
 						responseData.open = false;
 					}}
 					class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-					>Close
+					>{$t('words.login')}
 				</button>
 			</div>
 		</div>

frontend/src/routes/admin.svelte

@@ -26,6 +26,9 @@
 	import type { QuizData } from '../app';
 
 	import { socket } from '$lib/socket';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 
 	// let gameData = {
 	// 	game_id: 'a7ddb6af-79ab-45e0-b996-6254c1ad9818',
@@ -34,7 +37,6 @@
 	export let game_pin: string;
 	export let auto_connect: boolean;
 	export let game_token: string;
-	console.log(game_pin, game_token);
 	let success = false;
 	let players: Array<string> = [];
 	let errorMessage = '';
@@ -65,7 +67,7 @@
 		players = [...players, data];
 	});
 	socket.on('already_registered_as_admin', () => {
-		errorMessage = 'There is already an admin registered for this game.';
+		errorMessage = $t('admin_page.already_registered_as_admin');
 	});
 	let timer_res: string;
 	const set_question_number = (q_number: number) => {
@@ -111,7 +113,7 @@
 {#if !success}
 	<input placeholder="game id" bind:value={game_token} />
 	<input placeholder="game pin" bind:value={game_pin} />
-	<button on:click={connect}>Connect!</button>
+	<button on:click={connect}>{$t('words.connect')}!</button>
 	{#if errorMessage !== ''}
 		<p class="text-red-700">{errorMessage}</p>
 	{/if}
@@ -121,13 +123,13 @@
 		src="/api/v1/utils/qr/{quiz_data.game_pin}?ref=qr"
 		class="block mx-auto w-1/6"
 	/>
-	<p class="text-3xl text-center">Pin: {quiz_data.game_pin}</p>
+	<p class="text-3xl text-center">{$t('words.pin')}: {quiz_data.game_pin}</p>
 	<ul>
 		{#if players.length > 0}
 			{#each players as player}
 				<li>
 					<span>{player.username} </span>
-					<button>Kick</button>
+					<button>{$t('words.kick')}</button>
 				</li>
 			{/each}
 		{/if}
@@ -138,14 +140,14 @@
 				socket.emit('start_game', '');
 				game_started = true;
 			}}
-			>Start Game
+			>{$t('admin_page.start_game')}
 		</button>
 	{/if}
 {:else}
-	<span>Time left: {timer_res}</span>
+	<span>{$t('admin_page.time_left')}: {timer_res}</span>
 	<br />
 	{#if timer_res === '0'}
-		<button on:click={get_question_results}>Get results</button>
+		<button on:click={get_question_results}>{$t('admin_page.get_results')}</button>
 		<br />
 		{#if question_results !== null}
 			<br />

frontend/src/routes/create.svelte

@@ -152,7 +152,7 @@
 						window.location.href = '/overview';
 					}}
 					class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-					>{$t('create_page.close')}
+					>{$t('words.close')}
 				</button>
 			</div>
 		</div>

frontend/src/routes/edit.svelte

@@ -91,7 +91,7 @@
 {:then lol}
 	{#if data !== undefined}
 		<form on:submit|preventDefault={submit} class="grid grid-cols-1 gap-2">
-			<Editor bind:data submit_button_text={$t('edit_page.save')} />
+			<Editor bind:data submit_button_text={$t('words.save')} />
 		</form>
 	{/if}
 {:catch err}
@@ -161,7 +161,7 @@
 						window.location.href = '/overview';
 					}}
 					class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-					>{$t('edit_page.close')}
+					>{$t('words.close')}
 				</button>
 			</div>
 		</div>

frontend/src/routes/import.svelte

@@ -15,6 +15,9 @@
 </script>
 
 <script lang="ts">
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 	let url_input = '';
 
 	let url_valid = false;
@@ -77,16 +80,16 @@
 		>
 			<div class="px-6 py-4">
 				<h2 class="text-3xl font-bold text-center text-gray-700 dark:text-white">
-					ClassQuiz
+					{$t('words.import')}
 				</h2>
 
-				<h3 class="mt-1 text-xl font-medium text-center text-gray-600 dark:text-gray-200">
+				<!--				<h3 class="mt-1 text-xl font-medium text-center text-gray-600 dark:text-gray-200">
-					Welcome Back
+									Welcome Back
-				</h3>
+								</h3>-->
 
-				<p class="mt-1 text-center text-gray-500 dark:text-gray-400">
+				<!--				<p class="mt-1 text-center text-gray-500 dark:text-gray-400">
-					Login or create account
+									Login or create account
-				</p>
+								</p>-->
 
 				<form on:submit|preventDefault={submit}>
 					<div class="w-full mt-4">
@@ -106,7 +109,7 @@
 									for="url"
 									class="absolute cursor-text left-0 -top-3 text-sm text-gray-700 dark:text-white bg-inherit mx-1 px-1 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 peer-focus:-top-3 peer-focus:text-sky-600 peer-focus:text-sm transition-all"
 								>
-									URL
+									{$t('words.url')}
 								</label>
 							</div>
 						</div>
@@ -134,7 +137,7 @@
 										/>
 									</svg>
 								{:else}
-									Submit
+									{$t('words.submit')}
 								{/if}
 							</button>
 						</div>
@@ -144,12 +147,14 @@
 			<div
 				class="flex items-center justify-center py-4 text-center bg-gray-50 dark:bg-gray-700"
 			>
-				<span class="text-sm text-gray-600 dark:text-gray-200">Need help? </span>
+				<span class="text-sm text-gray-600 dark:text-gray-200"
+					>{$t('import_page.need_help')}</span
+				>
 
 				<a
 					href="/docs/import-from-kahoot"
 					class="mx-2 text-sm font-bold text-blue-500 dark:text-blue-400 hover:underline"
-					>Visit the docs</a
+					>{$t('import_page.visit_docs')}</a
 				>
 			</div>
 		</div>

frontend/src/routes/index.svelte

@@ -31,7 +31,7 @@
 
 <section id="stats">
 	<div class="text-center pt-48 snap-y">
-		<h1 class="sm:text-6xl text-4xl">{$t('index_page.stats')}</h1>
+		<h1 class="sm:text-6xl text-4xl">{$t('words.stats')}</h1>
 		<p class="text-xl pt-4">
 			{#await getStats() then stats}
 				There are already <span class="underline">{stats.user_count}</span> users and <!-- TODO: Add translation -->
@@ -42,7 +42,7 @@
 </section>
 <section id="features">
 	<div class="text-center pt-24 snap-y">
-		<h1 class="sm:text-6xl text-4xl">{$t('index_page.features')}</h1>
+		<h1 class="sm:text-6xl text-4xl">{$t('words.features')}</h1>
 		<p class="text-xl pt-4">
 			{$t('index_page.features_description.1')}
 			<br />

frontend/src/routes/overview.svelte

@@ -78,17 +78,17 @@
 			<a
 				href="/create"
 				class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-				>{$t('overview_page.create')}
+				>{$t('words.create')}
 			</a>
 			<a
 				href="/import"
 				class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-				>{$t('overview_page.import')}
+				>{$t('words.import')}
 			</a>
 			<a
 				href="/api/v1/users/logout"
 				class="px-4 py-2 leading-5 text-white transition-colors duration-200 transform bg-gray-700 rounded text-center hover:bg-gray-600 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-				>{$t('overview_page.logout')}
+				>{$t('words.logout')}
 			</a>
 		</div>
 		<div class="overflow-x-auto sm:-mx-8 lg:-mx-8">
@@ -101,7 +101,7 @@
 									scope="col"
 									class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 								>
-									{$t('overview_page.title')}
+									{$t('words.title')}
 								</th>
 								<th
 									scope="col"
@@ -119,25 +119,25 @@
 									scope="col"
 									class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 								>
-									{$t('overview_page.play')}
+									{$t('words.play')}
 								</th>
 								<th
 									scope="col"
 									class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 								>
-									{$t('overview_page.edit')}
+									{$t('words.edit')}
 								</th>
 								<th
 									scope="col"
 									class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 								>
-									{$t('overview_page.delete')}
+									{$t('words.delete')}
 								</th>
 								<th
 									scope="col"
 									class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400"
 								>
-									{$t('overview_page.public')}
+									{$t('words.public')}
 								</th>
 							</tr>
 						</thead>
@@ -169,7 +169,7 @@
 											}}
 											class="border border-green-600"
 										>
-											{$t('overview_page.start')}
+											{$t('words.start')}
 										</button>
 									</td>
 									<td
@@ -186,7 +186,7 @@
 											}}
 											class="border border-green-600"
 										>
-											{$t('overview_page.delete')}
+											{$t('words.delete')}
 										</button>
 									</td>
 									<td