Skip to content

Commit

Permalink
edit game tiles properties in brush editor bar
Browse files Browse the repository at this point in the history
  • Loading branch information
mathis committed Oct 24, 2023
1 parent bf4e20d commit d9b1a3e
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 21 deletions.
78 changes: 78 additions & 0 deletions client/src/ui/lib/editBrush.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
import FlipH from '../../../assets/flip-h.svg?component'
import RotateCW from '../../../assets/rotate-cw.svg?component'
import RotateCCW from '../../../assets/rotate-ccw.svg?component'
import { LayerKind } from '../../twmap/mapdir'
export let brush: Editor.Brush
Expand All @@ -32,6 +33,13 @@
Editor.off('keypress', onKeyPress)
})
function clamp(cur: number, min: number, max: number) {
if (isNaN(cur))
return min
else
return Math.min(Math.max(min, cur), max)
}
function brushRotateCW(sel: Info.AnyTile[][]) {
return Array.from({ length: sel[0].length }, (_, j) =>
Array.from({ length: sel.length }, (_, i) => sel[sel.length - 1 - i][j])
Expand Down Expand Up @@ -252,6 +260,34 @@
else if (e.key === 'h' || e.key === 'n') onFlipH()
}
function tilesProperty(tiles: Info.AnyTile[][], prop: string): number | undefined {
let res: number
for (const row of tiles) {
for (const tile of row) {
if (prop in tile) {
if (res === undefined) {
res = tile[prop]
}
else if (tile[prop] !== res) {
return undefined
}
}
}
}
return res
}
function onSetProperty(prop: string, val: number) {
brush.layers.forEach(l => l.tiles.forEach(r => r.forEach(t => {
if (prop in t) {
t[prop] = val
}
})))
dispatch('change', brush)
}
</script>

<div id="edit-brush">
Expand All @@ -268,6 +304,48 @@
<button class="default" on:click={onRotateCCW}>
<RotateCCW />
</button>
{#if brush.layers.length === 1}
{@const layer = brush.layers[0]}
{#if layer.kind === LayerKind.Tele}
<label>
<span>Teleport target</span>
<input type="number" min={0} max={255} value={tilesProperty(layer.tiles, 'number')} on:change={(e) => onSetProperty('number', clamp(parseInt(e.currentTarget.value), 0, 255))} />
</label>
{:else if layer.kind === LayerKind.Speedup}
<label>
<span>Speedup force</span>
<input type="number" min={0} max={255} value={tilesProperty(layer.tiles, 'force')} on:change={(e) => onSetProperty('force', clamp(parseInt(e.currentTarget.value), 0, 255))} />
</label>
<label>
<span>Speedup max speed</span>
<input
type="number"
min={0}
max={255}
value={tilesProperty(layer.tiles, 'maxSpeed')}
on:change={(e) => onSetProperty('maxSpeed', clamp(parseInt(e.currentTarget.value), 0, 255))}
/>
</label>
<label>
<span>Speedup angle</span>
<input type="number" min={0} max={359} value={tilesProperty(layer.tiles, 'angle')} on:change={(e) => onSetProperty('angle', clamp(parseInt(e.currentTarget.value), 0, 255))} />
</label>
{:else if layer.kind === LayerKind.Switch}
<label>
<span>Switch number</span>
<input type="number" min={0} max={255} value={tilesProperty(layer.tiles, 'number')} on:change={(e) => onSetProperty('number', clamp(parseInt(e.currentTarget.value), 0, 255))} />
</label>
<label>
<span>Switch delay</span>
<input type="number" min={0} max={255} value={tilesProperty(layer.tiles, 'delay')} on:change={(e) => onSetProperty('delay', clamp(parseInt(e.currentTarget.value), 0, 255))} />
</label>
{:else if layer.kind === LayerKind.Tune}
<label>
<span>Tune zone</span>
<input type="number" min={0} max={255} value={tilesProperty(layer.tiles, 'number')} on:change={(e) => onSetProperty('number', clamp(parseInt(e.currentTarget.value), 0, 255))} />
</label>
{/if}
{/if}
</div>
</div>

23 changes: 16 additions & 7 deletions client/src/ui/lib/editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export type Brush = {
group: number,
layers: {
layer: number,
kind: MapDir.LayerKind,
tiles: Info.AnyTile[][],
}[]
}
Expand Down Expand Up @@ -106,7 +107,11 @@ export function makeBoxSelection(map: Map, g: number, ll: number[], sel: Range):
tiles.push(row)
}

res.layers.push({ layer: l, tiles })
res.layers.push({
layer: l,
kind: layerKind(layer),
tiles
})
}

return res
Expand All @@ -132,7 +137,11 @@ export function makeEmptySelection(map: Map, g: number, ll: number[], sel: Range
tiles.push(row)
}

res.layers.push({ layer: l, tiles })
res.layers.push({
layer: l,
kind: layerKind(layer),
tiles
})
}

