Implement the buttons spinbuttons for the inventory area
This commit is contained in:
Oliver-Akins
parent
1c737b3dc4
commit
4544516c5c
8 changed files with 131 additions and 71 deletions
3
assets/minus.svg
Normal file
3
assets/minus.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="100%" height="100%" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||
<path d="m12.633 38.727h74.734c6.2578 0 11.336 6.2266 11.336 11.273 0 6.2266-5.0742 11.273-11.336 11.273h-74.734c-6.2578 0-11.336-6.2266-11.336-11.273 0-6.2266 5.0742-11.273 11.336-11.273z" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 343 B |
|
|
@ -18,6 +18,9 @@ Fritz Duggan:
|
|||
Landan Lloyd:
|
||||
create.svg (https://thenounproject.com/icon/create-1447560/)
|
||||
|
||||
Bismillah
|
||||
minus.svg (https://thenounproject.com/icon/minus-1727966/)
|
||||
|
||||
Rokhman Kharis:
|
||||
close.svg (https://thenounproject.com/icon/close-4996834/)
|
||||
|
||||
|
|
|
|||
|
|
@ -34,11 +34,11 @@ export const icons = [
|
|||
`close.svg`,
|
||||
`edit.svg`,
|
||||
`sheet.svg`,
|
||||
`minus.svg`,
|
||||
];
|
||||
|
||||
|
||||
export async function registerHandlebarsHelpers() {
|
||||
console.log(Handlebars)
|
||||
Handlebars.registerHelper(helpers);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import DOTDUNGEON from "../config.mjs";
|
||||
import { getPath } from "../utils.mjs";
|
||||
|
||||
export class GenericActorSheet extends ActorSheet {
|
||||
_expanded = new Set();
|
||||
|
|
@ -54,6 +55,10 @@ export class GenericActorSheet extends ActorSheet {
|
|||
.on(`click`, this.actor.genericSendToChat.bind(this.actor));
|
||||
html.find(`[data-embedded-edit]`)
|
||||
.on(`click`, this.actor.openEmbeddedSheet.bind(this.actor));
|
||||
html.find(`button[data-increment]`)
|
||||
.on(`click`, this._incrementValue.bind(this));
|
||||
html.find(`button[data-decrement]`)
|
||||
.on(`click`, this._decrementValue.bind(this));
|
||||
};
|
||||
|
||||
async _handleRoll($e) {
|
||||
|
|
@ -73,7 +78,27 @@ export class GenericActorSheet extends ActorSheet {
|
|||
});
|
||||
};
|
||||
|
||||
_handleSummaryToggle($e) {
|
||||
async _incrementValue($e) {
|
||||
const target = $e.currentTarget;
|
||||
const data = target.dataset;
|
||||
const value = getPath(data.increment, this.actor);
|
||||
if (typeof value != "number") {
|
||||
return;
|
||||
};
|
||||
this.actor.update({ [data.increment]: value + 1 });
|
||||
};
|
||||
|
||||
async _decrementValue($e) {
|
||||
const target = $e.currentTarget;
|
||||
const data = target.dataset;
|
||||
const value = getPath(data.decrement, this.actor);
|
||||
if (typeof value != "number") {
|
||||
return;
|
||||
};
|
||||
this.actor.update({ [data.decrement]: value - 1 });
|
||||
};
|
||||
|
||||
async _handleSummaryToggle($e) {
|
||||
let data = $e.currentTarget.dataset;
|
||||
let open = $e.currentTarget.parentNode.open;
|
||||
console.debug(`.dungeon | Collapse ID: ${data.collapseId} (open: ${open})`);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
export function reloadWindows(type = null) {
|
||||
if (!type) {
|
||||
for (const window of globalThis.ui.windows) {
|
||||
window.render(true);
|
||||
};
|
||||
return;
|
||||
};
|
||||
for (const window of globalThis.ui.windows) {
|
||||
if (window instanceof type) {
|
||||
window.render(true);
|
||||
};
|
||||
/**
|
||||
* @param {string} path
|
||||
* @param {object} data
|
||||
* @returns {unknown}
|
||||
*/
|
||||
export function getPath(path, data) {
|
||||
if (!path.includes(`.`)) {
|
||||
return data[path];
|
||||
};
|
||||
let [ key, nextPath ] = path.split(`.`, 2)
|
||||
return getPath(
|
||||
nextPath,
|
||||
data[key]
|
||||
);
|
||||
};
|
||||
|
|
@ -79,6 +79,12 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.grid-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min-content 25% min-content;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
.col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -95,11 +101,15 @@
|
|||
|
||||
.bytes-input,
|
||||
.supplies-count,
|
||||
.materials-count {
|
||||
width: 25%;
|
||||
.materials-count,
|
||||
.item-quantity {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-quantity {
|
||||
width: 25%
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,21 @@
|
|||
{{#> dotdungeon.panel class="backpack" title="dotdungeon.actor.pc.panel.backpack"}}
|
||||
<label class="row">
|
||||
<span class="grow">
|
||||
<div class="grid-row">
|
||||
<label
|
||||
for="{{meta.idp}}-bytes-input"
|
||||
>
|
||||
{{localize "dotdungeon.actor.pc.backpack.bytes.label"}}
|
||||
</span>
|
||||
</label>
|
||||
<button
|
||||
class="neutral reduced-padding equal-padding"
|
||||
data-decrement="system.bytes"
|
||||
aria-label="Decrease byte count by one"
|
||||
>
|
||||
<div aria-hidden="true" class="icon icon--16">
|
||||
{{{ icons.minus }}}
|
||||
</div>
|
||||
</button>
|
||||
<input
|
||||
id="{{meta.idp}}-bytes-input"
|
||||
class="bytes-input"
|
||||
type="number"
|
||||
name="system.bytes"
|
||||
|
|
@ -13,51 +25,89 @@
|
|||
aria-valuemin="0"
|
||||
aria-valuenow="{{system.bytes}}"
|
||||
>
|
||||
</label>
|
||||
<label class="row">
|
||||
<span class="grow">
|
||||
<button
|
||||
class="neutral reduced-padding equal-padding"
|
||||
data-increment="system.bytes"
|
||||
aria-label="Increase byte count by one"
|
||||
>
|
||||
<div aria-hidden="true" class="icon icon--16">
|
||||
{{{ icons.create }}}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid-row">
|
||||
<label for="{{meta.idp}}-supplies-input">
|
||||
{{localize
|
||||
(concat
|
||||
"dotdungeon.settings.resourcesOrSupplies.option."
|
||||
settings.resourcesOrSupplies
|
||||
)
|
||||
}}
|
||||
{{#if settings.devMode}}
|
||||
<span class="debug-data">
|
||||
({{settings.resourcesOrSupplies}})
|
||||
</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
</label>
|
||||
<button
|
||||
class="neutral reduced-padding equal-padding"
|
||||
data-decrement="system.supplies"
|
||||
aria-label="Decrease supplies count by one"
|
||||
>
|
||||
<div aria-hidden="true" class="icon icon--16">
|
||||
{{{ icons.minus }}}
|
||||
</div>
|
||||
</button>
|
||||
<input
|
||||
id="{{meta.idp}}-supplies-input"
|
||||
class="supplies-count"
|
||||
type="number"
|
||||
name="system.supplies"
|
||||
value="{{system.supplies}}"
|
||||
min="0"
|
||||
max="5"
|
||||
aria-label="{{localize "dotdungeon.aria.actor.pc.input.supplies"}}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="5"
|
||||
aria-valuenow="{{system.supplies}}"
|
||||
>
|
||||
</label>
|
||||
<label class="row">
|
||||
<span class="grow">
|
||||
<button
|
||||
class="neutral reduced-padding equal-padding"
|
||||
data-increment="system.supplies"
|
||||
aria-label="Increase supplies count by one"
|
||||
>
|
||||
<div aria-hidden="true" class="icon icon--16">
|
||||
{{{ icons.create }}}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid-row">
|
||||
<label for="{{meta.idp}}-materials-input">
|
||||
{{localize "dotdungeon.actor.pc.backpack.materials.label"}}
|
||||
</span>
|
||||
</label>
|
||||
<button
|
||||
class="neutral reduced-padding equal-padding"
|
||||
data-decrement="system.materials"
|
||||
aria-label="Decrease materials count by one"
|
||||
>
|
||||
<div aria-hidden="true" class="icon icon--16">
|
||||
{{{ icons.minus }}}
|
||||
</div>
|
||||
</button>
|
||||
<input
|
||||
id="{{meta.idp}}-materials-input"
|
||||
class="materials-count"
|
||||
type="number"
|
||||
name="system.materials"
|
||||
value="{{system.materials}}"
|
||||
min="0"
|
||||
max="5"
|
||||
aria-label="{{localize "dotdungeon.aria.actor.pc.input.materials"}}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="5"
|
||||
aria-valuenow="{{system.supplies}}"
|
||||
>
|
||||
</label>
|
||||
<button
|
||||
class="neutral reduced-padding equal-padding"
|
||||
data-increment="system.materials"
|
||||
aria-label="Increase materials count by one"
|
||||
>
|
||||
<div aria-hidden="true" class="icon icon--16">
|
||||
{{{ icons.create }}}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<hr>
|
||||
{{#each items.untyped as | item |}}
|
||||
<details {{dd-expanded ../meta.expanded item.uuid}}>
|
||||
|
|
@ -72,7 +122,7 @@
|
|||
<span class="grow">Quantity</span>
|
||||
<input
|
||||
type="number"
|
||||
class="bytes-input"
|
||||
class="item-quantity"
|
||||
value="{{item.system.quantity}}"
|
||||
data-embedded-update="system.quantity"
|
||||
data-embedded-update-on="blur"
|
||||
|
|
@ -82,7 +132,7 @@
|
|||
{{#if item.system.description}}
|
||||
<p>{{item.system.description}}</p>
|
||||
{{else}}
|
||||
<p style="opacity: 75;%">
|
||||
<p style="opacity: 75%;">
|
||||
This item hasn't been described yet
|
||||
</p>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -38,37 +38,4 @@
|
|||
{{> dotdungeon.pc.pets }}
|
||||
|
||||
{{> dotdungeon.pc.storage}}
|
||||
|
||||
{{#if settings.devMode}}
|
||||
<div class="debug-data" style="grid-column: 1 / span 3">
|
||||
<div>
|
||||
Settings:
|
||||
<pre><code>{{dd-stringify settings}}</code></pre>
|
||||
</div>
|
||||
<div>
|
||||
Meta:
|
||||
<pre><code>{{dd-stringify meta}}</code></pre>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
Config:
|
||||
<pre><code>{{dd-stringify config}}</code></pre>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
Items:
|
||||
<pre><code>{{dd-stringify items}}</code></pre>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
System:
|
||||
<pre><code>{{dd-stringify system}}</code></pre>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
Actor:
|
||||
<pre><code>{{dd-stringify actor}}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</form>
|
||||
Loading…
Add table
Add a link
Reference in a new issue