cha0s/silphius
1
1
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: cha0s:15d4abaad132240c7f567a2077b4b0518cc6a8e8
Branches Tags
cha0s:master
..
compare: cha0s:f9f3abf4efa9cee4585770500ab3cfdc48a7a9cf
Branches Tags
cha0s:master

No commits in common. "15d4abaad132240c7f567a2077b4b0518cc6a8e8" and "f9f3abf4efa9cee4585770500ab3cfdc48a7a9cf" have entirely different histories.
15d4abaad1 ... f9f3abf4ef

14 changed files with 186 additions and 423 deletions
Show Stats Expand all files Collapse all files

6
app/create-homestead.js
View File

@ -1,6 +1,6 @@
import createEcs from './create-ecs.js';
export default async function createHomestead(Ecs, id) {
export default async function createHomestead(Ecs) {
const ecs = createEcs(Ecs);
const area = {x: 100, y: 60};
await ecs.create({
@ -49,9 +49,7 @@ export default async function createHomestead(Ecs, id) {
],
collisionStartScript: '/assets/shit-shack/collision-start.js',
},
Ecs: {
path: ['houses', `${id}`].join('/'),
},
Ecs: {},
Position: {x: 100, y: 100},
Sprite: {
anchorX: 0.5,

6
app/create-house.js
View File

@ -1,6 +1,6 @@
import createEcs from './create-ecs.js';
export default async function createHouse(Ecs, id) {
export default async function createHouse(Ecs) {
const ecs = createEcs(Ecs);
const area = {x: 20, y: 20};
await ecs.create({
@ -31,9 +31,7 @@ export default async function createHouse(Ecs, id) {
],
collisionStartScript: '/assets/house/collision-start.js',
},
Ecs: {
path: ['homesteads', `${id}`].join('/'),
},
Ecs: {},
Position: {
x: 72,
y: 320,

13
app/engine.js
View File

@ -120,12 +120,7 @@ export default class Engine {
const {TileLayers} = ecs.get(1);
const {brush, layer: paintLayer, stamp} = payload.value;
const layer = TileLayers.layer(paintLayer);
switch (brush) {
case 0: {
layer.stamp(stamp.at, stamp.data)
break;
}
}
layer.stamp(stamp.at, stamp.data)
break;
}
case 'changeSlot': {
@ -220,12 +215,14 @@ export default class Engine {
if ('ENOENT' !== error.code) {
throw error;
}
const homestead = await createHomestead(this.Ecs, id);
const homestead = await createHomestead(this.Ecs);
homestead.get(2).Ecs.path = ['houses', `${id}`].join('/');
await this.saveEcs(
['homesteads', `${id}`].join('/'),
homestead,
);
const house = await createHouse(this.Ecs, id);
const house = await createHouse(this.Ecs);
house.get(2).Ecs.path = ['homesteads', `${id}`].join('/');
await this.saveEcs(
['houses', `${id}`].join('/'),
house,

3
app/net/server/worker.js
View File

@ -73,7 +73,6 @@ if (import.meta.hot) {
import.meta.hot.on('vite:beforeUpdate', async () => {
engine.stop();
await engine.disconnectPlayer(0);
await engine.saveEcses();
beforeResolver.resolve();
});
import.meta.hot.accept('../../engine.js');
@ -98,7 +97,7 @@ if (import.meta.hot) {
await beforeResolver;
// delete engine.ecses['homesteads/0'];
// await engine.server.removeData('homesteads/0');
// const homestead = await createHomestead(engine.Ecs, '0');
// const homestead = await createHomestead(engine.Ecs);
// homestead.get(2).Ecs.path = 'houses/0';
// await engine.saveEcs('homesteads/0', homestead);
resolver.resolve();

163
app/react-components/devtools.jsx
View File

@ -1,49 +1,134 @@
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
import {useRef, useState} from 'react';
import {useEcs} from '@/context/ecs.js';
import styles from './devtools.module.css';
import Tiles from './devtools/tiles.jsx';
export default function Devtools({
applyFilters,
eventsChannel,
setApplyFilters,
brush,
layer,
setBrush,
setLayer,
setStamp,
}) {
const offsetRef = useRef();
const [selection, setSelection] = useState({x: 0, y: 0, w: 2, h: 2});
const [moveStart, setMoveStart] = useState();
const [ecs] = useEcs();
if (!ecs) {
return false;
}
const master = ecs.get(1);
if (!master) {
return false;
}
const {TileLayers} = master;
const {sourceJson, tileSize} = TileLayers.layer(0);
const {w, h} = sourceJson.meta.size;
return (
<div className={styles.devtools}>
<Tabs>
<TabList>
<Tab>Dashboard</Tab>
<Tab>Tiles</Tab>
</TabList>
<TabPanel>
<div className={styles.dashboard}>
<form>
<div className={styles.engineBar}>
<label>
<span>Apply filters</span>
<input
checked={applyFilters}
onChange={() => {
setApplyFilters(!applyFilters);
}}
type="checkbox"
/>
</label>
</div>
</form>
<form>
<div className={styles.topBar}>
<div className={styles.layer}>
<label>
Layer:
<select
onChange={(event) => {
setLayer(event.target.value)
}}
value={layer}
>
{
Object.keys(TileLayers.layers)
.map((layer, i) => (
<option
key={i}
value={i}
>
{i}
</option>
))
}
</select>
</label>
</div>
</TabPanel>
<TabPanel>
<Tiles
eventsChannel={eventsChannel}
/>
</TabPanel>
</Tabs>
</div>
<div className={styles.brush}>
<label>
Brush:
<select
onChange={(event) => {
setLayer(event.target.value)
}}
value={brush}
>
<option>Paint</option>
</select>
</label>
</div>
</div>
</form>
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
<div
onMouseDown={(event) => {
if (!offsetRef.current) {
return;
}
const {left, top} = offsetRef.current.getBoundingClientRect();
const x = Math.floor((event.clientX - left) / tileSize.x);
const y = Math.floor((event.clientY - top) / tileSize.y);
setMoveStart({x, y});
setSelection({x, y, w: 1, h: 1});
}}
onMouseMove={(event) => {
if (!offsetRef.current) {
return;
}
if (!moveStart) {
return;
}
const {x: sx, y: sy} = moveStart;
const {left, top} = offsetRef.current.getBoundingClientRect();
const x = Math.floor(
Math.max(0, Math.min(w - 1, (event.clientX - left)) / tileSize.x),
);
const y = Math.floor(
Math.max(0, Math.min(h - 1, (event.clientY - top)) / tileSize.y),
);
const mx = Math.min(sx, x);
const my = Math.min(sy, y);
setSelection({x: mx, y: my, w: Math.abs(sx - x) + 1, h: Math.abs(sy - y) + 1});
}}
onMouseUp={() => {
setMoveStart();
const stamp = [];
const {x, y, w: sw, h: sh} = selection;
const tw = w / tileSize.x;
for (let iy = 0; iy < sh; ++iy) {
const row = [];
for (let ix = 0; ix < sw; ++ix) {
row.push((y + iy) * tw + x + ix);
}
stamp.push(row);
}
setStamp(stamp);
}}
className={styles.selectionWrapper}
ref={offsetRef}
>
<div
className={styles.selection}
style={{
top: selection.y * tileSize.y,
left: selection.x * tileSize.x,
height: selection.h * tileSize.x,
width: selection.w * tileSize.y,
}}
/>
<img
alt="tileset"
src={TileLayers.layer(0).source.replace('.json', '.png')}
/>
</div>
</div>
);
}

51
app/react-components/devtools.module.css
View File

@ -1,49 +1,30 @@
.engineBar {
.topBar {
display: flex;
gap: 16px;
margin-bottom: 16px 0;
margin-bottom: 16px;
}
.devtools {
background-color: #444444;
color: white;
height: 100%;
overflow: hidden;
width: 100%;
max-height: 100%;
overflow-y: auto;
padding: 16px;
}
.devtools form {
label {
font-weight: bold;
:first-child {
margin-right: 4px;
}
}
input, select, option {
background-color: #333333;
color: #ffffff;
}
.devtools p {
text-align: center;
}
.devtools > :global(.react-tabs) {
display: flex;
flex-direction: column;
height: 100%;
> :global(.react-tabs__tab-list) {
margin-bottom: 0;
}
> :global(.react-tabs__tab-panel) {
overflow-y: auto;
}
:global(.react-tabs__tab--selected) {
background-color: #00000022;
color: #ffffff;
}
:global(.react-tabs__tab:focus:after) {
background-color: #00000044;
}
.selectionWrapper {
position: relative;
}
.dashboard {
margin: 16px;
.selectionWrapper img {
user-select: none;
}
.selection {
background-color: #ffffff44;
position: absolute;
}

184
app/react-components/devtools/tiles.jsx
View File

@ -1,184 +0,0 @@
import {useEffect, useRef, useState} from 'react';
import {useClient} from '@/context/client.js';
import {useEcs} from '@/context/ecs.js';
import useRect from '@/util/react-hooks/use-rect.js';
import styles from './tiles.module.css';
export default function Tiles({eventsChannel}) {
const client = useClient();
const wrapperRef = useRef();
const imageRef = useRef();
const imageRect = useRect(imageRef);
const [selection, setSelection] = useState({x: 0, y: 0, w: 1, h: 1});
const [moveStart, setMoveStart] = useState();
const [layer, setLayer] = useState(0);
const [brush, setBrush] = useState(0);
const [stamp, setStamp] = useState([]);
const [ecs] = useEcs();
useEffect(() => {
if (!ecs) {
return false;
}
const master = ecs.get(1);
if (!master) {
return false;
}
const {TileLayers} = master;
const {area, tileSize} = TileLayers.layer(0);
function onClick({x, y}) {
const at = {
x: Math.floor(x / tileSize.x),
y: Math.floor(y / tileSize.y),
};
if (at.x < 0 || at.y < 0 || at.x >= area.x || at.y >= area.y) {
return;
}
const payload = {
brush,
layer,
stamp: {
at,
data: stamp,
},
}
client.send({
type: 'AdminAction',
payload: {type: 'paint', value: payload},
});
}
eventsChannel.addListener('click', onClick);
return () => {
eventsChannel.removeListener('click', onClick);
};
});
if (!ecs) {
return false;
}
const master = ecs.get(1);
if (!master) {
return false;
}
const {TileLayers} = master;
const {sourceJson, tileSize} = TileLayers.layer(0);
const {w, h} = sourceJson.meta.size;
const factor = (imageRect?.width ?? 1) / w;
return (
<div className={styles.tiles}>
<form>
<div className={styles.paintBar}>
<div className={styles.layer}>
<label>
<span>Layer</span>
<select
onChange={(event) => {
setLayer(event.target.value)
}}
value={layer}
>
{
Object.keys(TileLayers.layers)
.map((layer, i) => (
<option
key={i}
value={i}
>
{i}
</option>
))
}
</select>
</label>
</div>
<div className={styles.brush}>
<label>
<span>Brush</span>
<select
onChange={(event) => {
setBrush(event.target.value)
}}
value={brush}
>
<option>Paint</option>
</select>
</label>
</div>
</div>
</form>
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
<div
onMouseDown={(event) => {
const wrapperRect = wrapperRef.current.getBoundingClientRect();
const {left, top} = wrapperRect;
const c = {
x: event.clientX,
y: event.clientY + wrapperRef.current.scrollTop,
};
if (
c.x - left >= (w * factor)
|| c.y - top >= (h * factor)
) {
return;
}
const x = Math.floor((c.x - left) / (tileSize.x * factor));
const y = Math.floor((c.y - top) / (tileSize.y * factor));
setMoveStart({x, y});
setSelection({x, y, w: 1, h: 1});
}}
onMouseMove={(event) => {
if (!moveStart) {
return;
}
const {x: sx, y: sy} = moveStart;
const wrapperRect = wrapperRef.current.getBoundingClientRect();
const {left, top} = wrapperRect;
const c = {
x: event.clientX,
y: event.clientY + wrapperRef.current.scrollTop,
};
const x = Math.floor(
Math.max(0, Math.min((w * factor) - 1, (c.x - left)) / (tileSize.x * factor)),
);
const y = Math.floor(
Math.max(0, Math.min((h * factor) - 1, (c.y - top)) / (tileSize.y * factor)),
);
const mx = Math.min(sx, x);
const my = Math.min(sy, y);
setSelection({x: mx, y: my, w: Math.abs(sx - x) + 1, h: Math.abs(sy - y) + 1});
}}
onMouseUp={() => {
setMoveStart();
const stamp = [];
const {x, y, w: sw, h: sh} = selection;
const tw = w / tileSize.x;
for (let iy = 0; iy < sh; ++iy) {
const row = [];
for (let ix = 0; ix < sw; ++ix) {
row.push((y + iy) * tw + x + ix);
}
stamp.push(row);
}
setStamp(stamp);
}}
className={styles.selectionWrapper}
ref={wrapperRef}
>
<div
className={styles.selection}
style={{
top: selection.y * tileSize.y * factor,
left: selection.x * tileSize.x * factor,
height: selection.h * tileSize.x * factor,
width: selection.w * tileSize.y * factor,
}}
/>
<img
alt="tileset"
ref={imageRef}
src={TileLayers.layer(0).source.replace('.json', '.png')}
/>
</div>
</div>
);
}

30
app/react-components/devtools/tiles.module.css
View File

@ -1,30 +0,0 @@
.tiles {
display: flex;
height: 100%;
flex-direction: column;
}
.paintBar {
display: flex;
gap: 16px;
margin: 16px;
margin-bottom: 0;
}
.selectionWrapper {
margin: 16px;
margin-right: 0;
overflow-y: auto;
padding-right: 16px;
position: relative;
}
.selectionWrapper img {
user-select: none;
width: 100%;
}
.selection {
background-color: #ffffff44;
position: absolute;
}

4
app/react-components/ecs.jsx
View File

@ -79,7 +79,7 @@ function createLayerMask(layer) {
return Texture.from(canvas);
}
export default function Ecs({applyFilters, scale}) {
export default function Ecs({scale}) {
const [ecs] = useEcs();
const [entities, setEntities] = useState({});
const [mainEntity] = useMainEntity();
@ -163,7 +163,7 @@ export default function Ecs({applyFilters, scale}) {
const layer0 = TileLayers.layer(0);
const layer1 = TileLayers.layer(1);
const filters = [];
if (applyFilters && night) {
if (night) {
filters.push(night);
}
const [cx, cy] = [

4
app/react-components/pixi.jsx
View File

@ -45,7 +45,7 @@ export const Stage = ({children, ...props}) => {
);
};
export default function Pixi({applyFilters, scale}) {
export default function Pixi({scale}) {
return (
<Stage
className={styles.stage}
@ -55,7 +55,7 @@ export default function Pixi({applyFilters, scale}) {
background: 0x1099bb,
}}
>
<Ecs applyFilters={applyFilters} scale={scale} />
<Ecs scale={scale} />
</Stage>
);
}

71
app/react-components/ui.jsx
View File

@ -19,32 +19,6 @@ function emptySlots() {
return Array(10).fill(undefined);
}
const devEventsChannel = {
$$listeners: {},
addListener(type, listener) {
if (!this.$$listeners[type]) {
this.$$listeners[type] = new Set();
}
this.$$listeners[type].add(listener);
},
invoke(type, payload) {
const listeners = this.$$listeners[type];
if (!listeners) {
return;
}
for (const listener of listeners) {
listener(payload);
}
},
removeListener(type, listener) {
const listeners = this.$$listeners[type];
if (!listeners) {
return;
}
listeners.delete(listener);
},
};
export default function Ui({disconnected}) {
// Key input.
const client = useClient();
@ -61,7 +35,9 @@ export default function Ui({disconnected}) {
const [scale, setScale] = useState(2);
const [Components, setComponents] = useState();
const [Systems, setSystems] = useState();
const [applyFilters, setApplyFilters] = useState(true);
const [layer, setLayer] = useState(0);
const [brush, setBrush] = useState(0);
const [stamp, setStamp] = useState([]);
useEffect(() => {
async function setEcsStuff() {
const {default: Components} = await import('@/ecs-components/index.js');
@ -301,22 +277,36 @@ export default function Ui({disconnected}) {
return;
}
const {Camera} = ecs.get(mainEntity);
const {TileLayers} = master;
const {area, tileSize} = TileLayers.layer(0);
const size = width / RESOLUTION.x;
const client = {
const cr = {
x: (event.clientX - left) / size,
y: (event.clientY - top) / size,
};
const camera = {
const cm = {
x: ((Camera.x * scale) - (RESOLUTION.x / 2)),
y: ((Camera.y * scale) - (RESOLUTION.y / 2)),
}
devEventsChannel.invoke(
'click',
{
x: (client.x + camera.x) / scale,
y: (client.y + camera.y) / scale,
const at = {
x: Math.floor((cr.x + cm.x) / (tileSize.x * scale)),
y: Math.floor((cr.y + cm.y) / (tileSize.y * scale)),
};
if (at.x < 0 || at.y < 0 || at.x >= area.x || at.y >= area.y) {
return;
}
const payload = {
brush,
layer,
stamp: {
at,
data: stamp,
},
);
}
client.send({
type: 'AdminAction',
payload: {type: 'paint', value: payload},
});
}
else {
client.send({
@ -367,7 +357,7 @@ export default function Ui({disconnected}) {
}}
ref={gameRef}
>
<Pixi applyFilters={applyFilters} scale={scale} />
<Pixi scale={scale} />
{mainEntity && (
<Dom devtoolsIsOpen={devtoolsIsOpen}>
<HotBar
@ -388,9 +378,12 @@ export default function Ui({disconnected}) {
</div>
<div className={[styles.devtools, devtoolsIsOpen && styles.devtoolsIsOpen].filter(Boolean).join(' ')}>
<Devtools
applyFilters={applyFilters}
eventsChannel={devEventsChannel}
setApplyFilters={setApplyFilters}
brush={brush}
layer={layer}
stamp={stamp}
setBrush={setBrush}
setLayer={setLayer}
setStamp={setStamp}
/>
</div>
</div>

16
app/util/react-hooks/use-rect.js vendored
View File

@ -1,16 +0,0 @@
import {useLayoutEffect, useState} from 'react'
import useResizeObserver from '@react-hook/resize-observer'
export default function useRect(target) {
const [rect, setRect] = useState();
useLayoutEffect(() => {
setRect(target.current.getBoundingClientRect())
}, [target]);
useResizeObserver(
target,
(entry) => {
setRect(entry.target.getBoundingClientRect());
},
);
return rect;
}

56
package-lock.json generated
View File

@ -15,7 +15,6 @@
"@pixi/react": "^7.1.2",
"@pixi/spritesheet": "^7.4.2",
"@pixi/tilemap": "^4.1.0",
"@react-hook/resize-observer": "^2.0.1",
"@remix-run/express": "^2.9.2",
"@remix-run/node": "^2.9.2",
"@remix-run/react": "^2.9.2",
@ -29,7 +28,6 @@
"pixi.js": "^7.4.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-tabs": "^6.0.2",
"ws": "^8.17.0"
},
"devDependencies": {
@ -3021,11 +3019,6 @@
"integrity": "sha512-Lg3PnLp0QXpxwLIAuuJboLeRaIhrgJjeuh797QADg3xz8wGLugQOS5DpsE8A6i6Adgzf+bacllkKZG3J0tGfDw==",
"dev": true
},
"node_modules/@juggle/resize-observer": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
},
"node_modules/@leodeslf/simplex-noise": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@leodeslf/simplex-noise/-/simplex-noise-1.0.0.tgz",
@ -3977,35 +3970,6 @@
}
}
},
"node_modules/@react-hook/latest": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@react-hook/latest/-/latest-1.0.3.tgz",
"integrity": "sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==",
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/@react-hook/passive-layout-effect": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz",
"integrity": "sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==",
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/@react-hook/resize-observer": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@react-hook/resize-observer/-/resize-observer-2.0.1.tgz",
"integrity": "sha512-9PCX9grWfxdPizY8ohr+X4IkV1JhGMWr2Nm4ngbg6IcAIv0WBs7YoJcNBqYl22OqPHr5eOMItGcStZrmj2mbmQ==",
"dependencies": {
"@juggle/resize-observer": "^3.3.1",
"@react-hook/latest": "^1.0.2",
"@react-hook/passive-layout-effect": "^1.2.0"
},
"peerDependencies": {
"react": ">=18"
}
},
"node_modules/@remix-run/dev": {
"version": "2.9.2",
"resolved": "https://registry.npmjs.org/@remix-run/dev/-/dev-2.9.2.tgz",
@ -8455,14 +8419,6 @@
"node": ">=0.10.0"
}
},
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"engines": {
"node": ">=6"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@ -15493,18 +15449,6 @@
"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==",
"dev": true
},
"node_modules/react-tabs": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.2.tgz",
"integrity": "sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==",
"dependencies": {
"clsx": "^2.0.0",
"prop-types": "^15.5.0"
},
"peerDependencies": {
"react": "^18.0.0"
}
},
"node_modules/read-pkg": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",

2
package.json
View File

@ -22,7 +22,6 @@
"@pixi/react": "^7.1.2",
"@pixi/spritesheet": "^7.4.2",
"@pixi/tilemap": "^4.1.0",
"@react-hook/resize-observer": "^2.0.1",
"@remix-run/express": "^2.9.2",
"@remix-run/node": "^2.9.2",
"@remix-run/react": "^2.9.2",
@ -36,7 +35,6 @@
"pixi.js": "^7.4.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-tabs": "^6.0.2",
"ws": "^8.17.0"
},
"devDependencies": {