Fix issues

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

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