@raclettejs/core 0.0.1

package/services/frontend/src/core/lib/eggs/asteroids/renderer.ts

@@ -0,0 +1,289 @@
+// renderer.ts
+import type { GameState, GameConfig, Bullet, Particle } from "./types"
+import { createElement, random } from "./utils"
+
+// Multi-layer canvas system for better performance
+export class LayeredRenderer {
+  private backgroundCanvas: HTMLCanvasElement | null = null
+  private gameCanvas: HTMLCanvasElement | null = null
+  private uiCanvas: HTMLCanvasElement | null = null
+
+  private backgroundCtx: CanvasRenderingContext2D | null = null
+  private gameCtx: CanvasRenderingContext2D | null = null
+  private uiCtx: CanvasRenderingContext2D | null = null
+
+  private CONFIG: GameConfig
+  private uiElement: HTMLElement | null = null
+  private uiNeedsUpdate: boolean = true
+
+  constructor(config: GameConfig) {
+    this.CONFIG = config
+
+    if (typeof document === "undefined" || typeof window === "undefined") {
+      return
+    }
+
+    this.initializeLayers()
+  }
+
+  private initializeLayers(): void {
+    if (typeof document === "undefined") return
+
+    // Background layer (static elements, rarely updated)
+    this.backgroundCanvas = createElement("canvas") as HTMLCanvasElement
+    this.setupCanvas(this.backgroundCanvas, 9999)
+    this.backgroundCtx = this.backgroundCanvas.getContext("2d")
+
+    // Game layer (dynamic game objects)
+    this.gameCanvas = createElement("canvas") as HTMLCanvasElement
+    this.setupCanvas(this.gameCanvas, 10000)
+    this.gameCtx = this.gameCanvas.getContext("2d")
+
+    // UI layer (HUD elements)
+    this.uiCanvas = createElement("canvas") as HTMLCanvasElement
+    this.setupCanvas(this.uiCanvas, 10001)
+    this.uiCtx = this.uiCanvas.getContext("2d")
+
+    // Add all canvases to DOM
+    document.body.appendChild(this.backgroundCanvas)
+    document.body.appendChild(this.gameCanvas)
+    document.body.appendChild(this.uiCanvas)
+
+    // Initialize UI element
+    this.createUI()
+  }
+
+  private setupCanvas(canvas: HTMLCanvasElement, zIndex: number): void {
+    canvas.width = this.CONFIG.canvas.width
+    canvas.height = this.CONFIG.canvas.height
+
+    Object.assign(canvas.style, {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      zIndex: zIndex.toString(),
+      background: "transparent",
+      pointerEvents: "none",
+    })
+  }
+
+  private createUI(): void {
+    if (typeof document === "undefined") return
+
+    this.uiElement = createElement("div")
+    this.uiElement.id = "racleroids-ui"
+    Object.assign(this.uiElement.style, {
+      position: "fixed",
+      top: "20px",
+      left: "20px",
+      color: "#DF944E",
+      fontFamily: "Monaco, monospace",
+      fontSize: "18px",
+      zIndex: "10002",
+      pointerEvents: "none",
+    })
+    document.body.appendChild(this.uiElement)
+  }
+
+  // Clear specific layers
+  clearLayer(layer: "background" | "game" | "ui"): void {
+    let ctx: CanvasRenderingContext2D | null = null
+
+    switch (layer) {
+      case "background":
+        ctx = this.backgroundCtx
+        break
+      case "game":
+        ctx = this.gameCtx
+        break
+      case "ui":
+        ctx = this.uiCtx
+        break
+    }
+
+    if (ctx) {
+      ctx.clearRect(0, 0, this.CONFIG.canvas.width, this.CONFIG.canvas.height)
+    }
+  }
+
+  // Render player on game layer
+  drawPlayer(player: GameState["player"]): void {
+    if (!this.gameCtx) return
+
+    const ctx = this.gameCtx
+    ctx.save()
+    ctx.translate(player.position.x, player.position.y)
+    ctx.rotate(player.direction)
+
+    // Ship body - sleek triangle design
+    ctx.strokeStyle = "#DF944E"
+    ctx.lineWidth = 2
+    ctx.beginPath()
+    ctx.moveTo(this.CONFIG.player.size, 0)
+    ctx.lineTo(-this.CONFIG.player.size * 0.7, -this.CONFIG.player.size * 0.5)
+    ctx.lineTo(-this.CONFIG.player.size * 0.3, 0)
+    ctx.lineTo(-this.CONFIG.player.size * 0.7, this.CONFIG.player.size * 0.5)
+    ctx.closePath()
+    ctx.stroke()
+
+    // Ship core
+    ctx.fillStyle = "#DF944E"
+    ctx.beginPath()
+    ctx.arc(0, 0, 3, 0, Math.PI * 2)
+    ctx.fill()
+
+    // Thrust flame
+    if (player.thrust) {
+      const flameLength = random(15, 25)
+      ctx.strokeStyle = "#ff4000"
+      ctx.lineWidth = 3
+      ctx.beginPath()
+      ctx.moveTo(-this.CONFIG.player.size * 0.3, 0)
+      ctx.lineTo(-this.CONFIG.player.size - flameLength, random(-5, 5))
+      ctx.stroke()
+
+      ctx.strokeStyle = "#ffff00"
+      ctx.lineWidth = 1
+      ctx.beginPath()
+      ctx.moveTo(-this.CONFIG.player.size * 0.3, 0)
+      ctx.lineTo(-this.CONFIG.player.size - flameLength * 0.7, random(-3, 3))
+      ctx.stroke()
+    }
+
+    ctx.restore()
+  }
+
+  // Batch render bullets for better performance
+  drawBullets(bullets: Bullet[]): void {
+    if (!this.gameCtx || bullets.length === 0) return
+
+    const ctx = this.gameCtx
+    ctx.fillStyle = "#00ffff"
+    ctx.shadowColor = "#00ffff"
+    ctx.shadowBlur = 5
+
+    // Use path batching for better performance
+    ctx.beginPath()
+    for (let i = 0; i < bullets.length; i++) {
+      const bullet = bullets[i]
+      ctx.moveTo(
+        bullet.position.x + this.CONFIG.bullets.size,
+        bullet.position.y,
+      )
+      ctx.arc(
+        bullet.position.x,
+        bullet.position.y,
+        this.CONFIG.bullets.size,
+        0,
+        Math.PI * 2,
+      )
+    }
+    ctx.fill()
+
+    ctx.shadowBlur = 0
+  }
+
+  // Batch render particles
+  drawParticles(particles: Particle[]): void {
+    if (!this.gameCtx || particles.length === 0) return
+
+    const ctx = this.gameCtx
+    ctx.lineCap = "round"
+
+    // Group particles by color for batch rendering
+    const particlesByColor = new Map<string, Particle[]>()
+
+    for (let i = 0; i < particles.length; i++) {
+      const particle = particles[i]
+      const alpha = particle.life / particle.maxLife
+      const colorWithAlpha =
+        particle.color +
+        Math.floor(alpha * 255)
+          .toString(16)
+          .padStart(2, "0")
+
+      if (!particlesByColor.has(colorWithAlpha)) {
+        particlesByColor.set(colorWithAlpha, [])
+      }
+      particlesByColor.get(colorWithAlpha)!.push(particle)
+    }
+
+    // Render each color group in batches
+    particlesByColor.forEach((colorParticles, color) => {
+      ctx.strokeStyle = color
+      ctx.lineWidth = 2
+
+      ctx.beginPath()
+      for (let i = 0; i < colorParticles.length; i++) {
+        const particle = colorParticles[i]
+        const tail = {
+          x: particle.velocity.x * -0.1,
+          y: particle.velocity.y * -0.1,
+        }
+
+        ctx.moveTo(particle.position.x, particle.position.y)
+        ctx.lineTo(particle.position.x + tail.x, particle.position.y + tail.y)
+      }
+      ctx.stroke()
+    })
+  }
+
+  // Update UI layer (called less frequently)
+  updateUI(
+    score: number,
+    enemies: number,
+    totalEnemies: number,
+    level: number,
+  ): void {
+    if (!this.uiElement || !this.uiNeedsUpdate) return
+
+    this.uiElement.innerHTML = `
+      <div>SCORE: ${score.toLocaleString()}</div>
+      <div>TARGETS: ${enemies}/${totalEnemies}</div>
+      <div>LEVEL: ${level}</div>
+    `
+
+    this.uiNeedsUpdate = false
+  }
+
+  // Mark UI for update (call when values change)
+  markUIForUpdate(): void {
+    this.uiNeedsUpdate = true
+  }
+
+  // Main render method
+  render(state: GameState, bullets: Bullet[], particles: Particle[]): void {
+    // Clear dynamic layers
+    this.clearLayer("game")
+
+    // Render game objects
+    this.drawPlayer(state.player)
+    this.drawBullets(bullets)
+    this.drawParticles(particles)
+
+    // Update UI if needed
+    this.updateUI(
+      state.score,
+      state.enemies.length,
+      state.totalEnemies,
+      state.level,
+    )
+  }
+
+  // Cleanup method
+  cleanup(): void {
+    if (this.backgroundCanvas) {
+      this.backgroundCanvas.remove()
+    }
+    if (this.gameCanvas) {
+      this.gameCanvas.remove()
+    }
+    if (this.uiCanvas) {
+      this.uiCanvas.remove()
+    }
+    if (this.uiElement) {
+      this.uiElement.remove()
+      this.uiElement = null
+    }
+  }
+}

