copy

tsaxking · Jan 26, 2024 · ff9c910 · ff9c910
1 parent 5298a6c
commit ff9c910
Show file tree

Hide file tree

Showing 18 changed files with 137 additions and 33 deletions.
diff --git a/client/models/app/2024-app.ts b/client/models/app/2024-app.ts
@@ -17,6 +17,7 @@ import {
 import { App, Tick } from './app';
 import { Point2D } from '../../../shared/submodules/calculations/src/linear-algebra/point';
 import { Icon } from '../canvas/material-icons';
+import { SVG } from '../canvas/svg';
 
 /**
  * Builds the app for the 2024 game
@@ -25,7 +26,17 @@ import { Icon } from '../canvas/material-icons';
 export const generate2024App = (
     alliance: 'red' | 'blue' | null = null,
 ): App<Action2024> => {
-    const app = new App<Action2024, Zones2024, TraceParse2024>(alliance);
+    const icons: {
+        [key in Action2024]: Icon | SVG;
+    } = {
+        spk: new Icon('speaker'),
+        amp: new Icon('campaign'),
+        src: new Icon('back_hand'),
+        clb: new Icon('dry_cleaning'),
+        trp: new Icon('place_item'),
+    };
+
+    const app = new App<Action2024, Zones2024, TraceParse2024>(2024, alliance, icons);
 
     const isIn = (d: Drawable) =>
         app.currentLocation ? d.isIn(app.currentLocation) : false;
@@ -77,8 +88,8 @@ export const generate2024App = (
     const blueSource = document.createElement('button');
     const redSource = document.createElement('button');
 
-    const blueButtonClasses = ['btn', 'btn-primary'];
-    const redButtonClasses = ['btn', 'btn-danger'];
+    const blueButtonClasses = ['btn', 'btn-primary', 'btn-lg'];
+    const redButtonClasses = ['btn', 'btn-danger', 'btn-lg'];
 
     blueAmp.classList.add(...blueButtonClasses);
     blueAmp.innerHTML = `<i class="material-icons">campaign</i>`;
@@ -96,39 +107,39 @@ export const generate2024App = (
     const I = Iterator<Action2024>;
 
     app.addAppObject(
-        [0.19624217118997914, 0.060542797494780795],
+        [0.16976556184316896, 0.021018593371059015],
         new I('Blue Amp', 'Placing any note into the blue amp', 'amp', 0),
         blueAmp,
         (i) => i.toString(),
         'blue',
     );
 
     app.addAppObject(
-        [0.7974947807933194, 0.06889352818371608],
+        [0.8274050121261115, 0.018593371059013743],
         new I('Red Amp', 'Placing any note into the red amp', 'amp'),
         redAmp,
         (i) => i.toString(),
         'red',
     );
 
     app.addAppObject(
-        [0.07828810020876827, 0.3653444676409186],
+        [0.06345998383185125, 0.33063864187550523],
         new I('Blue Speaker', 'Shot a note into the blue speaker', 'spk'),
         blueSpeaker,
         (i) => i.toString(),
         'blue',
     );
 
     app.addAppObject(
-        [0.9018789144050104, 0.3695198329853862],
+        [0.9365400161681487, 0.32740501212611156],
         new I('Red Speaker', 'Shot a note into the red speaker', 'spk'),
         redSpeaker,
         (i) => i.toString(),
         'red',
     );
 
     app.addAppObject(
-        [0.8423799582463466, 0.8914405010438413],
+        [0.8823767178658044, 0.9062247372675829],
         new I(
             'Blue Source',
             'Robot retrieves a note from the blue source',
@@ -140,7 +151,7 @@ export const generate2024App = (
     );
 
     app.addAppObject(
-        [0.1524008350730689, 0.8914405010438413],
+        [0.11156022635408246, 0.9086499595796281],
         new I(
             'Red Source',
             'Robot retrieves a note from the red source',
@@ -171,7 +182,7 @@ export const generate2024App = (
             drawButton('blue-stage'),
             colors.blue,
             'blue',
-            new Icon('dry_cleaning')
+            icons.clb
         )
         .addButton(
             'Blue Trap',
@@ -181,7 +192,7 @@ export const generate2024App = (
             drawButton('blue-stage'),
             colors.blue,
             'blue',
-            new Icon('place_item')
+            icons.trp
         )
         .addButton(
             'Red Climb',
@@ -191,7 +202,7 @@ export const generate2024App = (
             drawButton('red-stage'),
             colors.red,
             'red',
-            new Icon('dry_cleaning')
+            icons.clb
         )
         .addButton(
             'Red Trap',
@@ -201,7 +212,7 @@ export const generate2024App = (
             drawButton('red-stage'),
             colors.red,
             'red',
-            new Icon('place_item')
+            icons.trp
         );
 
     const em = app.clickPoints();

diff --git a/client/models/app/app.ts b/client/models/app/app.ts
@@ -30,6 +30,8 @@ import { ServerRequest } from '../../utilities/requests';
 import { alert } from '../../utilities/notifications';
 import { Assignment } from '../../../shared/submodules/tatorscout-calculations/scout-groups';
 import { TBAEvent, TBAMatch, TBATeam } from '../../../shared/submodules/tatorscout-calculations/tba';
+import { Icon } from '../canvas/material-icons';
+import { SVG } from '../canvas/svg';
 
 /**
  * Description placeholder
@@ -323,10 +325,12 @@ export class App<a = Action, z extends Zones = Zones, p = TraceParse> {
      * @constructor
      * @param {HTMLDivElement} target
      */
-    constructor(public readonly currentAlliance: 'red' | 'blue' | null = null) {
+    constructor(public readonly year: number, public readonly currentAlliance: 'red' | 'blue' | null = null, public readonly icons: Partial<{
+        [key in Action]: Icon | SVG;
+    }>) {
         this.canvas.$ctx.canvas.style.position = 'absolute';
 
-        this.background = new Img('/public/pictures/field.png', {
+        this.background = new Img(`/public/pictures/${this.year}field.png`, {
             x: 0,
             y: 0,
             width: 1,
@@ -359,6 +363,10 @@ export class App<a = Action, z extends Zones = Zones, p = TraceParse> {
         this.setView();
 
         this.canvas.data = this;
+
+        for (const [action, icon] of Object.entries(this.icons)) {
+            this.icons[action] = icon.clone();
+        }
     }
 
     /**
@@ -1226,7 +1234,7 @@ export class App<a = Action, z extends Zones = Zones, p = TraceParse> {
             if (!ctx) throw new Error('No context');
             const c = new Canvas(ctx);
 
-            const img = new Img('/public/pictures/field.png');
+            const img = new Img(`/public/pictures/${this.year}field.png`);
             img.options.height = 1;
             img.options.width = 1;
             img.options.x = 0;
@@ -1241,11 +1249,28 @@ export class App<a = Action, z extends Zones = Zones, p = TraceParse> {
                 const color = Color.fromName(this.currentAlliance ? this.currentAlliance : 'black').toString('rgba');
 
                 if (action) {
-                    const c = new Circle([x, y], 0.01);
-                    c.$properties.fill = {
+                    const size = 0.03;
+                    const cir = new Circle([x, y], size);
+                    cir.$properties.fill = {
                         color: color,
                     };
-                    return c;
+                    const a = this.icons[action]?.clone();
+                    console.log(a);
+                    if (a instanceof SVG) {
+                        a.center = [x, y];
+                        if (!a.$properties.text) a.$properties.text = {};
+                        a.$properties.text!.height = size;
+                        a.$properties.text!.width = size;
+                        a.$properties.text!.color = Color.fromBootstrap('light').toString('rgba');
+                    }
+                    if (a instanceof Icon) {
+                        a.x = x;
+                        a.y = y;
+                        a.size = size;
+                        a.color = Color.fromBootstrap('light').toString('rgba');
+                    }
+                    const cont = new Container(cir, a || null);
+                    return cont;
                 }
                 if (a[i - 1]) {
                     const p = new Path([

diff --git a/client/models/app/button-circle.ts b/client/models/app/button-circle.ts
@@ -179,7 +179,7 @@ export class ButtonCircle<actions = Action> extends Drawable<ButtonCircle> {
             condition,
             index,
             color,
-            icon ?? new Icon('help'),
+            icon?.clone() ?? new Icon('help'),
             alliance,
         );
 

diff --git a/client/models/canvas/canvas.ts b/client/models/canvas/canvas.ts
@@ -165,7 +165,7 @@ export class Canvas<T = unknown> {
                                         this,
                                         drawable,
                                     );
-                                    console.log('clicked!', drawable);
+                                    // console.log('clicked!', drawable);
                                     drawable.emit('click', e);
                                 }
                             }

diff --git a/client/models/canvas/circle.ts b/client/models/canvas/circle.ts
@@ -1,5 +1,6 @@
 import { Drawable } from './drawable';
 import { Point2D } from '../../../shared/submodules/calculations/src/linear-algebra/point';
+import { copy } from '../../../shared/copy';
 
 export class Circle extends Drawable<Circle> {
     /**
@@ -95,4 +96,10 @@ export class Circle extends Drawable<Circle> {
     set y(y: number) {
         this.center[1] = y;
     }
+
+    clone(): Circle {
+        const c = new Circle(this.center, this.radius);
+        copy(c, this);
+        return c;
+    }
 }
diff --git a/client/models/canvas/container.ts b/client/models/canvas/container.ts
@@ -1,3 +1,4 @@
+import { copy } from '../../../shared/copy';
 import { Point2D } from '../../../shared/submodules/calculations/src/linear-algebra/point';
 import { Drawable } from './drawable';
 
@@ -47,4 +48,10 @@ export class Container extends Drawable<Container> {
     isIn(point: Point2D) {
         return this.$filtered.some((child) => child.isIn(point));
     }
+
+    clone(): Container {
+        const c = new Container(...this.$children.map((child) => child?.clone() || null));
+        copy(this, c);
+        return c;
+    }
 }
diff --git a/client/models/canvas/drawable.ts b/client/models/canvas/drawable.ts
@@ -60,6 +60,8 @@ type DrawableEvents = {
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export class Drawable<T = any> {
+    public readonly id = Math.random();
+
     public $canvas?: Canvas;
 
     constructor() {
@@ -242,4 +244,9 @@ export class Drawable<T = any> {
         this.$currentFadeFrame = 1;
         this.$fadeDirection = 1;
     }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    clone(): Drawable<any> {
+        throw new Error(`Method not implemented for ${this.constructor.name}`);
+    }
 }
diff --git a/client/models/canvas/image.ts b/client/models/canvas/image.ts
@@ -1,5 +1,6 @@
 import { Drawable } from './drawable';
 import { Point2D } from '../../../shared/submodules/calculations/src/linear-algebra/point';
+import { copy } from '../../../shared/copy';
 
 /**
  * Location and size of the image
@@ -164,4 +165,10 @@ export class Img extends Drawable<Img> {
             y <= this.y + this.height
         );
     }
+
+    clone(): Img {
+        const i = new Img(this.src, this.options);
+        copy(this, i);
+        return i;
+    }
 }
diff --git a/client/models/canvas/material-icons.ts b/client/models/canvas/material-icons.ts
@@ -1,3 +1,4 @@
+import { copy } from '../../../shared/copy';
 import { Point2D } from '../../../shared/submodules/calculations/src/linear-algebra/point';
 import { Drawable } from './drawable';
 import { MaterialIcon } from 'material-icons';
@@ -74,4 +75,10 @@ export class Icon extends Drawable<MaterialIcon> {
 
         return px >= x - s && px <= x + s && py >= y - s && py <= y + s;
     }
+
+    clone(): Icon {
+        const i = new Icon(this.icon, this.options);
+        copy(this, i);
+        return i;
+    }
 }
diff --git a/client/models/canvas/path.ts b/client/models/canvas/path.ts
@@ -1,5 +1,6 @@
 import { Drawable } from './drawable';
 import { Point2D } from '../../../shared/submodules/calculations/src/linear-algebra/point';
+import { copy } from '../../../shared/copy';
 
 export class Path extends Drawable<Path> {
     constructor(public points: Point2D[]) {
@@ -41,4 +42,10 @@ export class Path extends Drawable<Path> {
     isIn(point: Point2D) {
         return this.points.some((p) => p[0] === point[0] && p[1] === point[1]);
     }
+
+    clone(): Path {
+        const p = new Path(this.points.map((p) => [...p]));
+        copy(this, p);
+        return p;
+    }
 }
diff --git a/client/models/canvas/polygon.ts b/client/models/canvas/polygon.ts
@@ -1,6 +1,7 @@
 import { Drawable } from './drawable';
 import { ShapeProperties } from './properties';
 import { Point2D } from '../../../shared/submodules/calculations/src/linear-algebra/point';
+import { copy } from '../../../shared/copy';
 
 /**
  * Polygon
@@ -89,4 +90,10 @@ export class Polygon extends Drawable<Polygon> {
 
         return inside;
     }
+
+    clone(): Polygon {
+        const p = new Polygon(this.points.map((p) => [...p]));
+        copy(this, p);
+        return p;
+    }
 }
diff --git a/client/models/canvas/svg.ts b/client/models/canvas/svg.ts
@@ -1,3 +1,4 @@
+import { copy } from '../../../shared/copy';
 import { Point2D } from '../../../shared/submodules/calculations/src/linear-algebra/point';
 import { Drawable } from './drawable';
 
@@ -65,4 +66,10 @@ export class SVG extends Drawable<SVG> {
             this.$img.height,
         );
     }
+
+    clone(): SVG {
+        const s = new SVG(this.src, this.center);
+        copy(this, s);
+        return s;
+    }
 }
diff --git a/client/views/Main.svelte b/client/views/Main.svelte
@@ -19,7 +19,7 @@ App.getEventData().then(data => {
     }
 });
 
-const app = generate2024App('blue');
+const app = generate2024App(null);
 
 let tabs = ['Pre', 'App', 'Post', 'Upload'];
 let active = 'Pre';