parent
fce9712698
commit
59c6fed541
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,61 @@
|
|||||||
|
.toolbar {
|
||||||
|
padding-inline: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar > ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-left: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
/* display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
max-width: calc(3 * 100px); */
|
||||||
|
gap: 1em;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool:not(.selected):hover, .tool:not(.selected):focus {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool.selected {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool .background {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool .background > svg, .tool .only-background > svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool.selected:focus .background, .tool.selected:focus .only-background {
|
||||||
|
filter: drop-shadow(0px 0px 4px white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool .icon, .tool .only-background {
|
||||||
|
position: relative;
|
||||||
|
user-select: none;
|
||||||
|
pointer-events: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,175 @@
|
|||||||
|
import { PLAYER_COLORS } from "../consts.js";
|
||||||
|
import classes from "./Toolbar.module.css";
|
||||||
|
import PlayerTile from "../tile-player-any.svg?raw";
|
||||||
|
import { Buildings } from "../game.js";
|
||||||
|
import { For, Match, Switch } from "solid-js";
|
||||||
|
|
||||||
|
const WIDTH = 173.2;
|
||||||
|
const HEIGHT = 200;
|
||||||
|
|
||||||
|
export type Tool = {
|
||||||
|
type: "placeBuilding",
|
||||||
|
building: keyof typeof Buildings,
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ToolbarProps = {
|
||||||
|
playerID: string,
|
||||||
|
selectedTool: () => Tool,
|
||||||
|
setSelectedTool: (tool: Tool) => void,
|
||||||
|
resources: () => number,
|
||||||
|
resourceGain: () => number,
|
||||||
|
setReady: (ready: boolean) => void,
|
||||||
|
ready: () => boolean,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Toolbar(props: ToolbarProps) {
|
||||||
|
function isPlacingBuilding(building: keyof typeof Buildings) {
|
||||||
|
const tool = props.selectedTool();
|
||||||
|
if (tool.type !== "placeBuilding") return false;
|
||||||
|
return tool.building === building;
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectBuilding(building: keyof typeof Buildings) {
|
||||||
|
props.setSelectedTool({
|
||||||
|
type: "placeBuilding",
|
||||||
|
building,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return <nav class={classes.toolbar}>
|
||||||
|
<ul>
|
||||||
|
<ToolbarItem
|
||||||
|
playerID={props.playerID}
|
||||||
|
type="road"
|
||||||
|
selected={() => isPlacingBuilding("road")}
|
||||||
|
onSelect={() => selectBuilding("road")}
|
||||||
|
/>
|
||||||
|
<ToolbarItem
|
||||||
|
playerID={props.playerID}
|
||||||
|
type="pawn"
|
||||||
|
selected={() => isPlacingBuilding("pawn")}
|
||||||
|
onSelect={() => selectBuilding("pawn")}
|
||||||
|
/>
|
||||||
|
<ToolbarItem
|
||||||
|
playerID={props.playerID}
|
||||||
|
type="factory"
|
||||||
|
selected={() => isPlacingBuilding("factory")}
|
||||||
|
onSelect={() => selectBuilding("factory")}
|
||||||
|
/>
|
||||||
|
<li>
|
||||||
|
Resources: {props.resources()} (+{props.resourceGain()})
|
||||||
|
<br />
|
||||||
|
<button onClick={() => props.setReady(!props.ready())}>
|
||||||
|
{props.ready() ? "Waiting..." : "Ready"}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<Description selectedTool={props.selectedTool} />
|
||||||
|
</nav>;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function ToolbarItem(props: {
|
||||||
|
playerID: string,
|
||||||
|
type: keyof typeof Buildings,
|
||||||
|
selected: () => boolean,
|
||||||
|
onSelect: () => void,
|
||||||
|
}) {
|
||||||
|
const color = PLAYER_COLORS[+props.playerID % PLAYER_COLORS.length];
|
||||||
|
|
||||||
|
return <li
|
||||||
|
class={[classes.tool, props.selected() ? classes.selected : ""].filter(Boolean).join(" ")}
|
||||||
|
tabindex={0}
|
||||||
|
onClick={props.onSelect}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.key === "Enter") props.onSelect();
|
||||||
|
}}
|
||||||
|
role="button"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
innerHTML={PlayerTile}
|
||||||
|
class={props.type !== "road" ? classes.background : classes["only-background"]}
|
||||||
|
style={{
|
||||||
|
"--player-color": color
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
{
|
||||||
|
props.type !== "road" &&
|
||||||
|
<img class={classes.icon} src={`/tile-${props.type}.svg`} width={WIDTH} height={HEIGHT} />
|
||||||
|
}
|
||||||
|
</li>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TILE_DESCRIPTIONS = {
|
||||||
|
road: "The most basic tile, can be placed on any empty tile adjacent to one of your tiles. Allows buildings to be constructed on it.",
|
||||||
|
base: "Your HQ, if you lose it, you lose the game!",
|
||||||
|
factory: "Gives a steady income of resources, but will explode the adjacent tiles if destroyed.",
|
||||||
|
pawn: "Your first line of defense: has good HP and can attack a single adjacent tile to prevent enemy expansion to the border of your territory."
|
||||||
|
} satisfies Record<keyof typeof Buildings, string>;
|
||||||
|
|
||||||
|
const TILE_NAMES = {
|
||||||
|
road: "Road",
|
||||||
|
base: "HQ",
|
||||||
|
factory: "Factory",
|
||||||
|
pawn: "Defender"
|
||||||
|
} satisfies Record<keyof typeof Buildings, string>;
|
||||||
|
|
||||||
|
type KeyOf<T> = T extends object ? keyof T : never;
|
||||||
|
type TryIndex<T, K extends string> = T extends Record<K, unknown> ? T[K] : never;
|
||||||
|
|
||||||
|
type Stats = {
|
||||||
|
[K in KeyOf<typeof Buildings[keyof typeof Buildings]>]:
|
||||||
|
(value: TryIndex<typeof Buildings[keyof typeof Buildings], K>) => string
|
||||||
|
}
|
||||||
|
|
||||||
|
const STATS = {
|
||||||
|
cost: (cost: number) => `Cost: ${cost}`,
|
||||||
|
gain: (gain: number) => `Resource gain: ${gain}/turn`,
|
||||||
|
placedOn: (tiles: readonly (keyof typeof Buildings)[]) => {
|
||||||
|
const tileNames = tiles.map(tile => TILE_NAMES[tile]);
|
||||||
|
if (tileNames.length <= 2) {
|
||||||
|
return `Must be placed on ${tileNames.join(" or ")}`;
|
||||||
|
} else {
|
||||||
|
return `Must be placed on ${tileNames.slice(0, -1).join(", ")} or ${tileNames[tiles.length - 1]}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
} satisfies Stats;
|
||||||
|
|
||||||
|
function Description(props: {
|
||||||
|
selectedTool: () => Tool
|
||||||
|
}) {
|
||||||
|
const stats = (building: keyof typeof Buildings) => {
|
||||||
|
const keys = Object.keys(STATS) as (keyof typeof STATS)[];
|
||||||
|
const buildingRules = Buildings[building];
|
||||||
|
|
||||||
|
return keys.flatMap((key) => {
|
||||||
|
if (key in buildingRules) {
|
||||||
|
// SAFETY: can be trivially proven by applying decidability on `key`.
|
||||||
|
return [STATS[key]((buildingRules as Record<string, any>)[key])]
|
||||||
|
} else {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
return <div class={classes.description}>
|
||||||
|
<Switch fallback={<i>No tool selected</i>}>
|
||||||
|
<Match when={props.selectedTool().type === "placeBuilding"}>
|
||||||
|
{(_) => {
|
||||||
|
const building = () => (props.selectedTool() as (Tool & { type: "placeBuilding" })).building;
|
||||||
|
return (<>
|
||||||
|
<h3>{TILE_NAMES[building()]}</h3>
|
||||||
|
<p>{TILE_DESCRIPTIONS[building()]}</p>
|
||||||
|
<ul class={classes.stats}>
|
||||||
|
<For each={stats(building())}>
|
||||||
|
{(item, index) => {
|
||||||
|
return <li data-index={index()}>{item}</li>;
|
||||||
|
}}
|
||||||
|
</For>
|
||||||
|
</ul>
|
||||||
|
</>);
|
||||||
|
}}
|
||||||
|
</Match>
|
||||||
|
</Switch>
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import { BASE_URL } from "../consts.js";
|
||||||
|
import { Buildings } from "../game.js";
|
||||||
|
|
||||||
|
export type NonRoads = Exclude<keyof typeof Buildings, "road">;
|
||||||
|
export type TileImages = Record<NonRoads, HTMLImageElement>;
|
||||||
|
|
||||||
|
export async function loadTileImages(): Promise<TileImages> {
|
||||||
|
const tiles = await Promise.all(
|
||||||
|
(Object.keys(Buildings) as (keyof typeof Buildings)[])
|
||||||
|
.flatMap((building): Promise<[NonRoads, HTMLImageElement]>[] => {
|
||||||
|
if (building === "road") return [];
|
||||||
|
return [new Promise((resolve, reject) => {
|
||||||
|
const svg = document.createElement("img");
|
||||||
|
svg.src = BASE_URL + `./tile-${building}.svg`;
|
||||||
|
svg.addEventListener("load", () => {
|
||||||
|
resolve([building, svg]);
|
||||||
|
});
|
||||||
|
svg.addEventListener("error", (err) => {
|
||||||
|
console.error(`Error while loading image ${svg.src}: ${err}`);
|
||||||
|
reject(err);
|
||||||
|
});
|
||||||
|
})];
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
return Object.fromEntries(tiles) as TileImages;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
|
||||||
|
export const PLAYER_COLORS = ["#f06040", "#4050f0"];
|
||||||
|
export const BASE_URL = "/";
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
Loading…
Reference in new issue