package/services/frontend/src/core/lib/eggs/asteroids/spatialGrid.ts

@@ -0,0 +1,107 @@
+// spatialGrid.ts
+import type { SpatialGrid, GridCell, Enemy, Vector, GameConfig } from "./types"
+
+export class SpatialGridSystem implements SpatialGrid {
+  public cells: GridCell[][] = []
+  public cellSize: number = 0
+  public cols: number = 0
+  public rows: number = 0
+
+  constructor(config: GameConfig) {
+    this.cellSize = config.grid.cellSize
+    this.cols = config.grid.cols
+    this.rows = config.grid.rows
+
+    // Initialize grid
+    this.cells = []
+    for (let y = 0; y < this.rows; y++) {
+      this.cells[y] = []
+      for (let x = 0; x < this.cols; x++) {
+        this.cells[y][x] = { enemies: [] }
+      }
+    }
+  }
+
+  private getGridCoords(
+    x: number,
+    y: number,
+  ): { gridX: number; gridY: number } {
+    return {
+      gridX: Math.max(
+        0,
+        Math.min(this.cols - 1, Math.floor(x / this.cellSize)),
+      ),
+      gridY: Math.max(
+        0,
+        Math.min(this.rows - 1, Math.floor(y / this.cellSize)),
+      ),
+    }
+  }
+
+  clear(): void {
+    for (let y = 0; y < this.rows; y++) {
+      for (let x = 0; x < this.cols; x++) {
+        this.cells[y][x].enemies.length = 0
+      }
+    }
+  }
+
+  addEnemy(enemy: Enemy): void {
+    const bounds = enemy.bounds
+    const centerX = bounds.left + bounds.width / 2
+    const centerY = bounds.top + bounds.height / 2
+
+    const { gridX, gridY } = this.getGridCoords(centerX, centerY)
+
+    enemy.gridX = gridX
+    enemy.gridY = gridY
+
+    if (this.cells[gridY] && this.cells[gridY][gridX]) {
+      this.cells[gridY][gridX].enemies.push(enemy)
+    }
+  }
+
+  getEnemiesNearPoint(point: Vector, radius: number = 0): Enemy[] {
+    const enemies: Enemy[] = []
+    const radiusInCells = Math.ceil(radius / this.cellSize)
+
+    const { gridX, gridY } = this.getGridCoords(point.x, point.y)
+
+    const minX = Math.max(0, gridX - radiusInCells)
+    const maxX = Math.min(this.cols - 1, gridX + radiusInCells)
+    const minY = Math.max(0, gridY - radiusInCells)
+    const maxY = Math.min(this.rows - 1, gridY + radiusInCells)
+
+    for (let y = minY; y <= maxY; y++) {
+      for (let x = minX; x <= maxX; x++) {
+        if (this.cells[y] && this.cells[y][x]) {
+          enemies.push(...this.cells[y][x].enemies)
+        }
+      }
+    }
+
+    return enemies
+  }
+
+  getAllEnemies(): Enemy[] {
+    const enemies: Enemy[] = []
+    for (let y = 0; y < this.rows; y++) {
+      for (let x = 0; x < this.cols; x++) {
+        if (this.cells[y] && this.cells[y][x]) {
+          enemies.push(...this.cells[y][x].enemies)
+        }
+      }
+    }
+    return enemies
+  }
+
+  removeEnemy(enemy: Enemy): void {
+    if (this.cells[enemy.gridY] && this.cells[enemy.gridY][enemy.gridX]) {
+      const cell = this.cells[enemy.gridY][enemy.gridX]
+      const index = cell.enemies.indexOf(enemy)
+      if (index > -1) {
+        cell.enemies.splice(index, 1)
+      }
+    }
+  }
+}

