From b2c34950f21a31d927717ee0acc33e1c4dde0146 Mon Sep 17 00:00:00 2001
From: "damien.fayol" <damien.fayol@consonanceweb.com>
Date: Thu, 3 Aug 2023 16:22:10 +0200
Subject: [PATCH] Add icons for menus

---
 README.md                |  1 +
 package-lock.json        |  7 +++++++
 package.json             |  1 +
 src/app.postcss          |  2 ++
 src/components/UI.svelte | 16 ++++++++++++----
 5 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index a0ee168..e289c19 100644
--- a/README.md
+++ b/README.md
@@ -67,4 +67,5 @@ You can preview the production build with `npm run preview`.
 -   [ ] Better handling of game over
 -   [ ] Gold & shop
 -   [ ] Default weapon (fist) ?
+-   [ ] Quest menu
 -   [ ] Better direction icons
diff --git a/package-lock.json b/package-lock.json
index 626cd9c..e26281a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
                 "postcss-load-config": "^4.0.1",
                 "prettier": "^2.8.0",
                 "prettier-plugin-svelte": "^2.8.1",
+                "rpg-awesome": "^0.2.0",
                 "svelte": "^3.54.0",
                 "svelte-check": "^3.0.1",
                 "svelte-cubed": "^0.2.1",
@@ -3911,6 +3912,12 @@
                 "fsevents": "~2.3.2"
             }
         },
+        "node_modules/rpg-awesome": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/rpg-awesome/-/rpg-awesome-0.2.0.tgz",
+            "integrity": "sha512-+jTuYWHOs8iZV5+XKvI/7Ojr0k4pLX/dRpa2LHXReGMQI6h0cGvNxIh/AQY1zhAC7LPcNXnPTliD1/ugB/DbRA==",
+            "dev": true
+        },
         "node_modules/run-parallel": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
diff --git a/package.json b/package.json
index 5716619..5c43229 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
         "postcss-load-config": "^4.0.1",
         "prettier": "^2.8.0",
         "prettier-plugin-svelte": "^2.8.1",
+        "rpg-awesome": "^0.2.0",
         "svelte": "^3.54.0",
         "svelte-check": "^3.0.1",
         "svelte-cubed": "^0.2.1",
diff --git a/src/app.postcss b/src/app.postcss
index 1a7b7cf..ccf7190 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -1,4 +1,6 @@
 /* Write your global styles here, in PostCSS syntax */
+@import "rpg-awesome/css/rpg-awesome.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/components/UI.svelte b/src/components/UI.svelte
index cb15f36..11154ad 100644
--- a/src/components/UI.svelte
+++ b/src/components/UI.svelte
@@ -57,10 +57,18 @@
             {/each}
 		</div>
         <div class="m-[10px] grid grid-cols-2">
-            <button on:click={() => {store.navigateTo('main') }} on:keypress={noop}>M</button>
-            <button on:click={() => {store.navigateTo('stats')}} on:keypress={noop}>C</button>
-            <button on:click={() => {store.navigateTo('main')}} on:keypress={noop}>Q</button>
-            <button on:click={() => {store.navigateTo('inventory')}} on:keypress={noop}>I</button>
+            <button on:click={() => {store.navigateTo('main') }} on:keypress={noop} class="w-[30px]">
+                <i class="ra ra-cog"></i>
+            </button>
+            <button on:click={() => {store.navigateTo('stats')}} on:keypress={noop} class="w-[30px]">
+                <i class="ra ra-scroll-unfurled "></i>
+            </button>
+            <button on:click={() => {store.navigateTo('main')}} on:keypress={noop} class="w-[30px]">
+                <i class="ra ra-quill-ink "></i>
+            </button>
+            <button on:click={() => {store.navigateTo('inventory')}} on:keypress={noop} class="w-[30px]">
+                <i class="ra ra-sword"></i>
+            </button>
         </div>
 		<button
 			class="weapon w-[80px] h-[80px] m-[10px] cursor-pointer border-4 border-dark-color"