// Component that displays mobile-friendly input buttons in the style // of Nintendo's classical Game Boy. // required props const buttonDownHandler = props.buttonDownHandler; // optional styling props const width = props.width ?? "100%"; const roundButtonSize = props.roundButtonSize ?? "80px"; const squareButtonSize = props.squareButtonSize ?? "80px"; const dPadWidth = props.dPadWidth ?? "240px"; const margin = props.margin ?? "0px"; // enum for button values const Button = { A: "a", B: "b", LEFT: "left", UP: "up", RIGHT: "right", DOWN: "down", }; // reusable styled button component const RoundButton = styled.button` border-radius: ${roundButtonSize}; font-size: xx-large; margin: 10px; width: ${roundButtonSize}; height: ${roundButtonSize}; border: 2px solid black; ${(props) => props.primary} `; // reusable styled button component const SquareButton = styled.button` font-size: xx-large; margin: 10px; width: ${squareButtonSize}; height: ${squareButtonSize}; border: 2px solid black; ${(props) => props.primary} `; // Directional pad const Dpad = () => { return ( <div style={{ display: "grid", gridTemplateAreas: '". up ." "left . right" ". down ."', width: dPadWidth, }} > <SquareButton style={{ gridArea: "left" }} onClick={() => buttonDownHandler(Button.LEFT)} > ◀ </SquareButton> <SquareButton style={{ gridArea: "right" }} onClick={() => buttonDownHandler(Button.RIGHT)} > ▶ </SquareButton> <SquareButton style={{ gridArea: "up" }} onClick={() => buttonDownHandler(Button.UP)} > ▲ </SquareButton> <SquareButton style={{ gridArea: "down" }} onClick={() => buttonDownHandler(Button.DOWN)} > ▼ </SquareButton> </div> ); }; return ( <div style={{ width, margin, display: "grid", gridTemplateColumns: "1fr 3fr 1fr", }} > <RoundButton onClick={() => buttonDownHandler(Button.B)}>B</RoundButton> {Dpad()} <RoundButton onClick={() => buttonDownHandler(Button.A)}>A</RoundButton> </div> );