slanted-gamedev-toolz
Version:
A slanted mix of tools for your brilliant ideas in game design.
40 lines (39 loc) • 1.41 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
/* eslint-disable @typescript-eslint/ban-types */
/* eslint-disable no-empty-pattern */
import { useMemo } from "react";
export const Dpad = ({ size = 160 }) => {
const style = {
border: "1px solid red",
height: size,
width: size,
position: "absolute",
bottom: 20,
left: 20,
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gridTemplateRows: "repeat(3, 1fr)",
};
const Buttons = useMemo(() => {
const buttonStyle = {
width: "100%",
height: "100%",
position: "relative",
borderRadius: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "2em",
border: "none",
background: "none",
};
const buttons = [];
for (let row = 0; row < 3; row++) {
for (let col = 0; col < 3; col++) {
buttons.push(_jsxs("button", { style: buttonStyle, children: [row === 0 && col === 1 ? "🔼" : null, row === 1 && col === 0 ? "◀️" : null, row === 1 && col === 2 ? "▶️" : null, row === 2 && col === 1 ? "🔽" : null] }, `${row}-${col}`));
}
}
return buttons;
}, []);
return _jsx("div", { style: style, children: Buttons });
};