refocus canvas on lambda factory clsoe

This commit is contained in:
Elizabeth Hunt 2024-03-02 06:00:47 -07:00
parent cbb88091bd
commit 4233aca561
Signed by: simponic
GPG Key ID: 52B3774857EB24B1
5 changed files with 59 additions and 10 deletions

View File

@ -1,5 +1,6 @@
import { useState, useEffect, useRef } from "react"; import { useState, useEffect, useRef } from "react";
import { TheAbstractionEngine, Game } from "../engine"; import { TheAbstractionEngine, Game } from "../engine";
import { Miscellaneous } from "../engine/config";
export interface GameCanvasProps { export interface GameCanvasProps {
width: number; width: number;
@ -21,6 +22,8 @@ export const GameCanvas = ({ width, height }: GameCanvasProps) => {
theAbstractionEngine.init().then(() => { theAbstractionEngine.init().then(() => {
theAbstractionEngine.play(); theAbstractionEngine.play();
setGame(theAbstractionEngine); setGame(theAbstractionEngine);
canvas.focus();
}); });
return () => theAbstractionEngine.stop(); return () => theAbstractionEngine.stop();
@ -30,7 +33,13 @@ export const GameCanvas = ({ width, height }: GameCanvasProps) => {
return ( return (
<div className="centered-game"> <div className="centered-game">
<canvas ref={canvasRef} width={width} height={height}></canvas> <canvas
id={Miscellaneous.CANVAS_ID}
tabIndex={1}
ref={canvasRef}
width={width}
height={height}
></canvas>
</div> </div>
); );
}; };

View File

@ -94,19 +94,19 @@ export class TheAbstractionEngine {
} }
private addWindowEventListenersToInputSystem(input: Input) { private addWindowEventListenersToInputSystem(input: Input) {
window.addEventListener("keydown", (e) => { this.ctx.canvas.addEventListener("keydown", (e) => {
if (!e.repeat) { if (!e.repeat) {
input.keyPressed(e.key.toLowerCase()); input.keyPressed(e.key.toLowerCase());
} }
}); });
window.addEventListener("keyup", (e) => this.ctx.canvas.addEventListener("keyup", (e) =>
input.keyReleased(e.key.toLowerCase()), input.keyReleased(e.key.toLowerCase()),
); );
window.addEventListener("blur", () => input.clearKeys()); this.ctx.canvas.addEventListener("blur", () => input.clearKeys());
window.addEventListener("mousemove", (e) => { this.ctx.canvas.addEventListener("mousemove", (e) => {
const canvas = this.ctx.canvas; const canvas = this.ctx.canvas;
const rect = canvas.getBoundingClientRect(); const rect = canvas.getBoundingClientRect();

View File

@ -10,15 +10,19 @@ export enum Action {
export namespace KeyConstants { export namespace KeyConstants {
export const KeyActions: Record<string, Action> = { export const KeyActions: Record<string, Action> = {
a: Action.MOVE_LEFT, a: Action.MOVE_LEFT,
h: Action.MOVE_LEFT,
arrowleft: Action.MOVE_LEFT, arrowleft: Action.MOVE_LEFT,
d: Action.MOVE_RIGHT, d: Action.MOVE_RIGHT,
l: Action.MOVE_RIGHT,
arrowright: Action.MOVE_RIGHT, arrowright: Action.MOVE_RIGHT,
w: Action.MOVE_UP, w: Action.MOVE_UP,
k: Action.MOVE_UP,
arrowup: Action.MOVE_UP, arrowup: Action.MOVE_UP,
s: Action.MOVE_DOWN, s: Action.MOVE_DOWN,
j: Action.MOVE_DOWN,
arrowdown: Action.MOVE_DOWN, arrowdown: Action.MOVE_DOWN,
" ": Action.INTERACT, " ": Action.INTERACT,
@ -56,4 +60,5 @@ export namespace Miscellaneous {
export const GRID_CELL_HEIGHT = Math.floor(HEIGHT / GRID_ROWS); export const GRID_CELL_HEIGHT = Math.floor(HEIGHT / GRID_ROWS);
export const MODAL_ID = "modal"; export const MODAL_ID = "modal";
export const CANVAS_ID = "canvas";
} }

View File

@ -1,4 +1,10 @@
import { IMAGES, SPRITE_SPECS, SpriteSpec, Sprites } from "../config"; import {
IMAGES,
Miscellaneous,
SPRITE_SPECS,
SpriteSpec,
Sprites,
} from "../config";
import { Entity, EntityNames } from "."; import { Entity, EntityNames } from ".";
import { import {
BoundingBox, BoundingBox,
@ -94,16 +100,45 @@ export class LambdaFactory extends Entity {
} }
let modalOpen = false; let modalOpen = false;
const interaction = () => { const close = () => {
if (modalOpen) {
modalOpen = false; modalOpen = false;
closeModal(); closeModal();
const spawner = this.getComponent<LambdaSpawn>(
ComponentNames.LambdaSpawn,
);
spawner.code = (
document.getElementById("code") as HTMLTextAreaElement
).value;
this.addComponent(spawner);
document.getElementById(Miscellaneous.CANVAS_ID)!.focus();
return;
};
const interaction = () => {
if (modalOpen) {
close();
return; return;
} }
modalOpen = true; modalOpen = true;
openModal(this.code); openModal(this.codeEditor(this.code));
document.getElementById("close-modal")!.addEventListener("click", close);
}; };
this.addComponent(new Interactable(interaction)); this.addComponent(new Interactable(interaction));
} }
private codeEditor(code: string) {
return `
<div>
<textarea id="code" autofocus="autofocus" rows="10" cols="50">
${code}
</textarea>
<button id="close-modal">Close</button>
</div>
`;
}
} }

View File

@ -1,7 +1,7 @@
import { System, SystemNames } from "."; import { System, SystemNames } from ".";
import { Game } from ".."; import { Game } from "..";
import { Entity, EntityNames } from "../entities"; import { Entity, EntityNames } from "../entities";
import { BoundingBox, Colliding, ComponentNames, Grid } from "../components"; import { BoundingBox, ComponentNames, Grid } from "../components";
const collisionMap: Record<string, Set<string>> = { const collisionMap: Record<string, Set<string>> = {
[EntityNames.Key]: new Set([EntityNames.LockedDoor]), [EntityNames.Key]: new Set([EntityNames.LockedDoor]),