Fix issues

frontend/src/scripts/game.ts

@@ -81,6 +81,7 @@ export class Game extends CommandReceiver {
     this.lastAnnouncementText = '';
     this.overlay.appendChild(this.progressBar);
     this.announcementText.innerText = '';
+    this.timeScaling = 1;
     this.overlay.appendChild(this.announcementText);
 
     this.socket = io(this.playerDecision.server, {
@@ -128,16 +129,16 @@ export class Game extends CommandReceiver {
 
   private lastGameState?: UpdateGameState;
   private isEnding = false;
+  private timeScaling = 1;
+
   private lastAnnouncementText = '';
   protected commandExecutors: CommandExecutors = {
-    [ServerAnnouncement.type]: (c: ServerAnnouncement) =>
-      (this.lastAnnouncementText = c.text),
-    [UpdateGameState.type]: (c: UpdateGameState) => (this.lastGameState = c),
-    [GameEndCommand.type]: (c: GameEndCommand) => {
-      const team = `<span class="${c.winningTeam}">${c.winningTeam}</span>`;
-      this.lastAnnouncementText = `Team ${team} won 🎉`;
-      this.isEnding = true;
+    [ServerAnnouncement.type]: (c: ServerAnnouncement) => {
+      this.lastAnnouncementText = c.text;
+      this.timeSinceLastAnnouncement = 0;
     },
+    [UpdateGameState.type]: (c: UpdateGameState) => (this.lastGameState = c),
+    [GameEndCommand.type]: () => (this.isEnding = true),
     [UpdateOtherPlayerDirections.type]: (c: UpdateOtherPlayerDirections) =>
       (this.lastOtherPlayerDirections = c),
     [GameStartCommand.type]: this.initialize.bind(this),
@@ -255,6 +256,7 @@ export class Game extends CommandReceiver {
     this.isActive = false;
   }
 
+  private timeSinceLastAnnouncement = 0;
   private framesSinceLastLayoutUpdate = 0;
   private gameLoop(
     renderer: Renderer,
@@ -271,10 +273,19 @@ export class Game extends CommandReceiver {
       this.draw();
     }
 
+    if ((this.timeSinceLastAnnouncement += deltaTime) > 0.5) {
+      this.lastAnnouncementText = '';
+    }
+
+    if (this.isEnding) {
+      this.timeScaling *= Math.pow(settings.endGameDeltaScaling, deltaTime);
+      deltaTime /= this.timeScaling;
+    }
+
     this.renderer = renderer;
 
     this.socketReceiver.sendQueuedCommands();
-    this.gameObjects.stepObjects(this.isEnding ? 0 : deltaTime);
+    this.gameObjects.stepObjects(deltaTime);
     this.gameObjects.drawObjects(this.renderer, this.overlay, shouldChangeLayout);
 
     return this.isActive;

frontend/src/scripts/join-form-handler.ts

@@ -15,19 +15,20 @@ export class JoinFormHandler {
   private waitingForDecision: Promise<PlayerDecision>;
   private resolvePlayerDecision!: (d: PlayerDecision) => void;
   private pollServersTimer: any;
+  private keyUpListener = (e: KeyboardEvent) => {
+    if (e.key === 'enter') {
+      this.form.submit();
+    }
+  };
 
-  constructor(form: HTMLFormElement, private readonly container: HTMLElement) {
+  constructor(private form: HTMLFormElement, private readonly container: HTMLElement) {
     this.joinButton = form.querySelector('button[type="submit"]') as HTMLButtonElement;
     this.joinButton.disabled = true;
     this.waitingForDecision = new Promise((r) => (this.resolvePlayerDecision = r));
 
     new FormData(form);
 
-    document.addEventListener('keyup', (e) => {
-      if (e.key === 'enter') {
-        form.submit();
-      }
-    });
+    addEventListener('keyup', this.keyUpListener);
 
     form.onsubmit = (e) => {
       SoundHandler.play(Sounds.click);
@@ -54,6 +55,7 @@ export class JoinFormHandler {
   }
 
   private destroy() {
+    removeEventListener('keyup', this.keyUpListener);
     clearInterval(this.pollServersTimer);
     this.servers.forEach((s) => s.destroy());
   }

frontend/src/scripts/objects/camera.ts

@@ -7,7 +7,6 @@ import { ViewObject } from './view-object';
 
 export class Camera extends GameObject implements ViewObject {
   public center: vec2 = vec2.create();
-
   private aspectRatio?: number;
 
   constructor(private game: Game) {
@@ -15,12 +14,10 @@ export class Camera extends GameObject implements ViewObject {
   }
 
   public updateProperties(update: UpdateProperty[]): void {}
-
+  public step(deltaTimeInSeconds: number): void {}
   public beforeDestroy(): void {}
 
-  public step(deltaTimeInSeconds: number): void {}
-
-  public draw(renderer: Renderer, overlay: HTMLElement, shouldChangeLayout: boolean) {
+  public draw(renderer: Renderer) {
     const canvasAspectRatio = renderer.canvasSize.x / renderer.canvasSize.y;
     if (canvasAspectRatio !== this.aspectRatio) {
       this.aspectRatio = canvasAspectRatio;

frontend/src/scripts/objects/planet-view.ts

@@ -14,19 +14,17 @@ type FallingPoint = {
 
 export class PlanetView extends PlanetBase implements ViewObject {
   private shape: PlanetShape;
-  private ownershipProgess: HTMLElement;
+  private ownershipProgress: HTMLElement;
 
   constructor(id: Id, vertices: Array<vec2>, ownership: number) {
     super(id, vertices);
     this.shape = new PlanetShape(vertices, ownership);
     (this.shape as any).randomOffset = Random.getRandom();
 
-    this.ownershipProgess = document.createElement('div');
-    this.ownershipProgess.className = 'ownership';
+    this.ownershipProgress = document.createElement('div');
+    this.ownershipProgress.className = 'ownership';
   }
 
-  public updateProperties(update: UpdateProperty[]): void {}
-
   public step(deltaTimeInSeconds: number): void {
     this.shape.randomOffset += deltaTimeInSeconds / 4;
     this.shape.colorMixQ = this.ownership;
@@ -56,20 +54,26 @@ export class PlanetView extends PlanetBase implements ViewObject {
   }
 
   public beforeDestroy(): void {
-    this.ownershipProgess.parentElement?.removeChild(this.ownershipProgess);
+    this.ownershipProgress.parentElement?.removeChild(this.ownershipProgress);
     this.generatedPointElements.forEach((p) =>
       p.element.parentElement?.removeChild(p.element),
     );
   }
 
+  public updateProperties(update: UpdateProperty[]): void {
+    update.forEach((u) => {
+      this.ownership = u.propertyValue;
+    });
+  }
+
   public draw(
     renderer: Renderer,
     overlay: HTMLElement,
     shouldChangeLayout: boolean,
   ): void {
     if (shouldChangeLayout) {
-      if (!this.ownershipProgess.parentElement) {
-        overlay.appendChild(this.ownershipProgess);
+      if (!this.ownershipProgress.parentElement) {
+        overlay.appendChild(this.ownershipProgress);
       }
 
       const screenPosition = renderer.worldToDisplayCoordinates(this.center);
@@ -94,8 +98,8 @@ export class PlanetView extends PlanetBase implements ViewObject {
         (p) => p.timeToLive > 0,
       );
 
-      this.ownershipProgess.style.transform = `translateX(${screenPosition.x}px) translateY(${screenPosition.y}px) translateX(-50%) translateY(-50%)`;
-      this.ownershipProgess.style.background = this.getGradient();
+      this.ownershipProgress.style.transform = `translateX(${screenPosition.x}px) translateY(${screenPosition.y}px) translateX(-50%) translateY(-50%)`;
+      this.ownershipProgress.style.background = this.getGradient();
 
       if (this.lastGeneratedPoint !== undefined) {
         const element = document.createElement('div');

frontend/webpack.config.js

@@ -4,10 +4,11 @@ const TsConfigWebpackPlugin = require('ts-config-webpack-plugin');
 const HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserJSPlugin = require('terser-webpack-plugin');
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
 const Sass = require('sass');
 
-module.exports = {
+module.exports = (env, argv) => ({
   devServer: {
     host: '0.0.0.0',
     disableHostCheck: true,
@@ -18,9 +19,10 @@ module.exports = {
   plugins: [
     new CleanWebpackPlugin(),
     new MiniCssExtractPlugin(),
+    //new BundleAnalyzerPlugin(),
     new HtmlWebpackPlugin({
       template: './src/index.html',
-      //inlineSource: '.(css)$',
+      inlineSource: argv.mode === 'development' ? '' : '.(css)$',
     }),
     new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
     new HtmlWebpackInlineSVGPlugin({
@@ -31,7 +33,6 @@ module.exports = {
         },
       ],
     }),
-
     new TsConfigWebpackPlugin(),
   ],
   optimization: {
@@ -106,4 +107,4 @@ module.exports = {
       },
     ],
   },
-};
+});