Indent board.tsx
This commit is contained in:
amatgil
parent
148c72e59d
commit
c6b1a7db8f
1 changed files with 105 additions and 105 deletions
|
|
@ -1,123 +1,123 @@
|
|||
import type {
|
||||
DbConnection as DatabaseConnection,
|
||||
Tile as DatabaseTile,
|
||||
EventContext,
|
||||
DbConnection as DatabaseConnection,
|
||||
Tile as DatabaseTile,
|
||||
EventContext,
|
||||
} from "./bindings";
|
||||
import { For, Match, Switch, createEffect, createSignal } from "solid-js";
|
||||
import type { Accessor } from "solid-js";
|
||||
import type { Game } from "./library";
|
||||
|
||||
export function Board(properties: {
|
||||
game: Game;
|
||||
connection: Accessor<DatabaseConnection>;
|
||||
game: Game;
|
||||
connection: Accessor<DatabaseConnection>;
|
||||
}) {
|
||||
const [tiles, setTiles] = createSignal<DatabaseTile[][]>([]);
|
||||
const [tiles, setTiles] = createSignal<DatabaseTile[][]>([]);
|
||||
|
||||
const tileOnInsert = (_context: EventContext, newRow: DatabaseTile): void => {
|
||||
if (newRow.game !== properties.game.id) return;
|
||||
const mapTiles = tiles();
|
||||
mapTiles[newRow.position.col] ??= [];
|
||||
mapTiles[newRow.position.col][newRow.position.row] = newRow;
|
||||
const tileOnInsert = (_context: EventContext, newRow: DatabaseTile): void => {
|
||||
if (newRow.game !== properties.game.id) return;
|
||||
const mapTiles = tiles();
|
||||
mapTiles[newRow.position.col] ??= [];
|
||||
mapTiles[newRow.position.col][newRow.position.row] = newRow;
|
||||
|
||||
|
||||
setTiles(
|
||||
mapTiles.map((column) =>
|
||||
column.sort((tileA, tileB) => tileA.position.row - tileB.position.row),
|
||||
),
|
||||
);
|
||||
};
|
||||
const tileOnUpdate = (
|
||||
_context: EventContext,
|
||||
oldRow: DatabaseTile,
|
||||
newRow: DatabaseTile,
|
||||
): void => {
|
||||
console.debug("Tile updated");
|
||||
if (newRow.game === properties.game.id) {
|
||||
const mapTiles = tiles();
|
||||
mapTiles[newRow.position.col] ??= [];
|
||||
mapTiles[newRow.position.col][newRow.position.row] = newRow;
|
||||
setTiles(
|
||||
mapTiles.map((column) =>
|
||||
column.sort(
|
||||
(tileA, tileB) => tileA.position.row - tileB.position.row,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
if (oldRow.game === properties.game.id) {
|
||||
setTiles(
|
||||
tiles().map((column) =>
|
||||
column
|
||||
.filter((tile) => tile.position !== oldRow.position)
|
||||
.sort((tileA, tileB) => tileA.position.row - tileB.position.row),
|
||||
),
|
||||
);
|
||||
}
|
||||
};
|
||||
const tileOnDelete = (_context: EventContext, oldRow: DatabaseTile): void => {
|
||||
if (oldRow.game !== properties.game.id) return;
|
||||
setTiles(
|
||||
tiles().map((column) =>
|
||||
column
|
||||
.filter((tile) => tile.position !== oldRow.position)
|
||||
.sort((tileA, tileB) => tileA.position.row - tileB.position.row),
|
||||
),
|
||||
);
|
||||
};
|
||||
setTiles(
|
||||
mapTiles.map((column) =>
|
||||
column.sort((tileA, tileB) => tileA.position.row - tileB.position.row),
|
||||
),
|
||||
);
|
||||
};
|
||||
const tileOnUpdate = (
|
||||
_context: EventContext,
|
||||
oldRow: DatabaseTile,
|
||||
newRow: DatabaseTile,
|
||||
): void => {
|
||||
console.debug("Tile updated");
|
||||
if (newRow.game === properties.game.id) {
|
||||
const mapTiles = tiles();
|
||||
mapTiles[newRow.position.col] ??= [];
|
||||
mapTiles[newRow.position.col][newRow.position.row] = newRow;
|
||||
setTiles(
|
||||
mapTiles.map((column) =>
|
||||
column.sort(
|
||||
(tileA, tileB) => tileA.position.row - tileB.position.row,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
if (oldRow.game === properties.game.id) {
|
||||
setTiles(
|
||||
tiles().map((column) =>
|
||||
column
|
||||
.filter((tile) => tile.position !== oldRow.position)
|
||||
.sort((tileA, tileB) => tileA.position.row - tileB.position.row),
|
||||
),
|
||||
);
|
||||
}
|
||||
};
|
||||
const tileOnDelete = (_context: EventContext, oldRow: DatabaseTile): void => {
|
||||
if (oldRow.game !== properties.game.id) return;
|
||||
setTiles(
|
||||
tiles().map((column) =>
|
||||
column
|
||||
.filter((tile) => tile.position !== oldRow.position)
|
||||
.sort((tileA, tileB) => tileA.position.row - tileB.position.row),
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
const tile = properties.connection().db.tile;
|
||||
tile.onInsert(tileOnInsert);
|
||||
tile.onUpdate(tileOnUpdate);
|
||||
tile.onDelete(tileOnDelete);
|
||||
});
|
||||
createEffect(() => {
|
||||
const tile = properties.connection().db.tile;
|
||||
tile.onInsert(tileOnInsert);
|
||||
tile.onUpdate(tileOnUpdate);
|
||||
tile.onDelete(tileOnDelete);
|
||||
});
|
||||
|
||||
console.log(properties.game);
|
||||
console.log(properties.game);
|
||||
console.log(properties.connection().reducers);
|
||||
|
||||
return (
|
||||
<>
|
||||
<p>Board: {properties.game.id}</p>
|
||||
<p>(Game over?: {`${properties.game.gameOver()}`})</p>
|
||||
<button
|
||||
class="reset-button"
|
||||
on:click={() =>
|
||||
properties.connection().reducers.resetBoard()
|
||||
}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gap: "2px",
|
||||
"grid-template-columns": `repeat(${properties.game.width}, 40px)`,
|
||||
}}
|
||||
>
|
||||
<For each={tiles().flat().sort((a, b) => {
|
||||
/* this is absolute ass*/
|
||||
if (a.position.row > b.position.row) { return 1; }
|
||||
if (a.position.row < b.position.row) { return -1; }
|
||||
if (a.position.col > b.position.col) { return 1; }
|
||||
if (a.position.col < b.position.col) { return -1; }
|
||||
return 0;
|
||||
})}>
|
||||
{(tile) => (
|
||||
<div class="tile-thign">
|
||||
<Switch>
|
||||
<Match when={tile.isUncovered}>
|
||||
<span>{tile.bombsAround}</span>
|
||||
</Match>
|
||||
<Match when={!tile.isUncovered}>
|
||||
<button class="spoilery-button"
|
||||
return (
|
||||
<>
|
||||
<p>Board: {properties.game.id}</p>
|
||||
<p>(Game over?: {`${properties.game.gameOver()}`})</p>
|
||||
<button
|
||||
class="reset-button"
|
||||
on:click={() =>
|
||||
properties.connection().reducers.uncoverTile(tile.position)
|
||||
properties.connection().reducers.resetBoard()
|
||||
}
|
||||
/>
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gap: "2px",
|
||||
"grid-template-columns": `repeat(${properties.game.width}, 40px)`,
|
||||
}}
|
||||
>
|
||||
<For each={tiles().flat().sort((a, b) => {
|
||||
/* this is absolute ass*/
|
||||
if (a.position.row > b.position.row) { return 1; }
|
||||
if (a.position.row < b.position.row) { return -1; }
|
||||
if (a.position.col > b.position.col) { return 1; }
|
||||
if (a.position.col < b.position.col) { return -1; }
|
||||
return 0;
|
||||
})}>
|
||||
{(tile) => (
|
||||
<div class="tile-thign">
|
||||
<Switch>
|
||||
<Match when={tile.isUncovered}>
|
||||
<span>{tile.bombsAround}</span>
|
||||
</Match>
|
||||
<Match when={!tile.isUncovered}>
|
||||
<button class="spoilery-button"
|
||||
on:click={() =>
|
||||
properties.connection().reducers.uncoverTile(tile.position)
|
||||
}
|
||||
/>
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue