From b77435780755a849d1a841b096c00e941f800253 Mon Sep 17 00:00:00 2001 From: schmelczerandras Date: Wed, 4 Nov 2020 18:54:57 +0100 Subject: [PATCH] Fix issues --- backend/src/default-options.ts | 2 +- backend/src/players/player.ts | 2 +- frontend/src/index.ts | 16 ++++++---- frontend/src/main.scss | 11 +------ .../src/scripts/commands/touch-listener.ts | 29 +++++++++---------- frontend/src/scripts/game.ts | 3 +- .../src/scripts/objects/projectile-view.ts | 6 +--- frontend/src/scripts/shapes/blob-shape.ts | 2 +- frontend/src/scripts/shapes/planet-shape.ts | 2 +- frontend/src/scripts/start-animation.ts | 20 ++----------- frontend/webpack.config.js | 2 +- 11 files changed, 35 insertions(+), 60 deletions(-) diff --git a/backend/src/default-options.ts b/backend/src/default-options.ts index a7afbb8..1e34d21 100644 --- a/backend/src/default-options.ts +++ b/backend/src/default-options.ts @@ -4,7 +4,7 @@ export const defaultOptions: Options = { port: 3000, name: 'Test server', playerLimit: 16, - npcCount: 8, + npcCount: 16, seed: Math.random(), scoreLimit: 500, worldSize: 8000, diff --git a/backend/src/players/player.ts b/backend/src/players/player.ts index a1b52b4..6ed519d 100644 --- a/backend/src/players/player.ts +++ b/backend/src/players/player.ts @@ -124,7 +124,7 @@ export class Player extends PlayerBase { } if (this.timeSinceLastMessage > this.messageInterval) { - const viewArea = calculateViewArea(this.center, this.aspectRatio, 1.5); + const viewArea = calculateViewArea(this.center, this.aspectRatio, 1.2); const bb = new BoundingBox(); bb.topLeft = viewArea.topLeft; bb.size = viewArea.size; diff --git a/frontend/src/index.ts b/frontend/src/index.ts index 3d7cf1a..52661bb 100644 --- a/frontend/src/index.ts +++ b/frontend/src/index.ts @@ -93,14 +93,20 @@ const toggleSettings = () => { }; const applyServerContainerShadows = () => { + const topShadow = 'inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4)'; + const bottomShadow = 'inset 0 8px 8px -8px rgba(0, 0, 0, 0.4)'; + const { scrollHeight, clientHeight, scrollTop } = serverContainer; if (scrollHeight > clientHeight) { - serverContainer.className = 'scroll'; - if (scrollTop === 0) { - serverContainer.className += ' top'; - } else if (scrollTop + clientHeight === scrollHeight) { - serverContainer.className += ' bottom'; + if (scrollTop <= 0) { + serverContainer.style.boxShadow = topShadow; + } else if (scrollTop + clientHeight >= scrollHeight) { + serverContainer.style.boxShadow = bottomShadow; + } else { + serverContainer.style.boxShadow = topShadow + ',' + bottomShadow; } + } else { + serverContainer.style.boxShadow = ''; } }; diff --git a/frontend/src/main.scss b/frontend/src/main.scss index bb5fc6d..4231090 100644 --- a/frontend/src/main.scss +++ b/frontend/src/main.scss @@ -33,6 +33,7 @@ h1 { &, * { font-family: 'Comfortaa', sans-serif; + font-weight: 400; } font-size: 6rem; text-align: center; @@ -313,16 +314,6 @@ body { } transition: box-shadow $animation-time; - &.scroll { - box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4), - inset 0 8px 8px -8px rgba(0, 0, 0, 0.4); - &.top { - box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.4); - } - &.bottom { - box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.4); - } - } } .full-screen-controllers { diff --git a/frontend/src/scripts/commands/touch-listener.ts b/frontend/src/scripts/commands/touch-listener.ts index 09c5c53..7f69f61 100644 --- a/frontend/src/scripts/commands/touch-listener.ts +++ b/frontend/src/scripts/commands/touch-listener.ts @@ -1,10 +1,5 @@ import { vec2 } from 'gl-matrix'; -import { - CommandGenerator, - SecondaryActionCommand, - MoveActionCommand, - last, -} from 'shared'; +import { CommandGenerator, MoveActionCommand, last, PrimaryActionCommand } from 'shared'; import { Game } from '../game'; export class TouchListener extends CommandGenerator { @@ -16,7 +11,11 @@ export class TouchListener extends CommandGenerator { private isJoystickActive = false; private touchStartPosition!: vec2; - constructor(private overlay: HTMLElement, private readonly game: Game) { + constructor( + private target: HTMLElement, + private overlay: HTMLElement, + private readonly game: Game, + ) { super(); this.joystick = document.createElement('div'); @@ -24,9 +23,9 @@ export class TouchListener extends CommandGenerator { this.joystickButton = document.createElement('div'); this.joystick.appendChild(this.joystickButton); - addEventListener('touchstart', this.touchStartListener); - addEventListener('touchmove', this.touchMoveListener); - addEventListener('touchend', this.touchEndListener); + target.addEventListener('touchstart', this.touchStartListener); + target.addEventListener('touchmove', this.touchMoveListener); + target.addEventListener('touchend', this.touchEndListener); } private touchStartListener = (event: TouchEvent) => { @@ -37,7 +36,7 @@ export class TouchListener extends CommandGenerator { last(event.touches)!.clientY, ); this.sendCommandToSubscribers( - new SecondaryActionCommand(this.game.displayToWorldCoordinates(center)), + new PrimaryActionCommand(this.game.displayToWorldCoordinates(center)), ); } else { this.touchStartPosition = vec2.fromValues( @@ -87,7 +86,7 @@ export class TouchListener extends CommandGenerator { event.changedTouches[0].clientY, ); this.sendCommandToSubscribers( - new SecondaryActionCommand(this.game.displayToWorldCoordinates(center)), + new PrimaryActionCommand(this.game.displayToWorldCoordinates(center)), ); } else if (event.touches.length === 0) { this.isJoystickActive = false; @@ -97,8 +96,8 @@ export class TouchListener extends CommandGenerator { }; public destroy() { - removeEventListener('touchstart', this.touchStartListener); - removeEventListener('touchmove', this.touchMoveListener); - removeEventListener('touchend', this.touchEndListener); + this.target.removeEventListener('touchstart', this.touchStartListener); + this.target.removeEventListener('touchmove', this.touchMoveListener); + this.target.removeEventListener('touchend', this.touchEndListener); } } diff --git a/frontend/src/scripts/game.ts b/frontend/src/scripts/game.ts index 9e74750..7ec4d00 100644 --- a/frontend/src/scripts/game.ts +++ b/frontend/src/scripts/game.ts @@ -25,7 +25,6 @@ import { startAnimation } from './start-animation'; import { PlayerDecision } from './join-form-handler'; import { GameObjectContainer } from './objects/game-object-container'; import parser from 'socket.io-msgpack-parser'; -import { VibrationHandler } from './vibration-handler'; export class Game extends CommandReceiver { public gameObjects = new GameObjectContainer(this); @@ -61,7 +60,7 @@ export class Game extends CommandReceiver { this.keyboardListener = new KeyboardListener(); this.mouseListener = new MouseListener(this); - this.touchListener = new TouchListener(this.overlay, this); + this.touchListener = new TouchListener(this.overlay, this.overlay, this); } private initialize() { diff --git a/frontend/src/scripts/objects/projectile-view.ts b/frontend/src/scripts/objects/projectile-view.ts index ef97cb9..4961be7 100644 --- a/frontend/src/scripts/objects/projectile-view.ts +++ b/frontend/src/scripts/objects/projectile-view.ts @@ -1,11 +1,10 @@ import { vec2 } from 'gl-matrix'; -import { CircleLight, ColorfulCircle, Renderer } from 'sdf-2d'; +import { CircleLight, Renderer } from 'sdf-2d'; import { CharacterTeam, Id, ProjectileBase, settings, UpdateProperty } from 'shared'; import { Vec2Extrapolator } from '../helper/vec2-extrapolator'; import { ViewObject } from './view-object'; export class ProjectileView extends ProjectileBase implements ViewObject { - private circle: ColorfulCircle; private light: CircleLight; private centerExtrapolator: Vec2Extrapolator; @@ -18,7 +17,6 @@ export class ProjectileView extends ProjectileBase implements ViewObject { strength: number, ) { super(id, center, radius, team, strength); - this.circle = new ColorfulCircle(center, radius / 2, settings.colorIndices[team]); this.light = new CircleLight( center, settings.paletteDim[settings.colorIndices[team]], @@ -37,7 +35,6 @@ export class ProjectileView extends ProjectileBase implements ViewObject { super.step(deltaTimeInSeconds); this.center = this.centerExtrapolator.getValue(deltaTimeInSeconds); - this.circle.center = this.center; this.light.center = this.center; this.light.intensity = (0.15 * this.strength) / settings.projectileMaxStrength; } @@ -49,7 +46,6 @@ export class ProjectileView extends ProjectileBase implements ViewObject { overlay: HTMLElement, shouldChangeLayout: boolean, ): void { - renderer.addDrawable(this.circle); renderer.addDrawable(this.light); } } diff --git a/frontend/src/scripts/shapes/blob-shape.ts b/frontend/src/scripts/shapes/blob-shape.ts index 5d0f793..7e0d500 100644 --- a/frontend/src/scripts/shapes/blob-shape.ts +++ b/frontend/src/scripts/shapes/blob-shape.ts @@ -75,7 +75,7 @@ export class BlobShape extends Drawable { color: 'blobColors', }, uniformCountMacroName: 'BLOB_COUNT', - shaderCombinationSteps: [], + shaderCombinationSteps: [0, 1, 2, 8], empty: new BlobShape(0), }; diff --git a/frontend/src/scripts/shapes/planet-shape.ts b/frontend/src/scripts/shapes/planet-shape.ts index b28e75d..bc7a129 100644 --- a/frontend/src/scripts/shapes/planet-shape.ts +++ b/frontend/src/scripts/shapes/planet-shape.ts @@ -107,7 +107,7 @@ export class PlanetShape extends PolygonFactory(settings.planetEdgeCount, 0) { colorMixQ: 'planetColorMixQ', }, uniformCountMacroName: `PLANET_COUNT`, - shaderCombinationSteps: [0, 1, 2, 3, 8, 16], + shaderCombinationSteps: [0, 1, 2, 3], empty: new PlanetShape(new Array(settings.planetEdgeCount).fill(vec2.create()), 0), }; diff --git a/frontend/src/scripts/start-animation.ts b/frontend/src/scripts/start-animation.ts index c4a8e49..2b50303 100644 --- a/frontend/src/scripts/start-animation.ts +++ b/frontend/src/scripts/start-animation.ts @@ -1,8 +1,6 @@ import { CircleLight, - ColorfulCircle, FilteringOptions, - Flashlight, Renderer, runAnimation, WrapOptions, @@ -19,26 +17,12 @@ export const startAnimation = async ( await runAnimation( canvas, [ - { - ...PlanetShape.descriptor, - shaderCombinationSteps: [0, 1, 2, 3], - }, - { - ...BlobShape.descriptor, - shaderCombinationSteps: [0, 1, 2, 8], - }, - { - ...ColorfulCircle.descriptor, - shaderCombinationSteps: [0, 2, 16], - }, + PlanetShape.descriptor, + BlobShape.descriptor, { ...CircleLight.descriptor, shaderCombinationSteps: [0, 1, 2, 4, 8, 16], }, - { - ...Flashlight.descriptor, - shaderCombinationSteps: [0], - }, ], draw, { diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 255841e..c4bcfa1 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -20,7 +20,7 @@ module.exports = { new MiniCssExtractPlugin(), new HtmlWebpackPlugin({ template: './src/index.html', - inlineSource: '.(css)$', + //inlineSource: '.(css)$', }), new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin), new HtmlWebpackInlineSVGPlugin({