made basic nav bar and intigrated the worldle options in it! will do rest intigrations lalter
This commit is contained in:
parent
923c7e9624
commit
b98141bda0
4 changed files with 99 additions and 95 deletions
|
|
@ -4,19 +4,19 @@
|
|||
|
||||
import { Toaster } from "svelte-5-french-toast";
|
||||
let { children } = $props();
|
||||
|
||||
import { page } from "$app/stores";
|
||||
</script>
|
||||
|
||||
<Toaster />
|
||||
{#if $page.url.pathname == "/"}
|
||||
<div class="h-full">
|
||||
<!--
|
||||
will be used for the nav bar later as i asked my friend to
|
||||
make a design for it and the whole app so ill make it
|
||||
functional once he gives me the design
|
||||
|
||||
<div class="m-3 flex w-[calc(100%-1.5rem)] items-center justify-between rounded border-2 p-1">
|
||||
<Nav />
|
||||
</div>
|
||||
-->
|
||||
|
||||
{@render children()}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex h-full flex-col">
|
||||
<Nav />
|
||||
|
||||
<div class="flex-1">{@render children()}</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,86 @@
|
|||
<button class="btn compact dull text-4xl">
|
||||
<script>
|
||||
import { page } from "$app/stores";
|
||||
|
||||
let CurrentPage = $state();
|
||||
CurrentPage = $page.url.pathname;
|
||||
$effect(() => {
|
||||
CurrentPage = $page.url.pathname;
|
||||
});
|
||||
|
||||
let details = {
|
||||
"/kahootclone": {
|
||||
title: "Quizlet Home",
|
||||
conformOnBack: null,
|
||||
},
|
||||
"/kahootclone/create": {
|
||||
title: "Create Quiz",
|
||||
conformOnBack: "Are you sure you want to go back? You will lose all currently entered Q&As.",
|
||||
},
|
||||
"/kahootclone/play": {
|
||||
title: "Play Quiz",
|
||||
conformOnBack: "Are you sure you want to leave the game? you wont be able to rejoin it.",
|
||||
},
|
||||
"/kahootclone/host": {
|
||||
title: "Host Quiz",
|
||||
conformOnBack: "Are you sure you want to leave the game? if you leave, the game will end.",
|
||||
},
|
||||
"/kahootclone/join": {
|
||||
title: "Join Quiz",
|
||||
conformOnBack: null,
|
||||
},
|
||||
"/kahootclone/results": {
|
||||
title: "Leaderboard of Quiz Played",
|
||||
conformOnBack: null,
|
||||
},
|
||||
"/wordle": {
|
||||
title: "Play wordle",
|
||||
conformOnBack:
|
||||
"Are you sure you want to leave the game? you will lose your current game progress.",
|
||||
},
|
||||
"/randomname": {
|
||||
title: "select a random name",
|
||||
conformOnBack: null,
|
||||
},
|
||||
"/announcer": {
|
||||
title: "Announcer something",
|
||||
conformOnBack: null,
|
||||
},
|
||||
"/IdleScreen": {
|
||||
title: "A Idle Screen",
|
||||
conformOnBack: null,
|
||||
},
|
||||
};
|
||||
|
||||
import { OpenTab } from "./wordle/InfoAndSetings/main.svelte";
|
||||
</script>
|
||||
|
||||
<div class="mb-1 flex items-center justify-between rounded border-2">
|
||||
<button
|
||||
class="btn mini dull"
|
||||
onclick={() => {
|
||||
if (
|
||||
details[CurrentPage].conformOnBack == null
|
||||
? true
|
||||
: confirm(details[CurrentPage].conformOnBack)
|
||||
) {
|
||||
window.location.href = "../";
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src="https://hc-cdn.hel1.your-objectstorage.com/s/v3/4a82e0c815624c7786ca2a5addbcc74487da8940_group_8__2_.svg"
|
||||
class="h-12"
|
||||
class="h-6"
|
||||
alt=""
|
||||
/>Go back
|
||||
<i class="nf nf-md-keyboard_backspace"></i>
|
||||
</button>
|
||||
<div>
|
||||
<button class="btn compact dull circular text-4xl" aria-label="Settings">
|
||||
<i class="nf nf-seti-config"></i>
|
||||
</button>
|
||||
<span class="text-lg font-medium">
|
||||
{details[CurrentPage].title}
|
||||
</span>
|
||||
<div class="flex gap-2">
|
||||
{#if CurrentPage == "/wordle"}
|
||||
<button class="btn dull mini" onclick={() => OpenTab("WordLength")}> Change word legnth </button>
|
||||
<button class="btn dull mini" onclick={() => OpenTab("Stats")}>Stats </button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@
|
|||
&.slim {
|
||||
@apply px-1 py-3;
|
||||
}
|
||||
&.mini {
|
||||
@apply px-0.5 py-0.5;
|
||||
}
|
||||
|
||||
&.green {
|
||||
@apply bg-green-600 hover:bg-green-500;
|
||||
|
|
|
|||
|
|
@ -27,40 +27,6 @@
|
|||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="nav">
|
||||
<div></div>
|
||||
<div>
|
||||
<button aria-label="Back to main menu" onclick={() => OpenTab("WordLength")}
|
||||
><span class="front"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 -960 960 960"
|
||||
width="24px"
|
||||
fill="#FFFFFF"
|
||||
><path
|
||||
d="M320-80 160-240l160-160 57 56-64 64h334l-63-64 56-56 160 160L640-80l-57-56 64-64H313l63 64-56 56ZM200-480v-400h80v400h-80Zm240 0v-400h80v400h-80Zm240 0v-400h80v400h-80Z"
|
||||
/></svg
|
||||
> Change word legnth
|
||||
</span></button
|
||||
>
|
||||
<button aria-label="Back to main menu" onclick={() => OpenTab("Stats")}
|
||||
><span class="front"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 -960 960 960"
|
||||
width="24px"
|
||||
fill="#FFFFFF"
|
||||
><path
|
||||
d="m105-399-65-47 200-320 120 140 160-260 120 180 135-214 65 47-198 314-119-179-152 247-121-141-145 233Zm475 159q42 0 71-29t29-71q0-42-29-71t-71-29q-42 0-71 29t-29 71q0 42 29 71t71 29ZM784-80 676-188q-21 14-45.5 21t-50.5 7q-75 0-127.5-52.5T400-340q0-75 52.5-127.5T580-520q75 0 127.5 52.5T760-340q0 26-7 50.5T732-244l108 108-56 56Z"
|
||||
/></svg
|
||||
> Stats
|
||||
</span></button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div id="root">
|
||||
<div id="left">
|
||||
<Display />
|
||||
|
|
@ -70,48 +36,10 @@
|
|||
</div>
|
||||
|
||||
<style>
|
||||
#nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #121212;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #292929;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
margin: 10px;
|
||||
padding: 2px 0px;
|
||||
cursor: pointer;
|
||||
outline-offset: 4px;
|
||||
max-width: 400px;
|
||||
}
|
||||
button:hover .front {
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
|
||||
button:active .front {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.front {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
border-radius: 12px;
|
||||
|
||||
background: #4d4d4d;
|
||||
color: white;
|
||||
transform: translateY(-4px);
|
||||
transition: all 0.1s ease-in-out;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 90%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
background-color: #121212;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue