feat(decorations): add tree decoration

backend/pb_migrations/1735474933_updated_tracks.js

@@ -0,0 +1,25 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((app) => {
+  const collection = app.findCollectionByNameOrId("pbc_327047008")
+
+  // add field
+  collection.fields.addAt(5, new Field({
+    "hidden": false,
+    "id": "json1404804573",
+    "maxSize": 0,
+    "name": "decorations",
+    "presentable": false,
+    "required": false,
+    "system": false,
+    "type": "json"
+  }))
+
+  return app.save(collection)
+}, (app) => {
+  const collection = app.findCollectionByNameOrId("pbc_327047008")
+
+  // remove field
+  collection.fields.removeById("json1404804573")
+
+  return app.save(collection)
+})

src/app/common/services/track.service.ts

@@ -84,6 +84,8 @@ export class TrackService {
                     stockableTrack.builderVersion = track['builderVersion'];
                     // biome-ignore lint/complexity/useLiteralKeys: <explanation>
                     stockableTrack.gates = track['gates'];
+                    // biome-ignore lint/complexity/useLiteralKeys: <explanation>
+                    stockableTrack.decorations = track['decorations'] || [];
                     return stockableTrack.toTrack();
                 });
             })

src/app/game/actors/decoration.ts

@@ -0,0 +1,81 @@
+import {
+    Actor,
+    type Engine,
+    type Vector,
+    vec,
+    GraphicsGroup,
+    CircleCollider,
+    ColliderComponent,
+    CollisionType,
+    Sprite,
+    Color
+} from 'excalibur';
+import { ScreenManager } from '../utils/screen-manager';
+import { Resources } from '../resources';
+import { Config } from '../config';
+
+export class Decoration extends Actor {
+    constructor(position: Vector, type: 'tree', sizeRatio: number) {
+        const treeSize = (sizeRatio / 100) * Config.DECORATION_TREE_SIZE;
+        const shadowSize = (sizeRatio / 100) * Resources.TreeShadow.width;
+        super({
+            anchor: vec(0, 0),
+            pos: position,
+            height: treeSize,
+            width: treeSize,
+            collisionType: CollisionType.Active,
+            z: treeSize,
+            color: Color.Pink
+        });
+
+        this.collider = new ColliderComponent(new CircleCollider({ radius: treeSize }));
+
+        /*
+        const graphicsGroup = new GraphicsGroup({
+            members: [
+                {
+                    graphic: new Sprite({
+                        image: Resources.TreeShadow,
+                        destSize: {
+                            width: shadowSize,
+                            height: shadowSize
+                        }
+                    }),
+                    useBounds: false,
+                    offset: vec(0, - (shadowSize - treeSize))
+                },
+                {
+                    graphic: new Sprite({
+                        image: Resources.Tree,
+                        destSize: {
+                            width: treeSize,
+                            height: treeSize
+                        }
+                    }),
+                    offset: vec(0, 0)
+                }
+            ]
+        });
+
+        this.graphics.use(graphicsGroup);
+        */
+
+        this.listenExitViewportEvent();
+    }
+
+    override update(): void {
+        if (ScreenManager.isNearScreen(this, this.scene!.camera) && !this.children?.length) {
+            // this.buildSpectators();
+        }
+    }
+
+    private listenExitViewportEvent(): void {
+        this.on('exitviewport', () => this.checkForKill());
+    }
+
+    private checkForKill(): void {
+        if (ScreenManager.isBehind(this.scene!.camera.pos, this.pos)) {
+            this.kill();
+        }
+    }
+}

src/app/game/actors/spectator.ts

@@ -29,7 +29,6 @@ export class Spectator extends Actor {
             rotation: toRadians(rotation),
             collisionType: CollisionType.Active
         });
-
         this.collider = new ColliderComponent(new CircleCollider({ radius: Config.SPECTATOR_WIDTH / 2 }));
 
         this.originalPos = this.pos;

src/app/game/config.ts

@@ -223,4 +223,11 @@ export class Config {
         Resources.SpectatorHit2Sound,
         Resources.SpectatorHit3Sound
     ];
+
+    static DECORATIONS_AMOUNT_MAX_AMOUNT = 100;
+    static DECORATIONS_SPRITES = {
+        tree: Resources.Tree.toSprite()
+    };
+
+    static DECORATION_TREE_SIZE = 65;
 }

src/app/game/game.ts

@@ -45,6 +45,9 @@ export class Game extends Engine {
         Resources.Spectator4,
         Resources.SpectatorShadow,
 
+        Resources.Tree,
+        Resources.TreeShadow,
+
         Resources.WinterSound,
         Resources.StartRaceSound,
         Resources.FinishRaceSound,
@@ -82,7 +85,8 @@ export class Game extends Engine {
             maxFps: 60,
             canvasElementId: 'game',
             suppressConsoleBootMessage: true,
-            antialiasing: false
+            antialiasing: true,
+            suppressHiDPIScaling: true
         });
 
         this.raceConfig = raceConfig;

