mirror of https://github.com/tiennm99/rplace.git synced 2026-09-13 18:19:28 +00:00

Files

T

tiennm99andGitHub cfbac2a586 feat(canvas): 4096^2 canvas, 256-color palette (u8 byte-aligned), custom picker (#5 )

Canvas:
- CANVAS_W/H = 4096, total 16,777,216 pixels
- BITS_PER_PIXEL = 8 (byte-aligned) — raw Redis bytes are palette indices
- Canvas-decoder becomes an identity wrap/copy
- Storage BITFIELD uses u8; offset = y*W + x
- Redis key versioned to rplace:canvas:v2 so old 32-color/2048^2 data is
  orphaned (operators can DEL the old key to reclaim memory)

Palette:
- 256 entries, generated deterministically:
  - 0..15  = 16-step grayscale ramp (pure black -> pure white)
  - 16..255 = 240 HSL wheel (4 lightness rings x 60 hues @ 82% saturation)
- nearestPaletteIndex(r,g,b) helper for custom-color snapping

UI:
- ColorPicker: 16-swatch favorites strip (grays + 8 accents) + current-color
  swatch + expand toggle for the full 16x16 grid + "Custom..." button that
  opens the native <input type="color"> and snaps to nearest palette entry
- Default selected color bumped to index 0 (black)

Tests + docs:
- canvas-decoder tests rewritten for identity u8 decode
- canvas-storage tests updated for u8 offsets
- image-to-palette tests anchored to PALETTE_BLACK=0 / PALETTE_WHITE=15 and
  COLORS_RGBA[i] probes (no more hardcoded old 32-color indices)
- integration test uses u8 BITFIELD and canvas-aware bounds
- README, system-architecture, deployment-guide updated (storage math,
  migration note for orphaned old key)

2026-04-18 13:47:01 +07:00

2.4 KiB

Raw Blame History

Deployment Guide

Prerequisites

Node.js 18+
Cloudflare account (free tier)
Upstash Redis database (free tier)
wrangler CLI (installed as dev dependency)

Step 1: Create Upstash Redis Database

Go to console.upstash.com
Create a new Redis database
Choose a region close to your users
Copy the REST URL and REST Token

Step 2: Configure Secrets

# Set secrets in Cloudflare (not in code)
npx wrangler secret put UPSTASH_REDIS_REST_URL
npx wrangler secret put UPSTASH_REDIS_REST_TOKEN

For local development, create .dev.vars:

UPSTASH_REDIS_REST_URL=https://your-url.upstash.io
UPSTASH_REDIS_REST_TOKEN=your-token

Step 3: Deploy

npm run deploy

This runs vite build (compiles Svelte → dist/) then wrangler deploy (uploads Worker + static assets).

Step 4: Verify

Visit your Worker URL (e.g., https://rplace.your-subdomain.workers.dev)
Canvas should load (empty/dark on first visit)
Select a color, click to place a pixel
Open a second browser tab — pixel should appear via WebSocket

Custom Domain

# Add a custom domain via Cloudflare dashboard or:
npx wrangler domains add rplace.yourdomain.com

Monitoring

Cloudflare dashboard: Worker analytics, request logs, DO metrics
Upstash console: Redis command count, memory usage, latency

Cost Estimates (Free Tier)

Resource	Free Limit	rplace Usage
CF Workers	100K requests/day	Canvas reads + pixel placements
CF Durable Objects	Free with Workers	WebSocket connections
Upstash Redis	10K commands/day	BITFIELD reads/writes + cooldown SET NX EX

For hobby traffic (< few hundred users/day), free tiers are sufficient. Upstash pay-as-you-go ($0.2/100K commands) is the first thing to hit limits.

Troubleshooting

Canvas loads empty: Check Upstash credentials in secrets
Pixels don't persist: Verify BITFIELD support — test with redis-cli BITFIELD rplace:canvas:v2 SET u8 #0 42
Old 32-color canvas still visible after deploy: the canvas key is versioned (rplace:canvas:v2). The old rplace:canvas key is orphaned — run redis-cli DEL rplace:canvas once to reclaim memory.
WebSocket not connecting: Ensure Durable Object migration ran (check wrangler.json migrations)
Rate limiting not working: Verify SET key value NX EX 1 returns "OK" / null as expected on your Upstash tier

2.4 KiB Raw Blame History