add logo and page titles

5 files changed, 108 insertions, 18 deletions

diff --git a/web/pw-server/src/lib/components/NavTab.svelte b/web/pw-server/src/lib/components/NavTab.svelte
index 2a93897..611f233 100644
--- a/web/pw-server/src/lib/components/NavTab.svelte
+++ b/web/pw-server/src/lib/components/NavTab.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { page } from '$app/stores';
+  import { page } from "$app/stores";
   export let href: string;
 
   $: isActive = $page.url.pathname == href;
 </script>
 
 <a class="nav-tab" {href} class:active={isActive}>
-  <slot></slot>
+  <slot />
 </a>
 
 <style lang="scss">
diff --git a/web/pw-server/src/routes/__layout.svelte b/web/pw-server/src/routes/__layout.svelte
index 6d00a5f..e826ab1 100644
--- a/web/pw-server/src/routes/__layout.svelte
+++ b/web/pw-server/src/routes/__layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { afterNavigate, beforeNavigate } from "$app/navigation";
+  import { afterNavigate, beforeNavigate } from "$app/navigation";
   import UserControls from "$lib/components/navbar/UserControls.svelte";
 
   import "./style.css";
@@ -15,12 +15,17 @@
   });
 </script>
 
+<svelte:head>
+  <title>Planetwars</title>
+</svelte:head>
+
 <div class="outer-container">
   <div class="navbar" class:expanded={isExpanded}>
     <div class="navbar-left">
-      <div class="navbar-header">
-        <a href="/">PlanetWars</a>
-      </div>
+      <a href="/" class="navbar-header">
+        <img alt="logo" src="/ship.svg" height="32px'" />
+        PlanetWars
+      </a>
       <div class="navbar-item">
         <a href="/editor">Editor</a>
       </div>
@@ -30,17 +35,14 @@
       <div class="navbar-item">
         <a href="/docs/rules">How to play</a>
       </div>
-      <div class="navbar-divider"></div>
+      <div class="navbar-divider" />
       <div class="navbar-item">
         <UserControls />
       </div>
-
     </div>
     <!-- <div class="navbar-right">
     </div> -->
-    <div class="navbar-expand" on:click={toggleExpanded}>
-      expand
-    </div>
+    <div class="navbar-expand" on:click={toggleExpanded}>expand</div>
   </div>
   <slot />
 </div>
@@ -48,7 +50,7 @@
 <style lang="scss" global>
   @import "src/styles/global.scss";
 
-  $navbarHeight: 48px;
+  $navbarHeight: 52px;
 
   .outer-container {
     width: 100vw;
@@ -59,6 +61,7 @@
 
   .navbar {
     height: $navbarHeight;
+    // height: 52px;
     background-color: $bg-color;
     border-bottom: 1px solid;
     flex-shrink: 0;
@@ -70,6 +73,7 @@
   .navbar-left {
     display: flex;
     width: 100%;
+    align-items: center;
   }
 
   .navbar-right {
@@ -82,13 +86,20 @@
 
   .navbar-header {
     height: $navbarHeight;
-    padding-top: 12px;
     padding-right: 24px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
   }
 
-  .navbar-header a {
+  .navbar-header img {
+    display: block;
+  }
+
+  .navbar-header {
     font-size: 20px;
     color: #fff;
+    font-weight: 500;
     text-decoration: none;
   }
   .navbar-item {
@@ -104,10 +115,9 @@
 
   .navbar-expand {
     color: white;
-    // margin: auto 0px;
     display: none;
     font-size: 16px;
-    padding-top: 14px;
+    height: $navbarHeight;
   }
   @media screen and (max-width: 600px) {
     .navbar-item {
@@ -124,6 +134,7 @@
 
     .navbar.expanded .navbar-left {
       flex-direction: column;
+      align-items: flex-start;
     }
 
     .navbar.expanded .navbar-item {
@@ -140,7 +151,8 @@
     }
 
     .navbar-expand {
-      display: block;
+      display: flex;
+      align-items: center;
     }
   }
 </style>
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 4393af6..f527690 100644
--- a/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte
+++ b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte
@@ -17,12 +17,16 @@
 
 <script lang="ts">
   import NavTab from "$lib/components/NavTab.svelte";
-import { currentUser } from "$lib/stores/current_user";
+  import { currentUser } from "$lib/stores/current_user";
 
   export let bot;
   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>
diff --git a/web/pw-server/static/favicon.ico b/web/pw-server/static/favicon.ico
index 628e6ed..a57f3d6 100644
--- a/web/pw-server/static/favicon.ico
+++ b/web/pw-server/static/favicon.ico
diff --git a/web/pw-server/static/ship.svg b/web/pw-server/static/ship.svg
new file mode 100644
index 0000000..584dc7d
--- /dev/null
+++ b/web/pw-server/static/ship.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="256"
+   height="256"
+   viewBox="0 0 67.733334 67.733335"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="ship.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.5547069"
+     inkscape:cx="84.581859"
+     inkscape:cy="96.159603"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1048"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     gridtolerance="10"
+     inkscape:pagecheckerboard="0"
+     units="px"
+     showguides="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid894"
+       originx="-160.50747"
+       originy="118.75037" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(68.546255,1.4712222)">
+    <path
+       style="opacity:1;fill:#0080ff;fill-opacity:1;stroke:none;stroke-width:2.62496;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m -1.1653786,-1.1187634 c 0,0 -19.8066244,-3.951813 -38.3679054,14.6094684 -5.638557,5.638556 -9.079741,12.298673 -9.944061,18.242693 -8.171129,0.01575 -17.778639,2.559512 -19.011539,6.258199 -0.74245,2.227353 5.93962,10.394311 7.42452,10.394311 3.24176,4e-6 8.709863,-4.641736 12.41807,-8.122587 0.570451,1.375968 1.37667,2.613603 2.43095,3.66788 1.054279,1.054281 2.291914,1.860502 3.667882,2.430951 -3.480854,3.70821 -8.122589,9.176312 -8.122591,12.418075 0,1.484901 8.16696,8.166962 10.394318,7.424513 3.698681,-1.232896 6.242428,-10.8404 6.258196,-19.011536 5.94402,-0.86432 12.604136,-4.305506 18.242693,-9.94406 C 2.7864384,18.687863 -1.1653786,-1.1187634 -1.1653786,-1.1187634 Z m -7.184953,7.184956 c 0,0 2.691421,13.4887954 -9.9492834,26.1294974 -6.981267,6.981265 -16.262764,9.018566 -20.730775,4.550557 -4.46801,-4.46801 -2.430709,-13.749507 4.550559,-20.730773 C -21.839127,3.3747706 -8.3503346,6.0661926 -8.3503316,6.0661926 Z"
+       id="path4600" />
+  </g>
+</svg>