Skip to content

Commit

Permalink
feat: move input controls to InputController
Browse files Browse the repository at this point in the history 
refactor: rename "mouse" to "cursor"
  • Loading branch information
@thirdmadman
thirdmadman committed Mar 15, 2024
1 parent e6a0a6c commit 0e97115
Show file tree
Hide file tree
Showing 7 changed files with 201 additions and 209 deletions.
173 changes: 36 additions & 137 deletions src/app/App.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { InputController } from './engine/InputController';
import { DataStorage } from './engine/DataStorage';
import { Engine } from './engine/Engine';
import { IPixelsLayer } from './interfaces/IPixelsLayer';
import { IPoint } from './interfaces/IPoint';
import { Renderer } from './render/Renderer';

export class App {
Expand All @@ -24,10 +23,6 @@ export class App {

private framePositionY = 0;

private realMousePosition = { x: 0, y: 0 } as IPoint;

private virtualMousePosition = { x: 0, y: 0 } as IPoint;

private isPause = false;

private dataStorage = new DataStorage();
Expand All @@ -42,139 +37,10 @@ export class App {
appEl.appendChild(this.canvas);
}

// const handleMouseLeftButton = (mPos: Point) => this.engine.handleMouseLeftButton(mPos);
const handleMouseWheelUp = () => this.engine.handleMouseWheelUp();
const handleMouseWheelDown = () => this.engine.handleMouseWheelDown();

const getMousePos = (canvas: HTMLCanvasElement, e: MouseEvent) => {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
return {
x: (e.clientX - rect.left) * scaleX,
y: (e.clientY - rect.top) * scaleY,
} as IPoint;
};

const getTouchPos = (canvas: HTMLCanvasElement, e: TouchEvent) => {
const rect = canvas.getBoundingClientRect();
const touch = e.touches[0];
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
return {
x: (touch.clientX - rect.left) * scaleX,
y: (touch.clientY - rect.top) * scaleY,
};
};

const setCursorPos = (point: IPoint) => {
this.realMousePosition = point;
const pixelSize = this.renderer.getPixelSize();

this.virtualMousePosition.x = this.framePositionX + Math.floor(point.x / pixelSize);
this.virtualMousePosition.y = this.framePositionY + (this.frameHeight - 1 - Math.floor(point.y / pixelSize));

this.engine.setMousedPosition(this.virtualMousePosition);
};

this.canvas.addEventListener(
'mousemove',
(e) => {
const mousePos = getMousePos(this.canvas, e);
setCursorPos(mousePos);
},
false,
);

this.canvas.addEventListener(
'touchmove',
(e) => {
const touchPos = getTouchPos(this.canvas, e);
setCursorPos(touchPos);
},
false,
);

this.canvas.addEventListener(
'wheel',
(e) => {
if (-e.deltaY < 0) {
handleMouseWheelDown();
} else if (-e.deltaY > 0) {
handleMouseWheelUp();
}
},
false,
);

// const clickAndHold = (btnEl: HTMLCanvasElement, func: () => void) => {
// let timerId: number;
// const DURATION = 1;

// const onMouseDown = (e: MouseEvent | TouchEvent) => {
// if (e.type === 'mousedown' && e instanceof MouseEvent) {
// if (e.button === 0) {
// timerId = window.setInterval(func, DURATION);
// }
// } else if (e instanceof TouchEvent) {
// const touchPos = getTouchPos(this.canvas, e);
// setCursorPos(touchPos);
// timerId = window.setInterval(func, DURATION);
// }
// };

// const clearTimer = () => {
// if (timerId) {
// window.clearInterval(timerId);
// }
// };

// btnEl.addEventListener('mousedown', onMouseDown);
// btnEl.addEventListener('mouseup', clearTimer);
// btnEl.addEventListener('mouseout', clearTimer);
// btnEl.addEventListener('touchstart', onMouseDown);
// btnEl.addEventListener('touchend', clearTimer);

// return () => {
// btnEl.removeEventListener('mousedown', onMouseDown);
// btnEl.removeEventListener('mouseup', clearTimer);
// btnEl.removeEventListener('mouseout', clearTimer);
// btnEl.addEventListener('touchstart', onMouseDown, false);
// btnEl.addEventListener('touchend', clearTimer, false);
// };
// };

// clickAndHold(this.canvas, () => handleMouseLeftButton(this.virtualMousePosition));

this.canvas.addEventListener(
'mousedown',
(e) => {
switch (e.button) {
case 0:
this.engine.handleMouseLeftButtonDown(this.virtualMousePosition);
break;
default:
console.error(e.button);
}
},
false,
);

this.canvas.addEventListener(
'mouseup',
(e) => {
switch (e.button) {
case 0:
this.engine.handleMouseLeftButtonUp(this.virtualMousePosition);
break;
default:
console.error(e.button);
}
},
false,
);

this.inputController.registerKeyListeners();
this.inputController.registerMouseButtonListeners(this.canvas);
this.inputController.registerMouseMoveListeners(this.canvas);
this.inputController.registerMouseWheelListener(this.canvas);
this.renderer = new Renderer(this.canvas);
}

Expand Down Expand Up @@ -226,9 +92,42 @@ export class App {
pixels: enginePixels,
};

const cursorPosition = this.inputController.getCursorRealPosition();

const pixelSize = this.renderer.getPixelSize();

const virtualCursorPositionX = this.framePositionX + Math.floor(cursorPosition.x / pixelSize);
const virtualCursorPositionY = this.framePositionY
+ (this.frameHeight - 1 - Math.floor(cursorPosition.y / pixelSize));

const virtualCursorPosition = { x: virtualCursorPositionX, y: virtualCursorPositionY };

this.engine.setCursorPosition(virtualCursorPosition);

const mouseWheelDelta = this.inputController.getMouseWheelDelta();
if (mouseWheelDelta !== 0) {
this.engine.handleMouseWheelDelta(mouseWheelDelta);
}

const clickedKeys = this.inputController.getClickedKeys();
const pressedKeys = this.inputController.getPressedKeys();

const pressedMouseButtons = this.inputController.getPressedMouseButtons();

if (Object.keys(pressedMouseButtons).length > 0) {
const pressMouseButtonToAction = {
0: () => this.engine.handleMouseLeftButtonDown(),
};

Object.keys(pressedMouseButtons).forEach((el) => {
const action = pressMouseButtonToAction[el as unknown as keyof typeof pressMouseButtonToAction];
if (!action || action === undefined || action === null) {
return;
}
action();
});
}

if (Object.keys(pressedKeys).length > 0) {
const pressKeyToAction = {
ArrowRight: () => {
Expand Down
71 changes: 34 additions & 37 deletions src/app/engine/Engine.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ export class Engine {

private worldSquareSide = 2;

private mousePosition: IPoint = { x: 0, y: 0 };
private cursorPosition: IPoint = { x: 0, y: 0 };

private lastMousePosition: IPoint = { x: 0, y: 0 };
private lastCursorPosition: IPoint = { x: 0, y: 0 };

private lastUnitId = 0;

Expand Down Expand Up @@ -75,7 +75,7 @@ export class Engine {
'switch-create-wood-wall': () => { this.unitCreationType = 9; },
'switch-remove': () => { this.unitCreationType = 5; },
'switch-ignite': () => { this.unitCreationType = 7; },
'default-action': (mousePosition: IPoint) => this.mainAction(mousePosition),
'default-action': (cursorPosition: IPoint) => this.mainAction(cursorPosition),
};

this.ui = new UI(actions);
Expand Down Expand Up @@ -106,8 +106,8 @@ export class Engine {
this.framePositionX = engineState.framePositionX;
this.framePositionY = engineState.framePositionY;
this.worldSquareSide = engineState.worldSquareSide;
this.mousePosition = engineState.mousePosition;
this.lastMousePosition = engineState.lastMousePosition;
this.cursorPosition = engineState.cursorPosition;
this.lastCursorPosition = engineState.lastCursorPosition;
this.lastUnitId = 0;
this.gameWorldState = engineState.gameWorldState;
}
Expand All @@ -119,8 +119,8 @@ export class Engine {
framePositionX: this.framePositionX,
framePositionY: this.framePositionY,
worldSquareSide: this.worldSquareSide,
mousePosition: this.mousePosition,
lastMousePosition: this.lastMousePosition,
cursorPosition: this.cursorPosition,
lastCursorPosition: this.lastCursorPosition,
lastUnitId: this.lastUnitId,
gameWorldState: this.gameWorldState,
} as IGameState;
Expand All @@ -138,10 +138,10 @@ export class Engine {
this.playersEngine.setFramePosition({ x, y });
}

setMousedPosition(point: IPoint) {
this.lastMousePosition = this.mousePosition;
this.mousePosition = point;
this.ui.setMousePosition(point);
setCursorPosition(point: IPoint) {
this.lastCursorPosition = this.cursorPosition;
this.cursorPosition = point;
this.ui.setCursorPosition(point);
}

setRendererSize(width: number, height: number) {
Expand All @@ -151,6 +151,10 @@ export class Engine {
this.ui.setRendererSize(width, height);
}

getLastCursorPosition() {
return this.lastCursorPosition;
}

getUi() {
return this.ui;
}
Expand Down Expand Up @@ -325,26 +329,18 @@ export class Engine {
return frame;
}

handleMouseLeftButtonDown(mousePosition: IPoint) {
this.ui.handleClickDown(mousePosition);
this.lastMousePosition = this.mousePosition;
this.mousePosition = mousePosition;
}

handleMouseLeftButtonUp(mousePosition: IPoint) {
this.ui.handleClickUp(mousePosition);
this.lastMousePosition = this.mousePosition;
this.mousePosition = mousePosition;
handleMouseLeftButtonDown() {
this.ui.handleMainButtonClickDown(this.cursorPosition);
}

mainAction(mousePosition: IPoint) {
mainAction(cursorPosition: IPoint) {
const createWrapper = (point: IPoint) => this.createUnitAtPoint(
point,
this.unitCreationType,
this.unitCreationSquareSize,
);
this.drawLine(this.lastMousePosition, mousePosition, createWrapper);
// this.createUnitAtPoint(mousePosition, this.unitCreationType, this.unitCreationSquareSize);
console.error(this.getLastCursorPosition(), cursorPosition);
this.drawLine(this.getLastCursorPosition(), cursorPosition, createWrapper);
}

drawLine(startPoint: IPoint, endPoint: IPoint, callback: (p: IPoint) => void = () => {}) {
Expand Down Expand Up @@ -372,13 +368,14 @@ export class Engine {
return resultArray;
}

handleMouseWheelUp() {
if (this.unitCreationSquareSize < this.frameHeight * 2) {
this.unitCreationSquareSize += 1;
handleMouseWheelDelta(delta: number) {
if (delta > 0) {
if (this.unitCreationSquareSize < this.frameHeight * 2) {
this.unitCreationSquareSize += 1;
}
return;
}
}

handleMouseWheelDown() {
if (this.unitCreationSquareSize > 0) {
this.unitCreationSquareSize -= 1;
}
Expand All @@ -403,7 +400,7 @@ export class Engine {
return unit;
}

createUnitAtPoint(mousePosition: IPoint, unitType: number, squareSize: number) {
createUnitAtPoint(cursorPosition: IPoint, unitType: number, squareSize: number) {
const generateNewUnit = () => {
let unitTypeName = 'pure-water';
switch (unitType) {
Expand Down Expand Up @@ -455,8 +452,8 @@ export class Engine {
};

if (squareSize > 0) {
const squareStartX = Math.floor(mousePosition.x / squareSize) * squareSize;
const squareStartY = Math.floor(mousePosition.y / squareSize) * squareSize;
const squareStartX = Math.floor(cursorPosition.x / squareSize) * squareSize;
const squareStartY = Math.floor(cursorPosition.y / squareSize) * squareSize;

for (let y = 0; y < squareSize; y += 1) {
for (let x = 0; x < squareSize; x += 1) {
Expand All @@ -482,13 +479,13 @@ export class Engine {

const generatedUnit = generateNewUnit();
if (generatedUnit === 'set-on-fire') {
if (this.gameWorldState[mousePosition.x][mousePosition.y]
&& this.gameWorldState[mousePosition.x][mousePosition.y]?.getUnitType().unitIsFlammable) {
if (this.gameWorldState[cursorPosition.x][cursorPosition.y]
&& this.gameWorldState[cursorPosition.x][cursorPosition.y]?.getUnitType().unitIsFlammable) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
this.gameWorldState[mousePosition.x][mousePosition.y]!.unitState.unitIsOnFire = true;
this.gameWorldState[cursorPosition.x][cursorPosition.y]!.unitState.unitIsOnFire = true;
}
} else if (!this.gameWorldState[mousePosition.x][mousePosition.y] || generatedUnit === null) {
this.gameWorldState[mousePosition.x][mousePosition.y] = generatedUnit;
} else if (!this.gameWorldState[cursorPosition.x][cursorPosition.y] || generatedUnit === null) {
this.gameWorldState[cursorPosition.x][cursorPosition.y] = generatedUnit;
if (generatedUnit !== null) {
generatedUnit.unitId = this.lastUnitId++;
}
Expand Down
Loading

0 comments on commit 0e97115

Please sign in to comment.