Initial commit: GunCircle.io multiplayer arena shooter
This commit is contained in:
emil
@@ -0,0 +1,9 @@
|
||||
node_modules/
|
||||
dist/
|
||||
*.log
|
||||
.env
|
||||
.DS_Store
|
||||
*.local
|
||||
.vite/
|
||||
coverage/
|
||||
*.tsbuildinfo
|
||||
@@ -0,0 +1,225 @@
|
||||
# GunCircle.io — Technical Specification
|
||||
|
||||
## Overview
|
||||
A browser-based multiplayer .io arena shooter (diep.io-style). Continuous FFA — no matches, no timers. Players join, spawn immediately, fight, earn XP, level up, choose class branches, die and respawn.
|
||||
|
||||
## Architecture
|
||||
- **Monorepo**: `packages/shared`, `packages/server`, `packages/client`
|
||||
- **Client**: TypeScript + Vite + HTML5 Canvas 2D (PC only, WASD + mouse)
|
||||
- **Server**: Node.js + TypeScript + Colyseus (uWebSockets transport)
|
||||
- **Physics**: Custom circle-circle + spatial hash grid (no external physics)
|
||||
- **Network**: Client-side prediction + server reconciliation + entity interpolation
|
||||
|
||||
## Shared Package (`packages/shared/`)
|
||||
Already implemented. Contains:
|
||||
- `schema.ts` — Colyseus Schema classes (Player, Bullet, XPOrb, Obstacle, LeaderboardEntry, RoomState)
|
||||
- `types.ts` — TypeScript interfaces (GunConfig, ClassBranch, PlayerInput, Skin, etc.)
|
||||
- `constants.ts` — Game constants (TICK_RATE, ARENA, COLORS, STATS, XP_LEVELS, etc.)
|
||||
- `math.ts` — Vector math, spatial hash grid, scalar utilities
|
||||
- `config/guns.json` — 5 gun definitions (pistol, rifle, shotgun, sniper, SMG)
|
||||
- `config/branches.json` — 19 class branch definitions
|
||||
|
||||
## Server (`packages/server/src/`)
|
||||
|
||||
### Entry Point: `index.ts`
|
||||
Sets up Colyseus server with uWebSockets transport, listens on port 3000, registers `ArenaRoom`.
|
||||
|
||||
### Room: `room.ts` — `ArenaRoom extends Room<RoomState>`
|
||||
- **maxClients**: 50
|
||||
- **Game loop**: `setInterval` at TICK_RATE (60Hz), increments `state.tick`
|
||||
- **On join**: create Player, spawn at random position, assign base gun (pistol), send gun configs
|
||||
- **On leave**: mark player dead, drop 50% XP as orbs after 60s room destroy timer
|
||||
- **On message**: deserialize PlayerInput, validate, apply
|
||||
|
||||
### Game Loop: `game-loop.ts`
|
||||
Per tick (order matters):
|
||||
1. Process player inputs (movement, shooting, upgrades)
|
||||
2. Update bullet positions (linear velocity)
|
||||
3. Update player positions (velocity + friction)
|
||||
4. Detect collisions (bullets vs players, players vs obstacles, players vs XP orbs)
|
||||
5. Apply damage, handle deaths
|
||||
6. Update recoil recovery (lerp recoilOffset toward 0)
|
||||
7. Update reload timers
|
||||
8. Regenerate HP
|
||||
9. Update leaderboard
|
||||
10. Broadcast state (Colyseus handles delta compression)
|
||||
|
||||
### Physics: `physics.ts`
|
||||
- `SpatialHashGrid` for O(1) queries
|
||||
- `circleCollisionResolve()` for player-player and player-obstacle
|
||||
- `lineCircleIntersect()` for bullet hit detection
|
||||
- Arena bounds clamping
|
||||
|
||||
### Player Manager: `player-manager.ts`
|
||||
- `spawnPlayer()`: random position, base stats, apply class bonuses
|
||||
- `applyInput()`: validate speed, update velocity, handle shooting
|
||||
- `handleShoot()`: apply recoil, spawn bullet(s), apply kickback, consume ammo
|
||||
- `takeDamage()`: apply damage, check crit, check death
|
||||
- `onDeath()`: drop XP orbs, reset level/stats, schedule respawn
|
||||
- `respawnPlayer()`: new random position, level 1, base gun
|
||||
- `applyUpgrade()`: validate stat choice, apply bonus
|
||||
- `checkLevelUp()`: check XP thresholds, award upgrade points, prompt branch choice
|
||||
|
||||
### Collision: `collision.ts`
|
||||
- `checkBulletPlayerCollisions()`: spatial hash query, damage on overlap
|
||||
- `checkPlayerOrbCollisions()`: collect orbs within pickup radius
|
||||
- `checkPlayerObstacleCollisions()`: resolve overlap, apply slow zone effect
|
||||
- `checkPlayerPlayerCollisions()`: soft collision (push apart)
|
||||
|
||||
### Gun System: `gun-system.ts`
|
||||
- Load `config/guns.json` at startup
|
||||
- `getGunConfig(id)` / `getGunConfigByIndex(idx)`
|
||||
- `calculateRecoil()`: random sign * recoilOffset * (1 - recoilStatBonus)
|
||||
- `calculateKickback()`: -aimVector * kickbackForce
|
||||
- `calculateBulletSpawn()`: barrel tip position at aimAngle + recoilOffset
|
||||
|
||||
### Class Branch System: `branch-system.ts`
|
||||
- Load `config/branches.json` at startup
|
||||
- `getAvailableBranches(level, currentBranch)` — filters by levelRequired and parentId
|
||||
- `applyBranchBonuses(player, branchId)` — applies passive stat multipliers
|
||||
- `getUnlockedGunCategories(branchIds)` — union of categories
|
||||
|
||||
### Validation: `validation.ts`
|
||||
- `validateMovement()`: speed <= max * (1 + moveSpeedStat)
|
||||
- `validateAimAngle()`: change <= max_turn_rate per tick
|
||||
- `validateFireRate()`: timeSinceLastShot >= cooldown / (1 + reloadStat)
|
||||
- `validateRecoil()`: server-calculated vs client-reported within tolerance
|
||||
|
||||
## Client (`packages/client/src/`)
|
||||
|
||||
### Entry Point: `main.ts`
|
||||
- Wait for DOM ready
|
||||
- Show menu, get player name
|
||||
- On PLAY click: connect to Colyseus room, hide menu, start game loop
|
||||
|
||||
### Renderer: `renderer.ts`
|
||||
Canvas 2D rendering engine:
|
||||
- `render()`: called every requestAnimationFrame
|
||||
- Clear canvas → save → apply camera transform → render world → restore → render HUD
|
||||
|
||||
**Render order (world space):**
|
||||
1. Arena background (solid color + grid lines)
|
||||
2. Obstacles (walls = grey rects, crates = brown rects, slow zones = blue tint, cover = green)
|
||||
3. XP orbs (small colored squares/circles)
|
||||
4. Bullets (filled circles with slight glow, semi-transparent trail circles behind)
|
||||
5. Players (circles: blue = self, red = others)
|
||||
6. Gun rendering (rectangle barrel + square body, rotated at aimAngle + recoilOffset)
|
||||
7. Name tags (above circle, always visible)
|
||||
8. HP bars (below name tag, green fill / dark bg)
|
||||
|
||||
**Gun rendering details:**
|
||||
- Barrel: rectangle, `GUN_BARREL_WIDTH` x `GUN_BARREL_LENGTH`, attached to player center
|
||||
- Body: small square `GUN_BODY_SIZE` behind barrel
|
||||
- Rotation: around player center at `angle + recoilOffset`
|
||||
- Recovery: lerp recoilOffset toward 0 each frame
|
||||
|
||||
**Bullet rendering:**
|
||||
- Main circle: radius = bulletSize, filled with bulletColor
|
||||
- Trail: 3-5 semi-transparent smaller circles behind at velocity * -dt positions
|
||||
- Crit: red outline stroke (2px) when isCritical = true
|
||||
|
||||
### Camera: `camera.ts`
|
||||
- Follow local player with slight lag (lerp at ~0.1 per frame)
|
||||
- Clamp to arena bounds + viewport padding
|
||||
- Transform: translate(canvas/2 - camX, canvas/2 - camY)
|
||||
|
||||
### Input: `input.ts`
|
||||
- WASD: track key states, compute moveAngle from active keys
|
||||
- Mouse: track position, convert screen → world for aimAngle
|
||||
- Left click: isShooting flag
|
||||
- Send input at 60Hz (setInterval)
|
||||
|
||||
### Networking: `network.ts`
|
||||
- Connect to Colyseus server via WebSocket
|
||||
- Client-side prediction: immediately move on WASD, apply velocity
|
||||
- Server reconciliation: compare predicted pos to server pos, smooth correction
|
||||
- Entity interpolation: for other players/bullets, lerp between prev and current state
|
||||
- Bullet confirmation: predict spawn locally, server confirms trajectory
|
||||
|
||||
### HUD: `hud.ts`
|
||||
- HP bar (top-left): green fill, shows current/max
|
||||
- XP bar (below HP): yellow fill, shows progress to next level
|
||||
- Ammo counter (bottom-right): current/max, reload indicator
|
||||
- Level indicator (top-right): large number
|
||||
- Leaderboard (top-right below level): sorted by XP, shows top 10
|
||||
- Name above local player: white text, centered
|
||||
- Upgrade popup: appears on level-up, shows stat buttons + branch choice at milestones
|
||||
|
||||
### Menu: `menu.ts`
|
||||
- Name input (max 16 chars)
|
||||
- PLAY button → connect → hide menu → show HUD
|
||||
|
||||
### Game Loop: `game.ts`
|
||||
- `update(dt)`: process input, apply prediction, update camera, update HUD
|
||||
- `render()`: call renderer
|
||||
- Uses requestAnimationFrame with delta time
|
||||
- Interpolate entity positions between server ticks
|
||||
|
||||
## Networking Protocol
|
||||
|
||||
### Client → Server (60Hz)
|
||||
```
|
||||
PlayerInput {
|
||||
seq: uint32 // frame counter
|
||||
moveAngle: float32 // -1 = none
|
||||
aimAngle: float32
|
||||
isShooting: bool
|
||||
upgradeChoice?: uint8
|
||||
}
|
||||
```
|
||||
|
||||
### Server → Client (60Hz, delta compressed via Colyseus)
|
||||
Full RoomState with Player, Bullet, XPOrb maps. Colyseus automatically sends only changed fields.
|
||||
|
||||
### Bandwidth Budget
|
||||
- Target: < 4 KB/s per player downstream
|
||||
- With 50 players + 100 bullets + 50 orbs, delta should be ~2-3 KB per tick
|
||||
- Colyseus Schema uses binary encoding + delta compression
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
packages/server/src/
|
||||
index.ts — server entry point
|
||||
room.ts — ArenaRoom definition
|
||||
game-loop.ts — tick loop
|
||||
physics.ts — spatial hash, collision resolution
|
||||
player-manager.ts — spawn, death, respawn, upgrades
|
||||
collision.ts — bullet-player, player-orb, player-obstacle
|
||||
gun-system.ts — gun config loading, recoil calc
|
||||
branch-system.ts — class branch loading, bonus application
|
||||
validation.ts — input validation, anti-cheat
|
||||
bot-player.ts — AI bot for testing (optional)
|
||||
|
||||
packages/client/src/
|
||||
main.ts — client entry, menu, connect
|
||||
renderer.ts — Canvas 2D rendering
|
||||
camera.ts — camera follow + smoothing
|
||||
input.ts — WASD + mouse input
|
||||
network.ts — Colyseus client, prediction, reconciliation
|
||||
hud.ts — UI overlays (HP, XP, leaderboard, upgrades)
|
||||
game.ts — client game loop (update + render)
|
||||
interpolation.ts — entity interpolation between ticks
|
||||
asset-loader.ts — optional image/font loading
|
||||
```
|
||||
|
||||
## Quality Gates
|
||||
1. Client: 60 FPS with 50 entities (Chrome, mid-tier laptop)
|
||||
2. Server: 60 Hz tick with 50 players (<10ms per tick)
|
||||
3. Bandwidth: < 4 KB/s per player downstream
|
||||
4. 100ms latency feels playable (prediction hides lag)
|
||||
5. No memory leaks over 10-minute session
|
||||
|
||||
## Visual Style (diep.io-like)
|
||||
- Self: blue circle (#3498db)
|
||||
- Enemies: red circle (#e74c3c)
|
||||
- Background: dark (#1a1a2e) with subtle grid
|
||||
- No particles, no screen shake, no muzzle flash
|
||||
- Only visual feedback: gun recoil animation
|
||||
- Clean, minimal, readable
|
||||
|
||||
## Skin System (Cosmetic Only)
|
||||
- Circle color/pattern overrides
|
||||
- Gun appearance overrides
|
||||
- Name tag style overrides
|
||||
- MVP: simple hardcoded palette, shop UI stub
|
||||
@@ -0,0 +1,42 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
redis:
|
||||
image: redis:7-alpine
|
||||
ports:
|
||||
- "6379:6379"
|
||||
volumes:
|
||||
- redis-data:/data
|
||||
healthcheck:
|
||||
test: ["CMD", "redis-cli", "ping"]
|
||||
interval: 10s
|
||||
timeout: 3s
|
||||
retries: 3
|
||||
|
||||
server:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: packages/server/Dockerfile
|
||||
ports:
|
||||
- "3000:3000"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- REDIS_URL=redis://redis:6379
|
||||
- PORT=3000
|
||||
depends_on:
|
||||
redis:
|
||||
condition: service_healthy
|
||||
restart: unless-stopped
|
||||
|
||||
client:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: packages/client/Dockerfile
|
||||
ports:
|
||||
- "80:80"
|
||||
depends_on:
|
||||
- server
|
||||
restart: unless-stopped
|
||||
|
||||
volumes:
|
||||
redis-data:
|
||||
Generated
+2557
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "guncircle.io",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "pnpm --filter client dev",
|
||||
"dev:server": "pnpm --filter server dev",
|
||||
"build": "pnpm --filter shared build && pnpm --filter client build && pnpm --filter server build",
|
||||
"type-check": "pnpm --filter shared type-check && pnpm --filter client type-check && pnpm --filter server type-check",
|
||||
"lint": "eslint packages/*/src --ext .ts",
|
||||
"test": "pnpm --filter shared test && pnpm --filter server test"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.0.0",
|
||||
"@typescript-eslint/parser": "^8.0.0",
|
||||
"eslint": "^9.0.0",
|
||||
"typescript": "^5.9.3"
|
||||
},
|
||||
"packageManager": "pnpm@9.0.0",
|
||||
"dependencies": {
|
||||
"@colyseus/schema": "^4.0.25",
|
||||
"colyseus.js": "^0.16.22",
|
||||
"vite": "^8.0.11"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
FROM node:22-alpine AS builder
|
||||
WORKDIR /app
|
||||
RUN corepack enable && corepack prepare pnpm@9.0.0 --activate
|
||||
COPY pnpm-workspace.yaml package.json ./
|
||||
COPY packages/shared/package.json packages/shared/
|
||||
COPY packages/client/package.json packages/client/
|
||||
RUN pnpm install --frozen-lockfile
|
||||
COPY packages/shared/ packages/shared/
|
||||
COPY packages/client/ packages/client/
|
||||
RUN pnpm --filter @guncircle/shared build
|
||||
RUN pnpm --filter @guncircle/client build
|
||||
|
||||
FROM nginx:alpine
|
||||
COPY --from=builder /app/packages/client/dist /usr/share/nginx/html
|
||||
COPY packages/client/nginx.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>GunCircle.io</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1a2e; }
|
||||
canvas { display: block; }
|
||||
#ui { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
|
||||
#ui > * { pointer-events: auto; }
|
||||
#menu { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(26,26,46,0.95); z-index: 100; }
|
||||
#hud { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 10; }
|
||||
.hidden { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="game" tabindex="0" style="outline:none;"></canvas>
|
||||
<div id="ui">
|
||||
<div id="menu">
|
||||
<h1 style="color:#ecf0f1;font-family:sans-serif;font-size:48px;margin-bottom:10px;text-shadow:0 0 20px rgba(52,152,219,0.5);">GunCircle.io</h1>
|
||||
<p style="color:#95a5a6;font-family:sans-serif;margin-bottom:30px;">Top-down arena shooter. WASD to move. Mouse to aim. Click to shoot.</p>
|
||||
<input id="nameInput" type="text" placeholder="Enter name (max 16)" maxlength="16" style="padding:12px 20px;font-size:18px;border:2px solid #34495e;border-radius:8px;background:#16213e;color:#ecf0f1;outline:none;width:280px;text-align:center;margin-bottom:16px;pointer-events:auto;" />
|
||||
<button id="playBtn" style="padding:12px 40px;font-size:20px;border:none;border-radius:8px;background:#3498db;color:#fff;cursor:pointer;font-weight:bold;transition:background 0.2s;pointer-events:auto;">PLAY</button>
|
||||
</div>
|
||||
<div id="hud"></div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,18 @@
|
||||
server {
|
||||
listen 80;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
|
||||
location /ws {
|
||||
proxy_pass http://server:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "@guncircle/client",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"type-check": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@colyseus/schema": "^3.0.0",
|
||||
"colyseus.js": "^0.16.0",
|
||||
"@guncircle/shared": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.6.0",
|
||||
"vite": "^5.0.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Camera System
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import {
|
||||
ARENA_WIDTH,
|
||||
ARENA_HEIGHT,
|
||||
lerp,
|
||||
} from '@guncircle/shared';
|
||||
|
||||
/** Camera padding — keep this much arena visible beyond camera edge */
|
||||
const CAMERA_PADDING = 100;
|
||||
|
||||
/** Camera follow lerp rate (units per second toward target) */
|
||||
const CAMERA_FOLLOW_RATE = 8;
|
||||
|
||||
export class Camera {
|
||||
/** Camera center X in world space */
|
||||
x = ARENA_WIDTH / 2;
|
||||
/** Camera center Y in world space */
|
||||
y = ARENA_HEIGHT / 2;
|
||||
/** Viewport width in pixels */
|
||||
width = 0;
|
||||
/** Viewport height in pixels */
|
||||
height = 0;
|
||||
|
||||
constructor(width: number, height: number) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
}
|
||||
|
||||
/** Resize the camera viewport */
|
||||
resize(width: number, height: number): void {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.clampToArena();
|
||||
}
|
||||
|
||||
/**
|
||||
* Smoothly follow a target position.
|
||||
* @param target - Target world position {x, y}
|
||||
* @param dt - Delta time in seconds
|
||||
*/
|
||||
follow(target: { x: number; y: number }, dt: number): void {
|
||||
const rate = Math.min(CAMERA_FOLLOW_RATE * dt, 1);
|
||||
this.x = lerp(this.x, target.x, rate);
|
||||
this.y = lerp(this.y, target.y, rate);
|
||||
this.clampToArena();
|
||||
}
|
||||
|
||||
/** Clamp camera center so viewport stays within arena bounds + padding */
|
||||
clampToArena(): void {
|
||||
const halfW = this.width / 2;
|
||||
const halfH = this.height / 2;
|
||||
|
||||
const minX = halfH - CAMERA_PADDING;
|
||||
const maxX = ARENA_WIDTH - halfW + CAMERA_PADDING;
|
||||
const minY = halfH - CAMERA_PADDING;
|
||||
const maxY = ARENA_HEIGHT - halfH + CAMERA_PADDING;
|
||||
|
||||
this.x = Math.max(minX, Math.min(maxX, this.x));
|
||||
this.y = Math.max(minY, Math.min(maxY, this.y));
|
||||
}
|
||||
|
||||
/** Convert world coordinates to screen coordinates */
|
||||
worldToScreen(worldX: number, worldY: number): { sx: number; sy: number } {
|
||||
return {
|
||||
sx: worldX - this.x + this.width / 2,
|
||||
sy: worldY - this.y + this.height / 2,
|
||||
};
|
||||
}
|
||||
|
||||
/** Convert screen coordinates to world coordinates */
|
||||
screenToWorld(screenX: number, screenY: number): { wx: number; wy: number } {
|
||||
return {
|
||||
wx: screenX + this.x - this.width / 2,
|
||||
wy: screenY + this.y - this.height / 2,
|
||||
};
|
||||
}
|
||||
|
||||
/** Check if an entity with given radius is within the camera viewport */
|
||||
isInView(worldX: number, worldY: number, radius: number): boolean {
|
||||
const halfW = this.width / 2 + radius;
|
||||
const halfH = this.height / 2 + radius;
|
||||
const dx = worldX - this.x;
|
||||
const dy = worldY - this.y;
|
||||
return Math.abs(dx) <= halfW && Math.abs(dy) <= halfH;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,250 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Main Game Controller
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import {
|
||||
RoomState,
|
||||
ARENA_WIDTH,
|
||||
ARENA_HEIGHT,
|
||||
PLAYER_BASE_SPEED,
|
||||
lerp,
|
||||
} from '@guncircle/shared';
|
||||
import type { PlayerInput } from '@guncircle/shared';
|
||||
import { Camera } from './camera.js';
|
||||
import { InputHandler } from './input.js';
|
||||
import { Renderer } from './renderer.js';
|
||||
import { NetworkManager } from './network.js';
|
||||
import { HUD } from './hud.js';
|
||||
|
||||
/** Maximum delta time to prevent spiral of death */
|
||||
const MAX_DT = 0.1;
|
||||
|
||||
/** Camera follow lerp factor per second */
|
||||
const CAMERA_LERP_SPEED = 8;
|
||||
|
||||
/** Local player visual recoil recovery rate */
|
||||
const RECOIL_RECOVERY_RATE = 0.15;
|
||||
|
||||
/** Game state container */
|
||||
interface GameState {
|
||||
canvas: HTMLCanvasElement;
|
||||
ctx: CanvasRenderingContext2D;
|
||||
camera: Camera;
|
||||
input: InputHandler;
|
||||
renderer: Renderer;
|
||||
network: NetworkManager;
|
||||
hud: HUD;
|
||||
localPlayerId: string | null;
|
||||
lastTime: number;
|
||||
running: boolean;
|
||||
/** Visual recoil offset for local player (purely visual) */
|
||||
localRecoilOffset: number;
|
||||
/** Animation time accumulator */
|
||||
animTime: number;
|
||||
}
|
||||
|
||||
/** Active game state instance */
|
||||
let game: GameState | null = null;
|
||||
|
||||
/** RAF handle for cleanup */
|
||||
let rafHandle = 0;
|
||||
|
||||
// ─── Initialization ──────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Start the game with the given player name.
|
||||
* This is the main entry point called from main.ts.
|
||||
*/
|
||||
export async function startGame(playerName: string): Promise<void> {
|
||||
// Clean up any existing game
|
||||
if (game) {
|
||||
stopGame();
|
||||
}
|
||||
|
||||
// Get canvas
|
||||
const canvas = document.getElementById('game') as HTMLCanvasElement | null;
|
||||
if (!canvas) {
|
||||
throw new Error('Game canvas element not found');
|
||||
}
|
||||
|
||||
// Size canvas to window
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
// Get 2D context with alpha disabled for performance
|
||||
const ctx = canvas.getContext('2d', { alpha: false });
|
||||
if (!ctx) {
|
||||
throw new Error('Could not get 2D canvas context');
|
||||
}
|
||||
|
||||
// Initialize subsystems
|
||||
const camera = new Camera(canvas.width, canvas.height);
|
||||
const input = new InputHandler(canvas);
|
||||
const renderer = new Renderer(ctx, canvas);
|
||||
const network = new NetworkManager();
|
||||
const hud = new HUD();
|
||||
|
||||
// Create game state
|
||||
game = {
|
||||
canvas,
|
||||
ctx,
|
||||
camera,
|
||||
input,
|
||||
renderer,
|
||||
network,
|
||||
hud,
|
||||
localPlayerId: null,
|
||||
lastTime: performance.now(),
|
||||
running: true,
|
||||
localRecoilOffset: 0,
|
||||
animTime: 0,
|
||||
};
|
||||
|
||||
// Handle window resize
|
||||
const handleResize = (): void => {
|
||||
if (!game) return;
|
||||
const w = window.innerWidth;
|
||||
const h = window.innerHeight;
|
||||
game.canvas.width = w;
|
||||
game.canvas.height = h;
|
||||
game.camera.resize(w, h);
|
||||
game.renderer.resize(w, h);
|
||||
};
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// Store resize handler on game for cleanup
|
||||
(game as unknown as Record<string, unknown>)['_resizeHandler'] = handleResize;
|
||||
|
||||
// Setup HUD upgrade callback
|
||||
hud.onUpgrade((statIdx: number) => {
|
||||
if (game?.network) {
|
||||
game.network.sendUpgrade(statIdx);
|
||||
}
|
||||
});
|
||||
|
||||
// Connect to server
|
||||
await network.connect('arena', { name: playerName });
|
||||
game.localPlayerId = network.localPlayerId;
|
||||
hud.show();
|
||||
|
||||
// Setup disconnect handling
|
||||
network.onDisconnect(() => {
|
||||
if (game) {
|
||||
game.running = false;
|
||||
hud.hide();
|
||||
}
|
||||
});
|
||||
|
||||
// Start sending input at 60Hz
|
||||
input.startSending((inputData: PlayerInput) => {
|
||||
if (game?.network) {
|
||||
game.network.sendInput(inputData);
|
||||
}
|
||||
});
|
||||
|
||||
// Start the game loop
|
||||
game.lastTime = performance.now();
|
||||
gameLoop(performance.now());
|
||||
}
|
||||
|
||||
// ─── Game Loop ───────────────────────────────────────────────────────────────
|
||||
|
||||
function gameLoop(now: number): void {
|
||||
if (!game || !game.running) return;
|
||||
|
||||
// Calculate delta time
|
||||
let dt = (now - game.lastTime) / 1000;
|
||||
game.lastTime = now;
|
||||
|
||||
// Cap dt to prevent spiral of death
|
||||
if (dt > MAX_DT) {
|
||||
dt = MAX_DT;
|
||||
}
|
||||
|
||||
game.animTime += dt;
|
||||
|
||||
// Get server state
|
||||
const roomState = game.network.state;
|
||||
|
||||
if (roomState && game.localPlayerId) {
|
||||
// ── Process input & client-side prediction ──
|
||||
const inputState = game.input.getInput();
|
||||
game.network.applyPrediction(inputState, dt);
|
||||
|
||||
// ── Update camera to follow local player ──
|
||||
updateCamera(game, roomState, dt);
|
||||
|
||||
// ── Update local visual recoil ──
|
||||
updateRecoil(game, dt);
|
||||
|
||||
// ── Update HUD ──
|
||||
game.hud.update(roomState, game.localPlayerId);
|
||||
}
|
||||
|
||||
// ── Render frame ──
|
||||
if (roomState) {
|
||||
game.renderer.render(
|
||||
roomState,
|
||||
game.camera,
|
||||
game.localPlayerId,
|
||||
dt
|
||||
);
|
||||
}
|
||||
|
||||
// Queue next frame
|
||||
rafHandle = requestAnimationFrame(gameLoop);
|
||||
}
|
||||
|
||||
// ─── Camera Update ───────────────────────────────────────────────────────────
|
||||
|
||||
function updateCamera(game: GameState, roomState: RoomState, dt: number): void {
|
||||
if (!game.localPlayerId) return;
|
||||
|
||||
const localPlayer = roomState.players.get(game.localPlayerId);
|
||||
if (!localPlayer || !localPlayer.alive) return;
|
||||
|
||||
// Use predicted position for camera if available, else server position
|
||||
const predPos = game.network.getLocalPosition();
|
||||
const targetX = predPos ? predPos.x : localPlayer.x;
|
||||
const targetY = predPos ? predPos.y : localPlayer.y;
|
||||
|
||||
// Lerp camera toward target
|
||||
const rate = Math.min(CAMERA_LERP_SPEED * dt, 1);
|
||||
game.camera.x = lerp(game.camera.x, targetX, rate);
|
||||
game.camera.y = lerp(game.camera.y, targetY, rate);
|
||||
game.camera.clampToArena();
|
||||
}
|
||||
|
||||
// ─── Recoil Update ───────────────────────────────────────────────────────────
|
||||
|
||||
function updateRecoil(game: GameState, _dt: number): void {
|
||||
// Lerp visual recoil offset toward 0 each frame
|
||||
game.localRecoilOffset = lerp(
|
||||
game.localRecoilOffset,
|
||||
0,
|
||||
RECOIL_RECOVERY_RATE
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Cleanup ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export function stopGame(): void {
|
||||
if (!game) return;
|
||||
|
||||
game.running = false;
|
||||
cancelAnimationFrame(rafHandle);
|
||||
|
||||
game.input.destroy();
|
||||
game.network.disconnect();
|
||||
game.hud.destroy();
|
||||
|
||||
// Remove resize listener
|
||||
const resizeHandler = (game as unknown as Record<string, unknown>)['_resizeHandler'] as
|
||||
| (() => void)
|
||||
| undefined;
|
||||
if (resizeHandler) {
|
||||
window.removeEventListener('resize', resizeHandler);
|
||||
}
|
||||
|
||||
game = null;
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — HUD Renderer (HTML Overlays)
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import {
|
||||
COLORS,
|
||||
STAT_COUNT,
|
||||
STAT_BONUSES,
|
||||
Stat,
|
||||
BRANCH_LEVELS,
|
||||
} from '@guncircle/shared';
|
||||
import type { RoomState, Player } from '@guncircle/shared';
|
||||
|
||||
/** Stat display names */
|
||||
const STAT_NAMES: string[] = [
|
||||
'Max HP',
|
||||
'HP Regen',
|
||||
'Move Speed',
|
||||
'Bullet Dmg',
|
||||
'Bullet Spd',
|
||||
'Reload Spd',
|
||||
'Recoil Stab',
|
||||
'Crit Chance',
|
||||
'Crit Dmg',
|
||||
];
|
||||
|
||||
/** HUD bar dimensions */
|
||||
const BAR_WIDTH_HP = 200;
|
||||
const BAR_HEIGHT_HP = 16;
|
||||
const BAR_WIDTH_XP = 200;
|
||||
const BAR_HEIGHT_XP = 10;
|
||||
|
||||
export class HUD {
|
||||
private readonly hudEl: HTMLDivElement;
|
||||
private visible = false;
|
||||
|
||||
// ─── HUD Element References ────────────────────────────────────────────────
|
||||
private hpBarEl: HTMLDivElement | null = null;
|
||||
private hpBarFillEl: HTMLDivElement | null = null;
|
||||
private hpTextEl: HTMLDivElement | null = null;
|
||||
private xpBarEl: HTMLDivElement | null = null;
|
||||
private xpBarFillEl: HTMLDivElement | null = null;
|
||||
private xpTextEl: HTMLDivElement | null = null;
|
||||
private ammoEl: HTMLDivElement | null = null;
|
||||
private leaderboardEl: HTMLDivElement | null = null;
|
||||
private upgradePopupEl: HTMLDivElement | null = null;
|
||||
private upgradeGridEl: HTMLDivElement | null = null;
|
||||
|
||||
/** Callback when a stat upgrade is chosen */
|
||||
private upgradeCallback: ((stat: number) => void) | null = null;
|
||||
|
||||
constructor() {
|
||||
const hudEl = document.getElementById('hud') as HTMLDivElement | null;
|
||||
if (!hudEl) {
|
||||
throw new Error('HUD: #hud element not found');
|
||||
}
|
||||
this.hudEl = hudEl;
|
||||
this.buildUI();
|
||||
}
|
||||
|
||||
// ─── UI Construction ───────────────────────────────────────────────────────
|
||||
|
||||
private buildUI(): void {
|
||||
this.hudEl.style.position = 'absolute';
|
||||
this.hudEl.style.top = '0';
|
||||
this.hudEl.style.left = '0';
|
||||
this.hudEl.style.width = '100%';
|
||||
this.hudEl.style.height = '100%';
|
||||
this.hudEl.style.pointerEvents = 'none';
|
||||
this.hudEl.style.fontFamily = 'sans-serif';
|
||||
|
||||
// ── HP Bar (top-left) ──
|
||||
const hpContainer = this.createBarContainer('10px', '10px');
|
||||
this.hpTextEl = this.createTextEl('HP: --/--', '#ecf0f1', '12px');
|
||||
this.hpBarEl = this.createBar(BAR_WIDTH_HP, BAR_HEIGHT_HP, COLORS.hpBarBg);
|
||||
this.hpBarFillEl = this.createBarFill(BAR_WIDTH_HP, BAR_HEIGHT_HP, COLORS.hpBar);
|
||||
this.hpBarEl.appendChild(this.hpBarFillEl);
|
||||
hpContainer.appendChild(this.hpTextEl);
|
||||
hpContainer.appendChild(this.hpBarEl);
|
||||
this.hudEl.appendChild(hpContainer);
|
||||
|
||||
// ── XP Bar (below HP) ──
|
||||
const xpContainer = this.createBarContainer('10px', '36px');
|
||||
this.xpTextEl = this.createTextEl('Level 1', '#ecf0f1', '12px');
|
||||
this.xpBarEl = this.createBar(BAR_WIDTH_XP, BAR_HEIGHT_XP, COLORS.hpBarBg);
|
||||
this.xpBarFillEl = this.createBarFill(BAR_WIDTH_XP, BAR_HEIGHT_XP, '#f1c40f');
|
||||
this.xpBarEl.appendChild(this.xpBarFillEl);
|
||||
xpContainer.appendChild(this.xpTextEl);
|
||||
xpContainer.appendChild(this.xpBarEl);
|
||||
this.hudEl.appendChild(xpContainer);
|
||||
|
||||
// ── Ammo (bottom-right) ──
|
||||
const ammoContainer = this.createBarContainer('auto', 'auto');
|
||||
ammoContainer.style.right = '10px';
|
||||
ammoContainer.style.bottom = '10px';
|
||||
this.ammoEl = this.createTextEl('Ammo: --/--', '#ecf0f1', '16px');
|
||||
this.ammoEl.style.fontWeight = 'bold';
|
||||
ammoContainer.appendChild(this.ammoEl);
|
||||
this.hudEl.appendChild(ammoContainer);
|
||||
|
||||
// ── Leaderboard (top-right) ──
|
||||
const lbContainer = this.createBarContainer('auto', '10px');
|
||||
lbContainer.style.right = '10px';
|
||||
this.leaderboardEl = document.createElement('div');
|
||||
this.leaderboardEl.style.background = COLORS.uiBg;
|
||||
this.leaderboardEl.style.border = `1px solid ${COLORS.uiBorder}`;
|
||||
this.leaderboardEl.style.borderRadius = '6px';
|
||||
this.leaderboardEl.style.padding = '8px 12px';
|
||||
this.leaderboardEl.style.minWidth = '200px';
|
||||
this.leaderboardEl.style.pointerEvents = 'auto';
|
||||
lbContainer.appendChild(this.leaderboardEl);
|
||||
this.hudEl.appendChild(lbContainer);
|
||||
|
||||
// ── Upgrade Popup (centered, hidden by default) ──
|
||||
this.upgradePopupEl = document.createElement('div');
|
||||
this.upgradePopupEl.style.position = 'absolute';
|
||||
this.upgradePopupEl.style.top = '50%';
|
||||
this.upgradePopupEl.style.left = '50%';
|
||||
this.upgradePopupEl.style.transform = 'translate(-50%, -50%)';
|
||||
this.upgradePopupEl.style.background = 'rgba(0,0,0,0.85)';
|
||||
this.upgradePopupEl.style.border = `2px solid ${COLORS.uiBorder}`;
|
||||
this.upgradePopupEl.style.borderRadius = '10px';
|
||||
this.upgradePopupEl.style.padding = '20px';
|
||||
this.upgradePopupEl.style.display = 'none';
|
||||
this.upgradePopupEl.style.pointerEvents = 'auto';
|
||||
this.upgradePopupEl.style.zIndex = '50';
|
||||
this.upgradePopupEl.style.minWidth = '340px';
|
||||
|
||||
const upgradeTitle = this.createTextEl('Upgrade Points Available', '#f1c40f', '20px');
|
||||
upgradeTitle.style.textAlign = 'center';
|
||||
upgradeTitle.style.marginBottom = '12px';
|
||||
upgradeTitle.style.fontWeight = 'bold';
|
||||
this.upgradePopupEl.appendChild(upgradeTitle);
|
||||
|
||||
this.upgradeGridEl = document.createElement('div');
|
||||
this.upgradeGridEl.style.display = 'grid';
|
||||
this.upgradeGridEl.style.gridTemplateColumns = 'repeat(3, 1fr)';
|
||||
this.upgradeGridEl.style.gap = '8px';
|
||||
this.upgradePopupEl.appendChild(this.upgradeGridEl);
|
||||
|
||||
this.hudEl.appendChild(this.upgradePopupEl);
|
||||
}
|
||||
|
||||
// ─── DOM Helpers ───────────────────────────────────────────────────────────
|
||||
|
||||
private createBarContainer(left: string, top: string): HTMLDivElement {
|
||||
const el = document.createElement('div');
|
||||
el.style.position = 'absolute';
|
||||
el.style.left = left;
|
||||
el.style.top = top;
|
||||
el.style.pointerEvents = 'auto';
|
||||
return el;
|
||||
}
|
||||
|
||||
private createTextEl(text: string, color: string, fontSize: string): HTMLDivElement {
|
||||
const el = document.createElement('div');
|
||||
el.textContent = text;
|
||||
el.style.color = color;
|
||||
el.style.fontSize = fontSize;
|
||||
el.style.marginBottom = '2px';
|
||||
el.style.textShadow = '0 1px 2px rgba(0,0,0,0.8)';
|
||||
return el;
|
||||
}
|
||||
|
||||
private createBar(width: number, height: number, bgColor: string): HTMLDivElement {
|
||||
const el = document.createElement('div');
|
||||
el.style.width = `${width}px`;
|
||||
el.style.height = `${height}px`;
|
||||
el.style.background = bgColor;
|
||||
el.style.borderRadius = '3px';
|
||||
el.style.overflow = 'hidden';
|
||||
el.style.position = 'relative';
|
||||
return el;
|
||||
}
|
||||
|
||||
private createBarFill(width: number, height: number, color: string): HTMLDivElement {
|
||||
const el = document.createElement('div');
|
||||
el.style.width = '100%';
|
||||
el.style.height = `${height}px`;
|
||||
el.style.background = color;
|
||||
el.style.transition = 'width 0.2s ease';
|
||||
return el;
|
||||
}
|
||||
|
||||
// ─── Visibility ────────────────────────────────────────────────────────────
|
||||
|
||||
show(): void {
|
||||
this.visible = true;
|
||||
this.hudEl.style.display = 'block';
|
||||
}
|
||||
|
||||
hide(): void {
|
||||
this.visible = false;
|
||||
this.hudEl.style.display = 'none';
|
||||
}
|
||||
|
||||
// ─── Update from State ─────────────────────────────────────────────────────
|
||||
|
||||
update(state: RoomState, localPlayerId: string | null): void {
|
||||
if (!this.visible || !localPlayerId) return;
|
||||
|
||||
const player = state.players.get(localPlayerId);
|
||||
if (!player) return;
|
||||
|
||||
this.updateHP(player);
|
||||
this.updateXP(player);
|
||||
this.updateAmmo(player);
|
||||
this.updateLeaderboard(state);
|
||||
this.updateUpgrades(player);
|
||||
}
|
||||
|
||||
private updateHP(player: Player): void {
|
||||
if (!this.hpTextEl || !this.hpBarFillEl) return;
|
||||
|
||||
const hpPct = Math.max(0, player.hp / player.maxHp);
|
||||
const hpText = `HP: ${Math.ceil(player.hp)}/${player.maxHp}`;
|
||||
|
||||
this.hpTextEl.textContent = hpText;
|
||||
this.hpBarFillEl.style.width = `${hpPct * 100}%`;
|
||||
|
||||
// Change color based on HP level
|
||||
if (hpPct > 0.5) {
|
||||
this.hpBarFillEl.style.background = COLORS.hpBar;
|
||||
} else if (hpPct > 0.25) {
|
||||
this.hpBarFillEl.style.background = '#f39c12';
|
||||
} else {
|
||||
this.hpBarFillEl.style.background = '#e74c3c';
|
||||
}
|
||||
}
|
||||
|
||||
private updateXP(player: Player): void {
|
||||
if (!this.xpTextEl || !this.xpBarFillEl) return;
|
||||
|
||||
const xpPct = Math.min(1, player.xp / player.xpToNext);
|
||||
|
||||
this.xpTextEl.textContent = `Level ${player.level} (${player.xp}/${player.xpToNext} XP)`;
|
||||
this.xpBarFillEl.style.width = `${xpPct * 100}%`;
|
||||
}
|
||||
|
||||
private updateAmmo(player: Player): void {
|
||||
if (!this.ammoEl) return;
|
||||
|
||||
if (player.isReloading) {
|
||||
this.ammoEl.textContent = 'RELOADING...';
|
||||
this.ammoEl.style.color = '#e74c3c';
|
||||
} else {
|
||||
this.ammoEl.textContent = `Ammo: ${player.ammo}/${player.maxAmmo}`;
|
||||
this.ammoEl.style.color = '#ecf0f1';
|
||||
}
|
||||
}
|
||||
|
||||
private updateLeaderboard(state: RoomState): void {
|
||||
if (!this.leaderboardEl) return;
|
||||
|
||||
// Build leaderboard HTML from state
|
||||
const entries: Array<{ name: string; level: number; score: number; xp: number; id: string }> = [];
|
||||
for (const [id, p] of state.players) {
|
||||
if (p.alive) {
|
||||
entries.push({
|
||||
name: p.name,
|
||||
level: p.level,
|
||||
score: p.score,
|
||||
xp: p.xp,
|
||||
id,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
entries.sort((a, b) => b.xp - a.xp);
|
||||
const top10 = entries.slice(0, 10);
|
||||
|
||||
let html = '<div style="color:#f1c40f;font-size:14px;font-weight:bold;margin-bottom:6px;text-align:center;">Leaderboard</div>';
|
||||
for (let i = 0; i < top10.length; i++) {
|
||||
const e = top10[i];
|
||||
const color = i === 0 ? '#f1c40f' : i === 1 ? '#bdc3c7' : i === 2 ? '#cd7f32' : '#ecf0f1';
|
||||
html += `<div style="color:${color};font-size:12px;padding:2px 0;">${i + 1}. ${e.name} — Lvl ${e.level} — ${e.score} kills</div>`;
|
||||
}
|
||||
|
||||
this.leaderboardEl.innerHTML = html;
|
||||
}
|
||||
|
||||
// ─── Upgrade Popup ─────────────────────────────────────────────────────────
|
||||
|
||||
private updateUpgrades(player: Player): void {
|
||||
if (!this.upgradePopupEl || !this.upgradeGridEl) return;
|
||||
|
||||
if (player.upgradePoints > 0) {
|
||||
this.upgradePopupEl.style.display = 'block';
|
||||
this.renderUpgradeButtons(player);
|
||||
} else {
|
||||
this.upgradePopupEl.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
private renderUpgradeButtons(player: Player): void {
|
||||
if (!this.upgradeGridEl) return;
|
||||
|
||||
// Only rebuild if needed (simple check: compare point count)
|
||||
const currentPoints = this.upgradeGridEl.dataset.points;
|
||||
if (currentPoints === String(player.upgradePoints) &&
|
||||
this.upgradeGridEl.dataset.stats === String(player.stats)) {
|
||||
return;
|
||||
}
|
||||
this.upgradeGridEl.dataset.points = String(player.upgradePoints);
|
||||
this.upgradeGridEl.dataset.stats = String(player.stats);
|
||||
|
||||
this.upgradeGridEl.innerHTML = '';
|
||||
|
||||
for (let i = 0; i < STAT_COUNT; i++) {
|
||||
const statLevel = player.stats[i] ?? 0;
|
||||
const statName = STAT_NAMES[i];
|
||||
const bonus = STAT_BONUSES[i as Stat];
|
||||
const bonusText = bonus.isPct
|
||||
? `+${Math.round(bonus.perLevel * 100)}%`
|
||||
: `+${bonus.perLevel}`;
|
||||
|
||||
const btn = document.createElement('button');
|
||||
btn.style.background = '#2c3e50';
|
||||
btn.style.border = '1px solid #34495e';
|
||||
btn.style.borderRadius = '6px';
|
||||
btn.style.padding = '8px 4px';
|
||||
btn.style.color = '#ecf0f1';
|
||||
btn.style.fontSize = '11px';
|
||||
btn.style.cursor = 'pointer';
|
||||
btn.style.textAlign = 'center';
|
||||
btn.style.transition = 'background 0.15s';
|
||||
btn.style.pointerEvents = 'auto';
|
||||
|
||||
btn.innerHTML = `
|
||||
<div style="font-weight:bold;margin-bottom:2px;">${statName}</div>
|
||||
<div style="color:#f1c40f;font-size:10px;">${bonusText}</div>
|
||||
<div style="color:#95a5a6;font-size:10px;margin-top:2px;">Lvl ${statLevel}/7</div>
|
||||
`;
|
||||
|
||||
btn.addEventListener('mouseenter', () => {
|
||||
btn.style.background = '#34495e';
|
||||
});
|
||||
btn.addEventListener('mouseleave', () => {
|
||||
btn.style.background = '#2c3e50';
|
||||
});
|
||||
|
||||
const statIdx = i;
|
||||
btn.addEventListener('click', () => {
|
||||
if (this.upgradeCallback) {
|
||||
this.upgradeCallback(statIdx);
|
||||
}
|
||||
});
|
||||
|
||||
this.upgradeGridEl.appendChild(btn);
|
||||
}
|
||||
|
||||
// Points remaining label
|
||||
const pointsLabel = document.createElement('div');
|
||||
pointsLabel.style.gridColumn = '1 / -1';
|
||||
pointsLabel.style.textAlign = 'center';
|
||||
pointsLabel.style.color = '#f1c40f';
|
||||
pointsLabel.style.fontSize = '14px';
|
||||
pointsLabel.style.marginTop = '4px';
|
||||
pointsLabel.textContent = `${player.upgradePoints} point${player.upgradePoints > 1 ? 's' : ''} remaining`;
|
||||
this.upgradeGridEl.appendChild(pointsLabel);
|
||||
}
|
||||
|
||||
/** Register callback for stat upgrade selection */
|
||||
onUpgrade(callback: (stat: number) => void): void {
|
||||
this.upgradeCallback = callback;
|
||||
}
|
||||
|
||||
// ─── Cleanup ───────────────────────────────────────────────────────────────
|
||||
|
||||
destroy(): void {
|
||||
this.hide();
|
||||
this.hudEl.innerHTML = '';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,208 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Input Handler (WASD + Mouse)
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import {
|
||||
INPUT_MS,
|
||||
type PlayerInput,
|
||||
} from '@guncircle/shared';
|
||||
|
||||
/** Input sequence counter */
|
||||
let globalSeq = 0;
|
||||
|
||||
/** Movement angle for each WASD key (in radians, standard math convention) */
|
||||
const KEY_ANGLES: Record<string, number> = {
|
||||
KeyW: -Math.PI / 2, // Up
|
||||
KeyS: Math.PI / 2, // Down
|
||||
KeyA: Math.PI, // Left
|
||||
KeyD: 0, // Right
|
||||
};
|
||||
|
||||
export class InputHandler {
|
||||
/** Currently pressed keys (WASD) */
|
||||
private readonly keys = new Set<string>();
|
||||
/** Mouse X in screen coordinates */
|
||||
mouseX = 0;
|
||||
/** Mouse Y in screen coordinates */
|
||||
mouseY = 0;
|
||||
/** Is left mouse button held down */
|
||||
mouseDown = false;
|
||||
/** Canvas element for center calculations */
|
||||
private readonly canvas: HTMLCanvasElement;
|
||||
/** Bound event handlers for cleanup */
|
||||
private readonly boundKeyDown: (e: KeyboardEvent) => void;
|
||||
private readonly boundKeyUp: (e: KeyboardEvent) => void;
|
||||
private readonly boundMouseMove: (e: MouseEvent) => void;
|
||||
private readonly boundMouseDown: (e: MouseEvent) => void;
|
||||
private readonly boundMouseUp: (e: MouseEvent) => void;
|
||||
private readonly boundContextMenu: (e: Event) => void;
|
||||
/** Input send interval ID */
|
||||
private inputInterval: number | null = null;
|
||||
/** Callback to send input to network */
|
||||
private sendCallback: ((input: PlayerInput) => void) | null = null;
|
||||
|
||||
constructor(canvas: HTMLCanvasElement) {
|
||||
this.canvas = canvas;
|
||||
|
||||
this.boundKeyDown = this.handleKeyDown.bind(this);
|
||||
this.boundKeyUp = this.handleKeyUp.bind(this);
|
||||
this.boundMouseMove = this.handleMouseMove.bind(this);
|
||||
this.boundMouseDown = this.handleMouseDown.bind(this);
|
||||
this.boundMouseUp = this.handleMouseUp.bind(this);
|
||||
this.boundContextMenu = this.handleContextMenu.bind(this);
|
||||
|
||||
window.addEventListener('keydown', this.boundKeyDown);
|
||||
window.addEventListener('keyup', this.boundKeyUp);
|
||||
window.addEventListener('mousemove', this.boundMouseMove);
|
||||
window.addEventListener('mousedown', this.boundMouseDown);
|
||||
window.addEventListener('mouseup', this.boundMouseUp);
|
||||
window.addEventListener('contextmenu', this.boundContextMenu);
|
||||
}
|
||||
|
||||
// ─── Event Handlers ────────────────────────────────────────────────────────
|
||||
|
||||
private handleKeyDown(e: KeyboardEvent): void {
|
||||
// Skip WASD handling when typing in an input/textarea
|
||||
const activeTag = (document.activeElement?.tagName ?? '').toLowerCase();
|
||||
if (activeTag === 'input' || activeTag === 'textarea') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.code in KEY_ANGLES) {
|
||||
e.preventDefault();
|
||||
this.keys.add(e.code);
|
||||
}
|
||||
}
|
||||
|
||||
private handleKeyUp(e: KeyboardEvent): void {
|
||||
const activeTag = (document.activeElement?.tagName ?? '').toLowerCase();
|
||||
if (activeTag === 'input' || activeTag === 'textarea') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.code in KEY_ANGLES) {
|
||||
e.preventDefault();
|
||||
this.keys.delete(e.code);
|
||||
}
|
||||
}
|
||||
|
||||
private handleMouseMove(e: MouseEvent): void {
|
||||
this.mouseX = e.clientX;
|
||||
this.mouseY = e.clientY;
|
||||
}
|
||||
|
||||
private handleMouseDown(e: MouseEvent): void {
|
||||
if (e.button === 0) {
|
||||
this.mouseDown = true;
|
||||
}
|
||||
}
|
||||
|
||||
private handleMouseUp(e: MouseEvent): void {
|
||||
if (e.button === 0) {
|
||||
this.mouseDown = false;
|
||||
}
|
||||
}
|
||||
|
||||
private handleContextMenu(e: Event): void {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
// ─── Query Methods ─────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Compute movement angle from active WASD keys.
|
||||
* Returns -1 if no movement keys are pressed.
|
||||
* Diagonal movement averages the angles of active keys.
|
||||
*/
|
||||
getMoveAngle(): number {
|
||||
if (this.keys.size === 0) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
let sumX = 0;
|
||||
let sumY = 0;
|
||||
|
||||
for (const key of this.keys) {
|
||||
const angle = KEY_ANGLES[key];
|
||||
if (angle !== undefined) {
|
||||
sumX += Math.cos(angle);
|
||||
sumY += Math.sin(angle);
|
||||
}
|
||||
}
|
||||
|
||||
return Math.atan2(sumY, sumX);
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute aim angle in world space from mouse position.
|
||||
* Converts screen mouse coords to world coords using camera position,
|
||||
* then computes angle from player to mouse in world space.
|
||||
*/
|
||||
getAimAngle(cameraX: number, cameraY: number, playerX: number, playerY: number): number {
|
||||
// Convert screen mouse to world coordinates
|
||||
const worldMouseX = this.mouseX - this.canvas.width / 2 + cameraX;
|
||||
const worldMouseY = this.mouseY - this.canvas.height / 2 + cameraY;
|
||||
return Math.atan2(worldMouseY - playerY, worldMouseX - playerX);
|
||||
}
|
||||
|
||||
/** Is the player currently shooting (left mouse held) */
|
||||
isShooting(): boolean {
|
||||
return this.mouseDown;
|
||||
}
|
||||
|
||||
// ─── Serialization ─────────────────────────────────────────────────────────
|
||||
|
||||
/** Build a PlayerInput from the current input state */
|
||||
getInput(cameraX: number, cameraY: number, playerX: number, playerY: number): PlayerInput {
|
||||
globalSeq++;
|
||||
return {
|
||||
seq: globalSeq,
|
||||
moveAngle: this.getMoveAngle(),
|
||||
aimAngle: this.getAimAngle(cameraX, cameraY, playerX, playerY),
|
||||
isShooting: this.mouseDown,
|
||||
};
|
||||
}
|
||||
|
||||
// ─── Input Sending ─────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Start sending input at 60Hz.
|
||||
* @param getCamera - Returns current camera position [x, y]
|
||||
* @param getPlayer - Returns current player position [x, y]
|
||||
* @param sendFn - Callback that receives the PlayerInput
|
||||
*/
|
||||
startSending(
|
||||
getCamera: () => [number, number],
|
||||
getPlayer: () => [number, number],
|
||||
sendFn: (input: PlayerInput) => void
|
||||
): void {
|
||||
this.sendCallback = sendFn;
|
||||
this.inputInterval = window.setInterval(() => {
|
||||
const [camX, camY] = getCamera();
|
||||
const [plX, plY] = getPlayer();
|
||||
const input = this.getInput(camX, camY, plX, plY);
|
||||
sendFn(input);
|
||||
}, INPUT_MS);
|
||||
}
|
||||
|
||||
/** Stop the input sending interval */
|
||||
stopSending(): void {
|
||||
if (this.inputInterval !== null) {
|
||||
clearInterval(this.inputInterval);
|
||||
this.inputInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Cleanup ───────────────────────────────────────────────────────────────
|
||||
|
||||
/** Remove all event listeners */
|
||||
destroy(): void {
|
||||
this.stopSending();
|
||||
window.removeEventListener('keydown', this.boundKeyDown);
|
||||
window.removeEventListener('keyup', this.boundKeyUp);
|
||||
window.removeEventListener('mousemove', this.boundMouseMove);
|
||||
window.removeEventListener('mousedown', this.boundMouseDown);
|
||||
window.removeEventListener('mouseup', this.boundMouseUp);
|
||||
window.removeEventListener('contextmenu', this.boundContextMenu);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Entity Interpolation (Pure Functions)
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import { lerp, lerpAngle, vec2 } from '@guncircle/shared';
|
||||
import type { Player, Bullet } from '@guncircle/shared';
|
||||
import { POS_DRIFT_THRESHOLD } from '@guncircle/shared';
|
||||
|
||||
// ─── Snapshot Types ──────────────────────────────────────────────────────────
|
||||
|
||||
/** A lightweight snapshot of player state for interpolation */
|
||||
export interface PlayerSnapshot {
|
||||
x: number;
|
||||
y: number;
|
||||
angle: number;
|
||||
hp: number;
|
||||
recoilOffset: number;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/** A lightweight snapshot of bullet state for interpolation */
|
||||
export interface BulletSnapshot {
|
||||
x: number;
|
||||
y: number;
|
||||
angle: number;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
/** A server state snapshot at a given time */
|
||||
export interface StateSnapshot {
|
||||
timestamp: number;
|
||||
tick: number;
|
||||
players: Map<string, PlayerSnapshot>;
|
||||
bullets: Map<string, BulletSnapshot>;
|
||||
}
|
||||
|
||||
// ─── Player Interpolation ────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Interpolate between two player snapshots.
|
||||
* @param prev - Previous snapshot
|
||||
* @param curr - Current snapshot
|
||||
* @param t - Interpolation factor [0, 1]
|
||||
* @returns Interpolated snapshot
|
||||
*/
|
||||
export function interpolatePlayer(
|
||||
prev: PlayerSnapshot,
|
||||
curr: PlayerSnapshot,
|
||||
t: number
|
||||
): PlayerSnapshot {
|
||||
return {
|
||||
x: lerp(prev.x, curr.x, t),
|
||||
y: lerp(prev.y, curr.y, t),
|
||||
angle: lerpAngle(prev.angle, curr.angle, t),
|
||||
hp: lerp(prev.hp, curr.hp, t),
|
||||
recoilOffset: lerp(prev.recoilOffset, curr.recoilOffset, t),
|
||||
timestamp: lerp(prev.timestamp, curr.timestamp, t),
|
||||
};
|
||||
}
|
||||
|
||||
// ─── Bullet Interpolation ────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Interpolate between two bullet snapshots.
|
||||
* @param prev - Previous snapshot
|
||||
* @param curr - Current snapshot
|
||||
* @param t - Interpolation factor [0, 1]
|
||||
* @returns Interpolated snapshot
|
||||
*/
|
||||
export function interpolateBullet(
|
||||
prev: BulletSnapshot,
|
||||
curr: BulletSnapshot,
|
||||
t: number
|
||||
): BulletSnapshot {
|
||||
return {
|
||||
x: lerp(prev.x, curr.x, t),
|
||||
y: lerp(prev.y, curr.y, t),
|
||||
angle: lerpAngle(prev.angle, curr.angle, t),
|
||||
timestamp: lerp(prev.timestamp, curr.timestamp, t),
|
||||
};
|
||||
}
|
||||
|
||||
// ─── Server Reconciliation ───────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Check if predicted position has drifted too far from server position.
|
||||
*/
|
||||
export function shouldCorrect(
|
||||
predicted: { x: number; y: number },
|
||||
server: { x: number; y: number }
|
||||
): boolean {
|
||||
const dx = predicted.x - server.x;
|
||||
const dy = predicted.y - server.y;
|
||||
return dx * dx + dy * dy > POS_DRIFT_THRESHOLD * POS_DRIFT_THRESHOLD;
|
||||
}
|
||||
|
||||
/**
|
||||
* Smoothly correct predicted position toward server position.
|
||||
* Uses a lerp at ~15 units/sec for smooth visual correction.
|
||||
*/
|
||||
export function smoothCorrection(
|
||||
predicted: { x: number; y: number },
|
||||
server: { x: number; y: number },
|
||||
dt: number
|
||||
): { x: number; y: number } {
|
||||
// Correction speed: ~15 units per second
|
||||
const correctionSpeed = 15;
|
||||
const diff = vec2.sub(server, predicted);
|
||||
const dist = vec2.len(diff);
|
||||
|
||||
if (dist < 0.1) {
|
||||
return { x: server.x, y: server.y };
|
||||
}
|
||||
|
||||
// Move toward server position at fixed speed, but don't overshoot
|
||||
const maxMove = correctionSpeed * dt;
|
||||
if (dist <= maxMove) {
|
||||
return { x: server.x, y: server.y };
|
||||
}
|
||||
|
||||
const t = maxMove / dist;
|
||||
return {
|
||||
x: predicted.x + diff.x * t,
|
||||
y: predicted.y + diff.y * t,
|
||||
};
|
||||
}
|
||||
|
||||
// ─── Snapshot Builders ───────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Build a state snapshot from the current Colyseus room state.
|
||||
*/
|
||||
export function buildSnapshot(
|
||||
players: Map<string, Player>,
|
||||
bullets: Map<string, Bullet>,
|
||||
tick: number
|
||||
): StateSnapshot {
|
||||
const playerSnaps = new Map<string, PlayerSnapshot>();
|
||||
const bulletSnaps = new Map<string, BulletSnapshot>();
|
||||
|
||||
for (const [id, p] of players) {
|
||||
playerSnaps.set(id, {
|
||||
x: p.x,
|
||||
y: p.y,
|
||||
angle: p.angle,
|
||||
hp: p.hp,
|
||||
recoilOffset: p.recoilOffset,
|
||||
timestamp: performance.now(),
|
||||
});
|
||||
}
|
||||
|
||||
for (const [id, b] of bullets) {
|
||||
bulletSnaps.set(id, {
|
||||
x: b.x,
|
||||
y: b.y,
|
||||
angle: b.angle,
|
||||
timestamp: performance.now(),
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
timestamp: performance.now(),
|
||||
tick,
|
||||
players: playerSnaps,
|
||||
bullets: bulletSnaps,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Client Entry Point
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import { Menu } from './menu.js';
|
||||
import { startGame, stopGame } from './game.js';
|
||||
import { startOfflineGame, stopOfflineGame } from './offline-game.js';
|
||||
|
||||
// ─── Application State ───────────────────────────────────────────────────────
|
||||
|
||||
/** Is the game currently running */
|
||||
let isPlaying = false;
|
||||
/** Is offline mode active */
|
||||
let isOffline = false;
|
||||
|
||||
// ─── DOM Ready ───────────────────────────────────────────────────────────────
|
||||
|
||||
function init(): void {
|
||||
// Create menu handler
|
||||
const menu = new Menu();
|
||||
|
||||
// Register play callback
|
||||
menu.onPlay((name: string) => {
|
||||
if (isPlaying) return;
|
||||
|
||||
isPlaying = true;
|
||||
menu.hide();
|
||||
|
||||
// Start in offline mode immediately (no server required)
|
||||
isOffline = true;
|
||||
startOfflineGame(name);
|
||||
});
|
||||
|
||||
// Show menu initially
|
||||
menu.show();
|
||||
|
||||
// Handle Enter key on menu
|
||||
const nameInput = document.getElementById('nameInput') as HTMLInputElement | null;
|
||||
if (nameInput) {
|
||||
nameInput.focus();
|
||||
}
|
||||
|
||||
// Handle page unload — clean up
|
||||
window.addEventListener('beforeunload', () => {
|
||||
stopGame();
|
||||
stopOfflineGame();
|
||||
});
|
||||
|
||||
// Handle escape to return to menu
|
||||
window.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && isPlaying) {
|
||||
stopGame();
|
||||
stopOfflineGame();
|
||||
isPlaying = false;
|
||||
isOffline = false;
|
||||
menu.show();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Start when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Menu Handler
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
export class Menu {
|
||||
private readonly menuEl: HTMLDivElement;
|
||||
private readonly nameInput: HTMLInputElement;
|
||||
private readonly playBtn: HTMLButtonElement;
|
||||
private playCallback: ((name: string) => void) | null = null;
|
||||
private keyHandler: ((e: KeyboardEvent) => void) | null = null;
|
||||
|
||||
constructor() {
|
||||
const menuEl = document.getElementById('menu') as HTMLDivElement | null;
|
||||
const nameInput = document.getElementById('nameInput') as HTMLInputElement | null;
|
||||
const playBtn = document.getElementById('playBtn') as HTMLButtonElement | null;
|
||||
|
||||
if (!menuEl || !nameInput || !playBtn) {
|
||||
throw new Error('Menu: required DOM elements not found');
|
||||
}
|
||||
|
||||
this.menuEl = menuEl;
|
||||
this.nameInput = nameInput;
|
||||
this.playBtn = playBtn;
|
||||
|
||||
this.setupListeners();
|
||||
}
|
||||
|
||||
private setupListeners(): void {
|
||||
// Play button click
|
||||
this.playBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
this.handlePlay();
|
||||
});
|
||||
|
||||
// Enter key in input field
|
||||
this.keyHandler = (e: KeyboardEvent): void => {
|
||||
e.preventDefault();
|
||||
if (e.key === 'Enter') {
|
||||
this.handlePlay();
|
||||
}
|
||||
};
|
||||
this.nameInput.addEventListener('keydown', this.keyHandler);
|
||||
}
|
||||
|
||||
private handlePlay(): void {
|
||||
const name = this.getName();
|
||||
if (this.playCallback) {
|
||||
this.playCallback(name);
|
||||
}
|
||||
}
|
||||
|
||||
/** Get trimmed name from input, defaulting to "Player" */
|
||||
getName(): string {
|
||||
const raw = this.nameInput.value.trim();
|
||||
return raw.length > 0 ? raw.slice(0, 16) : 'Player';
|
||||
}
|
||||
|
||||
/** Register callback for when player clicks PLAY */
|
||||
onPlay(callback: (name: string) => void): void {
|
||||
this.playCallback = callback;
|
||||
}
|
||||
|
||||
/** Show the menu overlay */
|
||||
show(): void {
|
||||
this.menuEl.style.display = 'flex';
|
||||
this.nameInput.focus();
|
||||
}
|
||||
|
||||
/** Hide the menu overlay */
|
||||
hide(): void {
|
||||
this.menuEl.style.display = 'none';
|
||||
this.nameInput.blur();
|
||||
// Move focus to canvas so it receives keyboard events
|
||||
const canvas = document.getElementById('game') as HTMLCanvasElement | null;
|
||||
if (canvas) {
|
||||
canvas.focus();
|
||||
}
|
||||
}
|
||||
|
||||
/** Clean up event listeners */
|
||||
destroy(): void {
|
||||
if (this.keyHandler) {
|
||||
this.nameInput.removeEventListener('keydown', this.keyHandler);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,402 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Network Manager (Colyseus Client)
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import { Client, Room } from 'colyseus.js';
|
||||
import {
|
||||
RoomState,
|
||||
Player,
|
||||
type PlayerInput,
|
||||
POS_DRIFT_THRESHOLD,
|
||||
PLAYER_BASE_SPEED,
|
||||
PLAYER_FRICTION,
|
||||
ARENA_WIDTH,
|
||||
ARENA_HEIGHT,
|
||||
lerp,
|
||||
vec2,
|
||||
} from '@guncircle/shared';
|
||||
import {
|
||||
buildSnapshot,
|
||||
shouldCorrect,
|
||||
smoothCorrection,
|
||||
type StateSnapshot,
|
||||
type PlayerSnapshot,
|
||||
} from './interpolation.js';
|
||||
|
||||
/** Interpolation delay in ms — render 100ms behind server */
|
||||
const INTERP_DELAY_MS = 100;
|
||||
|
||||
/** Max snapshots to keep in buffer */
|
||||
const MAX_SNAPSHOTS = 32;
|
||||
|
||||
/** Smooth correction lerp factor per second */
|
||||
const CORRECTION_LERP_RATE = 5;
|
||||
|
||||
/** Pending input with sequence number */
|
||||
interface PendingInput {
|
||||
seq: number;
|
||||
input: PlayerInput;
|
||||
predictedX: number;
|
||||
predictedY: number;
|
||||
}
|
||||
|
||||
/** Predicted player state for client-side prediction */
|
||||
interface PredictedState {
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
lastProcessedSeq: number;
|
||||
}
|
||||
|
||||
export class NetworkManager {
|
||||
private client: Client | null = null;
|
||||
private room: Room<RoomState> | null = null;
|
||||
/** Local player session ID */
|
||||
localPlayerId: string | null = null;
|
||||
/** Current room state */
|
||||
state: RoomState | null = null;
|
||||
/** Snapshot buffer for interpolation [oldest ... newest] */
|
||||
private snapshots: StateSnapshot[] = [];
|
||||
/** Pending inputs for reconciliation */
|
||||
private pendingInputs: PendingInput[] = [];
|
||||
/** Predicted local player state */
|
||||
predictedState: PredictedState | null = null;
|
||||
/** Is connected */
|
||||
connected = false;
|
||||
/** Connection error message */
|
||||
error: string | null = null;
|
||||
/** On disconnect callback */
|
||||
private disconnectCallback: (() => void) | null = null;
|
||||
/** On connect callback */
|
||||
private connectCallback: ((localId: string) => void) | null = null;
|
||||
/** Current input sequence number */
|
||||
private inputSeq = 0;
|
||||
|
||||
// ─── Connection ────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Connect to Colyseus server and join a room.
|
||||
*/
|
||||
async connect(roomName: string, options: { name: string }): Promise<void> {
|
||||
try {
|
||||
// Connect via WebSocket proxy
|
||||
this.client = new Client('ws://localhost:3000');
|
||||
|
||||
this.room = await Promise.race([
|
||||
this.client.joinOrCreate<RoomState>(roomName, {
|
||||
name: options.name.slice(0, 16),
|
||||
}),
|
||||
new Promise<never>((_, reject) =>
|
||||
setTimeout(() => reject(new Error('Connection timed out')), 5000)
|
||||
),
|
||||
]);
|
||||
|
||||
this.localPlayerId = this.room.sessionId;
|
||||
this.connected = true;
|
||||
this.error = null;
|
||||
|
||||
this.setupRoomHandlers();
|
||||
|
||||
if (this.connectCallback) {
|
||||
this.connectCallback(this.localPlayerId);
|
||||
}
|
||||
} catch (err) {
|
||||
this.connected = false;
|
||||
this.error = err instanceof Error ? err.message : 'Connection failed';
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
private setupRoomHandlers(): void {
|
||||
if (!this.room) return;
|
||||
|
||||
this.room.onStateChange((state) => {
|
||||
this.handleStateChange(state);
|
||||
});
|
||||
|
||||
this.room.onMessage('error', (msg: string) => {
|
||||
console.error('[Network] Server error:', msg);
|
||||
});
|
||||
|
||||
this.room.onLeave((code) => {
|
||||
console.log(`[Network] Left room (code: ${code})`);
|
||||
this.connected = false;
|
||||
this.localPlayerId = null;
|
||||
if (this.disconnectCallback) {
|
||||
this.disconnectCallback();
|
||||
}
|
||||
});
|
||||
|
||||
this.room.onError((code: number) => {
|
||||
console.error('[Network] Room error, code:', code);
|
||||
this.error = `Connection error (code: ${code})`;
|
||||
});
|
||||
}
|
||||
|
||||
private handleStateChange(newState: RoomState): void {
|
||||
this.state = newState;
|
||||
|
||||
// Build and store snapshot for interpolation
|
||||
const snapshot = buildSnapshot(
|
||||
newState.players,
|
||||
newState.bullets,
|
||||
newState.tick
|
||||
);
|
||||
this.addSnapshot(snapshot);
|
||||
|
||||
// Server reconciliation for local player
|
||||
if (this.localPlayerId) {
|
||||
this.reconcileLocalPlayer(snapshot);
|
||||
}
|
||||
}
|
||||
|
||||
private addSnapshot(snapshot: StateSnapshot): void {
|
||||
this.snapshots.push(snapshot);
|
||||
if (this.snapshots.length > MAX_SNAPSHOTS) {
|
||||
this.snapshots.shift();
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Client-Side Prediction ────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Apply local movement prediction immediately.
|
||||
* Call this each frame with the current input to predict local position.
|
||||
*/
|
||||
applyPrediction(input: PlayerInput, dt: number): void {
|
||||
if (!this.localPlayerId || !this.state) return;
|
||||
|
||||
const serverPlayer = this.state.players.get(this.localPlayerId);
|
||||
if (!serverPlayer) return;
|
||||
|
||||
// Initialize predicted state from server if needed
|
||||
if (!this.predictedState) {
|
||||
this.predictedState = {
|
||||
x: serverPlayer.x,
|
||||
y: serverPlayer.y,
|
||||
vx: serverPlayer.vx,
|
||||
vy: serverPlayer.vy,
|
||||
lastProcessedSeq: input.seq,
|
||||
};
|
||||
}
|
||||
|
||||
// Apply movement based on input
|
||||
if (input.moveAngle >= 0) {
|
||||
const speed = PLAYER_BASE_SPEED * dt;
|
||||
this.predictedState.vx += Math.cos(input.moveAngle) * speed * 5;
|
||||
this.predictedState.vy += Math.sin(input.moveAngle) * speed * 5;
|
||||
}
|
||||
|
||||
// Apply friction
|
||||
this.predictedState.vx *= PLAYER_FRICTION;
|
||||
this.predictedState.vy *= PLAYER_FRICTION;
|
||||
|
||||
// Update position
|
||||
this.predictedState.x += this.predictedState.vx * dt;
|
||||
this.predictedState.y += this.predictedState.vy * dt;
|
||||
|
||||
// Clamp to arena
|
||||
this.predictedState.x = Math.max(0, Math.min(ARENA_WIDTH, this.predictedState.x));
|
||||
this.predictedState.y = Math.max(0, Math.min(ARENA_HEIGHT, this.predictedState.y));
|
||||
|
||||
// Store pending input for reconciliation
|
||||
this.pendingInputs.push({
|
||||
seq: input.seq,
|
||||
input,
|
||||
predictedX: this.predictedState.x,
|
||||
predictedY: this.predictedState.y,
|
||||
});
|
||||
|
||||
// Keep only last ~2 seconds of pending inputs
|
||||
const maxPending = 120;
|
||||
if (this.pendingInputs.length > maxPending) {
|
||||
this.pendingInputs = this.pendingInputs.slice(-maxPending);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Server Reconciliation ─────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Compare predicted position to server position and correct if needed.
|
||||
*/
|
||||
private reconcileLocalPlayer(serverSnapshot: StateSnapshot): void {
|
||||
if (!this.predictedState || !this.localPlayerId) return;
|
||||
|
||||
const serverPlayer = serverSnapshot.players.get(this.localPlayerId);
|
||||
if (!serverPlayer) return;
|
||||
|
||||
// Remove acknowledged inputs (anything older than the server tick)
|
||||
// Since we don't have per-ack sequence numbers from server snapshots,
|
||||
// we keep recent inputs and use a sliding window approach
|
||||
const tooOld = this.pendingInputs.filter(
|
||||
(pi) => pi.seq < serverSnapshot.tick - 4
|
||||
);
|
||||
if (tooOld.length > 0) {
|
||||
this.pendingInputs = this.pendingInputs.filter(
|
||||
(pi) => pi.seq >= serverSnapshot.tick - 4
|
||||
);
|
||||
}
|
||||
|
||||
// Check for drift between predicted and server positions
|
||||
if (
|
||||
shouldCorrect(
|
||||
{ x: this.predictedState.x, y: this.predictedState.y },
|
||||
{ x: serverPlayer.x, y: serverPlayer.y }
|
||||
)
|
||||
) {
|
||||
// Snap predicted state toward server position
|
||||
this.predictedState.x = lerp(
|
||||
this.predictedState.x,
|
||||
serverPlayer.x,
|
||||
0.3
|
||||
);
|
||||
this.predictedState.y = lerp(
|
||||
this.predictedState.y,
|
||||
serverPlayer.y,
|
||||
0.3
|
||||
);
|
||||
// Reset velocity to zero (server sends velocity, but PlayerSnapshot doesn't include it)
|
||||
// Velocity gets rebuilt by next frame's prediction
|
||||
this.predictedState.vx *= 0.5;
|
||||
this.predictedState.vy *= 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the reconciled local player position for rendering.
|
||||
* Returns the predicted position (which has been nudged toward server).
|
||||
*/
|
||||
getLocalPosition(): { x: number; y: number } | null {
|
||||
if (this.predictedState) {
|
||||
return { x: this.predictedState.x, y: this.predictedState.y };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// ─── Entity Interpolation ──────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Get interpolated player data for rendering.
|
||||
* Returns interpolated position between server snapshots at (now - INTERP_DELAY_MS).
|
||||
*/
|
||||
getInterpolatedPlayer(playerId: string): PlayerSnapshot | null {
|
||||
const renderTime = performance.now() - INTERP_DELAY_MS;
|
||||
return this.getInterpolatedPlayerAtTime(playerId, renderTime);
|
||||
}
|
||||
|
||||
private getInterpolatedPlayerAtTime(
|
||||
playerId: string,
|
||||
renderTime: number
|
||||
): PlayerSnapshot | null {
|
||||
const snaps = this.snapshots;
|
||||
if (snaps.length < 2) {
|
||||
// Not enough history — return latest known state
|
||||
const latest = snaps[snaps.length - 1];
|
||||
if (latest) {
|
||||
return latest.players.get(playerId) ?? null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Find two snapshots that bracket renderTime
|
||||
let beforeIdx = -1;
|
||||
for (let i = snaps.length - 2; i >= 0; i--) {
|
||||
if (snaps[i]!.timestamp <= renderTime) {
|
||||
beforeIdx = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (beforeIdx === -1) {
|
||||
// renderTime is before all snapshots — return earliest
|
||||
const p = snaps[0]!.players.get(playerId);
|
||||
return p ?? null;
|
||||
}
|
||||
|
||||
const before = snaps[beforeIdx]!;
|
||||
const after = snaps[beforeIdx + 1]!;
|
||||
const playerBefore = before.players.get(playerId);
|
||||
const playerAfter = after.players.get(playerId);
|
||||
|
||||
if (!playerBefore || !playerAfter) {
|
||||
// Player missing from one snapshot
|
||||
return playerBefore ?? playerAfter ?? null;
|
||||
}
|
||||
|
||||
// Calculate interpolation factor
|
||||
const timeSpan = after.timestamp - before.timestamp;
|
||||
if (timeSpan === 0) return playerBefore;
|
||||
|
||||
const t = Math.max(0, Math.min(1, (renderTime - before.timestamp) / timeSpan));
|
||||
|
||||
return {
|
||||
x: lerp(playerBefore.x, playerAfter.x, t),
|
||||
y: lerp(playerBefore.y, playerAfter.y, t),
|
||||
angle: lerp(playerBefore.angle, playerAfter.angle, t),
|
||||
hp: lerp(playerBefore.hp, playerAfter.hp, t),
|
||||
recoilOffset: lerp(playerBefore.recoilOffset, playerAfter.recoilOffset, t),
|
||||
timestamp: renderTime,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the interpolated position for a remote entity at render time.
|
||||
* Used by the renderer for other players.
|
||||
*/
|
||||
getEntityPosition(entityId: string): { x: number; y: number } | null {
|
||||
const interp = this.getInterpolatedPlayer(entityId);
|
||||
if (interp) {
|
||||
return { x: interp.x, y: interp.y };
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// ─── Input Sending ─────────────────────────────────────────────────────────
|
||||
|
||||
/** Send player input to the server */
|
||||
sendInput(input: PlayerInput): void {
|
||||
if (!this.room || !this.connected) return;
|
||||
|
||||
this.inputSeq++;
|
||||
const inputWithSeq: PlayerInput = {
|
||||
...input,
|
||||
seq: this.inputSeq,
|
||||
};
|
||||
|
||||
this.room.send('input', inputWithSeq);
|
||||
}
|
||||
|
||||
/** Send upgrade choice to the server */
|
||||
sendUpgrade(choice: number): void {
|
||||
if (!this.room || !this.connected) return;
|
||||
this.room.send('upgrade', { choice });
|
||||
}
|
||||
|
||||
// ─── Callbacks ─────────────────────────────────────────────────────────────
|
||||
|
||||
onConnect(callback: (localId: string) => void): void {
|
||||
this.connectCallback = callback;
|
||||
}
|
||||
|
||||
onDisconnect(callback: () => void): void {
|
||||
this.disconnectCallback = callback;
|
||||
}
|
||||
|
||||
// ─── Disconnect ────────────────────────────────────────────────────────────
|
||||
|
||||
/** Leave the room and clean up */
|
||||
disconnect(): void {
|
||||
if (this.room) {
|
||||
this.room.leave();
|
||||
this.room = null;
|
||||
}
|
||||
this.client = null;
|
||||
this.connected = false;
|
||||
this.localPlayerId = null;
|
||||
this.state = null;
|
||||
this.snapshots = [];
|
||||
this.pendingInputs = [];
|
||||
this.predictedState = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Offline Game Bridge
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// Connects OfflineEngine to Renderer, Camera, Input, and HUD for a fully
|
||||
// playable single-player experience without a server.
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import { OfflineEngine } from './offline-mode.js';
|
||||
import { Renderer } from './renderer.js';
|
||||
import { Camera } from './camera.js';
|
||||
import { InputHandler } from './input.js';
|
||||
import { HUD } from './hud.js';
|
||||
import type { PlayerInput } from '@guncircle/shared';
|
||||
|
||||
/** Max delta time to prevent spiral of death */
|
||||
const MAX_DT = 0.1;
|
||||
/** Camera follow lerp rate */
|
||||
const CAMERA_LERP_SPEED = 8;
|
||||
|
||||
/** Active offline game state */
|
||||
interface OfflineGameState {
|
||||
canvas: HTMLCanvasElement;
|
||||
ctx: CanvasRenderingContext2D;
|
||||
camera: Camera;
|
||||
input: InputHandler;
|
||||
renderer: Renderer;
|
||||
hud: HUD;
|
||||
engine: OfflineEngine;
|
||||
lastTime: number;
|
||||
running: boolean;
|
||||
}
|
||||
|
||||
let game: OfflineGameState | null = null;
|
||||
let rafHandle = 0;
|
||||
let inputInterval = 0;
|
||||
|
||||
/**
|
||||
* Start the offline game with the given player name.
|
||||
*/
|
||||
export function startOfflineGame(playerName: string): void {
|
||||
// Clean up any existing game
|
||||
stopOfflineGame();
|
||||
|
||||
// Get canvas
|
||||
const canvas = document.getElementById('game') as HTMLCanvasElement | null;
|
||||
if (!canvas) throw new Error('Game canvas not found');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
const ctx = canvas.getContext('2d', { alpha: false });
|
||||
if (!ctx) throw new Error('Could not get 2D context');
|
||||
|
||||
// Initialize subsystems
|
||||
const camera = new Camera(canvas.width, canvas.height);
|
||||
const input = new InputHandler(canvas);
|
||||
const renderer = new Renderer(ctx, canvas);
|
||||
const hud = new HUD();
|
||||
const engine = new OfflineEngine();
|
||||
|
||||
// Create game state
|
||||
game = {
|
||||
canvas,
|
||||
ctx,
|
||||
camera,
|
||||
input,
|
||||
renderer,
|
||||
hud,
|
||||
engine,
|
||||
lastTime: performance.now(),
|
||||
running: true,
|
||||
};
|
||||
|
||||
// Handle resize
|
||||
const handleResize = (): void => {
|
||||
if (!game) return;
|
||||
const w = window.innerWidth;
|
||||
const h = window.innerHeight;
|
||||
game.canvas.width = w;
|
||||
game.canvas.height = h;
|
||||
game.camera.resize(w, h);
|
||||
game.renderer.resize(w, h);
|
||||
};
|
||||
window.addEventListener('resize', handleResize);
|
||||
(game as unknown as Record<string, unknown>)['_resizeHandler'] = handleResize;
|
||||
|
||||
// Start engine
|
||||
engine.start(playerName);
|
||||
engine.onUpgrade((choice: number) => {
|
||||
engine.applyUpgrade(choice);
|
||||
});
|
||||
|
||||
// Setup HUD
|
||||
hud.show();
|
||||
hud.onUpgrade((statIdx: number) => {
|
||||
engine.applyUpgrade(statIdx);
|
||||
});
|
||||
|
||||
// Send input at 60Hz to the offline engine
|
||||
input.startSending(
|
||||
// getCamera
|
||||
() => [camera.x, camera.y],
|
||||
// getPlayer
|
||||
() => {
|
||||
const p = engine.state.players.get(engine.localPlayerId);
|
||||
return p ? [p.x, p.y] : [camera.x, camera.y];
|
||||
},
|
||||
// sendFn
|
||||
(inputData: PlayerInput) => {
|
||||
if (!game) return;
|
||||
game.engine.processInput(
|
||||
inputData.moveAngle,
|
||||
inputData.aimAngle,
|
||||
inputData.isShooting,
|
||||
inputData.seq
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
// Start game loop
|
||||
game.lastTime = performance.now();
|
||||
gameLoop(performance.now());
|
||||
}
|
||||
|
||||
/**
|
||||
* Main game loop using requestAnimationFrame.
|
||||
*/
|
||||
function gameLoop(now: number): void {
|
||||
if (!game || !game.running) return;
|
||||
|
||||
let dt = (now - game.lastTime) / 1000;
|
||||
game.lastTime = now;
|
||||
if (dt > MAX_DT) dt = MAX_DT;
|
||||
|
||||
// Update camera to follow local player
|
||||
const state = game.engine.state;
|
||||
const localPlayer = state.players.get(game.engine.localPlayerId);
|
||||
if (localPlayer && localPlayer.alive) {
|
||||
const rate = Math.min(CAMERA_LERP_SPEED * dt, 1);
|
||||
game.camera.x += (localPlayer.x - game.camera.x) * rate;
|
||||
game.camera.y += (localPlayer.y - game.camera.y) * rate;
|
||||
game.camera.clampToArena();
|
||||
}
|
||||
|
||||
// Update HUD
|
||||
game.hud.update(state, game.engine.localPlayerId);
|
||||
|
||||
// Render
|
||||
game.renderer.render(state, game.camera, game.engine.localPlayerId, dt);
|
||||
|
||||
// Queue next frame
|
||||
rafHandle = requestAnimationFrame(gameLoop);
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop the offline game and clean up all resources.
|
||||
*/
|
||||
export function stopOfflineGame(): void {
|
||||
if (!game) return;
|
||||
|
||||
game.running = false;
|
||||
cancelAnimationFrame(rafHandle);
|
||||
clearInterval(inputInterval);
|
||||
|
||||
game.input.destroy();
|
||||
game.hud.destroy();
|
||||
|
||||
const resizeHandler = (game as unknown as Record<string, unknown>)['_resizeHandler'] as
|
||||
| (() => void)
|
||||
| undefined;
|
||||
if (resizeHandler) {
|
||||
window.removeEventListener('resize', resizeHandler);
|
||||
}
|
||||
|
||||
game = null;
|
||||
}
|
||||
@@ -0,0 +1,568 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Offline Demo Mode (Local Single-Player)
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// Provides a fully playable local mode when no server is available.
|
||||
// AI bots move randomly, shoot periodically, drop XP on death.
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import {
|
||||
RoomState, Player, Bullet, XPOrb, LeaderboardEntry,
|
||||
ARENA_WIDTH, ARENA_HEIGHT, PLAYER_BASE_HP, PLAYER_BASE_SPEED,
|
||||
PLAYER_BASE_RADIUS, PLAYER_FRICTION, TICK_MS,
|
||||
XP_LEVELS, lerp, clamp, randFloat, randInt, randSign, vec2,
|
||||
GUN_BARREL_LENGTH,
|
||||
COLORS,
|
||||
type GunConfig,
|
||||
} from '@guncircle/shared';
|
||||
|
||||
// ─── Gun Configs (embedded for offline) ──────────────────────────────────────
|
||||
|
||||
const GUNS: GunConfig[] = [
|
||||
{ id: 'pistol', name: 'Pistol', category: 0, damage: 12, fireRate: 4, bulletSpeed: 400, pelletCount: 1, spread: 0, recoilOffset: 0.06, recoilRecoveryMs: 120, kickbackForce: 30, ammoMax: 12, reloadTimeMs: 1500, bulletSize: 4, penetration: 1, bulletLifetimeMs: 2000, bulletColor: '#f1c40f' },
|
||||
{ id: 'rifle', name: 'Rifle', category: 1, damage: 18, fireRate: 3, bulletSpeed: 500, pelletCount: 1, spread: 0.02, recoilOffset: 0.08, recoilRecoveryMs: 180, kickbackForce: 45, ammoMax: 8, reloadTimeMs: 2000, bulletSize: 4.5, penetration: 2, bulletLifetimeMs: 2500, bulletColor: '#e67e22' },
|
||||
{ id: 'shotgun', name: 'Shotgun', category: 2, damage: 8, fireRate: 1.2, bulletSpeed: 320, pelletCount: 5, spread: 0.25, recoilOffset: 0.15, recoilRecoveryMs: 300, kickbackForce: 80, ammoMax: 5, reloadTimeMs: 2500, bulletSize: 3, penetration: 1, bulletLifetimeMs: 1500, bulletColor: '#9b59b6' },
|
||||
{ id: 'sniper', name: 'Sniper', category: 3, damage: 45, fireRate: 0.8, bulletSpeed: 700, pelletCount: 1, spread: 0, recoilOffset: 0.2, recoilRecoveryMs: 500, kickbackForce: 120, ammoMax: 3, reloadTimeMs: 3000, bulletSize: 6, penetration: 3, bulletLifetimeMs: 3500, bulletColor: '#e74c3c' },
|
||||
{ id: 'smg', name: 'SMG', category: 4, damage: 6, fireRate: 10, bulletSpeed: 380, pelletCount: 1, spread: 0.06, recoilOffset: 0.04, recoilRecoveryMs: 80, kickbackForce: 20, ammoMax: 30, reloadTimeMs: 1800, bulletSize: 3, penetration: 1, bulletLifetimeMs: 1800, bulletColor: '#2ecc71' },
|
||||
];
|
||||
|
||||
// ─── Bot AI ──────────────────────────────────────────────────────────────────
|
||||
|
||||
interface BotState {
|
||||
id: string;
|
||||
changeDirTimer: number;
|
||||
shootTimer: number;
|
||||
aimAngle: number;
|
||||
moveAngle: number;
|
||||
}
|
||||
|
||||
// ─── OfflineEngine ───────────────────────────────────────────────────────────
|
||||
|
||||
export class OfflineEngine {
|
||||
state = new RoomState();
|
||||
localPlayerId = 'local';
|
||||
private bots: Map<string, BotState> = new Map();
|
||||
private bulletLifetimes: Map<string, number> = new Map();
|
||||
private nextBulletId = 0;
|
||||
private tickCount = 0;
|
||||
private inputSeq = 0;
|
||||
private lastShotTime = 0;
|
||||
private reloadTimer = 0;
|
||||
private isReloading = false;
|
||||
private ammo = 12;
|
||||
private localRecoil = 0;
|
||||
private localVx = 0;
|
||||
private localVy = 0;
|
||||
private animTime = 0;
|
||||
private upgradeCallback: ((choice: number) => void) | null = null;
|
||||
private lastBotId = 0;
|
||||
|
||||
/** Start the offline mode with the given player name */
|
||||
start(playerName: string): void {
|
||||
// Create local player
|
||||
const local = new Player();
|
||||
local.x = ARENA_WIDTH / 2;
|
||||
local.y = ARENA_HEIGHT / 2;
|
||||
local.name = playerName.substring(0, 16) || 'Player';
|
||||
local.hp = PLAYER_BASE_HP;
|
||||
local.maxHp = PLAYER_BASE_HP;
|
||||
local.level = 1;
|
||||
local.xp = 0;
|
||||
local.xpToNext = XP_LEVELS[1] ?? 50;
|
||||
local.gunType = 0;
|
||||
local.score = 0;
|
||||
local.alive = true;
|
||||
local.radius = PLAYER_BASE_RADIUS;
|
||||
local.ammo = GUNS[0]!.ammoMax;
|
||||
local.maxAmmo = GUNS[0]!.ammoMax;
|
||||
local.isReloading = false;
|
||||
local.recoilOffset = 0;
|
||||
local.angle = 0;
|
||||
local.vx = 0;
|
||||
local.vy = 0;
|
||||
this.state.players.set(this.localPlayerId, local);
|
||||
|
||||
// Spawn bots
|
||||
this.spawnBots(8);
|
||||
|
||||
// Spawn some initial XP orbs
|
||||
for (let i = 0; i < 20; i++) {
|
||||
this.spawnRandomOrb();
|
||||
}
|
||||
|
||||
// Start tick loop
|
||||
setInterval(() => this.tick(), TICK_MS);
|
||||
}
|
||||
|
||||
private spawnBots(count: number): void {
|
||||
const names = ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Ghost', 'Hunter', 'Inferno', 'Juggernaut', 'Kraken', 'Lynx'];
|
||||
for (let i = 0; i < count; i++) {
|
||||
this.lastBotId++;
|
||||
const id = `bot_${this.lastBotId}`;
|
||||
const bot = new Player();
|
||||
bot.x = randFloat(200, ARENA_WIDTH - 200);
|
||||
bot.y = randFloat(200, ARENA_HEIGHT - 200);
|
||||
bot.name = names[i % names.length]!;
|
||||
bot.hp = PLAYER_BASE_HP;
|
||||
bot.maxHp = PLAYER_BASE_HP;
|
||||
bot.level = randInt(1, 6);
|
||||
bot.xp = 0;
|
||||
bot.xpToNext = XP_LEVELS[bot.level] ?? 50;
|
||||
bot.gunType = randInt(0, 5);
|
||||
bot.score = 0;
|
||||
bot.alive = true;
|
||||
bot.radius = PLAYER_BASE_RADIUS;
|
||||
// Give bots XP so they drop meaningful orbs on death
|
||||
bot.xp = Math.floor((XP_LEVELS[bot.level] ?? 50) * 0.4);
|
||||
const gun = GUNS[bot.gunType]!;
|
||||
bot.ammo = gun.ammoMax;
|
||||
bot.maxAmmo = gun.ammoMax;
|
||||
bot.isReloading = false;
|
||||
bot.recoilOffset = 0;
|
||||
bot.angle = randFloat(0, Math.PI * 2);
|
||||
bot.vx = 0;
|
||||
bot.vy = 0;
|
||||
this.state.players.set(id, bot);
|
||||
|
||||
this.bots.set(id, {
|
||||
id,
|
||||
changeDirTimer: randFloat(1, 3),
|
||||
shootTimer: randFloat(0.5, 2),
|
||||
aimAngle: bot.angle,
|
||||
moveAngle: randFloat(0, Math.PI * 2),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private spawnRandomOrb(): void {
|
||||
const orb = new XPOrb();
|
||||
orb.x = randFloat(100, ARENA_WIDTH - 100);
|
||||
orb.y = randFloat(100, ARENA_HEIGHT - 100);
|
||||
orb.value = randInt(5, 25);
|
||||
orb.lifetime = 30;
|
||||
this.state.xpOrbs.set(`orb_${randInt(0, 1000000)}`, orb);
|
||||
}
|
||||
|
||||
// ─── Input ───────────────────────────────────────────────────────────────────
|
||||
|
||||
processInput(moveAngle: number, aimAngle: number, isShooting: boolean, _seq: number): void {
|
||||
this.inputSeq++;
|
||||
const local = this.state.players.get(this.localPlayerId);
|
||||
if (!local || !local.alive) return;
|
||||
|
||||
// Update aim
|
||||
local.angle = aimAngle;
|
||||
|
||||
// Movement
|
||||
if (moveAngle >= 0) {
|
||||
const speed = PLAYER_BASE_SPEED * 0.15;
|
||||
this.localVx += Math.cos(moveAngle) * speed;
|
||||
this.localVy += Math.sin(moveAngle) * speed;
|
||||
const spd = Math.sqrt(this.localVx * this.localVx + this.localVy * this.localVy);
|
||||
if (spd > PLAYER_BASE_SPEED) {
|
||||
const s = PLAYER_BASE_SPEED / spd;
|
||||
this.localVx *= s;
|
||||
this.localVy *= s;
|
||||
}
|
||||
}
|
||||
|
||||
// Shooting
|
||||
if (isShooting) {
|
||||
this.localShoot(local, aimAngle);
|
||||
}
|
||||
|
||||
// Apply movement
|
||||
this.localVx *= PLAYER_FRICTION;
|
||||
this.localVy *= PLAYER_FRICTION;
|
||||
local.x += this.localVx * (TICK_MS / 1000);
|
||||
local.y += this.localVy * (TICK_MS / 1000);
|
||||
local.x = clamp(local.x, 0, ARENA_WIDTH);
|
||||
local.y = clamp(local.y, 0, ARENA_HEIGHT);
|
||||
local.vx = this.localVx;
|
||||
local.vy = this.localVy;
|
||||
|
||||
// Recoil recovery
|
||||
this.localRecoil = lerp(this.localRecoil, 0, 0.15);
|
||||
local.recoilOffset = this.localRecoil;
|
||||
|
||||
// Reload
|
||||
this.updateReload();
|
||||
}
|
||||
|
||||
private localShoot(player: Player, aimAngle: number): void {
|
||||
if (this.isReloading) return;
|
||||
if (this.ammo <= 0) {
|
||||
this.startReload(player);
|
||||
return;
|
||||
}
|
||||
|
||||
const gun = GUNS[0]!; // Always pistol in offline mode
|
||||
const now = performance.now();
|
||||
if (now - this.lastShotTime < 1000 / gun.fireRate) return;
|
||||
|
||||
// Apply recoil
|
||||
this.localRecoil = randSign() * gun.recoilOffset;
|
||||
player.recoilOffset = this.localRecoil;
|
||||
|
||||
// Kickback
|
||||
const kb = vec2.fromAngle(aimAngle + Math.PI, gun.kickbackForce * 0.5);
|
||||
this.localVx += kb.x;
|
||||
this.localVy += kb.y;
|
||||
|
||||
// Spawn bullet
|
||||
const spawnPos = vec2.fromAngle(aimAngle + this.localRecoil, GUN_BARREL_LENGTH);
|
||||
const bullet = new Bullet();
|
||||
bullet.x = player.x + spawnPos.x;
|
||||
bullet.y = player.y + spawnPos.y;
|
||||
const bVel = vec2.fromAngle(aimAngle + this.localRecoil, gun.bulletSpeed);
|
||||
bullet.vx = bVel.x;
|
||||
bullet.vy = bVel.y;
|
||||
bullet.angle = aimAngle + this.localRecoil;
|
||||
bullet.ownerId = this.localPlayerId;
|
||||
bullet.damage = gun.damage;
|
||||
bullet.penetration = gun.penetration;
|
||||
bullet.bulletType = 0;
|
||||
bullet.isCritical = Math.random() < 0.1;
|
||||
bullet.size = gun.bulletSize;
|
||||
bullet.color = gun.bulletColor;
|
||||
|
||||
const bId = `b_${this.nextBulletId++}`;
|
||||
this.state.bullets.set(bId, bullet);
|
||||
this.bulletLifetimes.set(bId, now);
|
||||
|
||||
this.ammo--;
|
||||
this.lastShotTime = now;
|
||||
if (this.ammo <= 0) {
|
||||
this.startReload(player);
|
||||
}
|
||||
}
|
||||
|
||||
private startReload(player: Player): void {
|
||||
if (this.isReloading) return;
|
||||
this.isReloading = true;
|
||||
this.reloadTimer = GUNS[0]!.reloadTimeMs;
|
||||
player.isReloading = true;
|
||||
}
|
||||
|
||||
private updateReload(): void {
|
||||
if (!this.isReloading) return;
|
||||
this.reloadTimer -= TICK_MS;
|
||||
if (this.reloadTimer <= 0) {
|
||||
this.isReloading = false;
|
||||
this.ammo = GUNS[0]!.ammoMax;
|
||||
const local = this.state.players.get(this.localPlayerId);
|
||||
if (local) {
|
||||
local.ammo = this.ammo;
|
||||
local.isReloading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Game Tick ───────────────────────────────────────────────────────────────
|
||||
|
||||
private tick(): void {
|
||||
this.tickCount++;
|
||||
this.state.tick = this.tickCount;
|
||||
const dt = TICK_MS / 1000;
|
||||
|
||||
// Update bots
|
||||
this.updateBots(dt);
|
||||
|
||||
// Update bullets
|
||||
this.updateBullets(dt);
|
||||
|
||||
// Check bullet-player collisions
|
||||
this.checkCollisions();
|
||||
|
||||
// Update orb lifetimes
|
||||
this.updateOrbs(dt);
|
||||
|
||||
// Regen HP
|
||||
this.regenHp(dt);
|
||||
|
||||
// Rebuild leaderboard
|
||||
this.rebuildLeaderboard();
|
||||
|
||||
this.animTime += dt;
|
||||
}
|
||||
|
||||
private updateBots(dt: number): void {
|
||||
for (const [botId, botState] of this.bots) {
|
||||
const bot = this.state.players.get(botId);
|
||||
if (!bot || !bot.alive) continue;
|
||||
|
||||
// Change direction periodically
|
||||
botState.changeDirTimer -= dt;
|
||||
if (botState.changeDirTimer <= 0) {
|
||||
botState.changeDirTimer = randFloat(1, 4);
|
||||
botState.moveAngle = randFloat(0, Math.PI * 2);
|
||||
if (Math.random() < 0.3) {
|
||||
botState.moveAngle = -1; // Stop moving
|
||||
}
|
||||
}
|
||||
|
||||
// Move
|
||||
if (botState.moveAngle >= 0) {
|
||||
const speed = PLAYER_BASE_SPEED * 0.1;
|
||||
bot.vx += Math.cos(botState.moveAngle) * speed;
|
||||
bot.vy += Math.sin(botState.moveAngle) * speed;
|
||||
const spd = Math.sqrt(bot.vx * bot.vx + bot.vy * bot.vy);
|
||||
if (spd > PLAYER_BASE_SPEED) {
|
||||
const s = PLAYER_BASE_SPEED / spd;
|
||||
bot.vx *= s;
|
||||
bot.vy *= s;
|
||||
}
|
||||
}
|
||||
|
||||
bot.vx *= PLAYER_FRICTION;
|
||||
bot.vy *= PLAYER_FRICTION;
|
||||
bot.x += bot.vx * dt;
|
||||
bot.y += bot.vy * dt;
|
||||
bot.x = clamp(bot.x, 0, ARENA_WIDTH);
|
||||
bot.y = clamp(bot.y, 0, ARENA_HEIGHT);
|
||||
|
||||
// Aim at local player
|
||||
const local = this.state.players.get(this.localPlayerId);
|
||||
if (local && local.alive) {
|
||||
botState.aimAngle = Math.atan2(local.y - bot.y, local.x - bot.x);
|
||||
}
|
||||
bot.angle = botState.aimAngle;
|
||||
|
||||
// Shoot periodically
|
||||
botState.shootTimer -= dt;
|
||||
if (botState.shootTimer <= 0) {
|
||||
botState.shootTimer = randFloat(0.5, 3);
|
||||
if (local && local.alive && Math.random() < 0.6) {
|
||||
this.botShoot(botId, bot);
|
||||
}
|
||||
}
|
||||
|
||||
// Recoil recovery
|
||||
bot.recoilOffset = lerp(bot.recoilOffset, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
private botShoot(botId: string, bot: Player): void {
|
||||
const gun = GUNS[bot.gunType] ?? GUNS[0]!;
|
||||
const recoil = randSign() * gun.recoilOffset * 0.5;
|
||||
bot.recoilOffset = recoil;
|
||||
|
||||
const spawnPos = vec2.fromAngle(bot.angle + recoil, GUN_BARREL_LENGTH);
|
||||
const bullet = new Bullet();
|
||||
bullet.x = bot.x + spawnPos.x;
|
||||
bullet.y = bot.y + spawnPos.y;
|
||||
const bVel = vec2.fromAngle(bot.angle + recoil, gun.bulletSpeed);
|
||||
bullet.vx = bVel.x;
|
||||
bullet.vy = bVel.y;
|
||||
bullet.angle = bot.angle + recoil;
|
||||
bullet.ownerId = botId;
|
||||
bullet.damage = gun.damage * 0.3; // Bots do less damage
|
||||
bullet.penetration = 1;
|
||||
bullet.bulletType = bot.gunType;
|
||||
bullet.isCritical = Math.random() < 0.05;
|
||||
bullet.size = gun.bulletSize;
|
||||
bullet.color = gun.bulletColor;
|
||||
|
||||
const bId = `bb_${this.nextBulletId++}`;
|
||||
this.state.bullets.set(bId, bullet);
|
||||
this.bulletLifetimes.set(bId, performance.now());
|
||||
}
|
||||
|
||||
private updateBullets(dt: number): void {
|
||||
const now = performance.now();
|
||||
const toRemove: string[] = [];
|
||||
|
||||
for (const [id, bullet] of this.state.bullets) {
|
||||
bullet.x += bullet.vx * dt;
|
||||
bullet.y += bullet.vy * dt;
|
||||
|
||||
const spawnTime = this.bulletLifetimes.get(id) ?? now;
|
||||
if (now - spawnTime > 3000 || bullet.x < -100 || bullet.x > ARENA_WIDTH + 100 || bullet.y < -100 || bullet.y > ARENA_HEIGHT + 100) {
|
||||
toRemove.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
for (const id of toRemove) {
|
||||
this.state.bullets.delete(id);
|
||||
this.bulletLifetimes.delete(id);
|
||||
}
|
||||
}
|
||||
|
||||
private checkCollisions(): void {
|
||||
const toRemove: string[] = [];
|
||||
|
||||
for (const [bId, bullet] of this.state.bullets) {
|
||||
for (const [pId, player] of this.state.players) {
|
||||
if (!player.alive) continue;
|
||||
if (bullet.ownerId === pId) continue;
|
||||
|
||||
const dx = bullet.x - player.x;
|
||||
const dy = bullet.y - player.y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||
if (dist < player.radius + bullet.size) {
|
||||
// Hit!
|
||||
player.hp -= bullet.damage;
|
||||
|
||||
if (bullet.penetration <= 1) {
|
||||
toRemove.push(bId);
|
||||
} else {
|
||||
bullet.penetration--;
|
||||
}
|
||||
|
||||
// Check death
|
||||
if (player.hp <= 0) {
|
||||
this.handleDeath(pId, bullet.ownerId);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const id of toRemove) {
|
||||
this.state.bullets.delete(id);
|
||||
this.bulletLifetimes.delete(id);
|
||||
}
|
||||
|
||||
// Player-orb collisions
|
||||
for (const [oId, orb] of this.state.xpOrbs) {
|
||||
const local = this.state.players.get(this.localPlayerId);
|
||||
if (!local || !local.alive) continue;
|
||||
const dx = local.x - orb.x;
|
||||
const dy = local.y - orb.y;
|
||||
if (dx * dx + dy * dy < 900) {
|
||||
local.xp += orb.value;
|
||||
this.state.xpOrbs.delete(oId);
|
||||
this.checkLevelUp(local);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private handleDeath(playerId: string, killerId: string): void {
|
||||
const player = this.state.players.get(playerId);
|
||||
if (!player) return;
|
||||
|
||||
// Drop XP orbs
|
||||
const dropXP = Math.floor(player.xp * 0.5);
|
||||
if (dropXP > 0) {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const orb = new XPOrb();
|
||||
const angle = randFloat(0, Math.PI * 2);
|
||||
const dist = randFloat(10, 40);
|
||||
orb.x = clamp(player.x + Math.cos(angle) * dist, 0, ARENA_WIDTH);
|
||||
orb.y = clamp(player.y + Math.sin(angle) * dist, 0, ARENA_HEIGHT);
|
||||
orb.value = Math.floor(dropXP / 5);
|
||||
orb.lifetime = 30;
|
||||
this.state.xpOrbs.set(`orb_death_${randInt(0, 1000000)}`, orb);
|
||||
}
|
||||
}
|
||||
|
||||
// Award kill
|
||||
const killer = this.state.players.get(killerId);
|
||||
if (killer && killer.alive) {
|
||||
killer.score += 1;
|
||||
killer.xp += Math.floor(player.xp * 0.5);
|
||||
this.checkLevelUp(killer);
|
||||
}
|
||||
|
||||
if (playerId === this.localPlayerId) {
|
||||
// Local player respawns after 2s
|
||||
player.hp = 0;
|
||||
player.alive = false;
|
||||
setTimeout(() => {
|
||||
player.x = ARENA_WIDTH / 2 + randFloat(-200, 200);
|
||||
player.y = ARENA_HEIGHT / 2 + randFloat(-200, 200);
|
||||
player.hp = player.maxHp;
|
||||
player.alive = true;
|
||||
player.xp = 0;
|
||||
player.level = 1;
|
||||
player.xpToNext = XP_LEVELS[1] ?? 50;
|
||||
player.score = 0;
|
||||
this.ammo = GUNS[0]!.ammoMax;
|
||||
player.ammo = this.ammo;
|
||||
this.localVx = 0;
|
||||
this.localVy = 0;
|
||||
player.vx = 0;
|
||||
player.vy = 0;
|
||||
}, 2000);
|
||||
} else {
|
||||
// Bot respawns immediately elsewhere
|
||||
player.x = randFloat(100, ARENA_WIDTH - 100);
|
||||
player.y = randFloat(100, ARENA_HEIGHT - 100);
|
||||
player.hp = player.maxHp;
|
||||
player.alive = true;
|
||||
player.xp = 0;
|
||||
player.level = 1;
|
||||
player.xpToNext = XP_LEVELS[1] ?? 50;
|
||||
}
|
||||
}
|
||||
|
||||
private checkLevelUp(player: Player): void {
|
||||
while (player.level < 45 && player.xp >= (XP_LEVELS[player.level] ?? Infinity)) {
|
||||
player.level += 1;
|
||||
player.upgradePoints += 1;
|
||||
player.xpToNext = player.level < 45 ? (XP_LEVELS[player.level] ?? 999999) : 999999;
|
||||
// Heal on level up
|
||||
player.hp = player.maxHp;
|
||||
}
|
||||
}
|
||||
|
||||
private updateOrbs(dt: number): void {
|
||||
const toRemove: string[] = [];
|
||||
for (const [id, orb] of this.state.xpOrbs) {
|
||||
orb.lifetime -= dt;
|
||||
if (orb.lifetime <= 0) {
|
||||
toRemove.push(id);
|
||||
}
|
||||
}
|
||||
for (const id of toRemove) {
|
||||
this.state.xpOrbs.delete(id);
|
||||
}
|
||||
// Spawn new orbs occasionally
|
||||
if (this.state.xpOrbs.size < 15 && Math.random() < 0.02) {
|
||||
this.spawnRandomOrb();
|
||||
}
|
||||
}
|
||||
|
||||
private regenHp(dt: number): void {
|
||||
for (const player of this.state.players.values()) {
|
||||
if (!player.alive) continue;
|
||||
if (player.hp < player.maxHp) {
|
||||
player.hp = Math.min(player.maxHp, player.hp + 1 * dt);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private rebuildLeaderboard(): void {
|
||||
const entries: { name: string; level: number; score: number; xp: number }[] = [];
|
||||
for (const p of this.state.players.values()) {
|
||||
entries.push({ name: p.name, level: p.level, score: p.score, xp: p.xp });
|
||||
}
|
||||
entries.sort((a, b) => b.xp - a.xp);
|
||||
this.state.leaderboard.clear();
|
||||
for (let i = 0; i < Math.min(10, entries.length); i++) {
|
||||
const e = entries[i]!;
|
||||
const entry = new LeaderboardEntry();
|
||||
entry.name = e.name;
|
||||
entry.level = e.level;
|
||||
entry.score = e.score;
|
||||
entry.xp = e.xp;
|
||||
this.state.leaderboard.push(entry);
|
||||
}
|
||||
}
|
||||
|
||||
applyUpgrade(choice: number): void {
|
||||
const local = this.state.players.get(this.localPlayerId);
|
||||
if (!local || local.upgradePoints <= 0) return;
|
||||
if (choice < 0 || choice >= 9) return;
|
||||
if ((local.stats[choice] ?? 0) >= 7) return;
|
||||
local.stats[choice] = (local.stats[choice] ?? 0) + 1;
|
||||
local.upgradePoints -= 1;
|
||||
if (choice === 0) { // MaxHP
|
||||
local.maxHp += 20;
|
||||
local.hp += 20;
|
||||
}
|
||||
}
|
||||
|
||||
onUpgrade(callback: (choice: number) => void): void {
|
||||
this.upgradeCallback = callback;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,397 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Canvas 2D Rendering Engine
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import {
|
||||
COLORS,
|
||||
ARENA_WIDTH,
|
||||
ARENA_HEIGHT,
|
||||
GUN_BARREL_WIDTH,
|
||||
GUN_BARREL_LENGTH,
|
||||
GUN_BODY_SIZE,
|
||||
lerp,
|
||||
} from '@guncircle/shared';
|
||||
import type { RoomState, Player, Bullet, XPOrb, Obstacle } from '@guncircle/shared';
|
||||
import type { Camera } from './camera.js';
|
||||
|
||||
// ─── Grid Constants ──────────────────────────────────────────────────────────
|
||||
|
||||
const GRID_SIZE = 100;
|
||||
const XP_ORB_SIZE = 6;
|
||||
const XP_ORB_PULSE_SPEED = 3;
|
||||
const XP_ORB_PULSE_AMP = 1.5;
|
||||
const TRAIL_COUNT = 3;
|
||||
const NAME_TAG_OFFSET = 28;
|
||||
const HP_BAR_HEIGHT = 4;
|
||||
const HP_BAR_OFFSET = NAME_TAG_OFFSET + 14;
|
||||
const STAT_TEXT_SIZE = 12;
|
||||
|
||||
/** Bullet trail history entry */
|
||||
interface BulletTrail {
|
||||
positions: Array<{ x: number; y: number }>;
|
||||
}
|
||||
|
||||
export class Renderer {
|
||||
private readonly ctx: CanvasRenderingContext2D;
|
||||
private readonly canvas: HTMLCanvasElement;
|
||||
/** Bullet trail history: bulletId → ring buffer of positions */
|
||||
private bulletTrails = new Map<string, BulletTrail>();
|
||||
private readonly maxTrailLen = 5;
|
||||
/** Time accumulator for animations */
|
||||
private animTime = 0;
|
||||
|
||||
constructor(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) {
|
||||
this.ctx = ctx;
|
||||
this.canvas = canvas;
|
||||
}
|
||||
|
||||
// ─── Main Render ───────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Main render entry point.
|
||||
* @param state - Current Colyseus room state
|
||||
* @param camera - Camera system
|
||||
* @param localPlayerId - Session ID of the local player
|
||||
* @param dt - Delta time in seconds
|
||||
*/
|
||||
render(
|
||||
state: RoomState,
|
||||
camera: Camera,
|
||||
localPlayerId: string | null,
|
||||
dt: number
|
||||
): void {
|
||||
this.animTime += dt;
|
||||
|
||||
const ctx = this.ctx;
|
||||
const w = this.canvas.width;
|
||||
const h = this.canvas.height;
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, w, h);
|
||||
|
||||
// Apply camera transform
|
||||
ctx.save();
|
||||
ctx.translate(w / 2, h / 2);
|
||||
ctx.translate(-camera.x, -camera.y);
|
||||
|
||||
// Render world
|
||||
this.renderArenaBackground(camera);
|
||||
this.renderObstacles(state, camera);
|
||||
this.renderXPOrbs(state, camera);
|
||||
this.renderBullets(state, camera, localPlayerId, dt);
|
||||
this.renderPlayers(state, camera, localPlayerId, dt);
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// ─── Arena Background ──────────────────────────────────────────────────────
|
||||
|
||||
private renderArenaBackground(camera: Camera): void {
|
||||
const ctx = this.ctx;
|
||||
|
||||
// Solid background fill for visible area
|
||||
const startX = Math.max(0, camera.x - camera.width / 2);
|
||||
const startY = Math.max(0, camera.y - camera.height / 2);
|
||||
const endX = Math.min(ARENA_WIDTH, camera.x + camera.width / 2);
|
||||
const endY = Math.min(ARENA_HEIGHT, camera.y + camera.height / 2);
|
||||
|
||||
ctx.fillStyle = COLORS.arenaBg;
|
||||
ctx.fillRect(startX, startY, endX - startX, endY - startY);
|
||||
|
||||
// Grid lines
|
||||
ctx.strokeStyle = COLORS.arenaGrid;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
|
||||
// Vertical lines
|
||||
const firstGridX = Math.floor(startX / GRID_SIZE) * GRID_SIZE;
|
||||
for (let x = firstGridX; x <= endX; x += GRID_SIZE) {
|
||||
ctx.moveTo(x, startY);
|
||||
ctx.lineTo(x, endY);
|
||||
}
|
||||
|
||||
// Horizontal lines
|
||||
const firstGridY = Math.floor(startY / GRID_SIZE) * GRID_SIZE;
|
||||
for (let y = firstGridY; y <= endY; y += GRID_SIZE) {
|
||||
ctx.moveTo(startX, y);
|
||||
ctx.lineTo(endX, y);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
|
||||
// Arena border
|
||||
ctx.strokeStyle = '#34495e';
|
||||
ctx.lineWidth = 3;
|
||||
ctx.strokeRect(0, 0, ARENA_WIDTH, ARENA_HEIGHT);
|
||||
}
|
||||
|
||||
// ─── Obstacles ─────────────────────────────────────────────────────────────
|
||||
|
||||
private renderObstacles(state: RoomState, camera: Camera): void {
|
||||
for (const obs of state.obstacles.values()) {
|
||||
if (!camera.isInView(obs.x + obs.width / 2, obs.y + obs.height / 2, Math.max(obs.width, obs.height))) {
|
||||
continue;
|
||||
}
|
||||
this.renderObstacle(obs);
|
||||
}
|
||||
}
|
||||
|
||||
private renderObstacle(obs: Obstacle): void {
|
||||
const ctx = this.ctx;
|
||||
|
||||
switch (obs.type) {
|
||||
case 0: { // Wall
|
||||
ctx.fillStyle = COLORS.wall;
|
||||
ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
|
||||
ctx.strokeStyle = '#6c7a7d';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeRect(obs.x, obs.y, obs.width, obs.height);
|
||||
break;
|
||||
}
|
||||
case 1: { // Crate
|
||||
ctx.fillStyle = COLORS.crate;
|
||||
ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
|
||||
ctx.strokeStyle = '#6d3a10';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeRect(obs.x, obs.y, obs.width, obs.height);
|
||||
// Cross pattern
|
||||
ctx.strokeStyle = '#6d3a10';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(obs.x, obs.y);
|
||||
ctx.lineTo(obs.x + obs.width, obs.y + obs.height);
|
||||
ctx.moveTo(obs.x + obs.width, obs.y);
|
||||
ctx.lineTo(obs.x, obs.y + obs.height);
|
||||
ctx.stroke();
|
||||
break;
|
||||
}
|
||||
case 2: { // Slow zone
|
||||
ctx.fillStyle = 'rgba(52, 152, 219, 0.3)';
|
||||
ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
|
||||
// Subtle wave pattern
|
||||
ctx.strokeStyle = 'rgba(52, 152, 219, 0.2)';
|
||||
ctx.lineWidth = 1;
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const y = obs.y + obs.height * (0.25 + i * 0.25);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(obs.x, y);
|
||||
for (let x = 0; x < obs.width; x += 5) {
|
||||
ctx.lineTo(
|
||||
obs.x + x,
|
||||
y + Math.sin(x * 0.05 + this.animTime * 2) * 3
|
||||
);
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 3: { // Cover
|
||||
ctx.fillStyle = 'rgba(39, 174, 96, 0.5)';
|
||||
ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
|
||||
ctx.strokeStyle = 'rgba(39, 174, 96, 0.7)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeRect(obs.x, obs.y, obs.width, obs.height);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── XP Orbs ───────────────────────────────────────────────────────────────
|
||||
|
||||
private renderXPOrbs(state: RoomState, camera: Camera): void {
|
||||
for (const orb of state.xpOrbs.values()) {
|
||||
if (!camera.isInView(orb.x, orb.y, XP_ORB_SIZE * 2)) {
|
||||
continue;
|
||||
}
|
||||
this.renderXPOrb(orb);
|
||||
}
|
||||
}
|
||||
|
||||
private renderXPOrb(orb: XPOrb): void {
|
||||
const ctx = this.ctx;
|
||||
const pulse = Math.sin(this.animTime * XP_ORB_PULSE_SPEED + orb.x * 0.1) * XP_ORB_PULSE_AMP;
|
||||
const size = XP_ORB_SIZE + pulse;
|
||||
|
||||
ctx.fillStyle = COLORS.xpOrb;
|
||||
ctx.shadowColor = COLORS.xpOrb;
|
||||
ctx.shadowBlur = 6;
|
||||
ctx.fillRect(orb.x - size / 2, orb.y - size / 2, size, size);
|
||||
ctx.shadowBlur = 0;
|
||||
}
|
||||
|
||||
// ─── Bullets ───────────────────────────────────────────────────────────────
|
||||
|
||||
private renderBullets(state: RoomState, camera: Camera, localPlayerId: string | null, dt: number): void {
|
||||
// Update trail history
|
||||
for (const [id, bullet] of state.bullets) {
|
||||
let trail = this.bulletTrails.get(id);
|
||||
if (!trail) {
|
||||
trail = { positions: [] };
|
||||
this.bulletTrails.set(id, trail);
|
||||
}
|
||||
// Add current position to trail
|
||||
trail.positions.unshift({ x: bullet.x, y: bullet.y });
|
||||
if (trail.positions.length > this.maxTrailLen) {
|
||||
trail.positions.pop();
|
||||
}
|
||||
}
|
||||
|
||||
// Clean up trails for removed bullets
|
||||
const activeIds = new Set(state.bullets.keys());
|
||||
for (const id of this.bulletTrails.keys()) {
|
||||
if (!activeIds.has(id)) {
|
||||
this.bulletTrails.delete(id);
|
||||
}
|
||||
}
|
||||
|
||||
// Render bullets
|
||||
for (const [bulletId, bullet] of state.bullets) {
|
||||
if (!camera.isInView(bullet.x, bullet.y, bullet.size * 3)) {
|
||||
continue;
|
||||
}
|
||||
const isOwn = bullet.ownerId === localPlayerId;
|
||||
this.renderBullet(bullet, bulletId, isOwn);
|
||||
}
|
||||
}
|
||||
|
||||
private renderBullet(bullet: Bullet, bulletId: string, isOwn: boolean): void {
|
||||
const ctx = this.ctx;
|
||||
const trail = this.bulletTrails.get(bulletId);
|
||||
const bulletColor = isOwn ? COLORS.self : COLORS.enemy;
|
||||
|
||||
// Render trail
|
||||
if (trail && trail.positions.length > 1) {
|
||||
for (let i = 1; i < Math.min(trail.positions.length, TRAIL_COUNT + 1); i++) {
|
||||
const pos = trail.positions[i];
|
||||
const t = i / (TRAIL_COUNT + 1);
|
||||
const alpha = 0.3 * (1 - t);
|
||||
const r = bullet.size * (1 - t * 0.5);
|
||||
|
||||
ctx.globalAlpha = alpha;
|
||||
ctx.fillStyle = bulletColor;
|
||||
ctx.beginPath();
|
||||
ctx.arc(pos.x, pos.y, r, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
|
||||
// Main bullet circle
|
||||
ctx.fillStyle = bulletColor;
|
||||
ctx.shadowColor = bulletColor;
|
||||
ctx.shadowBlur = 4;
|
||||
ctx.beginPath();
|
||||
ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.shadowBlur = 0;
|
||||
|
||||
// Crit outline
|
||||
if (bullet.isCritical) {
|
||||
ctx.strokeStyle = '#ffffff';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
ctx.arc(bullet.x, bullet.y, bullet.size + 2, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Players ─────────────────────────────────────────────────────────────────
|
||||
|
||||
private renderPlayers(
|
||||
state: RoomState,
|
||||
camera: Camera,
|
||||
localPlayerId: string | null,
|
||||
_dt: number
|
||||
): void {
|
||||
for (const [playerId, player] of state.players) {
|
||||
if (!player.alive) continue;
|
||||
if (!camera.isInView(player.x, player.y, player.radius + 30)) {
|
||||
continue;
|
||||
}
|
||||
const isSelf = playerId === localPlayerId;
|
||||
this.renderPlayer(player, isSelf);
|
||||
}
|
||||
}
|
||||
|
||||
private renderPlayer(player: Player, isSelf: boolean): void {
|
||||
const ctx = this.ctx;
|
||||
const x = player.x;
|
||||
const y = player.y;
|
||||
const r = player.radius;
|
||||
|
||||
// ─── Gun rendering (behind player circle) ───
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate(player.angle + player.recoilOffset);
|
||||
|
||||
// Barrel
|
||||
ctx.fillStyle = '#34495e';
|
||||
ctx.fillRect(
|
||||
0,
|
||||
-GUN_BARREL_WIDTH / 2,
|
||||
GUN_BARREL_LENGTH,
|
||||
GUN_BARREL_WIDTH
|
||||
);
|
||||
|
||||
// Gun body (square behind barrel)
|
||||
ctx.fillStyle = '#2c3e50';
|
||||
ctx.fillRect(
|
||||
-GUN_BODY_SIZE / 2,
|
||||
-GUN_BODY_SIZE / 2,
|
||||
GUN_BODY_SIZE,
|
||||
GUN_BODY_SIZE
|
||||
);
|
||||
|
||||
ctx.restore();
|
||||
|
||||
// ─── Player circle ───
|
||||
ctx.fillStyle = isSelf ? COLORS.self : COLORS.enemy;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, r, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
// Darker border stroke
|
||||
ctx.strokeStyle = isSelf ? '#2980b9' : '#c0392b';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
|
||||
// ─── Name tag ───
|
||||
if (player.name) {
|
||||
ctx.fillStyle = COLORS.nameTag;
|
||||
ctx.font = `${STAT_TEXT_SIZE}px sans-serif`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'bottom';
|
||||
ctx.shadowColor = 'rgba(0,0,0,0.8)';
|
||||
ctx.shadowBlur = 3;
|
||||
ctx.fillText(player.name, x, y - NAME_TAG_OFFSET);
|
||||
ctx.shadowBlur = 0;
|
||||
}
|
||||
|
||||
// ─── HP bar ───
|
||||
const hpBarWidth = r * 2;
|
||||
const hpBarX = x - hpBarWidth / 2;
|
||||
const hpBarY = y - HP_BAR_OFFSET;
|
||||
const hpPct = player.hp / player.maxHp;
|
||||
|
||||
// Background
|
||||
ctx.fillStyle = COLORS.hpBarBg;
|
||||
ctx.fillRect(hpBarX, hpBarY, hpBarWidth, HP_BAR_HEIGHT);
|
||||
|
||||
// Fill
|
||||
const hpFillWidth = hpBarWidth * hpPct;
|
||||
ctx.fillStyle = COLORS.hpBar;
|
||||
ctx.fillRect(hpBarX, hpBarY, hpFillWidth, HP_BAR_HEIGHT);
|
||||
|
||||
// Border
|
||||
ctx.strokeStyle = '#1a252f';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeRect(hpBarX, hpBarY, hpBarWidth, HP_BAR_HEIGHT);
|
||||
}
|
||||
|
||||
// ─── Resize ────────────────────────────────────────────────────────────────
|
||||
|
||||
resize(width: number, height: number): void {
|
||||
this.canvas.width = width;
|
||||
this.canvas.height = height;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"outDir": "./dist",
|
||||
"rootDir": "../..",
|
||||
"jsx": "preserve",
|
||||
"skipLibCheck": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["./src", "../shared/src"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import path from 'path';
|
||||
|
||||
export default defineConfig({
|
||||
root: '.',
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/ws': {
|
||||
target: 'ws://localhost:3000',
|
||||
ws: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: './dist',
|
||||
emptyOutDir: true,
|
||||
target: 'es2020',
|
||||
},
|
||||
esbuild: {
|
||||
target: 'es2020',
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@guncircle/shared': path.resolve(__dirname, '../shared/src'),
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
FROM node:22-alpine AS builder
|
||||
WORKDIR /app
|
||||
RUN corepack enable && corepack prepare pnpm@9.0.0 --activate
|
||||
COPY pnpm-workspace.yaml package.json ./
|
||||
COPY packages/shared/package.json packages/shared/
|
||||
COPY packages/server/package.json packages/server/
|
||||
RUN pnpm install --frozen-lockfile
|
||||
COPY packages/shared/ packages/shared/
|
||||
COPY packages/server/ packages/server/
|
||||
RUN pnpm --filter @guncircle/shared build
|
||||
RUN pnpm --filter @guncircle/server build
|
||||
|
||||
FROM node:22-alpine
|
||||
WORKDIR /app
|
||||
RUN corepack enable && corepack prepare pnpm@9.0.0 --activate
|
||||
COPY pnpm-workspace.yaml package.json ./
|
||||
COPY --from=builder /app/packages/shared/dist packages/shared/dist
|
||||
COPY --from=builder /app/packages/shared/package.json packages/shared/
|
||||
COPY --from=builder /app/packages/server/dist packages/server/dist
|
||||
COPY --from=builder /app/packages/server/package.json packages/server/
|
||||
COPY --from=builder /app/packages/server/config packages/server/config
|
||||
RUN pnpm install --prod --frozen-lockfile
|
||||
EXPOSE 3000
|
||||
CMD ["node", "packages/server/dist/index.js"]
|
||||
@@ -0,0 +1,175 @@
|
||||
{
|
||||
"branches": [
|
||||
{
|
||||
"id": "fighter",
|
||||
"name": "Fighter",
|
||||
"description": "Balanced combatant. +10% Max HP, +5% Bullet Damage.",
|
||||
"levelRequired": 5,
|
||||
"parentId": null,
|
||||
"unlocksCategories": [0, 1],
|
||||
"passiveBonuses": { "0": 0.10, "3": 0.05 }
|
||||
},
|
||||
{
|
||||
"id": "shotgunner",
|
||||
"name": "Shotgunner",
|
||||
"description": "Close-range powerhouse. Unlocks shotguns. +15% Max HP, -10% Recoil.",
|
||||
"levelRequired": 5,
|
||||
"parentId": null,
|
||||
"unlocksCategories": [2],
|
||||
"passiveBonuses": { "0": 0.15, "6": 0.10 }
|
||||
},
|
||||
{
|
||||
"id": "scout",
|
||||
"name": "Scout",
|
||||
"description": "Fast and evasive. +15% Movement Speed, +5% Reload Speed.",
|
||||
"levelRequired": 5,
|
||||
"parentId": null,
|
||||
"unlocksCategories": [4],
|
||||
"passiveBonuses": { "2": 0.15, "5": 0.05 }
|
||||
},
|
||||
{
|
||||
"id": "soldier",
|
||||
"name": "Soldier",
|
||||
"description": "Veteran warrior. +15% Bullet Damage, +10% Bullet Speed.",
|
||||
"levelRequired": 10,
|
||||
"parentId": "fighter",
|
||||
"unlocksCategories": [1],
|
||||
"passiveBonuses": { "3": 0.15, "4": 0.10 }
|
||||
},
|
||||
{
|
||||
"id": "bruiser",
|
||||
"name": "Bruiser",
|
||||
"description": "Tough tank. +20% Max HP, +10% HP Regen.",
|
||||
"levelRequired": 10,
|
||||
"parentId": "fighter",
|
||||
"unlocksCategories": [],
|
||||
"passiveBonuses": { "0": 0.20, "1": 0.10 }
|
||||
},
|
||||
{
|
||||
"id": "blaster",
|
||||
"name": "Blaster",
|
||||
"description": "Explosive force. +20% Bullet Damage, +10% Crit Chance.",
|
||||
"levelRequired": 15,
|
||||
"parentId": "soldier",
|
||||
"unlocksCategories": [],
|
||||
"passiveBonuses": { "3": 0.20, "7": 0.10 }
|
||||
},
|
||||
{
|
||||
"id": "slayer",
|
||||
"name": "Slayer",
|
||||
"description": "Ultimate hunter. +25% Bullet Damage, +15% Crit Damage.",
|
||||
"levelRequired": 30,
|
||||
"parentId": "blaster",
|
||||
"unlocksCategories": [],
|
||||
"passiveBonuses": { "3": 0.25, "8": 0.15 }
|
||||
},
|
||||
{
|
||||
"id": "destroyer",
|
||||
"name": "Destroyer",
|
||||
"description": "Peak power. +20% all damage stats, +10% Max HP.",
|
||||
"levelRequired": 45,
|
||||
"parentId": "slayer",
|
||||
"unlocksCategories": [],
|
||||
"passiveBonuses": { "0": 0.10, "3": 0.20, "7": 0.10, "8": 0.10 }
|
||||
},
|
||||
{
|
||||
"id": "charger",
|
||||
"name": "Charger",
|
||||
"description": "Bull rush expert. +15% Movement Speed, +10% Bullet Damage.",
|
||||
"levelRequired": 15,
|
||||
"parentId": "bruiser",
|
||||
"unlocksCategories": [],
|
||||
"passiveBonuses": { "2": 0.15, "3": 0.10 }
|
||||
},
|
||||
{
|
||||
"id": "juggernaut",
|
||||
"name": "Juggernaut",
|
||||
"description": "Unstoppable. +25% Max HP, +15% HP Regen.",
|
||||
"levelRequired": 30,
|
||||
"parentId": "charger",
|
||||
"unlocksCategories": [],
|
||||
"passiveBonuses": { "0": 0.25, "1": 0.15 }
|
||||
},
|
||||
{
|
||||
"id": "colossus",
|
||||
"name": "Colossus",
|
||||
"description": "Living fortress. +30% Max HP, +20% HP Regen, +10% Damage.",
|
||||
"levelRequired": 45,
|
||||
"parentId": "juggernaut",
|
||||
"unlocksCategories": [],
|
||||
"passiveBonuses": { "0": 0.30, "1": 0.20, "3": 0.10 }
|
||||
},
|
||||
{
|
||||
"id": "scatter",
|
||||
"name": "Scatter",
|
||||
"description": "Spread shot master. +15% Reload Speed, -15% Recoil.",
|
||||
"levelRequired": 10,
|
||||
"parentId": "shotgunner",
|
||||
"unlocksCategories": [2],
|
||||
"passiveBonuses": { "5": 0.15, "6": 0.15 }
|
||||
},
|
||||
{
|
||||
"id": "breaker",
|
||||
"name": "Breaker",
|
||||
"description": "Armor breaker. +20% Bullet Damage, +10% Bullet Speed.",
|
||||
"levelRequired": 15,
|
||||
"parentId": "scatter",
|
||||
"unlocksCategories": [],
|
||||
"passiveBonuses": { "3": 0.20, "4": 0.10 }
|
||||
},
|
||||
{
|
||||
"id": "havoc",
|
||||
"name": "Havoc",
|
||||
"description": "Chaos incarnate. +25% Reload Speed, +15% Movement Speed.",
|
||||
"levelRequired": 30,
|
||||
"parentId": "breaker",
|
||||
"unlocksCategories": [],
|
||||
"passiveBonuses": { "2": 0.15, "5": 0.25 }
|
||||
},
|
||||
{
|
||||
"id": "annihilator",
|
||||
"name": "Annihilator",
|
||||
"description": "Total devastation. +20% all stats.",
|
||||
"levelRequired": 45,
|
||||
"parentId": "havoc",
|
||||
"unlocksCategories": [],
|
||||
"passiveBonuses": { "0": 0.10, "2": 0.10, "3": 0.15, "5": 0.15 }
|
||||
},
|
||||
{
|
||||
"id": "runner",
|
||||
"name": "Runner",
|
||||
"description": "Speed demon. +20% Movement Speed, +10% Reload Speed.",
|
||||
"levelRequired": 10,
|
||||
"parentId": "scout",
|
||||
"unlocksCategories": [4],
|
||||
"passiveBonuses": { "2": 0.20, "5": 0.10 }
|
||||
},
|
||||
{
|
||||
"id": "stalker",
|
||||
"name": "Stalker",
|
||||
"description": "Stealth marksman. +15% Bullet Speed, +10% Crit Chance.",
|
||||
"levelRequired": 15,
|
||||
"parentId": "runner",
|
||||
"unlocksCategories": [3],
|
||||
"passiveBonuses": { "4": 0.15, "7": 0.10 }
|
||||
},
|
||||
{
|
||||
"id": "phantom",
|
||||
"name": "Phantom",
|
||||
"description": "Ghost warrior. +20% Movement Speed, +15% Crit Damage.",
|
||||
"levelRequired": 30,
|
||||
"parentId": "stalker",
|
||||
"unlocksCategories": [],
|
||||
"passiveBonuses": { "2": 0.20, "8": 0.15 }
|
||||
},
|
||||
{
|
||||
"id": "assassin",
|
||||
"name": "Assassin",
|
||||
"description": "Silent death. +25% Crit Chance, +25% Crit Damage.",
|
||||
"levelRequired": 45,
|
||||
"parentId": "phantom",
|
||||
"unlocksCategories": [],
|
||||
"passiveBonuses": { "7": 0.25, "8": 0.25 }
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
{
|
||||
"guns": [
|
||||
{
|
||||
"id": "pistol",
|
||||
"name": "Pistol",
|
||||
"category": 0,
|
||||
"damage": 12,
|
||||
"fireRate": 4,
|
||||
"bulletSpeed": 400,
|
||||
"pelletCount": 1,
|
||||
"spread": 0,
|
||||
"recoilOffset": 0.06,
|
||||
"recoilRecoveryMs": 120,
|
||||
"kickbackForce": 30,
|
||||
"ammoMax": 12,
|
||||
"reloadTimeMs": 1500,
|
||||
"bulletSize": 4,
|
||||
"penetration": 1,
|
||||
"bulletLifetimeMs": 2000,
|
||||
"bulletColor": "#f1c40f"
|
||||
},
|
||||
{
|
||||
"id": "rifle",
|
||||
"name": "Rifle",
|
||||
"category": 1,
|
||||
"damage": 18,
|
||||
"fireRate": 3,
|
||||
"bulletSpeed": 500,
|
||||
"pelletCount": 1,
|
||||
"spread": 0.02,
|
||||
"recoilOffset": 0.08,
|
||||
"recoilRecoveryMs": 180,
|
||||
"kickbackForce": 45,
|
||||
"ammoMax": 8,
|
||||
"reloadTimeMs": 2000,
|
||||
"bulletSize": 4.5,
|
||||
"penetration": 2,
|
||||
"bulletLifetimeMs": 2500,
|
||||
"bulletColor": "#e67e22"
|
||||
},
|
||||
{
|
||||
"id": "shotgun",
|
||||
"name": "Shotgun",
|
||||
"category": 2,
|
||||
"damage": 8,
|
||||
"fireRate": 1.2,
|
||||
"bulletSpeed": 320,
|
||||
"pelletCount": 5,
|
||||
"spread": 0.25,
|
||||
"recoilOffset": 0.15,
|
||||
"recoilRecoveryMs": 300,
|
||||
"kickbackForce": 80,
|
||||
"ammoMax": 5,
|
||||
"reloadTimeMs": 2500,
|
||||
"bulletSize": 3,
|
||||
"penetration": 1,
|
||||
"bulletLifetimeMs": 1500,
|
||||
"bulletColor": "#9b59b6"
|
||||
},
|
||||
{
|
||||
"id": "sniper",
|
||||
"name": "Sniper",
|
||||
"category": 3,
|
||||
"damage": 45,
|
||||
"fireRate": 0.8,
|
||||
"bulletSpeed": 700,
|
||||
"pelletCount": 1,
|
||||
"spread": 0,
|
||||
"recoilOffset": 0.2,
|
||||
"recoilRecoveryMs": 500,
|
||||
"kickbackForce": 120,
|
||||
"ammoMax": 3,
|
||||
"reloadTimeMs": 3000,
|
||||
"bulletSize": 6,
|
||||
"penetration": 3,
|
||||
"bulletLifetimeMs": 3500,
|
||||
"bulletColor": "#e74c3c"
|
||||
},
|
||||
{
|
||||
"id": "smg",
|
||||
"name": "SMG",
|
||||
"category": 4,
|
||||
"damage": 6,
|
||||
"fireRate": 10,
|
||||
"bulletSpeed": 380,
|
||||
"pelletCount": 1,
|
||||
"spread": 0.06,
|
||||
"recoilOffset": 0.04,
|
||||
"recoilRecoveryMs": 80,
|
||||
"kickbackForce": 20,
|
||||
"ammoMax": 30,
|
||||
"reloadTimeMs": 1800,
|
||||
"bulletSize": 3,
|
||||
"penetration": 1,
|
||||
"bulletLifetimeMs": 1800,
|
||||
"bulletColor": "#2ecc71"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "@guncircle/server",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"dev": "tsx watch src/index.ts",
|
||||
"start": "node dist/index.js",
|
||||
"type-check": "tsc --noEmit",
|
||||
"test": "vitest run"
|
||||
},
|
||||
"dependencies": {
|
||||
"@colyseus/core": "^0.16.0",
|
||||
"@colyseus/schema": "^3.0.0",
|
||||
"@colyseus/uwebsockets-transport": "^0.16.0",
|
||||
"@guncircle/shared": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.0.0",
|
||||
"tsx": "^4.0.0",
|
||||
"typescript": "^5.6.0",
|
||||
"vitest": "^2.0.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,241 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Branch (Class) System
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import { readFileSync } from 'fs';
|
||||
import { dirname, join } from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import {
|
||||
type ClassBranch,
|
||||
type Player,
|
||||
STAT_COUNT,
|
||||
Stat,
|
||||
STAT_BONUSES,
|
||||
STAT_MAX_LEVEL,
|
||||
} from '@guncircle/shared';
|
||||
|
||||
// ─── Branch Config Container ─────────────────────────────────────────────────
|
||||
|
||||
interface BranchesJson {
|
||||
branches: ClassBranch[];
|
||||
}
|
||||
|
||||
// ─── BranchSystem ────────────────────────────────────────────────────────────
|
||||
|
||||
export class BranchSystem {
|
||||
private branches: ClassBranch[] = [];
|
||||
|
||||
constructor() {
|
||||
this.loadConfigs();
|
||||
}
|
||||
|
||||
private loadConfigs(): void {
|
||||
try {
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const configPath = join(__dirname, '../config/branches.json');
|
||||
const raw = readFileSync(configPath, 'utf-8');
|
||||
const parsed: BranchesJson = JSON.parse(raw) as BranchesJson;
|
||||
this.branches = parsed.branches ?? [];
|
||||
} catch {
|
||||
this.branches = [];
|
||||
}
|
||||
}
|
||||
|
||||
/** Total branches loaded */
|
||||
getBranchCount(): number {
|
||||
return this.branches.length;
|
||||
}
|
||||
|
||||
/** Get branch by string id */
|
||||
getBranchById(id: string): ClassBranch | undefined {
|
||||
return this.branches.find((b) => b.id === id);
|
||||
}
|
||||
|
||||
/** Get branch by 0-based index (used for classType field) */
|
||||
getBranchByIndex(index: number): ClassBranch | undefined {
|
||||
if (index < 0 || index >= this.branches.length) return undefined;
|
||||
return this.branches[index];
|
||||
}
|
||||
|
||||
/** Get the index of a branch by its string id */
|
||||
getBranchIndexById(id: string): number {
|
||||
return this.branches.findIndex((b) => b.id === id);
|
||||
}
|
||||
|
||||
/** Get all loaded branches */
|
||||
getAllBranches(): readonly ClassBranch[] {
|
||||
return this.branches;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get branches available to a player at their current level.
|
||||
* Filters by: levelRequired <= player level, parent matches current branch path.
|
||||
*/
|
||||
getAvailableBranches(level: number, currentBranchId: string | null): ClassBranch[] {
|
||||
return this.branches.filter((branch) => {
|
||||
// Must meet level requirement
|
||||
if (branch.levelRequired > level) return false;
|
||||
|
||||
// Root branches (parentId === null) are always available at their level
|
||||
if (branch.parentId === null) {
|
||||
// Only show root branches if player hasn't chosen a branch yet
|
||||
// or if they're at the exact milestone level
|
||||
return currentBranchId === null || this.isDirectRootChoice(branch, currentBranchId);
|
||||
}
|
||||
|
||||
// Non-root branches require parent to be in the player's branch path
|
||||
return this.isInBranchPath(branch.parentId, currentBranchId);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a branch is a direct root choice for a player.
|
||||
* A root branch is a direct choice if the player has no branch yet.
|
||||
*/
|
||||
private isDirectRootChoice(rootBranch: ClassBranch, currentBranchId: string | null): boolean {
|
||||
if (currentBranchId === null) return true;
|
||||
// If player has a branch, root branches are not direct choices anymore
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if `ancestorId` is in the branch path leading to `descendantId`.
|
||||
* This includes the descendant itself.
|
||||
*/
|
||||
isInBranchPath(ancestorId: string, descendantId: string | null): boolean {
|
||||
if (descendantId === null) return false;
|
||||
if (ancestorId === descendantId) return true;
|
||||
|
||||
let current: ClassBranch | undefined = this.getBranchById(descendantId);
|
||||
while (current !== undefined && current.parentId !== null) {
|
||||
if (current.parentId === ancestorId) return true;
|
||||
current = this.getBranchById(current.parentId);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the root branch id in a player's branch path.
|
||||
* Walks up the parent chain to find the top-level ancestor.
|
||||
*/
|
||||
getRootBranchId(branchId: string | null): string | null {
|
||||
if (branchId === null) return null;
|
||||
let current: ClassBranch | undefined = this.getBranchById(branchId);
|
||||
while (current !== undefined && current.parentId !== null) {
|
||||
current = this.getBranchById(current.parentId);
|
||||
}
|
||||
return current?.id ?? null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all branch IDs in the path from root to the given branch.
|
||||
*/
|
||||
getBranchPath(branchId: string | null): string[] {
|
||||
const path: string[] = [];
|
||||
if (branchId === null) return path;
|
||||
|
||||
// Walk up to root first
|
||||
const ancestors: string[] = [];
|
||||
let current: ClassBranch | undefined = this.getBranchById(branchId);
|
||||
while (current !== undefined) {
|
||||
ancestors.unshift(current.id);
|
||||
if (current.parentId === null) break;
|
||||
current = this.getBranchById(current.parentId);
|
||||
}
|
||||
|
||||
return ancestors;
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply passive stat bonuses from a branch to a player's stat levels.
|
||||
* This returns the total passive bonus for each stat from the branch tree.
|
||||
*/
|
||||
calculateBranchBonuses(player: Player): Record<Stat, number> {
|
||||
const bonuses: Record<Stat, number> = {
|
||||
[Stat.MaxHp]: 0,
|
||||
[Stat.HpRegen]: 0,
|
||||
[Stat.MovementSpeed]: 0,
|
||||
[Stat.BulletDamage]: 0,
|
||||
[Stat.BulletSpeed]: 0,
|
||||
[Stat.ReloadSpeed]: 0,
|
||||
[Stat.RecoilStability]: 0,
|
||||
[Stat.CritChance]: 0,
|
||||
[Stat.CritDamage]: 0,
|
||||
};
|
||||
|
||||
// Get the branch path and sum all passive bonuses
|
||||
const branchId: string | null =
|
||||
player.classType > 0 ? this.getBranchByIndex(player.classType)?.id ?? null : null;
|
||||
|
||||
if (branchId === null) return bonuses;
|
||||
|
||||
const path: string[] = this.getBranchPath(branchId);
|
||||
for (const bid of path) {
|
||||
const branch: ClassBranch | undefined = this.getBranchById(bid);
|
||||
if (branch === undefined) continue;
|
||||
|
||||
for (const [statKeyStr, value] of Object.entries(branch.passiveBonuses)) {
|
||||
const statIdx: number = parseInt(statKeyStr, 10);
|
||||
if (statIdx >= 0 && statIdx < STAT_COUNT && value !== undefined) {
|
||||
bonuses[statIdx as Stat] += value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return bonuses;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the effective stat value for a player, including branch bonuses.
|
||||
* Returns the player's invested stat level + branch passive bonus.
|
||||
*/
|
||||
getEffectiveStatLevel(player: Player, stat: Stat): number {
|
||||
const investedLevel: number = player.stats[stat] ?? 0;
|
||||
const bonuses: Record<Stat, number> = this.calculateBranchBonuses(player);
|
||||
return investedLevel + bonuses[stat];
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply branch selection to a player. Sets their classType index.
|
||||
*/
|
||||
applyBranch(player: Player, branchId: string): boolean {
|
||||
const branchIdx: number = this.getBranchIndexById(branchId);
|
||||
if (branchIdx < 0) return false;
|
||||
player.classType = branchIdx;
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all gun category indices unlocked by a player's branch path.
|
||||
*/
|
||||
getUnlockedGunCategories(player: Player): number[] {
|
||||
const branchId: string | null =
|
||||
player.classType > 0 ? this.getBranchByIndex(player.classType)?.id ?? null : null;
|
||||
|
||||
if (branchId === null) return [0]; // Default: only pistols
|
||||
|
||||
const path: string[] = this.getBranchPath(branchId);
|
||||
const categories: Set<number> = new Set<number>();
|
||||
|
||||
// Always include pistol
|
||||
categories.add(0);
|
||||
|
||||
for (const bid of path) {
|
||||
const branch: ClassBranch | undefined = this.getBranchById(bid);
|
||||
if (branch === undefined) continue;
|
||||
for (const cat of branch.unlocksCategories) {
|
||||
categories.add(cat);
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(categories).sort((a, b) => a - b);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a gun category is unlocked for a player.
|
||||
*/
|
||||
isGunCategoryUnlocked(player: Player, category: number): boolean {
|
||||
const unlocked: number[] = this.getUnlockedGunCategories(player);
|
||||
return unlocked.includes(category);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,306 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Collision System
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import {
|
||||
type Player,
|
||||
type Bullet,
|
||||
type XPOrb,
|
||||
type Obstacle,
|
||||
type RoomState,
|
||||
SpatialHashGrid,
|
||||
circleCollisionResolve,
|
||||
vec2,
|
||||
type Vec2,
|
||||
SPATIAL_CELL_SIZE,
|
||||
ARENA_WIDTH,
|
||||
ARENA_HEIGHT,
|
||||
PLAYER_BASE_RADIUS,
|
||||
} from '@guncircle/shared';
|
||||
|
||||
// ─── Identifiable Entity for Spatial Hash ────────────────────────────────────
|
||||
|
||||
interface SpatialEntity {
|
||||
id: number;
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
// ─── CollisionCallbacks ──────────────────────────────────────────────────────
|
||||
|
||||
export interface BulletHitCallback {
|
||||
(bullet: Bullet, bulletId: string, victim: Player, victimId: string): void;
|
||||
}
|
||||
|
||||
export interface OrbCollectCallback {
|
||||
(player: Player, playerId: string, orb: XPOrb, orbId: string): void;
|
||||
}
|
||||
|
||||
export interface ObstacleCollideCallback {
|
||||
(player: Player, playerId: string, obstacle: Obstacle): void;
|
||||
}
|
||||
|
||||
// ─── CollisionSystem ─────────────────────────────────────────────────────────
|
||||
|
||||
export class CollisionSystem {
|
||||
private bulletGrid: SpatialHashGrid<SpatialEntity>;
|
||||
private playerGrid: SpatialHashGrid<SpatialEntity>;
|
||||
|
||||
constructor() {
|
||||
this.bulletGrid = new SpatialHashGrid<SpatialEntity>(SPATIAL_CELL_SIZE);
|
||||
this.playerGrid = new SpatialHashGrid<SpatialEntity>(SPATIAL_CELL_SIZE);
|
||||
}
|
||||
|
||||
// ─── Grid Building ─────────────────────────────────────────────────────────
|
||||
|
||||
/** Rebuild the spatial hash grid for bullets. */
|
||||
buildBulletGrid(bullets: Map<string, Bullet>): void {
|
||||
this.bulletGrid.clear();
|
||||
let idx = 0;
|
||||
for (const [id, bullet] of bullets.entries()) {
|
||||
const entity: SpatialEntity = {
|
||||
id: idx++,
|
||||
x: bullet.x,
|
||||
y: bullet.y,
|
||||
};
|
||||
this.bulletGrid.insert(entity);
|
||||
}
|
||||
}
|
||||
|
||||
/** Rebuild the spatial hash grid for players. */
|
||||
buildPlayerGrid(players: Map<string, Player>): void {
|
||||
this.playerGrid.clear();
|
||||
let idx = 0;
|
||||
for (const [id, player] of players.entries()) {
|
||||
if (!player.alive) continue;
|
||||
const entity: SpatialEntity = {
|
||||
id: idx++,
|
||||
x: player.x,
|
||||
y: player.y,
|
||||
};
|
||||
this.playerGrid.insert(entity);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Bullet vs Player ──────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Check all bullet-player collisions. For each bullet, query nearby players.
|
||||
* Excludes the bullet's owner. Calls onHit for each valid collision.
|
||||
*/
|
||||
checkBulletPlayerCollisions(
|
||||
bullets: Map<string, Bullet>,
|
||||
players: Map<string, Player>,
|
||||
onHit: BulletHitCallback
|
||||
): void {
|
||||
for (const [bulletId, bullet] of bullets.entries()) {
|
||||
// Skip bullets with no penetration left
|
||||
if (bullet.penetration <= 0) continue;
|
||||
|
||||
for (const [playerId, player] of players.entries()) {
|
||||
// Don't hit the owner
|
||||
if (bullet.ownerId === playerId) continue;
|
||||
if (!player.alive) continue;
|
||||
|
||||
// Quick distance check
|
||||
const dx: number = bullet.x - player.x;
|
||||
const dy: number = bullet.y - player.y;
|
||||
const r: number = bullet.size + player.radius;
|
||||
const distSq: number = dx * dx + dy * dy;
|
||||
|
||||
if (distSq < r * r) {
|
||||
onHit(bullet, bulletId, player, playerId);
|
||||
if (bullet.penetration <= 0) break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Player vs XP Orb ──────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Check all player-orb collisions. Pickup radius is ~30 units.
|
||||
*/
|
||||
checkPlayerOrbCollisions(
|
||||
players: Map<string, Player>,
|
||||
orbs: Map<string, XPOrb>,
|
||||
onCollect: OrbCollectCallback
|
||||
): void {
|
||||
const PICKUP_RADIUS: number = 30;
|
||||
const PICKUP_RADIUS_SQ: number = PICKUP_RADIUS * PICKUP_RADIUS;
|
||||
|
||||
for (const [playerId, player] of players.entries()) {
|
||||
if (!player.alive) continue;
|
||||
|
||||
for (const [orbId, orb] of orbs.entries()) {
|
||||
const dx: number = player.x - orb.x;
|
||||
const dy: number = player.y - orb.y;
|
||||
const distSq: number = dx * dx + dy * dy;
|
||||
|
||||
if (distSq < PICKUP_RADIUS_SQ) {
|
||||
onCollect(player, playerId, orb, orbId);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Player vs Obstacle ────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Check all player-obstacle collisions. Resolve overlap by pushing player out.
|
||||
* Obstacles are treated as AABB (axis-aligned bounding boxes) with circle overlap.
|
||||
*/
|
||||
checkPlayerObstacleCollisions(
|
||||
players: Map<string, Player>,
|
||||
obstacles: Map<string, Obstacle>,
|
||||
onCollide?: ObstacleCollideCallback
|
||||
): void {
|
||||
for (const [playerId, player] of players.entries()) {
|
||||
if (!player.alive) continue;
|
||||
|
||||
for (const [obsId, obstacle] of obstacles.entries()) {
|
||||
this.resolvePlayerObstacle(player, obstacle, onCollide, playerId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve a single player-obstacle collision. Obstacle is AABB.
|
||||
*/
|
||||
private resolvePlayerObstacle(
|
||||
player: Player,
|
||||
obstacle: Obstacle,
|
||||
onCollide: ObstacleCollideCallback | undefined,
|
||||
playerId: string
|
||||
): void {
|
||||
// Find closest point on obstacle rectangle to player center
|
||||
const closestX: number = Math.max(
|
||||
obstacle.x,
|
||||
Math.min(obstacle.x + obstacle.width, player.x)
|
||||
);
|
||||
const closestY: number = Math.max(
|
||||
obstacle.y,
|
||||
Math.min(obstacle.y + obstacle.height, player.y)
|
||||
);
|
||||
|
||||
const dx: number = player.x - closestX;
|
||||
const dy: number = player.y - closestY;
|
||||
const distSq: number = dx * dx + dy * dy;
|
||||
|
||||
if (distSq < player.radius * player.radius) {
|
||||
const dist: number = Math.sqrt(distSq);
|
||||
const overlap: number = player.radius - dist;
|
||||
|
||||
if (dist === 0) {
|
||||
// Player center is inside obstacle — push toward nearest edge
|
||||
const leftDist: number = Math.abs(player.x - obstacle.x);
|
||||
const rightDist: number = Math.abs(player.x - (obstacle.x + obstacle.width));
|
||||
const topDist: number = Math.abs(player.y - obstacle.y);
|
||||
const bottomDist: number = Math.abs(player.y - (obstacle.y + obstacle.height));
|
||||
|
||||
const minDist: number = Math.min(leftDist, rightDist, topDist, bottomDist);
|
||||
|
||||
if (minDist === leftDist) {
|
||||
player.x -= overlap;
|
||||
} else if (minDist === rightDist) {
|
||||
player.x += overlap;
|
||||
} else if (minDist === topDist) {
|
||||
player.y -= overlap;
|
||||
} else {
|
||||
player.y += overlap;
|
||||
}
|
||||
} else {
|
||||
const nx: number = dx / dist;
|
||||
const ny: number = dy / dist;
|
||||
player.x += nx * overlap;
|
||||
player.y += ny * overlap;
|
||||
}
|
||||
|
||||
onCollide?.(player, playerId, obstacle);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Player vs Player ──────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Check all player-player collisions. Apply soft push apart.
|
||||
* Uses O(n^2) for small player counts; spatial hash can be used for optimization.
|
||||
*/
|
||||
checkPlayerPlayerCollisions(players: Map<string, Player>): void {
|
||||
const playerList: { id: string; player: Player }[] = [];
|
||||
for (const [id, player] of players.entries()) {
|
||||
if (player.alive) {
|
||||
playerList.push({ id, player });
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < playerList.length; i++) {
|
||||
for (let j = i + 1; j < playerList.length; j++) {
|
||||
const a = playerList[i].player;
|
||||
const b = playerList[j].player;
|
||||
|
||||
const dx: number = a.x - b.x;
|
||||
const dy: number = a.y - b.y;
|
||||
const distSq: number = dx * dx + dy * dy;
|
||||
const minDist: number = a.radius + b.radius;
|
||||
|
||||
if (distSq < minDist * minDist && distSq > 0) {
|
||||
const dist: number = Math.sqrt(distSq);
|
||||
const overlap: number = minDist - dist;
|
||||
const nx: number = dx / dist;
|
||||
const ny: number = dy / dist;
|
||||
|
||||
// Soft push — each moves half the overlap
|
||||
const pushX: number = nx * overlap * 0.5;
|
||||
const pushY: number = ny * overlap * 0.5;
|
||||
|
||||
a.x += pushX;
|
||||
a.y += pushY;
|
||||
b.x -= pushX;
|
||||
b.y -= pushY;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Arena Bounds ──────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Clamp all alive players to arena bounds.
|
||||
*/
|
||||
checkArenaBounds(players: Map<string, Player>): void {
|
||||
for (const player of players.values()) {
|
||||
if (!player.alive) continue;
|
||||
|
||||
const minX: number = player.radius;
|
||||
const minY: number = player.radius;
|
||||
const maxX: number = ARENA_WIDTH - player.radius;
|
||||
const maxY: number = ARENA_HEIGHT - player.radius;
|
||||
|
||||
if (player.x < minX) player.x = minX;
|
||||
if (player.x > maxX) player.x = maxX;
|
||||
if (player.y < minY) player.y = minY;
|
||||
if (player.y > maxY) player.y = maxY;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clamp bullets to arena bounds. Returns set of bullet IDs that are out of bounds.
|
||||
*/
|
||||
checkBulletBounds(bullets: Map<string, Bullet>): Set<string> {
|
||||
const outOfBounds: Set<string> = new Set<string>();
|
||||
|
||||
for (const [id, bullet] of bullets.entries()) {
|
||||
if (
|
||||
bullet.x < -bullet.size ||
|
||||
bullet.x > ARENA_WIDTH + bullet.size ||
|
||||
bullet.y < -bullet.size ||
|
||||
bullet.y > ARENA_HEIGHT + bullet.size
|
||||
) {
|
||||
outOfBounds.add(id);
|
||||
}
|
||||
}
|
||||
|
||||
return outOfBounds;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,417 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Game Loop
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import {
|
||||
RoomState,
|
||||
Player,
|
||||
Bullet,
|
||||
XPOrb,
|
||||
LeaderboardEntry,
|
||||
type PlayerInput,
|
||||
TICK_MS,
|
||||
PLAYER_FRICTION,
|
||||
} from '@guncircle/shared';
|
||||
import { PlayerManager } from './player-manager.js';
|
||||
import { CollisionSystem } from './collision.js';
|
||||
import { PhysicsEngine } from './physics.js';
|
||||
import { GunSystem } from './gun-system.js';
|
||||
import { BranchSystem } from './branch-system.js';
|
||||
|
||||
// ─── Pending Input per Player ────────────────────────────────────────────────
|
||||
|
||||
interface PendingInput {
|
||||
input: PlayerInput;
|
||||
playerId: string;
|
||||
}
|
||||
|
||||
// ─── GameLoop ────────────────────────────────────────────────────────────────
|
||||
|
||||
export class GameLoop {
|
||||
private state: RoomState;
|
||||
private playerManager: PlayerManager;
|
||||
private collisionSystem: CollisionSystem;
|
||||
private physics: PhysicsEngine;
|
||||
private gunSystem: GunSystem;
|
||||
private branchSystem: BranchSystem;
|
||||
|
||||
private pendingInputs: PendingInput[] = [];
|
||||
private bulletLifetimes: Map<string, number> = new Map();
|
||||
private startTime: number;
|
||||
private tickCount: number = 0;
|
||||
|
||||
// Callbacks for room to handle player events
|
||||
onPlayerDeath: ((playerId: string, killerId?: string) => void) | undefined;
|
||||
onPlayerLevelUp: ((playerId: string) => void) | undefined;
|
||||
|
||||
constructor(
|
||||
state: RoomState,
|
||||
playerManager: PlayerManager,
|
||||
collisionSystem: CollisionSystem,
|
||||
physics: PhysicsEngine,
|
||||
gunSystem: GunSystem,
|
||||
branchSystem: BranchSystem
|
||||
) {
|
||||
this.state = state;
|
||||
this.playerManager = playerManager;
|
||||
this.collisionSystem = collisionSystem;
|
||||
this.physics = physics;
|
||||
this.gunSystem = gunSystem;
|
||||
this.branchSystem = branchSystem;
|
||||
this.startTime = Date.now();
|
||||
}
|
||||
|
||||
/**
|
||||
* Queue an input to be processed on the next tick.
|
||||
*/
|
||||
queueInput(playerId: string, input: PlayerInput): void {
|
||||
this.pendingInputs.push({ playerId, input });
|
||||
}
|
||||
|
||||
/**
|
||||
* The core tick function. Called every TICK_MS.
|
||||
* Order of operations is critical for deterministic simulation.
|
||||
*/
|
||||
tick(): void {
|
||||
this.tickCount++;
|
||||
const now: number = Date.now();
|
||||
const dt: number = TICK_MS / 1000; // seconds
|
||||
const dtMs: number = TICK_MS; // milliseconds
|
||||
|
||||
// 1. Increment tick counter
|
||||
this.state.tick = this.tickCount;
|
||||
|
||||
// 2. Process pending inputs
|
||||
this.processInputs(now, dt);
|
||||
|
||||
// 3. Update bullet positions
|
||||
this.updateBullets(dt);
|
||||
|
||||
// 4. Update player positions (apply velocity, friction, clamp)
|
||||
this.updatePlayers(dt);
|
||||
|
||||
// 5. Check all collisions
|
||||
this.checkCollisions();
|
||||
|
||||
// 6. Apply recoil recovery
|
||||
this.updateRecoil(dt);
|
||||
|
||||
// 7. Update reload timers, auto-reload when empty
|
||||
this.playerManager.updateReloads(this.state.players, dtMs);
|
||||
this.checkAutoReload();
|
||||
|
||||
// 8. Regenerate HP for alive players
|
||||
this.regenerateHp(dt);
|
||||
|
||||
// 9. Update XP orb lifetimes, remove expired
|
||||
this.updateXpOrbs(dt);
|
||||
|
||||
// 10. Process pending respawns
|
||||
this.playerManager.processRespawns(this.state);
|
||||
|
||||
// 11. Rebuild leaderboard (top 10 by XP)
|
||||
this.rebuildLeaderboard();
|
||||
|
||||
// 12. Remove expired bullets (lifetime exceeded)
|
||||
this.removeExpiredBullets(now);
|
||||
|
||||
// Clean up processed inputs
|
||||
this.pendingInputs = [];
|
||||
}
|
||||
|
||||
// ─── Input Processing ──────────────────────────────────────────────────────
|
||||
|
||||
private processInputs(now: number, dt: number): void {
|
||||
for (const pending of this.pendingInputs) {
|
||||
const player: Player | undefined = this.state.players.get(pending.playerId);
|
||||
if (player === undefined) continue;
|
||||
if (!player.alive) continue;
|
||||
|
||||
this.playerManager.applyInput(
|
||||
player,
|
||||
pending.input,
|
||||
pending.playerId,
|
||||
this.state,
|
||||
now,
|
||||
dt
|
||||
);
|
||||
|
||||
// Handle upgrade choices
|
||||
if (pending.input.upgradeChoice !== undefined && player.upgradePoints > 0) {
|
||||
const success: boolean = this.playerManager.applyUpgrade(
|
||||
player,
|
||||
pending.input.upgradeChoice
|
||||
);
|
||||
if (success && this.onPlayerLevelUp !== undefined) {
|
||||
this.onPlayerLevelUp(pending.playerId);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Bullet Update ─────────────────────────────────────────────────────────
|
||||
|
||||
private updateBullets(dt: number): void {
|
||||
for (const [bulletId, bullet] of this.state.bullets.entries()) {
|
||||
// Update position
|
||||
bullet.x += bullet.vx * dt;
|
||||
bullet.y += bullet.vy * dt;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Player Update ─────────────────────────────────────────────────────────
|
||||
|
||||
private updatePlayers(dt: number): void {
|
||||
for (const player of this.state.players.values()) {
|
||||
if (!player.alive) continue;
|
||||
|
||||
// Apply friction to velocity
|
||||
this.physics.applyFrictionToPlayer(player, PLAYER_FRICTION);
|
||||
|
||||
// Update position
|
||||
this.physics.updatePosition(player, dt);
|
||||
|
||||
// Clamp to arena
|
||||
this.physics.clampToArena(player);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Collision Checks ──────────────────────────────────────────────────────
|
||||
|
||||
private checkCollisions(): void {
|
||||
// Bullet vs Player
|
||||
this.collisionSystem.checkBulletPlayerCollisions(
|
||||
this.state.bullets,
|
||||
this.state.players,
|
||||
(bullet, bulletId, victim, victimId) => {
|
||||
this.handleBulletHit(bullet, bulletId, victim, victimId);
|
||||
}
|
||||
);
|
||||
|
||||
// Player vs XP Orb
|
||||
this.collisionSystem.checkPlayerOrbCollisions(
|
||||
this.state.players,
|
||||
this.state.xpOrbs,
|
||||
(player, playerId, orb, orbId) => {
|
||||
this.handleOrbCollect(player, playerId, orb, orbId);
|
||||
}
|
||||
);
|
||||
|
||||
// Player vs Obstacle
|
||||
this.collisionSystem.checkPlayerObstacleCollisions(
|
||||
this.state.players,
|
||||
this.state.obstacles
|
||||
);
|
||||
|
||||
// Player vs Player (soft push)
|
||||
this.collisionSystem.checkPlayerPlayerCollisions(this.state.players);
|
||||
|
||||
// Arena bounds
|
||||
this.collisionSystem.checkArenaBounds(this.state.players);
|
||||
|
||||
// Bullet out of bounds
|
||||
const outOfBounds: Set<string> =
|
||||
this.collisionSystem.checkBulletBounds(this.state.bullets);
|
||||
for (const id of outOfBounds) {
|
||||
this.state.bullets.delete(id);
|
||||
this.bulletLifetimes.delete(id);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Bullet Hit Handling ───────────────────────────────────────────────────
|
||||
|
||||
private handleBulletHit(
|
||||
bullet: Bullet,
|
||||
bulletId: string,
|
||||
victim: Player,
|
||||
victimId: string
|
||||
): void {
|
||||
if (!victim.alive) return;
|
||||
if (bullet.penetration <= 0) return;
|
||||
|
||||
// Apply damage
|
||||
const died: boolean = this.playerManager.takeDamage(
|
||||
victim,
|
||||
bullet.damage,
|
||||
bullet.isCritical
|
||||
);
|
||||
|
||||
// Reduce bullet penetration
|
||||
bullet.penetration -= 1;
|
||||
|
||||
// Remove bullet if no penetration left
|
||||
if (bullet.penetration <= 0) {
|
||||
this.state.bullets.delete(bulletId);
|
||||
this.bulletLifetimes.delete(bulletId);
|
||||
}
|
||||
|
||||
// Check death
|
||||
if (died) {
|
||||
this.playerManager.onDeath(victim, victimId, this.state, bullet.ownerId);
|
||||
if (this.onPlayerDeath !== undefined) {
|
||||
this.onPlayerDeath(victimId, bullet.ownerId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── XP Orb Collection ─────────────────────────────────────────────────────
|
||||
|
||||
private handleOrbCollect(
|
||||
player: Player,
|
||||
playerId: string,
|
||||
orb: XPOrb,
|
||||
orbId: string
|
||||
): void {
|
||||
if (!player.alive) return;
|
||||
|
||||
player.xp += orb.value;
|
||||
this.state.xpOrbs.delete(orbId);
|
||||
|
||||
// Check level up
|
||||
const leveledUp: boolean = this.playerManager.checkLevelUp(player);
|
||||
if (leveledUp && this.onPlayerLevelUp !== undefined) {
|
||||
this.onPlayerLevelUp(playerId);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Recoil Recovery ───────────────────────────────────────────────────────
|
||||
|
||||
private updateRecoil(dt: number): void {
|
||||
for (const player of this.state.players.values()) {
|
||||
if (!player.alive) continue;
|
||||
if (player.recoilOffset === 0) continue;
|
||||
|
||||
const gun = this.gunSystem.getGunConfig(player.gunType);
|
||||
if (gun === undefined) continue;
|
||||
|
||||
this.physics.applyRecoilRecovery(player, dt, gun.recoilRecoveryMs);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Auto Reload ───────────────────────────────────────────────────────────
|
||||
|
||||
private checkAutoReload(): void {
|
||||
for (const [playerId, player] of this.state.players.entries()) {
|
||||
if (!player.alive) continue;
|
||||
if (player.isReloading) continue;
|
||||
if (player.ammo <= 0) {
|
||||
this.playerManager.startReload(player, playerId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── HP Regeneration ───────────────────────────────────────────────────────
|
||||
|
||||
private regenerateHp(dt: number): void {
|
||||
for (const player of this.state.players.values()) {
|
||||
if (!player.alive) continue;
|
||||
if (player.hp >= player.maxHp) continue;
|
||||
|
||||
const regenPerSec: number = this.playerManager.calculateHpRegen(player);
|
||||
player.hp = Math.min(player.maxHp, player.hp + regenPerSec * dt);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── XP Orb Lifetime ───────────────────────────────────────────────────────
|
||||
|
||||
private updateXpOrbs(dt: number): void {
|
||||
const toRemove: string[] = [];
|
||||
|
||||
for (const [orbId, orb] of this.state.xpOrbs.entries()) {
|
||||
orb.lifetime -= dt;
|
||||
if (orb.lifetime <= 0) {
|
||||
toRemove.push(orbId);
|
||||
}
|
||||
}
|
||||
|
||||
for (const id of toRemove) {
|
||||
this.state.xpOrbs.delete(id);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Leaderboard ───────────────────────────────────────────────────────────
|
||||
|
||||
private rebuildLeaderboard(): void {
|
||||
// Collect all players
|
||||
const entries: { name: string; level: number; score: number; xp: number }[] = [];
|
||||
|
||||
for (const player of this.state.players.values()) {
|
||||
entries.push({
|
||||
name: player.name,
|
||||
level: player.level,
|
||||
score: player.score,
|
||||
xp: player.xp,
|
||||
});
|
||||
}
|
||||
|
||||
// Sort by XP descending
|
||||
entries.sort((a, b) => b.xp - a.xp);
|
||||
|
||||
// Take top 10
|
||||
const topN: number = Math.min(10, entries.length);
|
||||
|
||||
// Clear and rebuild
|
||||
this.state.leaderboard.clear();
|
||||
for (let i = 0; i < topN; i++) {
|
||||
const entry = entries[i];
|
||||
const lbEntry: LeaderboardEntry = new LeaderboardEntry();
|
||||
lbEntry.name = entry.name;
|
||||
lbEntry.level = entry.level;
|
||||
lbEntry.score = entry.score;
|
||||
lbEntry.xp = entry.xp;
|
||||
this.state.leaderboard.push(lbEntry);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Expired Bullet Cleanup ────────────────────────────────────────────────
|
||||
|
||||
private removeExpiredBullets(now: number): void {
|
||||
const toRemove: string[] = [];
|
||||
|
||||
for (const [bulletId, bullet] of this.state.bullets.entries()) {
|
||||
const gun = this.gunSystem.getGunConfig(bullet.bulletType);
|
||||
if (gun === undefined) continue;
|
||||
|
||||
// Track bullet spawn time via lifetime map
|
||||
let spawnTime: number | undefined = this.bulletLifetimes.get(bulletId);
|
||||
if (spawnTime === undefined) {
|
||||
spawnTime = now;
|
||||
this.bulletLifetimes.set(bulletId, spawnTime);
|
||||
}
|
||||
|
||||
const elapsed: number = now - spawnTime;
|
||||
if (elapsed > gun.bulletLifetimeMs) {
|
||||
toRemove.push(bulletId);
|
||||
}
|
||||
}
|
||||
|
||||
for (const id of toRemove) {
|
||||
this.state.bullets.delete(id);
|
||||
this.bulletLifetimes.delete(id);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Utility ───────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Get current tick number.
|
||||
*/
|
||||
getTick(): number {
|
||||
return this.tickCount;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get elapsed time since game loop started.
|
||||
*/
|
||||
getElapsedTime(): number {
|
||||
return Date.now() - this.startTime;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean up all resources.
|
||||
*/
|
||||
destroy(): void {
|
||||
this.pendingInputs = [];
|
||||
this.bulletLifetimes.clear();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Gun System
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import { readFileSync } from 'fs';
|
||||
import { dirname, join } from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import {
|
||||
vec2,
|
||||
type Vec2,
|
||||
type GunConfig,
|
||||
Bullet,
|
||||
GUN_BARREL_LENGTH,
|
||||
STAT_COUNT,
|
||||
Stat,
|
||||
randSign,
|
||||
} from '@guncircle/shared';
|
||||
|
||||
// ─── Gun Config Container ────────────────────────────────────────────────────
|
||||
|
||||
interface GunsJson {
|
||||
guns: GunConfig[];
|
||||
}
|
||||
|
||||
// ─── GunSystem ───────────────────────────────────────────────────────────────
|
||||
|
||||
export class GunSystem {
|
||||
private guns: GunConfig[] = [];
|
||||
|
||||
constructor() {
|
||||
this.loadConfigs();
|
||||
}
|
||||
|
||||
private loadConfigs(): void {
|
||||
try {
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const configPath = join(__dirname, '../config/guns.json');
|
||||
const raw = readFileSync(configPath, 'utf-8');
|
||||
const parsed: GunsJson = JSON.parse(raw) as GunsJson;
|
||||
this.guns = parsed.guns ?? [];
|
||||
} catch {
|
||||
this.guns = [];
|
||||
}
|
||||
}
|
||||
|
||||
/** Number of gun configs loaded */
|
||||
getGunCount(): number {
|
||||
return this.guns.length;
|
||||
}
|
||||
|
||||
/** Get gun config by 0-based index (used for gunType field) */
|
||||
getGunConfig(index: number): GunConfig | undefined {
|
||||
if (index < 0 || index >= this.guns.length) return undefined;
|
||||
return this.guns[index];
|
||||
}
|
||||
|
||||
/** Get gun config by string id */
|
||||
getGunById(id: string): GunConfig | undefined {
|
||||
return this.guns.find((g) => g.id === id);
|
||||
}
|
||||
|
||||
/** Get the index of a gun by its string id */
|
||||
getGunIndexById(id: string): number {
|
||||
return this.guns.findIndex((g) => g.id === id);
|
||||
}
|
||||
|
||||
/** Get all loaded gun configs */
|
||||
getAllGuns(): readonly GunConfig[] {
|
||||
return this.guns;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate recoil offset when firing.
|
||||
* Returns signed offset: ±gun.recoilOffset * (1 - recoilStabilityStat * 0.1)
|
||||
*/
|
||||
calculateRecoil(gun: GunConfig, recoilStabilityStat: number): number {
|
||||
const stabilityFactor: number = 1 - recoilStabilityStat * 0.1;
|
||||
const clampedStability: number = Math.max(0, stabilityFactor);
|
||||
const signedOffset: number = randSign() * gun.recoilOffset * clampedStability;
|
||||
return signedOffset;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate kickback velocity vector applied to player on shoot.
|
||||
* Returns vector in direction opposite to aim.
|
||||
*/
|
||||
calculateKickback(gun: GunConfig, aimAngle: number): Vec2 {
|
||||
const aimVector: Vec2 = vec2.fromAngle(aimAngle, 1);
|
||||
return vec2.mul(aimVector, -gun.kickbackForce);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the world-space position where a bullet should spawn (barrel tip).
|
||||
*/
|
||||
getBulletSpawnPos(
|
||||
playerX: number,
|
||||
playerY: number,
|
||||
aimAngle: number,
|
||||
recoilOffset: number
|
||||
): Vec2 {
|
||||
const totalAngle: number = aimAngle + recoilOffset;
|
||||
const barrelOffset: Vec2 = vec2.fromAngle(totalAngle, GUN_BARREL_LENGTH);
|
||||
return {
|
||||
x: playerX + barrelOffset.x,
|
||||
y: playerY + barrelOffset.y,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a Bullet schema instance from gun parameters.
|
||||
*/
|
||||
createBullet(
|
||||
gun: GunConfig,
|
||||
ownerId: string,
|
||||
spawnPos: Vec2,
|
||||
angle: number,
|
||||
damage: number,
|
||||
isCrit: boolean
|
||||
): Bullet {
|
||||
const bullet: Bullet = new Bullet();
|
||||
bullet.x = spawnPos.x;
|
||||
bullet.y = spawnPos.y;
|
||||
bullet.angle = angle;
|
||||
bullet.ownerId = ownerId;
|
||||
bullet.damage = damage;
|
||||
bullet.penetration = gun.penetration;
|
||||
bullet.bulletType = this.getGunIndexById(gun.id);
|
||||
bullet.isCritical = isCrit;
|
||||
bullet.vx = Math.cos(angle) * gun.bulletSpeed;
|
||||
bullet.vy = Math.sin(angle) * gun.bulletSpeed;
|
||||
bullet.size = gun.bulletSize;
|
||||
bullet.color = gun.bulletColor;
|
||||
return bullet;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate cooldown between shots in ms, adjusted by reload speed stat.
|
||||
* cooldown = 1000 / fireRate / (1 + reloadSpdStat * 0.1)
|
||||
*/
|
||||
calculateCooldown(gun: GunConfig, reloadSpdStat: number): number {
|
||||
const baseCooldown: number = 1000 / gun.fireRate;
|
||||
const reloadBonus: number = 1 + reloadSpdStat * 0.1;
|
||||
return baseCooldown / reloadBonus;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate reload time in ms, adjusted by reload speed stat.
|
||||
*/
|
||||
calculateReloadTime(gun: GunConfig, reloadSpdStat: number): number {
|
||||
const reloadBonus: number = 1 + reloadSpdStat * 0.1;
|
||||
return gun.reloadTimeMs / reloadBonus;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate damage per pellet, accounting for shotgun pellet count distribution.
|
||||
* Total damage is split evenly across pellets.
|
||||
*/
|
||||
calculatePelletDamage(baseDamage: number, pelletCount: number): number {
|
||||
if (pelletCount <= 0) return baseDamage;
|
||||
return baseDamage / pelletCount;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Server Entry Point
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import { Server } from '@colyseus/core';
|
||||
import { uWebSocketsTransport } from '@colyseus/uwebsockets-transport';
|
||||
import { ArenaRoom } from './room.js';
|
||||
|
||||
const port: number = parseInt(process.env.PORT ?? '3000', 10);
|
||||
const transport = new uWebSocketsTransport();
|
||||
const server = new Server({ transport });
|
||||
|
||||
server.define('arena', ArenaRoom);
|
||||
|
||||
server
|
||||
.listen(port)
|
||||
.then(() => {
|
||||
console.log(`GunCircle.io server listening on port ${port}`);
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
console.error('Failed to start server:', err.message);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -0,0 +1,239 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Physics Engine
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import {
|
||||
vec2,
|
||||
type Vec2,
|
||||
type Bullet,
|
||||
type Player,
|
||||
clamp,
|
||||
ARENA_WIDTH,
|
||||
ARENA_HEIGHT,
|
||||
PLAYER_FRICTION,
|
||||
GUN_RECOVERY_LERP,
|
||||
} from '@guncircle/shared';
|
||||
|
||||
// ─── Entity with position + velocity (duck typing for updatePosition) ────────
|
||||
|
||||
export interface PhysicsEntity {
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
}
|
||||
|
||||
// ─── PhysicsEngine ───────────────────────────────────────────────────────────
|
||||
|
||||
export class PhysicsEngine {
|
||||
/**
|
||||
* Update entity position by applying velocity over delta time.
|
||||
* x += vx * dt, y += vy * dt
|
||||
*/
|
||||
updatePosition(entity: PhysicsEntity, dt: number): void {
|
||||
entity.x += entity.vx * dt;
|
||||
entity.y += entity.vy * dt;
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply friction to velocity by multiplying by friction factor per tick.
|
||||
* For per-second friction: factor = Math.pow(frictionPerTick, TICK_RATE)
|
||||
* Here we use per-tick friction directly.
|
||||
*/
|
||||
applyFriction(velocity: Vec2, friction: number): Vec2 {
|
||||
return {
|
||||
x: velocity.x * friction,
|
||||
y: velocity.y * friction,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply friction directly to a Player's velocity components.
|
||||
*/
|
||||
applyFrictionToPlayer(player: Player, friction: number): void {
|
||||
player.vx *= friction;
|
||||
player.vy *= friction;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolve circle-circle collision by pushing entity A out of entity B.
|
||||
* Returns true if a collision was resolved.
|
||||
*/
|
||||
resolveCollision(
|
||||
a: { x: number; y: number; radius: number },
|
||||
b: { x: number; y: number; radius: number },
|
||||
softness: number = 0.5
|
||||
): boolean {
|
||||
const dx: number = a.x - b.x;
|
||||
const dy: number = a.y - b.y;
|
||||
const distSq: number = dx * dx + dy * dy;
|
||||
const minDist: number = a.radius + b.radius;
|
||||
|
||||
if (distSq >= minDist * minDist || distSq === 0) return false;
|
||||
|
||||
const dist: number = Math.sqrt(distSq);
|
||||
const overlap: number = minDist - dist;
|
||||
const nx: number = dx / dist;
|
||||
const ny: number = dy / dist;
|
||||
|
||||
a.x += nx * overlap * softness;
|
||||
a.y += ny * overlap * softness;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clamp player position to arena bounds, accounting for player radius.
|
||||
*/
|
||||
clampToArena(player: Player): void {
|
||||
const minX: number = player.radius;
|
||||
const minY: number = player.radius;
|
||||
const maxX: number = ARENA_WIDTH - player.radius;
|
||||
const maxY: number = ARENA_HEIGHT - player.radius;
|
||||
|
||||
player.x = clamp(player.x, minX, maxX);
|
||||
player.y = clamp(player.y, minY, maxY);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clamp any entity position to arena bounds (for bullets, orbs, etc).
|
||||
*/
|
||||
clampEntityToArena(entity: { x: number; y: number }, radius: number = 0): void {
|
||||
entity.x = clamp(entity.x, radius, ARENA_WIDTH - radius);
|
||||
entity.y = clamp(entity.y, radius, ARENA_HEIGHT - radius);
|
||||
}
|
||||
|
||||
/**
|
||||
* Raycast against a circle. Returns true if the ray from origin in direction dir
|
||||
* intersects the circle at (cx, cy) with radius cr within maxDist.
|
||||
*/
|
||||
raycastCircle(
|
||||
origin: Vec2,
|
||||
dir: Vec2,
|
||||
circle: { x: number; y: number; radius: number },
|
||||
maxDist: number
|
||||
): boolean {
|
||||
const oc: Vec2 = vec2.sub(origin, { x: circle.x, y: circle.y });
|
||||
const a: number = vec2.dot(dir, dir);
|
||||
const b: number = 2 * vec2.dot(oc, dir);
|
||||
const c: number = vec2.dot(oc, oc) - circle.radius * circle.radius;
|
||||
const discriminant: number = b * b - 4 * a * c;
|
||||
|
||||
if (discriminant < 0) return false;
|
||||
|
||||
const sqrtDisc: number = Math.sqrt(discriminant);
|
||||
const t1: number = (-b - sqrtDisc) / (2 * a);
|
||||
const t2: number = (-b + sqrtDisc) / (2 * a);
|
||||
|
||||
// Check if either intersection is within [0, maxDist]
|
||||
const tMin: number = Math.min(t1, t2);
|
||||
const tMax: number = Math.max(t1, t2);
|
||||
|
||||
return (tMin >= 0 && tMin <= maxDist) || (tMax >= 0 && tMax <= maxDist);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a bullet (treated as a moving circle) overlaps a player circle.
|
||||
* Uses swept-circle approximation: check endpoint overlap + mid-point.
|
||||
*/
|
||||
bulletHitsPlayer(
|
||||
bullet: Bullet,
|
||||
player: Player,
|
||||
dt: number
|
||||
): boolean {
|
||||
const bulletSpeed: number = Math.sqrt(bullet.vx * bullet.vx + bullet.vy * bullet.vy);
|
||||
if (bulletSpeed === 0) {
|
||||
// Stationary bullet — just check overlap
|
||||
const dx: number = bullet.x - player.x;
|
||||
const dy: number = bullet.y - player.y;
|
||||
const r: number = bullet.size + player.radius;
|
||||
return dx * dx + dy * dy < r * r;
|
||||
}
|
||||
|
||||
// Current position overlap
|
||||
const dx: number = bullet.x - player.x;
|
||||
const dy: number = bullet.y - player.y;
|
||||
const r: number = bullet.size + player.radius;
|
||||
if (dx * dx + dy * dy < r * r) return true;
|
||||
|
||||
// Check previous position (approximate by stepping back one frame)
|
||||
const prevX: number = bullet.x - bullet.vx * dt;
|
||||
const prevY: number = bullet.y - bullet.vy * dt;
|
||||
const dpx: number = prevX - player.x;
|
||||
const dpy: number = prevY - player.y;
|
||||
if (dpx * dpx + dpy * dpy < r * r) return true;
|
||||
|
||||
// Check if line segment from prev to current intersects player circle
|
||||
return this.segmentCircleIntersect(
|
||||
{ x: prevX, y: prevY },
|
||||
{ x: bullet.x, y: bullet.y },
|
||||
{ x: player.x, y: player.y },
|
||||
r
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a line segment intersects a circle.
|
||||
*/
|
||||
segmentCircleIntersect(
|
||||
segStart: Vec2,
|
||||
segEnd: Vec2,
|
||||
circleCenter: Vec2,
|
||||
circleRadius: number
|
||||
): boolean {
|
||||
const segDir: Vec2 = vec2.sub(segEnd, segStart);
|
||||
const segLenSq: number = vec2.lenSq(segDir);
|
||||
|
||||
if (segLenSq === 0) {
|
||||
// Degenerate segment — just check point vs circle
|
||||
const d: number = vec2.dist(segStart, circleCenter);
|
||||
return d < circleRadius;
|
||||
}
|
||||
|
||||
// Project circle center onto segment
|
||||
const toCircle: Vec2 = vec2.sub(circleCenter, segStart);
|
||||
const t: number = clamp(vec2.dot(toCircle, segDir) / segLenSq, 0, 1);
|
||||
const closest: Vec2 = vec2.add(segStart, vec2.mul(segDir, t));
|
||||
const dist: number = vec2.dist(closest, circleCenter);
|
||||
|
||||
return dist < circleRadius;
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply recoil recovery: lerp recoilOffset toward 0.
|
||||
* factor = 1 - exp(-dt / recoveryMs)
|
||||
*/
|
||||
applyRecoilRecovery(player: Player, dt: number, recoveryMs: number): void {
|
||||
if (recoveryMs <= 0) {
|
||||
player.recoilOffset = 0;
|
||||
return;
|
||||
}
|
||||
const factor: number = 1 - Math.exp(-dt / (recoveryMs / 1000));
|
||||
player.recoilOffset = player.recoilOffset * (1 - factor);
|
||||
if (Math.abs(player.recoilOffset) < 0.001) {
|
||||
player.recoilOffset = 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply recoil recovery using the simpler lerp method (alternative).
|
||||
*/
|
||||
applyRecoilRecoveryLerp(player: Player): void {
|
||||
player.recoilOffset *= 1 - GUN_RECOVERY_LERP;
|
||||
if (Math.abs(player.recoilOffset) < 0.0001) {
|
||||
player.recoilOffset = 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get distance squared between two entities.
|
||||
*/
|
||||
distSqBetween(
|
||||
a: { x: number; y: number },
|
||||
b: { x: number; y: number }
|
||||
): number {
|
||||
const dx: number = a.x - b.x;
|
||||
const dy: number = a.y - b.y;
|
||||
return dx * dx + dy * dy;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,662 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Player Manager
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import {
|
||||
Player,
|
||||
Bullet,
|
||||
XPOrb,
|
||||
RoomState,
|
||||
type PlayerInput,
|
||||
type GunConfig,
|
||||
type ClassBranch,
|
||||
vec2,
|
||||
type Vec2,
|
||||
PLAYER_BASE_HP,
|
||||
PLAYER_BASE_SPEED,
|
||||
PLAYER_BASE_RADIUS,
|
||||
PLAYER_FRICTION,
|
||||
ARENA_WIDTH,
|
||||
ARENA_HEIGHT,
|
||||
XP_LEVELS,
|
||||
MAX_LEVEL,
|
||||
STAT_COUNT,
|
||||
STAT_MAX_LEVEL,
|
||||
STAT_BONUSES,
|
||||
Stat,
|
||||
BASE_CRIT_MULTIPLIER,
|
||||
DEATH_XP_DROP_PCT,
|
||||
XP_KILL_PCT,
|
||||
RESPAWN_DELAY_MS,
|
||||
XP_ORB_LIFETIME_S,
|
||||
randFloat,
|
||||
randInt,
|
||||
clamp,
|
||||
} from '@guncircle/shared';
|
||||
import { GunSystem } from './gun-system.js';
|
||||
import { BranchSystem } from './branch-system.js';
|
||||
|
||||
// ─── Pending respawn tracking ────────────────────────────────────────────────
|
||||
|
||||
interface PendingRespawn {
|
||||
playerId: string;
|
||||
respawnAt: number;
|
||||
}
|
||||
|
||||
// ─── PlayerManager ───────────────────────────────────────────────────────────
|
||||
|
||||
export class PlayerManager {
|
||||
private gunSystem: GunSystem;
|
||||
private branchSystem: BranchSystem;
|
||||
private pendingRespawns: PendingRespawn[] = [];
|
||||
private lastShotTimes: Map<string, number> = new Map();
|
||||
private reloadTimers: Map<string, number> = new Map();
|
||||
private nextOrbId: number = 0;
|
||||
|
||||
constructor(gunSystem: GunSystem, branchSystem: BranchSystem) {
|
||||
this.gunSystem = gunSystem;
|
||||
this.branchSystem = branchSystem;
|
||||
}
|
||||
|
||||
// ─── Spawning ──────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Create and spawn a new player at a random position with base stats.
|
||||
*/
|
||||
spawnPlayer(id: string, name: string, state: RoomState): Player {
|
||||
const player: Player = new Player();
|
||||
const spawnPos: Vec2 = this.randomSpawnPosition();
|
||||
|
||||
player.x = spawnPos.x;
|
||||
player.y = spawnPos.y;
|
||||
player.name = name.substring(0, 16);
|
||||
player.hp = PLAYER_BASE_HP;
|
||||
player.maxHp = PLAYER_BASE_HP;
|
||||
player.level = 1;
|
||||
player.xp = 0;
|
||||
player.xpToNext = XP_LEVELS[1] ?? 50;
|
||||
player.gunType = 0; // Pistol
|
||||
player.classType = 0; // No branch
|
||||
player.score = 0;
|
||||
player.alive = true;
|
||||
player.radius = PLAYER_BASE_RADIUS;
|
||||
player.upgradePoints = 0;
|
||||
player.recoilOffset = 0;
|
||||
player.skinId = 0;
|
||||
player.vx = 0;
|
||||
player.vy = 0;
|
||||
|
||||
// Set base gun stats
|
||||
const gun: GunConfig | undefined = this.gunSystem.getGunConfig(0);
|
||||
if (gun !== undefined) {
|
||||
player.ammo = gun.ammoMax;
|
||||
player.maxAmmo = gun.ammoMax;
|
||||
} else {
|
||||
player.ammo = 12;
|
||||
player.maxAmmo = 12;
|
||||
}
|
||||
player.isReloading = false;
|
||||
|
||||
// Reset stats
|
||||
for (let i = 0; i < STAT_COUNT; i++) {
|
||||
player.stats[i] = 0;
|
||||
}
|
||||
|
||||
state.players.set(id, player);
|
||||
this.lastShotTimes.set(id, 0);
|
||||
this.reloadTimers.delete(id);
|
||||
|
||||
return player;
|
||||
}
|
||||
|
||||
private randomSpawnPosition(): Vec2 {
|
||||
const margin: number = 100;
|
||||
return {
|
||||
x: randFloat(margin, ARENA_WIDTH - margin),
|
||||
y: randFloat(margin, ARENA_HEIGHT - margin),
|
||||
};
|
||||
}
|
||||
|
||||
// ─── Input Processing ──────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Apply player input: movement and shooting.
|
||||
*/
|
||||
applyInput(
|
||||
player: Player,
|
||||
input: PlayerInput,
|
||||
playerId: string,
|
||||
state: RoomState,
|
||||
currentTime: number,
|
||||
dt: number
|
||||
): void {
|
||||
if (!player.alive) return;
|
||||
|
||||
// Update aim angle
|
||||
player.angle = input.aimAngle;
|
||||
|
||||
// Process movement
|
||||
if (input.moveAngle >= 0) {
|
||||
const moveSpeedStat: number = player.stats[Stat.MovementSpeed] ?? 0;
|
||||
const maxSpeed: number = PLAYER_BASE_SPEED * (1 + moveSpeedStat * 0.05);
|
||||
|
||||
player.vx += Math.cos(input.moveAngle) * maxSpeed * 0.15;
|
||||
player.vy += Math.sin(input.moveAngle) * maxSpeed * 0.15;
|
||||
|
||||
// Clamp speed
|
||||
const speed: number = Math.sqrt(player.vx * player.vx + player.vy * player.vy);
|
||||
if (speed > maxSpeed) {
|
||||
const scale: number = maxSpeed / speed;
|
||||
player.vx *= scale;
|
||||
player.vy *= scale;
|
||||
}
|
||||
}
|
||||
|
||||
// Process shooting
|
||||
if (input.isShooting) {
|
||||
this.handleShoot(player, playerId, state, input.aimAngle, currentTime);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Shooting ──────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Handle a single shot from the player's current gun.
|
||||
*/
|
||||
handleShoot(
|
||||
player: Player,
|
||||
playerId: string,
|
||||
state: RoomState,
|
||||
aimAngle: number,
|
||||
currentTime: number
|
||||
): void {
|
||||
if (!player.alive) return;
|
||||
if (player.isReloading) return;
|
||||
if (player.ammo <= 0) {
|
||||
// Auto-reload when empty
|
||||
this.startReload(player, playerId);
|
||||
return;
|
||||
}
|
||||
|
||||
const gun: GunConfig | undefined = this.gunSystem.getGunConfig(player.gunType);
|
||||
if (gun === undefined) return;
|
||||
|
||||
// Check fire rate
|
||||
const lastShot: number = this.lastShotTimes.get(playerId) ?? 0;
|
||||
const reloadSpdStat: number = player.stats[Stat.ReloadSpeed] ?? 0;
|
||||
const cooldown: number = this.gunSystem.calculateCooldown(gun, reloadSpdStat);
|
||||
|
||||
if (currentTime - lastShot < cooldown) return;
|
||||
|
||||
// Apply recoil
|
||||
const recoilStabStat: number = player.stats[Stat.RecoilStability] ?? 0;
|
||||
const recoilOffset: number = this.gunSystem.calculateRecoil(gun, recoilStabStat);
|
||||
player.recoilOffset = recoilOffset;
|
||||
|
||||
// Calculate kickback
|
||||
const kickback: Vec2 = this.gunSystem.calculateKickback(gun, aimAngle);
|
||||
player.vx += kickback.x;
|
||||
player.vy += kickback.y;
|
||||
|
||||
// Spawn bullet(s)
|
||||
if (gun.pelletCount > 1) {
|
||||
// Shotgun spread
|
||||
const halfSpread: number = gun.spread / 2;
|
||||
const pelletDamage: number = this.gunSystem.calculatePelletDamage(
|
||||
this.calculateDamage(player, gun),
|
||||
gun.pelletCount
|
||||
);
|
||||
|
||||
for (let i = 0; i < gun.pelletCount; i++) {
|
||||
const t: number = gun.pelletCount <= 1 ? 0 : i / (gun.pelletCount - 1);
|
||||
const pelletAngle: number = aimAngle + recoilOffset - halfSpread + gun.spread * t;
|
||||
const spawnPos: Vec2 = this.gunSystem.getBulletSpawnPos(
|
||||
player.x,
|
||||
player.y,
|
||||
aimAngle,
|
||||
recoilOffset
|
||||
);
|
||||
|
||||
const isCrit: boolean = this.rollCrit(player);
|
||||
const finalDamage: number = isCrit
|
||||
? pelletDamage * (BASE_CRIT_MULTIPLIER + (player.stats[Stat.CritDamage] ?? 0) * 0.1)
|
||||
: pelletDamage;
|
||||
|
||||
const bullet: Bullet = this.gunSystem.createBullet(
|
||||
gun,
|
||||
playerId,
|
||||
spawnPos,
|
||||
pelletAngle,
|
||||
finalDamage,
|
||||
isCrit
|
||||
);
|
||||
|
||||
const bulletId: string = this.generateBulletId(state);
|
||||
state.bullets.set(bulletId, bullet);
|
||||
}
|
||||
} else {
|
||||
// Single bullet
|
||||
const spawnPos: Vec2 = this.gunSystem.getBulletSpawnPos(
|
||||
player.x,
|
||||
player.y,
|
||||
aimAngle,
|
||||
recoilOffset
|
||||
);
|
||||
|
||||
const isCrit: boolean = this.rollCrit(player);
|
||||
const baseDamage: number = this.calculateDamage(player, gun);
|
||||
const finalDamage: number = isCrit
|
||||
? baseDamage * (BASE_CRIT_MULTIPLIER + (player.stats[Stat.CritDamage] ?? 0) * 0.1)
|
||||
: baseDamage;
|
||||
|
||||
const bullet: Bullet = this.gunSystem.createBullet(
|
||||
gun,
|
||||
playerId,
|
||||
spawnPos,
|
||||
aimAngle + recoilOffset,
|
||||
finalDamage,
|
||||
isCrit
|
||||
);
|
||||
|
||||
const bulletId: string = this.generateBulletId(state);
|
||||
state.bullets.set(bulletId, bullet);
|
||||
}
|
||||
|
||||
// Consume ammo
|
||||
player.ammo = Math.max(0, player.ammo - 1);
|
||||
this.lastShotTimes.set(playerId, currentTime);
|
||||
|
||||
// Auto-reload when empty
|
||||
if (player.ammo <= 0) {
|
||||
this.startReload(player, playerId);
|
||||
}
|
||||
}
|
||||
|
||||
private rollCrit(player: Player): boolean {
|
||||
const critChance: number = (player.stats[Stat.CritChance] ?? 0) * 0.03;
|
||||
return Math.random() < critChance;
|
||||
}
|
||||
|
||||
private generateBulletId(state: RoomState): string {
|
||||
return `b_${state.tick}_${Math.random().toString(36).substring(2, 9)}`;
|
||||
}
|
||||
|
||||
// ─── Reloading ─────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Start reloading the player's gun.
|
||||
*/
|
||||
startReload(player: Player, playerId: string): void {
|
||||
if (player.isReloading) return;
|
||||
if (player.ammo >= player.maxAmmo) return;
|
||||
|
||||
const gun: GunConfig | undefined = this.gunSystem.getGunConfig(player.gunType);
|
||||
if (gun === undefined) return;
|
||||
|
||||
const reloadSpdStat: number = player.stats[Stat.ReloadSpeed] ?? 0;
|
||||
const reloadTime: number = this.gunSystem.calculateReloadTime(gun, reloadSpdStat);
|
||||
|
||||
player.isReloading = true;
|
||||
this.reloadTimers.set(playerId, reloadTime);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update all reload timers. Call every tick.
|
||||
* dt is in milliseconds.
|
||||
*/
|
||||
updateReloads(players: Map<string, Player>, dtMs: number): void {
|
||||
for (const [playerId, player] of players.entries()) {
|
||||
if (!player.isReloading) continue;
|
||||
|
||||
let remaining: number | undefined = this.reloadTimers.get(playerId);
|
||||
if (remaining === undefined) {
|
||||
// Timer missing — fix it
|
||||
const gun: GunConfig | undefined = this.gunSystem.getGunConfig(player.gunType);
|
||||
remaining = gun !== undefined ? gun.reloadTimeMs : 1500;
|
||||
}
|
||||
|
||||
remaining -= dtMs;
|
||||
this.reloadTimers.set(playerId, remaining);
|
||||
|
||||
if (remaining <= 0) {
|
||||
// Reload complete
|
||||
const gun: GunConfig | undefined = this.gunSystem.getGunConfig(player.gunType);
|
||||
player.ammo = gun !== undefined ? gun.ammoMax : player.maxAmmo;
|
||||
player.isReloading = false;
|
||||
this.reloadTimers.delete(playerId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Damage & Death ────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Apply damage to a player. Returns true if the player died.
|
||||
*/
|
||||
takeDamage(player: Player, damage: number, isCrit: boolean): boolean {
|
||||
if (!player.alive) return false;
|
||||
if (damage <= 0) return false;
|
||||
|
||||
player.hp = Math.max(0, player.hp - damage);
|
||||
|
||||
if (player.hp <= 0) {
|
||||
return true; // Player died
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle player death: drop XP orbs, reset stats, mark !alive.
|
||||
*/
|
||||
onDeath(
|
||||
player: Player,
|
||||
playerId: string,
|
||||
state: RoomState,
|
||||
killerId?: string
|
||||
): void {
|
||||
if (player.alive) {
|
||||
// Drop 50% of held XP as orbs
|
||||
this.dropXpOrbs(player, state);
|
||||
|
||||
// Award kill to killer
|
||||
if (killerId !== undefined) {
|
||||
const killer: Player | undefined = state.players.get(killerId);
|
||||
if (killer !== undefined && killer.alive) {
|
||||
killer.score += 1;
|
||||
// Award 50% of victim's XP to killer
|
||||
const xpReward: number = Math.floor(player.xp * XP_KILL_PCT);
|
||||
killer.xp += xpReward;
|
||||
this.checkLevelUp(killer);
|
||||
}
|
||||
}
|
||||
|
||||
// Reset player
|
||||
player.alive = false;
|
||||
player.hp = 0;
|
||||
player.vx = 0;
|
||||
player.vy = 0;
|
||||
|
||||
// Schedule respawn
|
||||
this.pendingRespawns.push({
|
||||
playerId,
|
||||
respawnAt: Date.now() + RESPAWN_DELAY_MS,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Drop XP orbs at player's death position. Total value = 50% of held XP.
|
||||
*/
|
||||
private dropXpOrbs(player: Player, state: RoomState): void {
|
||||
const dropAmount: number = Math.floor(player.xp * DEATH_XP_DROP_PCT);
|
||||
if (dropAmount <= 0) return;
|
||||
|
||||
const orbCount: number = Math.min(10, Math.max(3, player.level));
|
||||
const xpPerOrb: number = Math.floor(dropAmount / orbCount);
|
||||
|
||||
if (xpPerOrb <= 0) return;
|
||||
|
||||
for (let i = 0; i < orbCount; i++) {
|
||||
const angle: number = Math.random() * Math.PI * 2;
|
||||
const dist: number = randFloat(10, 50);
|
||||
const orb: XPOrb = new XPOrb();
|
||||
orb.x = clamp(player.x + Math.cos(angle) * dist, 0, ARENA_WIDTH);
|
||||
orb.y = clamp(player.y + Math.sin(angle) * dist, 0, ARENA_HEIGHT);
|
||||
orb.value = xpPerOrb;
|
||||
orb.lifetime = XP_ORB_LIFETIME_S;
|
||||
|
||||
const orbId: string = `orb_${this.nextOrbId++}`;
|
||||
state.xpOrbs.set(orbId, orb);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Respawn ───────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Process pending respawns. Call every tick.
|
||||
*/
|
||||
processRespawns(state: RoomState): void {
|
||||
const now: number = Date.now();
|
||||
const stillPending: PendingRespawn[] = [];
|
||||
|
||||
for (const pending of this.pendingRespawns) {
|
||||
if (now >= pending.respawnAt) {
|
||||
const player: Player | undefined = state.players.get(pending.playerId);
|
||||
if (player !== undefined) {
|
||||
this.respawnPlayer(player);
|
||||
}
|
||||
} else {
|
||||
stillPending.push(pending);
|
||||
}
|
||||
}
|
||||
|
||||
this.pendingRespawns = stillPending;
|
||||
}
|
||||
|
||||
/**
|
||||
* Respawn a player: new random position, reset to level 1, base stats.
|
||||
*/
|
||||
respawnPlayer(player: Player): void {
|
||||
const spawnPos: Vec2 = this.randomSpawnPosition();
|
||||
player.x = spawnPos.x;
|
||||
player.y = spawnPos.y;
|
||||
player.vx = 0;
|
||||
player.vy = 0;
|
||||
player.angle = 0;
|
||||
player.recoilOffset = 0;
|
||||
|
||||
// Keep level and XP but reset HP
|
||||
player.hp = player.maxHp;
|
||||
player.alive = true;
|
||||
|
||||
// Reset gun to pistol
|
||||
player.gunType = 0;
|
||||
const gun: GunConfig | undefined = this.gunSystem.getGunConfig(0);
|
||||
if (gun !== undefined) {
|
||||
player.ammo = gun.ammoMax;
|
||||
player.maxAmmo = gun.ammoMax;
|
||||
}
|
||||
player.isReloading = false;
|
||||
}
|
||||
|
||||
// ─── Leveling & Upgrades ───────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Check if player has enough XP to level up. Award points and update thresholds.
|
||||
*/
|
||||
checkLevelUp(player: Player): boolean {
|
||||
if (player.level >= MAX_LEVEL) return false;
|
||||
|
||||
let leveledUp: boolean = false;
|
||||
|
||||
while (player.level < MAX_LEVEL && player.xp >= (XP_LEVELS[player.level] ?? Infinity)) {
|
||||
player.level += 1;
|
||||
player.upgradePoints += 1;
|
||||
leveledUp = true;
|
||||
|
||||
// Update xpToNext
|
||||
if (player.level < MAX_LEVEL) {
|
||||
player.xpToNext = XP_LEVELS[player.level] ?? player.xpToNext;
|
||||
} else {
|
||||
player.xpToNext = 999999;
|
||||
}
|
||||
|
||||
// Apply level-based stat updates
|
||||
this.onLevelUp(player);
|
||||
}
|
||||
|
||||
return leveledUp;
|
||||
}
|
||||
|
||||
private onLevelUp(player: Player): void {
|
||||
// Recalculate max HP
|
||||
player.maxHp = this.calculateMaxHp(player);
|
||||
// Heal on level up
|
||||
player.hp = player.maxHp;
|
||||
}
|
||||
|
||||
/**
|
||||
* Apply a stat upgrade choice to a player.
|
||||
* choice: 0-8 for stats, or 100+ for branch selection.
|
||||
*/
|
||||
applyUpgrade(player: Player, choice: number): boolean {
|
||||
if (player.upgradePoints <= 0) return false;
|
||||
|
||||
// Branch selection: choice >= 100 means branch index
|
||||
if (choice >= 100) {
|
||||
const branchIdx: number = choice - 100;
|
||||
const branch: ClassBranch | undefined = this.branchSystem.getBranchByIndex(branchIdx);
|
||||
if (branch === undefined) return false;
|
||||
if (branch.levelRequired > player.level) return false;
|
||||
|
||||
this.branchSystem.applyBranch(player, branch.id);
|
||||
player.upgradePoints -= 1;
|
||||
|
||||
// Apply branch bonuses
|
||||
player.maxHp = this.calculateMaxHp(player);
|
||||
player.hp = Math.min(player.hp, player.maxHp);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// Stat upgrade
|
||||
if (choice < 0 || choice >= STAT_COUNT) return false;
|
||||
|
||||
const currentLevel: number = player.stats[choice] ?? 0;
|
||||
if (currentLevel >= STAT_MAX_LEVEL) return false;
|
||||
|
||||
player.stats[choice] = currentLevel + 1;
|
||||
player.upgradePoints -= 1;
|
||||
|
||||
// Apply immediate effects
|
||||
if (choice === Stat.MaxHp) {
|
||||
player.maxHp = this.calculateMaxHp(player);
|
||||
player.hp = Math.min(player.hp + STAT_BONUSES[Stat.MaxHp].perLevel, player.maxHp);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// ─── Stat Calculations ─────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Calculate max HP with stat and branch bonuses.
|
||||
*/
|
||||
calculateMaxHp(player: Player): number {
|
||||
const baseHp: number = PLAYER_BASE_HP;
|
||||
const hpStat: number = player.stats[Stat.MaxHp] ?? 0;
|
||||
const hpBonus: number = hpStat * STAT_BONUSES[Stat.MaxHp].perLevel;
|
||||
|
||||
// Branch bonuses
|
||||
const branchBonuses: Record<Stat, number> =
|
||||
this.branchSystem.calculateBranchBonuses(player);
|
||||
const branchHpBonus: number = branchBonuses[Stat.MaxHp];
|
||||
|
||||
return Math.floor(baseHp + hpBonus + baseHp * branchHpBonus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate movement speed with stat and branch bonuses.
|
||||
*/
|
||||
calculateSpeed(player: Player): number {
|
||||
const moveStat: number = player.stats[Stat.MovementSpeed] ?? 0;
|
||||
const branchBonuses: Record<Stat, number> =
|
||||
this.branchSystem.calculateBranchBonuses(player);
|
||||
const branchMoveBonus: number = branchBonuses[Stat.MovementSpeed];
|
||||
|
||||
return PLAYER_BASE_SPEED * (1 + moveStat * 0.05 + branchMoveBonus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate damage multiplier from stats and branches.
|
||||
*/
|
||||
calculateDamage(player: Player, gun: GunConfig): number {
|
||||
const dmgStat: number = player.stats[Stat.BulletDamage] ?? 0;
|
||||
const branchBonuses: Record<Stat, number> =
|
||||
this.branchSystem.calculateBranchBonuses(player);
|
||||
const branchDmgBonus: number = branchBonuses[Stat.BulletDamage];
|
||||
|
||||
return gun.damage * (1 + dmgStat * 0.1 + branchDmgBonus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate HP regeneration per second.
|
||||
*/
|
||||
calculateHpRegen(player: Player): number {
|
||||
const regenStat: number = player.stats[Stat.HpRegen] ?? 0;
|
||||
const baseRegen: number = 1; // HP per second
|
||||
const statBonus: number = regenStat * STAT_BONUSES[Stat.HpRegen].perLevel;
|
||||
|
||||
const branchBonuses: Record<Stat, number> =
|
||||
this.branchSystem.calculateBranchBonuses(player);
|
||||
const branchRegenBonus: number = branchBonuses[Stat.HpRegen];
|
||||
|
||||
return baseRegen + statBonus + baseRegen * branchRegenBonus;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the recoil stability factor (0-1, higher = less recoil).
|
||||
*/
|
||||
calculateRecoilStability(player: Player): number {
|
||||
const stabStat: number = player.stats[Stat.RecoilStability] ?? 0;
|
||||
const branchBonuses: Record<Stat, number> =
|
||||
this.branchSystem.calculateBranchBonuses(player);
|
||||
const branchStabBonus: number = branchBonuses[Stat.RecoilStability];
|
||||
|
||||
return Math.min(1, stabStat * 0.1 + branchStabBonus);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the effective reload speed bonus.
|
||||
*/
|
||||
calculateReloadBonus(player: Player): number {
|
||||
const reloadStat: number = player.stats[Stat.ReloadSpeed] ?? 0;
|
||||
const branchBonuses: Record<Stat, number> =
|
||||
this.branchSystem.calculateBranchBonuses(player);
|
||||
const branchReloadBonus: number = branchBonuses[Stat.ReloadSpeed];
|
||||
|
||||
return reloadStat * 0.1 + branchReloadBonus;
|
||||
}
|
||||
|
||||
// ─── Utility ───────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Get the pending respawn list (for cleanup).
|
||||
*/
|
||||
getPendingRespawns(): PendingRespawn[] {
|
||||
return this.pendingRespawns;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a player's pending respawn.
|
||||
*/
|
||||
clearPendingRespawn(playerId: string): void {
|
||||
this.pendingRespawns = this.pendingRespawns.filter((p) => p.playerId !== playerId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get remaining reload time for a player (in ms).
|
||||
*/
|
||||
getReloadRemaining(playerId: string): number {
|
||||
return this.reloadTimers.get(playerId) ?? 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clean up all tracking data for a player.
|
||||
*/
|
||||
removePlayer(playerId: string): void {
|
||||
this.lastShotTimes.delete(playerId);
|
||||
this.reloadTimers.delete(playerId);
|
||||
this.pendingRespawns = this.pendingRespawns.filter((p) => p.playerId !== playerId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset all player tracking.
|
||||
*/
|
||||
reset(): void {
|
||||
this.pendingRespawns = [];
|
||||
this.lastShotTimes.clear();
|
||||
this.reloadTimers.clear();
|
||||
this.nextOrbId = 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,355 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Arena Room
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import { Room, Client } from '@colyseus/core';
|
||||
import {
|
||||
RoomState,
|
||||
Player,
|
||||
Obstacle,
|
||||
MAX_PLAYERS_PER_ROOM,
|
||||
TICK_MS,
|
||||
ARENA_WIDTH,
|
||||
ARENA_HEIGHT,
|
||||
} from '@guncircle/shared';
|
||||
import { GunSystem } from './gun-system.js';
|
||||
import { BranchSystem } from './branch-system.js';
|
||||
import { PlayerManager } from './player-manager.js';
|
||||
import { CollisionSystem } from './collision.js';
|
||||
import { PhysicsEngine } from './physics.js';
|
||||
import { GameLoop } from './game-loop.js';
|
||||
import { InputValidator } from './validation.js';
|
||||
|
||||
// ─── Join Options ────────────────────────────────────────────────────────────
|
||||
|
||||
interface JoinOptions {
|
||||
name?: string;
|
||||
}
|
||||
|
||||
// ─── ArenaRoom ───────────────────────────────────────────────────────────────
|
||||
|
||||
export class ArenaRoom extends Room<RoomState> {
|
||||
readonly maxClients: number = MAX_PLAYERS_PER_ROOM;
|
||||
autoDispose: boolean = false;
|
||||
|
||||
// Subsystems
|
||||
private gunSystem: GunSystem;
|
||||
private branchSystem: BranchSystem;
|
||||
private playerManager: PlayerManager;
|
||||
private collisionSystem: CollisionSystem;
|
||||
private physics: PhysicsEngine;
|
||||
private inputValidator: InputValidator;
|
||||
private gameLoop: GameLoop;
|
||||
|
||||
// Room lifecycle
|
||||
private gameLoopInterval: ReturnType<typeof setInterval> | undefined;
|
||||
private disposeTimer: ReturnType<typeof setTimeout> | undefined;
|
||||
private emptySince: number = 0;
|
||||
private readonly DISPOSE_AFTER_EMPTY_MS: number = 60000;
|
||||
|
||||
// Client tracking
|
||||
private clientNames: Map<string, string> = new Map();
|
||||
|
||||
// ─── Colyseus Lifecycle ────────────────────────────────────────────────────
|
||||
|
||||
onCreate(_options: unknown): void {
|
||||
// Initialize state
|
||||
this.setState(new RoomState());
|
||||
|
||||
// Initialize subsystems
|
||||
this.gunSystem = new GunSystem();
|
||||
this.branchSystem = new BranchSystem();
|
||||
this.playerManager = new PlayerManager(this.gunSystem, this.branchSystem);
|
||||
this.collisionSystem = new CollisionSystem();
|
||||
this.physics = new PhysicsEngine();
|
||||
this.inputValidator = new InputValidator();
|
||||
|
||||
// Initialize game loop
|
||||
this.gameLoop = new GameLoop(
|
||||
this.state,
|
||||
this.playerManager,
|
||||
this.collisionSystem,
|
||||
this.physics,
|
||||
this.gunSystem,
|
||||
this.branchSystem
|
||||
);
|
||||
|
||||
// Set up game loop callbacks
|
||||
this.gameLoop.onPlayerDeath = (playerId: string, killerId?: string) => {
|
||||
this.broadcast('playerDeath', { victim: playerId, killer: killerId });
|
||||
};
|
||||
this.gameLoop.onPlayerLevelUp = (playerId: string) => {
|
||||
this.broadcast('playerLevelUp', { playerId });
|
||||
};
|
||||
|
||||
// Spawn some initial obstacles
|
||||
this.spawnObstacles();
|
||||
|
||||
// Start game loop
|
||||
this.gameLoopInterval = setInterval(() => {
|
||||
this.gameLoop.tick();
|
||||
}, TICK_MS);
|
||||
|
||||
// Handle 'input' messages
|
||||
this.onMessage('input', (client: Client, data: unknown) => {
|
||||
this.handleInputMessage(client, data);
|
||||
});
|
||||
|
||||
// Handle 'upgrade' messages
|
||||
this.onMessage('upgrade', (client: Client, data: unknown) => {
|
||||
this.handleUpgradeMessage(client, data);
|
||||
});
|
||||
|
||||
// Handle 'reload' messages
|
||||
this.onMessage('reload', (client: Client, _data: unknown) => {
|
||||
this.handleReloadMessage(client);
|
||||
});
|
||||
|
||||
console.log(`[ArenaRoom] Created — maxClients=${this.maxClients}`);
|
||||
}
|
||||
|
||||
onJoin(client: Client, options: JoinOptions): void {
|
||||
const name: string = (options.name ?? `Player ${client.sessionId.substring(0, 4)}`).trim();
|
||||
const sanitizedName: string = name.substring(0, 16) || 'Player';
|
||||
|
||||
this.clientNames.set(client.sessionId, sanitizedName);
|
||||
|
||||
// Spawn player
|
||||
const player: Player = this.playerManager.spawnPlayer(
|
||||
client.sessionId,
|
||||
sanitizedName,
|
||||
this.state
|
||||
);
|
||||
|
||||
// Send gun configs to client
|
||||
client.send('gunConfigs', { guns: this.gunSystem.getAllGuns() });
|
||||
|
||||
// Send branch configs to client
|
||||
client.send('branchConfigs', { branches: this.branchSystem.getAllBranches() });
|
||||
|
||||
// Cancel dispose timer if active
|
||||
if (this.disposeTimer !== undefined) {
|
||||
clearTimeout(this.disposeTimer);
|
||||
this.disposeTimer = undefined;
|
||||
}
|
||||
|
||||
console.log(`[ArenaRoom] Joined: ${sanitizedName} (${client.sessionId}) — total: ${this.state.players.size}`);
|
||||
}
|
||||
|
||||
onLeave(client: Client, consented: boolean): void {
|
||||
const player: Player | undefined = this.state.players.get(client.sessionId);
|
||||
if (player !== undefined) {
|
||||
// Mark as dead
|
||||
player.alive = false;
|
||||
player.hp = 0;
|
||||
|
||||
// Clean up tracking
|
||||
this.playerManager.removePlayer(client.sessionId);
|
||||
}
|
||||
|
||||
this.clientNames.delete(client.sessionId);
|
||||
|
||||
// Remove player from state after a short delay to let clients process
|
||||
setTimeout(() => {
|
||||
this.state.players.delete(client.sessionId);
|
||||
}, 1000);
|
||||
|
||||
const remainingClients: number = this.clientNames.size;
|
||||
console.log(`[ArenaRoom] Left: ${client.sessionId} (consented=${consented}) — remaining: ${remainingClients}`);
|
||||
|
||||
// Start dispose timer if room is empty (use clientNames, not players, since players has delayed deletion)
|
||||
if (remainingClients === 0) {
|
||||
this.emptySince = Date.now();
|
||||
this.disposeTimer = setTimeout(() => {
|
||||
if (this.clientNames.size === 0) {
|
||||
console.log('[ArenaRoom] Disposing empty room');
|
||||
this.disconnect();
|
||||
}
|
||||
}, this.DISPOSE_AFTER_EMPTY_MS);
|
||||
}
|
||||
}
|
||||
|
||||
onDispose(): void {
|
||||
console.log('[ArenaRoom] Disposed');
|
||||
|
||||
// Clean up game loop
|
||||
if (this.gameLoopInterval !== undefined) {
|
||||
clearInterval(this.gameLoopInterval);
|
||||
this.gameLoopInterval = undefined;
|
||||
}
|
||||
|
||||
if (this.disposeTimer !== undefined) {
|
||||
clearTimeout(this.disposeTimer);
|
||||
this.disposeTimer = undefined;
|
||||
}
|
||||
|
||||
this.gameLoop.destroy();
|
||||
this.playerManager.reset();
|
||||
this.clientNames.clear();
|
||||
}
|
||||
|
||||
// ─── Message Handlers ──────────────────────────────────────────────────────
|
||||
|
||||
private handleInputMessage(client: Client, data: unknown): void {
|
||||
const player: Player | undefined = this.state.players.get(client.sessionId);
|
||||
if (player === undefined) return;
|
||||
if (!player.alive) return;
|
||||
|
||||
// Parse and validate input
|
||||
const input: PlayerInput | null = this.parseInput(data);
|
||||
if (input === null) return;
|
||||
|
||||
// Sanitize
|
||||
const sanitized: PlayerInput = this.inputValidator.sanitizeInput(input);
|
||||
|
||||
// Validate aim angle
|
||||
const aimResult = this.inputValidator.validateAimAngle(player.angle, sanitized.aimAngle);
|
||||
sanitized.aimAngle = aimResult.angle;
|
||||
|
||||
// Queue for game loop
|
||||
this.gameLoop.queueInput(client.sessionId, sanitized);
|
||||
}
|
||||
|
||||
private handleUpgradeMessage(client: Client, data: unknown): void {
|
||||
const player: Player | undefined = this.state.players.get(client.sessionId);
|
||||
if (player === undefined) return;
|
||||
if (player.upgradePoints <= 0) return;
|
||||
|
||||
let choice: number | undefined;
|
||||
|
||||
if (typeof data === 'number') {
|
||||
choice = data;
|
||||
} else if (
|
||||
typeof data === 'object' &&
|
||||
data !== null &&
|
||||
'choice' in data &&
|
||||
typeof (data as Record<string, unknown>).choice === 'number'
|
||||
) {
|
||||
choice = (data as Record<string, unknown>).choice as number;
|
||||
}
|
||||
|
||||
if (choice === undefined) return;
|
||||
|
||||
const success: boolean = this.playerManager.applyUpgrade(player, choice);
|
||||
if (success) {
|
||||
client.send('upgradeAck', { choice, pointsRemaining: player.upgradePoints });
|
||||
}
|
||||
}
|
||||
|
||||
private handleReloadMessage(client: Client): void {
|
||||
const player: Player | undefined = this.state.players.get(client.sessionId);
|
||||
if (player === undefined) return;
|
||||
if (!player.alive) return;
|
||||
|
||||
this.playerManager.startReload(player, client.sessionId);
|
||||
}
|
||||
|
||||
// ─── Input Parsing ─────────────────────────────────────────────────────────
|
||||
|
||||
private parseInput(data: unknown): PlayerInput | null {
|
||||
if (typeof data !== 'object' || data === null) return null;
|
||||
|
||||
const d = data as Record<string, unknown>;
|
||||
|
||||
const seq: number = typeof d.seq === 'number' ? d.seq : 0;
|
||||
const moveAngle: number = typeof d.moveAngle === 'number' ? d.moveAngle : -1;
|
||||
const aimAngle: number = typeof d.aimAngle === 'number' ? d.aimAngle : 0;
|
||||
const isShooting: boolean = Boolean(d.isShooting);
|
||||
const upgradeChoice: number | undefined =
|
||||
typeof d.upgradeChoice === 'number' ? d.upgradeChoice : undefined;
|
||||
|
||||
return { seq, moveAngle, aimAngle, isShooting, upgradeChoice };
|
||||
}
|
||||
|
||||
// ─── Obstacle Generation ───────────────────────────────────────────────────
|
||||
|
||||
private spawnObstacles(): void {
|
||||
// Spawn some indestructible walls around the arena
|
||||
const wallThickness: number = 50;
|
||||
|
||||
// Top wall segments
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.createObstacle(
|
||||
200 + i * 500,
|
||||
100,
|
||||
wallThickness * 4,
|
||||
wallThickness,
|
||||
0 // IndestructibleWall
|
||||
);
|
||||
}
|
||||
|
||||
// Bottom wall segments
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.createObstacle(
|
||||
200 + i * 500,
|
||||
ARENA_HEIGHT - 150,
|
||||
wallThickness * 4,
|
||||
wallThickness,
|
||||
0
|
||||
);
|
||||
}
|
||||
|
||||
// Left wall segments
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.createObstacle(
|
||||
100,
|
||||
200 + i * 500,
|
||||
wallThickness,
|
||||
wallThickness * 4,
|
||||
0
|
||||
);
|
||||
}
|
||||
|
||||
// Right wall segments
|
||||
for (let i = 0; i < 6; i++) {
|
||||
this.createObstacle(
|
||||
ARENA_WIDTH - 150,
|
||||
200 + i * 500,
|
||||
wallThickness,
|
||||
wallThickness * 4,
|
||||
0
|
||||
);
|
||||
}
|
||||
|
||||
// Central cover blocks
|
||||
this.createObstacle(ARENA_WIDTH / 2 - 100, ARENA_HEIGHT / 2 - 100, 200, 50, 3); // Cover
|
||||
this.createObstacle(ARENA_WIDTH / 2 - 50, ARENA_HEIGHT / 2 + 50, 100, 100, 3);
|
||||
|
||||
// Scattered crates
|
||||
const cratePositions: Array<[number, number]> = [
|
||||
[400, 400],
|
||||
[ARENA_WIDTH - 400, 400],
|
||||
[400, ARENA_HEIGHT - 400],
|
||||
[ARENA_WIDTH - 400, ARENA_HEIGHT - 400],
|
||||
[ARENA_WIDTH / 2, 300],
|
||||
[ARENA_WIDTH / 2, ARENA_HEIGHT - 300],
|
||||
[300, ARENA_HEIGHT / 2],
|
||||
[ARENA_WIDTH - 300, ARENA_HEIGHT / 2],
|
||||
];
|
||||
|
||||
for (const [x, y] of cratePositions) {
|
||||
this.createObstacle(x, y, 60, 60, 1); // DestructibleCrate
|
||||
}
|
||||
|
||||
// Slow zones
|
||||
this.createObstacle(ARENA_WIDTH / 4, ARENA_HEIGHT / 4, 200, 200, 2);
|
||||
this.createObstacle((ARENA_WIDTH * 3) / 4, (ARENA_HEIGHT * 3) / 4, 200, 200, 2);
|
||||
}
|
||||
|
||||
private createObstacle(
|
||||
x: number,
|
||||
y: number,
|
||||
width: number,
|
||||
height: number,
|
||||
type: number
|
||||
): void {
|
||||
const obs: Obstacle = new Obstacle();
|
||||
obs.x = x;
|
||||
obs.y = y;
|
||||
obs.width = width;
|
||||
obs.height = height;
|
||||
obs.type = type;
|
||||
const id: string = `obs_${this.state.obstacles.size}`;
|
||||
this.state.obstacles.set(id, obs);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,204 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Input Validator (Anti-cheat)
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import {
|
||||
type Player,
|
||||
type GunConfig,
|
||||
type PlayerInput,
|
||||
PLAYER_BASE_SPEED,
|
||||
PLAYER_ACCELERATION,
|
||||
ARENA_WIDTH,
|
||||
ARENA_HEIGHT,
|
||||
STAT_MAX_LEVEL,
|
||||
STAT_COUNT,
|
||||
Stat,
|
||||
AIM_ANGLE_TOLERANCE,
|
||||
MAX_LEVEL,
|
||||
} from '@guncircle/shared';
|
||||
|
||||
// ─── InputValidator ──────────────────────────────────────────────────────────
|
||||
|
||||
export class InputValidator {
|
||||
/** Maximum position change per tick at max speed */
|
||||
private readonly maxDistPerTick: number;
|
||||
|
||||
constructor() {
|
||||
// At 60Hz, max distance per tick = speed / 60 + small tolerance
|
||||
this.maxDistPerTick = PLAYER_BASE_SPEED / 60 + 2;
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate movement input. Speed must not exceed base * (1 + moveSpeedStat).
|
||||
* Returns clamped (newX, newY) that are within allowed bounds.
|
||||
*/
|
||||
validateMovement(
|
||||
player: Player,
|
||||
moveAngle: number,
|
||||
dt: number
|
||||
): { x: number; y: number; valid: boolean } {
|
||||
if (moveAngle < -0.5) {
|
||||
// -1 or negative means no movement input
|
||||
return { x: player.x, y: player.y, valid: true };
|
||||
}
|
||||
|
||||
const moveSpeedStat: number = player.stats[Stat.MovementSpeed] ?? 0;
|
||||
const maxSpeed: number = PLAYER_BASE_SPEED * (1 + moveSpeedStat * 0.05);
|
||||
const maxStep: number = maxSpeed * dt;
|
||||
|
||||
// Validate position delta from current position
|
||||
const requestedVx: number = Math.cos(moveAngle) * maxSpeed;
|
||||
const requestedVy: number = Math.sin(moveAngle) * maxSpeed;
|
||||
|
||||
const newX: number = player.x + requestedVx * dt;
|
||||
const newY: number = player.y + requestedVy * dt;
|
||||
|
||||
// Clamp to arena
|
||||
const clampedX: number = Math.max(
|
||||
player.radius,
|
||||
Math.min(ARENA_WIDTH - player.radius, newX)
|
||||
);
|
||||
const clampedY: number = Math.max(
|
||||
player.radius,
|
||||
Math.min(ARENA_HEIGHT - player.radius, newY)
|
||||
);
|
||||
|
||||
// Check if the step size is reasonable
|
||||
const dx: number = clampedX - player.x;
|
||||
const dy: number = clampedY - player.y;
|
||||
const stepSize: number = Math.sqrt(dx * dx + dy * dy);
|
||||
|
||||
if (stepSize > maxStep * 1.5) {
|
||||
// Possible speed hack — reject movement
|
||||
return { x: player.x, y: player.y, valid: false };
|
||||
}
|
||||
|
||||
return { x: clampedX, y: clampedY, valid: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate aim angle change. Change per tick must be within tolerance.
|
||||
*/
|
||||
validateAimAngle(oldAngle: number, newAngle: number): { angle: number; valid: boolean } {
|
||||
let diff: number = newAngle - oldAngle;
|
||||
// Normalize to [-PI, PI]
|
||||
while (diff > Math.PI) diff -= Math.PI * 2;
|
||||
while (diff < -Math.PI) diff += Math.PI * 2;
|
||||
|
||||
const absDiff: number = Math.abs(diff);
|
||||
if (absDiff > AIM_ANGLE_TOLERANCE * 10) {
|
||||
// Suspiciously large angle change — could be aimbot
|
||||
// Cap it to max allowed
|
||||
const cappedDiff: number = Math.sign(diff) * AIM_ANGLE_TOLERANCE * 10;
|
||||
let cappedAngle: number = oldAngle + cappedDiff;
|
||||
while (cappedAngle > Math.PI) cappedAngle -= Math.PI * 2;
|
||||
while (cappedAngle < -Math.PI) cappedAngle += Math.PI * 2;
|
||||
return { angle: cappedAngle, valid: false };
|
||||
}
|
||||
|
||||
return { angle: newAngle, valid: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate fire rate: time since last shot must be >= cooldown.
|
||||
* Returns true if firing is allowed.
|
||||
*/
|
||||
validateFireRate(
|
||||
lastShotTime: number,
|
||||
currentTime: number,
|
||||
gun: GunConfig,
|
||||
reloadSpdStat: number
|
||||
): boolean {
|
||||
const baseCooldown: number = 1000 / gun.fireRate;
|
||||
const reloadBonus: number = 1 + reloadSpdStat * 0.1;
|
||||
const adjustedCooldown: number = baseCooldown / reloadBonus;
|
||||
|
||||
const elapsed: number = currentTime - lastShotTime;
|
||||
return elapsed >= adjustedCooldown - 5; // 5ms tolerance for network jitter
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate stat upgrade choice. Returns true if the player can make this upgrade.
|
||||
*/
|
||||
validateUpgrade(player: Player, choice: number): { valid: boolean; reason: string } {
|
||||
// Must have upgrade points
|
||||
if (player.upgradePoints <= 0) {
|
||||
return { valid: false, reason: 'No upgrade points available' };
|
||||
}
|
||||
|
||||
// Choice must be a valid stat index
|
||||
if (choice < 0 || choice >= STAT_COUNT) {
|
||||
return { valid: false, reason: 'Invalid stat index' };
|
||||
}
|
||||
|
||||
// Stat must not be maxed
|
||||
const currentLevel: number = player.stats[choice] ?? 0;
|
||||
if (currentLevel >= STAT_MAX_LEVEL) {
|
||||
return { valid: false, reason: 'Stat already at max level' };
|
||||
}
|
||||
|
||||
return { valid: true, reason: '' };
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate branch selection choice. Returns true if branch is valid for player.
|
||||
*/
|
||||
validateBranchChoice(
|
||||
player: Player,
|
||||
branchIndex: number,
|
||||
availableBranches: number[]
|
||||
): { valid: boolean; reason: string } {
|
||||
if (branchIndex < 0 || branchIndex >= availableBranches.length) {
|
||||
return { valid: false, reason: 'Invalid branch selection' };
|
||||
}
|
||||
|
||||
if (player.upgradePoints <= 0) {
|
||||
return { valid: false, reason: 'No upgrade points available' };
|
||||
}
|
||||
|
||||
return { valid: true, reason: '' };
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate general input bounds. Clamp numeric values to reasonable ranges.
|
||||
*/
|
||||
sanitizeInput(input: PlayerInput): PlayerInput {
|
||||
return {
|
||||
seq: Math.max(0, input.seq | 0),
|
||||
moveAngle: isNaN(input.moveAngle) ? -1 : input.moveAngle,
|
||||
aimAngle: isNaN(input.aimAngle) ? 0 : input.aimAngle,
|
||||
isShooting: Boolean(input.isShooting),
|
||||
upgradeChoice:
|
||||
input.upgradeChoice !== undefined ? Math.max(0, input.upgradeChoice | 0) : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a position is within arena bounds.
|
||||
*/
|
||||
isInArena(x: number, y: number, radius: number = 0): boolean {
|
||||
return (
|
||||
x >= radius &&
|
||||
x <= ARENA_WIDTH - radius &&
|
||||
y >= radius &&
|
||||
y <= ARENA_HEIGHT - radius
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate that velocity is within reasonable bounds.
|
||||
*/
|
||||
validateVelocity(vx: number, vy: number, maxSpeed: number): { vx: number; vy: number } {
|
||||
const speedSq: number = vx * vx + vy * vy;
|
||||
const maxSpeedSq: number = maxSpeed * maxSpeed;
|
||||
|
||||
if (speedSq > maxSpeedSq * 4) {
|
||||
// Suspicious velocity — cap it
|
||||
const speed: number = Math.sqrt(speedSq);
|
||||
const scale: number = (maxSpeed * 2) / speed;
|
||||
return { vx: vx * scale, vy: vy * scale };
|
||||
}
|
||||
|
||||
return { vx, vy };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"composite": true
|
||||
},
|
||||
"include": ["./src"],
|
||||
"references": [{ "path": "../shared" }]
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "@guncircle/shared",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"dev": "tsc --watch",
|
||||
"type-check": "tsc --noEmit",
|
||||
"test": "vitest run"
|
||||
},
|
||||
"dependencies": {
|
||||
"@colyseus/schema": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.6.0",
|
||||
"vitest": "^2.0.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Game Constants
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
/** Server tick rate (Hz) */
|
||||
export const TICK_RATE = 60;
|
||||
|
||||
/** Duration of one tick in ms */
|
||||
export const TICK_MS = 1000 / TICK_RATE;
|
||||
|
||||
/** Arena dimensions */
|
||||
export const ARENA_WIDTH = 3000;
|
||||
export const ARENA_HEIGHT = 3000;
|
||||
|
||||
/** Max players per room */
|
||||
export const MAX_PLAYERS_PER_ROOM = 50;
|
||||
|
||||
/** Player base stats */
|
||||
export const PLAYER_BASE_RADIUS = 20;
|
||||
export const PLAYER_BASE_HP = 100;
|
||||
export const PLAYER_BASE_SPEED = 150; // units per second
|
||||
export const PLAYER_BASE_REGEN = 1; // HP per second
|
||||
|
||||
/** Movement physics */
|
||||
export const PLAYER_ACCELERATION = 800; // units per second^2
|
||||
export const PLAYER_FRICTION = 0.92; // velocity multiplier per tick
|
||||
export const PLAYER_MAX_SPEED_MULT = 1.0;
|
||||
|
||||
/** Gun rendering */
|
||||
export const GUN_BARREL_WIDTH = 8;
|
||||
export const GUN_BARREL_LENGTH = 22;
|
||||
export const GUN_BODY_SIZE = 10;
|
||||
export const GUN_RECOVERY_LERP = 0.15; // per tick
|
||||
|
||||
/** XP system */
|
||||
export const XP_LEVELS = [
|
||||
0, 50, 150, 300, 500, 750, 1050, 1400, 1800, 2250,
|
||||
2750, 3300, 3900, 4550, 5250, 6000, 7000, 8200, 9500, 11000,
|
||||
12700, 14500, 16500, 18700, 21100, 23700, 26500, 29500, 32700, 36100,
|
||||
40000, 45000, 51000, 58000, 66000, 75000, 85000, 96000, 108000, 121000,
|
||||
135000, 150000, 167000, 185000, 204000, 225000,
|
||||
];
|
||||
|
||||
export const MAX_LEVEL = XP_LEVELS.length; // 45
|
||||
|
||||
/** Death / respawn */
|
||||
export const DEATH_XP_DROP_PCT = 0.5;
|
||||
export const RESPAWN_DELAY_MS = 3000;
|
||||
export const XP_ORB_LIFETIME_S = 30;
|
||||
export const XP_ORB_DESPAWN_MS = XP_ORB_LIFETIME_S * 1000;
|
||||
|
||||
/** Class branch milestone levels */
|
||||
export const BRANCH_LEVELS = [5, 10, 15, 30, 45];
|
||||
|
||||
/** Stat upgrade system */
|
||||
export const STAT_MAX_LEVEL = 7;
|
||||
export const STAT_UPGRADE_COST_BASE = 1; // 1 point per upgrade
|
||||
|
||||
/** Stats enum — indexes into uint8 array */
|
||||
export enum Stat {
|
||||
MaxHp = 0,
|
||||
HpRegen = 1,
|
||||
MovementSpeed = 2,
|
||||
BulletDamage = 3,
|
||||
BulletSpeed = 4,
|
||||
ReloadSpeed = 5,
|
||||
RecoilStability = 6,
|
||||
CritChance = 7,
|
||||
CritDamage = 8,
|
||||
}
|
||||
|
||||
export const STAT_COUNT = 9;
|
||||
|
||||
/** Stat bonuses per level (additive) */
|
||||
export const STAT_BONUSES: Record<Stat, { perLevel: number; isPct: boolean }> = {
|
||||
[Stat.MaxHp]: { perLevel: 20, isPct: false },
|
||||
[Stat.HpRegen]: { perLevel: 1, isPct: false },
|
||||
[Stat.MovementSpeed]: { perLevel: 0.05, isPct: true },
|
||||
[Stat.BulletDamage]: { perLevel: 0.10, isPct: true },
|
||||
[Stat.BulletSpeed]: { perLevel: 0.08, isPct: true },
|
||||
[Stat.ReloadSpeed]: { perLevel: 0.10, isPct: true },
|
||||
[Stat.RecoilStability]: { perLevel: 0.10, isPct: true }, // -10% recoil per level
|
||||
[Stat.CritChance]: { perLevel: 0.03, isPct: true },
|
||||
[Stat.CritDamage]: { perLevel: 0.10, isPct: true },
|
||||
};
|
||||
|
||||
/** Base crit */
|
||||
export const BASE_CRIT_MULTIPLIER = 1.5; // 150%
|
||||
|
||||
/** XP rewards */
|
||||
export const XP_PER_DAMAGE = 1;
|
||||
export const XP_KILL_PCT = 0.5; // 50% of victim's held XP
|
||||
|
||||
/** Collision */
|
||||
export const SPATIAL_CELL_SIZE = 100;
|
||||
|
||||
/** Network */
|
||||
export const INPUT_RATE_HZ = 60;
|
||||
export const INPUT_MS = 1000 / INPUT_RATE_HZ;
|
||||
|
||||
/** Validation tolerances */
|
||||
export const POS_DRIFT_THRESHOLD = 5; // correct if drift > 5 units
|
||||
export const AIM_ANGLE_TOLERANCE = 0.1; // radians
|
||||
export const RECOIL_TOLERANCE = 0.15; // radians
|
||||
|
||||
/** Colors */
|
||||
export const COLORS = {
|
||||
self: '#3498db', // blue
|
||||
enemy: '#e74c3c', // red
|
||||
bullet: '#f1c40f', // yellow
|
||||
bulletCrit: '#e74c3c', // red outline for crit
|
||||
xpOrb: '#2ecc71', // green
|
||||
hpBar: '#2ecc71',
|
||||
hpBarBg: '#2c3e50',
|
||||
nameTag: '#ecf0f1',
|
||||
uiBg: 'rgba(0,0,0,0.6)',
|
||||
uiBorder: '#34495e',
|
||||
arenaBg: '#1a1a2e',
|
||||
arenaGrid: '#16213e',
|
||||
wall: '#7f8c8d',
|
||||
crate: '#8b4513',
|
||||
text: '#ecf0f1',
|
||||
} as const;
|
||||
|
||||
/** Gun categories (for class branch unlocking) */
|
||||
export enum GunCategory {
|
||||
Pistol = 0,
|
||||
Rifle = 1,
|
||||
Shotgun = 2,
|
||||
Sniper = 3,
|
||||
SMG = 4,
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Shared Package Exports
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
export * from './constants.js';
|
||||
export * from './types.js';
|
||||
export * from './math.js';
|
||||
export * from './schema.js';
|
||||
@@ -0,0 +1,222 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Math Utilities
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import type { Vec2 } from './types.js';
|
||||
|
||||
// ─── Vector Operations ───────────────────────────────────────────────────────
|
||||
|
||||
export const vec2 = {
|
||||
zero: (): Vec2 => ({ x: 0, y: 0 }),
|
||||
|
||||
fromAngle: (angle: number, magnitude: number = 1): Vec2 => ({
|
||||
x: Math.cos(angle) * magnitude,
|
||||
y: Math.sin(angle) * magnitude,
|
||||
}),
|
||||
|
||||
add: (a: Vec2, b: Vec2): Vec2 => ({ x: a.x + b.x, y: a.y + b.y }),
|
||||
sub: (a: Vec2, b: Vec2): Vec2 => ({ x: a.x - b.x, y: a.y - b.y }),
|
||||
mul: (v: Vec2, s: number): Vec2 => ({ x: v.x * s, y: v.y * s }),
|
||||
div: (v: Vec2, s: number): Vec2 => ({ x: v.x / s, y: v.y / s }),
|
||||
|
||||
len: (v: Vec2): number => Math.sqrt(v.x * v.x + v.y * v.y),
|
||||
lenSq: (v: Vec2): number => v.x * v.x + v.y * v.y,
|
||||
|
||||
normalize: (v: Vec2): Vec2 => {
|
||||
const l = Math.sqrt(v.x * v.x + v.y * v.y);
|
||||
return l === 0 ? { x: 0, y: 0 } : { x: v.x / l, y: v.y / l };
|
||||
},
|
||||
|
||||
dot: (a: Vec2, b: Vec2): number => a.x * b.x + a.y * b.y,
|
||||
|
||||
dist: (a: Vec2, b: Vec2): number => {
|
||||
const dx = a.x - b.x;
|
||||
const dy = a.y - b.y;
|
||||
return Math.sqrt(dx * dx + dy * dy);
|
||||
},
|
||||
|
||||
distSq: (a: Vec2, b: Vec2): number => {
|
||||
const dx = a.x - b.x;
|
||||
const dy = a.y - b.y;
|
||||
return dx * dx + dy * dy;
|
||||
},
|
||||
|
||||
clamp: (v: Vec2, maxLen: number): Vec2 => {
|
||||
const l = Math.sqrt(v.x * v.x + v.y * v.y);
|
||||
if (l <= maxLen) return v;
|
||||
const scale = maxLen / l;
|
||||
return { x: v.x * scale, y: v.y * scale };
|
||||
},
|
||||
|
||||
angle: (v: Vec2): number => Math.atan2(v.y, v.x),
|
||||
angleBetween: (a: Vec2, b: Vec2): number => Math.atan2(b.y - a.y, b.x - a.x),
|
||||
|
||||
lerp: (a: Vec2, b: Vec2, t: number): Vec2 => ({
|
||||
x: a.x + (b.x - a.x) * t,
|
||||
y: a.y + (b.y - a.y) * t,
|
||||
}),
|
||||
|
||||
copy: (v: Vec2): Vec2 => ({ x: v.x, y: v.y }),
|
||||
|
||||
equals: (a: Vec2, b: Vec2, eps: number = 0.001): boolean =>
|
||||
Math.abs(a.x - b.x) < eps && Math.abs(a.y - b.y) < eps,
|
||||
};
|
||||
|
||||
// ─── Scalar Utilities ────────────────────────────────────────────────────────
|
||||
|
||||
export const lerp = (a: number, b: number, t: number): number =>
|
||||
a + (b - a) * t;
|
||||
|
||||
export const lerpAngle = (a: number, b: number, t: number): number => {
|
||||
let diff = b - a;
|
||||
while (diff > Math.PI) diff -= Math.PI * 2;
|
||||
while (diff < -Math.PI) diff += Math.PI * 2;
|
||||
return a + diff * t;
|
||||
};
|
||||
|
||||
export const clamp = (v: number, min: number, max: number): number =>
|
||||
Math.max(min, Math.min(max, v));
|
||||
|
||||
export const clamp01 = (v: number): number => clamp(v, 0, 1);
|
||||
|
||||
export const remap = (
|
||||
v: number,
|
||||
inMin: number,
|
||||
inMax: number,
|
||||
outMin: number,
|
||||
outMax: number
|
||||
): number => outMin + ((v - inMin) / (inMax - inMin)) * (outMax - outMin);
|
||||
|
||||
/** Return random float in [min, max) */
|
||||
export const randFloat = (min: number, max: number): number =>
|
||||
min + Math.random() * (max - min);
|
||||
|
||||
/** Return random int in [min, max) */
|
||||
export const randInt = (min: number, max: number): number =>
|
||||
Math.floor(randFloat(min, max));
|
||||
|
||||
/** Return 1 or -1 randomly */
|
||||
export const randSign = (): number => (Math.random() < 0.5 ? 1 : -1);
|
||||
|
||||
/** Check if circle a overlaps circle b */
|
||||
export const circleOverlap = (
|
||||
ax: number, ay: number, ar: number,
|
||||
bx: number, by: number, br: number
|
||||
): boolean => {
|
||||
const dx = ax - bx;
|
||||
const dy = ay - by;
|
||||
const r = ar + br;
|
||||
return dx * dx + dy * dy < r * r;
|
||||
};
|
||||
|
||||
/** Solve circle-circle collision: push a out of b. Returns correction vector for a. */
|
||||
export const circleCollisionResolve = (
|
||||
ax: number, ay: number, ar: number,
|
||||
bx: number, by: number, br: number
|
||||
): Vec2 | null => {
|
||||
const dx = ax - bx;
|
||||
const dy = ay - by;
|
||||
const distSq = dx * dx + dy * dy;
|
||||
const r = ar + br;
|
||||
if (distSq >= r * r || distSq === 0) return null;
|
||||
const dist = Math.sqrt(distSq);
|
||||
const overlap = r - dist;
|
||||
return {
|
||||
x: (dx / dist) * overlap,
|
||||
y: (dy / dist) * overlap,
|
||||
};
|
||||
};
|
||||
|
||||
// ─── Spatial Hash Grid ───────────────────────────────────────────────────────
|
||||
|
||||
export class SpatialHashGrid<T extends { x: number; y: number; id: number }> {
|
||||
private cells = new Map<string, T[]>();
|
||||
private itemToCell = new Map<number, string>();
|
||||
|
||||
constructor(private cellSize: number) {}
|
||||
|
||||
private hash(cx: number, cy: number): string {
|
||||
return `${cx},${cy}`;
|
||||
}
|
||||
|
||||
insert(item: T): void {
|
||||
const cx = Math.floor(item.x / this.cellSize);
|
||||
const cy = Math.floor(item.y / this.cellSize);
|
||||
const key = this.hash(cx, cy);
|
||||
|
||||
let cell = this.cells.get(key);
|
||||
if (!cell) {
|
||||
cell = [];
|
||||
this.cells.set(key, cell);
|
||||
}
|
||||
cell.push(item);
|
||||
this.itemToCell.set(item.id, key);
|
||||
}
|
||||
|
||||
remove(item: T): void {
|
||||
const key = this.itemToCell.get(item.id);
|
||||
if (!key) return;
|
||||
const cell = this.cells.get(key);
|
||||
if (!cell) return;
|
||||
const idx = cell.findIndex((i) => i.id === item.id);
|
||||
if (idx >= 0) cell.splice(idx, 1);
|
||||
this.itemToCell.delete(item.id);
|
||||
}
|
||||
|
||||
update(item: T): void {
|
||||
this.remove(item);
|
||||
this.insert(item);
|
||||
}
|
||||
|
||||
query(x: number, y: number, radius: number): T[] {
|
||||
const results: T[] = [];
|
||||
const minCx = Math.floor((x - radius) / this.cellSize);
|
||||
const maxCx = Math.floor((x + radius) / this.cellSize);
|
||||
const minCy = Math.floor((y - radius) / this.cellSize);
|
||||
const maxCy = Math.floor((y + radius) / this.cellSize);
|
||||
const rSq = radius * radius;
|
||||
|
||||
for (let cx = minCx; cx <= maxCx; cx++) {
|
||||
for (let cy = minCy; cy <= maxCy; cy++) {
|
||||
const key = this.hash(cx, cy);
|
||||
const cell = this.cells.get(key);
|
||||
if (!cell) continue;
|
||||
for (const item of cell) {
|
||||
const dx = item.x - x;
|
||||
const dy = item.y - y;
|
||||
if (dx * dx + dy * dy <= rSq) {
|
||||
results.push(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
queryRect(x: number, y: number, w: number, h: number): T[] {
|
||||
const results: T[] = [];
|
||||
const minCx = Math.floor(x / this.cellSize);
|
||||
const maxCx = Math.floor((x + w) / this.cellSize);
|
||||
const minCy = Math.floor(y / this.cellSize);
|
||||
const maxCy = Math.floor((y + h) / this.cellSize);
|
||||
|
||||
for (let cx = minCx; cx <= maxCx; cx++) {
|
||||
for (let cy = minCy; cy <= maxCy; cy++) {
|
||||
const key = this.hash(cx, cy);
|
||||
const cell = this.cells.get(key);
|
||||
if (!cell) continue;
|
||||
for (const item of cell) {
|
||||
if (item.x >= x && item.x <= x + w && item.y >= y && item.y <= y + h) {
|
||||
results.push(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
clear(): void {
|
||||
this.cells.clear();
|
||||
this.itemToCell.clear();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Colyseus Schema Definitions
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import { Schema, type, MapSchema, ArraySchema } from '@colyseus/schema';
|
||||
|
||||
// ─── Player State ────────────────────────────────────────────────────────────
|
||||
|
||||
export class Player extends Schema {
|
||||
@type('float32') x = 0;
|
||||
@type('float32') y = 0;
|
||||
/** Current aim angle in radians */
|
||||
@type('float32') angle = 0;
|
||||
/** Current HP */
|
||||
@type('float32') hp = 100;
|
||||
@type('float32') maxHp = 100;
|
||||
/** 1-45 */
|
||||
@type('uint8') level = 1;
|
||||
@type('uint16') xp = 0;
|
||||
@type('uint16') xpToNext = 50;
|
||||
/** Index into gun configs */
|
||||
@type('uint8') gunType = 0;
|
||||
/** Index into class branches */
|
||||
@type('uint8') classType = 0;
|
||||
/** Number of kills */
|
||||
@type('uint8') score = 0;
|
||||
/** Player name, max 16 chars */
|
||||
@type('string') name = 'Player';
|
||||
/** Cosmetic skin index */
|
||||
@type('uint8') skinId = 0;
|
||||
/** Current recoil offset in radians */
|
||||
@type('float32') recoilOffset = 0;
|
||||
/** Current ammo */
|
||||
@type('uint8') ammo = 0;
|
||||
/** Max ammo */
|
||||
@type('uint8') maxAmmo = 0;
|
||||
/** Is reloading */
|
||||
@type('boolean') isReloading = false;
|
||||
/** Alive */
|
||||
@type('boolean') alive = true;
|
||||
/** Radius */
|
||||
@type('float32') radius = 20;
|
||||
/** Upgrade points available */
|
||||
@type('uint8') upgradePoints = 0;
|
||||
/** Stat levels: [maxHp, hpRegen, moveSpeed, bulletDmg, bulletSpd, reloadSpd, recoilStab, critChance, critDmg] */
|
||||
@type(['uint8']) stats = new ArraySchema<number>(0, 0, 0, 0, 0, 0, 0, 0, 0);
|
||||
/** Velocity x (for smoother client reconciliation) */
|
||||
@type('float32') vx = 0;
|
||||
/** Velocity y */
|
||||
@type('float32') vy = 0;
|
||||
}
|
||||
|
||||
// ─── Bullet State ────────────────────────────────────────────────────────────
|
||||
|
||||
export class Bullet extends Schema {
|
||||
@type('float32') x = 0;
|
||||
@type('float32') y = 0;
|
||||
/** Travel angle in radians */
|
||||
@type('float32') angle = 0;
|
||||
/** Owner session ID */
|
||||
@type('string') ownerId = '';
|
||||
/** Damage */
|
||||
@type('float32') damage = 10;
|
||||
/** Penetration remaining */
|
||||
@type('uint8') penetration = 1;
|
||||
/** Bullet type index */
|
||||
@type('uint8') bulletType = 0;
|
||||
/** Is critical hit */
|
||||
@type('boolean') isCritical = false;
|
||||
/** Velocity x */
|
||||
@type('float32') vx = 0;
|
||||
/** Velocity y */
|
||||
@type('float32') vy = 0;
|
||||
/** Bullet radius/size */
|
||||
@type('float32') size = 4;
|
||||
/** Bullet color */
|
||||
@type('string') color = '#f1c40f';
|
||||
}
|
||||
|
||||
// ─── XP Orb State ────────────────────────────────────────────────────────────
|
||||
|
||||
export class XPOrb extends Schema {
|
||||
@type('float32') x = 0;
|
||||
@type('float32') y = 0;
|
||||
/** XP value */
|
||||
@type('uint16') value = 10;
|
||||
/** Seconds remaining */
|
||||
@type('uint8') lifetime = 30;
|
||||
}
|
||||
|
||||
// ─── Arena Obstacle State ────────────────────────────────────────────────────
|
||||
|
||||
export class Obstacle extends Schema {
|
||||
@type('float32') x = 0;
|
||||
@type('float32') y = 0;
|
||||
@type('float32') width = 50;
|
||||
@type('float32') height = 50;
|
||||
@type('uint8') type = 0;
|
||||
}
|
||||
|
||||
// ─── Leaderboard Entry ───────────────────────────────────────────────────────
|
||||
|
||||
export class LeaderboardEntry extends Schema {
|
||||
@type('string') name = '';
|
||||
@type('uint8') level = 1;
|
||||
@type('uint8') score = 0;
|
||||
@type('uint16') xp = 0;
|
||||
}
|
||||
|
||||
// ─── Room State ──────────────────────────────────────────────────────────────
|
||||
|
||||
export class RoomState extends Schema {
|
||||
@type({ map: Player }) players = new MapSchema<Player>();
|
||||
@type({ map: Bullet }) bullets = new MapSchema<Bullet>();
|
||||
@type({ map: XPOrb }) xpOrbs = new MapSchema<XPOrb>();
|
||||
@type({ map: Obstacle }) obstacles = new MapSchema<Obstacle>();
|
||||
@type('uint32') tick = 0;
|
||||
@type([LeaderboardEntry]) leaderboard = new ArraySchema<LeaderboardEntry>();
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
// GunCircle.io — Shared Type Definitions
|
||||
// ═══════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
import type { Stat, GunCategory } from './constants.js';
|
||||
|
||||
// ─── Vector ──────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface Vec2 {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
// ─── Gun Configuration ───────────────────────────────────────────────────────
|
||||
|
||||
export interface GunConfig {
|
||||
/** Unique identifier */
|
||||
id: string;
|
||||
/** Display name */
|
||||
name: string;
|
||||
/** Gun category for class branch unlocking */
|
||||
category: GunCategory;
|
||||
/** Damage per bullet */
|
||||
damage: number;
|
||||
/** Shots per second */
|
||||
fireRate: number;
|
||||
/** Bullet speed (units/sec) */
|
||||
bulletSpeed: number;
|
||||
/** Number of bullets per shot (1 = single, >1 = shotgun) */
|
||||
pelletCount: number;
|
||||
/** Spread angle in radians (0 = no spread) */
|
||||
spread: number;
|
||||
/** Gun recoil rotation offset in radians (random left/right) */
|
||||
recoilOffset: number;
|
||||
/** Time to recover from recoil (ms) */
|
||||
recoilRecoveryMs: number;
|
||||
/** Backward impulse on player per shot */
|
||||
kickbackForce: number;
|
||||
/** Max ammo before reload */
|
||||
ammoMax: number;
|
||||
/** Reload time in ms */
|
||||
reloadTimeMs: number;
|
||||
/** Bullet radius */
|
||||
bulletSize: number;
|
||||
/** How many entities bullet can pass through */
|
||||
penetration: number;
|
||||
/** Bullet lifetime in ms */
|
||||
bulletLifetimeMs: number;
|
||||
/** Color for bullets */
|
||||
bulletColor: string;
|
||||
}
|
||||
|
||||
// ─── Class Branch ────────────────────────────────────────────────────────────
|
||||
|
||||
export interface ClassBranch {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
/** Level required to choose this branch */
|
||||
levelRequired: number;
|
||||
/** Parent branch ID (null for root) */
|
||||
parentId: string | null;
|
||||
/** Gun categories unlocked by this branch */
|
||||
unlocksCategories: GunCategory[];
|
||||
/** Passive stat bonuses (additive) */
|
||||
passiveBonuses: Partial<Record<Stat, number>>;
|
||||
}
|
||||
|
||||
// ─── Input ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface PlayerInput {
|
||||
/** Client frame counter */
|
||||
seq: number;
|
||||
/** Movement angle in radians, -1 if no movement */
|
||||
moveAngle: number;
|
||||
/** Aim angle in radians */
|
||||
aimAngle: number;
|
||||
/** True if mouse down / shooting */
|
||||
isShooting: boolean;
|
||||
/** Stat index or branch choice when leveling up */
|
||||
upgradeChoice?: number;
|
||||
}
|
||||
|
||||
// ─── Arena Obstacle ──────────────────────────────────────────────────────────
|
||||
|
||||
export interface ArenaObstacle {
|
||||
id: number;
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
type: ObstacleType;
|
||||
}
|
||||
|
||||
export enum ObstacleType {
|
||||
IndestructibleWall = 0,
|
||||
DestructibleCrate = 1,
|
||||
SlowZone = 2,
|
||||
Cover = 3,
|
||||
}
|
||||
|
||||
// ─── Skin ────────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface Skin {
|
||||
id: number;
|
||||
name: string;
|
||||
type: SkinType;
|
||||
/** Color/Pattern value */
|
||||
value: string;
|
||||
/** Price in coins (0 = free/achievement) */
|
||||
price: number;
|
||||
/** Achievement requirement (null = purchasable) */
|
||||
achievement?: string;
|
||||
}
|
||||
|
||||
export enum SkinType {
|
||||
CircleColor = 0,
|
||||
GunSkin = 1,
|
||||
NameTagStyle = 2,
|
||||
}
|
||||
|
||||
// ─── XP Orb ──────────────────────────────────────────────────────────────────
|
||||
|
||||
export interface XpOrbData {
|
||||
id: number;
|
||||
x: number;
|
||||
y: number;
|
||||
value: number;
|
||||
lifetime: number; // seconds remaining
|
||||
}
|
||||
|
||||
// ─── Leaderboard Entry ───────────────────────────────────────────────────────
|
||||
|
||||
export interface LeaderboardEntry {
|
||||
name: string;
|
||||
level: number;
|
||||
score: number; // kills
|
||||
xp: number;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"composite": true
|
||||
},
|
||||
"include": ["./src"]
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
packages:
|
||||
- packages/shared
|
||||
- packages/server
|
||||
- packages/client
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"sourceMap": true,
|
||||
"composite": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@guncircle/shared": ["./packages/shared/src"]
|
||||
}
|
||||
},
|
||||
"include": ["packages/*/src"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
Reference in New Issue
Block a user