diff options
| -rw-r--r-- | web/pw-server/src/lib/components/navbar/UserControls.svelte | 88 | ||||
| -rw-r--r-- | web/pw-server/src/routes/__layout.svelte | 124 | ||||
| -rw-r--r-- | web/pw-server/src/routes/bots/[bot_name]/__layout.svelte | 4 |
3 files changed, 90 insertions, 126 deletions
diff --git a/web/pw-server/src/lib/components/navbar/UserControls.svelte b/web/pw-server/src/lib/components/navbar/UserControls.svelte deleted file mode 100644 index 184a40a..0000000 --- a/web/pw-server/src/lib/components/navbar/UserControls.svelte +++ /dev/null @@ -1,88 +0,0 @@ -<script lang="ts"> - import { get_session_token, clear_session_token } from "$lib/auth"; - import { currentUser } from "$lib/stores/current_user"; - - import { onMount } from "svelte"; - - onMount(async () => { - // TODO: currentUser won't be set if the navbar component is not created. - const session_token = get_session_token(); - if (!session_token) { - return; - } - - let response = await fetch("/api/users/me", { - method: "GET", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${session_token}`, - }, - }); - - if (!response.ok) { - throw response.statusText; - } - - const user = await response.json(); - currentUser.set(user); - }); - - function signOut() { - // TODO: destroy session on server - currentUser.set(null); - clear_session_token(); - } -</script> - -<div class="user-controls"> - {#if $currentUser} - <a class="current-user-name" href="/users/{$currentUser['username']}"> - {$currentUser["username"]} - </a> - <!-- svelte-ignore a11y-click-events-have-key-events --> - <div class="sign-out" on:click={signOut}>Sign out</div> - {:else} - <a class="account-href" href="/login">Sign in</a> - <a class="account-href" href="/register">Sign up</a> - {/if} -</div> - -<style lang="scss"> - @mixin navbar-item { - font-size: 18px; - font-family: Helvetica, sans-serif; - padding: 4px 8px; - font-weight: 400; - } - - .account-href { - @include navbar-item; - color: #eee; - text-decoration: none; - } - - .current-user-name { - @include navbar-item; - text-decoration: none; - color: #fff; - } - - .sign-out { - @include navbar-item; - color: #ccc; - cursor: pointer; - } - - .user-controls { - display: flex; - align-items: center; - } - - // TODO: pretty hacky - @media screen and (max-width: 600px) { - .user-controls { - flex-direction: column; - align-items: flex-start; - } - } -</style> diff --git a/web/pw-server/src/routes/__layout.svelte b/web/pw-server/src/routes/__layout.svelte index e826ab1..59f6c4b 100644 --- a/web/pw-server/src/routes/__layout.svelte +++ b/web/pw-server/src/routes/__layout.svelte @@ -1,17 +1,52 @@ <script lang="ts"> - import { afterNavigate, beforeNavigate } from "$app/navigation"; - import UserControls from "$lib/components/navbar/UserControls.svelte"; + import { afterNavigate } from "$app/navigation"; import "./style.css"; - let isExpanded = false; + import { get_session_token, clear_session_token } from "$lib/auth"; + import { currentUser } from "$lib/stores/current_user"; + + import { onMount } from "svelte"; + + // TODO: ideally we'd not store this in the user session, + // and we'd be able to handle this in the load() function + onMount(async () => { + // TODO: currentUser won't be set if the navbar component is not created. + const session_token = get_session_token(); + if (!session_token) { + return; + } + + let response = await fetch("/api/users/me", { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${session_token}`, + }, + }); + + if (!response.ok) { + throw response.statusText; + } + + const user = await response.json(); + currentUser.set(user); + }); + + function signOut() { + // TODO: destroy session on server + currentUser.set(null); + clear_session_token(); + } + + let navbarExpanded = false; function toggleExpanded() { - isExpanded = !isExpanded; + navbarExpanded = !navbarExpanded; } afterNavigate(() => { - isExpanded = false; + navbarExpanded = false; }); </script> @@ -20,12 +55,13 @@ </svelte:head> <div class="outer-container"> - <div class="navbar" class:expanded={isExpanded}> - <div class="navbar-left"> - <a href="/" class="navbar-header"> - <img alt="logo" src="/ship.svg" height="32px'" /> - PlanetWars - </a> + <div class="navbar" class:expanded={navbarExpanded}> + <a href="/" class="navbar-header"> + <img alt="logo" src="/ship.svg" height="32px'" /> + PlanetWars + </a> + <div class="navbar-expand" on:click={toggleExpanded}>expand</div> + <div class="navbar-items"> <div class="navbar-item"> <a href="/editor">Editor</a> </div> @@ -36,13 +72,25 @@ <a href="/docs/rules">How to play</a> </div> <div class="navbar-divider" /> - <div class="navbar-item"> - <UserControls /> - </div> + {#if $currentUser} + <div class="navbar-item"> + <a class="current-user-name" href="/users/{$currentUser['username']}"> + {$currentUser["username"]} + </a> + </div> + <div class="navbar-item"> + <!-- svelte-ignore a11y-click-events-have-key-events --> + <div class="sign-out" on:click={signOut}>Sign out</div> + </div> + {:else} + <div class="navbar-item"> + <a class="account-href" href="/login">Sign in</a> + </div> + <div class="navbar-item"> + <a class="account-href" href="/register">Sign up</a> + </div> + {/if} </div> - <!-- <div class="navbar-right"> - </div> --> - <div class="navbar-expand" on:click={toggleExpanded}>expand</div> </div> <slot /> </div> @@ -70,7 +118,7 @@ padding: 0 15px; } - .navbar-left { + .navbar-items { display: flex; width: 100%; align-items: center; @@ -104,7 +152,7 @@ } .navbar-item { margin: auto 0; - padding: 0 8px; + padding: 8px; } .navbar-item a { font-size: 14px; @@ -113,6 +161,24 @@ font-weight: 600; } + .navbar-item a:hover { + color: #ccc; + } + + .current-user-name { + text-decoration: none; + color: #fff; + } + + .sign-out { + color: #ccc; + cursor: pointer; + } + + .sign-out:hover { + color: #fff; + } + .navbar-expand { color: white; display: none; @@ -120,7 +186,7 @@ height: $navbarHeight; } @media screen and (max-width: 600px) { - .navbar-item { + .navbar-items { display: none; } @@ -130,24 +196,14 @@ .navbar.expanded { height: auto; + flex-wrap: wrap; } - .navbar.expanded .navbar-left { + .navbar.expanded .navbar-items { + display: flex; flex-direction: column; align-items: flex-start; - } - - .navbar.expanded .navbar-item { - display: block; - padding: 8px; - } - - .navbar-right { - display: none; - } - - .navbar.expanded .navbar-right { - display: flex; + width: 100%; } .navbar-expand { diff --git a/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte index f527690..422e446 100644 --- a/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte +++ b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte @@ -23,10 +23,6 @@ export let owner; </script> -<svelte:head> - <title>{bot["name"]}</title> -</svelte:head> - <div class="header"> <div class="header-title-line"> <h1 class="bot-name">{bot["name"]}</h1> |