feat(aurelia-apps): numerous v2 examples for future use

aurelia-apps/src/examples/particle-system.css

@@ -0,0 +1,13 @@
+.container {
+  width: 500px;
+  height: 300px;
+  background-color: #333;
+  position: relative;
+  overflow: hidden;
+}
+
+.particle {
+  position: absolute;
+  background-color: white;
+  border-radius: 50%;
+}

aurelia-apps/src/examples/particle-system.html

@@ -0,0 +1,6 @@
+<div class="container">
+    <div repeat.for="particle of particles"
+         class="particle"
+        style="left: ${particle.x}px; top: ${particle.y}px; width: ${particle.size}px; height: ${particle.size}px;"
+    ></div>
+</div>

aurelia-apps/src/examples/particle-system.ts

@@ -0,0 +1,48 @@
+import { customElement, bindable } from 'aurelia';
+
+@customElement('particle-system')
+export class ParticleSystem {
+  @bindable numParticles = 100;
+  particles: { x: number, y: number, vx: number, vy: number, size: number }[] = [];
+
+    private animationFrameId: number | null = null;
+
+    attached(){
+        this.initializeParticles();
+        this.startAnimation();
+    }
+
+    detached() {
+      if(this.animationFrameId) {
+        cancelAnimationFrame(this.animationFrameId)
+          this.animationFrameId = null;
+      }
+    }
+
+  initializeParticles() {
+    this.particles = Array.from({ length: this.numParticles }, () => ({
+      x: Math.random() * 500,
+      y: Math.random() * 300,
+      vx: (Math.random() - 0.5) * 2,
+      vy: (Math.random() - 0.5) * 2,
+      size: Math.random() * 5 + 2,
+    }));
+  }
+  startAnimation() {
+     const update = () => {
+         this.updateParticles();
+          this.animationFrameId = requestAnimationFrame(update);
+    };
+       this.animationFrameId = requestAnimationFrame(update)
+  }
+
+  updateParticles() {
+      this.particles.forEach(p => {
+       p.x += p.vx;
+        p.y += p.vy;
+
+        if (p.x > 500 || p.x < 0) p.vx *= -1;
+        if (p.y > 300 || p.y < 0) p.vy *= -1;
+      });
+  }
+}

aurelia-apps/src/examples/reactive-grid.css

@@ -0,0 +1,26 @@
+.grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px;
+}
+
+.row {
+  display: flex;
+  gap: 2px;
+}
+
+.cell {
+  width: 40px;
+  height: 40px;
+  background-color: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #ccc;
+}
+
+p {
+  margin-top: 10px;
+  font-family: monospace;
+}

aurelia-apps/src/examples/reactive-grid.html

@@ -0,0 +1,6 @@
+<div class="grid">
+  <div class="row" repeat.for="row of gridData">
+    <div class="cell" repeat.for="cell of row">${cell}</div>
+  </div>
+  <p>FPS: ${fps}</p>
+</div>

aurelia-apps/src/examples/reactive-grid.ts

@@ -0,0 +1,52 @@
+import { customElement, bindable } from 'aurelia';
+
+@customElement('reactive-grid')
+export class ReactiveGrid {
+  @bindable rows: number = 10;
+  @bindable cols: number = 10;
+  gridData: number[][] = [];
+  fps: number = 0;
+
+  private lastFrameTime: number = 0;
+  private animationFrameId: number | null = null;
+
+  attached() {
+    this.initGrid();
+    this.startAnimation();
+  }
+
+  detached() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+
+  private initGrid() {
+    this.gridData = Array.from({ length: this.rows }, () =>
+      Array.from({ length: this.cols }, () => Math.floor(Math.random() * 100))
+    );
+  }
+
+  private updateGridValues() {
+    this.gridData = Array.from({ length: this.rows }, () =>
+      Array.from({ length: this.cols }, () => Math.floor(Math.random() * 100))
+    );
+  }
+
+  startAnimation() {
+    const update = (timestamp: number) => {
+      if (this.lastFrameTime) {
+        const delta = timestamp - this.lastFrameTime;
+        this.fps = Math.round(1000 / delta);
+      }
+      this.lastFrameTime = timestamp;
+
+      this.updateGridValues();
+
+      this.animationFrameId = requestAnimationFrame(update);
+    };
+
+    this.animationFrameId = requestAnimationFrame(update);
+  }
+}

aurelia-apps/src/examples/real-time-clock.css

@@ -0,0 +1,4 @@
+.clock {
+    font-size: 2em;
+    font-family: monospace;
+}

aurelia-apps/src/examples/real-time-clock.html

@@ -0,0 +1,3 @@
+<div class="clock">
+    ${time}
+</div>

aurelia-apps/src/examples/real-time-clock.ts

@@ -0,0 +1,31 @@
+import { customElement } from 'aurelia';
+
+@customElement('real-time-clock')
+export class RealTimeClock {
+  time: string = '00:00:00.000';
+
+  private intervalId = null;
+
+  attached() {
+      this.updateTime();
+      this.intervalId = setInterval(() => {
+        this.updateTime()
+      }, 10);
+  }
+
+  detached() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+      this.intervalId = null;
+    }
+  }
+
+  updateTime() {
+      const now = new Date();
+      const hours = String(now.getHours()).padStart(2, '0');
+      const minutes = String(now.getMinutes()).padStart(2, '0');
+      const seconds = String(now.getSeconds()).padStart(2, '0');
+      const milliseconds = String(now.getMilliseconds()).padStart(3, '0');
+      this.time = `${hours}:${minutes}:${seconds}.${milliseconds}`;
+  }
+}