From 38c6c7bb7865e20b22acf0da464ac98b1242fa51 Mon Sep 17 00:00:00 2001
From: YK <yk@qcl.one>
Date: Sat, 20 Sep 2025 11:08:03 +0300
Subject: [PATCH] `<Inventory/>` component, basic markup + styles, balance
 (with `<Numput>`)

---
 src/components/inventory.rs |  36 ++++++++++++
 src/components/mod.rs       |  15 +++++
 style/_inventory.scss       | 107 ++++++++++++++++++++++++++++++++++++
 style/main.scss             |   1 +
 4 files changed, 159 insertions(+)
 create mode 100644 src/components/inventory.rs
 create mode 100644 style/_inventory.scss

diff --git a/src/components/inventory.rs b/src/components/inventory.rs
new file mode 100644
index 0000000..e5fc524
--- /dev/null
+++ b/src/components/inventory.rs
@@ -0,0 +1,36 @@
+use leptos::prelude::*;
+use reactive_stores::Field;
+use crate::{ components::numput::Numput, prelude::* };
+
+#[component]
+pub fn Inventory (
+    kind: InventoryKind,
+    inventory: Field<Inventory>,
+    balance: Field<Balance>
+) -> impl IntoView {
+    view! {
+        <section class="inventory">
+            <h3>{kind.to_string()}</h3>
+            <div class="balance">
+                <div title="PP (Platinum)" class="platinum">
+                    <Numput field=balance.platinum() />
+                </div>
+                <div title="GP (Gold)" class="gold">
+                    <Numput field=balance.gold() />
+                </div>
+                <div title="EP (Electrum)" class="electrum">
+                    <Numput field=balance.electrum() />
+                </div>
+                <div title="SP (Silver)" class="silver">
+                    <Numput field=balance.silver() />
+                </div>
+                <div title="CP (Copper)" class="copper">
+                    <Numput field=balance.copper() />
+                </div>
+            </div>
+            <div class="items">
+
+            </div>
+        </section>
+    }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index c09ad32..f1afb28 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -7,6 +7,7 @@ use crate::prelude::*;
 pub mod header;
 pub mod sidebar;
 pub mod nav;
+pub mod inventory;
 pub mod numput;
 
 #[component]
@@ -18,8 +19,22 @@ pub fn Character () -> impl IntoView {
 
 #[component]
 pub fn Inventories () -> impl IntoView {
+    let state = expect_context::<Context>();
+    let player = state.player();
+    let common = state.common();
+
+    let p_inv: Field<Inventory> = player.inventory().into();
+    let p_balance: Field<Balance> = player.balance().into();
+
+    let c_inv: Field<Inventory> = common.inventory().into();
+    let c_balance: Field<Balance> = common.balance().into();
+
+
     view! {
         <div class="inventories">
+            <inventory::Inventory kind=InventoryKind::Personal inventory=p_inv balance=p_balance />
+            <hr />
+            <inventory::Inventory kind=InventoryKind::Common inventory=c_inv balance=c_balance />
         </div>
     }
 }
diff --git a/style/_inventory.scss b/style/_inventory.scss
new file mode 100644
index 0000000..998d3db
--- /dev/null
+++ b/style/_inventory.scss
@@ -0,0 +1,107 @@
+.inventories {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: stretch;
+    height: 100%;
+
+    > hr {
+        width: 2px;
+        height: 100%;
+        background: crimson;
+        opacity: 0.448;
+    }
+}
+
+section.inventory {
+    width: 45%;
+    display: flex;
+    flex-direction: column;
+
+    &:first-of-type {
+        h3 {
+            text-align: right;
+        }
+    }
+    &:last-of-type {
+
+    }
+
+    h3 {
+        text-transform: lowercase;
+        font-size: 1.3em;
+        margin-bottom: 10px;
+        font-weight: 900;
+        &::first-letter {
+            text-decoration: underline crimson;
+        }
+    }
+
+    .balance {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+
+        > div {
+            width: 28%;
+            height: 35px;
+            font-weight: 300;
+            display: flex;
+            gap: 7px;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .platinum, .gold, .electrum, .silver, .copper {
+            position: relative;
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 2;
+                width: 15px;
+                height: 15px;
+                content: "";
+                display: block;
+                background-position: center center;
+                background-size: cover;
+            }
+        }
+
+        .platinum::before {
+            background-image: url("/assets/platinum.webp");
+        }
+        .gold::before {
+            background-image: url("/assets/gold.webp");
+        }
+        .electrum::before {
+            background-image: url("/assets/electrum.webp");
+        }
+        .silver::before {
+            background-image: url("/assets/silver.webp");
+        }
+        .copper::before {
+            background-image: url("/assets/copper.webp");
+        }
+    }
+
+    input {
+        color: white;
+        width: 100%;
+        text-align: right;
+        background-color: #131313;
+        padding: 2px 12px 0px 6px;
+        font-size: 18px;
+        vertical-align: bottom;
+        line-height: 20px;
+        border-bottom: 2px solid;
+        border-bottom-color: hsla(from crimson h s l / 0.5);
+        mask: linear-gradient(135deg,#0000 5px,#000 0);
+
+        &:focus, &:hover, &:active {
+            cursor: crosshair;
+            border-bottom-color: crimson;
+            transition: border-bottom-color .2s;
+        }
+    }
+
+}
diff --git a/style/main.scss b/style/main.scss
index f467086..757b017 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -5,6 +5,7 @@
 @use 'header';
 @use 'sidebar';
 @use 'nav';
+@use 'inventory';
 @use 'vars';