return res
Expand Down Expand Up @@ -196,10 +205,7 @@ function adaptTile(tile: Info.AnyTile, kind: MapDir.LayerKind): Info.AnyTile {
}
}

export function adaptTilesToLayer(map: Map, g: number, l: number, tiles: Info.AnyTile[][]): Info.AnyTile[][] {
const layer = map.groups[g].layers[l]
const kind = layerKind(layer)

export function adaptTiles(tiles: Info.AnyTile[][], kind: MapDir.LayerKind): Info.AnyTile[][] {
return tiles.map(row =>
row.map(tile => adaptTile(tile, kind))
)
Expand All @@ -214,9 +220,11 @@ export function adaptBrushToLayers(map: Map, brush: Brush, g: number, ll: number
return layer
}
else {
const kind = layerKind(map.groups[g].layers[l])
return {
layer: l,
tiles: adaptTilesToLayer(map, g, l, brush.layers[0].tiles)
kind,
tiles: adaptTiles(brush.layers[0].tiles, kind)
}
}
})
Expand Down Expand Up @@ -307,6 +315,7 @@ export function fill(
group: brush.group,
layers: brush.layers.map(l => ({
layer: l.layer,
kind: l.kind,
tiles: repeat(l.tiles, size),
}))
}
Expand Down
3 changes: 2 additions & 1 deletion client/src/ui/lib/mapEditor.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
import Stats from './stats.svelte'
import { RenderAnyTilesLayer } from "../../gl/renderTilesLayer"
import { viewport, renderer } from '../../gl/global'
import { externalImageUrl } from './util'
import { externalImageUrl, layerKind } from './util'
import MapView from './mapView.svelte'
import type { RenderGroup } from '../../gl/renderGroup'
import type { RenderLayer } from '../../gl/renderLayer'
Expand Down Expand Up @@ -499,6 +499,7 @@
group: g,
layers: [{
layer: l,
kind: layerKind($map.groups[g].layers[l]),
tiles: e.detail,
}]
}
Expand Down
26 changes: 13 additions & 13 deletions client/src/ui/lib/tilePicker.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
let currentSpeedup: { kind: MapDir.LayerKind.Speedup } & Speedup = { kind: MapDir.LayerKind.Speedup, ...SpeedupLayer.defaultTile() }
let currentTune: { kind: MapDir.LayerKind.Tune } & Tune = { kind: MapDir.LayerKind.Tune, ...TuneLayer.defaultTile() }
function sanitizeInputs() {
function onInputChanged() {
currentTele.number = clamp(currentTele.number, 0, 255)
currentSwitch.delay = clamp(currentSwitch.delay, 0, 255)
currentSwitch.number = clamp(currentSwitch.number, 0, 255)
Expand Down Expand Up @@ -258,34 +258,34 @@
<div class="header">
{#if rlayer.layer instanceof TeleLayer}
<label>
Teleport target <input type="number" min={0} max={255} bind:value={currentTele.number} on:change={sanitizeInputs} />
</label>
{:else if rlayer.layer instanceof SwitchLayer}
<label>
Switch number <input type="number" min={0} max={255} bind:value={currentSwitch.number} on:change={sanitizeInputs} />
</label>
<label>
Switch delay <input type="number" min={0} max={255} bind:value={currentSwitch.delay} on:change={sanitizeInputs} />
Teleport target <input type="number" min={0} max={255} bind:value={currentTele.number} on:change={onInputChanged} />
</label>
{:else if rlayer.layer instanceof SpeedupLayer}
<label>
Speedup force <input type="number" min={0} max={255} bind:value={currentSpeedup.force} on:change={sanitizeInputs} />
Speedup force <input type="number" min={0} max={255} bind:value={currentSpeedup.force} on:change={onInputChanged} />
</label>
<label>
Speedup max speed <input
type="number"
min={0}
max={255}
bind:value={currentSpeedup.maxSpeed}
on:change={sanitizeInputs}
on:change={onInputChanged}
/>
</label>
<label>
Speedup angle <input type="number" min={0} max={359} bind:value={currentSpeedup.angle} on:change={sanitizeInputs} />
Speedup angle <input type="number" min={0} max={359} bind:value={currentSpeedup.angle} on:change={onInputChanged} />
</label>
{:else if rlayer.layer instanceof SwitchLayer}
<label>
Switch number <input type="number" min={0} max={255} bind:value={currentSwitch.number} on:change={onInputChanged} />
</label>
<label>
Switch delay <input type="number" min={0} max={255} bind:value={currentSwitch.delay} on:change={onInputChanged} />
</label>
{:else if rlayer.layer instanceof TuneLayer}
<label>
Tune zone <input type="number" min={0} max={255} bind:value={currentTune.number} on:change={sanitizeInputs} />
Tune zone <input type="number" min={0} max={255} bind:value={currentTune.number} on:change={onInputChanged} />
</label>
{:else}
Select tiles to place on the map.
Expand Down

0 comments on commit d9b1a3e

Please sign in to comment.