Compare commits

...

6 Commits

Author SHA1 Message Date
cha0s
fe412e710e fix: item action 2024-06-24 06:19:11 -05:00
cha0s
f1b6a8b0d8 fix: consumption 2024-06-24 06:18:58 -05:00
cha0s
b630221f1f fix: key listener dependencies 2024-06-24 06:18:49 -05:00
cha0s
7af6b635bf fix: markup semantics 2024-06-24 05:34:02 -05:00
cha0s
cc8c78cb30 refactor: tidy 2024-06-24 05:02:13 -05:00
cha0s
3b08a87f39 chore: storybook 2024-06-24 05:00:24 -05:00
10 changed files with 41 additions and 36 deletions

View File

@ -2,7 +2,6 @@ import Schema from '@/ecs/schema.js';
export default function(Component) {
return class Inventory extends Component {
insertMany(entities) {
for (const [id, {slotChange}] of entities) {
if (slotChange) {
@ -22,7 +21,6 @@ export default function(Component) {
}
return super.insertMany(entities);
}
mergeDiff(original, update) {
if (!update.slotChange) {
return super.mergeDiff(original, update);
@ -57,6 +55,7 @@ export default function(Component) {
target[property] = value;
if ('qty' === property && value <= 0) {
Component.markChange(instance.entity, 'slotChange', {[slot]: false});
delete slots[slot];
}
else {
Component.markChange(instance.entity, 'slotChange', {[slot]: {[property]: value}});

View File

@ -234,16 +234,22 @@ export default class Engine {
break;
}
case 'use': {
if (payload.value) {
const item = Inventory.item(Wielder.activeSlot + 1);
this.server.readAsset(item.source + '/start.js')
.then((response) => response.text())
if (item) {
this.server.readAsset([
item.source,
payload.value ? 'start.js' : 'stop.js',
].join('/'))
.then((response) => response.ok ? response.text() : '')
.then((code) => {
if (code) {
Ticking.addTickingPromise(
Script.tickingPromise(code, {item, wielder: entity}),
);
}
});
}
break;
}
}
}

View File

@ -6,16 +6,18 @@ import Slot from './slot.jsx';
*/
export default function Hotbar({active, onActivate, slots}) {
const Slots = slots.map((slot, i) => (
<button
<div
className={
[styles.slotWrapper, active === i && styles.active]
.filter(Boolean).join(' ')
}
onClick={() => onActivate(i)}
key={i}
>
<Slot {...slot} />
</button>
<Slot
onClick={() => onActivate(i)}
{...slot}
/>
</div>
));
return (
<div

View File

@ -11,7 +11,6 @@
}
.slotWrapper {
background-color: transparent;
border: var(--border) solid #999999;
box-sizing: border-box;
display: inline-block;

View File

@ -3,9 +3,10 @@ import styles from './slot.module.css';
/**
* An inventory slot. Displays an item image and the quantity of the item if > 1.
*/
export default function Slot({image, onClick, qty = 1}) {
export default function Slot({source, onClick, qty = 1}) {
const image = source + '/icon.png';
return (
<div
<button
className={styles.slot}
onClick={onClick}
>
@ -24,6 +25,6 @@ export default function Slot({image, onClick, qty = 1}) {
</span>
)}
</div>
</div>
</button>
);
}

View File

@ -1,9 +1,11 @@
.slot {
--size: calc(var(--unit) * 50px);
--space: calc(var(--unit) * 10px);
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border: none;
display: inline-block;
height: var(--size);
image-rendering: pixelated;

View File

@ -137,7 +137,7 @@ export default function Ui({disconnected}) {
});
}
});
});
}, [client]);
usePacket('Tick', (payload) => {
if (0 === Object.keys(payload.ecs).length) {
return;
@ -154,13 +154,7 @@ export default function Ui({disconnected}) {
if (update.Inventory) {
const newHotbarSlots = emptySlots();
for (let i = 1; i < 11; ++i) {
if (entity.Inventory.slots[i]) {
const {qty, source} = entity.Inventory.slots[i];
newHotbarSlots[i - 1] = {
image: source + '/icon.png',
qty,
};
}
newHotbarSlots[i - 1] = entity.Inventory.slots[i];
}
setHotbarSlots(newHotbarSlots);
}
@ -186,7 +180,7 @@ export default function Ui({disconnected}) {
onActivate={(i) => {
client.send({
type: 'Action',
payload: {type: 'changeSlot', value: i},
payload: {type: 'changeSlot', value: i + 1},
});
}}
slots={hotbarSlots}

View File

@ -1,6 +1,6 @@
import {useEffect, useRef, useState} from 'react';
import Dom from '@/components/dom.jsx';
import Dom from '@/react-components/dom.jsx';
import {RESOLUTION} from '@/constants.js';
function Decorator({children, style}) {
@ -26,6 +26,7 @@ function Decorator({children, style}) {
ref={ref}
style={{
backgroundColor: '#1099bb',
flexDirection: 'column',
opacity: 0 === scale ? 0 : 1,
position: 'relative',
height: `calc(${RESOLUTION.y}px * ${scale})`,

View File

@ -1,14 +1,12 @@
import {useArgs} from '@storybook/preview-api';
import {fn} from '@storybook/test';
import Hotbar from '@/components/hotbar.jsx';
import Hotbar from '@/react-components/hotbar.jsx';
import DomDecorator from './dom-decorator.jsx';
import potion from '/assets/potion.png?url';
const slots = Array(10).fill({});
slots[2] = {image: potion, qty: 24};
slots[2] = {qty: 24, source: '/assets/potion'};
export default {
title: 'Dom/Inventory/Hotbar',
@ -25,7 +23,12 @@ export default {
};
return Hotbar();
},
DomDecorator(),
DomDecorator({
style: {
display: 'flex',
flexDirection: 'column',
},
}),
],
tags: ['autodocs'],
args: {

View File

@ -1,9 +1,7 @@
import Slot from '@/components/slot.jsx';
import Slot from '@/react-components/slot.jsx';
import DomDecorator from './dom-decorator.jsx';
import potion from '/assets/potion.png?url';
export default {
title: 'Dom/Inventory/Slot',
component: Slot,
@ -33,7 +31,7 @@ export default {
},
},
args: {
image: potion,
source: '/assets/potion',
},
};