From bbd30613e268e18270c1a041fb31268fb74ff6d3 Mon Sep 17 00:00:00 2001
From: Mawoka <mawoka-myblock@e.email>
Date: Fri, 8 Jul 2022 20:25:24 +0200
Subject: [PATCH] :sparkles: Added manual language-toggle

---
 frontend/src/lib/footer.svelte          | 107 +++++++++++++++++----
 frontend/src/lib/language-toggle.svelte | 121 ++++++++++++++++++++++++
 2 files changed, 211 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/lib/language-toggle.svelte

diff --git a/frontend/src/lib/footer.svelte b/frontend/src/lib/footer.svelte
index 57f22a6..5f78587 100644
--- a/frontend/src/lib/footer.svelte
+++ b/frontend/src/lib/footer.svelte
@@ -3,24 +3,28 @@
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at https://mozilla.org/MPL/2.0/.
   -->
+<script lang="ts">
+	import LanguageToggle from './language-toggle.svelte';
+</script>
 
 <footer class="text-center text-white border-black">
-	<div class="text-center pt-4 bg-gray-700">
-		Made with ❤️ by
-		<a
-			href="https://mawoka.eu?utm_source=ClassQuiz&utm_medium=footer"
-			target="_blank"
-			class="hover:underline bg-clip-text text-transparent bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f]"
-			>Mawoka</a
-		>
-		and with the help of
-		<a href="/docs/attribution" class="underline text-blue-300 hover:text-blue-500 transition"
-			>others</a
-		>.
-	</div>
-	<div class="text-center bg-gray-700 pb-2">
-		<p>
-			If you find this useful, please consider <a
+	<div class="grid grid-cols-12 w-full pt-4 bg-gray-700 pb-2">
+		<p class="col-start-2 col-end-12 text-center w-full">
+			Made with ❤️ by
+			<a
+				href="https://mawoka.eu?utm_source=ClassQuiz&utm_medium=footer"
+				target="_blank"
+				class="hover:underline bg-clip-text text-transparent bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f]"
+				>Mawoka</a
+			>
+			and with the help of
+			<a
+				href="/docs/attribution"
+				class="underline text-blue-300 hover:text-blue-500 transition">others</a
+			>.
+			<br />
+			If you find this useful, please consider
+			<a
 				href="https://mawoka.eu/donate"
 				target="_blank"
 				class="underline text-blue-300 hover:text-blue-500 transition">Donating</a
@@ -32,10 +36,79 @@
 				>More details are here.</a
 			>
 		</p>
+		<div class="self-end flex flex-col items-center min-h-full h-full">
+			<div class="my-auto mr-16">
+				<LanguageToggle />
+			</div>
+		</div>
 	</div>
-	<div class="flex justify-center bg-gray-700 border-t-2 border-t-white">
+	<!-- to-[#8dc63f]-->
+	<span
+		class="w-full h-0.5 bg-gradient-to-r from-[#009444] via-[#39b54a] to-[#8dc63f] block bg-animated"
+	/>
+
+	<div class="flex justify-center bg-gray-700">
 		<p class="text-gray-400 text-center">
 			<i>Kahoot! and the K! logo are trademarks of Kahoot! AS</i>
 		</p>
 	</div>
 </footer>
+
+<style>
+	.bg-animated {
+		background-size: 30% 30%;
+
+		-webkit-animation: ColorRunner 13s ease infinite;
+		-moz-animation: ColorRunner 13s ease infinite;
+		-o-animation: ColorRunner 13s ease infinite;
+		animation: ColorRunner 13s ease infinite;
+	}
+
+	@-webkit-keyframes ColorRunner {
+		0% {
+			background-position: 0% 50%;
+		}
+		50% {
+			background-position: 100% 50%;
+		}
+		100% {
+			background-position: 0% 50%;
+		}
+	}
+
+	@-moz-keyframes ColorRunner {
+		0% {
+			background-position: 0% 50%;
+		}
+		50% {
+			background-position: 100% 50%;
+		}
+		100% {
+			background-position: 0% 50%;
+		}
+	}
+
+	@-o-keyframes ColorRunner {
+		0% {
+			background-position: 0% 50%;
+		}
+		50% {
+			background-position: 100% 50%;
+		}
+		100% {
+			background-position: 0% 50%;
+		}
+	}
+
+	@keyframes ColorRunner {
+		0% {
+			background-position: 0% 50%;
+		}
+		50% {
+			background-position: 100% 50%;
+		}
+		100% {
+			background-position: 0% 50%;
+		}
+	}
+</style>
diff --git a/frontend/src/lib/language-toggle.svelte b/frontend/src/lib/language-toggle.svelte
new file mode 100644
index 0000000..3119740
--- /dev/null
+++ b/frontend/src/lib/language-toggle.svelte
@@ -0,0 +1,121 @@
+<!--
+<script context='module' lang='ts'>
+	export const prerender = true;
+	export const load = async ({}) => {
+		return {};
+		const languages = [
+			{
+				code: 'de',
+				name: 'Deutsch',
+				flag: '🇩🇪'
+			},
+			{
+				code: 'en',
+				name: 'English',
+				flag: '🇺🇲'
+			},
+			{
+				code: 'tr',
+				name: 'Türkçe',
+				flag: '🇹🇷'
+			},
+			{
+				code: 'fr',
+				name: 'Français',
+				flag: '🇫🇷'
+			}
+		];
+		let final_arr = [];
+		const set_percents = async () => {
+			for (const lang of languages) {
+				const res = await fetch(`https://translate.mawoka.eu/api/translations/classquiz/frontend/${lang.code}/?format=json`);
+				const json = await res.json();
+				console.log(json);
+				// return Math.floor(json.translated_percent);
+				final_arr.push({ ...lang, percent: json.translated_percent });
+			}
+		};
+		await set_percents();
+		return {
+			slot: {
+				final_arr
+			}
+		};
+	};
+</script>
+-->
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { browser } from '$app/env';
+
+	export let languages: Array<{
+		flag: string;
+		name: string;
+		code: string;
+	}> = [
+		{
+			code: 'de',
+			name: 'Deutsch',
+			flag: '🇩🇪'
+		},
+		{
+			code: 'en',
+			name: 'English',
+			flag: '🇺🇲'
+		},
+		{
+			code: 'tr',
+			name: 'Türkçe',
+			flag: '🇹🇷'
+		},
+		{
+			code: 'fr',
+			name: 'Français',
+			flag: '🇫🇷'
+		},
+		{
+			code: 'id',
+			name: 'Bahasa Indonesia',
+			flag: '🇮🇩'
+		},
+		{
+			code: 'ca',
+			name: 'Català',
+			flag: '🇪🇸'
+		}
+	];
+	const get_selected_language = (): string => {
+		return localStorage.getItem('language');
+	};
+	let selected_language;
+	onMount(() => {
+		selected_language = get_selected_language();
+	});
+
+	const set_language = (code: string): void => {
+		if (browser) {
+			localStorage.setItem('language', code);
+			window.location.reload();
+		}
+	};
+</script>
+
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+
+<div>
+	<select
+		bind:value={selected_language}
+		on:change={() => {
+			set_language(selected_language);
+		}}
+		class="p-2 rounded-lg bg-gray-800 focus:ring-2 ring-blue-600"
+	>
+		{#each languages as lang}
+			<option value={lang.code}>{lang.flag} {lang.name} </option>
+		{/each}
+	</select>
+</div>