<Inventory/> component, basic markup + styles, balance (with <Numput>)

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>
+    }
+}

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>
     }
 }

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;
+        }
+    }
+
+}

style/main.scss

@@ -5,6 +5,7 @@
 @use 'header';
 @use 'sidebar';
 @use 'nav';
+@use 'inventory';
 @use 'vars';