Fix issues

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,

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;

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) {
-    if (scrollTop === 0) {
+      serverContainer.style.boxShadow = topShadow;
-      serverContainer.className += ' top';
+    } else if (scrollTop + clientHeight >= scrollHeight) {
-    } else if (scrollTop + clientHeight === scrollHeight) {
+      serverContainer.style.boxShadow = bottomShadow;
-      serverContainer.className += ' bottom';
+    } else {
+      serverContainer.style.boxShadow = topShadow + ',' + bottomShadow;
     }
+  } else {
+    serverContainer.style.boxShadow = '';
   }
 };
 

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 {

frontend/src/scripts/commands/touch-listener.ts

@@ -1,10 +1,5 @@
 import { vec2 } from 'gl-matrix';
-import {
+import { CommandGenerator, MoveActionCommand, last, PrimaryActionCommand } from 'shared';
-  CommandGenerator,
-  SecondaryActionCommand,
-  MoveActionCommand,
-  last,
-} 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);
+    target.addEventListener('touchstart', this.touchStartListener);
-    addEventListener('touchmove', this.touchMoveListener);
+    target.addEventListener('touchmove', this.touchMoveListener);
-    addEventListener('touchend', this.touchEndListener);
+    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);
+    this.target.removeEventListener('touchstart', this.touchStartListener);
-    removeEventListener('touchmove', this.touchMoveListener);
+    this.target.removeEventListener('touchmove', this.touchMoveListener);
-    removeEventListener('touchend', this.touchEndListener);
+    this.target.removeEventListener('touchend', this.touchEndListener);
   }
 }

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() {

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);
   }
 }

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),
   };
 

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),
   };
 

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,
-        ...PlanetShape.descriptor,
+      BlobShape.descriptor,
-        shaderCombinationSteps: [0, 1, 2, 3],
-      },
-      {
-        ...BlobShape.descriptor,
-        shaderCombinationSteps: [0, 1, 2, 8],
-      },
-      {
-        ...ColorfulCircle.descriptor,
-        shaderCombinationSteps: [0, 2, 16],
-      },
       {
         ...CircleLight.descriptor,
         shaderCombinationSteps: [0, 1, 2, 4, 8, 16],
       },
-      {
-        ...Flashlight.descriptor,
-        shaderCombinationSteps: [0],
-      },
     ],
     draw,
     {

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({