From 829fbc768d2690aecaf62193ac1e6d530fb8fb72 Mon Sep 17 00:00:00 2001
From: Mawoka <mawoka@e.email>
Date: Thu, 3 Mar 2022 17:42:41 +0100
Subject: [PATCH] :children_crossing: Added stores for navbar and added
 feature-overview

---
 frontend/src/lib/navbar.svelte           |  2 +-
 frontend/src/lib/stores.ts               |  4 ++++
 frontend/src/routes/__layout.svelte      | 14 ++++++++++----
 frontend/src/routes/account/login.svelte |  1 +
 frontend/src/routes/index.svelte         | 22 ++++++++++++++++++++--
 frontend/src/routes/play.svelte          |  7 +++++--
 6 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/lib/stores.ts

diff --git a/frontend/src/lib/navbar.svelte b/frontend/src/lib/navbar.svelte
index 63f4cba..f52ad63 100644
--- a/frontend/src/lib/navbar.svelte
+++ b/frontend/src/lib/navbar.svelte
@@ -70,7 +70,7 @@
 		<li class='py-2'>
 			<a
 				class='text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover'
-				href='#install'>Play</a
+				href='/play'>Play</a
 			>
 		</li>
 		<li class='py-2'>
diff --git a/frontend/src/lib/stores.ts b/frontend/src/lib/stores.ts
new file mode 100644
index 0000000..8e27f67
--- /dev/null
+++ b/frontend/src/lib/stores.ts
@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+
+
+export const navbarVisible = writable(true);
\ No newline at end of file
diff --git a/frontend/src/routes/__layout.svelte b/frontend/src/routes/__layout.svelte
index e0bdfe4..810566c 100644
--- a/frontend/src/routes/__layout.svelte
+++ b/frontend/src/routes/__layout.svelte
@@ -1,12 +1,18 @@
 <script>
 	import '../app.css';
 	import Navbar from '$lib/navbar.svelte';
+	import { navbarVisible } from '$lib/stores.ts';
 </script>
 
-<Navbar />
-<div class='pt-16 h-screen'>
-	<slot />
-</div>
+{#if $navbarVisible}
+	<Navbar />
+	<div class='pt-16 h-screen'>
+		<slot />
+	</div>
+{:else}
+	<slot></slot>
+{/if}
+
 <style lang='scss'>
   :global(body) {
     background: linear-gradient(to right, #009444, #39b54a, #8dc63f);
diff --git a/frontend/src/routes/account/login.svelte b/frontend/src/routes/account/login.svelte
index 4a372ee..402893b 100644
--- a/frontend/src/routes/account/login.svelte
+++ b/frontend/src/routes/account/login.svelte
@@ -21,6 +21,7 @@
 		});
 	}*/
 
+
 	let loginData = {
 		email: '',
 		password: ''
diff --git a/frontend/src/routes/index.svelte b/frontend/src/routes/index.svelte
index aac158a..07b5865 100644
--- a/frontend/src/routes/index.svelte
+++ b/frontend/src/routes/index.svelte
@@ -1,3 +1,21 @@
+<script lang="ts">
+	import {navbarVisible} from '$lib/stores';
+	navbarVisible.set(true);
+</script>
 
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<section>
+	<div class='pt-12 text-center'>
+		<h1 class='sm:text-8xl text-6xl mt-6 marck-script'>ClassQuiz</h1>
+		<p class='text-xl mt-4'>The open-source quiz-platform!</p>
+	</div>
+</section>
+<section id='features'>
+	<div class='text-center pt-48 snap-y'>
+		<h1 class='sm:text-6xl text-4xl'>Features</h1>
+		<p class='text-xl pt-4'>
+			ClassQuiz is a quiz-platform that allows you to create and manage quizzes.
+			<br>
+			Other than that, there are no features.
+		</p>
+	</div>
+</section>
diff --git a/frontend/src/routes/play.svelte b/frontend/src/routes/play.svelte
index f1b20d3..bd9d1a6 100644
--- a/frontend/src/routes/play.svelte
+++ b/frontend/src/routes/play.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script context='module' lang='ts'>
 	export async function load({ url }) {
 		const token = url.searchParams.get('pin');
 		return {
@@ -9,13 +9,15 @@
 	}
 </script>
 
-<script lang="ts">
+<script lang='ts'>
 	import { socket } from '$lib/socket';
 	import JoinGame from '$lib/play/join.svelte';
 	import type { Answer, QuizData } from '../app';
 	import ShowTitle from '$lib/play/title.svelte';
 	import Question from '$lib/play/question.svelte';
 	import ShowResults from '$lib/play/show_results.svelte';
+	import { navbarVisible } from '$lib/stores';
+
 	// Exports
 	export let game_pin: string;
 
@@ -27,6 +29,7 @@
 	// Variables init
 	let question_index = '';
 	let unique = {};
+	navbarVisible.set(false);
 	let game_pin_valid: boolean;
 	let answer_results: Array<Answer>;
 	let gameData: QuizData;