src/app/game/models/stockable-decoration.ts

@@ -0,0 +1,13 @@
+export class StockableDecoration {
+    public x: number;
+    public y: number;
+    public type: 'tree';
+    public sizeRatio: number;
+
+    constructor(x: number, y: number, type: 'tree', sizeRatio: number) {
+        this.x = x;
+        this.y = y;
+        this.type = type;
+        this.sizeRatio = sizeRatio;
+    }
+}

src/app/game/models/stockable-track.ts

@@ -1,4 +1,5 @@
 import { TrackBuilder } from '../utils/track-builder';
+import type { StockableDecoration } from './stockable-decoration';
 import type { StockableGate } from './stockable-gate';
 import type { Track } from './track';
 import type { TrackStyles } from './track-styles.enum';
@@ -10,21 +11,24 @@ export class StockableTrack {
     public style: TrackStyles;
     public date: Date;
     public gates: StockableGate[];
+    public decorations: StockableDecoration[];
 
     constructor(
         id?: string,
         builderVersion?: number,
         name?: string,
         style?: TrackStyles,
         date?: Date,
-        gates?: StockableGate[]
+        gates?: StockableGate[],
+        decorations?: StockableDecoration[]
     ) {
         this.id = id;
         this.name = name!;
         this.builderVersion = builderVersion;
         this.style = style!;
         this.date = date!;
         this.gates = gates!;
+        this.decorations = decorations!;
     }
 
     public toTrack(): Track {

src/app/game/models/track.ts

@@ -1,3 +1,4 @@
+import type { StockableDecoration } from './stockable-decoration';
 import type { StockableGate } from './stockable-gate';
 import { StockableTrack } from './stockable-track';
 import type { TrackStyles } from './track-styles.enum';
@@ -9,29 +10,40 @@ export class Track {
     public style: TrackStyles;
     public date: Date;
     public gates: StockableGate[];
+    public decorations: StockableDecoration[];
 
     constructor(
         id?: string,
         builderVersion?: number,
         name?: string,
         style?: TrackStyles,
         date?: Date,
-        gates?: StockableGate[]
+        gates?: StockableGate[],
+        decorations?: StockableDecoration[]
     ) {
         this.id = id;
         this.builderVersion = builderVersion;
         this.name = name!;
         this.style = style!;
         this.date = date!;
         this.gates = gates!;
+        this.decorations = decorations!;
     }
 
     public get fullName(): string {
         return `${Track.formatTrackName(this.name)} - ${this.style}`;
     }
 
     public toStockable(): StockableTrack {
-        return new StockableTrack(this.id, this.builderVersion, this.name, this.style, this.date, this.gates);
+        return new StockableTrack(
+            this.id,
+            this.builderVersion,
+            this.name,
+            this.style,
+            this.date,
+            this.gates,
+            this.decorations
+        );
     }
 
     private static formatTrackName(name: string): string {

src/app/game/resources.ts

@@ -34,6 +34,9 @@ const Resources = {
     Spectator4: new ImageSource('./assets/images/sprites/spectator_4.png'),
     SpectatorShadow: new ImageSource('./assets/images/sprites/spectator_shadow.png'),
 
+    Tree: new ImageSource('./assets/images/sprites/tree.png'),
+    TreeShadow: new ImageSource('./assets/images/sprites/tree_shadow.png'),
+
     WinterSound: new Sound('./assets/sounds/winter.mp3'),
     FinishRaceSound: new Sound('./assets/sounds/finish_race.mp3'),
     StartRaceSound: new Sound('./assets/sounds/start_race.mp3'),

src/app/game/scenes/race.ts

@@ -19,6 +19,7 @@ import { SpectatorGroup } from '../actors/spectator-group';
 import { RaceUiManager } from '../utils/race-ui-manager';
 import type { RaceConfig } from '../models/race-config';
 import { TrackBuilder } from '../utils/track-builder';
+import { Decoration } from '../actors/decoration';
 
 export class Race extends Scene {
     public skier?: Skier;
@@ -291,6 +292,18 @@ export class Race extends Scene {
             this.gates.push(gate);
             this.add(gate);
         }
+
+        if (track.decorations?.length) {
+            for (const stockableDecoration of track.decorations) {
+                const decoration = new Decoration(
+                    vec(stockableDecoration.x, stockableDecoration.y),
+                    stockableDecoration.type,
+                    stockableDecoration.sizeRatio
+                );
+
+                this.add(decoration);
+            }
+        }
     }
 
     private getSkierConfig(trackStyle: TrackStyles): SkierConfig {

src/app/game/utils/particles-builder.ts

@@ -12,9 +12,9 @@ export class ParticlesBuilder {
                 maxAngle: 6,
                 opacity: 0.7,
                 life: 1000,
-                maxSize: 5,
-                minSize: 5,
-                startSize: 5,
+                maxSize: 2,
+                minSize: 2,
+                startSize: 2,
                 endSize: 1,
                 beginColor: Color.fromRGB(23, 106, 170, 0.1),
                 endColor: Color.Transparent