From 21952c2024697dfd902e9ecf87623d0614c15ce4 Mon Sep 17 00:00:00 2001
From: Adrian Gaudebert <adrian@gaudebert.fr>
Date: Thu, 24 Oct 2024 19:26:57 +0200
Subject: [PATCH] Make the navigation bar prettier.

---
 public/img/icons/field.svg   |  1 +
 public/img/icons/village.svg |  1 +
 src/hud/Navigation.svelte    | 39 ++++++++++++++++++++++++++++++++++--
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 public/img/icons/field.svg
 create mode 100644 public/img/icons/village.svg

diff --git a/public/img/icons/field.svg b/public/img/icons/field.svg
new file mode 100644
index 0000000..3f5b42d
--- /dev/null
+++ b/public/img/icons/field.svg
@@ -0,0 +1 @@
+<svg style="height: 512px; width: 512px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="" style="" transform="translate(0,0)"><path d="M257.625 16.75c-132.32 0-239.78 107.46-239.78 239.78s107.46 239.783 239.78 239.783 239.78-107.462 239.78-239.782-107.46-239.78-239.78-239.78zm0 17.906c58.24 0 111.19 22.37 150.75 59-53.35-22.728-121.28 4.247-156.97-18.594 15.65 28.19 42.047 29.17 74.032 27.438 22.816 27.9 61.838 17.83 106.782 17 17.17 21.857 30.288 47.033 38.31 74.406-23.755 6.825-72.6 4.008-92.374-.875 8.236 8.03 19.117 12.027 32.094 14.595-48.222 1.067-94.365 5.457-124.375-11.688 8.84 14.213 20.115 23.206 33.28 28.625-19.962-.433-38.48-3.21-54.905-11.093 26.83 30.444 69.098 30.62 114.47 26.28 31.063 11.3 66.71 13.98 100.717 12.375.03 1.47.063 2.93.063 4.406 0 19.2-2.428 37.834-7 55.595-9.933-2.477-20.396-4.745-31.313-6.78l6.907-25.44-18.03-4.874-7.377 27.126c-14.308-2.26-29.233-4.163-44.593-5.75l3.344-31.375-18.594-2-3.375 31.626c-17.664-1.49-35.795-2.55-54.095-3.22l1.375-34.623-18.656-.75-1.406 34.812c-11.082-.238-22.19-.33-33.282-.28-6.816.03-13.623.142-20.406.28l-1.5-37.72-18.656.75 1.5 37.47c-17.666.618-35.106 1.605-52.03 2.938l-4.033-37.688-18.56 1.97 3.968 37.342c-14.93 1.44-29.428 3.16-43.22 5.157l-8.812-32.5-18.03 4.906 8.28 30.5c-13.984 2.39-27.106 5.07-39.187 8.063-4.562-17.742-6.97-36.357-6.97-55.532 0-30.21 6.03-58.983 16.938-85.217 45.587 15.482 137.805-12.232 208.062 16.468-13.577-12.7-29.093-20.01-45.53-24.53 42.76 4.614 101.767-13.058 162.343 11.688-13.39-12.526-28.787-19.426-44.97-23.97-31.258-26.39-71.34-28.437-109.812-27.437-36.037-25.845-82.634-23.168-124.31-21.655 40.3-41.466 96.683-67.22 159.155-67.22zm-4.22 275.125c10.84-.048 21.707.064 32.532.283l-1 24.75c-16.738-.202-33.458-.102-50.156.312l-1-25.094c6.533-.125 13.063-.22 19.626-.25zm-38.31.783l1 25.156c-16.37.62-32.73 1.506-49.064 2.655l-2.686-25.094c16.482-1.244 33.504-2.136 50.75-2.717zm89.53.03c17.893.626 35.6 1.606 52.813 3l-2.563 23.97c-17.098-1.158-34.168-1.956-51.22-2.407l.97-24.562zm-158.906 4.25l2.655 24.97c-12.164.997-24.323 2.114-36.47 3.375l-6.436-23.75c12.845-1.773 26.32-3.3 40.25-4.594zm230.343.438c14.38 1.44 28.335 3.135 41.687 5.158l-6.063 22.343c-12.733-1.48-25.45-2.752-38.156-3.81l2.533-23.69zm-289.188 6.97l6.22 23c-12.295 1.406-24.567 2.948-36.845 4.594-2.99-6.453-5.692-13.073-8.063-19.844 11.808-2.878 24.784-5.464 38.688-7.75zm349.375 1.28c10.804 1.955 21.1 4.112 30.813 6.5-2.303 6.576-4.926 13.008-7.813 19.283-9.63-1.538-19.232-2.94-28.844-4.22l5.844-21.562z" fill="#ffffff" fill-opacity="1"></path></g></svg>
\ No newline at end of file
diff --git a/public/img/icons/village.svg b/public/img/icons/village.svg
new file mode 100644
index 0000000..43ee62a
--- /dev/null
+++ b/public/img/icons/village.svg
@@ -0,0 +1 @@
+<svg style="height: 512px; width: 512px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="" style="" transform="translate(0,0)"><path d="M109.902 35.87l-71.14 59.284h142.28l-71.14-59.285zm288 32l-71.14 59.284h142.28l-71.14-59.285zM228.73 84.403l-108.9 90.75h217.8l-108.9-90.75zm-173.828 28.75v62h36.81l73.19-60.992v-1.008h-110zm23 14h16v18h-16v-18zm265 18v10.963l23 19.166v-16.13h16v18h-13.756l.104.087 19.098 15.914h-44.446v14h78v-39h18v39h14v-62h-110zm-194.345 48v20.08l24.095-20.08h-24.095zm28.158 0l105.1 87.582 27.087-22.574v-65.008H176.715zm74.683 14h35.735v34h-35.735v-34zm-76.714 7.74L30.37 335.153H319l-144.314-120.26zm198.046 13.51l-76.857 64.047 32.043 26.704H481.63l-108.9-90.75zm-23.214 108.75l.103.086 19.095 15.914h-72.248v77.467h60.435v-63.466h50v63.467h46v-93.466H349.516zm-278.614 16V476.13h126v-76.976h50v76.977h31.565V353.155H70.902zm30 30h50v50h-50v-50z" fill="#ffffff" fill-opacity="1"></path></g></svg>
\ No newline at end of file
diff --git a/src/hud/Navigation.svelte b/src/hud/Navigation.svelte
index 33b7f8b..e33bf9d 100644
--- a/src/hud/Navigation.svelte
+++ b/src/hud/Navigation.svelte
@@ -9,12 +9,47 @@
         class="invisible"
         on:click={ () => setTab('village') }
     >
-        Village
+        <img src="/img/icons/village.svg" alt="">
+        <span>Village</span>
     </button>
     <button
         class="invisible"
         on:click={ () => setTab('resources') }
     >
-        Resources
+        <img src="/img/icons/field.svg" alt="">
+        <span>Resources</span>
     </button>
 </nav>
+
+<style>
+    nav {
+        display: flex;
+        gap: 2em;
+        justify-content: center;
+        margin-bottom: 4em;
+    }
+
+    nav button {
+        aspect-ratio: 1;
+        border: 0.4em solid grey;
+        border-radius: 100%;
+        cursor: pointer;
+        height: 4em;
+        position: relative;
+    }
+
+    nav button img {
+        height: 4em;
+        width: 4em;
+    }
+
+    nav button span {
+        background-color: black;
+        border-radius: 1em;
+        bottom: 0;
+        padding: 0.5em 1em;
+        position: absolute;
+        left: 50%;
+        translate: -50% 100%;
+    }
+</style>