package/services/frontend/src/core/lib/eggs/asteroids/types.ts

@@ -0,0 +1,106 @@
+// types.ts
+export interface Vector {
+  x: number
+  y: number
+}
+
+export interface Bullet {
+  position: Vector
+  velocity: Vector
+  createdAt: number
+  active: boolean
+}
+
+export interface Particle {
+  position: Vector
+  velocity: Vector
+  color: string
+  life: number
+  maxLife: number
+  active: boolean
+}
+
+export interface Enemy {
+  element: HTMLElement
+  bounds: DOMRect
+  gridX: number
+  gridY: number
+}
+
+export interface GameState {
+  player: {
+    position: Vector
+    velocity: Vector
+    direction: number
+    thrust: boolean
+  }
+  bullets: Bullet[]
+  particles: Particle[]
+  enemies: Enemy[]
+  totalEnemies: number
+  score: number
+  level: number
+  keys: Set<string>
+  lastFired: number
+  isRunning: boolean
+}
+
+export interface GameConfig {
+  canvas: {
+    width: number
+    height: number
+  }
+  player: {
+    acceleration: number
+    maxSpeed: number
+    rotationSpeed: number
+    size: number
+    thrustParticles: boolean
+  }
+  bullets: {
+    speed: number
+    lifetime: number
+    fireRate: number
+    maxCount: number
+    size: number
+  }
+  particles: {
+    speed: number
+    lifetime: number
+    count: number
+    colors: string[]
+  }
+  enemies: {
+    updateInterval: number
+    ignoredTags: Set<string>
+    hiddenTags: Set<string>
+  }
+  grid: {
+    cellSize: number
+    cols: number
+    rows: number
+  }
+  fps: number
+}
+
+export interface GridCell {
+  enemies: Enemy[]
+}
+
+export interface SpatialGrid {
+  cells: GridCell[][]
+  cellSize: number
+  cols: number
+  rows: number
+}
+
+export interface PooledObject {
+  active: boolean
+}
+
+export interface ObjectPool<T extends PooledObject> {
+  objects: T[]
+  maxSize: number
+  createFn: () => T
+  resetFn: (obj: T) => void
+}

