Add icons for menus

shezard · Aug 3, 2023 · b2c3495 · b2c3495
1 parent 84ff915
commit b2c3495
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 4 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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"