show particles around gold notes

src/modules/GameEngine/Drawing/CanvasDrawing.ts

@@ -3,6 +3,7 @@ import { noDistanceNoteTypes } from 'consts';
 import { Note, NotesSection, PlayerNote } from 'interfaces';
 import { drawPlayerCanvas } from 'modules/GameEngine/Drawing/Elements/debugPlayerCanvas';
 import getNoteColor from 'modules/GameEngine/Drawing/Elements/utils/getNoteColor';
+import GoldNoteParticle from 'modules/GameEngine/Drawing/Particles/GoldNote';
 import SungTriangle from 'modules/GameEngine/Drawing/Particles/SungTriangle';
 import { Shaders } from 'modules/GameEngine/Drawing/Shaders/Shaders';
 import GameState from 'modules/GameEngine/GameState/GameState';
@@ -118,6 +119,7 @@ export default class CanvasDrawing {
 
     if (GraphicSetting.get() === 'high') {
       this.drawFlare(ctx, drawingData, displacements);
+      this.markGoldNotes(currentSection, drawingData);
     }
     false && drawPlayerCanvas(drawingData);
     false && debugPitches(ctx!, drawingData);
@@ -273,6 +275,15 @@ export default class CanvasDrawing {
     }
   };
 
+  private markGoldNotes = (section: NotesSection, drawingData: DrawingData) => {
+    const notesToMark = section.notes.filter((note) => note.type === 'star' || note.type === 'rapstar');
+
+    notesToMark.forEach((note) => {
+      const { x, y, w, h } = this.getNoteCoords(drawingData, note, note.pitch, true);
+      ParticleManager.add(new GoldNoteParticle(x, y + h / 2, w, drawingData.playerNumber, ParticleManager));
+    });
+  };
+
   private calculateDisplacements = (currentSection: NotesSection, drawingData: DrawingData) => {
     const displacements: Record<number, [number, number]> = {};
 

src/modules/GameEngine/Drawing/Particles/ExplodingNote.ts

@@ -24,7 +24,7 @@ export default class ExplodingNoteParticle implements Particle {
     const lightColor = tinycolor(color).lighten(15).toRgbString();
     const darkColor = tinycolor(color).darken(15).toRgbString();
 
-    const density = width / 8;
+    const density = width / 9;
     for (let i = 0; i < density; i++) {
       const rand = Math.random();
       let finalColor = color;
@@ -33,7 +33,7 @@ export default class ExplodingNoteParticle implements Particle {
 
       const finalY = y + 20 * (Math.random() - 0.5);
 
-      particleManager.add(new TriangleParticle(x + i * 5, finalY, finalColor, (density - i) / 10));
+      particleManager.add(new TriangleParticle(x + i * 9, finalY, finalColor, (density - i) / 10));
     }
   }
   public tick = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => {};

src/modules/GameEngine/Drawing/Particles/GoldNote.ts

@@ -0,0 +1,37 @@
+import GoldTriangle from 'modules/GameEngine/Drawing/Particles/GoldTriangle';
+import { randomInt } from 'modules/utils/randomValue';
+import tinycolor from 'tinycolor2';
+import ParticleManager from '../ParticleManager';
+import Particle from '../interfaces';
+import styles from '../styles';
+
+export default class GoldNoteParticle implements Particle {
+  public finished = true;
+
+  constructor(
+    x: number,
+    y: number,
+    width: number,
+    playerNumber: 0 | 1 | 2 | 3,
+    particleManager: typeof ParticleManager,
+  ) {
+    const color = styles.colors.players[playerNumber].starPerfect.fill;
+
+    const lightColor = tinycolor(color).lighten(15).toRgbString();
+    const darkColor = tinycolor(color).darken(15).toRgbString();
+
+    if (Math.random() > 0.85) {
+      const position = randomInt(0, width / 8);
+
+      const rand = Math.random();
+      let finalColor = color;
+      if (rand > 0.66) finalColor = lightColor;
+      else if (rand > 0.33) finalColor = darkColor;
+
+      const finalY = y + 20 * (Math.random() - 0.5);
+
+      particleManager.add(new GoldTriangle(x + position * 8, finalY, finalColor));
+    }
+  }
+  public tick = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => {};
+}

src/modules/GameEngine/Drawing/Particles/GoldTriangle.ts

@@ -0,0 +1,48 @@
+import debris from 'modules/GameEngine/Drawing/Elements/debris';
+import spreadValue from 'modules/GameEngine/Drawing/Particles/utils';
+import Particle from '../interfaces';
+
+const baseTtlMs = 500;
+const ttlSpreadMs = 100;
+
+const velocityModifier = 0.2;
+
+export default class GoldTriangle implements Particle {
+  public finished = false;
+
+  private ttl;
+  private startingTtl;
+  private velocityX;
+  private velocityY;
+  private width;
+  private initialAngle;
+  private heightModifier;
+
+  constructor(
+    private x: number,
+    private y: number,
+    private color: string,
+  ) {
+    this.startingTtl = this.ttl = spreadValue(baseTtlMs, ttlSpreadMs);
+    this.velocityX = velocityModifier * Math.random() - velocityModifier / 2;
+    this.velocityY = velocityModifier * Math.random() - velocityModifier / 2;
+    this.width = 25;
+    this.initialAngle = 180 - Math.random() * 360;
+    this.heightModifier = 0.5 + Math.random() / 2;
+  }
+  public tick = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, delta: number) => {
+    const percentage = 1 - this.ttl / this.startingTtl;
+    const ticksLeft = this.startingTtl - this.ttl;
+
+    const width = this.width * percentage;
+    const height = this.width * this.heightModifier * percentage;
+
+    const x = this.x - width / 2 + ticksLeft * this.velocityX;
+    const y = this.y + height / 2 + ticksLeft * this.velocityY;
+
+    debris(canvas, ctx, x, y, width, height, this.initialAngle + ticksLeft, this.color, 0.5 * percentage);
+
+    this.ttl = this.ttl - delta;
+    this.finished = this.ttl <= 0;
+  };
+}