package/services/frontend/src/core/lib/eggs/asteroids/utils.ts

@@ -0,0 +1,162 @@
+// utils.ts
+import type { Vector, GameConfig } from "./types"
+
+// Vector utility functions
+export const createVector = (x: number, y: number): Vector => ({ x, y })
+
+export const vectorOps = {
+  copy: (v: Vector): Vector => createVector(v.x, v.y),
+
+  add: (v1: Vector, v2: Vector): Vector =>
+    createVector(v1.x + v2.x, v1.y + v2.y),
+
+  subtract: (v1: Vector, v2: Vector): Vector =>
+    createVector(v1.x - v2.x, v1.y - v2.y),
+
+  multiply: (v: Vector, scalar: number): Vector =>
+    createVector(v.x * scalar, v.y * scalar),
+
+  length: (v: Vector): number => Math.sqrt(v.x * v.x + v.y * v.y),
+
+  normalize: (v: Vector): Vector => {
+    const len = vectorOps.length(v)
+    return len > 0 ? vectorOps.multiply(v, 1 / len) : createVector(0, 0)
+  },
+
+  rotate: (v: Vector, angle: number): Vector =>
+    createVector(
+      v.x * Math.cos(angle) - v.y * Math.sin(angle),
+      v.x * Math.sin(angle) + v.y * Math.cos(angle),
+    ),
+
+  angle: (v: Vector): number => Math.atan2(v.y, v.x),
+
+  setLength: (v: Vector, length: number): Vector =>
+    vectorOps.multiply(vectorOps.normalize(v), length),
+
+  distance: (v1: Vector, v2: Vector): number =>
+    vectorOps.length(vectorOps.subtract(v1, v2)),
+}
+
+// Safe window access with fallbacks
+export const getWindowDimensions = () => {
+  if (typeof window === "undefined") {
+    return { width: 1024, height: 768 } // Fallback dimensions for SSR
+  }
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  }
+}
+
+// Game configuration with SSR-safe initialization
+export const createConfig = (): GameConfig => {
+  const dimensions = getWindowDimensions()
+  const cellSize = 100 // Grid cell size for spatial partitioning
+
+  return {
+    canvas: {
+      width: dimensions.width,
+      height: dimensions.height,
+    },
+    player: {
+      acceleration: 300,
+      maxSpeed: 400,
+      rotationSpeed: 4,
+      size: 12,
+      thrustParticles: true,
+    },
+    bullets: {
+      speed: 500,
+      lifetime: 2000,
+      fireRate: 150,
+      maxCount: 15,
+      size: 3,
+    },
+    particles: {
+      speed: 200,
+      lifetime: 1000,
+      count: 8,
+      colors: ["#ff0040", "#ffff00", "#ff8000", "#ff0080"],
+    },
+    enemies: {
+      updateInterval: 300,
+      ignoredTags: new Set([
+        "HTML",
+        "HEAD",
+        "BODY",
+        "SCRIPT",
+        "TITLE",
+        "CANVAS",
+        "META",
+        "STYLE",
+        "LINK",
+      ]),
+      hiddenTags: new Set(["BR", "HR"]),
+    },
+    grid: {
+      cellSize,
+      cols: Math.ceil(dimensions.width / cellSize),
+      rows: Math.ceil(dimensions.height / cellSize),
+    },
+    fps: 60,
+  }
+}
+
+// Utility functions
+export const toRadians = (degrees: number): number => (degrees * Math.PI) / 180
+export const toDegrees = (radians: number): number => (radians * 180) / Math.PI
+export const random = (min: number, max: number): number =>
+  Math.random() * (max - min) + min
+export const clamp = (value: number, min: number, max: number): number =>
+  Math.max(min, Math.min(max, value))
+
+// DOM utilities with null checks
+export const createElement = (
+  tag: string,
+  className?: string,
+  styles?: Partial<CSSStyleDeclaration>,
+): HTMLElement => {
+  if (typeof document === "undefined") {
+    throw new Error(
+      "Document not available - cannot create elements during SSR",
+    )
+  }
+
+  const element = document.createElement(tag)
+  if (className) element.className = className
+  if (styles) Object.assign(element.style, styles)
+  return element
+}
+
+export const hasOnlyTextualChildren = (
+  element: HTMLElement,
+  CONFIG: GameConfig,
+): boolean => {
+  if (CONFIG.enemies.hiddenTags.has(element.tagName)) return false
+  if (element.offsetWidth === 0 && element.offsetHeight === 0) return false
+
+  return Array.from(element.childNodes).every(
+    (node) =>
+      node.nodeType === Node.TEXT_NODE ||
+      (node.nodeType === Node.ELEMENT_NODE &&
+        CONFIG.enemies.hiddenTags.has((node as Element).tagName) &&
+        (node as Element).childNodes.length === 0),
+  )
+}
+
+// Game mechanics
+export const wrapPosition = (position: Vector, CONFIG: GameConfig): Vector => ({
+  x:
+    position.x < 0
+      ? CONFIG.canvas.width
+      : position.x > CONFIG.canvas.width
+        ? 0
+        : position.x,
+  y:
+    position.y < 0
+      ? CONFIG.canvas.height
+      : position.y > CONFIG.canvas.height
+        ? 0
+        : position.y,
+})