@benev/nubs
Version:
user-input system for web games
66 lines (64 loc) • 2.24 kB
JavaScript
import { html } from "lit";
import { view } from "@chasemoskal/magical";
import { prepGridboardEvents } from "../setups/prep-gridboard-events.js";
import gearSvg from "../../../framework/icons/akar/gear.svg.js";
import peopleGroupSvg from "../../../framework/icons/akar/people-group.svg.js";
import blockSvg from "../../../framework/icons/akar/block.svg.js";
import bugSvg from "../../../framework/icons/akar/bug.svg.js";
import wifiSvg from "../../../framework/icons/akar/wifi.svg.js";
const embellishments = {
KeyQ: { label: "back", icon: blockSvg },
KeyW: { label: "settings", icon: gearSvg },
KeyE: { label: "profiler", icon: bugSvg },
KeyR: { label: "social", icon: peopleGroupSvg },
KeyT: { label: "connection", icon: wifiSvg },
// KeyQ: {label: "menu", icon: gridSvg},
// KeyE: {label: "forth", icon: arrowUpThickSvg},
// KeyD: {label: "back", icon: arrowDownThickSvg},
// KeyS: {label: "left", icon: arrowLeftThickSvg},
// KeyF: {label: "right", icon: arrowRightThickSvg},
};
export const GridButtonsView = view({}, use => ({ keylog, layout, dispatchCause, }) => {
const { pointerup, pointerdown } = prepGridboardEvents(dispatchCause);
function isKeyPressed(code) {
var _a, _b;
return (_b = (_a = keylog[code]) === null || _a === void 0 ? void 0 : _a.pressed) !== null && _b !== void 0 ? _b : false;
}
function renderButton([keycap, keycode]) {
const embellishment = embellishments[keycode];
const isEmbellished = !!embellishment;
return html `
<button
class=key
data-keycap="${keycap}"
data-keycode="${keycode}"
?data-is-embellished=${isEmbellished}
?data-is-pressed=${isKeyPressed(keycode)}
@pointerup=${pointerup}
@pointerdown=${pointerdown}>
${embellishment && html `
<span class=icon>
${embellishment.icon}
</span>
<span class=label>
${embellishment.label}
</span>
`}
<span class=keycap>
${keycap}
</span>
</button>
`;
}
function renderRow(row) {
return html `
<div class=row>
${row.map(renderButton)}
</div>
`;
}
return html `
${layout.map(renderRow)}
`;
});
//# sourceMappingURL=grid-buttons.js.map