From de672642d22c83e74d4012c3c05e4fca38a8b777 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Sun, 31 Mar 2024 13:42:42 -0600
Subject: [PATCH] Add edit/view state to the costs of the modal (closes #151)

---
 styles/v3/elements/headers.scss               |  2 +-
 styles/v3/elements/label.scss                 |  5 +++
 styles/v3/elements/number-input.scss          | 21 ++++++++++
 styles/v3/elements/text-input.scss            |  8 +---
 styles/v3/elements/utilities.scss             |  5 +++
 styles/v3/index.scss                          |  2 +
 .../untyped/v2/tabs/details.v2.untyped.hbs    | 40 +++++++++++++++++--
 7 files changed, 72 insertions(+), 11 deletions(-)
 create mode 100644 styles/v3/elements/label.scss
 create mode 100644 styles/v3/elements/number-input.scss
 create mode 100644 styles/v3/elements/utilities.scss

diff --git a/styles/v3/elements/headers.scss b/styles/v3/elements/headers.scss
index 898267e..0174901 100644
--- a/styles/v3/elements/headers.scss
+++ b/styles/v3/elements/headers.scss
@@ -4,7 +4,7 @@
 		font-size: 1rem;
 		margin: 0;
 	}
-	h1 {
+	h1, .h1 {
 		font-size: 1.5rem;
 	}
 }
diff --git a/styles/v3/elements/label.scss b/styles/v3/elements/label.scss
new file mode 100644
index 0000000..cd8fdfb
--- /dev/null
+++ b/styles/v3/elements/label.scss
@@ -0,0 +1,5 @@
+@use "../mixins/material";
+
+.dotdungeon.style-v3 > .window-content label {
+	cursor: pointer;
+}
diff --git a/styles/v3/elements/number-input.scss b/styles/v3/elements/number-input.scss
new file mode 100644
index 0000000..9d779ac
--- /dev/null
+++ b/styles/v3/elements/number-input.scss
@@ -0,0 +1,21 @@
+@use "../mixins/material";
+
+.dotdungeon.style-v3 > .window-content input[type=number] {
+	outline: none;
+	border: none;
+	@include material.elevate(3);
+	padding: 4px 8px;
+	color: white;
+	transition: all 200ms ease-in-out;
+	width: 50px;
+	height: auto;
+	text-align: center;
+
+	&:hover {
+		@include material.elevate(4);
+	}
+
+	&:focus-visible {
+		@include material.elevate(6);
+	}
+}
diff --git a/styles/v3/elements/text-input.scss b/styles/v3/elements/text-input.scss
index 1554c02..4c066ed 100644
--- a/styles/v3/elements/text-input.scss
+++ b/styles/v3/elements/text-input.scss
@@ -1,14 +1,14 @@
 @use "../mixins/material";
 
-.dotdungeon.style-v3 > .window-content input {
+.dotdungeon.style-v3 > .window-content input[type=text] {
 	outline: none;
 	border: none;
 	@include material.elevate(3);
+	padding: 4px 8px;
 	color: white;
 	transition: all 200ms ease-in-out;
 	width: auto;
 	height: auto;
-	font-size: inherit;
 
 	&:hover {
 		@include material.elevate(4);
@@ -17,8 +17,4 @@
 	&:focus-visible {
 		@include material.elevate(6);
 	}
-
-	&.h1 {
-		font-size: 1.5rem;
-	}
 }
diff --git a/styles/v3/elements/utilities.scss b/styles/v3/elements/utilities.scss
new file mode 100644
index 0000000..f76318a
--- /dev/null
+++ b/styles/v3/elements/utilities.scss
@@ -0,0 +1,5 @@
+.dotdungeon.style-v3 > .window-content {
+	.grow {
+		flex-grow: 1;
+	}
+}
diff --git a/styles/v3/index.scss b/styles/v3/index.scss
index 367f2d5..b0689d6 100644
--- a/styles/v3/index.scss
+++ b/styles/v3/index.scss
@@ -3,8 +3,10 @@
 @use "./themes/dark.css";
 
 /* Element-Styling */
+@use "./elements/utilities.scss";
 @use "./elements/button.scss";
 @use "./elements/text-input.scss";
+@use "./elements/number-input.scss";
 @use "./elements/textarea.scss";
 @use "./elements/headers.scss";
 @use "./elements/hr.scss";
diff --git a/templates/items/untyped/v2/tabs/details.v2.untyped.hbs b/templates/items/untyped/v2/tabs/details.v2.untyped.hbs
index 5efd945..e99d875 100644
--- a/templates/items/untyped/v2/tabs/details.v2.untyped.hbs
+++ b/templates/items/untyped/v2/tabs/details.v2.untyped.hbs
@@ -1,9 +1,41 @@
 <div class="tab" data-group="page" data-tab="details">
-	<div class="cost panel">
-		Purchase Cost
+	<div class="cost panel--row">
+		{{#if meta.isEditable}}
+			<label for="{{meta.idp}}-purchase-cost">
+				Purchase Cost
+			</label>
+			<div class="grow"></div>
+			<input
+				type="number"
+				name="system.buy"
+				value="{{system.buy}}"
+				min="0"
+				id="{{meta.idp}}-purchase-cost"
+			>
+		{{else}}
+			Purchase Cost
+			<div class="grow"></div>
+			{{dd-empty-state system.buy}}
+		{{/if}}
 	</div>
-	<div class="usage-cost panel">
-		Usage Cost
+	<div class="usage-cost panel--row">
+		{{#if meta.isEditable}}
+			<label for="{{meta.idp}}-usage-cost">
+				Usage Cost
+			</label>
+			<div class="grow"></div>
+			<input
+				type="number"
+				name="system.usage_cost"
+				value="{{system.usage_cost}}"
+				min="0"
+				id="{{meta.idp}}-usage-cost"
+			>
+		{{else}}
+			Usage Cost
+			<div class="grow"></div>
+			{{dd-empty-state system.usage_cost}}
+		{{/if}}
 	</div>
 	<div class="tier panel">
 		Item Rarity