diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b455aed..00e5e5f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -33,7 +33,7 @@ "resolve-url-loader": "^3.1.1", "sass": "^1.27.0", "sass-loader": "^8.0.2", - "sdf-2d": "^0.6.2", + "sdf-2d": "^0.7.0", "shared": "file:../shared", "socket.io-client": "^2.3.1", "socket.io-msgpack-parser": "^2.0.0", @@ -15128,9 +15128,9 @@ } }, "node_modules/sdf-2d": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/sdf-2d/-/sdf-2d-0.6.2.tgz", - "integrity": "sha512-VUeToQdZn96ZhliHTRcfHYGgQ/4TyUDicy6GaUug1skZdxmh/er9KRcihRIVjyiJg/6DGY87J71y+CcygwZqwA==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/sdf-2d/-/sdf-2d-0.7.0.tgz", + "integrity": "sha512-ZEpjVmCUVVndOI2axY0ZyGpkw1IYPdxiaxGGsN4b5hjKnPZKapc28405vn0az8H0CyLem5eRbECWix0anRC58A==", "dev": true, "dependencies": { "gl-matrix": "^3.3.0", @@ -20716,13 +20716,15 @@ "version": "0.1.5", "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.1.5.tgz", "integrity": "sha512-88h74TMQ6wXChPA6h9Q3E1Jg6TkTHep2+k63OWg3s0ozyGVMeY+TTOti7PFPzq5RhszQPQOoCi59es4MaRvgCw==", - "dev": true + "dev": true, + "requires": {} }, "@firebase/auth-types": { "version": "0.10.1", "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.10.1.tgz", "integrity": "sha512-/+gBHb1O9x/YlG7inXfxff/6X3BPZt4zgBv4kql6HEmdzNQCodIRlEYnI+/da+lN+dha7PjaFH7C7ewMmfV7rw==", - "dev": true + "dev": true, + "requires": {} }, "@firebase/component": { "version": "0.1.19", @@ -20779,7 +20781,8 @@ "version": "1.14.0", "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-1.14.0.tgz", "integrity": "sha512-WF8IBwHzZDhwyOgQnmB0pheVrLNP78A8PGxk1nxb/Nrgh1amo4/zYvFMGgSsTeaQK37xMYS/g7eS948te/dJxw==", - "dev": true + "dev": true, + "requires": {} }, "@firebase/functions": { "version": "0.5.1", @@ -20817,7 +20820,8 @@ "version": "0.3.4", "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.3.4.tgz", "integrity": "sha512-RfePJFovmdIXb6rYwtngyxuEcWnOrzdZd9m7xAW0gRxDIjBT20n3BOhjpmgRWXo/DAxRmS7bRjWAyTHY9cqN7Q==", - "dev": true + "dev": true, + "requires": {} }, "@firebase/logger": { "version": "0.2.6", @@ -20843,7 +20847,8 @@ "version": "0.5.0", "resolved": "https://registry.npmjs.org/@firebase/messaging-types/-/messaging-types-0.5.0.tgz", "integrity": "sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg==", - "dev": true + "dev": true, + "requires": {} }, "@firebase/performance": { "version": "0.4.2", @@ -20912,7 +20917,8 @@ "version": "0.3.13", "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.3.13.tgz", "integrity": "sha512-pL7b8d5kMNCCL0w9hF7pr16POyKkb3imOW7w0qYrhBnbyJTdVxMWZhb0HxCFyQWC0w3EiIFFmxoz8NTFZDEFog==", - "dev": true + "dev": true, + "requires": {} }, "@firebase/util": { "version": "0.3.2", @@ -21625,7 +21631,8 @@ "version": "5.3.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", - "dev": true + "dev": true, + "requires": {} }, "adjust-sourcemap-loader": { "version": "3.0.0", @@ -21708,13 +21715,15 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", - "dev": true + "dev": true, + "requires": {} }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "dev": true, + "requires": {} }, "alphanum-sort": { "version": "1.0.2", @@ -31854,9 +31863,9 @@ } }, "sdf-2d": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/sdf-2d/-/sdf-2d-0.6.2.tgz", - "integrity": "sha512-VUeToQdZn96ZhliHTRcfHYGgQ/4TyUDicy6GaUug1skZdxmh/er9KRcihRIVjyiJg/6DGY87J71y+CcygwZqwA==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/sdf-2d/-/sdf-2d-0.7.0.tgz", + "integrity": "sha512-ZEpjVmCUVVndOI2axY0ZyGpkw1IYPdxiaxGGsN4b5hjKnPZKapc28405vn0az8H0CyLem5eRbECWix0anRC58A==", "dev": true, "requires": { "gl-matrix": "^3.3.0", diff --git a/frontend/package.json b/frontend/package.json index 19de44e..d106385 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -47,7 +47,7 @@ "resolve-url-loader": "^3.1.1", "sass": "^1.27.0", "sass-loader": "^8.0.2", - "sdf-2d": "^0.6.3", + "sdf-2d": "^0.7.0", "shared": "file:../shared", "socket.io-client": "^2.3.1", "socket.io-msgpack-parser": "^2.0.0", diff --git a/frontend/src/scripts/commands/generators/keyboard-listener.ts b/frontend/src/scripts/commands/generators/keyboard-listener.ts index bc82bac..8e858f9 100644 --- a/frontend/src/scripts/commands/generators/keyboard-listener.ts +++ b/frontend/src/scripts/commands/generators/keyboard-listener.ts @@ -1,6 +1,5 @@ import { vec2 } from 'gl-matrix'; import { CommandGenerator, MoveActionCommand } from 'shared'; -import { OptionsHandler } from '../../options-handler'; export class KeyboardListener extends CommandGenerator { private keysDown: Set = new Set(); @@ -35,7 +34,7 @@ export class KeyboardListener extends CommandGenerator { if (vec2.squaredLength(movement) > 0) { vec2.normalize(movement, movement); } - this.sendCommandToSubcribers(new MoveActionCommand(movement)); + this.sendCommandToSubscribers(new MoveActionCommand(movement)); } private normalize(key: string): string { diff --git a/frontend/src/scripts/commands/generators/mouse-listener.ts b/frontend/src/scripts/commands/generators/mouse-listener.ts index 61e248f..fcc21ab 100644 --- a/frontend/src/scripts/commands/generators/mouse-listener.ts +++ b/frontend/src/scripts/commands/generators/mouse-listener.ts @@ -10,14 +10,14 @@ export class MouseListener extends CommandGenerator { const position = this.positionFromEvent(event); if (event.button == 0) { - this.sendCommandToSubcribers(new SecondaryActionCommand(position)); + this.sendCommandToSubscribers(new SecondaryActionCommand(position)); } }); target.addEventListener('contextmenu', (event: MouseEvent) => { event.preventDefault(); const position = this.positionFromEvent(event); - this.sendCommandToSubcribers(new TernaryActionCommand(position)); + this.sendCommandToSubscribers(new TernaryActionCommand(position)); }); } diff --git a/frontend/src/scripts/commands/generators/touch-joystick-listener.ts b/frontend/src/scripts/commands/generators/touch-joystick-listener.ts index dcd74ce..9321554 100644 --- a/frontend/src/scripts/commands/generators/touch-joystick-listener.ts +++ b/frontend/src/scripts/commands/generators/touch-joystick-listener.ts @@ -2,14 +2,15 @@ import { vec2 } from 'gl-matrix'; import { CommandGenerator, SecondaryActionCommand, - TernaryActionCommand, MoveActionCommand, last, } from 'shared'; import { Game } from '../../game'; -import { OptionsHandler } from '../../options-handler'; export class TouchJoystickListener extends CommandGenerator { + private readonly deadZone = 8; + private readonly deltaScaling = 0.4; + private joystick: HTMLElement; private joystickButton: HTMLElement; @@ -35,50 +36,47 @@ export class TouchJoystickListener extends CommandGenerator { last(event.touches)!.clientX, last(event.touches)!.clientY, ); - this.sendCommandToSubcribers( + this.sendCommandToSubscribers( new SecondaryActionCommand(this.game.displayToWorldCoordinates(center)), ); + } else { + this.touchStartPosition = vec2.fromValues( + event.touches[0].clientX, + event.touches[0].clientY, + ); } }); target.addEventListener('touchmove', (event: TouchEvent) => { event.preventDefault(); - if (!this.isJoystickActive) { - this.isJoystickActive = true; - this.overlay.appendChild(this.joystick); - this.touchStartPosition = vec2.fromValues( - event.touches[0].clientX, - event.touches[0].clientY, - ); - this.joystickButton.style.transform = `translateX(-50%) translateY(-50%)`; - this.joystick.style.transform = `translateX(${this.touchStartPosition.x}px) translateY(${this.touchStartPosition.y}px) translateX(-50%) translateY(-50%)`; - } - const touchPosition = vec2.fromValues( event.touches[0].clientX, event.touches[0].clientY, ); - const movement = vec2.subtract( - vec2.create(), - touchPosition, - this.touchStartPosition, - ); + const delta = vec2.subtract(vec2.create(), touchPosition, this.touchStartPosition); + vec2.scale(delta, delta, this.deltaScaling); + const deltaLength = vec2.length(delta); + + if (!this.isJoystickActive && deltaLength > this.deadZone) { + this.isJoystickActive = true; + this.overlay.appendChild(this.joystick); + this.joystickButton.style.transform = `translateX(-50%) translateY(-50%)`; + this.joystick.style.transform = `translateX(${this.touchStartPosition.x}px) translateY(${this.touchStartPosition.y}px) translateX(-50%) translateY(-50%)`; + } - vec2.scale(movement, movement, 1 / 3); - const length = vec2.length(movement); const maxLength = 20; - vec2.scale(movement, movement, Math.min(1, maxLength / length)); - this.joystickButton.style.transform = `translateX(${movement.x}px) translateY(${movement.y}px) translateX(-50%) translateY(-50%)`; + vec2.scale(delta, delta, Math.min(1, maxLength / deltaLength)); + this.joystickButton.style.transform = `translateX(${delta.x}px) translateY(${delta.y}px) translateX(-50%) translateY(-50%)`; - vec2.set(movement, movement.x, -movement.y); - if (length > 10) { - this.sendCommandToSubcribers( - new MoveActionCommand(vec2.normalize(movement, movement)), + vec2.set(delta, delta.x, -delta.y); + if (deltaLength > this.deadZone) { + this.sendCommandToSubscribers( + new MoveActionCommand(vec2.normalize(delta, delta)), ); } else { - this.sendCommandToSubcribers(new MoveActionCommand(vec2.create())); + this.sendCommandToSubscribers(new MoveActionCommand(vec2.create())); } }); @@ -90,13 +88,13 @@ export class TouchJoystickListener extends CommandGenerator { event.changedTouches[0].clientX, event.changedTouches[0].clientY, ); - this.sendCommandToSubcribers( + this.sendCommandToSubscribers( new SecondaryActionCommand(this.game.displayToWorldCoordinates(center)), ); } else if (event.touches.length === 0) { this.isJoystickActive = false; this.joystick.parentElement?.removeChild(this.joystick); - this.sendCommandToSubcribers(new MoveActionCommand(vec2.create())); + this.sendCommandToSubscribers(new MoveActionCommand(vec2.create())); } }); } diff --git a/frontend/src/scripts/handle-full-screen.ts b/frontend/src/scripts/handle-full-screen.ts index 791cd2f..66b6122 100644 --- a/frontend/src/scripts/handle-full-screen.ts +++ b/frontend/src/scripts/handle-full-screen.ts @@ -10,7 +10,7 @@ export const handleFullScreen = ( return; } - let isInFullScreen = (): boolean => document.fullscreenElement !== null; + const isInFullScreen = (): boolean => document.fullscreenElement !== null; const showButtons = () => { minimizeButton.style.visibility = isInFullScreen() ? 'visible' : 'hidden'; diff --git a/frontend/src/scripts/landing-page-background.ts b/frontend/src/scripts/landing-page-background.ts index 368259e..8bcbf37 100644 --- a/frontend/src/scripts/landing-page-background.ts +++ b/frontend/src/scripts/landing-page-background.ts @@ -47,8 +47,6 @@ export class LandingPageBackground { { shadowTraceCount: 16, paletteSize: 1, - }, - { ambientLight: rgb(0, 0, 0), lightCutoffDistance: settings.lightCutoffDistance, textures: { diff --git a/frontend/src/scripts/start-animation.ts b/frontend/src/scripts/start-animation.ts index b5556c5..c4a8e49 100644 --- a/frontend/src/scripts/start-animation.ts +++ b/frontend/src/scripts/start-animation.ts @@ -44,8 +44,6 @@ export const startAnimation = async ( { shadowTraceCount: 16, paletteSize: settings.palette.length, - }, - { colorPalette: settings.palette, enableHighDpiRendering: true, lightCutoffDistance: settings.lightCutoffDistance, diff --git a/package.json b/package.json index deaa1cd..411a30f 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,7 @@ "scripts": { "build": "cd shared && npm run build && cd ../frontend && npm run build && cd ../backend && npm run build", "lint": "eslint './**/src/**/*.{js,ts,json}' --fix", - "frontend": "yarn workspace decla.red-frontend start", "init": "cd shared && npm install && cd ../frontend && npm install && cd ../backend && npm install", - "shared": "yarn workspace shared start", - "backend": "yarn workspace declared-server start", "start": "concurrently --kill-others-on-fail \"cd shared && npm start\" \"cd backend && npm start\" \"cd frontend && npm start\"" } } diff --git a/shared/src/commands/command-generator.ts b/shared/src/commands/command-generator.ts index b4bf67d..fb576d1 100644 --- a/shared/src/commands/command-generator.ts +++ b/shared/src/commands/command-generator.ts @@ -8,7 +8,7 @@ export class CommandGenerator { this.subscribers.push(subscriber); } - protected sendCommandToSubcribers(command: Command): void { + protected sendCommandToSubscribers(command: Command): void { this.subscribers.forEach((s) => s.sendCommand(command)); } }