LifeTown Online — browser multiplayer life-sim MVP
- Server-authoritative Node/WS server: sessions, zones (town + instanced homes + public venue interiors), NPC routines, economy, relationships, persistence - TypeScript + Three.js client: character creator, Maple Court district, enterable venues (café, city hall, gym, store, arcade), build mode with 58-item furniture catalog, needs/mood systems, phone UI, day/night + weather, procedural audio - Verified by two-client e2e protocol suite and headless-browser walkthrough
This commit is contained in:
deepseek
@@ -0,0 +1,5 @@
|
||||
node_modules/
|
||||
dist/
|
||||
saves/
|
||||
*.log
|
||||
.DS_Store
|
||||
@@ -0,0 +1,123 @@
|
||||
# LifeTown Online 🏙️
|
||||
|
||||
An **original browser-based multiplayer life simulation** — create a character, move into
|
||||
Maple Court, get a job, furnish your home, befriend the townsfolk and other players, and
|
||||
live an ongoing simulated life. No installation, no plugins: it runs in a modern desktop
|
||||
or mobile browser.
|
||||
|
||||
> All characters, world design, UI, code, audio and visuals are original to this project.
|
||||
> No copyrighted assets, names, logos or UI from any existing game are used.
|
||||
|
||||
---
|
||||
|
||||
## Quick start
|
||||
|
||||
```bash
|
||||
npm install # three, ws, vite
|
||||
npm run build # bundles the client into client/dist
|
||||
npm start # serves game + WebSocket on http://127.0.0.1:7788
|
||||
```
|
||||
|
||||
Open **http://127.0.0.1:7788** in two browser windows to play multiplayer.
|
||||
|
||||
Environment overrides: `GAME_PORT` (default `7788`). Player saves are JSON files in `saves/`.
|
||||
|
||||
## Controls
|
||||
|
||||
| Action | Desktop | Mobile |
|
||||
|---|---|---|
|
||||
| Move | WASD / arrows | virtual joystick (bottom-left) |
|
||||
| Run | hold Shift | joystick edge / 🏃 button |
|
||||
| Interact | E or 👋 Act | ✋ button |
|
||||
| Dance emote | F or 💃 | — |
|
||||
| Orbit camera | left-drag | drag on scene |
|
||||
| Zoom | wheel | pinch area |
|
||||
| Chat focus | Enter | tap chat box |
|
||||
|
||||
Walk up to glowing POI rings (café, gym, pond, stage…) or furniture at home and press **E**.
|
||||
|
||||
## What's in the MVP
|
||||
|
||||
- **Character creator** — live 3D preview; body type, height, skin tones, hair styles &
|
||||
colours, eyes, brows, nose, mouth, outfits, shoes, accessories, voice, age and up to 3
|
||||
personality traits.
|
||||
- **One living district — Maple Court** — main street with café, City Hall, gym, home-goods
|
||||
store and arcade. **Every venue is enterable**: walk to a street-facing door and press E to
|
||||
step into a shared furnished interior with activity spots (order coffee, hit the gym mats,
|
||||
browse the shop catalogue, play the arcade); apartment doors lead straight into your home.
|
||||
store, apartments, arcade façade, central plaza with fountain & stage, park with pond,
|
||||
food truck, bus stop, benches, lamps and trees.
|
||||
- **Needs & mood** — hunger, energy, hygiene, fun, social, comfort decay over time;
|
||||
weighted mood engine with 13 moods + transient moodlets drive facial expressions and HUD.
|
||||
- **NPCs with routines** — 10 original townsfolk walk POI-to-POI on daily schedules,
|
||||
chatter ambiently and react to your interactions.
|
||||
- **Jobs & economy** — 12 careers × 5 ranks with pay, XP and promotions; shifts worked at
|
||||
real workplaces; TownCoins earned/spent across shops, homes, food and gifts.
|
||||
- **Housing & build mode** — studio apartment instanced per player (5 more tiers purchasable),
|
||||
drag-to-place furniture on a snap grid with rotate/duplicate/sell tools, 58-item catalogue
|
||||
whose items boost needs recovery, cooking speed and productivity.
|
||||
- **Friendship & romance** — contextual interaction wheels (Friendly/Romantic/Funny/Negative)
|
||||
gated by two independent relationship meters with tier labels and partner status.
|
||||
- **Multiplayer** — server-authoritative sessions/rosters/economy/relationships over one
|
||||
WebSocket; 12 Hz snapshots with client-side interpolation; zone instances for town and
|
||||
every home; invitations to visit; global + local chat with speech bubbles.
|
||||
- **Day/night & weather** — full day cycle (24 min/day) with dawn/dusk skies, sun/moon
|
||||
lighting, window glow and street lamps; sunny/cloudy/rain/storm/fog with rain particles,
|
||||
puddles that soak in, fog banks and lightning flashes.
|
||||
- **Mini-games** — fishing (timing bar) and cooking (memory) feeding back into needs & fun.
|
||||
- **Phone** — Messages, Contacts (relationship bars), Map, Careers, Bank (transaction log),
|
||||
LifeFeed social posts with in-game screenshots, Calendar of recurring town events, Home
|
||||
(teleport, property market, invites).
|
||||
- **Progression** — player levels gate catalog/homes; 8 achievements incl. First Home,
|
||||
Social Butterfly, Millionaire, Interior Designer.
|
||||
- **Save/load** — profiles autosave server-side (money, job, house, layout, inventory,
|
||||
relationships, achievements, needs); clients resume via token.
|
||||
- **Audio** — fully procedural WebAudio: location-based music (home/town/night), rain beds,
|
||||
footsteps, door/cash/UI blips, achievement jingles.
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
lifetown/
|
||||
├─ shared/data.mjs # single source of truth: jobs, catalog, NPCs, interactions…
|
||||
├─ server/
|
||||
│ ├─ index.mjs # Node http static server + ws upgrade (/ws)
|
||||
│ ├─ game.mjs # GameServer: sessions, zones, snapshots, NPCs, clock/weather,
|
||||
│ │ # economy, relationships, achievements, persistence
|
||||
│ └─ persist.mjs # atomic JSON profile storage
|
||||
├─ client/
|
||||
│ ├─ index.html # shell: title, creator, HUD, phone, build bar, modals
|
||||
│ └─ src/
|
||||
│ ├─ gfx/engine.ts # renderer, ACES tone-mapping, day/night lighting rig
|
||||
│ ├─ gfx/avatar.ts # modular stylized characters + procedural animation set
|
||||
│ ├─ gfx/town.ts # procedural district geometry
|
||||
│ ├─ gfx/interior.ts # instanced home shells + grid scaffolding
|
||||
│ ├─ gfx/furniture.ts # 58 procedural furniture builders
|
||||
│ ├─ gfx/weatherfx.ts # rain particles, puddles, lightning hooks
|
||||
│ ├─ controller.ts # input, collision, camera rig, network transform sync
|
||||
│ ├─ world.ts # actor manager, interpolation, bubbles/name-tags
|
||||
│ ├─ systems.ts # needs simulation + mood derivation
|
||||
│ ├─ audio.ts # WebAudio sequencer & SFX synth
|
||||
│ └─ ui/* # HUD, chat, phone apps, dialogs/minigames, build UI, creator
|
||||
└─ scripts/
|
||||
├─ e2e.mjs # 20-check two-client protocol test
|
||||
└─ shot.mjs # headless-browser walkthrough of every screen
|
||||
```
|
||||
|
||||
**Performance notes:** static geometry is modest-draw-call by construction, shadows come
|
||||
from a single tight sun cascade, remote players interpolate between 12 Hz snapshots, and
|
||||
interiors are separate zone scenes so only one district is ever loaded.
|
||||
|
||||
## Verification
|
||||
|
||||
```bash
|
||||
node scripts/e2e.mjs # exercises auth, movement sync, chat, social gates, jobs,
|
||||
# cooldowns, shopping, housing, zones, invites, persistence
|
||||
node scripts/shot.mjs # drives the real client headless through all major screens
|
||||
```
|
||||
|
||||
## Roadmap beyond MVP
|
||||
|
||||
Beach zone & swimming, nightclub with DJ events, vehicles (bicycle → sports car),
|
||||
weddings & festivals, group activities, Postgres/Redis backing stores, WebRTC voice,
|
||||
seasonal events, pets, and expanded careers with skill mini-courses at the university.
|
||||
@@ -0,0 +1,197 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#141826" />
|
||||
<title>LifeTown Online</title>
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='%23ff7e5f'/%3E%3Cpath d='M28 62V44l22-18 22 18v18a4 4 0 0 1-4 4H32a4 4 0 0 1-4-4z' fill='%23fff'/%3E%3C/svg%3E" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<canvas id="gl"></canvas>
|
||||
|
||||
<!-- ===== Title / login screen ===== -->
|
||||
<div id="screen-title" class="screen">
|
||||
<div class="title-sky"></div>
|
||||
<div class="title-card glass">
|
||||
<div class="wordmark">Life<span>Town</span></div>
|
||||
<div class="tagline">your town · your people · your story</div>
|
||||
<div class="field-row">
|
||||
<input id="inp-name" maxlength="20" placeholder="Choose your name…" autocomplete="off" spellcheck="false"/>
|
||||
</div>
|
||||
<button id="btn-play" class="btn btn-primary btn-big">Enter LifeTown</button>
|
||||
<button id="btn-newchar" class="btn btn-ghost">Create New Character</button>
|
||||
<div class="hint" id="title-hint"></div>
|
||||
</div>
|
||||
<div class="title-foot">An original multiplayer life simulation · v0.1 MVP</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== Character creator ===== -->
|
||||
<div id="screen-creator" class="screen hidden">
|
||||
<div class="creator-layout">
|
||||
<div id="creator-preview"></div>
|
||||
<div class="creator-panel glass">
|
||||
<div class="wordmark small">Design your resident</div>
|
||||
<div class="creator-scroll">
|
||||
<section>
|
||||
<label>Name</label>
|
||||
<input id="cr-name" maxlength="20" placeholder="Your name" autocomplete="off"/>
|
||||
<label>Age · <span id="cr-age-val">25</span></label>
|
||||
<input type="range" id="cr-age" min="18" max="70" value="25"/>
|
||||
</section>
|
||||
<section>
|
||||
<label>Body</label>
|
||||
<div class="chips" data-cr="bodyType"></div>
|
||||
<label>Height</label>
|
||||
<input type="range" id="cr-height" min="85" max="112" value="97"/>
|
||||
</section>
|
||||
<section><label>Skin tone</label><div class="swatches" data-cr="skin"></div></section>
|
||||
<section>
|
||||
<label>Hair style</label><div class="chips" data-cr="hair"></div>
|
||||
<label>Hair colour</label><div class="swatches" data-cr="hairColor"></div>
|
||||
</section>
|
||||
<section><label>Eyes</label><div class="chips" data-cr="eyes"></div>
|
||||
<label>Eye colour</label><div class="swatches" data-cr="eyeColor"></div></section>
|
||||
<section>
|
||||
<label>Brows</label><div class="chips" data-cr="brows"></div>
|
||||
<label>Nose</label><div class="chips" data-cr="nose"></div>
|
||||
<label>Mouth</label><div class="chips" data-cr="mouth"></div>
|
||||
</section>
|
||||
<section>
|
||||
<label>Outfit top</label><div class="chips" data-cr="outfitTop"></div>
|
||||
<label>Top colour</label><div class="swatches" data-cr="topColor"></div>
|
||||
<label>Bottom</label><div class="chips" data-cr="outfitBottom"></div>
|
||||
<label>Bottom colour</label><div class="swatches" data-cr="bottomColor"></div>
|
||||
<label>Shoes</label><div class="chips" data-cr="shoes"></div>
|
||||
</section>
|
||||
<section><label>Accessory</label><div class="chips" data-cr="accessory"></div></section>
|
||||
<section>
|
||||
<label>Personality <span class="dim">(pick up to 3)</span></label>
|
||||
<div class="chips multi" data-cr="personality"></div>
|
||||
</section>
|
||||
<section>
|
||||
<label>Voice</label><div class="chips" data-cr="voice"></div>
|
||||
</section>
|
||||
</div>
|
||||
<button id="btn-startlife" class="btn btn-primary btn-big">Start My Life ✨</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== In-game HUD ===== -->
|
||||
<div id="hud" class="hidden">
|
||||
<!-- top bar -->
|
||||
<div id="topbar">
|
||||
<div class="pill money-pill" title="TownCoins"><span class="coin">◉</span><span id="tb-money">0</span></div>
|
||||
<div class="pill clock-pill"><span id="tb-clock">07:30</span> · <span id="tb-day">Day 1</span></div>
|
||||
<div class="pill weather-pill"><span id="tb-weather">☀️</span><span id="tb-zone">Maple Court</span></div>
|
||||
<div class="pill online-pill" title="Residents online"><span>👥</span><span id="tb-online">1</span></div>
|
||||
<div class="top-actions">
|
||||
<button class="iconbtn" id="btn-audio" title="Sound">🔊</button>
|
||||
<button class="iconbtn" id="btn-fullscreen" title="Fullscreen">⛶</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- notifications -->
|
||||
<div id="toasts"></div>
|
||||
|
||||
<!-- right side: quests / context -->
|
||||
<div id="context-panel" class="glass">
|
||||
<div class="cp-title">✦ Now</div>
|
||||
<div id="cp-content"></div>
|
||||
</div>
|
||||
|
||||
<!-- bottom bar -->
|
||||
<div id="bottombar">
|
||||
<div id="need-rings"></div>
|
||||
<div id="mood-chip" class="glass"><span id="mood-emoji">🙂</span><span id="mood-label">Okay</span></div>
|
||||
<div id="action-bar">
|
||||
<button class="abtn" data-act="interact">👋<span>Act</span></button>
|
||||
<button class="abtn" data-act="emote">💃<span>Dance</span></button>
|
||||
<button class="abtn" data-act="phone">📱<span>Phone</span></button>
|
||||
<button class="abtn" data-act="map">🗺️<span>Map</span></button>
|
||||
<button class="abtn" data-act="bag">🎒<span>Bag</span></button>
|
||||
<button class="abtn" data-act="home">🏠<span>Home</span></button>
|
||||
<button class="abtn" data-act="build">🔨<span>Build</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- interaction prompt -->
|
||||
<div id="prompt" class="hidden"><kbd id="prompt-key">E</kbd><span id="prompt-text"></span></div>
|
||||
|
||||
<!-- speech bubble layer anchor -->
|
||||
<div id="bubble-layer"></div>
|
||||
|
||||
<!-- chat -->
|
||||
<div id="chat-panel">
|
||||
<div id="chat-log"></div>
|
||||
<div class="chat-input-row">
|
||||
<input id="chat-input" placeholder="Say something… (Enter)" maxlength="240" autocomplete="off"/>
|
||||
<select id="chat-channel"><option value="say">Say</option><option value="global">Global</option></select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mobile controls -->
|
||||
<div id="touch-ui" class="hidden">
|
||||
<div id="joy-base"><div id="joy-knob"></div></div>
|
||||
<div id="touch-buttons">
|
||||
<button id="tb-interact">✋</button>
|
||||
<button id="tb-jump-run">🏃</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- interaction wheel -->
|
||||
<div id="wheel" class="hidden glass"></div>
|
||||
|
||||
<!-- phone -->
|
||||
<div id="phone" class="hidden">
|
||||
<div class="phone-frame">
|
||||
<div class="phone-top"><span id="phone-clock">07:30</span><span>LTE ◉◉◉</span></div>
|
||||
<div id="phone-screen"></div>
|
||||
<div class="phone-dock" id="phone-dock"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- build mode UI -->
|
||||
<div id="buildbar" class="hidden">
|
||||
<div class="bb-title">🔨 Build Mode</div>
|
||||
<div class="bb-tools">
|
||||
<button class="tool active" data-tool="place">🛋 Place</button>
|
||||
<button class="tool" data-tool="move">✥ Move</button>
|
||||
<button class="tool" data-tool="rotate">⟳ Rotate</button>
|
||||
<button class="tool" data-tool="duplicate">⧉ Copy</button>
|
||||
<button class="tool" data-tool="delete">🗑 Sell</button>
|
||||
</div>
|
||||
<button id="btn-shop" class="btn btn-accent">🛒 Shop Furniture</button>
|
||||
<button id="btn-exit-build" class="btn btn-ghost">✓ Live Mode</button>
|
||||
</div>
|
||||
|
||||
<!-- catalog modal -->
|
||||
<div id="catalog" class="modal hidden"><div class="modal-card glass">
|
||||
<div class="modal-head"><span>🛒 MapleMart Catalogue</span><button class="iconbtn" id="catalog-close">✕</button></div>
|
||||
<div class="cat-tabs" id="cat-tabs"></div>
|
||||
<div id="cat-grid" class="cat-grid"></div>
|
||||
</div></div>
|
||||
|
||||
<!-- inventory modal -->
|
||||
<div id="inventory" class="modal hidden"><div class="modal-card glass">
|
||||
<div class="modal-head"><span>🎒 Inventory</span><button class="iconbtn" id="inv-close">✕</button></div>
|
||||
<div id="inv-grid" class="cat-grid"></div>
|
||||
</div></div>
|
||||
|
||||
<!-- generic dialog -->
|
||||
<div id="dialog" class="modal hidden"><div class="modal-card glass small">
|
||||
<div class="modal-head"><span id="dialog-title"></span><button class="iconbtn" id="dialog-close">✕</button></div>
|
||||
<div id="dialog-body"></div>
|
||||
</div></div>
|
||||
|
||||
<!-- minimap -->
|
||||
<canvas id="minimap" width="180" height="180"></canvas>
|
||||
</div>
|
||||
|
||||
<div id="loading" class="hidden"><div class="loader-ring"></div><div id="loading-text">Warming up LifeTown…</div></div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,162 @@
|
||||
// LifeTown Online — fully procedural audio: location music, ambience, SFX.
|
||||
// No external assets; everything is synthesised with WebAudio.
|
||||
|
||||
type TrackId = 'home' | 'town' | 'park' | 'date' | 'night';
|
||||
|
||||
export class AudioEngine {
|
||||
ctx: AudioContext | null = null;
|
||||
master!: GainNode;
|
||||
musicGain!: GainNode;
|
||||
sfxGain!: GainNode;
|
||||
rainGain!: GainNode;
|
||||
private track: TrackId | null = null;
|
||||
private stepTimer: number | null = null;
|
||||
private step = 0;
|
||||
private nextStepAt = 0;
|
||||
enabled = true;
|
||||
|
||||
init() {
|
||||
if (this.ctx) return;
|
||||
this.ctx = new AudioContext();
|
||||
this.master = this.ctx.createGain(); this.master.gain.value = 0.8;
|
||||
this.master.connect(this.ctx.destination);
|
||||
this.musicGain = this.ctx.createGain(); this.musicGain.gain.value = 0.34; this.musicGain.connect(this.master);
|
||||
this.sfxGain = this.ctx.createGain(); this.sfxGain.gain.value = 0.5; this.sfxGain.connect(this.master);
|
||||
// rain noise loop
|
||||
const buf = this.noiseBuffer(2);
|
||||
const src = this.ctx.createBufferSource(); src.buffer = buf; src.loop = true;
|
||||
const filt = this.ctx.createBiquadFilter(); filt.type = 'lowpass'; filt.frequency.value = 900;
|
||||
this.rainGain = this.ctx.createGain(); this.rainGain.gain.value = 0;
|
||||
src.connect(filt); filt.connect(this.rainGain); this.rainGain.connect(this.master);
|
||||
src.start();
|
||||
}
|
||||
|
||||
setEnabled(on: boolean) {
|
||||
this.enabled = on;
|
||||
if (this.ctx) this.master.gain.value = on ? 0.8 : 0;
|
||||
}
|
||||
|
||||
private noiseBuffer(sec: number) {
|
||||
const len = this.ctx!.sampleRate * sec;
|
||||
const buf = this.ctx!.createBuffer(1, len, this.ctx!.sampleRate);
|
||||
const d = buf.getChannelData(0);
|
||||
for (let i = 0; i < len; i++) d[i] = Math.random() * 2 - 1;
|
||||
return buf;
|
||||
}
|
||||
|
||||
setTrack(t: TrackId) {
|
||||
if (this.track === t) return;
|
||||
this.track = t;
|
||||
this.step = 0;
|
||||
}
|
||||
|
||||
setRain(amount: number) {
|
||||
if (!this.ctx) return;
|
||||
this.rainGain.gain.linearRampToValueAtTime(amount * 0.14, (this.ctx.currentTime + 1));
|
||||
}
|
||||
|
||||
/** call every frame; schedules notes just-in-time */
|
||||
tick() {
|
||||
if (!this.ctx || !this.enabled || !this.track) return;
|
||||
const bpmByTrack: Record<TrackId, number> = { home: 72, town: 112, park: 92, date: 84, night: 120 };
|
||||
const bpm = bpmByTrack[this.track];
|
||||
const beat = 60 / bpm / 2; // 8th notes
|
||||
const now = this.ctx.currentTime;
|
||||
if (this.nextStepAt < now) this.nextStepAt = now + 0.05;
|
||||
while (this.nextStepAt < now + 0.25) {
|
||||
this.scheduleStep(this.step++, this.nextStepAt, this.track);
|
||||
this.nextStepAt += beat;
|
||||
}
|
||||
}
|
||||
|
||||
private scheduleStep(step: number, at: number, tr: TrackId) {
|
||||
const bar = Math.floor(step / 16) % 4;
|
||||
const s = step % 16;
|
||||
const N = (n: number) => 440 * Math.pow(2, (n - 69) / 12);
|
||||
if (tr === 'town') {
|
||||
const bass = [45, 45, 50, 52];
|
||||
if (s % 4 === 0) this.pluck(N(bass[bar]) - 12, at, .3, 'triangle', .18);
|
||||
if (s % 2 === 0) this.pluck(N([72, 76, 79, 81][(s / 2 + bar) % 4]), at, .22, 'square', .05);
|
||||
if (s === 8 || s === 12) this.pluck(N(64 + bar), at, .3, 'sawtooth', .04);
|
||||
if (s % 8 === 4) this.hat(at, .05);
|
||||
if (s % 4 === 0) this.kick(at);
|
||||
} else if (tr === 'home') {
|
||||
const chords = [[57, 60, 64], [55, 59, 62], [53, 57, 60], [55, 58, 62]];
|
||||
if (s === 0) for (const n of chords[bar]) this.pad(N(n), at, 2.2, .05);
|
||||
if (s === 10) this.pluck(N(chords[bar][2] + 12), at, .5, 'sine', .06);
|
||||
} else if (tr === 'park') {
|
||||
if (s % 4 === 0) this.pluck(N([67, 69, 64, 62][bar]), at, .4, 'sine', .09);
|
||||
if (s % 8 === 6) this.pluck(N([74, 76, 71, 69][bar]), at, .5, 'triangle', .06);
|
||||
if (s === 0) for (const n of [48, 55]) this.pad(N(n), at, 1.6, .03);
|
||||
} else if (tr === 'date') {
|
||||
if (s % 8 === 0) { for (const n of [65, 69, 72]) this.pad(N(n - 12), at, 2.4, .04); }
|
||||
if (s % 4 === 2) this.pluck(N([77, 76, 72, 69][bar]), at, .6, 'sine', .05);
|
||||
} else { // night
|
||||
if (s % 4 === 0) this.kick(at);
|
||||
if (s % 4 === 2) this.hat(at, .07);
|
||||
if (s % 2 === 0) this.pluck(N([57, 57, 60, 62][bar]) + (s % 8 === 6 ? 3 : 0), at, .2, 'sawtooth', .045);
|
||||
}
|
||||
}
|
||||
|
||||
private pluck(freq: number, at: number, dur: number, type: OscillatorType, gain: number) {
|
||||
const o = this.ctx!.createOscillator(); o.type = type; o.frequency.value = freq;
|
||||
const g = this.ctx!.createGain();
|
||||
g.gain.setValueAtTime(gain, at);
|
||||
g.gain.exponentialRampToValueAtTime(0.0001, at + dur);
|
||||
o.connect(g); g.connect(this.musicGain);
|
||||
o.start(at); o.stop(at + dur + 0.05);
|
||||
}
|
||||
private pad(freq: number, at: number, dur: number, gain: number) {
|
||||
const o = this.ctx!.createOscillator(); o.type = 'sine'; o.frequency.value = freq;
|
||||
const o2 = this.ctx!.createOscillator(); o2.type = 'triangle'; o2.frequency.value = freq * 1.005;
|
||||
const g = this.ctx!.createGain();
|
||||
g.gain.setValueAtTime(0, at);
|
||||
g.gain.linearRampToValueAtTime(gain, at + 0.4);
|
||||
g.gain.linearRampToValueAtTime(0, at + dur);
|
||||
o.connect(g); o2.connect(g); g.connect(this.musicGain);
|
||||
o.start(at); o.stop(at + dur); o2.start(at); o2.stop(at + dur);
|
||||
}
|
||||
private kick(at: number) {
|
||||
const o = this.ctx!.createOscillator(); o.type = 'sine';
|
||||
o.frequency.setValueAtTime(130, at); o.frequency.exponentialRampToValueAtTime(42, at + 0.11);
|
||||
const g = this.ctx!.createGain();
|
||||
g.gain.setValueAtTime(.22, at); g.gain.exponentialRampToValueAtTime(.001, at + 0.16);
|
||||
o.connect(g); g.connect(this.musicGain); o.start(at); o.stop(at + 0.2);
|
||||
}
|
||||
private hat(at: number, gain: number) {
|
||||
const src = this.ctx!.createBufferSource(); src.buffer = this.noiseBuffer(0.06);
|
||||
const f = this.ctx!.createBiquadFilter(); f.type = 'highpass'; f.frequency.value = 6500;
|
||||
const g = this.ctx!.createGain();
|
||||
g.gain.setValueAtTime(gain, at); g.gain.exponentialRampToValueAtTime(.0001, at + 0.05);
|
||||
src.connect(f); f.connect(g); g.connect(this.musicGain);
|
||||
src.start(at);
|
||||
}
|
||||
|
||||
// ---------------- SFX ----------------
|
||||
private blip(freq: number, dur: number, type: OscillatorType, gain = 0.2, slideTo?: number) {
|
||||
if (!this.ctx || !this.enabled) return;
|
||||
const t = this.ctx.currentTime;
|
||||
const o = this.ctx.createOscillator(); o.type = type; o.frequency.setValueAtTime(freq, t);
|
||||
if (slideTo) o.frequency.exponentialRampToValueAtTime(slideTo, t + dur);
|
||||
const g = this.ctx.createGain();
|
||||
g.gain.setValueAtTime(gain, t); g.gain.exponentialRampToValueAtTime(.0001, t + dur);
|
||||
o.connect(g); g.connect(this.sfxGain);
|
||||
o.start(t); o.stop(t + dur + 0.02);
|
||||
}
|
||||
click() { this.blip(600, .07, 'square', .08); }
|
||||
pop() { this.blip(300, .12, 'sine', .18, 520); }
|
||||
cash() { this.blip(880, .09, 'square', .12); setTimeout(() => this.blip(1320, .14, 'square', .12), 70); }
|
||||
door() { this.blip(180, .18, 'triangle', .15, 90); }
|
||||
err() { this.blip(220, .16, 'sawtooth', .1, 160); }
|
||||
footstep(run: boolean) { this.blip(90 + Math.random() * 30, .05, 'triangle', run ? .06 : .04); }
|
||||
thunder() { this.blip(55 + Math.random() * 20, .9, 'sawtooth', .12, 26); }
|
||||
achievement() {
|
||||
[523, 659, 784, 1047].forEach((f, i) => setTimeout(() => this.blip(f, .18, 'triangle', .16), i * 95));
|
||||
}
|
||||
levelup() { [392, 494, 587, 784].forEach((f, i) => setTimeout(() => this.blip(f, .16, 'square', .1), i * 80)); }
|
||||
}
|
||||
|
||||
export const audio = new AudioEngine();
|
||||
|
||||
// resume on first gesture
|
||||
window.addEventListener('pointerdown', () => { audio.init(); audio.ctx?.resume?.(); }, { once: false });
|
||||
@@ -0,0 +1,175 @@
|
||||
// LifeTown Online — player controller: input, movement & collision, camera rig,
|
||||
// interaction scanning, network transform sync.
|
||||
import * as THREE from 'three';
|
||||
import { Engine } from './gfx/engine';
|
||||
import { Town } from './gfx/town';
|
||||
import { Interior } from './gfx/interior';
|
||||
import { S, bus } from './state';
|
||||
import { net } from './net';
|
||||
import { audio } from './audio';
|
||||
|
||||
export interface InputState {
|
||||
x: number; z: number; // joystick / axes (-1..1)
|
||||
run: boolean;
|
||||
}
|
||||
|
||||
const WALK = 3.4, RUN = 6.0;
|
||||
|
||||
export class Controller {
|
||||
input: InputState = { x: 0, z: 0, run: false };
|
||||
yaw = Math.PI; // camera orbit yaw
|
||||
pitch = 0.62;
|
||||
dist = 11;
|
||||
private targetPos = new THREE.Vector3(0, 1.2, 0);
|
||||
private keys = new Set<string>();
|
||||
private lastSent = 0;
|
||||
private lastFx = { x: 0, z: 0 };
|
||||
frozen = false; // during dialogs/sleep
|
||||
mode: 'live' | 'build' = 'live';
|
||||
onPrompt: ((info: { label: string; key?: string; cb: () => void } | null) => void) | null = null;
|
||||
|
||||
constructor(
|
||||
public engine: Engine,
|
||||
public town: Town | null,
|
||||
public interior: Interior | null,
|
||||
public getPlayerPos: () => THREE.Vector3,
|
||||
public scanInteract: () => { label: string; cb: () => void } | null,
|
||||
) {
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLSelectElement || e.target instanceof HTMLTextAreaElement) return;
|
||||
this.keys.add(e.code);
|
||||
if (e.code === 'KeyE') this.tryInteract();
|
||||
if (e.code === 'KeyF') bus.emit('act:dance');
|
||||
});
|
||||
window.addEventListener('keyup', (e) => this.keys.delete(e.code));
|
||||
// mouse orbit
|
||||
const el = engine.renderer.domElement;
|
||||
let dragging = false, lx = 0, ly = 0;
|
||||
el.addEventListener('pointerdown', (e) => { if (e.button === 0 && !S.buildMode) { dragging = true; lx = e.clientX; ly = e.clientY; } });
|
||||
window.addEventListener('pointerup', () => dragging = false);
|
||||
window.addEventListener('pointermove', (e) => {
|
||||
if (!dragging) return;
|
||||
this.yaw -= (e.clientX - lx) * 0.0052;
|
||||
this.pitch = THREE.MathUtils.clamp(this.pitch + (e.clientY - ly) * 0.0035, 0.12, 1.25);
|
||||
lx = e.clientX; ly = e.clientY;
|
||||
});
|
||||
el.addEventListener('wheel', (e) => {
|
||||
this.dist = THREE.MathUtils.clamp(this.dist + e.deltaY * 0.011, 4, 26);
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
setInterior(i: Interior | null) { this.interior = i; }
|
||||
|
||||
tryInteract() {
|
||||
if (this.frozen || S.chatOpen) return;
|
||||
const hit = this.scanInteract();
|
||||
if (hit) { audio.click(); hit.cb(); }
|
||||
}
|
||||
|
||||
update(dt: number, myAvatar: { group: THREE.Group; setAnim(a: string): void; getAnim(): string } | null) {
|
||||
const cam = this.engine.camera;
|
||||
if (!myAvatar) { this.updateCamera(dt); return; }
|
||||
const g = myAvatar.group;
|
||||
|
||||
// ---- gather input ----
|
||||
let ix = this.input.x, iz = this.input.z;
|
||||
if (!S.chatOpen && !this.frozen) {
|
||||
if (this.keys.has('KeyW') || this.keys.has('ArrowUp')) iz -= 1;
|
||||
if (this.keys.has('KeyS') || this.keys.has('ArrowDown')) iz += 1;
|
||||
if (this.keys.has('KeyA') || this.keys.has('ArrowLeft')) ix -= 1;
|
||||
if (this.keys.has('KeyD') || this.keys.has('ArrowRight')) ix += 1;
|
||||
}
|
||||
const run = this.input.run || this.keys.has('ShiftLeft') || this.keys.has('ShiftRight');
|
||||
const mag = Math.min(1, Math.hypot(ix, iz));
|
||||
const moving = mag > 0.06 && !this.frozen && !S.chatOpen && this.mode === 'live';
|
||||
|
||||
if (moving) {
|
||||
// camera-relative direction
|
||||
const sin = Math.sin(this.yaw), cos = Math.cos(this.yaw);
|
||||
const dx = ix * cos - iz * sin;
|
||||
const dz = ix * sin + iz * cos;
|
||||
const len = Math.hypot(dx, dz) || 1;
|
||||
const speed = (run ? RUN : WALK) * Math.min(1, mag);
|
||||
let nx = g.position.x + (dx / len) * speed * dt;
|
||||
let nz = g.position.z + (dz / len) * speed * dt;
|
||||
|
||||
// collisions
|
||||
if (this.interior) {
|
||||
const b = this.interior.bounds();
|
||||
nx = THREE.MathUtils.clamp(nx, -b.hw, b.hw);
|
||||
nz = THREE.MathUtils.clamp(nz, -b.hd, b.hd);
|
||||
// furniture rough blocking (circle vs footprint)
|
||||
for (const f of this.interior.furniture) {
|
||||
const dx2 = nx - f.group.position.x, dz2 = nz - f.group.position.z;
|
||||
const d2 = Math.hypot(dx2, dz2);
|
||||
if (d2 < 0.55 && d2 > 0.001) { nx = f.group.position.x + dx2 / d2 * 0.55; nz = f.group.position.z + dz2 / d2 * 0.55; }
|
||||
}
|
||||
} else if (this.town) {
|
||||
nx = THREE.MathUtils.clamp(nx, -72, 72);
|
||||
nz = THREE.MathUtils.clamp(nz, -46, 46);
|
||||
for (const c of this.town.colliders) {
|
||||
if (nx > c.x - c.hw - 0.35 && nx < c.x + c.hw + 0.35 && nz > c.z - c.hd - 0.35 && nz < c.z + c.hd + 0.35) {
|
||||
// push out along smallest penetration
|
||||
const pxl = nx - (c.x - c.hw - 0.35), pxr = (c.x + c.hw + 0.35) - nx;
|
||||
const pzl = nz - (c.z - c.hd - 0.35), pzr = (c.z + c.hd + 0.35) - nz;
|
||||
const m = Math.min(pxl, pxr, pzl, pzr);
|
||||
if (m === pxl) nx = c.x - c.hw - 0.35;
|
||||
else if (m === pxr) nx = c.x + c.hw + 0.35;
|
||||
else if (m === pzl) nz = c.z - c.hd - 0.35;
|
||||
else nz = c.z + c.hd + 0.35;
|
||||
}
|
||||
}
|
||||
}
|
||||
g.position.set(nx, 0, nz);
|
||||
g.rotation.y = Math.atan2(dx, dz);
|
||||
|
||||
const anim = run ? 'run' : 'walk';
|
||||
myAvatar.setAnim(anim);
|
||||
// footsteps
|
||||
const moved = Math.hypot(nx - this.lastFx.x, nz - this.lastFx.z);
|
||||
if (moved > 1.1) { this.lastFx.x = nx; this.lastFx.z = nz; audio.footstep(run); }
|
||||
} else if (this.mode === 'live') {
|
||||
if (['walk', 'run'].includes(myAvatar.getAnim())) myAvatar.setAnim('idle');
|
||||
}
|
||||
|
||||
// ---- network sync (throttled) ----
|
||||
const now = performance.now();
|
||||
if (now - this.lastSent > 66) {
|
||||
this.lastSent = now;
|
||||
net.send({ t: 'move', x: +g.position.x.toFixed(2), z: +g.position.z.toFixed(2), ry: +g.rotation.y.toFixed(2), anim: myAvatar.getAnim() });
|
||||
}
|
||||
|
||||
this.updateCamera(dt, g.position);
|
||||
}
|
||||
|
||||
private focusOverride: { pos: THREE.Vector3; until: number } | null = null;
|
||||
socialFocus(pos: THREE.Vector3) {
|
||||
this.focusOverride = { pos: pos.clone(), until: performance.now() + 2600 };
|
||||
}
|
||||
|
||||
updateCamera(dt: number, playerPos?: THREE.Vector3) {
|
||||
const cam = this.engine.camera;
|
||||
let target = this.targetPos;
|
||||
if (playerPos) target = playerPos;
|
||||
if (this.focusOverride) {
|
||||
if (performance.now() > this.focusOverride.until) this.focusOverride = null;
|
||||
else target = this.focusOverride.pos;
|
||||
}
|
||||
const wantDist = S.buildMode ? 16 : this.dist;
|
||||
const wantPitch = S.buildMode ? 1.05 : this.pitch;
|
||||
const curDist = cam.position.distanceTo(new THREE.Vector3(target.x, 0, target.z));
|
||||
const k = 1 - Math.pow(0.0001, dt); // smoothing
|
||||
const dist = THREE.MathUtils.lerp(curDist || wantDist, wantDist, Math.min(1, dt * 5));
|
||||
|
||||
const ox = Math.sin(this.yaw) * Math.cos(wantPitch * 0.9);
|
||||
const oz = Math.cos(this.yaw) * Math.cos(wantPitch * 0.9);
|
||||
const oy = Math.sin(wantPitch);
|
||||
cam.position.set(
|
||||
target.x + ox * dist,
|
||||
(target.y ?? 0) + oy * dist,
|
||||
target.z + oz * dist
|
||||
);
|
||||
cam.lookAt(target.x, (target.y ?? 0) + 1.1, target.z);
|
||||
void k;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,463 @@
|
||||
// LifeTown Online — stylized original characters: modular avatar builder +
|
||||
// procedural animation controller (walk, run, dance, emotes, expressions).
|
||||
import * as THREE from 'three';
|
||||
|
||||
const SKINS = ['#f7d7c4', '#eab98f', '#c98a5b', '#8a5a37', '#5d3a21', '#f2a97e'];
|
||||
|
||||
function mat(color: string | number, rough = 0.85, metal = 0) {
|
||||
return new THREE.MeshStandardMaterial({ color, roughness: rough, metalness: metal });
|
||||
}
|
||||
|
||||
function limb(len: number, thick: number, material: THREE.Material) {
|
||||
const g = new THREE.CapsuleGeometry(thick, len - thick * 2, 4, 10);
|
||||
const m = new THREE.Mesh(g, material);
|
||||
m.position.y = -len / 2;
|
||||
m.castShadow = true;
|
||||
return m;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------
|
||||
export class Avatar {
|
||||
group = new THREE.Group();
|
||||
private bodyG = new THREE.Group();
|
||||
private hips = new THREE.Group();
|
||||
private legL = new THREE.Group();
|
||||
private legR = new THREE.Group();
|
||||
private shinL = new THREE.Group();
|
||||
private shinR = new THREE.Group();
|
||||
private armL = new THREE.Group();
|
||||
private armR = new THREE.Group();
|
||||
private head = new THREE.Group();
|
||||
private eyeL!: THREE.Mesh; private eyeR!: THREE.Mesh;
|
||||
private irisL!: THREE.Mesh; private irisR!: THREE.Mesh;
|
||||
private browL!: THREE.Mesh; private browR!: THREE.Mesh;
|
||||
private mouth!: THREE.Mesh;
|
||||
private headTop = new THREE.Group();
|
||||
|
||||
private anim = 'idle';
|
||||
private phase = Math.random() * 10;
|
||||
private blinkAt = 2 + Math.random() * 4;
|
||||
private blinkT = 0;
|
||||
private expr = 'happy';
|
||||
private moodSprite: THREE.Sprite | null = null;
|
||||
|
||||
constructor(app: any, npcColorSeed?: number) {
|
||||
const a = app || {};
|
||||
const skin = a.skin || SKINS[npcColorSeed ? npcColorSeed % SKINS.length : 1];
|
||||
const topColor = a.topColor ?? (npcColorSeed != null ? hslColor(npcColorSeed * 47 % 360, .55, .6) : '#4f8fd9');
|
||||
const bottomColor = a.bottomColor ?? '#33415c';
|
||||
const hairColor = a.hairColor || '#4a2f1d';
|
||||
const shoeColor = a.shoes === 'boots' ? '#5a4632' : a.shoes === 'loafers' ? '#2e2a28' : '#e8e8ee';
|
||||
const bodyType = a.bodyType || 'average';
|
||||
const height = THREE.MathUtils.clamp(a.height ?? 1, .85, 1.12);
|
||||
|
||||
const skinM = mat(skin, .65);
|
||||
const topM = mat(topColor, .9);
|
||||
const bottomM = mat(bottomColor, .9);
|
||||
const shoeM = mat(shoeColor, .8);
|
||||
const hairM = mat(hairColor, .95);
|
||||
const whiteM = mat('#ffffff', .3);
|
||||
|
||||
// proportions
|
||||
const widthK = bodyType === 'slim' ? 0.86 : bodyType === 'plump' ? 1.22 : 1;
|
||||
|
||||
// ---- legs ----
|
||||
for (const [side, hip, shin] of [[-1, this.legL, this.shinL], [1, this.legR, this.shinR]] as const) {
|
||||
hip.position.set(side * 0.155 * widthK, 0.92, 0);
|
||||
const thigh = limb(0.48, 0.105, bottomM); thigh.position.y = -0.24; hip.add(thigh);
|
||||
shin.position.y = -0.48; hip.add(shin);
|
||||
const calf = limb(0.44, 0.09, bottomM); calf.position.y = -0.2; shin.add(calf);
|
||||
const shoe = new THREE.Mesh(new THREE.BoxGeometry(0.19, 0.11, 0.32), shoeM);
|
||||
shoe.position.set(0, -0.43, 0.05); shoe.castShadow = true; shin.add(shoe);
|
||||
this.hips.add(hip);
|
||||
}
|
||||
|
||||
// ---- torso ----
|
||||
const torso = new THREE.Mesh(new THREE.CapsuleGeometry(0.26 * widthK, 0.5, 6, 14), topM);
|
||||
torso.position.y = 1.24; torso.scale.set(widthK, 1, 0.92);
|
||||
torso.castShadow = true;
|
||||
this.bodyG.add(torso);
|
||||
|
||||
if (a.outfitBottom === 'skirt') {
|
||||
const skirt = new THREE.Mesh(new THREE.ConeGeometry(0.34 * widthK, 0.42, 14, 1, true), bottomM);
|
||||
skirt.position.y = 0.86; skirt.castShadow = true; this.bodyG.add(skirt);
|
||||
}
|
||||
|
||||
// ---- arms ----
|
||||
for (const [side, arm] of [[-1, this.armL], [1, this.armR]] as const) {
|
||||
arm.position.set(side * (0.27 * widthK + 0.075), 1.52, 0);
|
||||
const sleeve = limb(0.66, 0.085, topM); arm.add(sleeve);
|
||||
const hand = new THREE.Mesh(new THREE.SphereGeometry(0.085, 10, 8), skinM);
|
||||
hand.position.y = -0.68; hand.castShadow = true; arm.add(hand);
|
||||
this.bodyG.add(arm);
|
||||
}
|
||||
|
||||
// ---- head ----
|
||||
this.head.position.y = 1.78;
|
||||
const skull = new THREE.Mesh(new THREE.SphereGeometry(0.315, 20, 16), skinM);
|
||||
skull.scale.set(1, 1.06, 0.96); skull.castShadow = true;
|
||||
this.head.add(skull);
|
||||
const faceShape = a.faceShape || 'round';
|
||||
if (faceShape === 'oval') skull.scale.set(.94, 1.14, .96);
|
||||
if (faceShape === 'square') skull.scale.set(1.03, 1, .99);
|
||||
|
||||
// ears
|
||||
for (const side of [-1, 1]) {
|
||||
const ear = new THREE.Mesh(new THREE.SphereGeometry(0.06, 8, 6), skinM);
|
||||
ear.position.set(side * 0.3, 0, 0); this.head.add(ear);
|
||||
}
|
||||
|
||||
// eyes (white + iris + highlight)
|
||||
const eyeGeo = new THREE.SphereGeometry(0.072, 12, 10);
|
||||
const irisGeo = new THREE.SphereGeometry(0.038, 10, 8);
|
||||
const irisColor = a.eyeColor || '#3a5a40';
|
||||
const eyeStyle = a.eyes || 'round';
|
||||
const mkEye = (side: number) => {
|
||||
const holder = new THREE.Group(); holder.position.set(side * 0.115, 0.05, 0.26);
|
||||
const w = new THREE.Mesh(eyeGeo, whiteM);
|
||||
if (eyeStyle === 'sleepy') w.scale.set(1.15, 0.7, 0.8);
|
||||
if (eyeStyle === 'wide') w.scale.set(1.05, 1.2, 0.85);
|
||||
holder.add(w);
|
||||
const iris = new THREE.Mesh(irisGeo, mat(irisColor, .35));
|
||||
iris.position.z = 0.045; holder.add(iris);
|
||||
const glint = new THREE.Mesh(new THREE.SphereGeometry(0.013, 6, 5), mat('#ffffff', .2));
|
||||
glint.position.set(0.015, 0.02, 0.075); holder.add(glint);
|
||||
return { holder, w, iris };
|
||||
};
|
||||
const eL = mkEye(-1), eR = mkEye(1);
|
||||
this.eyeL = eL.w; this.eyeR = eR.w; this.irisL = eL.iris; this.irisR = eR.iris;
|
||||
this.head.add(eL.holder, eR.holder);
|
||||
|
||||
// brows
|
||||
const browGeo = new THREE.BoxGeometry(0.1, 0.022, 0.02);
|
||||
const browM = mat(hairColor, .9);
|
||||
this.browL = new THREE.Mesh(browGeo, browM); this.browL.position.set(-0.115, 0.155, 0.285);
|
||||
this.browR = new THREE.Mesh(browGeo, browM); this.browR.position.set(0.115, 0.155, 0.285);
|
||||
const browStyle = a.brows || 'natural';
|
||||
if (browStyle === 'thick') { this.browL.scale.y = 2; this.browR.scale.y = 2; }
|
||||
if (browStyle === 'thin') { this.browL.scale.y = 0.55; this.browR.scale.y = 0.55; }
|
||||
this.head.add(this.browL, this.browR);
|
||||
|
||||
// nose + mouth
|
||||
const nose = new THREE.Mesh(new THREE.SphereGeometry(0.035, 8, 6), skinM);
|
||||
nose.position.set(0, -0.03, 0.31);
|
||||
if ((a.nose || 'button') === 'round') { nose.scale.setScalar(1.5); nose.position.y = -0.04; }
|
||||
if ((a.nose || 'button') === 'small') nose.scale.setScalar(0.7);
|
||||
this.head.add(nose);
|
||||
this.mouth = new THREE.Mesh(new THREE.TorusGeometry(0.075, 0.017, 8, 14, Math.PI), mat('#a04a4a', .6));
|
||||
this.mouth.position.set(0, -0.115, 0.28);
|
||||
this.mouth.rotation.z = Math.PI; // default smile (arc opens downward->up)
|
||||
if ((a.mouth || 'smile') === 'neutral') this.mouth.rotation.z = Math.PI / 2;
|
||||
if ((a.mouth || 'smile') === 'grin') { this.mouth.scale.set(1.25, 1.25, 1); }
|
||||
this.head.add(this.mouth);
|
||||
|
||||
// ---- hair ----
|
||||
this.buildHair(a.hair || 'short', hairM);
|
||||
this.head.add(this.headTop);
|
||||
|
||||
// accessory
|
||||
this.buildAccessory(a.accessory || 'none');
|
||||
|
||||
this.bodyG.add(this.hips, this.head);
|
||||
this.group.add(this.bodyG);
|
||||
|
||||
// soft blob shadow (fake AO under feet)
|
||||
const blob = new THREE.Mesh(
|
||||
new THREE.CircleGeometry(0.42, 20),
|
||||
new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.28, depthWrite: false })
|
||||
);
|
||||
blob.rotation.x = -Math.PI / 2; blob.position.y = 0.02;
|
||||
this.group.add(blob);
|
||||
|
||||
this.group.scale.set(1, height, 1);
|
||||
}
|
||||
|
||||
private buildHair(style: string, hairM: THREE.Material) {
|
||||
const add = (m: THREE.Object3D) => this.headTop.add(m);
|
||||
const cap = () => {
|
||||
const c = new THREE.Mesh(new THREE.SphereGeometry(0.325, 18, 14, 0, Math.PI * 2, 0, Math.PI * 0.55), hairM);
|
||||
c.position.y = 0.045; c.castShadow = true; return c;
|
||||
};
|
||||
switch (style) {
|
||||
case 'bald': break;
|
||||
case 'long': {
|
||||
add(cap());
|
||||
const back = new THREE.Mesh(new THREE.BoxGeometry(0.52, 0.5, 0.16), hairM);
|
||||
back.position.set(0, -0.18, -0.22); add(back);
|
||||
break;
|
||||
}
|
||||
case 'ponytail': {
|
||||
add(cap());
|
||||
const tail = new THREE.Mesh(new THREE.CapsuleGeometry(0.07, 0.3, 4, 8), hairM);
|
||||
tail.position.set(0, 0.05, -0.36); tail.rotation.x = 0.5; add(tail);
|
||||
break;
|
||||
}
|
||||
case 'curly': {
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const s = new THREE.Mesh(new THREE.SphereGeometry(0.13, 10, 8), hairM);
|
||||
const ang = (i / 7) * Math.PI * 2;
|
||||
s.position.set(Math.cos(ang) * 0.2, 0.22 + (i % 2) * 0.06, Math.sin(ang) * 0.2 - 0.03);
|
||||
add(s);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'bob': {
|
||||
add(cap());
|
||||
const ring = new THREE.Mesh(new THREE.TorusGeometry(0.27, 0.09, 10, 18), hairM);
|
||||
ring.rotation.x = Math.PI / 2; ring.position.y = -0.05; ring.scale.z = 0.8; add(ring);
|
||||
break;
|
||||
}
|
||||
case 'spiky': {
|
||||
for (let i = 0; i < 5; i++) {
|
||||
const sp = new THREE.Mesh(new THREE.ConeGeometry(0.06, 0.22, 6), hairM);
|
||||
sp.position.set((i - 2) * 0.11, 0.34, -0.02 + Math.abs(i - 2) * -0.04);
|
||||
sp.rotation.z = (i - 2) * -0.18; add(sp);
|
||||
}
|
||||
add(cap());
|
||||
break;
|
||||
}
|
||||
default: add(cap()); // short
|
||||
}
|
||||
}
|
||||
|
||||
private buildAccessory(acc: string) {
|
||||
const add = (m: THREE.Object3D) => this.headTop.add(m);
|
||||
if (acc === 'glasses') {
|
||||
const gm = mat('#222831', .4, .4);
|
||||
for (const side of [-1, 1]) {
|
||||
const rim = new THREE.Mesh(new THREE.TorusGeometry(0.085, 0.012, 8, 16), gm);
|
||||
rim.position.set(side * 0.115, 0.05, 0.3); add(rim);
|
||||
}
|
||||
const bridge = new THREE.Mesh(new THREE.BoxGeometry(0.07, 0.014, 0.014), gm);
|
||||
bridge.position.set(0, 0.06, 0.3); add(bridge);
|
||||
} else if (acc === 'cap') {
|
||||
const cm = mat('#e2564a', .8);
|
||||
const dome = new THREE.Mesh(new THREE.SphereGeometry(0.33, 14, 10, 0, Math.PI * 2, 0, Math.PI * 0.5), cm);
|
||||
dome.position.y = 0.1; add(dome);
|
||||
const brim = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.3, 0.03, 14, 1, false, -Math.PI / 2.6, Math.PI / 1.3), cm);
|
||||
brim.position.set(0, 0.12, 0.16); add(brim);
|
||||
} else if (acc === 'beanie') {
|
||||
const bm = mat('#3f7fd9', .9);
|
||||
const dome = new THREE.Mesh(new THREE.SphereGeometry(0.33, 14, 10, 0, Math.PI * 2, 0, Math.PI * 0.55), bm);
|
||||
dome.position.y = 0.08; add(dome);
|
||||
const pom = new THREE.Mesh(new THREE.SphereGeometry(0.06, 8, 8), mat('#fff', .8));
|
||||
pom.position.y = 0.42; add(pom);
|
||||
}
|
||||
}
|
||||
|
||||
setAnim(a: string) { if (this.anim !== a) { this.anim = a; this.phase = 0; } }
|
||||
getAnim() { return this.anim; }
|
||||
|
||||
setExpressionFromMood(mood: string) {
|
||||
const map: Record<string, string> = {
|
||||
Happy: 'happy', Excited: 'excited', Relaxed: 'relaxed', Confident: 'confident', Inspired: 'happy',
|
||||
Romantic: 'romantic', Sad: 'sad', Angry: 'angry', Bored: 'flat', Embarrassed: 'oops',
|
||||
Lonely: 'sad', Tired: 'tired', Stressed: 'angry',
|
||||
};
|
||||
this.expr = map[mood] || 'happy';
|
||||
}
|
||||
|
||||
/** position of head top in world space (for bubbles/nametags) */
|
||||
headWorldPos(out: THREE.Vector3) {
|
||||
out.set(0, 2.35, 0);
|
||||
this.group.updateMatrixWorld();
|
||||
out.applyMatrix4(this.group.matrixWorld);
|
||||
return out;
|
||||
}
|
||||
|
||||
update(dt: number) {
|
||||
const p = (this.phase += dt);
|
||||
const L = this.legL, R = this.legR, LA = this.armL, RA = this.armR;
|
||||
const sL = this.shinL, sR = this.shinR;
|
||||
// reset base targets
|
||||
let bobY = 0, leanX = 0;
|
||||
let lL = 0, lR = 0, sLr = 0.05, sRr = 0.05, aL = 0, aR = 0, aLz = 0.09, aRz = -0.09;
|
||||
let headNod = 0, headTilt = 0;
|
||||
|
||||
switch (this.anim) {
|
||||
case 'walk': {
|
||||
const k = p * 7.2;
|
||||
lL = Math.sin(k) * 0.55; lR = Math.sin(k + Math.PI) * 0.55;
|
||||
sLr = Math.max(0.06, -Math.sin(k - 0.6) * 0.7); sRr = Math.max(0.06, -Math.sin(k + Math.PI - 0.6) * 0.7);
|
||||
aL = Math.sin(k + Math.PI) * 0.42; aR = Math.sin(k) * 0.42;
|
||||
bobY = Math.abs(Math.sin(k)) * 0.045; leanX = 0.05;
|
||||
break;
|
||||
}
|
||||
case 'run': {
|
||||
const k = p * 11.5;
|
||||
lL = Math.sin(k) * 0.95; lR = Math.sin(k + Math.PI) * 0.95;
|
||||
sLr = Math.max(0.1, -Math.sin(k - 0.7)) * 1.1; sRr = Math.max(0.1, -Math.sin(k + Math.PI - 0.7)) * 1.1;
|
||||
aL = Math.sin(k + Math.PI) * 0.85 - 0.25; aR = Math.sin(k) * 0.85 - 0.25;
|
||||
bobY = Math.abs(Math.sin(k)) * 0.09; leanX = 0.22;
|
||||
break;
|
||||
}
|
||||
case 'dance': {
|
||||
const k = p * 6.4;
|
||||
bobY = Math.abs(Math.sin(k)) * 0.12;
|
||||
this.bodyG.rotation.y = Math.sin(k * 0.5) * 0.35;
|
||||
aLz = 0.4 + Math.sin(k) * 1.5; aRz = -0.4 - Math.sin(k + Math.PI) * 1.5;
|
||||
aL = -0.6; aR = -0.6;
|
||||
lL = Math.sin(k) * 0.25; lR = -Math.sin(k) * 0.25;
|
||||
headTilt = Math.sin(k * 0.5) * 0.2;
|
||||
break;
|
||||
}
|
||||
case 'wave': {
|
||||
aR = -2.5; aRz = -0.5 + Math.sin(p * 8) * 0.45; aL = 0.1;
|
||||
headTilt = 0.08;
|
||||
break;
|
||||
}
|
||||
case 'talk': {
|
||||
const k = p * 3.2;
|
||||
aR = -0.5 + Math.sin(k) * 0.25; aRz = -0.35;
|
||||
headNod = Math.sin(k * 1.4) * 0.1;
|
||||
this.mouth.scale.setScalar(1 + Math.abs(Math.sin(k * 3)) * 0.5);
|
||||
break;
|
||||
}
|
||||
case 'laugh': {
|
||||
const k = p * 9;
|
||||
bobY = Math.abs(Math.sin(k)) * 0.06; leanX = -0.12 + Math.abs(Math.sin(k)) * 0.1;
|
||||
aL = -0.4; aR = -0.4; headNod = -0.15;
|
||||
this.mouth.scale.set(1.4, 1.4, 1.4);
|
||||
break;
|
||||
}
|
||||
case 'sit': {
|
||||
lL = -1.45; lR = -1.45; sLr = 1.35; sRr = 1.35;
|
||||
bobY = -0.42; aL = -0.35; aR = -0.35; aLz = 0.18; aRz = -0.18;
|
||||
break;
|
||||
}
|
||||
case 'sleep': {
|
||||
this.bodyG.rotation.x = -Math.PI / 2;
|
||||
this.bodyG.position.y = -0.62;
|
||||
lL = 0.08; lR = -0.08; aL = 0.15; aR = -0.15; sLr = 0.15; sRr = 0.15;
|
||||
headTilt = 0.12;
|
||||
this.applyExpr();
|
||||
this.updateBlink(dt, 0.25);
|
||||
return;
|
||||
}
|
||||
case 'hug': { aL = -1.9; aR = -1.9; aLz = 0.5; aRz = -0.5; leanX = 0.18; break; }
|
||||
case 'kiss': { aL = -0.7; aR = -0.7; leanX = 0.22; headTilt = 0.18; break; }
|
||||
case 'holdhands': { aR = -0.55; aRz = -0.5; break; }
|
||||
case 'highfive': { aR = -2.7; aRz = -0.15; break; }
|
||||
case 'gift': { aL = -1.5; aR = -1.5; aLz = 0.22; aRz = -0.22; leanX = 0.12; break; }
|
||||
case 'flirt': { headTilt = 0.22; aR = -1.2; aRz = -0.9; this.mouth.scale.set(0.8, 1.2, 0.8); break; }
|
||||
case 'argue': {
|
||||
const k = p * 8;
|
||||
aL = -1 + Math.sin(k) * 0.3; aR = -1 - Math.sin(k) * 0.3;
|
||||
aLz = 0.7; aRz = -0.7; headNod = Math.sin(k * 0.7) * 0.12;
|
||||
break;
|
||||
}
|
||||
case 'celebrate': {
|
||||
const k = p * 5;
|
||||
bobY = Math.abs(Math.sin(k)) * 0.22;
|
||||
aLz = 2.6; aRz = -2.6; headNod = -0.1;
|
||||
break;
|
||||
}
|
||||
case 'eat': {
|
||||
const k = p * 4;
|
||||
aR = -1.9 + Math.sin(k) * 0.35; aRz = -0.3;
|
||||
chewMouth(this.mouth, k);
|
||||
break;
|
||||
}
|
||||
case 'work': {
|
||||
const k = p * 10;
|
||||
aL = -1.05 + Math.sin(k) * 0.06; aR = -1.05 - Math.sin(k) * 0.06;
|
||||
aLz = 0.3; aRz = -0.3; leanX = 0.14; headNod = 0.18 + Math.sin(k * 0.2) * 0.03;
|
||||
break;
|
||||
}
|
||||
default: { // idle
|
||||
const k = p * 1.8;
|
||||
bobY = Math.sin(k) * 0.02;
|
||||
aL = Math.sin(k * 0.9) * 0.05; aR = Math.sin(k * 0.9 + 1) * 0.05;
|
||||
headNod = Math.sin(k * 0.7) * 0.04;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.bodyG.rotation.x += (leanX - this.bodyG.rotation.x) * Math.min(1, dt * 10);
|
||||
if (this.anim !== 'dance') this.bodyG.rotation.y *= Math.max(0, 1 - dt * 6);
|
||||
if (this.anim !== 'sleep') this.bodyG.position.y = 0;
|
||||
|
||||
this.bodyG.position.y = this.anim === 'sleep' ? -0.62 : bobY;
|
||||
L.rotation.x = lL; R.rotation.x = lR;
|
||||
sL.rotation.x = sLr; sR.rotation.x = sRr;
|
||||
LA.rotation.x += (aL - LA.rotation.x) * Math.min(1, dt * 12);
|
||||
RA.rotation.x += (aR - RA.rotation.x) * Math.min(1, dt * 12);
|
||||
LA.rotation.z += (aLz - LA.rotation.z) * Math.min(1, dt * 12);
|
||||
RA.rotation.z += (aRz - RA.rotation.z) * Math.min(1, dt * 12);
|
||||
this.head.rotation.x = headNod;
|
||||
this.head.rotation.z = headTilt;
|
||||
|
||||
if (this.anim !== 'talk' && this.anim !== 'eat' && this.anim !== 'flirt' && this.anim !== 'laugh') {
|
||||
this.mouth.scale.lerp(new THREE.Vector3(1, 1, 1), Math.min(1, dt * 6));
|
||||
}
|
||||
this.applyExpr();
|
||||
this.updateBlink(dt, 1);
|
||||
}
|
||||
|
||||
private updateBlink(dt: number, rate: number) {
|
||||
this.blinkAt -= dt * rate;
|
||||
if (this.blinkAt <= 0) { this.blinkT = 0.13; this.blinkAt = 2.5 + Math.random() * 4; }
|
||||
if (this.blinkT > 0) {
|
||||
this.blinkT -= dt;
|
||||
const s = 0.12;
|
||||
this.eyeL.scale.y = s; this.eyeR.scale.y = s;
|
||||
} else {
|
||||
this.eyeL.scale.y += (1 - this.eyeL.scale.y) * Math.min(1, dt * 18);
|
||||
this.eyeR.scale.y = this.eyeL.scale.y;
|
||||
}
|
||||
}
|
||||
|
||||
private applyExpr() {
|
||||
const e = this.expr;
|
||||
const bl = this.browL, br = this.browR;
|
||||
let browAng = 0, browY = 0;
|
||||
switch (e) {
|
||||
case 'angry': browAng = 0.35; browY = -0.02; this.mouth.rotation.z = 0; this.mouth.position.y = -0.135; break; // frown
|
||||
case 'sad': browAng = -0.3; this.mouth.rotation.z = 0; this.mouth.position.y = -0.14; break;
|
||||
case 'tired': browAng = 0.15; browY = 0.01; this.mouth.rotation.z = 0; this.mouth.position.y = -0.125; break;
|
||||
case 'flat': this.mouth.rotation.z = Math.PI / 2; this.mouth.position.y = -0.12; break;
|
||||
case 'oops': browAng = -0.25; browY = 0.02; this.mouth.rotation.z = 0; this.mouth.scale.set(0.7, 0.7, 0.7); break;
|
||||
case 'romantic': this.mouth.rotation.z = Math.PI * 0.96; this.mouth.position.y = -0.11; break;
|
||||
default: this.mouth.rotation.z = Math.PI; this.mouth.position.y = -0.115; // smile
|
||||
}
|
||||
bl.rotation.z += (browAng - bl.rotation.z) * 0.2;
|
||||
br.rotation.z += (-browAng - br.rotation.z) * 0.2;
|
||||
bl.position.y = 0.155 + browY; br.position.y = 0.155 + browY;
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this.group.traverse((o: any) => {
|
||||
if (o.geometry) o.geometry.dispose();
|
||||
if (o.material) { Array.isArray(o.material) ? o.material.forEach((mm: any) => mm.dispose()) : o.material.dispose(); }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function chewMouth(mouth: THREE.Mesh, k: number) {
|
||||
const s = 1 + Math.abs(Math.sin(k * 2)) * 0.6;
|
||||
mouth.scale.set(s * 0.8, 1, 0.8);
|
||||
}
|
||||
|
||||
function hslColor(h: number, s: number, l: number): string {
|
||||
const c = new THREE.Color().setHSL(h / 360, s, l);
|
||||
return '#' + c.getHexString();
|
||||
}
|
||||
|
||||
/** Derive an appearance object for an NPC definition. */
|
||||
export function npcAppearance(def: any, index: number): any {
|
||||
const hairs = ['short', 'long', 'curly', 'bob', 'ponytail', 'spiky'];
|
||||
return {
|
||||
skin: SKINS[index % SKINS.length],
|
||||
hairColor: '#' + new THREE.Color(def.hairColor).getHexString(),
|
||||
hair: hairs[index % hairs.length],
|
||||
eyeColor: ['#3a5a40', '#3d5a80', '#6b4226'][index % 3],
|
||||
topColor: '#' + new THREE.Color(def.color).getHexString(),
|
||||
bottomColor: ['#33415c', '#3d3a4a', '#4a4038'][index % 3],
|
||||
outfitBottom: 'jeans',
|
||||
bodyType: ['average', 'slim', 'plump'][index % 3],
|
||||
height: 0.92 + ((index * 37) % 20) / 100,
|
||||
faceShape: ['round', 'oval', 'square'][index % 3],
|
||||
eyes: ['round', 'wide', 'sleepy'][index % 3],
|
||||
accessory: ['none', 'glasses', 'none', 'cap'][index % 4],
|
||||
name: def.name,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
// LifeTown Online — three.js engine: renderer, scene, lighting, day/night sky.
|
||||
import * as THREE from 'three';
|
||||
|
||||
const DAY_SKY = new THREE.Color(0x8ecdf2);
|
||||
const DUSK_SKY = new THREE.Color(0xf2a06b);
|
||||
const NIGHT_SKY = new THREE.Color(0x10142e);
|
||||
const DAWN_SKY = new THREE.Color(0xf7c48f);
|
||||
const RAIN_TINT = new THREE.Color(0x6b7891);
|
||||
|
||||
export class Engine {
|
||||
renderer: THREE.WebGLRenderer;
|
||||
scene: THREE.Scene;
|
||||
camera: THREE.PerspectiveCamera;
|
||||
sun: THREE.DirectionalLight;
|
||||
hemi: THREE.HemisphereLight;
|
||||
ambient: THREE.AmbientLight;
|
||||
moonFill: THREE.DirectionalLight;
|
||||
worldGroup = new THREE.Group(); // static town / interior geometry
|
||||
actorGroup = new THREE.Group(); // avatars
|
||||
fxGroup = new THREE.Group(); // weather particles etc.
|
||||
private sunBase = { intensity: 2.6 };
|
||||
|
||||
constructor(canvas: HTMLCanvasElement) {
|
||||
this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, powerPreference: 'high-performance', preserveDrawingBuffer: true });
|
||||
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
||||
this.renderer.shadowMap.enabled = true;
|
||||
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
this.renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
||||
this.renderer.toneMappingExposure = 1.05;
|
||||
|
||||
this.scene = new THREE.Scene();
|
||||
this.scene.background = DAY_SKY.clone();
|
||||
this.scene.fog = new THREE.Fog(DAY_SKY.clone(), 70, 190);
|
||||
|
||||
this.camera = new THREE.PerspectiveCamera(52, 1, 0.1, 400);
|
||||
|
||||
this.hemi = new THREE.HemisphereLight(0xcfe8ff, 0x8a9a6a, 0.85);
|
||||
this.scene.add(this.hemi);
|
||||
this.ambient = new THREE.AmbientLight(0xffffff, 0.12);
|
||||
this.scene.add(this.ambient);
|
||||
|
||||
this.sun = new THREE.DirectionalLight(0xfff2dd, this.sunBase.intensity);
|
||||
this.sun.castShadow = true;
|
||||
this.sun.shadow.mapSize.set(2048, 2048);
|
||||
const c = this.sun.shadow.camera as THREE.OrthographicCamera;
|
||||
c.left = -75; c.right = 75; c.top = 75; c.bottom = -75; c.near = 10; c.far = 260;
|
||||
this.sun.shadow.bias = -0.0004;
|
||||
this.scene.add(this.sun);
|
||||
this.scene.add(this.sun.target);
|
||||
|
||||
this.moonFill = new THREE.DirectionalLight(0x8fa8ff, 0.0);
|
||||
this.moonFill.position.set(-40, 60, -30);
|
||||
this.scene.add(this.moonFill);
|
||||
|
||||
this.scene.add(this.worldGroup, this.actorGroup, this.fxGroup);
|
||||
window.addEventListener('resize', () => this.resize());
|
||||
this.resize();
|
||||
}
|
||||
|
||||
resize() {
|
||||
const w = window.innerWidth, h = window.innerHeight;
|
||||
this.renderer.setSize(w, h, false);
|
||||
this.camera.aspect = w / h;
|
||||
this.camera.updateProjectionMatrix();
|
||||
}
|
||||
|
||||
// minutes 0..1440 ; drives sky colour, sun position/intensity, fog
|
||||
setTimeOfDay(minutes: number, weather: string) {
|
||||
const t = minutes / 60;
|
||||
// sun path: rises 6h, sets 20h
|
||||
const dayK = Math.max(0, Math.sin(((t - 6) / 14) * Math.PI)); // 0..1 daylight factor
|
||||
const azimuth = ((t - 6) / 14) * Math.PI; // 0..π across the sky
|
||||
const sx = Math.cos(azimuth) * 90;
|
||||
const sy = Math.max(4, Math.sin(azimuth) * 110 + 6);
|
||||
this.sun.position.set(sx, sy, 38);
|
||||
this.sun.target.position.set(0, 0, 0);
|
||||
|
||||
// sky colour blend: night -> dawn/dusk -> day
|
||||
const sky = new THREE.Color();
|
||||
if (t < 5 || t > 21.5) sky.copy(NIGHT_SKY);
|
||||
else if (t < 7.5) sky.copy(NIGHT_SKY).lerp(DAWN_SKY, (t - 5) / 2.5);
|
||||
else if (t < 9) sky.copy(DAWN_SKY).lerp(DAY_SKY, (t - 7.5) / 1.5);
|
||||
else if (t < 17.5) sky.copy(DAY_SKY);
|
||||
else if (t < 19.5) sky.copy(DAY_SKY).lerp(DUSK_SKY, (t - 17.5) / 2);
|
||||
else sky.copy(DUSK_SKY).lerp(NIGHT_SKY, (t - 19.5) / 2);
|
||||
|
||||
if (weather === 'rain' || weather === 'storm') sky.lerp(RAIN_TINT, weather === 'storm' ? 0.62 : 0.45);
|
||||
else if (weather === 'cloudy') sky.lerp(new THREE.Color(0x9aa4b8), 0.35);
|
||||
else if (weather === 'fog') sky.lerp(new THREE.Color(0xb9c3cf), 0.55);
|
||||
|
||||
(this.scene.background as THREE.Color).copy(sky);
|
||||
(this.scene.fog as THREE.Fog).color.copy(sky);
|
||||
(this.scene.fog as THREE.Fog).near = weather === 'fog' ? 18 : 60;
|
||||
(this.scene.fog as THREE.Fog).far = weather === 'fog' ? 80 : weather === 'storm' ? 130 : 200;
|
||||
|
||||
const stormDim = weather === 'storm' ? 0.42 : weather === 'rain' ? 0.6 : weather === 'cloudy' ? 0.72 : weather === 'fog' ? 0.68 : 1;
|
||||
this.sun.intensity = this.sunBase.intensity * dayK * stormDim;
|
||||
this.sun.color.setHSL(0.09, 0.5, 0.5 + 0.5 * dayK); // warmer when low
|
||||
this.hemi.intensity = 0.22 + 0.66 * dayK * stormDim;
|
||||
this.hemi.color.copy(sky).lerp(new THREE.Color(0xffffff), 0.35);
|
||||
this.moonFill.intensity = (1 - dayK) * 0.28;
|
||||
this.renderer.toneMappingExposure = 1.02 + 0.1 * dayK;
|
||||
}
|
||||
|
||||
render() { this.renderer.render(this.scene, this.camera); }
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
// LifeTown Online — procedural furniture models for the catalogue.
|
||||
// Every item is built from clean rounded primitives in a warm palette.
|
||||
import * as THREE from 'three';
|
||||
import { CATALOG_BY_ID } from '../../../shared/data.mjs';
|
||||
|
||||
function mat(color: number | string, rough = 0.85, metal = 0) {
|
||||
return new THREE.MeshStandardMaterial({ color, roughness: rough, metalness: metal });
|
||||
}
|
||||
function box(w: number, h: number, d: number, m: THREE.Material, x = 0, y = 0, z = 0) {
|
||||
const mesh = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), m);
|
||||
mesh.position.set(x, y, z);
|
||||
mesh.castShadow = true; mesh.receiveShadow = true;
|
||||
return mesh;
|
||||
}
|
||||
function cyl(rt: number, rb: number, h: number, m: THREE.Material, x = 0, y = 0, z = 0, seg = 14) {
|
||||
const mesh = new THREE.Mesh(new THREE.CylinderGeometry(rt, rb, h, seg), m);
|
||||
mesh.position.set(x, y, z);
|
||||
mesh.castShadow = true;
|
||||
return mesh;
|
||||
}
|
||||
const WOOD = [0x9a6b43, 0xb98a5a, 0x7a5236];
|
||||
const FABRIC = [0xe8875f, 0x67b56a, 0x8fb7d9, 0xd9c9a8, 0xb58fd9];
|
||||
|
||||
export function buildFurniture(itemId: string): THREE.Group {
|
||||
const def = CATALOG_BY_ID[itemId] || { cat: 'decor', id: itemId };
|
||||
const g = new THREE.Group();
|
||||
const seedNum = [...itemId].reduce((a, c) => a + c.charCodeAt(0), 0);
|
||||
const wood = WOOD[seedNum % WOOD.length];
|
||||
const fabric = FABRIC[seedNum % FABRIC.length];
|
||||
|
||||
switch (def.cat) {
|
||||
case 'bed': {
|
||||
g.add(box(2, 0.32, def.d ?? 3, mat(wood), 0, 0.26));
|
||||
g.add(box(1.86, 0.22, (def.d ?? 3) - 0.3, mat('#fdf6ec', .95), 0, 0.52));
|
||||
g.add(box(1.86, 0.14, (def.d ?? 3) * 0.55, mat(fabric, .95), 0, 0.62, -0.45));
|
||||
g.add(box(1.2, 0.16, 0.42, mat('#ffffff', .95), 0, 0.66, (def.d ?? 3) / 2 - 0.5));
|
||||
if ((def.d ?? 3) > 2.4) g.add(box(1.1, 0.16, 0.42, mat('#ffffff', .95), 0.35, 0.66, (def.d ?? 3) / 2 - 0.5));
|
||||
g.add(box(2, 0.9, 0.18, mat(wood), 0, 0.65, -(def.d ?? 3) / 2));
|
||||
break;
|
||||
}
|
||||
case 'sofa': {
|
||||
const w = def.w ?? 3;
|
||||
g.add(box(w, 0.42, 1.3, mat(fabric, .95), 0, 0.34));
|
||||
g.add(box(w, 0.62, 0.28, mat(fabric, .95), 0, 0.78, -0.51));
|
||||
for (const s of [-1, 1]) g.add(box(0.26, 0.62, 1.3, mat(fabric, .95), s * (w / 2 - 0.13), 0.62));
|
||||
const cush = Math.max(2, Math.round(w / 1.1));
|
||||
for (let i = 0; i < cush; i++) {
|
||||
g.add(box(w / cush - 0.12, 0.16, 1.05, mat(i % 2 ? '#ffffff' : '#fff2e0', .95), -w / 2 + (i + 0.5) * (w / cush), 0.62, 0.08));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'table': {
|
||||
if (itemId === 'table_desk') {
|
||||
g.add(box(def.w ?? 2, 0.09, def.d ?? 1, mat(wood), 0, 0.76));
|
||||
for (const sx of [-1, 1]) for (const sz of [-1, 1])
|
||||
g.add(box(0.09, 0.76, 0.09, mat(0x4a4f5a, .6, .3), sx * ((def.w ?? 2) / 2 - 0.1), 0.38, sz * ((def.d ?? 1) / 2 - 0.1)));
|
||||
} else if (itemId === 'counter_kitchen') {
|
||||
g.add(box(def.w ?? 1.8, 0.88, def.d ?? 0.9, mat('#e8e2d4', .9)));
|
||||
g.add(box((def.w ?? 1.8) + 0.06, 0.06, (def.d ?? 0.9) + 0.06, mat(wood), 0, 0.91));
|
||||
g.add(box((def.w ?? 1.8) - 0.2, 0.55, 0.03, mat('#cfc8bb', .85), 0, 0.44, (def.d ?? 0.9) / 2));
|
||||
} else {
|
||||
const r = itemId === 'table_coffee' ? 0.7 : 1;
|
||||
g.add(cyl(r * 0.9, r * 0.9, 0.07, mat(wood), 0, itemId === 'table_coffee' ? 0.42 : 0.74, 0, 20));
|
||||
g.add(cyl(0.09, 0.13, itemId === 'table_coffee' ? 0.42 : 0.72, mat(0x4a4f5a, .6, .3), 0, (itemId === 'table_coffee' ? 0.42 : 0.72) / 2, 0, 10));
|
||||
g.add(cyl(r * 0.55, r * 0.62, 0.05, mat(0x4a4f5a, .6, .3), 0, 0.03, 0, 16));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'chair': {
|
||||
if (itemId === 'chair_office') {
|
||||
g.add(cyl(0.28, 0.32, 0.06, mat(0x22252e, .8), 0, 0.05, 0, 16));
|
||||
g.add(cyl(0.05, 0.05, 0.36, mat(0x4a4f5a, .5, .5), 0, 0.25, 0, 8));
|
||||
g.add(box(0.52, 0.1, 0.5, mat(0x35405c, .9), 0, 0.46));
|
||||
g.add(box(0.5, 0.56, 0.1, mat(0x35405c, .9), 0, 0.78, -0.22));
|
||||
} else if (itemId === 'stool') {
|
||||
g.add(cyl(0.24, 0.28, 0.07, mat(wood), 0, 0.5, 0, 12));
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const leg = cyl(0.03, 0.04, 0.5, mat(wood), Math.cos(i * 2.1) * 0.15, 0.25, Math.sin(i * 2.1) * 0.15, 8);
|
||||
leg.rotation.z = Math.cos(i * 2.1) * 0.15; leg.rotation.x = -Math.sin(i * 2.1) * 0.15;
|
||||
g.add(leg);
|
||||
}
|
||||
} else {
|
||||
g.add(box(0.46, 0.07, 0.46, mat(wood), 0, 0.48));
|
||||
g.add(box(0.46, 0.5, 0.06, mat(wood), 0, 0.75, -0.2));
|
||||
for (const sx of [-1, 1]) for (const sz of [-1, 1])
|
||||
g.add(box(0.05, 0.48, 0.05, mat(wood), sx * 0.19, 0.24, sz * 0.19));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'tv': {
|
||||
const w = def.w ?? 1.6;
|
||||
g.add(box(w, w * 0.58, 0.07, mat('#10131c', .35), 0, (w * 0.58) / 2 + 0.35));
|
||||
const screen = new THREE.Mesh(new THREE.PlaneGeometry(w - 0.1, w * 0.58 - 0.1),
|
||||
new THREE.MeshStandardMaterial({ color: 0x27406b, emissive: 0x3d6ea8, emissiveIntensity: 0.7 }));
|
||||
screen.position.set(0, (w * 0.58) / 2 + 0.35, 0.045);
|
||||
g.add(screen);
|
||||
g.add(box(0.5, 0.05, 0.3, mat(0x22252e, .6), 0, 0.02));
|
||||
g.add(box(0.08, 0.35, 0.08, mat(0x22252e, .6), 0, 0.18));
|
||||
break;
|
||||
}
|
||||
case 'pc': {
|
||||
g.add(box(1.5, 0.06, 0.7, mat(wood), 0, 0.74));
|
||||
for (const sx of [-1, 1]) g.add(box(0.07, 0.74, 0.55, mat(0x4a4f5a, .6, .3), sx * 0.68, 0.37));
|
||||
const mon = box(0.95, 0.55, 0.05, mat('#10131c', .35), 0.1, 1.15);
|
||||
g.add(mon);
|
||||
const scr = new THREE.Mesh(new THREE.PlaneGeometry(0.85, 0.45),
|
||||
new THREE.MeshStandardMaterial({ color: 0x1e3a5f, emissive: 0x4fa0d9, emissiveIntensity: 0.8 }));
|
||||
scr.position.set(0.1, 1.15, 0.03); g.add(scr);
|
||||
g.add(box(0.42, 0.03, 0.16, mat('#e8e8ee', .8), 0.1, 0.79, 0.18)); // keyboard
|
||||
g.add(box(0.2, 0.38, 0.45, mat('#22252e', .7), -0.55, 0.96)); // tower
|
||||
break;
|
||||
}
|
||||
case 'fridge': {
|
||||
const h = itemId === 'fridge_dual' ? 2.0 : 1.75;
|
||||
g.add(box(def.w ?? 1.2, h, 1, mat(itemId === 'fridge_retro' ? '#9fd8c9' : '#dfe3ea', .55, .1), 0, h / 2));
|
||||
g.add(box((def.w ?? 1.2) + 0.02, 0.03, 1.02, mat('#aab2bd', .5), 0, h * 0.62));
|
||||
g.add(box(0.05, 0.5, 0.06, mat('#7a8494', .4, .6), (def.w ?? 1.2) / 2 - 0.12, h * 0.68, 0.53));
|
||||
break;
|
||||
}
|
||||
case 'stove': {
|
||||
g.add(box(def.w ?? 1.2, 0.92, 0.9, mat('#dfe3ea', .6, .1)));
|
||||
g.add(box((def.w ?? 1.2) - 0.16, 0.5, 0.04, mat('#4a5060', .5, .2), 0, 0.42, 0.47));
|
||||
for (const bx of [-0.28, 0.28]) g.add(cyl(0.14, 0.14, 0.03, mat('#22252e', .8), bx, 0.94, 0, 12));
|
||||
break;
|
||||
}
|
||||
case 'shower': {
|
||||
if (itemId === 'bath_tub') {
|
||||
g.add(box(1.8, 0.55, 1, mat('#f2f4f8', .5), 0, 0.28));
|
||||
g.add(box(1.5, 0.1, 0.7, mat('#8fd0e8', .3), 0, 0.5));
|
||||
g.add(cyl(0.03, 0.03, 0.9, mat('#aab2bd', .4, .6), -0.75, 1.1, -0.3, 8));
|
||||
g.add(box(0.16, 0.05, 0.16, mat('#aab2bd', .4, .6), -0.62, 1.5, -0.3));
|
||||
} else {
|
||||
g.add(box(1.2, 0.12, 1.2, mat('#f2f4f8', .5), 0, 0.06));
|
||||
g.add(box(1.2, 2, 0.05, mat('#bcd9e8', .15, .1), 0, 1.06, -0.57));
|
||||
g.add(box(0.05, 2, 1.2, mat('#bcd9e8', .15, .1), -0.57, 1.06));
|
||||
g.add(cyl(0.02, 0.02, 1.4, mat('#aab2bd', .4, .6), 0.45, 1.7, -0.45, 8));
|
||||
g.add(cyl(0.12, 0.02, 0.06, mat('#aab2bd', .4, .6), 0.45, 1.0, -0.3, 10));
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'toilet': {
|
||||
g.add(cyl(0.26, 0.22, 0.4, mat('#f2f4f8', .45), 0, 0.2, 0.05, 16));
|
||||
g.add(cyl(0.29, 0.29, 0.06, mat('#ffffff', .4), 0, 0.43, 0.05, 16));
|
||||
g.add(box(0.44, 0.5, 0.2, mat('#f2f4f8', .45), 0, 0.5, -0.24));
|
||||
break;
|
||||
}
|
||||
case 'sink': {
|
||||
g.add(cyl(0.09, 0.13, 0.72, mat('#f2f4f8', .5), 0, 0.36, 0, 12));
|
||||
g.add(cyl(0.3, 0.24, 0.16, mat('#ffffff', .4), 0, 0.8, 0, 16));
|
||||
g.add(cyl(0.02, 0.02, 0.24, mat('#aab2bd', .4, .6), 0, 0.95, -0.1, 8));
|
||||
break;
|
||||
}
|
||||
case 'wardrobe': {
|
||||
const w = def.w ?? 1.6, h = 2.05;
|
||||
g.add(box(w, h, def.d ?? 0.8, mat(wood), 0, h / 2));
|
||||
g.add(box(w / 2 - 0.04, h - 0.2, 0.03, mat(wood + 0x111111), -w / 4, h / 2, (def.d ?? 0.8) / 2 + 0.01));
|
||||
g.add(box(w / 2 - 0.04, h - 0.2, 0.03, mat(wood), w / 4, h / 2, (def.d ?? 0.8) / 2 + 0.01));
|
||||
g.add(cyl(0.015, 0.015, 0.22, mat('#d9c07a', .3, .7), -0.06, h / 2, (def.d ?? 0.8) / 2 + 0.04, 8));
|
||||
g.add(cyl(0.015, 0.015, 0.22, mat('#d9c07a', .3, .7), 0.06, h / 2, (def.d ?? 0.8) / 2 + 0.04, 8));
|
||||
break;
|
||||
}
|
||||
case 'shelf': {
|
||||
const w = def.w ?? 1.6;
|
||||
g.add(box(w, 1.8, 0.06, mat(0x4a4038), 0, 0.9, -0.22));
|
||||
for (let i = 0; i < 4; i++) g.add(box(w, 0.05, 0.44, mat(wood), 0, 0.3 + i * 0.45));
|
||||
// books
|
||||
let bx = -w / 2 + 0.12;
|
||||
let shelf = 0;
|
||||
while (shelf < 3 && bx < w / 2 - 0.1) {
|
||||
const bw = 0.05 + (seedNum % 3) * 0.012;
|
||||
g.add(box(bw, 0.26, 0.3, mat([0xef6f91, 0x5f86e8, 0x67b56a, 0xffcf6b][(seedNum + bx * 97 | 0) % 4], .9), bx, 0.45 + shelf * 0.45));
|
||||
bx += bw + 0.02;
|
||||
if (bx > w / 2 - 0.15) { bx = -w / 2 + 0.12; shelf++; }
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'plant': {
|
||||
const potM = mat(itemId === 'plant_cactus' ? '#e0793f' : '#c96f4a', .9);
|
||||
if (itemId === 'plant_tree') {
|
||||
g.add(cyl(0.16, 0.2, 0.4, potM, 0, 0.2, 0, 12));
|
||||
g.add(cyl(0.06, 0.08, 0.8, mat(0x7a5236), 0, 0.75, 0, 8));
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const lf = new THREE.Mesh(new THREE.SphereGeometry(0.34 - i * 0.06, 10, 8), mat(0x5ea75e, .95));
|
||||
lf.position.set(0, 1.25 + i * 0.28, 0); lf.castShadow = true; g.add(lf);
|
||||
}
|
||||
} else if (itemId === 'plant_cactus') {
|
||||
g.add(cyl(0.14, 0.17, 0.24, potM, 0, 0.12, 0, 12));
|
||||
g.add(cyl(0.09, 0.11, 0.5, mat(0x4f9850, .95), 0, 0.48, 0, 10));
|
||||
const arm = cyl(0.05, 0.06, 0.24, mat(0x4f9850, .95), 0.16, 0.5, 0, 8);
|
||||
arm.rotation.z = -1.1;
|
||||
g.add(arm);
|
||||
} else {
|
||||
g.add(cyl(0.15, 0.19, 0.28, potM, 0, 0.14, 0, 12));
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const leaf = new THREE.Mesh(new THREE.SphereGeometry(0.12, 8, 6), mat(0x5ea75e, .95));
|
||||
leaf.position.set(Math.cos(i) * 0.13, 0.34 + (i % 2) * 0.1, Math.sin(i) * 0.13);
|
||||
leaf.scale.set(1, 0.6, 1); leaf.castShadow = true; g.add(leaf);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'light': {
|
||||
const glowM = new THREE.MeshStandardMaterial({ color: 0xfff2cc, emissive: 0xffdf9e, emissiveIntensity: 1.4 });
|
||||
if (itemId === 'lamp_floor') {
|
||||
g.add(cyl(0.14, 0.18, 0.05, mat(0x33384a, .6), 0, 0.03, 0, 12));
|
||||
g.add(cyl(0.025, 0.025, 1.4, mat(0x33384a, .6), 0, 0.73, 0, 8));
|
||||
const shade = new THREE.Mesh(new THREE.ConeGeometry(0.22, 0.26, 12, 1, true), glowM);
|
||||
shade.position.y = 1.5; g.add(shade);
|
||||
} else if (itemId === 'lamp_arc') {
|
||||
g.add(cyl(0.16, 0.2, 0.05, mat(0x33384a, .6), 0, 0.03, 0, 12));
|
||||
const arc = new THREE.Mesh(new THREE.TorusGeometry(0.8, 0.03, 8, 20, Math.PI / 1.6), mat(0x33384a, .5, .5));
|
||||
arc.position.set(-0.4, 1.6, 0); arc.rotation.z = Math.PI / 2.6; g.add(arc);
|
||||
const bulb = new THREE.Mesh(new THREE.SphereGeometry(0.12, 10, 8), glowM);
|
||||
bulb.position.set(0.55, 1.85, 0); g.add(bulb);
|
||||
} else if (itemId === 'light_neon') {
|
||||
const tube = new THREE.Mesh(new THREE.CapsuleGeometry(0.045, 1.8, 4, 8),
|
||||
new THREE.MeshStandardMaterial({ color: 0xff7ab8, emissive: 0xff4f9e, emissiveIntensity: 2 }));
|
||||
tube.rotation.z = Math.PI / 2; tube.position.y = 0.1; g.add(tube);
|
||||
} else { // table lamp
|
||||
g.add(cyl(0.1, 0.13, 0.04, mat(wood), 0, 0.02, 0, 10));
|
||||
g.add(cyl(0.02, 0.02, 0.26, mat(0x33384a, .6), 0, 0.16, 0, 8));
|
||||
const shade = new THREE.Mesh(new THREE.ConeGeometry(0.16, 0.2, 12, 1, true), glowM);
|
||||
shade.position.y = 0.38; g.add(shade);
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'rug': {
|
||||
const rm = mat(fabric, 1);
|
||||
const r = itemId === 'rug_round'
|
||||
? new THREE.Mesh(new THREE.CircleGeometry(Math.min(def.w ?? 2.4, 2.4) / 2, 24), rm)
|
||||
: box(def.w ?? 2.4, 0.03, def.d ?? 1.4, rm);
|
||||
if (r.geometry.type === 'CircleGeometry') { r.rotation.x = -Math.PI / 2; r.position.y = 0.03; }
|
||||
else r.position.y = 0.02;
|
||||
r.receiveShadow = true;
|
||||
g.add(r);
|
||||
break;
|
||||
}
|
||||
case 'paint': {
|
||||
const frame = box(def.w ?? 1.2, (def.w ?? 1.2) * 0.8, 0.06, mat(wood), 0, 0.9, 0);
|
||||
g.add(frame);
|
||||
const c = document.createElement('canvas'); c.width = 128; c.height = 100;
|
||||
const ctx = c.getContext('2d')!;
|
||||
if (itemId === 'paint_meadow') {
|
||||
ctx.fillStyle = '#8ecdf2'; ctx.fillRect(0, 0, 128, 60);
|
||||
ctx.fillStyle = '#79b56a'; ctx.fillRect(0, 60, 128, 40);
|
||||
ctx.fillStyle = '#ffcf6b'; ctx.beginPath(); ctx.arc(96, 22, 12, 0, 7); ctx.fill();
|
||||
} else if (itemId === 'paint_abstract') {
|
||||
const cols = ['#ef6f91', '#5f86e8', '#ffcf6b', '#67b56a'];
|
||||
for (let i = 0; i < 12; i++) { ctx.fillStyle = cols[i % 4]; ctx.fillRect((i * 37) % 110, (i * 23) % 80, 22, 14); }
|
||||
} else {
|
||||
ctx.fillStyle = '#e8dcc8'; ctx.fillRect(0, 0, 128, 100);
|
||||
ctx.fillStyle = '#8a5a37'; ctx.beginPath(); ctx.arc(64, 42, 20, 0, 7); ctx.fill();
|
||||
ctx.fillRect(40, 62, 48, 38);
|
||||
}
|
||||
const tex = new THREE.CanvasTexture(c); tex.colorSpace = THREE.SRGBColorSpace;
|
||||
const art = new THREE.Mesh(new THREE.PlaneGeometry((def.w ?? 1.2) - 0.12, (def.w ?? 1.2) * 0.8 - 0.12),
|
||||
new THREE.MeshBasicMaterial({ map: tex }));
|
||||
art.position.set(0, 0.9, 0.04); g.add(art);
|
||||
break;
|
||||
}
|
||||
case 'elec': {
|
||||
if (itemId === 'console') {
|
||||
g.add(box(0.5, 0.12, 0.36, mat('#22252e', .6), 0, 0.06));
|
||||
g.add(box(0.14, 0.02, 0.02, mat('#4fd98a', .4), 0.1, 0.125, 0.1));
|
||||
} else if (itemId === 'speaker') {
|
||||
g.add(box(0.34, 0.55, 0.3, mat('#2b3040', .8), 0, 0.28));
|
||||
g.add(cyl(0.11, 0.11, 0.03, mat('#171a24', .9), 0, 0.2, 0.16, 12).rotateX(Math.PI / 2));
|
||||
} else if (itemId === 'microwave') {
|
||||
g.add(box(0.6, 0.36, 0.4, mat('#dfe3ea', .55, .1), 0, 0.18));
|
||||
g.add(box(0.42, 0.26, 0.02, mat('#3a3f4e', .5), -0.05, 0.18, 0.21));
|
||||
} else if (itemId === 'coffeemaker') {
|
||||
g.add(box(0.28, 0.4, 0.26, mat('#8a4a3a', .7), 0, 0.2));
|
||||
g.add(cyl(0.08, 0.06, 0.1, mat('#e8e8ee', .5), 0, 0.08, 0.1, 10));
|
||||
} else { // synth
|
||||
g.add(box(1.3, 0.12, 0.42, mat('#22252e', .7), 0, 0.72));
|
||||
g.add(box(1.2, 0.03, 0.14, mat('#f2f4f8', .6), 0, 0.79, 0.1));
|
||||
for (let i = 0; i < 8; i++) g.add(box(0.06, 0.02, 0.1, mat('#171a24', .6), -0.54 + i * 0.155, 0.81, 0.08));
|
||||
g.add(box(0.1, 0.5, 0.1, mat(wood), -0.5, 0.35, 0));
|
||||
g.add(box(0.1, 0.5, 0.1, mat(wood), 0.5, 0.35, 0));
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: { // decor
|
||||
if (itemId === 'decor_vase') {
|
||||
g.add(cyl(0.12, 0.16, 0.34, mat('#e0793f', .7), 0, 0.17, 0, 12));
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const fl = new THREE.Mesh(new THREE.SphereGeometry(0.05, 6, 5), mat([0xef6f91, 0xffcf6b, '#ffffff'][i], .8));
|
||||
fl.position.set(Math.cos(i * 2.1) * 0.07, 0.42, Math.sin(i * 2.1) * 0.07); g.add(fl);
|
||||
}
|
||||
} else if (itemId === 'decor_clock') {
|
||||
g.add(cyl(0.22, 0.22, 0.05, mat('#f2ead8', .8), 0, 1.2, 0, 20).rotateX(Math.PI / 2));
|
||||
g.add(box(0.02, 0.14, 0.01, mat('#333', .6), 0, 1.22, 0.035));
|
||||
g.add(box(0.1, 0.02, 0.01, mat('#333', .6), 0.03, 1.2, 0.035));
|
||||
} else if (itemId === 'decor_mirror') {
|
||||
g.add(box(0.8, 1.3, 0.05, mat(wood), 0, 1.1));
|
||||
const mir = new THREE.Mesh(new THREE.PlaneGeometry(0.66, 1.16),
|
||||
new THREE.MeshStandardMaterial({ color: 0xcfe4ee, roughness: 0.08, metalness: 0.7 }));
|
||||
mir.position.set(0, 1.1, 0.03); g.add(mir);
|
||||
} else if (itemId === 'decor_aquarium') {
|
||||
g.add(box(1.2, 0.5, 0.5, mat(wood), 0, 0.25));
|
||||
const waterBox = new THREE.Mesh(new THREE.BoxGeometry(1.1, 0.42, 0.42),
|
||||
new THREE.MeshStandardMaterial({ color: 0x6fc4e8, transparent: true, opacity: 0.55, roughness: .2 }));
|
||||
waterBox.position.y = 0.72; g.add(waterBox);
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const fish = new THREE.Mesh(new THREE.SphereGeometry(0.045, 6, 5), mat([0xef8a5f, 0xffcf6b, 0xef6f91][i], .7));
|
||||
fish.scale.set(1.5, 0.8, 0.6); fish.position.set(-0.3 + i * 0.3, 0.68 + i * 0.06, 0); g.add(fish);
|
||||
}
|
||||
} else if (itemId === 'guitar') {
|
||||
const bodyG = new THREE.Mesh(new THREE.CylinderGeometry(0.22, 0.26, 0.09, 16), mat(0xb0672f, .7));
|
||||
bodyG.rotation.x = Math.PI / 2; bodyG.position.set(0, 0.9, 0); bodyG.rotation.y = 0; g.add(bodyG);
|
||||
g.add(box(0.07, 0.7, 0.05, mat(0x6b4226, .8), 0, 1.35, 0));
|
||||
} else if (itemId === 'easel') {
|
||||
for (const lx of [-0.3, 0.3]) {
|
||||
const legg = box(0.05, 1.4, 0.05, mat(wood), lx, 0.7, 0);
|
||||
legg.rotation.z = lx > 0 ? -0.12 : 0.12; g.add(legg);
|
||||
}
|
||||
g.add(box(0.7, 0.55, 0.04, mat('#f2f4f8', .9), 0, 0.95, 0.06));
|
||||
g.add(box(0.4, 0.3, 0.01, mat('#79b56a', .9), 0, 0.95, 0.085));
|
||||
} else if (itemId === 'teddy') {
|
||||
const tm = mat('#c98a5b', .95);
|
||||
const bod = new THREE.Mesh(new THREE.SphereGeometry(0.16, 10, 8), tm); bod.position.y = 0.18; g.add(bod);
|
||||
const hed = new THREE.Mesh(new THREE.SphereGeometry(0.12, 10, 8), tm); hed.position.y = 0.38; g.add(hed);
|
||||
for (const ex of [-0.06, 0.06]) {
|
||||
const ear = new THREE.Mesh(new THREE.SphereGeometry(0.045, 8, 6), tm); ear.position.set(ex, 0.47, 0); g.add(ear);
|
||||
const eye = new THREE.Mesh(new THREE.SphereGeometry(0.014, 6, 5), mat('#171a24', .5)); eye.position.set(ex, 0.39, 0.1); g.add(eye);
|
||||
}
|
||||
} else {
|
||||
g.add(box(0.4, 0.4, 0.4, mat(fabric), 0, 0.2));
|
||||
}
|
||||
}
|
||||
}
|
||||
return g;
|
||||
}
|
||||
|
||||
/** Which need-fulfilling actions each furniture category supports. */
|
||||
export function categoryActions(cat: string): { id: string; label: string; emoji: string }[] {
|
||||
switch (cat) {
|
||||
case 'bed': return [{ id: 'sleep', label: 'Sleep', emoji: '😴' }];
|
||||
case 'shower': return [{ id: 'wash', label: 'Shower / Bathe', emoji: '🚿' }];
|
||||
case 'toilet': return [{ id: 'use_toilet', label: 'Use', emoji: '🚽' }];
|
||||
case 'sink': return [{ id: 'wash_hands', label: 'Freshen Up', emoji: '🧼' }];
|
||||
case 'tv': return [{ id: 'watch_tv', label: 'Watch TV', emoji: '📺' }];
|
||||
case 'pc': return [{ id: 'computer', label: 'Play on PC', emoji: '🖥️' }];
|
||||
case 'elec': return [{ id: 'play_games', label: 'Play Games', emoji: '🎮' }];
|
||||
case 'fridge': return [{ id: 'snack', label: 'Grab Snack', emoji: '🍎' }];
|
||||
case 'stove': return [{ id: 'cook', label: 'Cook Meal', emoji: '🍳' }];
|
||||
case 'shelf': return [{ id: 'read', label: 'Read Book', emoji: '📚' }];
|
||||
case 'sofa': return [{ id: 'lounge', label: 'Lounge', emoji: '🛋️' }];
|
||||
default: return [];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
// LifeTown Online — instanced home interiors + build-mode scaffolding.
|
||||
import * as THREE from 'three';
|
||||
import { HOUSES, CATALOG_BY_ID } from '../../../shared/data.mjs';
|
||||
import { buildFurniture, categoryActions } from './furniture';
|
||||
|
||||
export interface PlacedItem { itemId: string; x: number; z: number; rot: number }
|
||||
export interface FurnitureEntry { item: PlacedItem; group: THREE.Group; cat: string }
|
||||
|
||||
export class Interior {
|
||||
group = new THREE.Group();
|
||||
size: [number, number];
|
||||
tier: string;
|
||||
label = 'Your Home';
|
||||
furniture: FurnitureEntry[] = [];
|
||||
private grid: THREE.GridHelper | null = null;
|
||||
buildMode = false;
|
||||
onFurnitureChanged: (() => void) | null = null;
|
||||
|
||||
constructor(tierOrSize: string | [number, number]) {
|
||||
if (Array.isArray(tierOrSize)) {
|
||||
this.tier = 'venue';
|
||||
this.size = [tierOrSize[0], tierOrSize[1]];
|
||||
} else {
|
||||
const h = HOUSES.find(x => x.id === tierOrSize) || HOUSES[0];
|
||||
this.tier = h.id;
|
||||
this.size = [h.size[0], h.size[1]];
|
||||
}
|
||||
this.buildShell();
|
||||
this.setBuildMode(false);
|
||||
}
|
||||
|
||||
private buildShell() {
|
||||
const [w, d] = this.size;
|
||||
const floorM = new THREE.MeshStandardMaterial({ color: 0xd9c9a8, roughness: 0.85 });
|
||||
// two-tone wood planks
|
||||
const floor = new THREE.Mesh(new THREE.PlaneGeometry(w, d), floorM);
|
||||
floor.rotation.x = -Math.PI / 2; floor.receiveShadow = true;
|
||||
this.group.add(floor);
|
||||
for (let i = -Math.floor(d / 2); i < d / 2; i += 1.2) {
|
||||
const plank = new THREE.Mesh(new THREE.PlaneGeometry(w, 0.06), new THREE.MeshStandardMaterial({ color: 0xcbb894, roughness: .9 }));
|
||||
plank.rotation.x = -Math.PI / 2; plank.position.set(0, 0.006, i);
|
||||
this.group.add(plank);
|
||||
}
|
||||
|
||||
const wallH = 3;
|
||||
const wallM = new THREE.MeshStandardMaterial({ color: 0xf2e8d8, roughness: 0.95 });
|
||||
const accentM = new THREE.MeshStandardMaterial({ color: 0xefd3b8, roughness: 0.95 });
|
||||
// back wall (z-) with windows
|
||||
const back = new THREE.Mesh(new THREE.PlaneGeometry(w, wallH), accentM);
|
||||
back.position.set(0, wallH / 2, -d / 2); back.receiveShadow = true;
|
||||
this.group.add(back);
|
||||
// front wall (z+) with door gap
|
||||
const doorW = 1.6;
|
||||
const segW = (w - doorW) / 2;
|
||||
for (const sx of [-1, 1]) {
|
||||
const seg = new THREE.Mesh(new THREE.PlaneGeometry(segW, wallH), wallM);
|
||||
seg.position.set(sx * (doorW / 2 + segW / 2), wallH / 2, d / 2);
|
||||
seg.rotation.y = Math.PI; seg.receiveShadow = true;
|
||||
this.group.add(seg);
|
||||
}
|
||||
const header = new THREE.Mesh(new THREE.PlaneGeometry(doorW, wallH - 2.4), wallM);
|
||||
header.position.set(0, 2.4 + (wallH - 2.4) / 2, d / 2);
|
||||
header.rotation.y = Math.PI;
|
||||
this.group.add(header);
|
||||
const doorFrame = new THREE.Mesh(new THREE.BoxGeometry(doorW + 0.24, 2.5, 0.14),
|
||||
new THREE.MeshStandardMaterial({ color: 0x8a6f56, roughness: .85 }));
|
||||
doorFrame.position.set(0, 1.25, d / 2 + 0.02);
|
||||
this.group.add(doorFrame);
|
||||
const mat0 = new THREE.Mesh(new THREE.PlaneGeometry(1.4, 0.7), new THREE.MeshStandardMaterial({ color: 0xb0574a, roughness: 1 }));
|
||||
mat0.rotation.x = -Math.PI / 2; mat0.position.set(0, 0.01, d / 2 + 0.55);
|
||||
this.group.add(mat0);
|
||||
// side walls
|
||||
for (const sx of [-1, 1]) {
|
||||
const side = new THREE.Mesh(new THREE.PlaneGeometry(d, wallH), wallM);
|
||||
side.position.set(sx * w / 2, wallH / 2, 0); side.rotation.y = -sx * Math.PI / 2;
|
||||
side.receiveShadow = true;
|
||||
this.group.add(side);
|
||||
}
|
||||
// windows on back wall
|
||||
const winY = 1.6;
|
||||
const nWin = Math.max(1, Math.floor(w / 5));
|
||||
for (let i = 0; i < nWin; i++) {
|
||||
const wx = -w / 2 + (i + 0.5) * (w / nWin);
|
||||
const skyM = new THREE.MeshStandardMaterial({ color: 0xbfe3ff, emissive: 0x9fd0f2, emissiveIntensity: 0.35 });
|
||||
const win = new THREE.Mesh(new THREE.PlaneGeometry(1.7, 1.25), skyM);
|
||||
win.position.set(wx, winY, -d / 2 + 0.02);
|
||||
this.group.add(win);
|
||||
const frame = new THREE.Mesh(new THREE.BoxGeometry(1.86, 1.4, 0.08),
|
||||
new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: .8 }));
|
||||
frame.position.set(wx, winY, -d / 2 - 0.01);
|
||||
this.group.add(frame);
|
||||
}
|
||||
// ceiling (visible only from below)
|
||||
const ceil = new THREE.Mesh(new THREE.PlaneGeometry(w, d), new THREE.MeshStandardMaterial({ color: 0xfffaf0, roughness: 1 }));
|
||||
ceil.rotation.x = Math.PI / 2; ceil.position.y = wallH;
|
||||
this.group.add(ceil);
|
||||
// ceiling lamp
|
||||
const bulb = new THREE.Mesh(new THREE.SphereGeometry(0.12, 10, 8),
|
||||
new THREE.MeshStandardMaterial({ color: 0xfff2cc, emissive: 0xffe9b0, emissiveIntensity: 1.6 }));
|
||||
bulb.position.y = wallH - 0.35;
|
||||
this.group.add(bulb);
|
||||
this.group.add((() => {
|
||||
const wire = new THREE.Mesh(new THREE.CylinderGeometry(0.008, 0.008, 0.3, 6), new THREE.MeshBasicMaterial({ color: 0x333333 }));
|
||||
wire.position.y = wallH - 0.15; return wire;
|
||||
})());
|
||||
}
|
||||
|
||||
setBuildMode(on: boolean) {
|
||||
this.buildMode = on;
|
||||
if (on && !this.grid) {
|
||||
this.grid = new THREE.GridHelper(Math.max(this.size[0], this.size[1]), Math.max(this.size[0], this.size[1]), 0x35c4b5, 0x88a8a0);
|
||||
(this.grid.material as any).opacity = 0.18;
|
||||
(this.grid.material as any).transparent = true;
|
||||
this.grid.position.y = 0.02;
|
||||
this.group.add(this.grid);
|
||||
}
|
||||
if (this.grid) this.grid.visible = on;
|
||||
}
|
||||
|
||||
snap = 0.5;
|
||||
|
||||
setLayout(layout: PlacedItem[]) {
|
||||
// clear old
|
||||
for (const f of this.furniture) {
|
||||
this.group.remove(f.group);
|
||||
f.group.traverse((o: any) => { o.geometry?.dispose?.(); });
|
||||
}
|
||||
this.furniture = [];
|
||||
for (const item of layout || []) {
|
||||
const def = CATALOG_BY_ID[item.itemId];
|
||||
if (!def) continue;
|
||||
const g = buildFurniture(item.itemId);
|
||||
let x = item.x, z = item.z;
|
||||
if (this.buildMode) { x = Math.round(x / this.snap) * this.snap; z = Math.round(z / this.snap) * this.snap; }
|
||||
g.position.set(x, 0, z);
|
||||
g.rotation.y = item.rot || 0;
|
||||
this.group.add(g);
|
||||
this.furniture.push({ item, group: g, cat: def.cat });
|
||||
}
|
||||
this.onFurnitureChanged?.();
|
||||
}
|
||||
|
||||
addFurniture(item: PlacedItem): FurnitureEntry | null {
|
||||
const def = CATALOG_BY_ID[item.itemId];
|
||||
if (!def) return null;
|
||||
const g = buildFurniture(item.itemId);
|
||||
g.position.set(item.x, 0, item.z);
|
||||
g.rotation.y = item.rot || 0;
|
||||
this.group.add(g);
|
||||
const entry: FurnitureEntry = { item, group: g, cat: def.cat };
|
||||
this.furniture.push(entry);
|
||||
this.onFurnitureChanged?.();
|
||||
return entry;
|
||||
}
|
||||
|
||||
removeEntry(entry: FurnitureEntry) {
|
||||
const i = this.furniture.indexOf(entry);
|
||||
if (i !== -1) this.furniture.splice(i, 1);
|
||||
this.group.remove(entry.group);
|
||||
this.onFurnitureChanged?.();
|
||||
}
|
||||
|
||||
bounds() { return { hw: this.size[0] / 2 - 0.4, hd: this.size[1] / 2 - 0.4 }; }
|
||||
}
|
||||
|
||||
export function furnitureActions(cat: string) { return categoryActions(cat); }
|
||||
@@ -0,0 +1,369 @@
|
||||
// LifeTown Online — procedural "Maple Court" district (original world design).
|
||||
import * as THREE from 'three';
|
||||
import { BUILDINGS, POIS } from '../../../shared/data.mjs';
|
||||
|
||||
function mat(color: number | string, rough = 0.9, metal = 0) {
|
||||
return new THREE.MeshStandardMaterial({ color, roughness: rough, metalness: metal });
|
||||
}
|
||||
|
||||
function textTexture(text: string, bg = '#f7ead2', fg = '#5a4632') {
|
||||
const c = document.createElement('canvas');
|
||||
c.width = 512; c.height = 128;
|
||||
const g = c.getContext('2d')!;
|
||||
g.fillStyle = bg; g.fillRect(0, 0, c.width, c.height);
|
||||
g.strokeStyle = fg; g.lineWidth = 10; g.strokeRect(8, 8, c.width - 16, c.height - 16);
|
||||
g.fillStyle = fg; g.font = '900 72px Nunito, Arial'; g.textAlign = 'center'; g.textBaseline = 'middle';
|
||||
g.fillText(text, c.width / 2, c.height / 2 + 4);
|
||||
const t = new THREE.CanvasTexture(c);
|
||||
t.colorSpace = THREE.SRGBColorSpace;
|
||||
return t;
|
||||
}
|
||||
|
||||
export interface Collider { x: number; z: number; hw: number; hd: number }
|
||||
|
||||
export class Town {
|
||||
group = new THREE.Group();
|
||||
colliders: Collider[] = [];
|
||||
private windowMat = mat('#dff1ff', .4);
|
||||
private lampHeadMat = mat('#fff6da', .5);
|
||||
private lampGlows: THREE.Sprite[] = [];
|
||||
private waterMats: THREE.MeshStandardMaterial[] = [];
|
||||
poiRings = new Map<string, THREE.Mesh>();
|
||||
private pulseT = 0;
|
||||
|
||||
constructor() {
|
||||
this.windowMat.emissive = new THREE.Color(0xffdf9e);
|
||||
this.lampHeadMat.emissive = new THREE.Color(0xffe9b0);
|
||||
this.ground();
|
||||
this.roads();
|
||||
this.buildings();
|
||||
this.plaza();
|
||||
this.park();
|
||||
this.streetFurniture();
|
||||
this.poiMarkers();
|
||||
}
|
||||
|
||||
// ---------- layers ----------
|
||||
private ground() {
|
||||
const g = new THREE.Mesh(new THREE.PlaneGeometry(320, 240), mat(0x88c07a, 1));
|
||||
g.rotation.x = -Math.PI / 2; g.receiveShadow = true;
|
||||
this.group.add(g);
|
||||
// subtle grass tone patches
|
||||
for (let i = 0; i < 26; i++) {
|
||||
const p = new THREE.Mesh(new THREE.CircleGeometry(3 + Math.random() * 5, 12), mat(0x7db56f, 1));
|
||||
p.rotation.x = -Math.PI / 2;
|
||||
p.position.set((Math.random() - .5) * 220, 0.01, (Math.random() - .5) * 160);
|
||||
p.receiveShadow = true;
|
||||
this.group.add(p);
|
||||
}
|
||||
}
|
||||
|
||||
private roads() {
|
||||
const road = new THREE.Mesh(new THREE.PlaneGeometry(170, 8), mat(0x4a4f5a, 1));
|
||||
road.rotation.x = -Math.PI / 2; road.position.set(0, 0.02, 0); road.receiveShadow = true;
|
||||
this.group.add(road);
|
||||
// centre dashes
|
||||
const dashM = mat(0xf2e394, 1);
|
||||
for (let x = -80; x <= 80; x += 6) {
|
||||
const d = new THREE.Mesh(new THREE.PlaneGeometry(2.4, 0.28), dashM);
|
||||
d.rotation.x = -Math.PI / 2; d.position.set(x, 0.03, 0);
|
||||
this.group.add(d);
|
||||
}
|
||||
// sidewalks north & south
|
||||
for (const z of [5.4, -5.4]) {
|
||||
const sw = new THREE.Mesh(new THREE.BoxGeometry(170, 0.14, 2.6), mat(0xcfc8bb, 1));
|
||||
sw.position.set(0, 0.07, z); sw.receiveShadow = true; sw.castShadow = false;
|
||||
this.group.add(sw);
|
||||
}
|
||||
// plaza path to city hall + park path
|
||||
const pathM = mat(0xd8cfbf, 1);
|
||||
const mkPath = (x1: number, z1: number, x2: number, z2: number, w = 2.4) => {
|
||||
const dx = x2 - x1, dz = z2 - z1;
|
||||
const len = Math.hypot(dx, dz);
|
||||
const p = new THREE.Mesh(new THREE.PlaneGeometry(len, w), pathM);
|
||||
p.rotation.x = -Math.PI / 2;
|
||||
p.rotation.z = -Math.atan2(dz, dx);
|
||||
p.position.set((x1 + x2) / 2, 0.03, (z1 + z2) / 2);
|
||||
p.receiveShadow = true;
|
||||
this.group.add(p);
|
||||
};
|
||||
mkPath(0, -12, 0, -26); // spawn -> fountain
|
||||
mkPath(-48, -19, -20, -30); // cafe -> plaza
|
||||
mkPath(24, -20, 6, -30); // city hall -> plaza
|
||||
mkPath(54, -19, 42, -22, 2); // gym -> park
|
||||
mkPath(36, -26, 46, -38, 2); // park -> pond
|
||||
}
|
||||
|
||||
private buildings() {
|
||||
for (const b of BUILDINGS) {
|
||||
const grp = new THREE.Group();
|
||||
const body = new THREE.Mesh(new THREE.BoxGeometry(b.w, b.h ?? 8, b.d), mat(b.color));
|
||||
body.position.y = (b.h ?? 8) / 2;
|
||||
body.castShadow = true; body.receiveShadow = true;
|
||||
grp.add(body);
|
||||
|
||||
// roof slab + trim
|
||||
const roof = new THREE.Mesh(new THREE.BoxGeometry(b.w + 0.8, 0.7, b.d + 0.8), mat(b.roof));
|
||||
roof.position.y = (b.h ?? 8) + 0.35;
|
||||
roof.castShadow = true;
|
||||
grp.add(roof);
|
||||
|
||||
// windows facing the street (z<0 row faces +z toward road; z>0 row faces -z)
|
||||
const winRows = b.id === 'apt_a' || b.id === 'apt_b' ? 3 : 1;
|
||||
const cols = Math.max(2, Math.floor(b.w / 3.4));
|
||||
const frontK = b.z > 0 ? -1 : 1; // street-facing local direction
|
||||
for (let r = 0; r < winRows; r++) {
|
||||
for (let ci = 0; ci < cols; ci++) {
|
||||
const win = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(1.15, 1.35),
|
||||
this.windowMat
|
||||
);
|
||||
const px = -b.w / 2 + (ci + 0.5) * (b.w / cols);
|
||||
const py = 1.9 + r * 2.3;
|
||||
win.position.set(px, py, frontK * (b.d / 2 + 0.02));
|
||||
win.rotation.y = frontK > 0 ? 0 : Math.PI;
|
||||
grp.add(win);
|
||||
}
|
||||
}
|
||||
|
||||
// door on the street side + handle
|
||||
const door = new THREE.Mesh(new THREE.PlaneGeometry(1.5, 2.4), mat(0x7a5236, .8));
|
||||
const dz = frontK * (b.d / 2 + 0.03);
|
||||
door.position.set(0, 1.2, dz);
|
||||
door.rotation.y = frontK > 0 ? 0 : Math.PI;
|
||||
grp.add(door);
|
||||
const handle = new THREE.Mesh(new THREE.SphereGeometry(0.05, 8, 6), mat(0xd9c07a, .35, .6));
|
||||
handle.position.set(0.5, 1.15, dz + frontK * 0.04);
|
||||
grp.add(handle);
|
||||
// steps
|
||||
const step = new THREE.Mesh(new THREE.BoxGeometry(3, 0.24, 1.2), mat(0xbfb6a6, 1));
|
||||
step.position.set(0, 0.12, dz + frontK * 0.7);
|
||||
grp.add(step);
|
||||
|
||||
// hanging sign above the entrance
|
||||
const sign = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(Math.min(9, b.w * 0.62), 1.5),
|
||||
new THREE.MeshBasicMaterial({ map: textTexture(b.sign, '#fff4dd', '#4a3a28'), transparent: false })
|
||||
);
|
||||
sign.position.set(0, (b.h ?? 8) - 0.9, dz + frontK * 0.08);
|
||||
sign.rotation.y = frontK > 0 ? 0 : Math.PI;
|
||||
grp.add(sign);
|
||||
|
||||
grp.position.set(b.x, 0, b.z);
|
||||
this.group.add(grp);
|
||||
this.colliders.push({ x: b.x, z: b.z, hw: b.w / 2 + 0.3, hd: b.d / 2 + 0.3 });
|
||||
}
|
||||
}
|
||||
|
||||
private plaza() {
|
||||
const pave = new THREE.Mesh(new THREE.CylinderGeometry(14, 14, 0.12, 40), mat(0xe3d9c8, 1));
|
||||
pave.position.set(0, 0.06, -26); pave.receiveShadow = true;
|
||||
this.group.add(pave);
|
||||
|
||||
// fountain: tiers + water + centrepiece
|
||||
const stoneM = mat(0xc9b8a0, .95);
|
||||
const base = new THREE.Mesh(new THREE.CylinderGeometry(3.4, 3.7, 0.8, 24), stoneM);
|
||||
base.position.set(0, 0.5, -26); base.castShadow = true;
|
||||
this.group.add(base);
|
||||
const mid = new THREE.Mesh(new THREE.CylinderGeometry(1.7, 2.1, 0.7, 20), stoneM);
|
||||
mid.position.set(0, 1.15, -26); mid.castShadow = true;
|
||||
this.group.add(mid);
|
||||
const top = new THREE.Mesh(new THREE.CylinderGeometry(0.5, 0.8, 1.1, 16), stoneM);
|
||||
top.position.set(0, 1.85, -26); top.castShadow = true;
|
||||
this.group.add(top);
|
||||
const orb = new THREE.Mesh(new THREE.SphereGeometry(0.45, 16, 12), mat(0x67c7d9, .35, .1));
|
||||
orb.position.set(0, 2.6, -26); orb.castShadow = true;
|
||||
this.group.add(orb);
|
||||
const water = new THREE.Mesh(new THREE.CircleGeometry(3.25, 26), mat(0x54b8d9, .25, .05));
|
||||
water.rotation.x = -Math.PI / 2; water.position.set(0, 0.86, -26);
|
||||
this.group.add(water);
|
||||
this.waterMats.push(water.material as THREE.MeshStandardMaterial);
|
||||
this.colliders.push({ x: 0, z: -26, hw: 3.9, hd: 3.9 });
|
||||
|
||||
// stage (west of plaza)
|
||||
const stage = new THREE.Mesh(new THREE.CylinderGeometry(4.6, 4.8, 0.55, 26), mat(0xa9744f, .9));
|
||||
stage.position.set(-18, 0.28, -34); stage.receiveShadow = true; stage.castShadow = true;
|
||||
this.group.add(stage);
|
||||
const back = new THREE.Mesh(new THREE.BoxGeometry(7, 3.4, 0.4), mat(0x8a63b8, .9));
|
||||
back.position.set(-18, 2, -37.4); back.castShadow = true;
|
||||
this.group.add(back);
|
||||
for (let i = 0; i < 2; i++) {
|
||||
const spot = new THREE.Mesh(new THREE.SphereGeometry(0.28, 10, 8), mat(0xfff2b0, .4));
|
||||
spot.material.emissive = new THREE.Color(0xffe9a0);
|
||||
spot.position.set(-18 - 2.4 + i * 4.8, 3.9, -37.2);
|
||||
this.group.add(spot);
|
||||
void spot;
|
||||
}
|
||||
this.colliders.push({ x: -18, z: -37.4, hw: 3.6, hd: 0.5 });
|
||||
}
|
||||
|
||||
private park() {
|
||||
const lawn = new THREE.Mesh(new THREE.PlaneGeometry(44, 40), mat(0x79b56a, 1));
|
||||
lawn.rotation.x = -Math.PI / 2; lawn.position.set(42, 0.04, -30); lawn.receiveShadow = true;
|
||||
this.group.add(lawn);
|
||||
// pond
|
||||
const pond = new THREE.Mesh(new THREE.CircleGeometry(6.4, 30), mat(0x4fa8cc, .25, .05));
|
||||
pond.rotation.x = -Math.PI / 2; pond.scale.x = 1.25; pond.position.set(46, 0.06, -40);
|
||||
this.group.add(pond);
|
||||
const rim = new THREE.Mesh(new THREE.TorusGeometry(6.6, 0.35, 10, 34), mat(0xcfc0a8, 1));
|
||||
rim.rotation.x = -Math.PI / 2; rim.scale.x = 1.25; rim.position.set(46, 0.1, -40);
|
||||
this.group.add(rim);
|
||||
this.waterMats.push(pond.material as THREE.MeshStandardMaterial);
|
||||
// ducks :)
|
||||
for (const [dx, dz] of [[-2, 1], [1.5, -1]]) {
|
||||
const duck = new THREE.Group();
|
||||
const bd = new THREE.Mesh(new THREE.SphereGeometry(0.18, 8, 6), mat(0xf7d749, .8));
|
||||
bd.scale.set(1.3, 1, 1); duck.add(bd);
|
||||
const hd = new THREE.Mesh(new THREE.SphereGeometry(0.11, 8, 6), mat(0xf7d749, .8));
|
||||
hd.position.set(0.2, 0.16, 0); duck.add(hd);
|
||||
const bk = new THREE.Mesh(new THREE.ConeGeometry(0.045, 0.12, 6), mat(0xe8873c, .8));
|
||||
bk.rotation.z = -Math.PI / 2; bk.position.set(0.33, 0.16, 0); duck.add(bk);
|
||||
duck.position.set(46 + dx, 0.18, -40 + dz);
|
||||
this.group.add(duck);
|
||||
}
|
||||
// trees
|
||||
for (let i = 0; i < 14; i++) {
|
||||
const a = (i / 14) * Math.PI * 2;
|
||||
const tx = 42 + Math.cos(a) * (13 + Math.random() * 6);
|
||||
const tz = -30 + Math.sin(a) * (13 + Math.random() * 5);
|
||||
this.tree(tx, tz);
|
||||
}
|
||||
// extra town trees along the street
|
||||
for (const x of [-60, -36, -12, 12, 36, 60]) { this.tree(x, 8.6); this.tree(x + 14, -8.6); }
|
||||
// flowers
|
||||
for (let i = 0; i < 30; i++) {
|
||||
const f = new THREE.Mesh(new THREE.SphereGeometry(0.14, 6, 5),
|
||||
mat([0xef6f91, 0xf7d749, 0xef8a5f, 0xc77fe0][i % 4], .8));
|
||||
f.position.set(42 + (Math.random() - .5) * 36, 0.14, -30 + (Math.random() - .5) * 32);
|
||||
this.group.add(f);
|
||||
}
|
||||
}
|
||||
|
||||
tree(x: number, z: number) {
|
||||
const g = new THREE.Group();
|
||||
const trunkH = 1.4 + Math.random() * 0.8;
|
||||
const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.16, 0.22, trunkH, 8), mat(0x7a5236, .95));
|
||||
trunk.position.y = trunkH / 2; trunk.castShadow = true;
|
||||
g.add(trunk);
|
||||
const greens = [0x5ea75e, 0x6fb96a, 0x4f9850];
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const leaf = new THREE.Mesh(new THREE.SphereGeometry(0.85 - i * 0.18, 10, 8), mat(greens[i % 3], .95));
|
||||
leaf.position.set((Math.random() - .5) * 0.5, trunkH + 0.55 + i * 0.5, (Math.random() - .5) * 0.5);
|
||||
leaf.castShadow = true;
|
||||
g.add(leaf);
|
||||
}
|
||||
g.position.set(x, 0, z);
|
||||
this.group.add(g);
|
||||
}
|
||||
|
||||
bench(x: number, z: number, ry = 0) {
|
||||
const g = new THREE.Group();
|
||||
const woodM = mat(0x9a6b43, .9);
|
||||
const seat = new THREE.Mesh(new THREE.BoxGeometry(1.8, 0.1, 0.55), woodM);
|
||||
seat.position.y = 0.52; seat.castShadow = true; g.add(seat);
|
||||
const back = new THREE.Mesh(new THREE.BoxGeometry(1.8, 0.5, 0.09), woodM);
|
||||
back.position.set(0, 0.82, -0.24); back.castShadow = true; g.add(back);
|
||||
for (const sx of [-0.75, 0.75]) {
|
||||
const leg = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.5, 0.5), mat(0x4a4f5a, .7, .3));
|
||||
leg.position.set(sx, 0.26, 0); g.add(leg);
|
||||
}
|
||||
g.position.set(x, 0, z); g.rotation.y = ry;
|
||||
this.group.add(g);
|
||||
}
|
||||
|
||||
private streetFurniture() {
|
||||
// street lamps
|
||||
for (let x = -66; x <= 66; x += 22) {
|
||||
for (const z of [7.6, -7.6]) {
|
||||
const g = new THREE.Group();
|
||||
const pole = new THREE.Mesh(new THREE.CylinderGeometry(0.07, 0.1, 4.4, 8), mat(0x3c4254, .6, .4));
|
||||
pole.position.y = 2.2; pole.castShadow = true; g.add(pole);
|
||||
const arm = new THREE.Mesh(new THREE.BoxGeometry(0.9, 0.08, 0.08), mat(0x3c4254, .6, .4));
|
||||
arm.position.set(z > 0 ? -0.4 : 0.4, 4.35, 0); g.add(arm);
|
||||
const head = new THREE.Mesh(new THREE.SphereGeometry(0.22, 10, 8), this.lampHeadMat);
|
||||
head.position.set(z > 0 ? -0.8 : 0.8, 4.25, 0); g.add(head);
|
||||
const glow = new THREE.Sprite(new THREE.SpriteMaterial({
|
||||
map: glowTexture(), color: 0xffdf9e, transparent: true, opacity: 0,
|
||||
blending: THREE.AdditiveBlending, depthWrite: false,
|
||||
}));
|
||||
glow.scale.setScalar(3.2);
|
||||
glow.position.copy(head.position);
|
||||
g.add(glow);
|
||||
this.lampGlows.push(glow);
|
||||
g.position.set(x, 0, z);
|
||||
this.group.add(g);
|
||||
}
|
||||
}
|
||||
// benches
|
||||
this.bench(36, -21.6, 0.2);
|
||||
this.bench(-30, 7.4, Math.PI);
|
||||
this.bench(6, -33.4, 0.1);
|
||||
this.bench(-8, -18.6, Math.PI);
|
||||
// food truck
|
||||
const truck = new THREE.Group();
|
||||
const tb = new THREE.Mesh(new THREE.BoxGeometry(4.6, 2.3, 2), mat(0xf2545b, .8));
|
||||
tb.position.y = 1.5; tb.castShadow = true; truck.add(tb);
|
||||
const tcab = new THREE.Mesh(new THREE.BoxGeometry(1.2, 1.2, 2), mat(0xf7f7f7, .8));
|
||||
tcab.position.set(2.6, 0.9, 0); tcab.castShadow = true; truck.add(tcab);
|
||||
const tw = new THREE.Mesh(new THREE.PlaneGeometry(3, 0.9), new THREE.MeshBasicMaterial({ map: textTexture('TACO COMET', '#ffd98a', '#a03a3a') }));
|
||||
tw.position.set(0, 2.1, 1.02); truck.add(tw);
|
||||
for (const wx of [-1.4, 1.6]) for (const wz of [-1.02, 1.02]) {
|
||||
const wheel = new THREE.Mesh(new THREE.CylinderGeometry(0.38, 0.38, 0.25, 12), mat(0x22252e, .9));
|
||||
wheel.rotation.x = Math.PI / 2; wheel.position.set(wx, 0.38, wz); truck.add(wheel);
|
||||
}
|
||||
truck.position.set(12, 0, 10);
|
||||
this.group.add(truck);
|
||||
this.colliders.push({ x: 12, z: 10, hw: 3.4, hd: 1.6 });
|
||||
// bus stop shelter near apartments
|
||||
const shelter = new THREE.Group();
|
||||
const roofS = new THREE.Mesh(new THREE.BoxGeometry(4.4, 0.14, 1.8), mat(0x35c4b5, .8));
|
||||
roofS.position.y = 2.6; roofS.castShadow = true; shelter.add(roofS);
|
||||
for (const sx of [-2, 2]) {
|
||||
const post = new THREE.Mesh(new THREE.CylinderGeometry(0.06, 0.06, 2.6, 8), mat(0x3c4254, .6, .3));
|
||||
post.position.set(sx, 1.3, 0); shelter.add(post);
|
||||
}
|
||||
shelter.position.set(-8, 0, 8);
|
||||
this.group.add(shelter);
|
||||
}
|
||||
|
||||
private poiMarkers() {
|
||||
for (const poi of POIS) {
|
||||
const ring = new THREE.Mesh(
|
||||
new THREE.RingGeometry(poi.radius * 0.82, poi.radius, 32),
|
||||
new THREE.MeshBasicMaterial({ color: 0x35c4b5, transparent: true, opacity: 0.35, side: THREE.DoubleSide, depthWrite: false })
|
||||
);
|
||||
ring.rotation.x = -Math.PI / 2;
|
||||
ring.position.set(poi.x, 0.05, poi.z);
|
||||
this.group.add(ring);
|
||||
this.poiRings.set(poi.id, ring);
|
||||
}
|
||||
}
|
||||
|
||||
update(dt: number, minutes: number, _weather: string) {
|
||||
const t = minutes / 60;
|
||||
const night = t < 6.2 || t > 19.4 ? 1 : 0;
|
||||
const glowK = t < 6.2 ? Math.max(0, 1 - (t - 4.6)) : t > 19.4 ? Math.min(1, (t - 19.4) * 1.6) : 0;
|
||||
this.windowMat.emissiveIntensity = glowK * 1.6;
|
||||
this.lampHeadMat.emissiveIntensity = glowK * 2.2;
|
||||
for (const gl of this.lampGlows) (gl.material as THREE.SpriteMaterial).opacity = glowK * 0.75;
|
||||
this.pulseT += dt;
|
||||
for (const ring of this.poiRings.values()) {
|
||||
const m = ring.material as THREE.MeshBasicMaterial;
|
||||
m.opacity = 0.22 + Math.abs(Math.sin(this.pulseT * 2.4)) * 0.22;
|
||||
}
|
||||
for (const w of this.waterMats) { /* gentle shimmer */ }
|
||||
void night;
|
||||
}
|
||||
|
||||
disposeAll() { /* static for app lifetime */ }
|
||||
}
|
||||
|
||||
function glowTexture() {
|
||||
const c = document.createElement('canvas'); c.width = c.height = 64;
|
||||
const g = c.getContext('2d')!;
|
||||
const grad = g.createRadialGradient(32, 32, 2, 32, 32, 30);
|
||||
grad.addColorStop(0, 'rgba(255,230,170,1)');
|
||||
grad.addColorStop(1, 'rgba(255,230,170,0)');
|
||||
g.fillStyle = grad; g.fillRect(0, 0, 64, 64);
|
||||
return new THREE.CanvasTexture(c);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
// LifeTown Online — rain/storm/fog particle FX + wet-ground puddles.
|
||||
import * as THREE from 'three';
|
||||
|
||||
export class WeatherFX {
|
||||
group = new THREE.Group();
|
||||
private rain: THREE.Points | null = null;
|
||||
private velocities: Float32Array | null = null;
|
||||
private count = 900;
|
||||
private wetness = 0; // 0 dry .. 1 soaked
|
||||
private puddles: THREE.Mesh[] = [];
|
||||
private lightningT = 0;
|
||||
|
||||
constructor() {
|
||||
// puddle discs (hidden while dry) — placed around town
|
||||
const spots: [number, number, number][] = [
|
||||
[-8, 3.2, 1], [14, -6, 0.8], [-30, -12, 1.2], [30, 4, 0.9], [-52, -10, 1],
|
||||
[4, -20, 1.1], [40, -18, 1], [60, -10, 0.8], [-64, -8, 0.9], [22, -24, 0.7],
|
||||
];
|
||||
for (const [x, z, s] of spots) {
|
||||
const p = new THREE.Mesh(
|
||||
new THREE.CircleGeometry(1.6 * s, 16),
|
||||
new THREE.MeshStandardMaterial({ color: 0x9fc8e8, roughness: 0.05, metalness: 0.35, transparent: true, opacity: 0 })
|
||||
);
|
||||
p.rotation.x = -Math.PI / 2;
|
||||
p.position.set(x, 0.045, z);
|
||||
this.puddles.push(p);
|
||||
this.group.add(p);
|
||||
}
|
||||
this.buildRain();
|
||||
}
|
||||
|
||||
private buildRain() {
|
||||
const geo = new THREE.BufferGeometry();
|
||||
const pos = new Float32Array(this.count * 3);
|
||||
this.velocities = new Float32Array(this.count);
|
||||
for (let i = 0; i < this.count; i++) {
|
||||
pos[i * 3] = (Math.random() - .5) * 120;
|
||||
pos[i * 3 + 1] = Math.random() * 30;
|
||||
pos[i * 3 + 2] = (Math.random() - .5) * 90;
|
||||
this.velocities[i] = 22 + Math.random() * 14;
|
||||
}
|
||||
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
|
||||
const material = new THREE.PointsMaterial({
|
||||
color: 0xaaccee, size: 0.09, transparent: true, opacity: 0,
|
||||
depthWrite: false,
|
||||
});
|
||||
this.rain = new THREE.Points(geo, material);
|
||||
this.rain.visible = false;
|
||||
this.group.add(this.rain);
|
||||
}
|
||||
|
||||
update(dt: number, weather: string, camX: number, camZ: number) {
|
||||
const wantRain = weather === 'rain' ? 0.75 : weather === 'storm' ? 1 : 0;
|
||||
const mat = this.rain!.material as THREE.PointsMaterial;
|
||||
if (wantRain > 0) {
|
||||
this.rain!.visible = true;
|
||||
mat.opacity += (wantRain * 0.55 - mat.opacity) * Math.min(1, dt * 2);
|
||||
const posAttr = this.rain!.geometry.getAttribute('position') as THREE.BufferAttribute;
|
||||
const arr = posAttr.array as Float32Array;
|
||||
for (let i = 0; i < this.count; i++) {
|
||||
arr[i * 3 + 1] -= this.velocities![i] * dt;
|
||||
if (arr[i * 3 + 1] < 0) {
|
||||
arr[i * 3] = camX + (Math.random() - .5) * 100;
|
||||
arr[i * 3 + 1] = 26 + Math.random() * 8;
|
||||
arr[i * 3 + 2] = camZ + (Math.random() - .5) * 80;
|
||||
}
|
||||
}
|
||||
posAttr.needsUpdate = true;
|
||||
} else if (this.rain!.visible) {
|
||||
mat.opacity -= dt * 0.4;
|
||||
if (mat.opacity <= 0) this.rain!.visible = false;
|
||||
}
|
||||
|
||||
// ground wetness & puddle visibility
|
||||
this.wetness += ((wantRain > 0 ? 1 : 0) - this.wetness) * Math.min(1, dt * 0.08);
|
||||
for (const p of this.puddles) {
|
||||
(p.material as THREE.MeshStandardMaterial).opacity = this.wetness * 0.65;
|
||||
}
|
||||
|
||||
// lightning
|
||||
if (weather === 'storm') {
|
||||
this.lightningT -= dt;
|
||||
if (this.lightningT <= 0 && Math.random() < 0.02) {
|
||||
this.lightningT = 0.18;
|
||||
window.dispatchEvent(new CustomEvent('lt:lightning'));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
// Ambient declarations for JS modules shared with the Node server.
|
||||
declare module '*.mjs';
|
||||
@@ -0,0 +1,666 @@
|
||||
// LifeTown Online — main orchestrator: screens, game loop, interactions.
|
||||
import './style.css';
|
||||
import * as THREE from 'three';
|
||||
import { Engine } from './gfx/engine';
|
||||
import { World } from './world';
|
||||
import { Controller } from './controller';
|
||||
import { WeatherFX } from './gfx/weatherfx';
|
||||
import { S, bus, Appearance } from './state';
|
||||
import { net } from './net';
|
||||
import { audio } from './audio';
|
||||
import { NeedsSys } from './systems';
|
||||
import { initHud, showPrompt, hidePrompt } from './ui/hud';
|
||||
import { initChat } from './ui/chat';
|
||||
import { Creator } from './ui/creator';
|
||||
import { initPhone, togglePhone, refreshMapIfOpen } from './ui/phone';
|
||||
import { BuildUI, openHouseMarket } from './ui/buildui';
|
||||
import { openSocialWheel, closeWheel, runWorkOverlay, sleepSequence, fishingGame, cookingGame } from './ui/dialogs';
|
||||
import { openDialog, toast, $, el } from './ui/common';
|
||||
import { POIS, JOBS, HOUSES, CATALOG_BY_ID, DOORS, VENUES } from '../../shared/data.mjs';
|
||||
import { categoryActions } from './gfx/furniture';
|
||||
|
||||
// ---------------- singletons ----------------
|
||||
const canvas = document.getElementById('gl') as HTMLCanvasElement;
|
||||
const engine = new Engine(canvas);
|
||||
const world = new World(engine);
|
||||
let controller: Controller;
|
||||
let weatherfx = new WeatherFX();
|
||||
engine.fxGroup.add(weatherfx.group);
|
||||
let buildui: BuildUI;
|
||||
let booted = false;
|
||||
|
||||
// ---------------- helpers ----------------
|
||||
function defaultAppearance(): Appearance {
|
||||
return {
|
||||
bodyType: 'average', height: 0.97, skin: '#eab98f', faceShape: 'round',
|
||||
hair: 'short', hairColor: '#4a2f1d', eyes: 'round', eyeColor: '#3a5a40',
|
||||
brows: 'natural', nose: 'button', mouth: 'smile',
|
||||
outfit: { top: 'tee', bottom: 'jeans', dress: null, shoes: 'sneakers', accessory: 'none', topColor: '#4f8fd9', bottomColor: '#33415c' },
|
||||
personality: ['Friendly'], voice: 'warm', age: 25,
|
||||
};
|
||||
}
|
||||
|
||||
function myAppearance(): any {
|
||||
const a = S.profile?.appearance;
|
||||
return a && Object.keys(a).length ? { ...defaultAppearance(), ...a, ...(a.outfit ? {} : { outfit: defaultAppearance().outfit }) } : defaultAppearance();
|
||||
}
|
||||
|
||||
function flatAppearance(app: any) {
|
||||
// flatten outfit for Avatar builder
|
||||
return {
|
||||
...app,
|
||||
topColor: app.topColor ?? app.outfit?.topColor,
|
||||
bottomColor: app.bottomColor ?? app.outfit?.bottomColor,
|
||||
shoes: app.shoes ?? app.outfit?.shoes,
|
||||
};
|
||||
}
|
||||
|
||||
// ---------------- boot / screens ----------------
|
||||
const savedToken = localStorage.getItem('lt.token');
|
||||
const savedName = localStorage.getItem('lt.name');
|
||||
if (savedName) {
|
||||
($('#inp-name') as HTMLInputElement).value = savedName;
|
||||
($('#title-hint') as HTMLElement).textContent = `Welcome back, ${savedName}! Your life continues where you left off.`;
|
||||
}
|
||||
|
||||
$('#btn-play').addEventListener('click', () => {
|
||||
const name = ($('#inp-name') as HTMLInputElement).value.trim();
|
||||
if (name.length < 2) return void (($('#title-hint') as HTMLElement).textContent = 'Pick a name with at least 2 letters.');
|
||||
S.name = name;
|
||||
$('#loading').classList.remove('hidden');
|
||||
$('#screen-title').classList.add('hidden');
|
||||
net.connect({ name, token: savedToken || undefined });
|
||||
});
|
||||
|
||||
$('#btn-newchar').addEventListener('click', () => {
|
||||
$('#screen-title').classList.add('hidden');
|
||||
$('#screen-creator').classList.remove('hidden');
|
||||
new Creator((res) => {
|
||||
$('#screen-creator').classList.add('hidden');
|
||||
$('#loading').classList.remove('hidden');
|
||||
localStorage.removeItem('lt.token'); // new identity
|
||||
S.name = res.name;
|
||||
net.connect({ name: res.name, appearance: res.appearance });
|
||||
});
|
||||
});
|
||||
|
||||
bus.on('srv:error', (m: any) => {
|
||||
$('#loading').classList.add('hidden');
|
||||
if (!S.connected) {
|
||||
$('#screen-title').classList.remove('hidden');
|
||||
($('#title-hint') as HTMLElement).textContent = m.message || 'Could not join.';
|
||||
} else {
|
||||
toast('Hmm…', m.message || 'That action is not available right now.', '⚠️', 'coral');
|
||||
}
|
||||
audio.err();
|
||||
});
|
||||
bus.on('net:down', () => {
|
||||
if (booted) toast('Connection lost', 'Reconnecting to LifeTown…', '📶', 'coral');
|
||||
});
|
||||
|
||||
// ---------------- game start ----------------
|
||||
bus.on('game:ready', async () => {
|
||||
$('#loading').classList.add('hidden');
|
||||
if (booted) {
|
||||
// soft resync after a reconnect
|
||||
S.zone = 'town';
|
||||
await enterZoneVisual('town');
|
||||
toast('Back online', 'You are in Maple Court.', '📶');
|
||||
return;
|
||||
}
|
||||
booted = true;
|
||||
|
||||
// debug/testing handle (harmless in production)
|
||||
(window as any).__lt = {
|
||||
S, world, controller, net,
|
||||
teleport: (x: number, z: number) => { const p = world.me?.avatar.group.position; if (p) p.set(x, 0, z); },
|
||||
poiAct,
|
||||
};
|
||||
$('#hud').classList.remove('hidden');
|
||||
|
||||
initHud();
|
||||
initChat();
|
||||
initPhone(canWorkHere);
|
||||
controller = new Controller(engine, null, null,
|
||||
() => world.me?.avatar.group.position ?? new THREE.Vector3(),
|
||||
scanInteraction);
|
||||
buildui = new BuildUI(() => world.interior, engine.camera, canvas);
|
||||
world.onFocus((pos) => controller.socialFocus(pos));
|
||||
|
||||
await enterZoneVisual(S.zone === 'town' ? 'town' : S.zone);
|
||||
world.spawnMe(flatAppearance(myAppearance()));
|
||||
|
||||
setupActionHandlers();
|
||||
setupTouch();
|
||||
requestAnimationFrame(loop);
|
||||
|
||||
setInterval(() => {
|
||||
net.send({ t: 'needs_sync', needs: S.needs, moodlets: S.moodlets });
|
||||
}, 12000);
|
||||
setInterval(refreshMapIfOpen, 4000);
|
||||
|
||||
toast(`Welcome to LifeTown, ${S.name}! 🌆`, 'Walk with WASD · tap E to interact · make friends!', '👋', 'gold');
|
||||
});
|
||||
|
||||
async function enterZoneVisual(zoneId: string, homeOpts?: { tier?: string; layout?: any[] }) {
|
||||
const isHome = zoneId.startsWith('home:');
|
||||
const spawn = await world.enterZone(
|
||||
zoneId,
|
||||
isHome ? (homeOpts?.tier || S.profile?.houseTier || 'studio') : undefined,
|
||||
isHome ? (homeOpts?.layout || S.profile?.homeLayout || []) : undefined
|
||||
);
|
||||
controller.town = world.town as any;
|
||||
controller.setInterior(world.interior);
|
||||
if (world.me) {
|
||||
world.me.avatar.group.position.set(spawn.x, 0, spawn.z);
|
||||
}
|
||||
updateFurnitureAuras();
|
||||
hidePrompt();
|
||||
return spawn;
|
||||
}
|
||||
|
||||
bus.on('srv:zoneOk', async (m: any) => {
|
||||
S.zone = m.zone;
|
||||
const visiting = m.zone.startsWith('home:') && m.own === false;
|
||||
await enterZoneVisual(m.zone, visiting ? { tier: m.tier, layout: m.layout } : undefined);
|
||||
audio.door();
|
||||
if (m.zone === 'town') {
|
||||
toast('Maple Court', 'You are back on the street.', '🌆');
|
||||
} else if (m.zone.startsWith('venue:')) {
|
||||
const v = VENUES[m.zone];
|
||||
if (v) toast(v.name, 'Walk to a glowing spot and press E. The front mat leads outside.', v.name.includes('Café') ? '☕' : v.name.includes('Gym') ? '🏋️' : v.name.includes('Hall') ? '🏛️' : v.name.includes('Mart') ? '🛒' : '🕹️');
|
||||
} else if (visiting) {
|
||||
toast(`Visiting ${m.ownerName || m.zone.slice(5)} 🏡`, 'Mind your manners — their couch, their rules!', '🛋️');
|
||||
} else {
|
||||
toast('Home sweet home 🏠', 'Tap 🔨 Build to decorate. Use furniture by walking up to it.', '🛋️');
|
||||
}
|
||||
});
|
||||
|
||||
function updateFurnitureAuras() {
|
||||
const auras: Record<string, number> = { energyRate: 1, hygieneRate: 1, funRate: 1, comfortRate: 1, cookSpeed: 1, productivity: 1, hungerRate: 1 };
|
||||
let comfortBonus = 0, itemCount = 0;
|
||||
for (const f of world.interior?.furniture || []) {
|
||||
const def = CATALOG_BY_ID[f.item.itemId];
|
||||
if (!def) continue;
|
||||
itemCount++;
|
||||
for (const [k, v] of Object.entries(def.fx)) {
|
||||
if (typeof v === 'number' && k in auras) auras[k] *= v;
|
||||
}
|
||||
}
|
||||
comfortBonus = Math.min(0.5, itemCount * 0.01);
|
||||
auras.comfortRate *= 1 + comfortBonus;
|
||||
NeedsSys.auras = auras;
|
||||
}
|
||||
world.interiorChangedHook = () => updateFurnitureAuras();
|
||||
|
||||
// ---------------- action bar ----------------
|
||||
function setupActionHandlers() {
|
||||
document.querySelectorAll('.abtn').forEach(b => b.addEventListener('click', () => {
|
||||
const act = (b as HTMLElement).dataset.act;
|
||||
audio.click();
|
||||
if (act === 'interact') controller.tryInteract();
|
||||
else if (act === 'emote') doDance();
|
||||
else if (act === 'phone') togglePhone();
|
||||
else if (act === 'map') { togglePhone(true); document.querySelector('.papp-btn[data-app="map"]')?.dispatchEvent(new Event('click')); }
|
||||
else if (act === 'bag') { ($('#inventory') as HTMLElement).classList.toggle('hidden'); buildui.renderInventory(); }
|
||||
else if (act === 'home') openHomeMenu();
|
||||
else if (act === 'build') toggleBuildMode();
|
||||
}));
|
||||
bus.on('act:dance', () => doDance());
|
||||
$('#inv-close')?.addEventListener('click', () => ($('#inventory') as HTMLElement).classList.add('hidden'));
|
||||
bus.on('build:exit', () => toggleBuildMode(false));
|
||||
|
||||
// clicking an actor opens the social wheel (short tap only, not camera drags)
|
||||
canvas.addEventListener('pointerup', ((e: PointerEvent) => {
|
||||
const downAt = (canvas as any)._pd as number | undefined;
|
||||
const downX = (canvas as any)._pdx ?? e.clientX;
|
||||
const moved = Math.abs(e.clientX - downX);
|
||||
if (downAt && performance.now() - downAt < 240 && moved < 6 && !S.buildMode) {
|
||||
tryActorPick(e.clientX, e.clientY);
|
||||
}
|
||||
(canvas as any)._pd = undefined;
|
||||
}));
|
||||
canvas.addEventListener('pointerdown', (e) => { (canvas as any)._pd = performance.now(); (canvas as any)._pdx = e.clientX; });
|
||||
|
||||
function tryActorPick(cx: number, cy: number) {
|
||||
if (!world.me) return;
|
||||
const raycaster = new THREE.Raycaster();
|
||||
raycaster.setFromCamera(new THREE.Vector2((cx / window.innerWidth) * 2 - 1, -(cy / window.innerHeight) * 2 + 1), engine.camera);
|
||||
const groups = [...world.actors.values()].filter(a => a.id !== 'me').map(a => a.avatar.group);
|
||||
const hits = raycaster.intersectObjects(groups, true);
|
||||
if (!hits.length) return;
|
||||
let obj: THREE.Object3D | null = hits[0].object;
|
||||
while (obj && ![...world.actors.values()].some(a => a.avatar.group === obj)) obj = obj.parent;
|
||||
const actor = [...world.actors.values()].find(a => a.avatar.group === obj);
|
||||
if (!actor) return;
|
||||
if (world.me!.avatar.group.position.distanceTo(actor.avatar.group.position) > 5.5)
|
||||
return toast('Too far away', `Walk closer to ${actor.name} to chat.`, '🚶', 'coral');
|
||||
openSocialWheel({ type: actor.isNpc ? 'npc' : 'player', id: actor.id, name: actor.name });
|
||||
}
|
||||
|
||||
function doDance() {
|
||||
net.send({ t: 'emote', id: 'dance' });
|
||||
world.emote('me', 'dance');
|
||||
NeedsSys.apply({ fun: +10 });
|
||||
}
|
||||
|
||||
function openHomeMenu() {
|
||||
openDialog('🏠 Home & Travel', (body) => {
|
||||
const mk = (label: string, desc: string, cb: () => void, primary = false) => {
|
||||
const b = el('button', primary ? 'btn btn-primary' : 'btn btn-ghost', `${label}`);
|
||||
b.style.cssText = 'width:100%;margin-bottom:8px';
|
||||
b.addEventListener('click', () => { document.getElementById('dialog')!.classList.add('hidden'); cb(); });
|
||||
body.appendChild(b);
|
||||
body.appendChild(el('div', 'dim', desc)).style.marginBottom = '10px';
|
||||
};
|
||||
mk('🌆 Go to Maple Court (town)', 'Public streets, shops, café, gym, park & pond.', () => net.send({ t: 'zone', id: 'town' }), true);
|
||||
mk('🏠 Teleport to your home', 'Decorate, sleep, cook, shower.', () => net.send({ t: 'zone', id: `home:${S.name.toLowerCase()}` }));
|
||||
mk('🏡 Property market', 'Upgrade your home as you level up.', () => openHouseMarket());
|
||||
mk('📨 Invite a friend over', 'They must be online.', () => {
|
||||
const input = el('input') as HTMLInputElement;
|
||||
input.placeholder = 'Friend name…';
|
||||
const btn = el('button', 'btn btn-accent', 'Invite');
|
||||
btn.style.marginTop = '6px';
|
||||
btn.addEventListener('click', () => net.send({ t: 'invite', to: input.value.trim() }));
|
||||
const wrap = el('div'); wrap.appendChild(input); wrap.appendChild(btn);
|
||||
body.appendChild(wrap);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function toggleBuildMode(force?: boolean) {
|
||||
const want = force ?? !S.buildMode;
|
||||
const ownHome = S.zone === `home:${S.name.toLowerCase()}`;
|
||||
if (want && S.zone === 'town') return toast('Go home first', 'Build mode works inside your home.', '🏠', 'coral');
|
||||
if (want && !ownHome) return toast('Not your place', 'You can only redecorate your own home.', '🚫', 'coral');
|
||||
S.buildMode = want;
|
||||
$('#buildbar').classList.toggle('hidden', !want);
|
||||
(document.querySelector('[data-act="build"]') as HTMLElement)?.classList.toggle('active', want);
|
||||
world.interior?.setBuildMode(want);
|
||||
controller.mode = want ? 'build' : 'live';
|
||||
if (want) {
|
||||
buildui.setTool('place');
|
||||
toast('Build Mode 🔨', 'Buy furniture in the Shop, place it, rotate ⟳, sell 🗑.', '🔨');
|
||||
} else {
|
||||
buildui.clearGhost();
|
||||
}
|
||||
audio.click();
|
||||
}
|
||||
|
||||
// ---------------- touch controls ----------------
|
||||
function setupTouch() {
|
||||
if (!('ontouchstart' in window)) return;
|
||||
$('#touch-ui').classList.remove('hidden');
|
||||
const base = $('#joy-base'), knob = $('#joy-knob');
|
||||
let jid: number | null = null;
|
||||
const setKnob = (dx: number, dy: number) => {
|
||||
knob.style.transform = `translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px))`;
|
||||
};
|
||||
base.addEventListener('pointerdown', (e) => { jid = e.pointerId; base.setPointerCapture(jid); move(e); });
|
||||
base.addEventListener('pointermove', (e) => { if (e.pointerId === jid) move(e); });
|
||||
const end = (e: PointerEvent) => {
|
||||
if (e.pointerId !== jid) return;
|
||||
jid = null; controller.input.x = 0; controller.input.z = 0; setKnob(0, 0);
|
||||
};
|
||||
base.addEventListener('pointerup', end); base.addEventListener('pointercancel', end);
|
||||
function move(e: PointerEvent) {
|
||||
const r = base.getBoundingClientRect();
|
||||
let dx = e.clientX - (r.left + r.width / 2);
|
||||
let dy = e.clientY - (r.top + r.height / 2);
|
||||
const max = r.width / 2;
|
||||
const len = Math.hypot(dx, dy);
|
||||
if (len > max) { dx = dx / len * max; dy = dy / len * max; }
|
||||
setKnob(dx, dy);
|
||||
controller.input.x = dx / max;
|
||||
controller.input.z = dy / max;
|
||||
controller.input.run = len / max > 0.92;
|
||||
}
|
||||
($('#tb-interact') as HTMLElement).addEventListener('click', () => controller.tryInteract());
|
||||
($('#tb-jump-run') as HTMLElement).addEventListener('click', () => {
|
||||
controller.input.run = !controller.input.run;
|
||||
($('#tb-jump-run') as HTMLElement).style.background = controller.input.run ? 'linear-gradient(135deg,#ff7e5f,#ffcf6b)' : '';
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------- interaction scanning ----------------
|
||||
let currentPrompt: (() => void) | null = null;
|
||||
|
||||
function scanInteraction(): { label: string; cb: () => void } | null {
|
||||
// always rescan right before acting so the action matches current position
|
||||
updatePromptScan();
|
||||
if (!currentPrompt) {
|
||||
// fall back to social target
|
||||
const near = world.nearestActor(true, 4.2);
|
||||
if (near) return { label: `Talk to ${near.name}`, cb: () => openSocialWheel({ type: near.isNpc ? 'npc' : 'player', id: near.id, name: near.name }) };
|
||||
return null;
|
||||
}
|
||||
return { label: '', cb: currentPrompt };
|
||||
}
|
||||
|
||||
function updatePromptScan() {
|
||||
currentPrompt = null;
|
||||
const mePos = world.me?.avatar.group.position;
|
||||
if (!mePos) return;
|
||||
|
||||
// ---- interiors (home or venue): exit mat > venue spots > furniture
|
||||
if (S.zone !== 'town' && world.interior) {
|
||||
// exit mat sits at the front of every interior room
|
||||
const exitZ = world.interior.size[1] / 2 - 0.7;
|
||||
if (Math.hypot(mePos.x - 0, mePos.z - exitZ) < 1.6) {
|
||||
const isVenue = S.zone.startsWith('venue:');
|
||||
showPrompt(isVenue ? 'Step outside' : 'Leave home');
|
||||
currentPrompt = () => { net.send({ t: 'zone', id: 'town' }); };
|
||||
return;
|
||||
}
|
||||
// venue activity spots
|
||||
if (S.zone.startsWith('venue:')) {
|
||||
const v = VENUES[S.zone.slice(6)];
|
||||
let bestSpot: { label: string; act: string; d: number } | null = null;
|
||||
for (const sp of v?.spots || []) {
|
||||
const d = Math.hypot(mePos.x - sp.x, mePos.z - sp.z);
|
||||
if (d < 1.8 && (!bestSpot || d < bestSpot.d)) bestSpot = { label: sp.label, act: sp.act, d };
|
||||
}
|
||||
if (bestSpot) {
|
||||
showPrompt(bestSpot.label);
|
||||
currentPrompt = () => poiAct(bestSpot!.act);
|
||||
return;
|
||||
}
|
||||
}
|
||||
let best: { label: string; cb: () => void } | null = null;
|
||||
let bd = 2.0;
|
||||
for (const f of world.interior.furniture) {
|
||||
const d = mePos.distanceTo(f.group.position);
|
||||
const acts = categoryActions(f.cat);
|
||||
if (acts.length && d < bd) {
|
||||
bd = d;
|
||||
best = { label: acts[0].label, cb: () => furnitureAct(f.item.itemId, f.cat, f.group.position) };
|
||||
}
|
||||
}
|
||||
if (best) {
|
||||
currentPrompt = best.cb;
|
||||
showPrompt(best.label);
|
||||
return;
|
||||
}
|
||||
} else if (S.zone === 'town') {
|
||||
// building doors first — they take priority over outdoor POI rings
|
||||
for (const door of DOORS) {
|
||||
if (Math.hypot(mePos.x - door.x, mePos.z - door.z) < 2.1) {
|
||||
showPrompt(door.label, door.zone === 'home:self' ? 'E' : 'E');
|
||||
currentPrompt = () => {
|
||||
audio.door();
|
||||
net.send({ t: 'zone', id: door.zone === 'home:self' ? `home:${S.name.toLowerCase()}` : door.zone });
|
||||
};
|
||||
return;
|
||||
}
|
||||
}
|
||||
let best: { poi: typeof POIS[0]; d: number } | null = null;
|
||||
for (const poi of POIS) {
|
||||
const d = Math.hypot(mePos.x - poi.x, mePos.z - poi.z);
|
||||
if (d < poi.radius * 1.35 && (!best || d < best.d)) best = { poi, d };
|
||||
}
|
||||
if (best) {
|
||||
currentPrompt = () => poiAct(best!.poi.id);
|
||||
showPrompt(best.poi.name);
|
||||
return;
|
||||
}
|
||||
}
|
||||
const near = world.nearestActor(true, 4.2);
|
||||
if (near) { showPrompt(`${near.name} — talk`); currentPrompt = () => openSocialWheel({ type: near.isNpc ? 'npc' : 'player', id: near.id, name: near.name }); return; }
|
||||
hidePrompt();
|
||||
}
|
||||
|
||||
function poiAct(id: string) {
|
||||
switch (id) {
|
||||
case 'cafe':
|
||||
case 'foodtruck': {
|
||||
if (S.money < 12) return toast('Not enough coins', 'A meal costs 12 ◉.', '💸', 'coral');
|
||||
S.money -= 12; if (S.profile) S.profile.money = S.money;
|
||||
net.send({ t: 'move', x: world.me!.avatar.group.position.x, z: world.me!.avatar.group.position.z, ry: 0, anim: 'eat' });
|
||||
world.emote('me', 'eat');
|
||||
setTimeout(() => {
|
||||
NeedsSys.apply({ hunger: +45, fun: +6 });
|
||||
bus.emit('eco:money');
|
||||
toast('Yum! 🍽️', 'Hunger restored.', '🍽️');
|
||||
}, 2600);
|
||||
break;
|
||||
}
|
||||
case 'cityhall': openCityHall(); break;
|
||||
case 'property': (buildui as any).openHouseMarket(); break;
|
||||
case 'exercise':
|
||||
case 'gym': {
|
||||
world.emote('me', 'dance');
|
||||
NeedsSys.apply({ energy: -14, fun: +10, happiness: +4 });
|
||||
toast('Great workout! 💪', 'Energy used, endorphins gained.', '🏋️');
|
||||
break;
|
||||
}
|
||||
case 'arcade': {
|
||||
world.emote('me', 'talk');
|
||||
NeedsSys.apply({ fun: +18, energy: -5 });
|
||||
S.money = Math.max(0, S.money - 4); if (S.profile) S.profile.money = S.money;
|
||||
bus.emit('eco:money');
|
||||
audio.achievement();
|
||||
toast('New high score! 🕹️', 'The Porcupine salutes you.', '🕹️');
|
||||
break;
|
||||
}
|
||||
case 'store': (buildui as any).openCatalog(); break;
|
||||
case 'pond': fishingGame((ok, reward) => {
|
||||
NeedsSys.apply({ fun: ok ? +16 : +4 });
|
||||
S.money += reward; if (S.profile) S.profile.money = S.money;
|
||||
bus.emit('eco:money');
|
||||
toast(ok ? `Caught fish! +${reward} ◉ 🐟` : 'The fish won this time…', ok ? 'Sold at the market stall.' : 'Try again!', ok ? '🎣' : '💧');
|
||||
}); break;
|
||||
case 'stage': {
|
||||
net.send({ t: 'emote', id: 'dance' });
|
||||
world.emote('me', 'dance');
|
||||
NeedsSys.apply({ fun: +14, social: +6, energy: -6 });
|
||||
break;
|
||||
}
|
||||
case 'fountain': {
|
||||
world.emote('me', 'sit');
|
||||
NeedsSys.apply({ comfort: +8, fun: +4 });
|
||||
toast('Peaceful… ⛲', 'You rest by the Copper Fountain.', '⛲');
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
world.emote('me', 'sit');
|
||||
NeedsSys.apply({ comfort: +10, energy: +4 });
|
||||
toast('Sitting down 🪑', 'Take a breather. Move to stand up.', '🪑');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function furnitureAct(itemId: string, cat: string, pos: THREE.Vector3) {
|
||||
void pos;
|
||||
switch (cat) {
|
||||
case 'bed': {
|
||||
NeedsSys.sleeping = true;
|
||||
world.emote('me', 'sleep');
|
||||
sleepSequence('Good morning! ☀️ You feel refreshed.', 4, () => {
|
||||
NeedsSys.sleeping = false;
|
||||
NeedsSys.apply({ energy: +70, hygiene: -18, hunger: -22 });
|
||||
world.me?.avatar.setAnim('idle');
|
||||
net.send({ t: 'move', x: world.me!.avatar.group.position.x, z: world.me!.avatar.group.position.z, ry: world.me!.avatar.group.rotation.y, anim: 'idle' });
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'shower': {
|
||||
world.me?.avatar.setAnim('talk');
|
||||
setTimeout(() => NeedsSys.apply({ hygiene: +60, comfort: +10, fun: +4 }), 2200);
|
||||
toast('Fresh & clean 🚿', '', '🚿');
|
||||
break;
|
||||
}
|
||||
case 'toilet': NeedsSys.apply({ hygiene: +12 }); toast('', '', '🚽'); break;
|
||||
case 'sink': NeedsSys.apply({ hygiene: +20 }); break;
|
||||
case 'fridge': {
|
||||
NeedsSys.apply({ hunger: +26 });
|
||||
world.emote('me', 'eat');
|
||||
toast('Snack time 🍎', '+26 hunger', '🍎');
|
||||
break;
|
||||
}
|
||||
case 'stove': {
|
||||
if (S.money < 10) return toast('Need ingredients', 'Cooking costs 10 ◉.', '💸', 'coral');
|
||||
cookingGame((good) => {
|
||||
S.money -= 10; bus.emit('eco:money');
|
||||
NeedsSys.apply({
|
||||
hunger: good ? +58 : +30,
|
||||
fun: good ? +12 : +3,
|
||||
happiness: good ? 6 : -2,
|
||||
});
|
||||
world.emote('me', 'eat');
|
||||
toast(good ? 'Chef quality! 🍜' : 'Edible, at least…', good ? '+58 hunger' : '+30 hunger', good ? '🍳' : '🥴');
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'tv': case 'pc': case 'elec': case 'shelf': case 'sofa': {
|
||||
const gain = cat === 'sofa' ? 8 : 14;
|
||||
world.emote('me', cat === 'sofa' ? 'sit' : 'talk');
|
||||
NeedsSys.apply({ fun: +gain, comfort: +6, energy: +2 });
|
||||
toast('Good times ✨', `+${gain} fun`, '🎉');
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
const def = CATALOG_BY_ID[itemId];
|
||||
toast(def?.name || 'Furniture', 'Looks lovely in here!', '✨');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function canWorkHere(): boolean {
|
||||
const p = S.profile;
|
||||
if (!p?.job) return false;
|
||||
const job = JOBS.find(j => j.id === p.job!.id)!;
|
||||
const mePos = world.me?.avatar.group.position;
|
||||
if (!mePos) return false;
|
||||
const poi = POIS.find(x => x.id === job.poi);
|
||||
const anchor = poi ?? { x: 0, z: -26 };
|
||||
return Math.hypot(mePos.x - anchor.x, mePos.z - anchor.z) < 8;
|
||||
}
|
||||
|
||||
function openCityHall() {
|
||||
openDialog('🏛️ LifeTown City Hall', (body, close) => {
|
||||
const p = S.profile;
|
||||
body.appendChild(el('div', '', `<b>Career desk</b><br><span class="dim">${p?.job ? 'You can work shifts at your workplace (see Phone → Jobs).' : 'Choose your calling below — you can change careers anytime.'}</span>`)).style.marginBottom = '12px';
|
||||
for (const j of JOBS.slice(0, 12)) {
|
||||
const active = p?.job?.id === j.id;
|
||||
const row = el('div', 'stat-row', `<span><b>${j.title}</b> <span class="dim">· ${j.ranks[0]}</span></span>
|
||||
<span style="display:flex;gap:8px;align-items:center"><span class="dim">${j.basePay} ◉</span>${active ? '<span class="tx-in">Current ✓</span>' : '<button class="btn btn-accent" style="padding:6px 13px;font-size:.78rem">Apply</button>'}</span>`);
|
||||
if (!active) (row.querySelector('button') as HTMLElement)?.addEventListener('click', () => {
|
||||
net.send({ t: 'job_select', jobId: j.id });
|
||||
close();
|
||||
});
|
||||
body.appendChild(row);
|
||||
}
|
||||
const marketBtn = el('button', 'btn btn-ghost', '🏡 Browse Property Market');
|
||||
marketBtn.style.cssText = 'width:100%;margin-top:12px';
|
||||
marketBtn.addEventListener('click', openHouseMarket);
|
||||
body.appendChild(marketBtn);
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------- server events ----------------
|
||||
bus.on('srv:workResult', (m: any) => {
|
||||
audio.cash();
|
||||
toast(`Shift complete! +${m.pay} ◉`, `XP +${m.xp}${m.promoted ? ' · PROMOTED! 📈' : ''}`, m.promoted ? '📈' : '💰', m.promoted ? 'gold' : '');
|
||||
if (m.promoted) audio.levelup();
|
||||
NeedsSys.apply({ energy: -12, fun: -4, happiness: m.promoted ? 12 : 2 });
|
||||
NeedsSys.addMoodlet({ id: 'worked', label: 'Productive', emoji: '💼', happiness: 6, expires: Date.now() + 180000 });
|
||||
});
|
||||
bus.on('srv:socialFx', () => {
|
||||
// relationship-driven moodlets
|
||||
});
|
||||
bus.on('rel:update', () => {
|
||||
const rels = Object.values(S.profile?.relationships || {});
|
||||
const partner = rels.some(r => r.partner);
|
||||
if (partner) NeedsSys.addMoodlet({ id: 'romance', label: 'Romance', emoji: '💞', happiness: 10 });
|
||||
else NeedsSys.removeMoodlet('Romance');
|
||||
});
|
||||
window.addEventListener('lt:lightning', () => {
|
||||
const f = document.createElement('div');
|
||||
f.style.cssText = 'position:absolute;inset:0;background:#eaf2ff;z-index:15;opacity:.85;transition:opacity .3s;pointer-events:none';
|
||||
document.getElementById('app')!.appendChild(f);
|
||||
requestAnimationFrame(() => { f.style.opacity = '0'; setTimeout(() => f.remove(), 350); });
|
||||
setTimeout(() => audio.thunder(), 200 + Math.random() * 800);
|
||||
});
|
||||
|
||||
// ---------------- main loop ----------------
|
||||
const clock = new THREE.Clock();
|
||||
let promptScanT = 0;
|
||||
let miniEmitT = 0;
|
||||
let lastEventDayMin = -1;
|
||||
|
||||
function loop() {
|
||||
requestAnimationFrame(loop);
|
||||
const dt = Math.min(clock.getDelta(), 0.066);
|
||||
|
||||
// local clock interpolation between server beats
|
||||
S.time.minutes += (dt * S.timeScale) / 60;
|
||||
if (S.time.minutes >= 1440) { S.time.minutes -= 1440; S.time.day++; }
|
||||
|
||||
const minutes = S.time.minutes;
|
||||
engine.setTimeOfDay(minutes, S.weather);
|
||||
world.town?.update(dt, minutes, S.weather);
|
||||
|
||||
// actors + camera
|
||||
const me = world.me;
|
||||
if (me) {
|
||||
// anim override expiry back to idle for local player
|
||||
controller.update(dt, me.avatar);
|
||||
}
|
||||
world.update(dt);
|
||||
|
||||
// fx
|
||||
const cam = engine.camera.position;
|
||||
weatherfx.update(dt, S.weather, cam.x, cam.z);
|
||||
audio.setRain(S.weather === 'storm' ? 1 : S.weather === 'rain' ? .6 : 0);
|
||||
audio.tick();
|
||||
|
||||
// music by context
|
||||
const hour = minutes / 60;
|
||||
if (S.zone === 'town') audio.setTrack(hour >= 21 || hour < 6 ? 'night' : 'town');
|
||||
else audio.setTrack('home');
|
||||
|
||||
// prompts & minimap throttles
|
||||
promptScanT -= dt;
|
||||
if (promptScanT <= 0 && !S.buildMode) { promptScanT = 0.18; updatePromptScan(); }
|
||||
miniEmitT -= dt;
|
||||
if (miniEmitT <= 0 && world.me) {
|
||||
miniEmitT = 0.3;
|
||||
const ps: any[] = [];
|
||||
for (const a of world.actors.values()) {
|
||||
if (a.isNpc && S.zone !== 'town') continue;
|
||||
ps.push({ x: a.avatar.group.position.x, z: a.avatar.group.position.z, me: a.id === 'me' });
|
||||
}
|
||||
bus.emit('mini:positions', ps);
|
||||
(window as any).__myPosForMap = { x: world.me!.avatar.group.position.x, z: world.me!.avatar.group.position.z };
|
||||
}
|
||||
|
||||
// recurring event banner
|
||||
const dayMin = S.time.day * 1440 + Math.floor(S.time.minutes);
|
||||
if (lastEventDayMin !== dayMin) {
|
||||
lastEventDayMin = dayMin;
|
||||
const hm = Math.floor(S.time.minutes);
|
||||
if (hm === 1200) showEventBanner('🎶 Plaza Dance Night — meet at the stage!');
|
||||
else if (hm === 540) showEventBanner('🍎 Morning Market opened at MapleMart!');
|
||||
}
|
||||
|
||||
engine.render();
|
||||
}
|
||||
|
||||
function showEventBanner(text: string) {
|
||||
if (document.getElementById('event-banner')) return;
|
||||
const b = document.createElement('div');
|
||||
b.id = 'event-banner';
|
||||
b.textContent = text;
|
||||
document.getElementById('hud')!.appendChild(b);
|
||||
audio.levelup();
|
||||
setTimeout(() => b.remove(), 30000);
|
||||
}
|
||||
|
||||
// keep chat Enter focus behaviour
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.code === 'Enter' && !S.chatOpen && booted && !(e.target instanceof HTMLInputElement)) {
|
||||
($('#chat-input') as HTMLElement).focus();
|
||||
}
|
||||
if (e.code === 'Escape') { closeWheel(); togglePhone(false); }
|
||||
});
|
||||
@@ -0,0 +1,88 @@
|
||||
// LifeTown Online — WebSocket client with reconnect + message dispatch to bus.
|
||||
import { S, bus } from './state';
|
||||
|
||||
export class Net {
|
||||
ws: WebSocket | null = null;
|
||||
private queue: any[] = [];
|
||||
private retry = 0;
|
||||
private intentionalClose = false;
|
||||
url: string;
|
||||
|
||||
constructor() {
|
||||
const proto = location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
this.url = `${proto}://${location.host}/ws`;
|
||||
}
|
||||
|
||||
connect(opts: { name: string; token?: string; appearance?: any }) {
|
||||
this.intentionalClose = false;
|
||||
bus.emit('net:connecting');
|
||||
try { this.ws = new WebSocket(this.url); } catch { return this.scheduleRetry(); }
|
||||
const ws = this.ws!;
|
||||
ws.onopen = () => {
|
||||
this.retry = 0;
|
||||
this.raw({ t: 'hello', name: opts.name, token: opts.token ?? undefined, appearance: opts.appearance ?? undefined });
|
||||
// flush queue
|
||||
for (const m of this.queue) this.raw(m);
|
||||
this.queue.length = 0;
|
||||
};
|
||||
ws.onmessage = (e) => {
|
||||
let msg; try { msg = JSON.parse(e.data); } catch { return; }
|
||||
if (msg.t === 'error') { bus.emit('srv:error', msg); return; }
|
||||
bus.emit('srv:' + msg.t, msg);
|
||||
};
|
||||
ws.onclose = () => {
|
||||
S.connected = false;
|
||||
bus.emit('net:down');
|
||||
if (!this.intentionalClose) this.scheduleRetry();
|
||||
};
|
||||
ws.onerror = () => {};
|
||||
}
|
||||
|
||||
private scheduleRetry() {
|
||||
this.retry++;
|
||||
const delay = Math.min(1000 * this.retry, 6000);
|
||||
setTimeout(() => {
|
||||
const name = S.name || localStorage.getItem('lt.name') || '';
|
||||
if (!name) return;
|
||||
this.connect({ name, token: localStorage.getItem('lt.token') || undefined });
|
||||
}, delay);
|
||||
}
|
||||
|
||||
send(msg: any) {
|
||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) this.raw(msg);
|
||||
else this.queue.push(msg);
|
||||
}
|
||||
private raw(msg: any) { this.ws?.send(JSON.stringify(msg)); }
|
||||
close() { this.intentionalClose = true; this.ws?.close(); }
|
||||
}
|
||||
|
||||
export const net = new Net();
|
||||
|
||||
// ---- server → state wiring ----------------------------------
|
||||
bus.on('srv:welcome', (m: any) => {
|
||||
S.connected = true;
|
||||
S.yourId = m.yourId;
|
||||
S.token = m.token;
|
||||
const profile = m.profile;
|
||||
S.profile = profile;
|
||||
S.money = profile.money;
|
||||
S.zone = m.zone;
|
||||
S.time = { day: m.time.day, minutes: m.time.minutes };
|
||||
S.timeScale = m.time.scale || 60;
|
||||
S.weather = m.weather;
|
||||
S.online = (m.online?.length || 0) + 1;
|
||||
if (profile.needs) S.needs = { ...S.needs, ...profile.needs };
|
||||
localStorage.setItem('lt.token', m.token);
|
||||
localStorage.setItem('lt.name', profile.name);
|
||||
bus.emit('game:ready', m);
|
||||
});
|
||||
bus.on('srv:time', (m: any) => { S.time.day = m.day; S.time.minutes = m.minutes; S.weather = m.weather; bus.emit('world:time'); });
|
||||
bus.on('srv:weather', (m: any) => { S.weather = m.weather; bus.emit('world:weather'); });
|
||||
bus.on('srv:money', (m: any) => { S.money = m.amount; if (S.profile) S.profile.money = m.amount; bus.emit('eco:money'); });
|
||||
bus.on('srv:profile', (m: any) => {
|
||||
S.profile = m.profile; S.money = m.profile.money;
|
||||
bus.emit('profile:update');
|
||||
});
|
||||
bus.on('srv:inventory', (m: any) => { if (S.profile) S.profile.inventory = m.inventory; bus.emit('inv:update'); });
|
||||
bus.on('srv:jobUpdate', (m: any) => { if (S.profile) S.profile.job = m.job; bus.emit('job:update'); });
|
||||
bus.on('srv:relUpdate', (m: any) => { if (S.profile) S.profile.relationships = m.relationships; bus.emit('rel:update'); });
|
||||
@@ -0,0 +1,76 @@
|
||||
// LifeTown Online — client state store + tiny event bus.
|
||||
export type Need = 'hunger' | 'energy' | 'hygiene' | 'fun' | 'social' | 'comfort';
|
||||
|
||||
export interface Moodlet { id: string; label: string; emoji: string; happiness: number; expires?: number }
|
||||
|
||||
export interface RelEntry { f: number; r: number; partner?: boolean }
|
||||
|
||||
export interface JobState { id: string; rank: number; xp: number }
|
||||
|
||||
export interface Profile {
|
||||
name: string; money: number; level: number; xp: number;
|
||||
job: JobState | null;
|
||||
houseTier: string; housesOwned: string[];
|
||||
homeLayout: { itemId: string; x: number; z: number; rot: number }[];
|
||||
inventory: { itemId: string }[];
|
||||
relationships: Record<string, RelEntry>;
|
||||
achievements: string[];
|
||||
stats: { shifts?: number; dances?: number; giftsSent?: number; partners?: number };
|
||||
appearance: any; needs: Record<Need, number> | null; moodlets: Moodlet[];
|
||||
}
|
||||
|
||||
export interface Appearance {
|
||||
bodyType: string; height: number; skin: string; faceShape: string;
|
||||
hair: string; hairColor: string; eyes: string; eyeColor: string;
|
||||
brows: string; nose: string; mouth: string;
|
||||
outfit: { top: string; bottom: string; dress: string | null; shoes: string; accessory: string; topColor: string; bottomColor: string };
|
||||
personality: string[]; voice: string; age: number;
|
||||
}
|
||||
|
||||
type Handler = (data: any) => void;
|
||||
|
||||
class Bus {
|
||||
private map = new Map<string, Set<Handler>>();
|
||||
on(ev: string, fn: Handler) {
|
||||
if (!this.map.has(ev)) this.map.set(ev, new Set());
|
||||
this.map.get(ev)!.add(fn);
|
||||
return () => this.off(ev, fn);
|
||||
}
|
||||
once(ev: string, fn: Handler) {
|
||||
const wrap: Handler = (d) => { this.off(ev, wrap); fn(d); };
|
||||
this.on(ev, wrap);
|
||||
}
|
||||
off(ev: string, fn: Handler) { this.map.get(ev)?.delete(fn); }
|
||||
emit(ev: string, data?: any) { this.map.get(ev)?.forEach(fn => { try { fn(data); } catch (e) { console.error(e); } }); }
|
||||
}
|
||||
export const bus = new Bus();
|
||||
|
||||
export const S = {
|
||||
connected: false,
|
||||
yourId: '',
|
||||
token: '' as string,
|
||||
name: '',
|
||||
zone: 'town' as string, // 'town' | 'home:<name>'
|
||||
profile: null as Profile | null,
|
||||
time: { day: 1, minutes: 450 }, // interpolated locally
|
||||
timeScale: 60,
|
||||
weather: 'sunny',
|
||||
online: 1,
|
||||
// local simulation
|
||||
needs: { hunger: 82, energy: 88, hygiene: 90, fun: 70, social: 65, comfort: 75 } as Record<Need, number>,
|
||||
moodlets: [] as Moodlet[],
|
||||
money: 0,
|
||||
chatOpen: false,
|
||||
buildMode: false,
|
||||
audioOn: true,
|
||||
};
|
||||
|
||||
export function relLabel(f: number): string {
|
||||
if (f >= 75) return 'Best Friend';
|
||||
if (f >= 50) return 'Close Friend';
|
||||
if (f >= 25) return 'Friend';
|
||||
if (f >= 10) return 'Acquaintance';
|
||||
return 'Stranger';
|
||||
}
|
||||
|
||||
export function relKey(type: 'npc' | 'p', id: string) { return `${type}:${id.toLowerCase()}`; }
|
||||
@@ -0,0 +1,376 @@
|
||||
/* ============================================================
|
||||
LifeTown Online — original UI identity
|
||||
Rounded panels, soft shadows, coral/teal brand, friendly type.
|
||||
============================================================ */
|
||||
:root {
|
||||
--coral: #ff7e5f;
|
||||
--coral-deep: #f0643c;
|
||||
--teal: #35c4b5;
|
||||
--teal-deep: #1fa396;
|
||||
--gold: #ffcf6b;
|
||||
--ink: #141826;
|
||||
--ink-2: #1d2338;
|
||||
--paper: #fff7f0;
|
||||
--text: #ffffff;
|
||||
--dim: rgba(255,255,255,.62);
|
||||
--glass: rgba(18, 22, 38, .82);
|
||||
--glass-border: rgba(255,255,255,.09);
|
||||
--radius: 18px;
|
||||
--shadow: 0 10px 30px rgba(0,0,0,.35);
|
||||
font-size: 16px;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
|
||||
html, body { height: 100%; overflow: hidden; }
|
||||
body {
|
||||
font-family: "Nunito", "Quicksand", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
|
||||
background: #0d1020; color: var(--text);
|
||||
user-select: none; -webkit-user-select: none;
|
||||
touch-action: none;
|
||||
}
|
||||
#app { position: fixed; inset: 0; }
|
||||
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
|
||||
|
||||
.glass {
|
||||
background: var(--glass);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* ---------- buttons ---------- */
|
||||
.btn {
|
||||
border: 0; cursor: pointer; color: #fff;
|
||||
border-radius: 999px; padding: 12px 22px;
|
||||
font-weight: 800; font-size: 1rem; letter-spacing: .01em;
|
||||
transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
.btn:active { transform: scale(.96); }
|
||||
.btn-primary { background: linear-gradient(135deg, var(--coral), var(--gold)); box-shadow: 0 6px 20px rgba(255,126,95,.45); }
|
||||
.btn-primary:hover { filter: brightness(1.07); }
|
||||
.btn-accent { background: linear-gradient(135deg, var(--teal), #56e0cf); box-shadow: 0 6px 20px rgba(53,196,181,.4); }
|
||||
.btn-ghost { background: transparent; border: 2px solid rgba(255,255,255,.25); color: var(--dim); }
|
||||
.btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,.5); }
|
||||
.btn-big { font-size: 1.15rem; padding: 14px 30px; width: 100%; }
|
||||
.iconbtn {
|
||||
background: rgba(255,255,255,.08); border: 1px solid var(--glass-border); color: #fff;
|
||||
width: 38px; height: 38px; border-radius: 12px; cursor: pointer; font-size: 1.05rem;
|
||||
transition: background .15s ease, transform .12s ease;
|
||||
}
|
||||
.iconbtn:hover { background: rgba(255,255,255,.16); }
|
||||
.iconbtn:active { transform: scale(.92); }
|
||||
|
||||
input, select {
|
||||
background: rgba(255,255,255,.07); border: 1px solid var(--glass-border);
|
||||
color: #fff; border-radius: 12px; padding: 11px 14px; font: inherit; outline: none; width: 100%;
|
||||
}
|
||||
input:focus, select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(53,196,181,.25); }
|
||||
select option { color: #14202b; }
|
||||
input[type="range"] { padding: 0; height: 26px; accent-color: var(--coral); }
|
||||
|
||||
/* ---------- title screen ---------- */
|
||||
.screen { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; flex-direction: column; }
|
||||
.title-sky {
|
||||
position: absolute; inset: 0;
|
||||
background:
|
||||
radial-gradient(1200px 500px at 70% -10%, rgba(255,207,107,.28), transparent 60%),
|
||||
radial-gradient(900px 480px at 15% 110%, rgba(53,196,181,.30), transparent 60%),
|
||||
linear-gradient(180deg, #10152b 0%, #1a2140 55%, #242f57 100%);
|
||||
}
|
||||
.title-sky::after {
|
||||
content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
|
||||
background:
|
||||
radial-gradient(60px 22px at 12% 88%, rgba(255,255,255,.10), transparent 70%),
|
||||
radial-gradient(90px 30px at 32% 94%, rgba(255,255,255,.08), transparent 70%),
|
||||
radial-gradient(70px 26px at 58% 90%, rgba(255,255,255,.09), transparent 70%),
|
||||
radial-gradient(110px 36px at 82% 96%, rgba(255,255,255,.07), transparent 70%);
|
||||
}
|
||||
.title-card { position: relative; width: min(420px, 92vw); padding: 34px 30px 26px; text-align: center; animation: rise .6s cubic-bezier(.2,.9,.3,1.2); }
|
||||
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.97);} to { opacity:1; transform:none; } }
|
||||
.wordmark {
|
||||
font-size: 3rem; font-weight: 900; letter-spacing: -.02em;
|
||||
background: linear-gradient(120deg, #ffd98a, var(--coral) 55%, #ff9a76);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
filter: drop-shadow(0 4px 14px rgba(255,126,95,.35));
|
||||
}
|
||||
.wordmark span { font-weight: 400; }
|
||||
.wordmark.small { font-size: 1.5rem; margin-bottom: 4px; }
|
||||
.tagline { color: var(--dim); margin: 6px 0 22px; font-size: .95rem; letter-spacing: .04em; }
|
||||
.field-row { margin-bottom: 14px; }
|
||||
#screen-title .btn { margin-top: 10px; }
|
||||
.hint { margin-top: 14px; font-size: .85rem; color: var(--dim); min-height: 1.2em; }
|
||||
.title-foot { position: absolute; bottom: 14px; color: var(--dim); font-size: .8rem; letter-spacing: .06em; }
|
||||
|
||||
/* ---------- creator ---------- */
|
||||
#screen-creator { background: linear-gradient(180deg,#131a33,#1c2447); }
|
||||
.creator-layout { display: flex; gap: 18px; width: min(1060px, 96vw); height: min(700px, 94vh); align-items: stretch; }
|
||||
#creator-preview { flex: 1.1; border-radius: 24px; overflow: hidden; position: relative;
|
||||
background: radial-gradient(500px 320px at 50% 68%, rgba(255,178,120,.16), transparent 65%), linear-gradient(180deg,#18203f,#232c54);
|
||||
border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
|
||||
.creator-panel { flex: 1; display: flex; flex-direction: column; padding: 18px; gap: 10px; }
|
||||
.creator-scroll { flex: 1; overflow-y: auto; padding-right: 6px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
|
||||
.creator-scroll section { display: flex; flex-direction: column; gap: 7px; }
|
||||
.creator-scroll label { font-size: .82rem; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
|
||||
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
|
||||
.chip {
|
||||
padding: 7px 13px; border-radius: 999px; cursor: pointer; font-size: .86rem; font-weight: 700;
|
||||
background: rgba(255,255,255,.07); border: 1.5px solid transparent; transition: all .13s ease;
|
||||
}
|
||||
.chip:hover { background: rgba(255,255,255,.13); }
|
||||
.chip.sel { background: linear-gradient(135deg, rgba(255,126,95,.28), rgba(255,207,107,.22)); border-color: var(--coral); color: #fff; }
|
||||
.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
|
||||
.swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2.5px solid transparent; outline: 2px solid rgba(255,255,255,.12); transition: transform .12s ease; }
|
||||
.swatch:hover { transform: scale(1.12); }
|
||||
.swatch.sel { border-color: #fff; outline-color: rgba(255,255,255,.4); }
|
||||
.dim { color: var(--dim); font-weight: 600; text-transform: none; letter-spacing: 0; }
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.creator-layout { flex-direction: column; height: 96vh; }
|
||||
#creator-preview { min-height: 200px; flex: .7; }
|
||||
}
|
||||
|
||||
/* ---------- HUD ---------- */
|
||||
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
|
||||
#hud > * { pointer-events: auto; }
|
||||
|
||||
#topbar {
|
||||
position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
|
||||
display: flex; gap: 8px; align-items: center; pointer-events: auto; flex-wrap: wrap; justify-content: center;
|
||||
max-width: 98vw;
|
||||
}
|
||||
.pill {
|
||||
background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px;
|
||||
padding: 8px 15px; font-weight: 800; font-size: .92rem; display: flex; gap: 7px; align-items: center;
|
||||
backdrop-filter: blur(12px); box-shadow: 0 4px 14px rgba(0,0,0,.3);
|
||||
}
|
||||
.coin { color: var(--gold); }
|
||||
.money-pill #tb-money { color: var(--gold); }
|
||||
.top-actions { display: flex; gap: 6px; }
|
||||
|
||||
/* toasts */
|
||||
#toasts { position: absolute; top: 64px; right: 12px; display: flex; flex-direction: column; gap: 8px; width: min(320px, 84vw); z-index: 60; }
|
||||
.toast {
|
||||
background: var(--glass); border: 1px solid var(--glass-border); border-left: 4px solid var(--teal);
|
||||
border-radius: 14px; padding: 11px 14px; box-shadow: var(--shadow);
|
||||
animation: slideIn .35s cubic-bezier(.2,.9,.3,1.15), fadeOut .4s ease 4.6s forwards;
|
||||
display: flex; gap: 10px; align-items: flex-start; cursor: default;
|
||||
}
|
||||
.toast.gold { border-left-color: var(--gold); }
|
||||
.toast.coral { border-left-color: var(--coral); }
|
||||
.toast .t-icon { font-size: 1.3rem; }
|
||||
.toast b { display: block; font-size: .9rem; }
|
||||
.toast p { font-size: .83rem; color: var(--dim); }
|
||||
@keyframes slideIn { from { opacity: 0; transform: translateX(30px);} to { opacity:1; transform:none;} }
|
||||
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }
|
||||
|
||||
/* context panel (right) */
|
||||
#context-panel { position: absolute; right: 12px; top: 190px; width: 230px; padding: 12px 14px; max-height: 34vh; overflow-y: auto; }
|
||||
.cp-title { font-weight: 900; font-size: .8rem; letter-spacing: .1em; color: var(--gold); margin-bottom: 8px; }
|
||||
.ctx-item { display: flex; gap: 9px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.08); font-size: .85rem; }
|
||||
.ctx-item:last-child { border-bottom: 0; }
|
||||
.ctx-item .ci-ico { font-size: 1.05rem; }
|
||||
.ctx-item small { color: var(--dim); display: block; }
|
||||
|
||||
/* need rings + mood + action bar */
|
||||
#bottombar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none; }
|
||||
#bottombar > * { pointer-events: auto; }
|
||||
#need-rings { display: flex; gap: 9px; background: var(--glass); border-radius: 999px; padding: 9px 16px; border: 1px solid var(--glass-border); backdrop-filter: blur(12px); }
|
||||
.ring { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
|
||||
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
|
||||
.ring .r-bg { stroke: rgba(255,255,255,.12); }
|
||||
.ring .r-fg { transition: stroke-dashoffset .4s ease; stroke-linecap: round; }
|
||||
.ring .r-emoji { font-size: 1.05rem; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
|
||||
#mood-chip { display: flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; font-weight: 800; font-size: .92rem; }
|
||||
#mood-emoji { font-size: 1.2rem; }
|
||||
#action-bar { display: flex; gap: 9px; }
|
||||
.abtn {
|
||||
width: 64px; height: 60px; border-radius: 18px; border: 1px solid var(--glass-border);
|
||||
background: var(--glass); backdrop-filter: blur(12px); color: #fff; cursor: pointer;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
|
||||
font-size: 1.35rem; box-shadow: 0 6px 16px rgba(0,0,0,.35); transition: transform .12s ease, background .15s ease;
|
||||
}
|
||||
.abtn span { font-size: .62rem; font-weight: 800; letter-spacing: .06em; color: var(--dim); }
|
||||
.abtn:hover { background: rgba(40,48,80,.9); }
|
||||
.abtn:active { transform: scale(.93); }
|
||||
.abtn.active { background: linear-gradient(135deg, rgba(255,126,95,.75), rgba(255,207,107,.6)); border-color: var(--coral); }
|
||||
|
||||
/* prompt */
|
||||
#prompt {
|
||||
position: absolute; left: 50%; bottom: 172px; transform: translateX(-50%);
|
||||
background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px;
|
||||
padding: 9px 18px; display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: .95rem;
|
||||
backdrop-filter: blur(10px); box-shadow: var(--shadow);
|
||||
}
|
||||
#prompt kbd { background: #fff; color: #16203a; border-radius: 8px; padding: 3px 9px; font-weight: 900; font-family: inherit; font-size: .85rem; box-shadow: 0 2px 0 #c9cbd4; }
|
||||
|
||||
/* speech bubbles anchored via JS transforms */
|
||||
#bubble-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
|
||||
.bubble {
|
||||
position: absolute; transform: translate(-50%, -100%);
|
||||
background: rgba(255,255,255,.96); color: #1c2333; font-weight: 700; font-size: .86rem;
|
||||
padding: 8px 13px; border-radius: 14px; max-width: 210px; text-align: center;
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,.3); line-height: 1.25;
|
||||
}
|
||||
.bubble::after {
|
||||
content:""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
|
||||
border: 8px solid transparent; border-top-color: rgba(255,255,255,.96); border-bottom: 0;
|
||||
}
|
||||
.bubble.npc::before { content:""; }
|
||||
.bubble.fade { animation: bubbleIn .25s cubic-bezier(.2,.9,.3,1.2), bubbleOut .5s ease 3.8s forwards; }
|
||||
@keyframes bubbleIn { from { opacity:0; transform:translate(-50%,-90%) scale(.8);} to {opacity:1; transform:translate(-50%,-100%) scale(1);} }
|
||||
@keyframes bubbleOut { to { opacity:0; } }
|
||||
.name-tag {
|
||||
position: absolute; transform: translate(-50%, -100%); pointer-events: none;
|
||||
font-size: .74rem; font-weight: 900; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.8);
|
||||
background: rgba(16,20,36,.55); padding: 3px 10px; border-radius: 999px; white-space: nowrap;
|
||||
}
|
||||
|
||||
/* chat */
|
||||
#chat-panel { position: absolute; left: 12px; bottom: 12px; width: min(360px, 46vw); pointer-events: auto; }
|
||||
#chat-log {
|
||||
max-height: 148px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
|
||||
padding: 10px 12px; background: rgba(14,18,32,.72); border: 1px solid var(--glass-border);
|
||||
border-radius: 14px; backdrop-filter: blur(10px); scrollbar-width: thin;
|
||||
mask-image: linear-gradient(to bottom, transparent, black 12%);
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent, black 12%);
|
||||
}
|
||||
.chat-line { font-size: .84rem; line-height: 1.35; word-break: break-word; }
|
||||
.chat-line b { color: var(--gold); }
|
||||
.chat-line.sys { color: var(--teal); font-style: italic; }
|
||||
.chat-line.glob b { color: #8fb7ff; }
|
||||
.chat-input-row { display: flex; gap: 6px; margin-top: 6px; }
|
||||
.chat-input-row input { flex: 1; }
|
||||
.chat-input-row select { width: 92px; }
|
||||
|
||||
/* touch controls */
|
||||
#touch-ui { position: absolute; inset: 0; pointer-events: none; }
|
||||
#joy-base {
|
||||
position: absolute; left: 26px; bottom: 96px; width: 128px; height: 128px; border-radius: 50%;
|
||||
background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.18); pointer-events: auto;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
#joy-knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 30%, #fff, #cfd6ea); transform: translate(-50%,-50%); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
|
||||
#touch-buttons { position: absolute; right: 22px; bottom: 110px; display: flex; flex-direction: column; gap: 12px; pointer-events: auto; }
|
||||
#touch-buttons button {
|
||||
width: 66px; height: 66px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25);
|
||||
background: rgba(18,22,38,.75); color: #fff; font-size: 1.5rem; backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/* interaction wheel */
|
||||
#wheel { position: absolute; z-index: 45; padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 220px; animation: pop .18s cubic-bezier(.2,.9,.3,1.2); }
|
||||
@keyframes pop { from { opacity: 0; transform: scale(.92);} to { opacity: 1; transform: scale(1);} }
|
||||
.wheel-group { font-size: .72rem; font-weight: 900; color: var(--gold); letter-spacing: .1em; margin: 6px 6px 2px; text-transform: uppercase; }
|
||||
.wheel-item {
|
||||
display: flex; justify-content: space-between; align-items: center; gap: 14px;
|
||||
padding: 9px 12px; border-radius: 12px; cursor: pointer; font-weight: 700; font-size: .92rem;
|
||||
}
|
||||
.wheel-item:hover { background: rgba(255,255,255,.1); }
|
||||
.wheel-item.locked { opacity: .42; cursor: not-allowed; }
|
||||
.wheel-item small { color: var(--dim); font-weight: 700; }
|
||||
|
||||
/* phone */
|
||||
#phone { position: absolute; right: 14px; bottom: 90px; z-index: 50; }
|
||||
.phone-frame {
|
||||
width: 340px; height: min(600px, 78vh); border-radius: 34px; padding: 14px;
|
||||
background: linear-gradient(160deg, #232a44, #12162a); border: 1px solid rgba(255,255,255,.14);
|
||||
box-shadow: 0 24px 60px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 10px;
|
||||
animation: pop .2s ease;
|
||||
}
|
||||
.phone-top { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 800; color: var(--dim); padding: 0 8px; }
|
||||
#phone-screen { flex: 1; background: linear-gradient(180deg,#171d36,#10142a); border-radius: 20px; overflow-y: auto; padding: 14px; scrollbar-width: thin; touch-action: pan-y; }
|
||||
.creator-scroll, .cat-grid, #chat-log, #cp-content, .modal-card { touch-action: pan-y; }
|
||||
.phone-dock { display: flex; justify-content: space-around; gap: 6px; }
|
||||
.papp-btn { width: 52px; height: 52px; border-radius: 16px; border: 0; font-size: 1.4rem; cursor: pointer;
|
||||
background: rgba(255,255,255,.08); transition: transform .12s ease, background .15s; position: relative; }
|
||||
.papp-btn:hover { background: rgba(255,255,255,.15); }
|
||||
.papp-btn:active { transform: scale(.9); }
|
||||
.papp-btn.on { background: linear-gradient(135deg, var(--coral), var(--gold)); }
|
||||
.papp-title { font-weight: 900; font-size: 1.2rem; margin-bottom: 12px; display:flex; align-items:center; gap:8px;}
|
||||
.contact-card, .list-card {
|
||||
display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
|
||||
background: rgba(255,255,255,.05); margin-bottom: 8px;
|
||||
}
|
||||
.contact-face { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; }
|
||||
.rel-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 5px; }
|
||||
.rel-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--teal), #7fe3d7); }
|
||||
.rel-bar i.rom { background: linear-gradient(90deg, #ff7e9d, #ffb3c7); }
|
||||
.stat-row { display: flex; justify-content: space-between; padding: 10px 4px; border-bottom: 1px dashed rgba(255,255,255,.1); font-size: .92rem; }
|
||||
.stat-row b { color: var(--gold); }
|
||||
.tx-in { color: #6fe3b1; font-weight: 800; } .tx-out { color: #ff9d9d; font-weight: 800; }
|
||||
.post-card { background: rgba(255,255,255,.05); border-radius: 16px; padding: 12px; margin-bottom: 10px; }
|
||||
.post-head { display:flex; gap:10px; align-items:center; margin-bottom:8px; font-weight:800; font-size:.9rem;}
|
||||
.post-img { width:100%; border-radius:12px; display:block; }
|
||||
.post-actions { display:flex; gap:16px; padding-top:8px; color:var(--dim); font-size:.85rem; font-weight:700;}
|
||||
|
||||
/* build bar */
|
||||
#buildbar {
|
||||
position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
|
||||
display: flex; gap: 10px; align-items: center; padding: 10px 14px; flex-wrap: wrap; justify-content: center;
|
||||
background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; backdrop-filter: blur(14px);
|
||||
box-shadow: var(--shadow); z-index: 30; max-width: 96vw;
|
||||
}
|
||||
.bb-title { font-weight: 900; color: var(--gold); letter-spacing: .06em; font-size: .85rem; }
|
||||
.bb-tools { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.tool {
|
||||
padding: 8px 14px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
|
||||
background: rgba(255,255,255,.07); color: #fff; font-weight: 800; font-size: .85rem;
|
||||
}
|
||||
.tool:hover { background: rgba(255,255,255,.13); }
|
||||
.tool.active { border-color: var(--teal); background: rgba(53,196,181,.2); }
|
||||
#buildbar .btn { padding: 9px 16px; font-size: .85rem; }
|
||||
|
||||
/* catalog / inventory grids */
|
||||
.modal { position: absolute; inset: 0; background: rgba(8,10,20,.55); display: grid; place-items: center; z-index: 70; backdrop-filter: blur(4px); }
|
||||
.modal-card { width: min(720px, 94vw); max-height: 84vh; display: flex; flex-direction: column; padding: 16px; animation: pop .18s ease; }
|
||||
.modal-card.small { width: min(520px, 94vw); }
|
||||
.modal-head { display: flex; justify-content: space-between; align-items: center; font-weight: 900; font-size: 1.1rem; margin-bottom: 12px; }
|
||||
.cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
|
||||
.cat-tab { padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.07); cursor: pointer; font-weight: 800; font-size: .82rem; border: 1.5px solid transparent; }
|
||||
.cat-tab.on { border-color: var(--coral); background: rgba(255,126,95,.18); }
|
||||
.cat-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding-bottom: 6px; scrollbar-width: thin; }
|
||||
.cat-item {
|
||||
border-radius: 16px; padding: 10px; background: rgba(255,255,255,.05); border: 1.5px solid transparent;
|
||||
display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: all .13s ease; position: relative;
|
||||
}
|
||||
.cat-item:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
|
||||
.cat-item.locked { opacity: .45; }
|
||||
.cat-item .ci-name { font-weight: 800; font-size: .86rem; line-height: 1.2; }
|
||||
.cat-item .ci-meta { font-size: .75rem; color: var(--dim); display: flex; justify-content: space-between; }
|
||||
.cat-item .ci-price { color: var(--gold); font-weight: 900; }
|
||||
.cat-item .cat-ico { height: 74px; display: grid; place-items: center; font-size: 2.2rem; border-radius: 12px; background: rgba(255,255,255,.04); }
|
||||
.cat-item .fx-note { font-size: .68rem; color: var(--teal); font-weight: 700; }
|
||||
|
||||
/* minimap */
|
||||
#minimap {
|
||||
position: absolute; right: 12px; bottom: 90px; border-radius: 18px; border: 1px solid var(--glass-border);
|
||||
background: rgba(14,18,32,.8); backdrop-filter: blur(8px); box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* loading */
|
||||
#loading { position: absolute; inset: 0; z-index: 80; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; background: #10152b; }
|
||||
.loader-ring { width: 54px; height: 54px; border-radius: 50%; border: 5px solid rgba(255,255,255,.12); border-top-color: var(--coral); animation: spin 1s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg);} }
|
||||
#loading-text { color: var(--dim); font-weight: 700; letter-spacing: .04em; }
|
||||
|
||||
/* event banner */
|
||||
#event-banner {
|
||||
position: absolute; top: 108px; left: 50%; transform: translateX(-50%);
|
||||
background: linear-gradient(135deg, rgba(255,126,95,.92), rgba(255,207,107,.88));
|
||||
color: #20141f; font-weight: 900; padding: 10px 26px; border-radius: 999px; letter-spacing: .03em;
|
||||
box-shadow: 0 8px 26px rgba(255,126,95,.5); z-index: 35; animation: pop .3s ease; pointer-events: none;
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@media (max-width: 900px) {
|
||||
#context-panel { display: none; }
|
||||
#minimap { display: none; }
|
||||
.abtn { width: 52px; height: 52px; font-size: 1.1rem; border-radius: 15px; }
|
||||
.ring { width: 36px; height: 36px; }
|
||||
.pill { padding: 6px 11px; font-size: .8rem; }
|
||||
#chat-panel { width: min(300px, 60vw); }
|
||||
#chat-log { max-height: 90px; }
|
||||
.wordmark { font-size: 2.3rem; }
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
// LifeTown Online — needs simulation, moodlets & mood derivation (client-side sim,
|
||||
// synced to server periodically).
|
||||
import { S, bus, Moodlet, Need } from './state';
|
||||
import { NEED_DECAY_PER_GAME_HOUR, MOOD_NEEDS, MOOD_EMOJI } from '../../shared/data.mjs';
|
||||
|
||||
const clamp = (v: number, a = 0, b = 100) => Math.max(a, Math.min(b, v));
|
||||
|
||||
export const NeedsSys = {
|
||||
// multipliers granted by furniture/environment auras
|
||||
auras: { energyRate: 1, hygieneRate: 1, funRate: 1, comfortRate: 1, hungerRate: 1, cookSpeed: 1, productivity: 1 } as Record<string, number>,
|
||||
sleeping: false,
|
||||
|
||||
decayTick(gameMinutesDelta: number) {
|
||||
const hours = gameMinutesDelta / 60;
|
||||
const n = S.needs;
|
||||
n.hunger = clamp(n.hunger - NEED_DECAY_PER_GAME_HOUR.hunger * hours);
|
||||
n.energy = clamp(n.energy - NEED_DECAY_PER_GAME_HOUR.energy * hours * (this.sleeping ? -2.2 : 1));
|
||||
n.hygiene = clamp(n.hygiene - NEED_DECAY_PER_GAME_HOUR.hygiene * hours);
|
||||
n.fun = clamp(n.fun - NEED_DECAY_PER_GAME_HOUR.fun * hours * this.auras.funRate);
|
||||
n.social = clamp(n.social - NEED_DECAY_PER_GAME_HOUR.social * hours);
|
||||
n.comfort = clamp(n.comfort - NEED_DECAY_PER_GAME_HOUR.comfort * hours * this.auras.comfortRate);
|
||||
if (this.sleeping) n.energy = clamp(n.energy + 14 * hours * this.auras.energyRate);
|
||||
bus.emit('needs:update');
|
||||
this.updateMood();
|
||||
},
|
||||
|
||||
apply(fx: Partial<Record<Need | 'happiness' | 'energy' | 'fun', number>>) {
|
||||
for (const [k, v] of Object.entries(fx)) {
|
||||
if (k === 'happiness') continue;
|
||||
if (k in S.needs) (S.needs as any)[k] = clamp((S.needs as any)[k] + (v as number));
|
||||
}
|
||||
if (fx.happiness) {
|
||||
this.addMoodlet({ id: 'ev' + Date.now(), label: 'Event', emoji: fx.happiness > 0 ? '✨' : '💔', happiness: fx.happiness, expires: Date.now() + 120000 });
|
||||
}
|
||||
bus.emit('needs:update');
|
||||
this.updateMood();
|
||||
},
|
||||
|
||||
addMoodlet(m: Moodlet) {
|
||||
S.moodlets = S.moodlets.filter(x => x.id !== m.id && x.label !== m.label);
|
||||
S.moodlets.push(m);
|
||||
if (S.moodlets.length > 8) S.moodlets.shift();
|
||||
bus.emit('mood:moodlets');
|
||||
this.updateMood();
|
||||
},
|
||||
|
||||
removeMoodlet(idOrLabel: string) {
|
||||
S.moodlets = S.moodlets.filter(x => x.id !== idOrLabel && x.label !== idOrLabel);
|
||||
bus.emit('mood:moodlets');
|
||||
this.updateMood();
|
||||
},
|
||||
|
||||
/** -100..100 wellbeing score */
|
||||
score(): number {
|
||||
let acc = 0, wsum = 0;
|
||||
for (const [need, w] of MOOD_NEEDS) {
|
||||
const v = (S.needs as any)[need] ?? 50;
|
||||
acc += (v - 45) * w;
|
||||
wsum += w;
|
||||
}
|
||||
let base = acc / wsum;
|
||||
for (const m of S.moodlets) base += m.happiness;
|
||||
return Math.max(-100, Math.min(100, base));
|
||||
},
|
||||
|
||||
mood(): string {
|
||||
const sc = this.score();
|
||||
const n = S.needs;
|
||||
if (this.sleeping) return 'Relaxed';
|
||||
if (n.energy < 18) return 'Tired';
|
||||
if (n.hunger < 15) return 'Stressed';
|
||||
if (sc > 55) return S.needs.social > 70 && n.fun > 65 ? 'Excited' : 'Happy';
|
||||
if (sc > 30) return S.moodlets.some(m => m.label === 'Romance') ? 'Romantic' : 'Confident';
|
||||
if (sc > 10) return 'Relaxed';
|
||||
if (sc > -10) return S.needs.social < 25 ? 'Lonely' : 'Bored';
|
||||
if (sc > -35) return 'Sad';
|
||||
return 'Angry';
|
||||
},
|
||||
|
||||
emojiFor(mood: string) { return (MOOD_EMOJI as any)[mood] || '🙂'; },
|
||||
|
||||
updateMood() {
|
||||
const m = this.mood();
|
||||
if ((S as any)._lastMood !== m) {
|
||||
(S as any)._lastMood = m;
|
||||
bus.emit('mood:update', m);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// ---- periodic drivers ---------------------------------------
|
||||
let lastGameMin = -1;
|
||||
bus.on('world:time', () => {
|
||||
const cur = S.time.day * 1440 + S.time.minutes;
|
||||
if (lastGameMin < 0) lastGameMin = cur;
|
||||
let d = cur - lastGameMin;
|
||||
if (d < 0) d += 1440;
|
||||
lastGameMin = cur;
|
||||
if (d > 0 && d < 200) NeedsSys.decayTick(d);
|
||||
});
|
||||
@@ -0,0 +1,281 @@
|
||||
// LifeTown Online — build mode: placement tools, catalogue shopping, inventory.
|
||||
import * as THREE from 'three';
|
||||
import { S, bus } from '../state';
|
||||
import { $, el, toast, CAT_EMOJI, fmtMoney, openDialog } from './common';
|
||||
import { net } from '../net';
|
||||
import { CATALOG, CATALOG_BY_ID, HOUSES } from '../../../shared/data.mjs';
|
||||
import { Interior, PlacedItem } from '../gfx/interior';
|
||||
import { buildFurniture } from '../gfx/furniture';
|
||||
import { audio } from '../audio';
|
||||
|
||||
type Tool = 'place' | 'move' | 'rotate' | 'duplicate' | 'delete';
|
||||
|
||||
export class BuildUI {
|
||||
tool: Tool = 'place';
|
||||
placingItemId: string | null = null;
|
||||
ghost: THREE.Group | null = null;
|
||||
private raycaster = new THREE.Raycaster();
|
||||
private pointer = new THREE.Vector2();
|
||||
private floorPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
|
||||
private hit = new THREE.Vector3();
|
||||
private selectedEntry: any = null;
|
||||
private dragging: any = null;
|
||||
|
||||
constructor(
|
||||
public getInterior: () => Interior | null,
|
||||
public camera: THREE.PerspectiveCamera,
|
||||
public canvas: HTMLCanvasElement,
|
||||
) {
|
||||
this.initToolbar();
|
||||
this.initCatalogUI();
|
||||
this.initInventoryUI();
|
||||
this.canvas.addEventListener('pointermove', (e) => {
|
||||
this.pointer.set((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1);
|
||||
this.onPointerMove(e);
|
||||
});
|
||||
this.canvas.addEventListener('pointerdown', (e) => this.onCanvasClick(e));
|
||||
}
|
||||
|
||||
// ---------- toolbar ----------
|
||||
private initToolbar() {
|
||||
document.querySelectorAll('#buildbar .tool').forEach(b =>
|
||||
b.addEventListener('click', () => this.setTool((b as HTMLElement).dataset.tool as Tool)));
|
||||
$('#btn-shop').addEventListener('click', () => this.openCatalog());
|
||||
$('#btn-exit-build').addEventListener('click', () => bus.emit('build:exit'));
|
||||
}
|
||||
|
||||
setTool(t: Tool) {
|
||||
this.tool = t;
|
||||
document.querySelectorAll('#buildbar .tool').forEach(b => b.classList.toggle('active', (b as HTMLElement).dataset.tool === t));
|
||||
if (t !== 'place') this.clearGhost();
|
||||
audio.click();
|
||||
}
|
||||
|
||||
startPlacing(itemId: string) {
|
||||
this.placingItemId = itemId;
|
||||
this.setTool('place');
|
||||
this.makeGhost(itemId);
|
||||
}
|
||||
|
||||
private makeGhost(itemId: string) {
|
||||
this.clearGhost();
|
||||
const def = CATALOG_BY_ID[itemId];
|
||||
if (!def) return;
|
||||
this.ghost = buildFurniture(itemId);
|
||||
this.ghost.traverse(o => { const m = o as THREE.Mesh; if (m.material) { m.material = (m.material as any).clone(); if ((m.material as any).emissive !== undefined) (m.material as any).emissive = new THREE.Color(0x35c4b5); (m.material as any).transparent = true; (m.material as any).opacity = 0.65; } });
|
||||
this.ghost.visible = false;
|
||||
this.getInterior()?.group.add(this.ghost);
|
||||
}
|
||||
clearGhost() {
|
||||
if (this.ghost) { this.ghost.parent?.remove(this.ghost); this.ghost = null; }
|
||||
}
|
||||
|
||||
private onPointerMove(e: PointerEvent) {
|
||||
void e;
|
||||
if (!S.buildMode || !this.ghost || !this.placingItemId) return;
|
||||
const int = this.getInterior(); if (!int) return;
|
||||
this.raycaster.setFromCamera(this.pointer, this.camera);
|
||||
if (!this.raycaster.ray.intersectPlane(this.floorPlane, this.hit)) return;
|
||||
const b = int.bounds();
|
||||
const sx = Math.round(THREE.MathUtils.clamp(this.hit.x, -b.hw, b.hw) / int.snap) * int.snap;
|
||||
const sz = Math.round(THREE.MathUtils.clamp(this.hit.z, -b.hd, b.hd) / int.snap) * int.snap;
|
||||
this.ghost.position.set(sx, 0, sz);
|
||||
this.ghost.visible = true;
|
||||
}
|
||||
|
||||
private onCanvasClick(e: MouseEvent) {
|
||||
if (!S.buildMode || e.target !== this.canvas) return;
|
||||
const int = this.getInterior(); if (!int) return;
|
||||
if (this.tool === 'place' && this.placingItemId && this.ghost && this.ghost.visible) {
|
||||
// must own a copy in inventory
|
||||
const invIdx = S.profile?.inventory.findIndex(i => i.itemId === this.placingItemId) ?? -1;
|
||||
if (invIdx === -1) return toast('Not in inventory', 'Buy it at MapleMart first.', '🛒');
|
||||
S.profile!.inventory.splice(invIdx, 1);
|
||||
bus.emit('inv:update');
|
||||
const item: PlacedItem = {
|
||||
itemId: this.placingItemId,
|
||||
x: +this.ghost.position.x.toFixed(2),
|
||||
z: +this.ghost.position.z.toFixed(2),
|
||||
rot: this.ghost.rotation.y,
|
||||
};
|
||||
int.addFurniture(item);
|
||||
this.persistLayout(int);
|
||||
audio.pop();
|
||||
toast('Placed!', `${CATALOG_BY_ID[item.itemId].name} placed.`, '🔨');
|
||||
return;
|
||||
}
|
||||
if (this.tool === 'delete' || this.tool === 'rotate' || this.tool === 'move' || this.tool === 'duplicate') {
|
||||
// pick nearest furniture to click
|
||||
this.raycaster.setFromCamera(this.pointer, this.camera);
|
||||
const hits = this.raycaster.intersectObjects(int.furniture.map(f => f.group), true);
|
||||
if (!hits.length) return;
|
||||
let obj: THREE.Object3D | null = hits[0].object;
|
||||
while (obj && !int.furniture.some(f => f.group === obj)) obj = obj.parent;
|
||||
const entry = int.furniture.find(f => f.group === obj);
|
||||
if (!entry) return;
|
||||
this.selectedEntry = entry;
|
||||
if (this.tool === 'delete') {
|
||||
const refund = Math.round((CATALOG_BY_ID[entry.item.itemId]?.price ?? 0) * 0.6);
|
||||
int.removeEntry(entry);
|
||||
net.send({ t: 'sell_placed', itemId: entry.item.itemId });
|
||||
this.persistLayout(int);
|
||||
toast('Removed', `${refund} TC refunded by MapleMart`, '🗑');
|
||||
audio.pop();
|
||||
} else if (this.tool === 'rotate') {
|
||||
entry.item.rot = (entry.item.rot + Math.PI / 4) % (Math.PI * 2);
|
||||
entry.group.rotation.y = entry.item.rot;
|
||||
this.persistLayout(int);
|
||||
audio.click();
|
||||
} else if (this.tool === 'duplicate') {
|
||||
// duplicating requires owning another copy; charge nothing but check inventory
|
||||
const invIdx = S.profile?.inventory.findIndex(i => i.itemId === entry.item.itemId) ?? -1;
|
||||
if (invIdx === -1) return toast('No spare copy', 'Duplicate needs the same item in your inventory.', '⧉');
|
||||
S.profile!.inventory.splice(invIdx, 1);
|
||||
const copy: PlacedItem = { itemId: entry.item.itemId, x: +(entry.item.x + 1).toFixed(2), z: entry.item.z, rot: entry.item.rot };
|
||||
int.addFurniture(copy);
|
||||
this.persistLayout(int);
|
||||
audio.pop();
|
||||
} else if (this.tool === 'move') {
|
||||
// drag mode: move with pointer until next click
|
||||
this.dragging = entry;
|
||||
toast('Moving…', 'Click a spot to drop it.', '✥');
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (this.dragging) {
|
||||
this.dragging.item.x = +this.hit.x.toFixed(2);
|
||||
this.dragging.item.z = +this.hit.z.toFixed(2);
|
||||
this.dragging.group.position.x = this.dragging.item.x;
|
||||
this.dragging.group.position.z = this.dragging.item.z;
|
||||
this.persistLayout(int);
|
||||
this.dragging = null;
|
||||
audio.pop();
|
||||
}
|
||||
}
|
||||
|
||||
persistLayout(int: Interior) {
|
||||
const layout = int.furniture.map(f => f.item);
|
||||
if (S.profile) S.profile.homeLayout = layout;
|
||||
net.send({ t: 'place_home', layout });
|
||||
}
|
||||
|
||||
update() { /* ghost follows in pointermove */ }
|
||||
|
||||
// ---------- catalog ----------
|
||||
private activeTab = 'all';
|
||||
private initCatalogUI() {
|
||||
$('#catalog-close').addEventListener('click', () => $('#catalog').classList.add('hidden'));
|
||||
const tabs = $('#cat-tabs');
|
||||
const cats: string[] = ['all', ...new Set<string>(CATALOG.map((c: any) => c.cat))];
|
||||
for (const c of cats) {
|
||||
const t = el('div', 'cat-tab' + (c === 'all' ? ' on' : ''), c === 'all' ? 'All' : (c[0].toUpperCase() + c.slice(1)));
|
||||
t.addEventListener('click', () => {
|
||||
this.activeTab = c;
|
||||
tabs.querySelectorAll('.cat-tab').forEach(x => x.classList.toggle('on', x === t));
|
||||
this.renderCatalogGrid();
|
||||
});
|
||||
tabs.appendChild(t);
|
||||
}
|
||||
this.renderCatalogGrid();
|
||||
bus.on('inv:update', () => this.renderCatalogGrid());
|
||||
bus.on('eco:money', () => this.renderCatalogGrid());
|
||||
}
|
||||
|
||||
renderCatalogGrid() {
|
||||
const grid = $('#cat-grid');
|
||||
if ($('#catalog').classList.contains('hidden')) return;
|
||||
grid.innerHTML = '';
|
||||
const lvl = S.profile?.level ?? 1;
|
||||
for (const item of CATALOG) {
|
||||
if (this.activeTab !== 'all' && item.cat !== this.activeTab) continue;
|
||||
const ownedCount = S.profile?.inventory.filter(i => i.itemId === item.id).length ?? 0;
|
||||
const locked = lvl < item.lvl;
|
||||
const poor = S.money < item.price;
|
||||
const fxNotes: string[] = [];
|
||||
for (const [k, v] of Object.entries(item.fx)) {
|
||||
if (k.endsWith('Rate') || k === 'cookSpeed' || k === 'productivity') fxNotes.push(`${k.replace('Rate', '')} +${Math.round(((v as number) - 1) * 100)}%`);
|
||||
if (v === true) fxNotes.push(k.replace('Aura', ' aura'));
|
||||
}
|
||||
const card = el('div', 'cat-item' + (locked ? ' locked' : ''), `
|
||||
<div class="cat-ico">${CAT_EMOJI[item.cat] || '📦'}</div>
|
||||
<div class="ci-name">${item.name}</div>
|
||||
<div class="fx-note">${fxNotes.slice(0, 2).join(' · ')}</div>
|
||||
<div class="ci-meta"><span class="ci-price">${item.price.toLocaleString()} ◉</span><span>Lv ${item.lvl}${ownedCount ? ` · own ×${ownedCount}` : ''}</span></div>`);
|
||||
card.addEventListener('click', () => {
|
||||
if (locked) return toast('Locked', `Unlocks at level ${item.lvl}.`, '🔒');
|
||||
if (poor) return toast('Too pricey', `You need ${fmtMoney(item.price)} TC.`, '💸');
|
||||
net.send({ t: 'buy_item', itemId: item.id });
|
||||
audio.cash();
|
||||
// streamline: in build mode go straight to placing the new piece
|
||||
if (S.buildMode && S.zone !== 'town') {
|
||||
$('#catalog').classList.add('hidden');
|
||||
this.startPlacing(item.id);
|
||||
toast('Place it!', 'Click inside your home to drop it (grid-snapped).', '🔨');
|
||||
}
|
||||
});
|
||||
grid.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
openCatalog() {
|
||||
$('#catalog').classList.remove('hidden');
|
||||
this.renderCatalogGrid();
|
||||
audio.click();
|
||||
}
|
||||
|
||||
// ---------- inventory ----------
|
||||
private initInventoryUI() {
|
||||
$('#inv-close').addEventListener('click', () => $('#inventory').classList.add('hidden'));
|
||||
bus.on('inv:update', () => this.renderInventory());
|
||||
bus.on('profile:update', () => this.renderInventory());
|
||||
}
|
||||
|
||||
renderInventory() {
|
||||
if ($('#inventory').classList.contains('hidden')) return;
|
||||
const grid = $('#inv-grid');
|
||||
grid.innerHTML = '';
|
||||
const inv = S.profile?.inventory || [];
|
||||
if (!inv.length) grid.appendChild(el('div', 'dim', 'Empty — visit MapleMart in town!'));
|
||||
for (const slot of inv) {
|
||||
const item = CATALOG_BY_ID[slot.itemId];
|
||||
if (!item) continue;
|
||||
const card = el('div', 'cat-item', `
|
||||
<div class="cat-ico">${CAT_EMOJI[item.cat] || '📦'}</div>
|
||||
<div class="ci-name">${item.name}</div>
|
||||
<div class="ci-meta"><span>Sell ${Math.round(item.price * .6)} ◉</span></div>`);
|
||||
const actions = el('div'); actions.style.cssText = 'display:flex;gap:6px';
|
||||
if (S.zone !== 'town') {
|
||||
const placeBtn = el('button', 'btn btn-accent', 'Place');
|
||||
placeBtn.style.cssText = 'flex:1;padding:7px;font-size:.78rem';
|
||||
placeBtn.addEventListener('click', () => {
|
||||
if (!S.buildMode) { toast('Build Mode first', 'Tap 🔨 Build, then Place.', '🔨'); return; }
|
||||
$('#inventory').classList.add('hidden');
|
||||
this.startPlacing(slot.itemId);
|
||||
});
|
||||
actions.appendChild(placeBtn);
|
||||
}
|
||||
const sellBtn = el('button', 'btn btn-ghost', 'Sell');
|
||||
sellBtn.style.cssText = 'padding:7px;font-size:.78rem';
|
||||
sellBtn.addEventListener('click', () => { net.send({ t: 'sell_item', itemId: slot.itemId }); audio.cash(); });
|
||||
actions.appendChild(sellBtn);
|
||||
card.appendChild(actions);
|
||||
grid.appendChild(card);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// house market helper reused by Home app & city hall dialog
|
||||
export function openHouseMarket() {
|
||||
openDialog('🏡 Property Market', (body) => {
|
||||
for (const h of HOUSES) {
|
||||
const owned = S.profile?.housesOwned.includes(h.id);
|
||||
const locked = (S.profile?.level ?? 1) < h.lvl;
|
||||
const row = el('div', 'stat-row', `<span><b>${h.name}</b><br><span class="dim" style="font-weight:600">${h.size[0]}×${h.size[1]} m · Level ${h.lvl}+</span></span>
|
||||
${owned ? '<span class="tx-in">Owned ✓</span>' : `<span style="display:flex;gap:10px;align-items:center"><b>${h.price.toLocaleString()} ◉</b><button class="btn btn-accent" style="padding:7px 14px">Buy</button></span>`}`);
|
||||
if (!owned && !locked) {
|
||||
(row.querySelector('button') as HTMLElement).addEventListener('click', () => net.send({ t: 'buy_house', houseId: h.id }));
|
||||
}
|
||||
body.appendChild(row);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
// LifeTown Online — chat panel: say (zone + bubble) & global channels.
|
||||
import { S, bus } from '../state';
|
||||
import { $, el } from './common';
|
||||
import { net } from '../net';
|
||||
import { audio } from '../audio';
|
||||
import { MAX_CHAT_LEN } from '../../../shared/data.mjs';
|
||||
|
||||
export function initChat() {
|
||||
const log = $('#chat-log');
|
||||
const input = $('#chat-input') as HTMLInputElement;
|
||||
const channel = $('#chat-channel') as HTMLSelectElement;
|
||||
|
||||
const addLine = (html: string, cls = '') => {
|
||||
const line = el('div', `chat-line ${cls}`, html);
|
||||
log.appendChild(line);
|
||||
while (log.children.length > 60) log.firstChild!.remove();
|
||||
log.scrollTop = log.scrollHeight;
|
||||
};
|
||||
(window as any).__chatSys = (msg: string) => addLine(msg, 'sys');
|
||||
bus.on('chat:sys', (m: string) => addLine(m, 'sys'));
|
||||
|
||||
bus.on('srv:chat', (m: any) => {
|
||||
const cls = m.channel === 'global' ? 'glob' : '';
|
||||
addLine(`<b>${m.from}${m.channel === 'global' ? ' 🌐' : ''}:</b> ${escapeHtml(m.text)}`, cls);
|
||||
if (m.from !== S.name) audio.pop();
|
||||
});
|
||||
|
||||
const send = () => {
|
||||
const text = input.value.trim();
|
||||
if (!text) return;
|
||||
net.send({ t: 'chat', text, channel: channel.value });
|
||||
input.value = '';
|
||||
};
|
||||
input.addEventListener('keydown', (e) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'Enter') { send(); input.blur(); }
|
||||
if (e.key === 'Escape') input.blur();
|
||||
});
|
||||
channel.addEventListener('change', () => input.focus());
|
||||
}
|
||||
|
||||
export function escapeHtml(s: string) {
|
||||
return s.replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c] as string));
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
// LifeTown Online — UI helpers shared across modules.
|
||||
import { bus } from '../state';
|
||||
import { audio } from '../audio';
|
||||
|
||||
export function $(sel: string): HTMLElement { return document.querySelector(sel) as HTMLElement; }
|
||||
export function $$(sel: string): HTMLElement[] { return [...document.querySelectorAll(sel)] as any; }
|
||||
|
||||
export function el(tag: string, cls?: string, html?: string): HTMLElement {
|
||||
const e = document.createElement(tag);
|
||||
if (cls) e.className = cls;
|
||||
if (html != null) e.innerHTML = html;
|
||||
return e;
|
||||
}
|
||||
|
||||
let toastN = 0;
|
||||
export function toast(title: string, text = '', icon = '✨', kind: '' | 'gold' | 'coral' = '', onClick?: () => void) {
|
||||
const box = $('#toasts');
|
||||
const t = el('div', `toast ${kind}`);
|
||||
t.innerHTML = `<span class="t-icon">${icon}</span><div><b>${title}</b><p>${text}</p></div>`;
|
||||
if (onClick) t.addEventListener('click', () => { onClick(); t.remove(); });
|
||||
box.appendChild(t);
|
||||
toastN++;
|
||||
setTimeout(() => { t.remove(); toastN--; }, 5200);
|
||||
while (box.children.length > 4) box.firstChild!.remove();
|
||||
}
|
||||
bus.on('srv:notify', (m: any) => {
|
||||
toast(m.title || '', m.text || '', m.icon || '✨', m.title === 'Promotion!' ? 'gold' : '',
|
||||
m.action?.type === 'visit' ? () => netVisit(m.action.home) : undefined);
|
||||
});
|
||||
bus.on('srv:achievement', (m: any) => {
|
||||
audio.achievement();
|
||||
toast(`🏆 Achievement — ${m.name}`, m.desc, '🏆', 'gold');
|
||||
});
|
||||
|
||||
import { net } from '../net';
|
||||
function netVisit(home: string) { net.send({ t: 'zone', id: home }); }
|
||||
|
||||
export function openDialog(title: string, buildBody: (body: HTMLElement, close: () => void) => void) {
|
||||
const modal = $('#dialog');
|
||||
$('#dialog-title').textContent = title;
|
||||
const body = $('#dialog-body');
|
||||
body.innerHTML = '';
|
||||
modal.classList.remove('hidden');
|
||||
const close = () => modal.classList.add('hidden');
|
||||
($('#dialog-close') as HTMLElement).onclick = close;
|
||||
buildBody(body, close);
|
||||
audio.click();
|
||||
}
|
||||
export function closeDialog() { $('#dialog').classList.add('hidden'); }
|
||||
|
||||
export function fmtMoney(n: number): string {
|
||||
return n >= 1e6 ? `${(n / 1e6).toFixed(2)}M` : n.toLocaleString('en-US');
|
||||
}
|
||||
|
||||
/** emoji icon per furniture category */
|
||||
export const CAT_EMOJI: Record<string, string> = {
|
||||
bed: '🛏️', sofa: '🛋️', table: '🪵', chair: '🪑', tv: '📺', pc: '🖥️',
|
||||
fridge: '🧊', stove: '🍳', shower: '🚿', toilet: '🚽', sink: '🚰',
|
||||
wardrobe: '🗄️', shelf: '📚', plant: '🪴', decor: '🕯️', light: '💡',
|
||||
rug: '🧶', paint: '🖼️', elec: '🎮',
|
||||
};
|
||||
@@ -0,0 +1,218 @@
|
||||
// LifeTown Online — character creator with live 3D preview.
|
||||
import * as THREE from 'three';
|
||||
import { Avatar } from '../gfx/avatar';
|
||||
import { TRAITS } from '../../../shared/data.mjs';
|
||||
import { $, el } from './common';
|
||||
|
||||
const SKINS = ['#f7d7c4', '#f2c09a', '#eab98f', '#c98a5b', '#9c6644', '#71472c', '#5d3a21'];
|
||||
const HAIRC = ['#0f0d0b', '#2e1e12', '#4a2f1d', '#6b4226', '#8a5a37', '#b08968', '#d9b08c', '#c7b8ae', '#b53f3f', '#33539e', '#3f7d5a', '#d977c1'];
|
||||
const EYEC = ['#3a5a40', '#3d5a80', '#6b4226', '#2f2f2f', '#3f7d5a', '#7a3b8f'];
|
||||
const TOPC = ['#4f8fd9', '#ef6f91', '#67b56a', '#ffcf6b', '#8a63b8', '#f2f4f8', '#33384a', '#ef8a5f', '#54b8d9', '#b85c6e'];
|
||||
|
||||
export interface CreatorResult { name: string; appearance: any }
|
||||
|
||||
export class Creator {
|
||||
private app: any = {
|
||||
bodyType: 'average', height: 0.97, skin: SKINS[2], faceShape: 'round',
|
||||
hair: 'short', hairColor: HAIRC[3], eyes: 'round', eyeColor: EYEC[1],
|
||||
brows: 'natural', nose: 'button', mouth: 'smile',
|
||||
outfitTop: 'tee', outfitBottom: 'jeans', shoes: 'sneakers', accessory: 'none',
|
||||
topColor: TOPC[0], bottomColor: '#33415c',
|
||||
personality: ['Friendly'], voice: 'warm', age: 25,
|
||||
};
|
||||
private renderer!: THREE.WebGLRenderer;
|
||||
private scene = new THREE.Scene();
|
||||
private camera!: THREE.PerspectiveCamera;
|
||||
private avatarHolder = new THREE.Group();
|
||||
private avatar: Avatar | null = null;
|
||||
private raf = 0;
|
||||
private rebuildQueued = false;
|
||||
|
||||
constructor(private onDone: (r: CreatorResult) => void) {
|
||||
this.buildUI();
|
||||
this.buildPreview();
|
||||
}
|
||||
|
||||
// ---------------- preview ----------------
|
||||
private buildPreview() {
|
||||
const host = $('#creator-preview');
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;';
|
||||
host.appendChild(canvas);
|
||||
this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
|
||||
this.renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
|
||||
this.renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
this.camera = new THREE.PerspectiveCamera(40, 1, 0.1, 50);
|
||||
|
||||
this.scene.add(new THREE.HemisphereLight(0xfff4e0, 0x8898c8, 1.15));
|
||||
const key = new THREE.DirectionalLight(0xffffff, 1.6); key.position.set(2.5, 4, 3);
|
||||
this.scene.add(key);
|
||||
const rim = new THREE.DirectionalLight(0xffd9a8, 0.8); rim.position.set(-3, 2.5, -2.5);
|
||||
this.scene.add(rim);
|
||||
// pedestal
|
||||
const disc = new THREE.Mesh(new THREE.CylinderGeometry(1.05, 1.15, 0.16, 36),
|
||||
new THREE.MeshStandardMaterial({ color: 0x35c4b5, roughness: .6 }));
|
||||
disc.position.y = -0.08;
|
||||
this.scene.add(disc);
|
||||
this.scene.add(this.avatarHolder);
|
||||
|
||||
const resize = () => {
|
||||
const w = host.clientWidth || 400, h = host.clientHeight || 500;
|
||||
this.renderer.setSize(w, h, false);
|
||||
this.camera.aspect = w / h; this.camera.updateProjectionMatrix();
|
||||
};
|
||||
window.addEventListener('resize', resize);
|
||||
resize();
|
||||
|
||||
let dragX = 0;
|
||||
canvas.addEventListener('pointerdown', e => { dragX = e.clientX; });
|
||||
canvas.addEventListener('pointermove', e => {
|
||||
if (e.buttons === 1) { this.avatarHolder.rotation.y += (e.clientX - dragX) * 0.011; dragX = e.clientX; }
|
||||
});
|
||||
|
||||
this.rebuildAvatar();
|
||||
const clock = new THREE.Clock();
|
||||
const loop = () => {
|
||||
this.raf = requestAnimationFrame(loop);
|
||||
if (!this.rebuildQueued && this.avatar) this.avatar.update(clock.getDelta());
|
||||
if (!this.rebuildQueued) this.avatarHolder.position.y = 0;
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
};
|
||||
loop();
|
||||
}
|
||||
|
||||
private rebuildAvatar() {
|
||||
this.rebuildQueued = false;
|
||||
if (this.avatar) { this.avatarHolder.remove(this.avatar.group); this.avatar.dispose(); }
|
||||
this.avatar = new Avatar({ ...this.app, height: 1 }, undefined);
|
||||
// creator uses fixed display scale; height slider shown as body proportion
|
||||
this.avatar.group.scale.setScalar(0.98 + (this.app.height - 0.97) * 0.25);
|
||||
this.avatar.setAnim('idle');
|
||||
this.avatarHolder.add(this.avatar.group);
|
||||
}
|
||||
|
||||
private queueRebuild() {
|
||||
if (this.rebuildQueued) return;
|
||||
this.rebuildQueued = true;
|
||||
setTimeout(() => this.rebuildAvatar(), 30);
|
||||
}
|
||||
|
||||
// ---------------- UI ----------------
|
||||
private buildUI() {
|
||||
const set = (k: string, v: any, rebuild = true) => {
|
||||
this.app[k] = v;
|
||||
if (rebuild) this.queueRebuild(); else this.refreshChips();
|
||||
};
|
||||
|
||||
const chipsFor = (containerSel: string, options: [string, string][], key: string, cb?: () => void) => {
|
||||
const box = document.querySelector(containerSel) as HTMLElement;
|
||||
box.innerHTML = '';
|
||||
for (const [val, label] of options) {
|
||||
const c = el('div', 'chip', label);
|
||||
c.dataset.val = val;
|
||||
c.addEventListener('click', () => { set(key, val); cb?.(); audioClick(); });
|
||||
box.appendChild(c);
|
||||
}
|
||||
this.chipBoxes.push({ box, key });
|
||||
};
|
||||
this.chipBoxes = [];
|
||||
|
||||
$('#cr-name').addEventListener('input', () => { this.app.name = ($('#cr-name') as HTMLInputElement).value; });
|
||||
$('#cr-age').addEventListener('input', () => {
|
||||
this.app.age = +($('#cr-age') as HTMLInputElement).value;
|
||||
$('#cr-age-val').textContent = String(this.app.age);
|
||||
});
|
||||
$('#cr-height').addEventListener('input', () => {
|
||||
this.app.height = +($('#cr-height') as HTMLInputElement).value / 100;
|
||||
if (this.avatar) this.avatar.group.scale.setScalar(0.98 + (this.app.height - 0.97) * 0.25);
|
||||
});
|
||||
|
||||
chipsFor('[data-cr="bodyType"]', [['slim', 'Slim'], ['average', 'Average'], ['plump', 'Plump']], 'bodyType');
|
||||
chipsFor('[data-cr="hair"]', [['short', 'Short'], ['long', 'Long'], ['ponytail', 'Ponytail'], ['curly', 'Curly'], ['bob', 'Bob'], ['spiky', 'Spiky'], ['bald', 'Bald']], 'hair');
|
||||
chipsFor('[data-cr="eyes"]', [['round', 'Round'], ['wide', 'Wide'], ['sleepy', 'Sleepy']], 'eyes');
|
||||
chipsFor('[data-cr="outfitTop"]', [['tee', 'Tee'], ['shirt', 'Shirt'], ['hoodie', 'Hoodie'], ['jacket', 'Jacket']], 'outfitTop');
|
||||
chipsFor('[data-cr="outfitBottom"]', [['jeans', 'Jeans'], ['shorts', 'Shorts'], ['skirt', 'Skirt'], ['trousers', 'Trousers']], 'outfitBottom');
|
||||
chipsFor('[data-cr="shoes"]', [['sneakers', 'Sneakers'], ['boots', 'Boots'], ['loafers', 'Loafers']], 'shoes');
|
||||
chipsFor('[data-cr="accessory"]', [['none', 'None'], ['glasses', 'Glasses'], ['cap', 'Cap'], ['beanie', 'Beanie']], 'accessory');
|
||||
chipsFor('[data-cr="voice"]', [['warm', 'Warm'], ['bright', 'Bright'], ['deep', 'Deep'], ['soft', 'Soft']], 'voice');
|
||||
|
||||
// personality multi-select (max 3)
|
||||
const pbox = document.querySelector('[data-cr="personality"]') as HTMLElement;
|
||||
for (const t of TRAITS) {
|
||||
const c = el('div', 'chip', t);
|
||||
c.addEventListener('click', () => {
|
||||
const has = this.app.personality.includes(t);
|
||||
if (has) this.app.personality = this.app.personality.filter((x: string) => x !== t);
|
||||
else if (this.app.personality.length < 3) this.app.personality.push(t);
|
||||
else return;
|
||||
[...pbox.children].forEach(ch => (ch as HTMLElement).classList.toggle('sel', this.app.personality.includes(((ch as HTMLElement).dataset.trait))));
|
||||
audioClick();
|
||||
});
|
||||
(c as HTMLElement).dataset.trait = t;
|
||||
pbox.appendChild(c);
|
||||
}
|
||||
|
||||
// swatches
|
||||
const swatchFor = (sel: string, colors: string[], key: string) => {
|
||||
const box = document.querySelector(sel) as HTMLElement;
|
||||
for (const col of colors) {
|
||||
const s = el('div', 'swatch');
|
||||
(s as HTMLElement).style.background = col;
|
||||
s.dataset.val = col;
|
||||
s.addEventListener('click', () => { set(key, col); audioClick(); });
|
||||
box.appendChild(s);
|
||||
}
|
||||
this.swatchBoxes.push({ box, key });
|
||||
};
|
||||
this.swatchBoxes = [];
|
||||
swatchFor('[data-cr="skin"]', SKINS, 'skin');
|
||||
swatchFor('[data-cr="hairColor"]', HAIRC, 'hairColor');
|
||||
swatchFor('[data-cr="eyeColor"]', EYEC, 'eyeColor');
|
||||
swatchFor('[data-cr="topColor"]', TOPC, 'topColor');
|
||||
swatchFor('[data-cr="bottomColor"]', ['#33415c', '#4a4038', '#6b4226', '#22252e', '#7a3b8f', '#3f7d5a', '#b85c6e'], 'bottomColor');
|
||||
|
||||
// extra face detail chips
|
||||
chipsFor('[data-cr="brows"]', [['natural', 'Natural'], ['thick', 'Thick'], ['thin', 'Thin']], 'brows');
|
||||
chipsFor('[data-cr="nose"]', [['button', 'Button'], ['round', 'Round'], ['small', 'Small']], 'nose');
|
||||
chipsFor('[data-cr="mouth"]', [['smile', 'Smile'], ['neutral', 'Neutral'], ['grin', 'Grin']], 'mouth');
|
||||
this.refreshChips();
|
||||
|
||||
$('#btn-startlife').addEventListener('click', () => {
|
||||
const name = (($('#cr-name') as HTMLInputElement).value || '').trim() ||
|
||||
`Resident${Math.floor(Math.random() * 900 + 100)}`;
|
||||
cancelAnimationFrame(this.raf);
|
||||
this.onDone({
|
||||
name,
|
||||
appearance: {
|
||||
...this.app,
|
||||
faceShape: 'round',
|
||||
outfit: {
|
||||
top: this.app.outfitTop, bottom: this.app.outfitBottom, dress: null,
|
||||
shoes: this.app.shoes, accessory: this.app.accessory,
|
||||
topColor: this.app.topColor, bottomColor: this.app.bottomColor,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
private chipBoxes: { box: HTMLElement; key: string }[] = [];
|
||||
private swatchBoxes: { box: HTMLElement; key: string }[] = [];
|
||||
|
||||
private refreshChips() {
|
||||
for (const { box, key } of this.chipBoxes) {
|
||||
for (const ch of [...box.children] as HTMLElement[]) {
|
||||
ch.classList.toggle('sel', ch.dataset.val === String(this.app[key]));
|
||||
}
|
||||
}
|
||||
for (const { box, key } of this.swatchBoxes) {
|
||||
for (const ch of [...box.children] as HTMLElement[]) {
|
||||
ch.classList.toggle('sel', ch.dataset.val === String(this.app[key]));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function audioClick() {
|
||||
import('../audio').then(({ audio }) => audio.click());
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
// LifeTown Online — interaction wheel, minigames, work & sleep overlays.
|
||||
import { S, relLabel } from '../state';
|
||||
import { $, el, openDialog, closeDialog, toast } from './common';
|
||||
import { net } from '../net';
|
||||
import { INTERACTIONS, INTERACTION_BY_ID, JOBS } from '../../../shared/data.mjs';
|
||||
import { audio } from '../audio';
|
||||
|
||||
// ---------------- social wheel ----------------
|
||||
export function openSocialWheel(target: { type: 'npc' | 'player'; id: string; name: string }) {
|
||||
const key = target.type === 'npc' ? `npc:${target.id}` : `p:${target.name.toLowerCase()}`;
|
||||
const rel = S.profile?.relationships[key] || { f: 0, r: 0 };
|
||||
const wheel = $('#wheel');
|
||||
wheel.innerHTML = `<div style="font-weight:900;margin-bottom:6px">${target.name} <span class="dim" style="font-size:.78rem">· ${relLabel(rel.f)}${rel.partner ? ' 💞' : ''}</span></div>`;
|
||||
const groups = ['Friendly', 'Romantic', 'Funny', 'Negative'];
|
||||
for (const gname of groups) {
|
||||
const items = INTERACTIONS.filter(i => i.group === gname);
|
||||
if (!items.length) continue;
|
||||
wheel.appendChild(el('div', 'wheel-group', gname));
|
||||
for (const it of items) {
|
||||
const locked = rel.f < (it.req.f || 0) || rel.r < (it.req.r || 0);
|
||||
const row = el('div', 'wheel-item' + (locked ? ' locked' : ''),
|
||||
`<span>${it.label}${it.cost ? ` <small>◉${it.cost}</small>` : ''}</span><small>${locked ? needsLabel(it) : ''}</small>`);
|
||||
if (!locked) row.addEventListener('click', () => {
|
||||
wheel.classList.add('hidden');
|
||||
net.send({ t: 'social', targetType: target.type, targetId: target.id, action: it.id });
|
||||
audio.click();
|
||||
});
|
||||
wheel.appendChild(row);
|
||||
}
|
||||
}
|
||||
// position near center-bottom of screen
|
||||
wheel.classList.remove('hidden');
|
||||
const wr = wheel.getBoundingClientRect();
|
||||
wheel.style.left = Math.max(10, window.innerWidth / 2 - wr.width / 2) + 'px';
|
||||
wheel.style.top = Math.max(70, window.innerHeight * 0.3 - wr.height / 2) + 'px';
|
||||
}
|
||||
function needsLabel(it: any) {
|
||||
const f = it.req.f || 0, r = it.req.r || 0;
|
||||
return f > 0 ? `${f} friendship` : `${r} romance`;
|
||||
}
|
||||
export function closeWheel() { $('#wheel').classList.add('hidden'); }
|
||||
|
||||
// click outside closes
|
||||
window.addEventListener('pointerdown', (e) => {
|
||||
const w = $('#wheel');
|
||||
if (!w.classList.contains('hidden') && !w.contains(e.target as Node)) closeWheel();
|
||||
});
|
||||
|
||||
// ---------------- work overlay ----------------
|
||||
export function runWorkOverlay(onDone: () => void) {
|
||||
const p = S.profile;
|
||||
if (!p?.job) return toast('No job', 'Get hired at City Hall first.', '💼');
|
||||
const job = JOBS.find(j => j.id === p.job!.id)!;
|
||||
const ov = el('div');
|
||||
ov.style.cssText = 'position:absolute;inset:0;z-index:65;background:rgba(10,12,24,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;backdrop-filter:blur(2px)';
|
||||
ov.innerHTML = `
|
||||
<div class="glass" style="padding:26px 40px;text-align:center">
|
||||
<div style="font-size:2.4rem">${jobEmoji(job.id)}</div>
|
||||
<b style="font-size:1.1rem">Working as ${job.ranks[p.job.rank]}…</b>
|
||||
<div style="width:260px;height:10px;border-radius:99px;background:rgba(255,255,255,.14);margin-top:12px;overflow:hidden">
|
||||
<i id="work-fill" style="display:block;height:100%;width:0%;background:linear-gradient(90deg,#35c4b5,#7fe3d7);transition:width .1s linear"></i>
|
||||
</div>
|
||||
<div class="dim" id="work-tip" style="margin-top:8px;font-size:.85rem">Stay focused!</div>
|
||||
</div>`;
|
||||
document.body.appendChild(ov);
|
||||
let t = 0;
|
||||
const total = 6;
|
||||
const iv = setInterval(() => {
|
||||
t += 0.1;
|
||||
(ov.querySelector('#work-fill') as HTMLElement).style.width = Math.min(100, (t / total) * 100) + '%';
|
||||
if (Math.random() < .06) (ov.querySelector('#work-tip') as HTMLElement).textContent =
|
||||
['Almost there…', 'Coffee break soon?', 'Nice rhythm!', 'The boss is watching 👀', 'You got this!'][Math.floor(Math.random() * 5)];
|
||||
if (t >= total) { clearInterval(iv); ov.remove(); onDone(); }
|
||||
}, 100);
|
||||
}
|
||||
export function jobEmoji(id: string) {
|
||||
return ({ barista: '☕', chef: '🍳', programmer: '💻', designer: '🎨', doctor: '🩺', teacher: '📚',
|
||||
police: '👮', engineer: '🔧', musician: '🎸', influencer: '📱', athlete: '🏅', artist: '🖌️' } as any)[id] || '💼';
|
||||
}
|
||||
|
||||
// ---------------- sleep ----------------
|
||||
export function sleepSequence(wakeText: string, hoursSlept: number, onWake: () => void) {
|
||||
const ov = el('div');
|
||||
ov.style.cssText = 'position:absolute;inset:0;z-index:66;background:#05060d;opacity:0;transition:opacity 1.2s ease;display:flex;align-items:center;justify-content:center;color:#9aa4c8;font-weight:800;font-size:1.1rem';
|
||||
ov.textContent = '😴 Sleeping…';
|
||||
document.body.appendChild(ov);
|
||||
requestAnimationFrame(() => ov.style.opacity = '1');
|
||||
setTimeout(() => {
|
||||
ov.innerHTML = `🌅 ${wakeText}`;
|
||||
ov.style.opacity = '0.92';
|
||||
setTimeout(() => {
|
||||
ov.style.opacity = '0';
|
||||
setTimeout(() => ov.remove(), 1100);
|
||||
onWake();
|
||||
}, 1400);
|
||||
}, 1200 + hoursSlept * 60);
|
||||
void hoursSlept;
|
||||
}
|
||||
|
||||
// ---------------- fishing minigame ----------------
|
||||
export function fishingGame(onFinish: (success: boolean, reward: number) => void) {
|
||||
openDialog('🎣 Fishing at Willow Pond', (body, close) => {
|
||||
body.innerHTML = `
|
||||
<p class="dim" style="margin-bottom:10px;font-size:.9rem">Tap STOP when the marker is in the green zone! 3 catches to win big.</p>
|
||||
<div id="fish-bar" style="position:relative;height:34px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:14px">
|
||||
<div id="fish-zone" style="position:absolute;top:0;bottom:0;background:rgba(103,181,106,.5)"></div>
|
||||
<div id="fish-mark" style="position:absolute;top:-3px;width:7px;height:40px;border-radius:4px;background:#ffcf6b"></div>
|
||||
</div>
|
||||
<button class="btn btn-primary" id="fish-stop" style="width:100%">STOP!</button>
|
||||
<div class="dim" id="fish-score" style="text-align:center;margin-top:10px">Catches: 0 / 3</div>`;
|
||||
const bar = body.querySelector('#fish-bar') as HTMLElement;
|
||||
const zone = body.querySelector('#fish-zone') as HTMLElement;
|
||||
const mark = body.querySelector('#fish-mark') as HTMLElement;
|
||||
let pos = 0, dir = 1, speed = 62, score = 0, round = 0, running = true;
|
||||
const zw = 18 + Math.random() * 8;
|
||||
let zx = Math.random() * (100 - zw);
|
||||
zone.style.left = zx + '%'; zone.style.width = zw + '%';
|
||||
let last = performance.now();
|
||||
const tick = () => {
|
||||
if (!running) return;
|
||||
const now = performance.now(); const dt = (now - last) / 1000; last = now;
|
||||
pos += dir * speed * dt;
|
||||
if (pos > 100) { pos = 100; dir = -1; }
|
||||
if (pos < 0) { pos = 0; dir = 1; }
|
||||
mark.style.left = `calc(${pos}% - 3px)`;
|
||||
requestAnimationFrame(tick);
|
||||
};
|
||||
tick();
|
||||
(body.querySelector('#fish-stop') as HTMLElement).addEventListener('click', () => {
|
||||
const inZone = pos >= zx && pos <= zx + zw;
|
||||
round++;
|
||||
if (inZone) { score++; audio.cash(); } else audio.err();
|
||||
speed += 16; zw > 8 && (zx = Math.random() * (100 - zw));
|
||||
zone.style.width = Math.max(9, zw - round * 2) + '%';
|
||||
(body.querySelector('#fish-score') as HTMLElement).textContent = `Catches: ${score} / 3`;
|
||||
if (round >= 3) {
|
||||
running = false;
|
||||
const success = score >= 2;
|
||||
const reward = success ? 25 + score * 12 : 5;
|
||||
setTimeout(() => { close(); onFinish(success, reward); }, 500);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------- cooking minigame ----------------
|
||||
export function cookingGame(onDone: (good: boolean) => void) {
|
||||
const ingredients = ['🍅', '🧄', '🧅', '🫑', '🍄', '🧀'];
|
||||
const order = [0, 1, 2, 3].map(() => Math.floor(Math.random() * ingredients.length));
|
||||
openDialog('🍳 Cooking a Meal', (body, close) => {
|
||||
body.innerHTML = `
|
||||
<p class="dim" style="margin-bottom:10px;font-size:.9rem">Memorise the recipe order, then repeat it!</p>
|
||||
<div id="cook-show" style="display:flex;gap:8px;justify-content:center;font-size:2rem;margin-bottom:14px;min-height:56px"></div>
|
||||
<div id="cook-pads" style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px"></div>
|
||||
<div class="dim" id="cook-msg" style="text-align:center;margin-top:10px">Watch closely…</div>`;
|
||||
const show = body.querySelector('#cook-show') as HTMLElement;
|
||||
show.textContent = order.map(i => ingredients[i]).join(' ');
|
||||
setTimeout(() => { show.textContent = '?'.repeat(order.length); (body.querySelector('#cook-msg') as HTMLElement).textContent = 'Now repeat it!'; }, 1800);
|
||||
const pads = body.querySelector('#cook-pads') as HTMLElement;
|
||||
const inputSeq: number[] = [];
|
||||
ingredients.forEach((ing, idx) => {
|
||||
const b = el('button', 'btn btn-ghost', ing);
|
||||
b.style.fontSize = '1.6rem';
|
||||
b.addEventListener('click', () => {
|
||||
inputSeq.push(idx);
|
||||
show.textContent = inputSeq.map(i => ingredients[i]).join(' ');
|
||||
audio.click();
|
||||
if (inputSeq.length === order.length) {
|
||||
const good = inputSeq.every((v, i) => v === order[i]);
|
||||
(body.querySelector('#cook-msg') as HTMLElement).textContent = good ? 'Delicious! 👨🍳' : 'Burnt… 🥴';
|
||||
setTimeout(() => { close(); onDone(good); }, 700);
|
||||
}
|
||||
});
|
||||
pads.appendChild(b);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------- confirm ----------------
|
||||
export function confirmBox(title: string, text: string, yesLabel: string, onYes: () => void) {
|
||||
openDialog(title, (body, close) => {
|
||||
body.appendChild(el('p', '', text)).style.marginBottom = '14px';
|
||||
const row = el('div'); row.style.cssText = 'display:flex;gap:8px';
|
||||
const y = el('button', 'btn btn-primary', yesLabel);
|
||||
y.addEventListener('click', () => { close(); onYes(); });
|
||||
const n = el('button', 'btn btn-ghost', 'Cancel');
|
||||
n.addEventListener('click', close);
|
||||
row.append(n, y);
|
||||
body.appendChild(row);
|
||||
});
|
||||
}
|
||||
void INTERACTION_BY_ID;
|
||||
@@ -0,0 +1,169 @@
|
||||
// LifeTown Online — HUD: top bar, need rings, mood, context panel, minimap, prompt.
|
||||
import { S, bus } from '../state';
|
||||
import { $, el, fmtMoney } from './common';
|
||||
import { NeedsSys } from '../systems';
|
||||
import { BUILDINGS, POIS, WEATHER_EMOJI, VENUES } from '../../../shared/data.mjs';
|
||||
|
||||
const NEED_META: [string, string, string][] = [
|
||||
['hunger', '🍔', '#ff8a5c'],
|
||||
['energy', '⚡', '#ffd166'],
|
||||
['hygiene', '🫧', '#6fd3e8'],
|
||||
['fun', '🎉', '#ef6f91'],
|
||||
['social', '💬', '#7f9df7'],
|
||||
['comfort', '🛋️', '#67b56a'],
|
||||
];
|
||||
|
||||
export function initHud() {
|
||||
// ---- need rings ----
|
||||
const rings = $('#need-rings');
|
||||
const ringEls: Record<string, { fg: SVGCircleElement; val: number }> = {};
|
||||
for (const [id, emoji, color] of NEED_META) {
|
||||
const d = el('div', 'ring');
|
||||
d.title = id;
|
||||
d.innerHTML = `
|
||||
<svg width="44" height="44" viewBox="0 0 44 44">
|
||||
<circle class="r-bg" cx="22" cy="22" r="18" fill="rgba(16,20,36,.65)" stroke-width="5"></circle>
|
||||
<circle class="r-fg" cx="22" cy="22" r="18" fill="none" stroke="${color}" stroke-width="5"
|
||||
stroke-dasharray="${2 * Math.PI * 18}" stroke-dashoffset="0"></circle>
|
||||
</svg>
|
||||
<span class="r-emoji">${emoji}</span>`;
|
||||
rings.appendChild(d);
|
||||
ringEls[id] = { fg: d.querySelector('.r-fg')!, val: 100 };
|
||||
}
|
||||
bus.on('needs:update', () => {
|
||||
for (const [id] of NEED_META) {
|
||||
const v = (S.needs as any)[id] ?? 50;
|
||||
const r = ringEls[id];
|
||||
if (Math.abs(r.val - v) > 1) {
|
||||
r.val = v;
|
||||
const c = 2 * Math.PI * 18;
|
||||
r.fg.style.strokeDashoffset = String(c * (1 - v / 100));
|
||||
r.fg.style.stroke = v < 22 ? '#ff5d5d' : '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ---- mood chip ----
|
||||
bus.on('mood:update', (m: string) => {
|
||||
$('#mood-emoji').textContent = NeedsSys.emojiFor(m);
|
||||
$('#mood-label').textContent = m;
|
||||
});
|
||||
// initial paint
|
||||
setTimeout(() => bus.emit('mood:update', NeedsSys.mood()), 400);
|
||||
|
||||
// ---- top bar tickers ----
|
||||
const paintTop = () => {
|
||||
$('#tb-money').textContent = fmtMoney(S.money);
|
||||
const mins = Math.floor(S.time.minutes);
|
||||
const hh = String(Math.floor(mins / 60)).padStart(2, '0');
|
||||
const mm = String(mins % 60).padStart(2, '0');
|
||||
$('#tb-clock').textContent = `${hh}:${mm}`;
|
||||
$('#tb-day').textContent = `Day ${S.time.day}`;
|
||||
( $('#tb-weather') as HTMLElement).textContent = (WEATHER_EMOJI as any)[S.weather] || '☀️';
|
||||
$('#tb-zone').textContent = zoneLabel(S.zone);
|
||||
$('#tb-online').textContent = String(S.online);
|
||||
};
|
||||
bus.on('world:time', paintTop);
|
||||
bus.on('eco:money', () => { paintTop(); });
|
||||
bus.on('profile:update', paintTop);
|
||||
setInterval(paintTop, 2000);
|
||||
|
||||
// ---- context panel ----
|
||||
const renderContext = () => {
|
||||
const box = $('#cp-content');
|
||||
box.innerHTML = '';
|
||||
const items: [string, string, string][] = [];
|
||||
const p = S.profile;
|
||||
if (p?.job) {
|
||||
items.push(['💼', `Career: ${p.job.id}`, 'Tap Phone → Jobs to check progress']);
|
||||
} else {
|
||||
items.push(['💼', 'No job yet', 'Visit City Hall desk in town']);
|
||||
}
|
||||
const mins = S.time.minutes;
|
||||
if (mins >= 1200 && mins < 1320) items.push(['🎶', 'Plaza Dance Night', 'Until 22:00 · at the stage']);
|
||||
else if (mins >= 540 && mins < 660) items.push(['🍎', 'Morning Market', 'Until 11:00 · MapleMart']);
|
||||
const lowNeed = NEED_META.find(([id]) => (S.needs as any)[id] < 25);
|
||||
if (lowNeed) items.push([lowNeed[1], `Low ${lowNeed[0]}!`, 'Take care of yourself']);
|
||||
const friendsNearby = Object.entries(p?.relationships || {}).filter(([k, v]) => k.startsWith('npc:') && v.f >= 25).length;
|
||||
items.push(['🌱', `${friendsNearby} townsfolk friendships`, 'Chat daily to grow bonds']);
|
||||
for (const [ico, t, sub] of items.slice(0, 4)) {
|
||||
box.appendChild(el('div', 'ctx-item', `<span class="ci-ico">${ico}</span><div>${t}<small>${sub}</small></div>`));
|
||||
}
|
||||
};
|
||||
setInterval(renderContext, 5000);
|
||||
setTimeout(renderContext, 800);
|
||||
|
||||
// ---- minimap ----
|
||||
const canvas = $('#minimap') as HTMLCanvasElement;
|
||||
const g = canvas.getContext('2d')!;
|
||||
const W2M = 180 / 160; // world -80..80 → px
|
||||
const drawMini = (players: { x: number; z: number; me?: boolean }[]) => {
|
||||
if (S.zone !== 'town') { drawHomeMini(g); return; }
|
||||
g.clearRect(0, 0, 180, 180);
|
||||
g.fillStyle = '#1b2438'; g.fillRect(0, 0, 180, 180);
|
||||
const X = (x: number) => 90 + x * W2M;
|
||||
const Z = (z: number) => 96 + z * W2M;
|
||||
// road
|
||||
g.fillStyle = '#39415a'; g.fillRect(0, Z(-4), 180, 8 * W2M);
|
||||
// plaza
|
||||
g.fillStyle = '#4a4550'; g.beginPath(); g.arc(X(0), Z(-26), 14 * W2M, 0, 7); g.fill();
|
||||
// park
|
||||
g.fillStyle = '#2e5231'; g.fillRect(X(42 - 22), Z(-30 - 20), 44 * W2M, 40 * W2M);
|
||||
g.fillStyle = '#3a6ea5'; g.beginPath(); g.arc(X(46), Z(-40), 6 * W2M, 0, 7); g.fill();
|
||||
// buildings
|
||||
g.fillStyle = '#8a7a5f';
|
||||
for (const b of BUILDINGS) g.fillRect(X(b.x - b.w / 2), Z(b.z - b.d / 2), b.w * W2M, b.d * W2M);
|
||||
// POIs
|
||||
g.fillStyle = '#35c4b5';
|
||||
for (const p of POIS) { g.beginPath(); g.arc(X(p.x), Z(p.z), 2.2, 0, 7); g.fill(); }
|
||||
// players
|
||||
for (const pl of players) {
|
||||
g.fillStyle = pl.me ? '#ffd166' : '#ff8a5c';
|
||||
g.beginPath(); g.arc(X(pl.x), Z(pl.z), pl.me ? 3.4 : 2.6, 0, 7); g.fill();
|
||||
}
|
||||
};
|
||||
let lastPlayers: any[] = [];
|
||||
bus.on('mini:positions', (ps: any[]) => { lastPlayers = ps; });
|
||||
setInterval(() => drawMini(lastPlayers), 450);
|
||||
|
||||
// audio + fullscreen buttons
|
||||
$('#btn-audio').addEventListener('click', () => {
|
||||
import('../audio').then(({ audio }) => {
|
||||
audio.setEnabled(!audio.enabled);
|
||||
($('#btn-audio') as HTMLElement).textContent = audio.enabled ? '🔊' : '🔇';
|
||||
});
|
||||
});
|
||||
$('#btn-fullscreen').addEventListener('click', () => {
|
||||
if (document.fullscreenElement) document.exitFullscreen();
|
||||
else document.documentElement.requestFullscreen?.();
|
||||
});
|
||||
}
|
||||
|
||||
function drawHomeMini(g: CanvasRenderingContext2D) {
|
||||
g.clearRect(0, 0, 180, 180);
|
||||
g.fillStyle = '#241f33'; g.fillRect(0, 0, 180, 180);
|
||||
g.fillStyle = '#4a3f56'; g.fillRect(30, 30, 120, 110);
|
||||
const label = zoneLabel(S.zone).toUpperCase();
|
||||
g.fillStyle = '#35c4b5'; g.font = `700 ${label.length > 12 ? 11 : 13}px Nunito`; g.textAlign = 'center';
|
||||
g.fillText(label.slice(0, 22), 90, 92);
|
||||
}
|
||||
|
||||
/** Friendly name for the current zone id */
|
||||
export function zoneLabel(zone: string): string {
|
||||
if (zone === 'town') return 'Maple Court';
|
||||
if (zone.startsWith('venue:')) return VENUES[zone]?.name || 'Venue';
|
||||
return zone === `home:${S.name.toLowerCase()}` ? 'Your Home' : "Friend's Home";
|
||||
}
|
||||
|
||||
// prompt helpers used by main
|
||||
let promptHideTimer: any;
|
||||
export function showPrompt(label: string, key = 'E') {
|
||||
clearTimeout(promptHideTimer);
|
||||
$('#prompt').classList.remove('hidden');
|
||||
$('#prompt-key').textContent = key;
|
||||
$('#prompt-text').textContent = label;
|
||||
}
|
||||
export function hidePrompt() {
|
||||
clearTimeout(promptHideTimer);
|
||||
promptHideTimer = setTimeout(() => $('#prompt').classList.add('hidden'), 60);
|
||||
}
|
||||
@@ -0,0 +1,334 @@
|
||||
// LifeTown Online — in-game smartphone: Messages, Contacts, Map, Jobs, Bank,
|
||||
// Social feed, Calendar, Home. Original app design.
|
||||
import { S, bus, relLabel } from '../state';
|
||||
import { $, el } from './common';
|
||||
import { net } from '../net';
|
||||
import { NPCS, JOBS, HOUSES, XP_PER_RANK, AREA_POINTS } from '../../../shared/data.mjs';
|
||||
import { BUILDINGS, POIS } from '../../../shared/data.mjs';
|
||||
import { escapeHtml } from './chat';
|
||||
|
||||
type Msg = { from: string; text: string; channel: string; ts: number };
|
||||
const history: Msg[] = [];
|
||||
bus.on('srv:chat', (m: any) => { history.push(m as Msg); if (history.length > 120) history.shift(); });
|
||||
|
||||
interface Tx { label: string; amt: number; ts: number }
|
||||
const txs: Tx[] = [];
|
||||
let lastMoney: number | null = null;
|
||||
setInterval(() => {
|
||||
if (lastMoney != null && S.profile && S.money !== lastMoney) {
|
||||
txs.unshift({ label: S.money > lastMoney ? 'Income' : 'Purchase', amt: S.money - lastMoney, ts: Date.now() });
|
||||
if (txs.length > 30) txs.pop();
|
||||
}
|
||||
lastMoney = S.money;
|
||||
}, 900);
|
||||
|
||||
export const phoneState = { open: false, app: 'messages' };
|
||||
|
||||
export function initPhone(openWorkCheck: () => boolean) {
|
||||
const dock = $('#phone-dock');
|
||||
const apps: [string, string, () => void][] = [
|
||||
['messages', '💬', () => renderMessages()],
|
||||
['contacts', '👥', () => renderContacts()],
|
||||
['map', '🗺️', () => renderMap()],
|
||||
['jobs', '💼', () => renderJobs(openWorkCheck)],
|
||||
['bank', '🏦', () => renderBank()],
|
||||
['social', '📸', () => renderSocial()],
|
||||
['calendar', '📅', () => renderCalendar()],
|
||||
['home', '🏠', () => renderHomeApp()],
|
||||
];
|
||||
for (const [id, icon, open] of apps) {
|
||||
const b = el('button', 'papp-btn', icon);
|
||||
b.dataset.app = id;
|
||||
b.addEventListener('click', () => { setApp(id); open(); audioClick(); });
|
||||
dock.appendChild(b);
|
||||
}
|
||||
|
||||
// top bar clock
|
||||
setInterval(() => {
|
||||
const mins = Math.floor(S.time.minutes);
|
||||
$('#phone-clock').textContent =
|
||||
`${String(Math.floor(mins / 60)).padStart(2, '0')}:${String(mins % 60).padStart(2, '0')} · D${S.time.day}`;
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
export function togglePhone(force?: boolean) {
|
||||
const p = $('#phone');
|
||||
const show = force ?? p.classList.contains('hidden');
|
||||
p.classList.toggle('hidden', !show);
|
||||
phoneState.open = show;
|
||||
if (show) {
|
||||
(document.querySelector(`.papp-btn[data-app="${phoneState.app}"]`) as HTMLElement)?.click();
|
||||
if (!phoneState.app) renderMessages();
|
||||
}
|
||||
}
|
||||
|
||||
function setApp(id: string) {
|
||||
phoneState.app = id;
|
||||
document.querySelectorAll('.papp-btn').forEach(b => b.classList.toggle('on', (b as HTMLElement).dataset.app === id));
|
||||
}
|
||||
|
||||
function screen() { return $('#phone-screen'); }
|
||||
|
||||
// ---------------- apps ----------------
|
||||
function renderMessages() {
|
||||
const box = screen();
|
||||
box.innerHTML = `<div class="papp-title">💬 Messages</div>`;
|
||||
const list = el('div');
|
||||
if (!history.length) list.appendChild(el('div', 'dim', 'No messages yet — say hi in town or on Global!'));
|
||||
for (const m of [...history].reverse().slice(0, 40)) {
|
||||
list.appendChild(el('div', 'list-card',
|
||||
`<div class="contact-face" style="background:#31405e">${m.from.slice(0, 1).toUpperCase()}</div>
|
||||
<div><b>${escapeHtml(m.from)}</b> <span class="dim">${m.channel === 'global' ? '🌐' : ''}</span><br>${escapeHtml(m.text)}</div>`));
|
||||
}
|
||||
box.appendChild(list);
|
||||
}
|
||||
|
||||
function relEntryOf(key: string) { return S.profile?.relationships[key]; }
|
||||
|
||||
function renderContacts() {
|
||||
const box = screen();
|
||||
box.innerHTML = `<div class="papp-title">👥 Contacts</div>`;
|
||||
for (const npc of NPCS) {
|
||||
const r = relEntryOf(`npc:${npc.id}`) || { f: 0, r: 0 };
|
||||
const face = `#${THREEless(npc.color)}`;
|
||||
box.appendChild(el('div', 'list-card', `
|
||||
<div class="contact-face" style="background:${face}">${npc.name.slice(0, 1)}</div>
|
||||
<div style="flex:1">
|
||||
<b>${npc.name}</b> <span class="dim">· ${npc.role}</span><br>
|
||||
<span class="dim">${relLabel(r.f)}${r.partner ? ' 💞 Partner' : ''}</span>
|
||||
<div class="rel-bar"><i style="width:${r.f}%"></i></div>
|
||||
${r.r > 5 ? `<div class="rel-bar"><i class="rom" style="width:${r.r}%"></i></div>` : ''}
|
||||
</div>`));
|
||||
}
|
||||
// online players
|
||||
const players = Object.entries(S.profile?.relationships || {}).filter(([k]) => k.startsWith('p:'));
|
||||
if (players.length) {
|
||||
box.appendChild(el('div', 'papp-title', '🌐 Players met'));
|
||||
for (const [k, v] of players) {
|
||||
const nm = k.slice(2);
|
||||
box.appendChild(el('div', 'list-card', `
|
||||
<div class="contact-face" style="background:#4a5a8a">${nm.slice(0, 1).toUpperCase()}</div>
|
||||
<div style="flex:1"><b>${escapeHtml(nm)}</b><br><span class="dim">${relLabel(v.f)}${v.partner ? ' 💞' : ''}</span>
|
||||
<div class="rel-bar"><i style="width:${v.f}%"></i></div></div>
|
||||
<button class="btn btn-ghost" data-invite="${nm}" style="padding:6px 12px;font-size:.75rem">Invite</button>`));
|
||||
}
|
||||
box.querySelectorAll('[data-invite]').forEach(b => b.addEventListener('click', () => {
|
||||
net.send({ t: 'invite', to: (b as HTMLElement).dataset.invite });
|
||||
}));
|
||||
}
|
||||
}
|
||||
// tiny helper to hex a number without importing three
|
||||
function THREEless(n: number) { return n.toString(16).padStart(6, '0'); }
|
||||
|
||||
let mapCanvasDraw: (() => void) | null = null;
|
||||
function renderMap() {
|
||||
const box = screen();
|
||||
box.innerHTML = `<div class="papp-title">🗺️ Town Map</div>`;
|
||||
const c = document.createElement('canvas');
|
||||
c.width = 300; c.height = 300; c.style.cssText = 'width:100%;border-radius:16px;background:#141c30';
|
||||
box.appendChild(c);
|
||||
const legend = el('div', 'dim', '');
|
||||
legend.style.cssText = 'font-size:.78rem;margin-top:8px;line-height:1.6';
|
||||
legend.innerHTML = POIS.map(p => `${poiIcon(p.kind)} ${p.name}`).join('<br>');
|
||||
box.appendChild(legend);
|
||||
mapCanvasDraw = () => drawTownMap(c);
|
||||
mapCanvasDraw();
|
||||
}
|
||||
|
||||
export function refreshMapIfOpen() { mapCanvasDraw?.(); }
|
||||
|
||||
function poiIcon(kind: string) {
|
||||
return ({ eat: '🍽️', jobs: '🏛️', exercise: '🏋️', shop: '🛒', fish: '🎣', stage: '🎶', sit: '🪑', fountain: '⛲', swim: '🏊' } as any)[kind] || '📍';
|
||||
}
|
||||
|
||||
function drawTownMap(c: HTMLCanvasElement) {
|
||||
const g = c.getContext('2d')!;
|
||||
g.clearRect(0, 0, 300, 300);
|
||||
g.fillStyle = '#16203a'; g.fillRect(0, 0, 300, 300);
|
||||
const X = (x: number) => 150 + x * 1.75;
|
||||
const Z = (z: number) => 158 + z * 1.75;
|
||||
g.fillStyle = '#3a4462'; g.fillRect(10, Z(-4), 280, 14);
|
||||
g.fillStyle = '#454f70'; g.beginPath(); g.arc(X(0), Z(-26), 25, 0, 7); g.fill();
|
||||
g.fillStyle = '#2e5231'; g.fillRect(X(20), Z(-50), 44 * 1.75 * 0.9, 40 * 1.75 * 0.85);
|
||||
g.fillStyle = '#3a6ea5'; g.beginPath(); g.arc(X(46), Z(-40), 11, 0, 7); g.fill();
|
||||
for (const b of BUILDINGS) {
|
||||
g.fillStyle = '#' + b.color.toString(16).padStart(6, '0');
|
||||
g.fillRect(X(b.x - b.w / 2), Z(b.z - b.d / 2), b.w * 1.6, b.d * 1.6);
|
||||
}
|
||||
g.font = '700 11px Nunito'; g.fillStyle = '#fff';
|
||||
for (const p of POIS) {
|
||||
g.beginPath(); g.fillStyle = '#35c4b5'; g.arc(X(p.x), Z(p.z), 5, 0, 7); g.fill();
|
||||
g.fillStyle = '#dbe7ff';
|
||||
const short = p.name.split(' ')[0];
|
||||
g.fillText(short, X(p.x) - g.measureText(short).width / 2, Z(p.z) - 9);
|
||||
}
|
||||
// me
|
||||
if ((window as any).__myPosForMap) {
|
||||
const mp = (window as any).__myPosForMap;
|
||||
g.fillStyle = '#ffd166'; g.beginPath(); g.arc(X(mp.x), Z(mp.z), 7, 0, 7); g.fill();
|
||||
g.strokeStyle = '#ffd166aa'; g.lineWidth = 3; g.beginPath(); g.arc(X(mp.x), Z(mp.z), 12, 0, 7); g.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
function renderJobs(canWork: () => boolean) {
|
||||
const box = screen();
|
||||
box.innerHTML = `<div class="papp-title">💼 Careers</div>`;
|
||||
const job = S.profile?.job;
|
||||
if (job) {
|
||||
const def = JOBS.find(j => j.id === job.id)!;
|
||||
const nextXp = XP_PER_RANK[Math.min(job.rank + 1, XP_PER_RANK.length - 1)];
|
||||
const prevXp = XP_PER_RANK[job.rank] ?? 0;
|
||||
const pct = Math.min(100, ((job.xp - prevXp) / Math.max(1, nextXp - prevXp)) * 100);
|
||||
const card = el('div', 'post-card', `
|
||||
<b>${def.ranks[job.rank]}</b> <span class="dim">· ${def.title}</span><br>
|
||||
<span class="dim">Pay ≈ ${Math.round(def.basePay * (1 + job.rank * .55))} TC / shift · Hours ${def.hours[0]}:00–${def.hours[1]}:00</span>
|
||||
<div class="rel-bar"><i style="width:${pct}%"></i></div>
|
||||
<div class="dim" style="font-size:.72rem;margin-top:3px">Next: ${def.ranks[Math.min(job.rank + 1, def.ranks.length - 1)]}</div>`);
|
||||
box.appendChild(card);
|
||||
const workBtn = el('button', canWork() ? 'btn btn-accent' : 'btn btn-ghost', canWork() ? '🔨 Work a shift now' : '🔨 Work (go to your workplace)');
|
||||
workBtn.style.cssText = 'width:100%;margin-bottom:14px';
|
||||
workBtn.addEventListener('click', async () => {
|
||||
if (!canWork()) {
|
||||
const { toast } = await import('./common');
|
||||
return toast('Wrong place', `Head to the ${def.title}'s workplace on the map, then work.`, '📍', 'coral');
|
||||
}
|
||||
const { runWorkOverlay } = await import('./dialogs');
|
||||
togglePhone(false);
|
||||
runWorkOverlay(() => net.send({ t: 'job_work' }));
|
||||
});
|
||||
box.appendChild(workBtn);
|
||||
} else {
|
||||
box.appendChild(el('div', 'dim', 'You are unemployed. Visit the City Hall desk in Maple Court, or pick any career below:'));
|
||||
}
|
||||
for (const j of JOBS) {
|
||||
const active = job?.id === j.id;
|
||||
const c = el('div', 'list-card', `
|
||||
<div class="contact-face" style="background:#31405e">${j.title.slice(0, 1)}</div>
|
||||
<div style="flex:1"><b>${j.title}</b><br><span class="dim">${j.ranks[0]} → ${j.ranks[j.ranks.length - 1]} · base ${j.basePay} TC</span></div>
|
||||
${active ? '<span class="tx-in">Current</span>' : `<button class="btn btn-ghost" style="padding:6px 12px;font-size:.75rem">Apply</button>`}`);
|
||||
if (!active) {
|
||||
(c.querySelector('button') as HTMLElement).addEventListener('click', () => {
|
||||
net.send({ t: 'job_select', jobId: j.id });
|
||||
setTimeout(renderJobs.bind(null, canWork), 400);
|
||||
});
|
||||
}
|
||||
box.appendChild(c);
|
||||
}
|
||||
}
|
||||
|
||||
function renderBank() {
|
||||
const box = screen();
|
||||
box.innerHTML = `
|
||||
<div class="papp-title">🏦 TownBank</div>
|
||||
<div class="post-card" style="text-align:center">
|
||||
<div class="dim" style="font-size:.78rem">BALANCE</div>
|
||||
<div style="font-size:1.9rem;font-weight:900;color:#ffcf6b" id="bank-balance">${S.money.toLocaleString()} ◉</div>
|
||||
<div class="dim" style="font-size:.76rem">Level ${S.profile?.level ?? 1} resident</div>
|
||||
</div>`;
|
||||
const list = el('div');
|
||||
if (!txs.length) list.appendChild(el('div', 'dim', 'No transactions yet.'));
|
||||
for (const t of txs.slice(0, 20)) {
|
||||
list.appendChild(el('div', 'stat-row',
|
||||
`<span>${t.label}<br><span class="dim" style="font-size:.72rem">${new Date(t.ts).toLocaleTimeString()}</span></span>
|
||||
<span class="${t.amt >= 0 ? 'tx-in' : 'tx-out'}">${t.amt >= 0 ? '+' : ''}${t.amt} ◉</span>`));
|
||||
}
|
||||
box.appendChild(list);
|
||||
bus.once('eco:money', () => { if (phoneState.open && phoneState.app === 'bank') renderBank(); });
|
||||
}
|
||||
|
||||
function renderSocial() {
|
||||
const box = screen();
|
||||
box.innerHTML = `<div class="papp-title">📸 LifeFeed</div>`;
|
||||
const composer = el('div', 'post-card');
|
||||
composer.innerHTML = `<input id="post-text" placeholder="Share something about your life…" maxlength="140"/>
|
||||
<div style="display:flex;gap:8px;margin-top:8px">
|
||||
<button class="btn btn-accent" id="btn-post" style="flex:1;padding:9px">Post</button>
|
||||
<button class="btn btn-ghost" id="btn-snap" style="padding:9px">📷 Screenshot</button>
|
||||
</div>`;
|
||||
box.appendChild(composer);
|
||||
const feedKey = 'lt.posts';
|
||||
const getPosts = (): any[] => { try { return JSON.parse(localStorage.getItem(feedKey) || '[]'); } catch { return []; } };
|
||||
const addPost = (p: any) => { const arr = getPosts(); arr.unshift(p); localStorage.setItem(feedKey, JSON.stringify(arr.slice(0, 30))); };
|
||||
composer.querySelector('#btn-post')!.addEventListener('click', () => {
|
||||
const txt = (composer.querySelector('#post-text') as HTMLInputElement).value.trim();
|
||||
if (!txt) return;
|
||||
addPost({ name: S.name, text: txt, ts: Date.now(), likes: 0 });
|
||||
(composer.querySelector('#post-text') as HTMLInputElement).value = '';
|
||||
renderSocial();
|
||||
});
|
||||
composer.querySelector('#btn-snap')!.addEventListener('click', () => {
|
||||
try {
|
||||
const gl = document.querySelector('#gl') as HTMLCanvasElement;
|
||||
const img = gl.toDataURL('image/jpeg', 0.6);
|
||||
addPost({ name: S.name, text: '📸 Snapshot from ' + (S.zone === 'town' ? 'Maple Court' : 'my home'), img, ts: Date.now(), likes: 0 });
|
||||
renderSocial();
|
||||
} catch { alertMsg('Screenshot failed — try again.'); }
|
||||
});
|
||||
for (const p of getPosts()) {
|
||||
const card = el('div', 'post-card', `
|
||||
<div class="post-head"><div class="contact-face" style="background:#7a5a8a">${escapeHtml((p.name || '?').slice(0, 1))}</div>
|
||||
<div>${escapeHtml(p.name)}<br><span class="dim" style="font-weight:600;font-size:.7rem">${timeAgo(p.ts)}</span></div></div>
|
||||
<div style="font-size:.9rem">${escapeHtml(p.text || '')}</div>
|
||||
${p.img ? `<img class="post-img" src="${p.img}"/>` : ''}
|
||||
<div class="post-actions"><span>❤️ ${p.likes}</span><span>💬 Reply</span><span>↗ Share</span></div>`);
|
||||
(card.querySelector('.post-actions span') as HTMLElement).addEventListener('click', () => { p.likes++; card.querySelector('.post-actions span')!.textContent = `❤️ ${p.likes}`; });
|
||||
box.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
function renderCalendar() {
|
||||
const box = screen();
|
||||
box.innerHTML = `<div class="papp-title">📅 Town Calendar</div>`;
|
||||
const events: [number, string, string, string][] = [
|
||||
[540, 'Morning Market', 'MapleMart plaza stalls — fresh deals daily', '🍎'],
|
||||
[720, 'Lunch Rush at Taco Comet', 'Chef Rosa cooks up specials', '🌮'],
|
||||
[1200, 'Plaza Dance Night', 'Meet at the stage — everyone dances!', '🎶'],
|
||||
];
|
||||
const mins = S.time.minutes;
|
||||
for (const [startHm, title, desc, ico] of events) {
|
||||
const active = mins >= startHm && mins < startHm + 120;
|
||||
box.appendChild(el('div', 'list-card' + (active ? '' : ''), `
|
||||
<div class="contact-face" style="background:${active ? '#35c4b5' : '#31405e'};opacity:${active ? 1 : .65}">${ico}</div>
|
||||
<div style="flex:1"><b>${title}</b> <span class="dim">@ ${String(Math.floor(startHm / 60)).padStart(2, '0')}:00</span><br><span class="dim">${desc}</span></div>
|
||||
${active ? '<span class="tx-in">NOW</span>' : ''}`));
|
||||
}
|
||||
box.appendChild(el('div', 'dim', `Day ${S.time.day} in LifeTown · seasons & festivals coming soon`));
|
||||
}
|
||||
|
||||
function renderHomeApp() {
|
||||
const box = screen();
|
||||
box.innerHTML = `<div class="papp-title">🏠 Home</div>`;
|
||||
const tier = HOUSES.find(h => h.id === S.profile?.houseTier) || HOUSES[0];
|
||||
box.appendChild(el('div', 'post-card', `<b>${tier.name}</b><br><span class="dim">Your current home · ${tier.size[0]}×${tier.size[1]} m</span>`));
|
||||
const row = el('div', '', ''); row.style.cssText = 'display:flex;gap:8px;margin-bottom:12px';
|
||||
const goHome = el('button', 'btn btn-accent', '🏠 Teleport Home'); goHome.style.flex = '1';
|
||||
goHome.addEventListener('click', () => net.send({ t: 'zone', id: `home:${S.name.toLowerCase()}` }));
|
||||
const goOut = el('button', 'btn btn-primary', '🌆 To Town'); goOut.style.flex = '1';
|
||||
goOut.addEventListener('click', () => net.send({ t: 'zone', id: 'town' }));
|
||||
row.append(goHome, goOut);
|
||||
box.appendChild(row);
|
||||
|
||||
box.appendChild(el('div', 'papp-title', '🏡 Property Market'));
|
||||
for (const h of HOUSES) {
|
||||
const owned = S.profile?.housesOwned.includes(h.id);
|
||||
const locked = (S.profile?.level ?? 1) < h.lvl;
|
||||
const c = el('div', 'list-card', `
|
||||
<div class="contact-face" style="background:#31405e">🏘️</div>
|
||||
<div style="flex:1"><b>${h.name}</b><br><span class="dim">${h.price === 0 ? 'Starter home' : h.price.toLocaleString() + ' ◉ · Level ' + h.lvl + '+'}</span></div>
|
||||
${owned ? '<span class="tx-in">Owned ✓</span>' : locked ? '<span class="dim">🔒</span>' : `<button class="btn btn-accent" style="padding:7px 13px;font-size:.78rem">Buy</button>`}`);
|
||||
if (!owned && !locked) {
|
||||
(c.querySelector('button') as HTMLElement).addEventListener('click', () => net.send({ t: 'buy_house', houseId: h.id }));
|
||||
}
|
||||
box.appendChild(c);
|
||||
}
|
||||
}
|
||||
|
||||
function timeAgo(ts: number) {
|
||||
const d = Math.floor((Date.now() - ts) / 1000);
|
||||
if (d < 60) return 'just now';
|
||||
if (d < 3600) return Math.floor(d / 60) + ' min ago';
|
||||
return Math.floor(d / 3600) + ' h ago';
|
||||
}
|
||||
function alertMsg(t: string) { import('./common').then(({ toast }) => toast('Oops', t, '⚠️')); }
|
||||
function audioClick() { import('../audio').then(({ audio }) => audio.click()); }
|
||||
void AREA_POINTS;
|
||||
@@ -0,0 +1,301 @@
|
||||
// LifeTown Online — world/actor manager: local player, remote players, NPCs,
|
||||
// interpolation, name-tags and speech bubbles.
|
||||
import * as THREE from 'three';
|
||||
import { Avatar, npcAppearance } from './gfx/avatar';
|
||||
import { Engine } from './gfx/engine';
|
||||
import { Town } from './gfx/town';
|
||||
import { Interior } from './gfx/interior';
|
||||
import { S, bus } from './state';
|
||||
import { net } from './net';
|
||||
import { NPCS, VENUES } from '../../shared/data.mjs';
|
||||
import { audio } from './audio';
|
||||
|
||||
interface Actor {
|
||||
id: string; name: string; appearance: any;
|
||||
avatar: Avatar; isNpc: boolean;
|
||||
tx: number; tz: number; tRy: number;
|
||||
overrideAnimUntil?: number; overrideAnim?: string;
|
||||
tagEl: HTMLElement;
|
||||
}
|
||||
|
||||
const V = new THREE.Vector3();
|
||||
|
||||
export class World {
|
||||
actors = new Map<string, Actor>();
|
||||
town: Town | null = null;
|
||||
interior: Interior | null = null;
|
||||
interiorChangedHook: (() => void) | null = null;
|
||||
|
||||
constructor(public engine: Engine) {
|
||||
bus.on('srv:playerJoin', (m: any) => this.join(m.id, m.name, m.appearance));
|
||||
bus.on('srv:roster', (m: any) => {
|
||||
for (const p of m.players || []) this.join(p.id, p.name, p.appearance);
|
||||
});
|
||||
bus.on('srv:playerLeave', (m: any) => this.remove(m.id));
|
||||
bus.on('srv:snapshot', (m: any) => this.snapshot(m));
|
||||
bus.on('srv:bubble', (m: any) => this.bubble(m.id, m.text));
|
||||
bus.on('srv:emote', (m: any) => this.emote(m.id, m.emote));
|
||||
bus.on('srv:socialFx', (m: any) => this.socialFx(m));
|
||||
bus.on('world:clearActors', () => this.clearRemote());
|
||||
}
|
||||
|
||||
// ---------------- lifecycle ----------------
|
||||
spawnMe(appearance: any) {
|
||||
this.remove('me');
|
||||
const avatar = new Avatar(appearance);
|
||||
avatar.group.position.set(0, 0, 12);
|
||||
this.engine.actorGroup.add(avatar.group);
|
||||
const tagEl = makeTag(appearance.name || S.name, '#ffd98a');
|
||||
this.actors.set('me', { id: 'me', name: appearance.name || S.name, appearance, avatar, isNpc: false, tx: 0, tz: 12, tRy: 0, tagEl });
|
||||
}
|
||||
get me() { return this.actors.get('me'); }
|
||||
|
||||
join(id: string, name: string, appearance: any) {
|
||||
if (!appearance) return;
|
||||
if (id === S.yourId && this.actors.has('me')) return;
|
||||
if (this.actors.has(id)) { // refresh appearance
|
||||
const a = this.actors.get(id)!;
|
||||
a.name = name; refreshTag(a.tagEl, name);
|
||||
return;
|
||||
}
|
||||
const avatar = new Avatar({ ...appearance, name });
|
||||
avatar.group.position.set((Math.random() - .5) * 8, 0, 12);
|
||||
this.engine.actorGroup.add(avatar.group);
|
||||
const tagEl = makeTag(name);
|
||||
this.actors.set(id, { id, name, appearance, avatar, isNpc: false, tx: 0, tz: 12, tRy: 0, tagEl });
|
||||
}
|
||||
|
||||
spawnNpcs() {
|
||||
NPCS.forEach((def, i) => {
|
||||
const app = npcAppearance(def, i);
|
||||
const avatar = new Avatar(app, i);
|
||||
avatar.group.position.set(def.home === 'cafe' ? -48 : 0, 0, 12);
|
||||
this.engine.actorGroup.add(avatar.group);
|
||||
const tagEl = makeTag(def.name, '#a7f3e3');
|
||||
this.actors.set(def.id, {
|
||||
id: def.id, name: def.name, appearance: app, avatar, isNpc: true,
|
||||
tx: def.home === 'cafe' ? -48 : 0, tz: 12, tRy: 0, tagEl,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
remove(id: string) {
|
||||
const a = this.actors.get(id);
|
||||
if (!a) return;
|
||||
this.engine.actorGroup.remove(a.avatar.group);
|
||||
a.avatar.dispose();
|
||||
a.tagEl.remove();
|
||||
this.actors.delete(id);
|
||||
}
|
||||
|
||||
clearRemote() {
|
||||
for (const id of [...this.actors.keys()]) if (id !== 'me') this.remove(id);
|
||||
}
|
||||
|
||||
// ---------------- networking ----------------
|
||||
private snapshot(m: any) {
|
||||
for (const p of m.players) {
|
||||
const a = this.actors.get(p.id);
|
||||
if (!a) continue;
|
||||
a.tx = p.x; a.tz = p.z; a.tRy = p.ry;
|
||||
if (!a.overrideAnimUntil || performance.now() > a.overrideAnimUntil) a.avatar.setAnim(p.anim);
|
||||
}
|
||||
for (const n of m.npcs || []) {
|
||||
const a = this.actors.get(n.id);
|
||||
if (!a) continue;
|
||||
a.tx = n.x; a.tz = n.z; a.tRy = n.ry;
|
||||
if (!a.overrideAnimUntil || performance.now() > a.overrideAnimUntil) a.avatar.setAnim(n.anim);
|
||||
}
|
||||
}
|
||||
|
||||
emote(id: string, emote: string) {
|
||||
const a = this.actors.get(id);
|
||||
if (!a) return;
|
||||
const map: Record<string, string> = { wave: 'wave', dance: 'dance', laugh: 'laugh', angry: 'argue', sleep: 'sleep', sit: 'sit', sad: 'talk', eat: 'eat', work: 'work', read: 'talk' };
|
||||
a.avatar.setAnim(map[emote] || 'wave');
|
||||
if (emote !== 'sit' && emote !== 'sleep') a.overrideAnimUntil = performance.now() + 4000;
|
||||
a.overrideAnim = map[emote];
|
||||
}
|
||||
|
||||
socialFx(m: any) {
|
||||
const from = this.actors.get(m.from);
|
||||
const to = this.actors.get(m.to);
|
||||
const dur = 3000;
|
||||
if (from) { from.avatar.setAnim(m.anim); from.overrideAnimUntil = performance.now() + dur; }
|
||||
if (to) { to.avatar.setAnim(m.anim); to.overrideAnimUntil = performance.now() + dur; }
|
||||
for (const line of m.lines || []) this.bubble(m.from, line, true);
|
||||
// emoji pop
|
||||
if ((m.emoji || '') !== '') {
|
||||
const anchor = from ? from : to;
|
||||
if (anchor) popEmoji(this.engine, anchor.avatar.group.position, m.emoji);
|
||||
}
|
||||
// gentle camera focus when I'm involved or nearby
|
||||
if (from && (m.from === 'me' || m.to === 'me')) {
|
||||
const mid = new THREE.Vector3();
|
||||
if (from && to) mid.copy(from.avatar.group.position).add(to.avatar.group.position).multiplyScalar(0.5);
|
||||
else mid.copy(from ? from.avatar.group.position : to!.avatar.group.position);
|
||||
(this as any)._focusCb?.(mid);
|
||||
}
|
||||
audio.pop();
|
||||
}
|
||||
|
||||
onFocus(cb: (pos: THREE.Vector3) => void) { (this as any)._focusCb = cb; }
|
||||
|
||||
bubble(id: string, text: string, long = false) {
|
||||
const a = this.actors.get(id);
|
||||
if (!a || !text) return;
|
||||
const el = document.createElement('div');
|
||||
el.className = 'bubble fade' + (a.isNpc ? ' npc' : '');
|
||||
el.textContent = text;
|
||||
document.getElementById('bubble-layer')!.appendChild(el);
|
||||
const life = long ? 5200 : 4400;
|
||||
(el as any)._anchor = a;
|
||||
bubbles.push({ el, until: performance.now() + life });
|
||||
setTimeout(() => { el.remove(); const i = bubbles.findIndex(b => b.el === el); if (i >= 0) bubbles.splice(i, 1); }, life);
|
||||
}
|
||||
|
||||
nearestActor(excludeMe = true, maxDist = 4.2): Actor | null {
|
||||
const me = this.me;
|
||||
if (!me) return null;
|
||||
let best: Actor | null = null, bd = maxDist;
|
||||
for (const a of this.actors.values()) {
|
||||
if (excludeMe && a.id === 'me') continue;
|
||||
const d = me.avatar.group.position.distanceTo(a.avatar.group.position);
|
||||
if (d < bd) { bd = d; best = a; }
|
||||
}
|
||||
return best;
|
||||
}
|
||||
|
||||
// ---------------- per-frame ----------------
|
||||
update(dt: number) {
|
||||
const now = performance.now();
|
||||
for (const a of this.actors.values()) {
|
||||
const g = a.avatar.group;
|
||||
if (a.id === 'me') {
|
||||
a.avatar.update(dt);
|
||||
continue;
|
||||
}
|
||||
// interpolate
|
||||
const k = Math.min(1, dt * 9);
|
||||
const dx = a.tx - g.position.x, dz = a.tz - g.position.z;
|
||||
g.position.x += dx * k; g.position.z += dz * k;
|
||||
let dr = a.tRy - g.rotation.y;
|
||||
while (dr > Math.PI) dr -= Math.PI * 2;
|
||||
while (dr < -Math.PI) dr += Math.PI * 2;
|
||||
g.rotation.y += dr * k;
|
||||
a.avatar.update(dt);
|
||||
void now;
|
||||
}
|
||||
this.projectOverlays();
|
||||
}
|
||||
|
||||
private projectOverlays() {
|
||||
const cam = this.engine.camera;
|
||||
const w = window.innerWidth, h = window.innerHeight;
|
||||
for (const a of this.actors.values()) {
|
||||
a.avatar.headWorldPos(V);
|
||||
V.y += 0.25;
|
||||
const dist = V.distanceTo(cam.position);
|
||||
const sp = V.clone().project(cam);
|
||||
const visible = sp.z < 1 && dist < 46;
|
||||
if (!visible) { a.tagEl.style.display = 'none'; continue; }
|
||||
a.tagEl.style.display = '';
|
||||
a.tagEl.style.left = ((sp.x * 0.5 + 0.5) * w) + 'px';
|
||||
a.tagEl.style.top = ((-sp.y * 0.5 + 0.5) * h - 14) + 'px';
|
||||
}
|
||||
for (const b of bubbles) {
|
||||
const a = (b.el as any)._anchor as Actor;
|
||||
if (!a) continue;
|
||||
a.avatar.headWorldPos(V); V.y += 0.55;
|
||||
const sp = V.clone().project(cam);
|
||||
b.el.style.left = ((sp.x * 0.5 + 0.5) * window.innerWidth) + 'px';
|
||||
b.el.style.top = ((-sp.y * 0.5 + 0.5) * window.innerHeight) + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
/** Build the requested zone's static scene content; returns spawn point */
|
||||
async enterZone(zone: string, homeTier?: string, layout?: any[]): Promise<{ x: number; z: number }> {
|
||||
// clear previous (and free GPU resources)
|
||||
if (this.town) { this.engine.worldGroup.remove(this.town.group); disposeGroup(this.town.group); this.town = null; }
|
||||
if (this.interior) { this.engine.worldGroup.remove(this.interior.group); disposeGroup(this.interior.group); this.interior = null; }
|
||||
this.clearRemote();
|
||||
|
||||
if (zone === 'town') {
|
||||
this.town = new Town();
|
||||
this.engine.worldGroup.add(this.town.group);
|
||||
this.spawnNpcs();
|
||||
audio.setTrack('town');
|
||||
return { x: 0, z: 12 };
|
||||
}
|
||||
|
||||
if (zone.startsWith('venue:')) {
|
||||
const v = VENUES[zone];
|
||||
if (!v) return { x: 0, z: 4 };
|
||||
this.interior = new Interior([v.size[0], v.size[1]]);
|
||||
this.interior.label = v.name;
|
||||
this.interior.setLayout(v.items || []);
|
||||
this.interior.onFurnitureChanged = () => this.interiorChangedHook?.();
|
||||
this.engine.worldGroup.add(this.interior.group);
|
||||
audio.setTrack('town');
|
||||
return { x: 0, z: v.size[1] / 2 - 1.4 };
|
||||
}
|
||||
|
||||
// otherwise: a personal home zone
|
||||
this.interior = new Interior(homeTier || 'studio');
|
||||
this.interior.label = 'Your Home';
|
||||
this.interior.setLayout(layout || []);
|
||||
this.interior.onFurnitureChanged = () => this.interiorChangedHook?.();
|
||||
this.engine.worldGroup.add(this.interior.group);
|
||||
audio.setTrack('home');
|
||||
return { x: 0, z: (this.interior.size[1] / 2) - 1.2 };
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------- DOM helpers ----------------
|
||||
const bubbles: { el: HTMLElement; until: number }[] = [];
|
||||
|
||||
function makeTag(name: string, color?: string): HTMLElement {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'name-tag';
|
||||
if (color) el.style.color = color;
|
||||
el.textContent = name;
|
||||
document.getElementById('bubble-layer')!.appendChild(el);
|
||||
return el;
|
||||
}
|
||||
function refreshTag(el: HTMLElement, name: string) { el.textContent = name; }
|
||||
|
||||
function disposeGroup(root: THREE.Object3D) {
|
||||
root.traverse((o) => {
|
||||
const m = o as THREE.Mesh;
|
||||
if (m.geometry) m.geometry.dispose();
|
||||
if (m.material) {
|
||||
const mats = Array.isArray(m.material) ? m.material : [m.material];
|
||||
for (const mm of mats) {
|
||||
const std = mm as THREE.MeshStandardMaterial;
|
||||
if (std.map) std.map.dispose();
|
||||
mm.dispose();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function popEmoji(engine: Engine, pos: THREE.Vector3, emoji: string) {
|
||||
const c = document.createElement('canvas');
|
||||
c.width = c.height = 96;
|
||||
const g = c.getContext('2d')!;
|
||||
g.font = '64px serif'; g.textAlign = 'center'; g.textBaseline = 'middle';
|
||||
g.fillText(emoji, 48, 52);
|
||||
const tex = new THREE.CanvasTexture(c);
|
||||
const sp = new THREE.Sprite(new THREE.SpriteMaterial({ map: tex, transparent: true, depthWrite: false }));
|
||||
sp.scale.setScalar(0.9);
|
||||
sp.position.set(pos.x, pos.y + 2.6, pos.z);
|
||||
engine.fxGroup.add(sp);
|
||||
const t0 = performance.now();
|
||||
const anim = () => {
|
||||
const t = (performance.now() - t0) / 1000;
|
||||
sp.position.y = pos.y + 2.6 + t * 1.2;
|
||||
(sp.material as THREE.SpriteMaterial).opacity = Math.max(0, 1 - t / 1.4);
|
||||
if (t < 1.4) requestAnimationFrame(anim); else { engine.fxGroup.remove(sp); tex.dispose(); }
|
||||
};
|
||||
anim();
|
||||
}
|
||||
Generated
+1165
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "lifetown-online",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "LifeTown Online - original browser multiplayer life simulation (MVP)",
|
||||
"scripts": {
|
||||
"build": "vite build",
|
||||
"dev": "vite",
|
||||
"start": "node server/index.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"three": "^0.170.0",
|
||||
"ws": "^8.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/three": "^0.185.4",
|
||||
"playwright-core": "^1.62.1",
|
||||
"typescript": "^5.6.3",
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
+171
@@ -0,0 +1,171 @@
|
||||
// LifeTown Online — end-to-end server verification with two simulated clients.
|
||||
import WebSocket from 'ws';
|
||||
import fs from 'node:fs';
|
||||
|
||||
// fresh fixtures: remove previous test saves so character creation is exercised
|
||||
for (const f of ['e2e_a', 'e2e_b']) {
|
||||
try { fs.unlinkSync(new globalThis.URL(`../saves/${f}.json`, import.meta.url)); } catch {}
|
||||
}
|
||||
|
||||
const WS_URL = 'ws://127.0.0.1:7788/ws';
|
||||
let failures = 0;
|
||||
function ok(name, cond, extra = '') {
|
||||
console.log(`${cond ? '✅' : '❌'} ${name}${extra ? ' — ' + extra : ''}`);
|
||||
if (!cond) failures++;
|
||||
}
|
||||
const wait = (ms) => new Promise(r => setTimeout(r, ms));
|
||||
|
||||
class Client {
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
this.inbox = [];
|
||||
this.ws = new WebSocket(WS_URL);
|
||||
this.ws.on('message', (d) => {
|
||||
const m = JSON.parse(d.toString());
|
||||
this.inbox.push(m);
|
||||
});
|
||||
this.opened = new Promise(res => this.ws.on('open', res));
|
||||
}
|
||||
async send(msg) { await this.opened; this.ws.send(JSON.stringify(msg)); }
|
||||
async until(pred, timeout = 4000, label = '') {
|
||||
const t0 = Date.now();
|
||||
while (Date.now() - t0 < timeout) {
|
||||
const hit = this.inbox.find(pred);
|
||||
if (hit) return hit;
|
||||
await wait(40);
|
||||
}
|
||||
throw new Error(`timeout waiting for ${label || pred}`);
|
||||
}
|
||||
clear() { this.inbox.length = 0; }
|
||||
}
|
||||
|
||||
const appearanceA = {
|
||||
bodyType: 'average', height: 1, skin: '#eab98f', hair: 'short', hairColor: '#4a2f1d',
|
||||
eyes: 'round', eyeColor: '#3a5a40', outfitTop: 'tee', topColor: '#4f8fd9', bottomColor: '#33415c',
|
||||
};
|
||||
|
||||
async function main() {
|
||||
const a = new Client('E2E_A');
|
||||
const b = new Client('E2E_B');
|
||||
|
||||
// ---- create characters ----
|
||||
await a.send({ t: 'hello', name: 'E2E_A', appearance: appearanceA });
|
||||
const wa = await a.until(m => m.t === 'welcome' || m.t === 'error', 5000, 'welcome A');
|
||||
ok('A welcome', wa.t === 'welcome', `money=${wa.profile?.money} token=${!!wa.token}`);
|
||||
|
||||
await b.send({ t: 'hello', name: 'E2E_B', appearance: {} });
|
||||
const wb = await b.until(m => m.t === 'welcome' || m.t === 'error', 5000, 'welcome B');
|
||||
ok('B welcome', wb.t === 'welcome');
|
||||
|
||||
// join visibility: A was already in town -> B gets roster; B joining -> A gets playerJoin
|
||||
const rosterB = await b.until(m => m.t === 'roster' && m.players.some(p => p.id === wa.yourId), 4000, 'roster with A');
|
||||
ok('B received roster including A', !!rosterB);
|
||||
const joinA = await a.until(m => m.t === 'playerJoin' && m.id === wb.yourId, 4000, 'playerJoin B');
|
||||
ok('A notified of B joining (playerJoin)', !!joinA);
|
||||
|
||||
// duplicate name protection
|
||||
const c = new Client('E2E_A');
|
||||
await c.send({ t: 'hello', name: 'E2E_A' });
|
||||
const wc = await c.until(m => m.t === 'error', 4000, 'dup-name error');
|
||||
ok('duplicate name rejected', wc.code === 'taken');
|
||||
c.ws.close();
|
||||
|
||||
// ---- movement sync ----
|
||||
await wait(300);
|
||||
a.clear(); b.clear();
|
||||
await a.send({ t: 'move', x: 3.5, z: 11, ry: 1, anim: 'walk' });
|
||||
await wait(300);
|
||||
const snapB = b.inbox.filter(m => m.t === 'snapshot').find(s => s.players.some(p => p.id === wa.yourId));
|
||||
ok('B sees A moving in snapshot', !!snapB);
|
||||
|
||||
// ---- chat ----
|
||||
b.clear();
|
||||
await a.send({ t: 'chat', text: 'Hello from A!', channel: 'global' });
|
||||
const chatB = await b.until(m => m.t === 'chat' && m.from === 'E2E_A', 3000, 'chat relay');
|
||||
ok('global chat relayed', chatB.text.includes('Hello from A'));
|
||||
|
||||
// ---- player-player social ----
|
||||
a.clear();
|
||||
await a.send({ t: 'social', targetType: 'player', targetId: wb.yourId, action: 'hello' });
|
||||
const relA = await a.until(m => m.t === 'relUpdate', 3000, 'relUpdate A');
|
||||
const relAB = relA.relationships['p:e2e_b'];
|
||||
ok('social hello raises friendship', relAB && relAB.f >= 2, `f=${relAB?.f}`);
|
||||
|
||||
// locked interaction (flirt needs romance gates fine at r0? flirt req.r=0 so allowed; use holdhands req.r=25)
|
||||
a.clear();
|
||||
await a.send({ t: 'social', targetType: 'player', targetId: wb.yourId, action: 'holdhands' });
|
||||
const errLocked = await a.until(m => m.t === 'error', 3000, 'locked error');
|
||||
ok('gated interaction blocked', errLocked.code === 'locked', errLocked.message);
|
||||
|
||||
// ---- jobs & economy ----
|
||||
a.clear();
|
||||
await a.send({ t: 'job_select', jobId: 'barista' });
|
||||
const ju = await a.until(m => m.t === 'jobUpdate', 3000, 'jobUpdate');
|
||||
ok('job selected', ju.job?.id === 'barista');
|
||||
|
||||
a.clear();
|
||||
await a.send({ t: 'job_work' });
|
||||
const wr = await a.until(m => m.t === 'workResult', 3000, 'workResult');
|
||||
ok('work shift pays', wr.pay > 0, `pay=${wr.pay} money=${wr.money}`);
|
||||
|
||||
a.clear();
|
||||
await a.send({ t: 'job_work' });
|
||||
const cdErr = await a.until(m => m.t === 'error', 3000, 'cooldown error');
|
||||
ok('work cooldown enforced', cdErr.code === 'cooldown');
|
||||
|
||||
// ---- shopping ----
|
||||
a.clear();
|
||||
await a.send({ t: 'buy_item', itemId: 'bed_basic' });
|
||||
const inv = await a.until(m => m.t === 'inventory', 3000, 'inventory update');
|
||||
ok('item purchased into inventory', inv.inventory.some(i => i.itemId === 'bed_basic'));
|
||||
|
||||
// house purchase should fail on funds/level
|
||||
a.clear();
|
||||
await a.send({ t: 'buy_house', houseId: 'mansion' });
|
||||
const houseErr = await a.until(m => m.t === 'error', 3000, 'house locked');
|
||||
ok('mansion gated', houseErr.code === 'level' || houseErr.code === 'poor');
|
||||
|
||||
// ---- home layout persistence ----
|
||||
a.clear();
|
||||
await a.send({ t: 'place_home', layout: [{ itemId: 'bed_basic', x: -2, z: -2, rot: 0 }, { itemId: 'plant_fern', x: 2.5, z: 1.5, rot: 1 }] });
|
||||
const ls = await a.until(m => m.t === 'layoutSaved', 3000, 'layoutSaved');
|
||||
ok('home layout saved', ls.count === 2);
|
||||
|
||||
// ---- zone switching ----
|
||||
a.clear();
|
||||
await a.send({ t: 'zone', id: `home:e2e_a` });
|
||||
const zo = await a.until(m => m.t === 'zoneOk', 3000, 'zoneOk home');
|
||||
ok('entered own home', zo.zone === 'home:e2e_a');
|
||||
|
||||
// B cannot enter A's home uninvited
|
||||
b.clear();
|
||||
await b.send({ t: 'zone', id: 'home:e2e_a' });
|
||||
const lockHome = await b.until(m => m.t === 'error', 3000, 'home locked');
|
||||
ok('stranger blocked from home', lockHome.code === 'locked');
|
||||
|
||||
// invitation flow
|
||||
a.clear(); b.clear();
|
||||
await a.send({ t: 'invite', to: 'E2E_B' });
|
||||
const notifB = await b.until(m => m.t === 'notify' && m.action?.type === 'visit', 3000, 'invite notify');
|
||||
await b.send({ t: 'zone', id: notifB.action.home });
|
||||
const zoB = await b.until(m => m.t === 'zoneOk', 3000, 'zoneOk visit');
|
||||
ok('invited friend can visit home', zoB.zone === 'home:e2e_a');
|
||||
|
||||
// back to town
|
||||
b.clear();
|
||||
await b.send({ t: 'zone', id: 'town' });
|
||||
const zoT = await b.until(m => m.t === 'zoneOk', 3000, 'back to town');
|
||||
ok('returned to town', zoT.zone === 'town');
|
||||
|
||||
// time & weather broadcast
|
||||
const timeMsg = await a.until(m => m.t === 'time', 4000, 'time broadcast');
|
||||
ok('server clock ticking', typeof timeMsg.minutes === 'number', `${timeMsg.day} day, ${Math.round(timeMsg.minutes)} min`);
|
||||
|
||||
a.ws.close(); b.ws.close();
|
||||
await wait(200);
|
||||
|
||||
console.log(failures ? `\n${failures} FAILURES` : '\n🎉 ALL E2E CHECKS PASSED');
|
||||
process.exit(failures ? 1 : 0);
|
||||
}
|
||||
|
||||
main().catch(e => { console.error('E2E crashed:', e.message); process.exit(1); });
|
||||
@@ -0,0 +1,99 @@
|
||||
// LifeTown Online - headless verification: one short browser session per screen
|
||||
import { chromium } from 'playwright-core';
|
||||
import fs from 'node:fs';
|
||||
|
||||
const EXE = '/root/.cache/ms-playwright/chromium_headless_shell-1148/chrome-linux/headless_shell';
|
||||
const URL = 'http://127.0.0.1:7788';
|
||||
const OUT = '/tmp/lifetown-shots';
|
||||
fs.mkdirSync(OUT, { recursive: true });
|
||||
const ARGS = ['--use-gl=swiftshader', '--enable-unsafe-swiftshader', '--no-sandbox', '--disable-dev-shm-usage', '--disable-gpu-sandbox'];
|
||||
|
||||
const allErrors = [];
|
||||
|
||||
async function withPage(fn, label) {
|
||||
let browser;
|
||||
try {
|
||||
browser = await chromium.launch({ executablePath: EXE, args: ARGS, timeout: 30000 });
|
||||
const page = await browser.newPage({ viewport: { width: 960, height: 600 } });
|
||||
page.on('pageerror', (e) => allErrors.push(`[${label}] ${String(e).slice(0, 250)}`));
|
||||
page.on('console', (m) => { if (m.type() === 'error') allErrors.push(`[${label}] CONSOLE ${m.text().slice(0, 200)}`); });
|
||||
await page.goto(URL, { waitUntil: 'domcontentloaded', timeout: 20000 });
|
||||
await fn(page);
|
||||
console.log(`[shot] OK ${label}`);
|
||||
} catch (e) {
|
||||
console.log(`[shot] FAIL ${label}: ${String(e).slice(0, 140)}`);
|
||||
} finally {
|
||||
try { await browser?.close(); } catch {}
|
||||
}
|
||||
}
|
||||
|
||||
async function enterGame(page) {
|
||||
const uname = 'Sunny' + Math.floor(Math.random() * 900000 + 100000);
|
||||
await page.waitForTimeout(700);
|
||||
await page.click('#btn-newchar', { force: true });
|
||||
await page.fill('#cr-name', uname);
|
||||
await page.click('#btn-startlife', { force: true });
|
||||
await page.waitForTimeout(4200);
|
||||
}
|
||||
|
||||
(async () => {
|
||||
await withPage(async (page) => {
|
||||
await page.waitForTimeout(1100);
|
||||
await page.screenshot({ path: `${OUT}/1-title.png` });
|
||||
}, 'title');
|
||||
|
||||
await withPage(async (page) => {
|
||||
await page.waitForTimeout(700);
|
||||
await page.click('#btn-newchar', { force: true });
|
||||
await page.fill('#cr-name', 'Sunny' + Math.floor(Math.random() * 900000 + 100000));
|
||||
await page.waitForTimeout(1200);
|
||||
await page.screenshot({ path: `${OUT}/2-creator.png` });
|
||||
}, 'creator');
|
||||
|
||||
await withPage(async (page) => {
|
||||
await enterGame(page);
|
||||
await page.screenshot({ path: `${OUT}/3-town.png` });
|
||||
await page.keyboard.down('KeyW');
|
||||
await page.waitForTimeout(1200);
|
||||
await page.keyboard.up('KeyW');
|
||||
await page.waitForTimeout(400);
|
||||
await page.screenshot({ path: `${OUT}/4-walked.png` });
|
||||
}, 'town');
|
||||
|
||||
await withPage(async (page) => {
|
||||
await enterGame(page);
|
||||
await page.click('[data-act="phone"]', { force: true });
|
||||
await page.waitForTimeout(900);
|
||||
await page.screenshot({ path: `${OUT}/5-phone.png` });
|
||||
}, 'phone');
|
||||
|
||||
await withPage(async (page) => {
|
||||
await enterGame(page);
|
||||
await page.click('[data-act="home"]', { force: true });
|
||||
await page.waitForTimeout(600);
|
||||
await page.screenshot({ path: `${OUT}/6-homemenu.png` });
|
||||
const btns = await page.$$('#dialog-body button');
|
||||
if (btns[1]) await btns[1].click({ force: true });
|
||||
await page.waitForTimeout(3200);
|
||||
await page.screenshot({ path: `${OUT}/7-home.png` });
|
||||
}, 'home');
|
||||
|
||||
await withPage(async (page) => {
|
||||
await enterGame(page);
|
||||
await page.click('[data-act="home"]', { force: true });
|
||||
await page.waitForTimeout(500);
|
||||
const btns = await page.$$('#dialog-body button');
|
||||
if (btns[1]) await btns[1].click({ force: true });
|
||||
await page.waitForTimeout(3000);
|
||||
await page.click('[data-act="build"]', { force: true });
|
||||
await page.waitForTimeout(700);
|
||||
await page.click('#btn-shop', { force: true });
|
||||
await page.waitForTimeout(900);
|
||||
await page.screenshot({ path: `${OUT}/8-catalog.png` });
|
||||
await page.click('#catalog-close', { force: true });
|
||||
await page.waitForTimeout(400);
|
||||
await page.screenshot({ path: `${OUT}/9-buildmode.png` });
|
||||
}, 'build');
|
||||
|
||||
console.log(allErrors.length ? `PAGE ERRORS (${allErrors.length}):\n` + allErrors.slice(0, 10).join('\n') : 'NO PAGE ERRORS');
|
||||
})();
|
||||
+636
@@ -0,0 +1,636 @@
|
||||
// LifeTown Online — authoritative game server: sessions, zones, snapshots,
|
||||
// NPC simulation, world clock/weather, economy, relationships, persistence.
|
||||
import { WebSocket } from 'ws';
|
||||
import {
|
||||
TIME_SCALE, DAY_MINUTES, JOBS, XP_PER_RANK, WORK_SECONDS, WORK_COOLDOWN,
|
||||
NPCS, AREA_POINTS, INTERACTION_BY_ID, REL_MAX, ROMANCE_PARTNER_AT,
|
||||
CATALOG_BY_ID, HOUSES, MAX_CHAT_LEN, WEATHER_STATES,
|
||||
FRIEND_TIERS, NEEDS, VENUES,
|
||||
} from '../shared/data.mjs';
|
||||
import { loadProfile, saveProfile, newProfile, findProfileByToken, listProfileNames, sanitizeName } from './persist.mjs';
|
||||
|
||||
const TICK_MS = 1000 / 12; // snapshot rate
|
||||
const MOVE_RATE_MS = 66; // expected client movement packet interval
|
||||
const MAX_SPEED = 6.5; // metres/sec sanity cap
|
||||
|
||||
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
|
||||
const dist2d = (a, b) => Math.hypot(a.x - b.x, a.z - b.z);
|
||||
|
||||
function relKeyOf(targetType, id) { return targetType === 'npc' ? `npc:${id}` : `p:${String(id).toLowerCase()}`; }
|
||||
|
||||
function friendLabel(f) {
|
||||
let label = FRIEND_TIERS[0].label;
|
||||
for (const t of FRIEND_TIERS) if (f >= t.at) label = t.label;
|
||||
return label;
|
||||
}
|
||||
|
||||
export class GameServer {
|
||||
constructor(wss) {
|
||||
this.wss = wss;
|
||||
this.sessions = new Set(); // all live sessions
|
||||
this.byZone = new Map(); // zoneId -> Set<session>
|
||||
this.npcs = NPCS.map(def => ({
|
||||
id: def.id, name: def.name, role: def.role, color: def.color,
|
||||
x: 0, z: 12, ry: 0, anim: 'idle',
|
||||
target: null, waitUntil: 0, lineAt: Date.now() + 8000 + Math.random() * 20000,
|
||||
}));
|
||||
// start the world at 07:30 day 1 (1 real second = TIME_SCALE game-seconds)
|
||||
const startGameMin = 7 * 60 + 30;
|
||||
const elapsedRealSec = startGameMin * 60 / TIME_SCALE;
|
||||
this.t0 = Date.now() - elapsedRealSec * 1000;
|
||||
this.day = 1;
|
||||
this.weather = 'sunny';
|
||||
this.nextWeatherRoll = Date.now() + 30000;
|
||||
|
||||
this.interval = setInterval(() => this.tick(), TICK_MS);
|
||||
this.slowInterval = setInterval(() => this.slowTick(), 2000);
|
||||
console.log(`[LifeTown] world initialised — ${this.npcs.length} townsfolk ready`);
|
||||
}
|
||||
|
||||
// ---------------- world clock ---------------------------
|
||||
gameTime() {
|
||||
const totalGameSec = Math.floor((Date.now() - this.t0) / 1000) * TIME_SCALE;
|
||||
const totalMin = Math.floor(totalGameSec / 60);
|
||||
return { day: Math.floor(totalMin / DAY_MINUTES) + 1, minutes: totalMin % DAY_MINUTES };
|
||||
}
|
||||
|
||||
// ---------------- connection lifecycle ------------------
|
||||
onConnection(ws) {
|
||||
ws.on('message', (data) => this.onMessage(ws, data));
|
||||
ws.on('close', () => this.onClose(ws));
|
||||
ws.on('error', () => {});
|
||||
ws.isAlive = true;
|
||||
}
|
||||
|
||||
onClose(ws) {
|
||||
const s = ws.__session;
|
||||
if (!s) return;
|
||||
this.sessions.delete(s);
|
||||
this.leaveZone(s);
|
||||
try { saveProfile(s.profile); } catch {}
|
||||
this.broadcastToZone(s.zone, 'playerLeave', { id: s.id }, s);
|
||||
console.log(`[LifeTown] ${s.profile.name} left the town`);
|
||||
}
|
||||
|
||||
leaveZone(s) {
|
||||
const set = this.byZone.get(s.zone);
|
||||
if (set) { set.delete(s); if (!set.size) this.byZone.delete(s.zone); }
|
||||
}
|
||||
joinZone(s, zoneId) {
|
||||
this.leaveZone(s);
|
||||
s.zone = zoneId;
|
||||
if (!this.byZone.has(zoneId)) this.byZone.set(zoneId, new Set());
|
||||
this.byZone.get(zoneId).add(s);
|
||||
// tell zone about the newcomer (full appearance so clients build the avatar)
|
||||
this.broadcastToZone(zoneId, 'playerJoin', { id: s.id, name: s.profile.name, appearance: s.publicAppearance(), zone: zoneId }, s);
|
||||
// roster reply to mover: everyone currently here
|
||||
const roster = [...(this.byZone.get(zoneId) || [])].filter(o => o !== s)
|
||||
.map(o => ({ id: o.id, name: o.profile.name, appearance: o.publicAppearance() }));
|
||||
this.send(s.ws, 'roster', { zone: zoneId, players: roster });
|
||||
}
|
||||
|
||||
// ---------------- messaging primitives -------------------
|
||||
send(ws, t, data) { if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ t, ...data })); }
|
||||
sendSession(s, t, data) { this.send(s.ws, t, data); }
|
||||
broadcast(t, data) { for (const s of this.sessions) this.sendSession(s, t, data); }
|
||||
broadcastToZone(zoneId, t, data, exclude) {
|
||||
const set = this.byZone.get(zoneId);
|
||||
if (!set) return;
|
||||
for (const s of set) if (s !== exclude) this.sendSession(s, t, data);
|
||||
}
|
||||
|
||||
onMessage(ws, raw) {
|
||||
let msg;
|
||||
try { msg = JSON.parse(raw.toString()); } catch { return; }
|
||||
if (!msg || typeof msg.t !== 'string') return;
|
||||
const s = ws.__session;
|
||||
|
||||
switch (msg.t) {
|
||||
case 'hello': return this.hello(ws, msg);
|
||||
case 'ping': return this.send(ws, 'pong', {});
|
||||
}
|
||||
if (!s) return;
|
||||
switch (msg.t) {
|
||||
case 'move': return this.move(s, msg);
|
||||
case 'chat': return this.chat(s, msg);
|
||||
case 'emote': return this.emote(s, msg);
|
||||
case 'social': return this.social(s, msg);
|
||||
case 'zone': return this.switchZone(s, msg);
|
||||
case 'invite': return this.invite(s, msg);
|
||||
case 'job_select': return this.jobSelect(s, msg);
|
||||
case 'job_work': return this.jobWork(s, msg);
|
||||
case 'buy_item': return this.buyItem(s, msg);
|
||||
case 'buy_house': return this.buyHouse(s, msg);
|
||||
case 'place_home': return this.placeHome(s, msg);
|
||||
case 'sell_item': return this.sellItem(s, msg);
|
||||
case 'sell_placed': return this.sellPlaced(s, msg);
|
||||
case 'needs_sync': return this.needsSync(s, msg);
|
||||
case 'gift_player': return this.giftPlayer(s, msg);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------- hello / character creation -------------
|
||||
hello(ws, msg) {
|
||||
const name = sanitizeName(msg.name);
|
||||
if (name.length < 2) return this.send(ws, 'error', { code: 'name', message: 'Name must be 2-20 letters.' });
|
||||
|
||||
let profile = null;
|
||||
if (msg.token) profile = findProfileByToken(msg.token);
|
||||
if (!profile) {
|
||||
profile = loadProfile(name);
|
||||
if (profile && (!msg.token || profile.token !== msg.token)) {
|
||||
// name belongs to another save; refuse politely
|
||||
return this.send(ws, 'error', { code: 'taken', message: `The name "${name}" already lives in LifeTown. Pick another.` });
|
||||
}
|
||||
if (!profile) {
|
||||
profile = newProfile(name, msg.appearance || {});
|
||||
saveProfile(profile);
|
||||
}
|
||||
}
|
||||
if (this.sessions.size >= 64) return this.send(ws, 'error', { code: 'full', message: 'Town is full right now (64 residents online).' });
|
||||
|
||||
const s = {
|
||||
id: `${profile.name.toLowerCase()}#${Math.random().toString(36).slice(2, 7)}`,
|
||||
ws, profile,
|
||||
zone: 'town', x: 0, z: 12, ry: 0, anim: 'idle',
|
||||
lastMoveAt: Date.now(), socialCooldownAt: {}, lastNeedsSync: 0,
|
||||
publicAppearance: () => ({
|
||||
bodyType: profile.appearance?.bodyType ?? 'average',
|
||||
height: profile.appearance?.height ?? 1,
|
||||
skin: profile.appearance?.skin ?? '#eab98f',
|
||||
hair: profile.appearance?.hair ?? 'short',
|
||||
hairColor: profile.appearance?.hairColor ?? '#4a2f1d',
|
||||
eyeColor: profile.appearance?.eyeColor ?? '#3a5a40',
|
||||
topColor: profile.appearance?.outfit?.topColor ?? '#4f8fd9',
|
||||
bottomColor: profile.appearance?.outfit?.bottomColor ?? '#33415c',
|
||||
outfitTop: profile.appearance?.outfit?.top ?? 'tee',
|
||||
outfitBottom: profile.appearance?.outfit?.bottom ?? 'jeans',
|
||||
dress: profile.appearance?.outfit?.dress ?? null,
|
||||
shoes: profile.appearance?.outfit?.shoes ?? 'sneakers',
|
||||
accessory: profile.appearance?.outfit?.accessory ?? 'none',
|
||||
name: profile.name,
|
||||
}),
|
||||
};
|
||||
ws.__session = s;
|
||||
this.sessions.add(s);
|
||||
|
||||
const time = this.gameTime();
|
||||
this.joinZone(s, 'town');
|
||||
this.send(ws, 'welcome', {
|
||||
yourId: s.id, token: profile.token, zone: 'town',
|
||||
profile: this.clientProfile(profile),
|
||||
time: { ...time, scale: TIME_SCALE },
|
||||
weather: this.weather,
|
||||
spawn: { x: 0, z: 12 },
|
||||
online: [...this.sessions].filter(o => o !== s).map(o => ({ id: o.id, name: o.profile.name })),
|
||||
residentsOnline: this.sessions.size,
|
||||
});
|
||||
this.broadcastToZone('town', 'notify', { title: 'Welcome!', text: `${profile.name} just arrived in LifeTown.`, icon: '👋' }, s);
|
||||
console.log(`[LifeTown] ${profile.name} joined (${this.sessions.size} online)`);
|
||||
}
|
||||
|
||||
clientProfile(p) {
|
||||
return {
|
||||
name: p.name, money: p.money, level: p.level, xp: p.xp,
|
||||
job: p.job, houseTier: p.houseTier, housesOwned: p.housesOwned,
|
||||
homeLayout: p.homeLayout, inventory: p.inventory,
|
||||
relationships: p.relationships, achievements: p.achievements,
|
||||
stats: p.stats, appearance: p.appearance, needs: p.needs, moodlets: p.moodlets || [],
|
||||
};
|
||||
}
|
||||
|
||||
// ---------------- movement -------------------------------
|
||||
move(s, msg) {
|
||||
const now = Date.now();
|
||||
const dt = Math.min((now - s.lastMoveAt) / 1000, 1);
|
||||
const nx = Number(msg.x), nz = Number(msg.z);
|
||||
if (!Number.isFinite(nx) || !Number.isFinite(nz)) return;
|
||||
const d = Math.hypot(nx - s.x, nz - s.z);
|
||||
if (d > MAX_SPEED * dt + 2.5) {
|
||||
// implausible jump: clamp toward previous position but stay responsive
|
||||
const k = (MAX_SPEED * dt + 2.5) / d;
|
||||
s.x += (nx - s.x) * k; s.z += (nz - s.z) * k;
|
||||
} else { s.x = clamp(nx, -72, 72); s.z = clamp(nz, -46, 46); }
|
||||
s.ry = Number(msg.ry) || s.ry;
|
||||
s.anim = typeof msg.anim === 'string' ? String(msg.anim).slice(0, 16) : s.anim;
|
||||
s.lastMoveAt = now;
|
||||
}
|
||||
|
||||
// ---------------- chat & emotes --------------------------
|
||||
chat(s, msg) {
|
||||
const text = String(msg.text || '').slice(0, MAX_CHAT_LEN).trim();
|
||||
if (!text) return;
|
||||
if (msg.channel === 'global') {
|
||||
this.broadcast('chat', { from: s.profile.name, text, channel: 'global', ts: Date.now() });
|
||||
} else {
|
||||
this.broadcastToZone(s.zone, 'chat', { from: s.profile.name, text, channel: 'say', ts: Date.now() });
|
||||
this.broadcastToZone(s.zone, 'bubble', { id: s.id, text });
|
||||
}
|
||||
}
|
||||
|
||||
emote(s, msg) {
|
||||
const id = String(msg.id || '').slice(0, 16);
|
||||
this.broadcastToZone(s.zone, 'emote', { id: s.id, emote: id });
|
||||
if (id === 'dance') {
|
||||
s.profile.stats.dances = (s.profile.stats.dances || 0) + 1;
|
||||
this.checkAchievements(s);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------- zones ---------------------------------
|
||||
switchZone(s, msg) {
|
||||
const want = String(msg.id || '');
|
||||
if (want === 'town') {
|
||||
s.x = 0; s.z = 12; s.anim = 'idle';
|
||||
this.joinZone(s, 'town');
|
||||
this.sendSession(s, 'zoneOk', { zone: 'town', spawn: { x: 0, z: 12 } });
|
||||
return;
|
||||
}
|
||||
if (want.startsWith('venue:')) {
|
||||
if (!VENUES[want]) return this.sendSession(s, 'error', { code: 'nozone', message: 'That place does not exist.' });
|
||||
s.x = 0; s.z = 4; s.anim = 'idle';
|
||||
this.joinZone(s, want);
|
||||
this.sendSession(s, 'zoneOk', { zone: want, spawn: { x: 0, z: 4 } });
|
||||
return;
|
||||
}
|
||||
if (want.startsWith('home:')) {
|
||||
const owner = want.slice(5);
|
||||
const isSelf = owner === s.profile.name.toLowerCase();
|
||||
const rel = s.profile.relationships[`p:${owner}`];
|
||||
const allowed = isSelf || (rel && rel.f >= 25) || (s.invitedTo === want);
|
||||
if (!allowed) return this.sendSession(s, 'error', { code: 'locked', message: 'You need an invitation (or friendship ≥ Friend) to visit that home.' });
|
||||
s.x = 0; s.z = 6; s.anim = 'idle';
|
||||
this.joinZone(s, want);
|
||||
const ownerProf = loadProfile(owner);
|
||||
this.sendSession(s, 'zoneOk', {
|
||||
zone: want, spawn: { x: 0, z: 6 },
|
||||
tier: ownerProf?.houseTier || 'studio',
|
||||
layout: ownerProf?.homeLayout || [],
|
||||
own: isSelf,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
invite(s, msg) {
|
||||
const targetName = sanitizeName(msg.to).toLowerCase();
|
||||
const target = [...this.sessions].find(o => o.profile.name.toLowerCase() === targetName);
|
||||
if (!target) return this.sendSession(s, 'error', { code: 'offline', message: 'That resident is not online.' });
|
||||
target.invitedTo = `home:${s.profile.name.toLowerCase()}`;
|
||||
this.sendSession(target, 'notify', { title: 'Invitation', text: `${s.profile.name} invited you to their home!`, icon: '🏠', action: { type: 'visit', home: `home:${s.profile.name.toLowerCase()}` } });
|
||||
this.sendSession(s, 'notify', { title: 'Invite sent', text: `${target.profile.name} can now visit your home.`, icon: '📨' });
|
||||
}
|
||||
|
||||
giftPlayer(s, msg) {
|
||||
const targetName = sanitizeName(msg.to).toLowerCase();
|
||||
const target = [...this.sessions].find(o => o.profile.name.toLowerCase() === targetName);
|
||||
if (!target || target.zone !== s.zone) return this.sendSession(s, 'error', { code: 'range', message: 'They are not nearby.' });
|
||||
if (dist2d(s, target) > 6) return this.sendSession(s, 'error', { code: 'range', message: 'Walk closer to hand over the gift.' });
|
||||
const cost = 40;
|
||||
if (s.profile.money < cost) return this.sendSession(s, 'error', { code: 'poor', message: 'Not enough TownCoins (need 40).' });
|
||||
s.profile.money -= cost;
|
||||
s.profile.stats.giftsSent++;
|
||||
this.applyRelDelta(s.profile, 'p', target.profile.name, { df: 2, dr: 6 });
|
||||
this.applyRelDelta(target.profile, 'p', s.profile.name, { df: 3, dr: 4 });
|
||||
target.profile.money += 20; // small thank-you kickback keeps economy friendly
|
||||
this.broadcastToZone(s.zone, 'socialFx', {
|
||||
from: s.id, to: target.id, anim: 'gift', emoji: '🎁',
|
||||
lines: [`${s.profile.name} gives ${target.profile.name} a present!`],
|
||||
});
|
||||
this.sendSession(s, 'money', { amount: s.profile.money });
|
||||
this.sendSession(target, 'money', { amount: target.profile.money });
|
||||
this.pushRelUpdate(s); this.pushRelUpdate(target);
|
||||
this.checkAchievements(s);
|
||||
}
|
||||
|
||||
// ---------------- social interactions --------------------
|
||||
social(s, msg) {
|
||||
const action = INTERACTION_BY_ID[String(msg.action || '')];
|
||||
if (!action) return;
|
||||
const type = msg.targetType === 'player' ? 'p' : 'npc';
|
||||
const now = Date.now();
|
||||
if ((s.socialCooldownAt[action.id] || 0) > now) return this.sendSession(s, 'error', { code: 'cooldown', message: 'Give it a moment…' });
|
||||
|
||||
// locate target
|
||||
let target = null, targetName = '', targetWs = null;
|
||||
if (type === 'npc') {
|
||||
const zset = this.byZone.get('town');
|
||||
if (s.zone !== 'town') return this.sendSession(s, 'error', { code: 'range', message: 'Townsfolk are out in the district.' });
|
||||
target = this.npcs.find(n => n.id === msg.targetId);
|
||||
targetName = target ? target.name : '';
|
||||
if (!zset || !zset.has(s)) return;
|
||||
} else {
|
||||
target = [...this.sessions].find(o => o.id === msg.targetId && o.zone === s.zone);
|
||||
if (!target) return this.sendSession(s, 'error', { code: 'range', message: 'They are not here anymore.' });
|
||||
targetName = target.profile.name; targetWs = target;
|
||||
}
|
||||
if (!target) return;
|
||||
if (dist2d(s, target) > 4.5) return this.sendSession(s, 'error', { code: 'range', message: 'Too far away — walk closer first.' });
|
||||
|
||||
const rel = s.profile.relationships[relKeyOf(type, type === 'npc' ? msg.targetId : targetName)] || { f: 0, r: 0 };
|
||||
if (rel.f < (action.req.f || 0) || rel.r < (action.req.r || 0))
|
||||
return this.sendSession(s, 'error', { code: 'locked', message: `Your bond isn't strong enough yet (need ${Math.max(action.req.f || 0, action.req.r || 0)}).` });
|
||||
|
||||
if (action.cost) {
|
||||
if (s.profile.money < action.cost) return this.sendSession(s, 'error', { code: 'poor', message: `Costs ${action.cost} TC.` });
|
||||
s.profile.money -= action.cost;
|
||||
this.sendSession(s, 'money', { amount: s.profile.money });
|
||||
}
|
||||
|
||||
// apply relationship deltas (initiator gains slightly less romance than target loses none — both grow)
|
||||
const df = action.df | 0, dr = action.dr | 0;
|
||||
const relA = this.applyRelDelta(s.profile, type, type === 'npc' ? msg.targetId : targetName, { df, dr });
|
||||
let relB = null;
|
||||
if (type === 'p') relB = this.applyRelDelta(target.profile, 'p', s.profile.name, { df: Math.ceil(df * 0.8), dr });
|
||||
|
||||
s.socialCooldownAt[action.id] = now + 1500;
|
||||
|
||||
// visible outcome
|
||||
const line = (action.lines && action.lines.length)
|
||||
? action.lines[Math.floor(Math.random() * action.lines.length)].replace('{name}', targetName)
|
||||
: '';
|
||||
this.broadcastToZone(s.zone, 'socialFx', {
|
||||
from: s.id, to: target.id ?? msg.targetId, anim: action.anim, group: action.group, emoji: action.group === 'Negative' ? '💢' : '💬',
|
||||
lines: line ? [`${s.profile.name}: ${line}`] : [],
|
||||
});
|
||||
if (action.anim === 'dance') { s.profile.stats.dances++; }
|
||||
|
||||
// NPC reaction: chance to answer with a friendly/negative line based on resulting friendship
|
||||
if (type === 'npc') {
|
||||
const willRespond = Math.random() < 0.8;
|
||||
if (willRespond) {
|
||||
const good = (df + dr) >= 0 && relA.f >= 10;
|
||||
const replies = good
|
||||
? ['That made my day!', 'You are sweet, you know that?', 'LifeTown suits you.', 'Ha! Good one.', 'Same time tomorrow?', 'You always know what to say.']
|
||||
: ['Wow. Just… wow.', 'I did NOT need that today.', 'Please be kinder.'];
|
||||
const delay = 900 + Math.random() * 1200;
|
||||
setTimeout(() => {
|
||||
if (target) this.broadcastToZone('town', 'bubble', { id: target.id, text: replies[Math.floor(Math.random() * replies.length)] });
|
||||
}, delay);
|
||||
}
|
||||
} else if (targetWs) {
|
||||
this.pushRelUpdate(target);
|
||||
}
|
||||
|
||||
this.pushRelUpdate(s);
|
||||
this.checkAchievements(s);
|
||||
}
|
||||
|
||||
applyRelDelta(profile, type, id, { df, dr }) {
|
||||
const key = relKeyOf(type, id);
|
||||
const rel = profile.relationships[key] || { f: 0, r: 0 };
|
||||
rel.f = clamp(rel.f + df, 0, REL_MAX);
|
||||
rel.r = clamp(rel.r + dr, 0, REL_MAX);
|
||||
const wasPartner = !!rel.partner;
|
||||
if (!wasPartner && rel.r >= ROMANCE_PARTNER_AT) {
|
||||
rel.partner = true;
|
||||
profile.stats.partners = (profile.stats.partners || 0) + 1;
|
||||
this.send(this.wsOf(profile), 'notify', { title: 'It\'s official!', text: `You and ${id} are partners now! 💞`, icon: '💞' });
|
||||
}
|
||||
if (wasPartner && rel.r < ROMANCE_PARTNER_AT - 15) rel.partner = false; // breakup by decay
|
||||
profile.relationships[key] = rel;
|
||||
return rel;
|
||||
}
|
||||
|
||||
pushRelUpdate(s) {
|
||||
this.sendSession(s, 'relUpdate', { relationships: s.profile.relationships });
|
||||
}
|
||||
|
||||
wsOf(profile) {
|
||||
const found = [...this.sessions].find(x => x.profile === profile);
|
||||
return found ? found.ws : null;
|
||||
}
|
||||
|
||||
// ---------------- jobs & economy -------------------------
|
||||
jobSelect(s, msg) {
|
||||
const job = JOBS.find(j => j.id === msg.jobId);
|
||||
if (!job) return;
|
||||
if (s.profile.job && s.profile.job.id === job.id) return;
|
||||
const wasEmployed = !!s.profile.job;
|
||||
s.profile.job = { id: job.id, rank: wasEmployed ? 0 : 0, xp: 0 };
|
||||
this.sendSession(s, 'jobUpdate', { job: s.profile.job });
|
||||
this.sendSession(s, 'notify', { title: 'New career!', text: `You are now a ${job.ranks[0]} at ${job.title}.`, icon: '💼' });
|
||||
this.checkAchievements(s);
|
||||
saveProfile(s.profile);
|
||||
}
|
||||
|
||||
jobWork(s, msg) {
|
||||
const p = s.profile;
|
||||
if (!p.job) return this.sendSession(s, 'error', { code: 'nojob', message: 'Get a job at City Hall first!' });
|
||||
const now = Date.now();
|
||||
if (now - (p.workLastAt || 0) < WORK_COOLDOWN * 1000) {
|
||||
const wait = Math.ceil((WORK_COOLDOWN * 1000 - (now - p.workLastAt)) / 1000);
|
||||
return this.sendSession(s, 'error', { code: 'cooldown', message: `Next shift available in ${wait}s.` });
|
||||
}
|
||||
p.workLastAt = now;
|
||||
const job = JOBS.find(j => j.id === p.job.id);
|
||||
const rank = clamp(p.job.rank, 0, job.ranks.length - 1);
|
||||
const pay = Math.round(job.basePay * (1 + rank * 0.55) * (0.95 + Math.random() * 0.1));
|
||||
const xpGain = 12 + rank * 4;
|
||||
p.job.xp += xpGain;
|
||||
p.money += pay;
|
||||
p.stats.shifts++;
|
||||
let promoted = false;
|
||||
while (p.job.rank < job.ranks.length - 1 && p.job.xp >= XP_PER_RANK[p.job.rank + 1]) {
|
||||
p.job.rank++; promoted = true;
|
||||
}
|
||||
this.sendSession(s, 'workResult', { pay, xp: xpGain, promoted, rank: p.job.rank, ranks: job.ranks, money: p.money });
|
||||
this.sendSession(s, 'money', { amount: p.money });
|
||||
if (promoted) {
|
||||
this.sendSession(s, 'notify', { title: 'Promotion!', text: `You are now ${job.ranks[p.job.rank]}!`, icon: '📈' });
|
||||
p.level = Math.min(40, p.level + 1);
|
||||
}
|
||||
this.checkAchievements(s);
|
||||
saveProfile(p);
|
||||
}
|
||||
|
||||
buyItem(s, msg) {
|
||||
const item = CATALOG_BY_ID[msg.itemId];
|
||||
const p = s.profile;
|
||||
if (!item) return;
|
||||
if (p.level < item.lvl) return this.sendSession(s, 'error', { code: 'level', message: `Unlocks at level ${item.lvl}.` });
|
||||
if (p.money < item.price) return this.sendSession(s, 'error', { code: 'poor', message: 'Not enough TownCoins.' });
|
||||
p.money -= item.price;
|
||||
p.inventory.push({ itemId: item.id });
|
||||
this.sendSession(s, 'inventory', { inventory: p.inventory });
|
||||
this.sendSession(s, 'money', { amount: p.money });
|
||||
this.sendSession(s, 'notify', { title: 'Purchased', text: `${item.name} added to your inventory.`, icon: '🛒' });
|
||||
saveProfile(p);
|
||||
}
|
||||
|
||||
sellItem(s, msg) {
|
||||
const p = s.profile;
|
||||
const idx = p.inventory.findIndex(it => it.itemId === msg.itemId);
|
||||
if (idx === -1) return;
|
||||
const item = CATALOG_BY_ID[msg.itemId];
|
||||
const refund = Math.round(item.price * 0.6);
|
||||
p.inventory.splice(idx, 1);
|
||||
p.money += refund;
|
||||
this.sendSession(s, 'inventory', { inventory: p.inventory });
|
||||
this.sendSession(s, 'money', { amount: p.money });
|
||||
this.sendSession(s, 'notify', { title: 'Sold', text: `Sold ${item.name} for ${refund} TC.`, icon: '💰' });
|
||||
saveProfile(p);
|
||||
}
|
||||
|
||||
sellPlaced(s, msg) {
|
||||
const item = CATALOG_BY_ID[msg.itemId];
|
||||
if (!item) return;
|
||||
const refund = Math.round(item.price * 0.6);
|
||||
s.profile.money += refund;
|
||||
this.sendSession(s, 'money', { amount: s.profile.money });
|
||||
this.sendSession(s, 'notify', { title: 'Sold furniture', text: `Removed ${item.name} — refunded ${refund} TC.`, icon: '🗑' });
|
||||
this.saveLayoutDebounced(s);
|
||||
}
|
||||
|
||||
buyHouse(s, msg) {
|
||||
const house = HOUSES.find(h => h.id === msg.houseId);
|
||||
const p = s.profile;
|
||||
if (!house) return;
|
||||
if (p.housesOwned.includes(house.id)) return;
|
||||
if (p.level < house.lvl) return this.sendSession(s, 'error', { code: 'level', message: `Unlocks at level ${house.lvl}.` });
|
||||
if (p.money < house.price) return this.sendSession(s, 'error', { code: 'poor', message: 'Not enough TownCoins.' });
|
||||
p.money -= house.price;
|
||||
p.housesOwned.push(house.id);
|
||||
p.houseTier = house.id;
|
||||
if (!p.achievements.includes('first_home')) p.achievements.push('first_home');
|
||||
this.sendSession(s, 'profile', { profile: this.clientProfile(p) });
|
||||
this.sendSession(s, 'money', { amount: p.money });
|
||||
this.sendSession(s, 'notify', { title: 'New home!', text: `You bought the ${house.name}! 🏡`, icon: '🏡' });
|
||||
this.checkAchievements(s);
|
||||
saveProfile(p);
|
||||
}
|
||||
|
||||
placeHome(s, msg) {
|
||||
const p = s.profile;
|
||||
if (!Array.isArray(msg.layout)) return;
|
||||
// validate: each placed item must exist in catalog; cap count; positions sane
|
||||
const layout = msg.layout.slice(0, 120).filter(it =>
|
||||
CATALOG_BY_ID[it?.itemId] &&
|
||||
Number.isFinite(it.x) && Number.isFinite(it.z) &&
|
||||
Math.abs(it.x) < 30 && Math.abs(it.z) < 30
|
||||
).map(it => ({ itemId: it.itemId, x: +it.x.toFixed(2), z: +it.z.toFixed(2), rot: (+it.rot || 0) }));
|
||||
p.homeLayout = layout;
|
||||
this.sendSession(s, 'layoutSaved', { count: layout.length });
|
||||
this.saveLayoutDebounced(s);
|
||||
}
|
||||
|
||||
saveLayoutDebounced(s) {
|
||||
clearTimeout(s._layoutSaveTimer);
|
||||
s._layoutSaveTimer = setTimeout(() => { try { saveProfile(s.profile); } catch {} }, 2000);
|
||||
this.checkAchievements(s);
|
||||
}
|
||||
|
||||
needsSync(s, msg) {
|
||||
const p = s.profile;
|
||||
if (msg.needs && typeof msg.needs === 'object') {
|
||||
p.needs = Object.fromEntries(NEEDS.map(k => [k, clamp(Number(msg.needs[k]) || 50, 0, 100)]));
|
||||
}
|
||||
if (Array.isArray(msg.moodlets)) p.moodlets = msg.moodlets.slice(0, 12);
|
||||
if (Date.now() - s.lastNeedsSync > 25000) { s.lastNeedsSync = Date.now(); saveProfile(p); }
|
||||
}
|
||||
|
||||
// ---------------- achievements ---------------------------
|
||||
checkAchievements(s) {
|
||||
const p = s.profile;
|
||||
const grant = (id, title, text) => {
|
||||
if (p.achievements.includes(id)) return;
|
||||
p.achievements.push(id);
|
||||
this.sendSession(s, 'achievement', { id, name: title, desc: text });
|
||||
this.sendSession(s, 'profile', { profile: this.clientProfile(p) });
|
||||
};
|
||||
const defs = {
|
||||
first_home: ['First Home', 'Buy your first house.'],
|
||||
social_butterfly: ['Social Butterfly', 'Make 20 friends.'],
|
||||
millionaire: ['Millionaire', 'Hold 1,000,000 TownCoins.'],
|
||||
heartbreaker: ['Heartbreaker', 'Have 5 partners.'],
|
||||
interior_designer: ['Interior Designer', 'Place 25 furniture items.'],
|
||||
employed: ['Day One', 'Get your first job.'],
|
||||
promoted: ['Moving On Up', 'Earn any promotion.'],
|
||||
party_animal: ['Party Animal', 'Dance at 3 events.'],
|
||||
};
|
||||
if (p.housesOwned.length >= 1 && p.houseTier !== 'studio') grant('first_home', ...defs.first_home);
|
||||
if (Object.values(p.relationships).filter(r => r.f >= 25).length >= 20) grant('social_butterfly', ...defs.social_butterfly);
|
||||
if (p.money >= 1000000) grant('millionaire', ...defs.millionaire);
|
||||
if ((p.stats.partners || 0) >= 5) grant('heartbreaker', ...defs.heartbreaker);
|
||||
if ((p.homeLayout || []).length >= 25) grant('interior_designer', ...defs.interior_designer);
|
||||
if (!!p.job) grant('employed', ...defs.employed);
|
||||
if (p.job && p.job.rank >= 1) grant('promoted', ...defs.promoted);
|
||||
if ((p.stats.dances || 0) >= 3) grant('party_animal', ...defs.party_animal);
|
||||
}
|
||||
|
||||
// ---------------- main loops -----------------------------
|
||||
tick() {
|
||||
// NPC brains
|
||||
const now = Date.now();
|
||||
const { minutes } = this.gameTime();
|
||||
const hour = minutes / 60;
|
||||
for (const n of this.npcs) {
|
||||
const def = NPCS.find(d => d.id === n.id);
|
||||
// choose schedule stop for current hour
|
||||
let stopId = def.schedule[0][1];
|
||||
for (const [startH, poi] of def.schedule) if (hour >= startH) stopId = poi;
|
||||
const anchor = AREA_POINTS[stopId] || { x: 0, z: -26 };
|
||||
// deterministic per-npc offset so they don't stack
|
||||
const seed = (n.id.charCodeAt(0) * 7 + n.id.length * 13) % 100 / 100;
|
||||
const ox = Math.sin(now / 9000 + seed * 6.28) * 3.2;
|
||||
const oz = Math.cos(now / 11000 + seed * 6.28) * 3.2;
|
||||
const tx = anchor.x + ox, tz = anchor.z + oz;
|
||||
|
||||
if (!n.target || Math.hypot(n.tx - tx, n.tz - tz) > 2) { n.tx = tx; n.tz = tz; n.target = true; }
|
||||
const dx = n.tx - n.x, dz = n.tz - n.z;
|
||||
const d = Math.hypot(dx, dz);
|
||||
if (d > 0.35) {
|
||||
const sp = 1.9;
|
||||
n.x += dx / d * sp * (TICK_MS / 1000);
|
||||
n.z += dz / d * sp * (TICK_MS / 1000);
|
||||
n.ry = Math.atan2(dx, dz);
|
||||
n.anim = 'walk';
|
||||
} else {
|
||||
n.anim = now > n.waitUntil ? (Math.random() < 0.25 ? 'talk' : 'idle') : n.anim;
|
||||
if (now > n.waitUntil) n.waitUntil = now + 4000 + Math.random() * 6000;
|
||||
}
|
||||
// ambient chatter
|
||||
if (now > n.lineAt && n.anim !== 'walk') {
|
||||
n.lineAt = now + 24000 + Math.random() * 26000;
|
||||
const lines = [
|
||||
'Lovely day in LifeTown!', 'Have you tried the taco truck?', 'I should redecorate my place…',
|
||||
'The fountain sparkles at night.', 'Anyone up for dancing later?', 'Work, work, work…',
|
||||
'I love the smell of café roast.', 'Rain soon, I can feel it.',
|
||||
];
|
||||
this.broadcastToZone('town', 'bubble', { id: n.id, text: lines[Math.floor(Math.random() * lines.length)] });
|
||||
}
|
||||
}
|
||||
|
||||
// snapshots per zone
|
||||
const npcSnap = this.npcs.map(n => ({ id: n.id, x: +n.x.toFixed(2), z: +n.z.toFixed(2), ry: +n.ry.toFixed(2), anim: n.anim }));
|
||||
for (const [zoneId, set] of this.byZone) {
|
||||
const players = [...set].map(pl => ({ id: pl.id, x: +pl.x.toFixed(2), z: +pl.z.toFixed(2), ry: +(pl.ry || 0).toFixed(2), anim: pl.anim }));
|
||||
const payload = JSON.stringify({
|
||||
t: 'snapshot', zone: zoneId,
|
||||
players,
|
||||
npcs: zoneId === 'town' ? npcSnap : [],
|
||||
});
|
||||
for (const pl of set) if (pl.ws.readyState === WebSocket.OPEN) pl.ws.send(payload);
|
||||
}
|
||||
}
|
||||
|
||||
slowTick() {
|
||||
const time = this.gameTime();
|
||||
// weather machine
|
||||
if (Date.now() > this.nextWeatherRoll) {
|
||||
this.nextWeatherRoll = Date.now() + 45000 + Math.random() * 75000;
|
||||
if (Math.random() < 0.55) {
|
||||
const weights = { sunny: 0.42, cloudy: 0.24, rain: 0.16, storm: 0.06, fog: 0.12 };
|
||||
const roll = Math.random();
|
||||
let acc = 0, next = this.weather;
|
||||
for (const w of WEATHER_STATES) { acc += weights[w]; if (roll <= acc) { next = w; break; } }
|
||||
if (next !== this.weather) {
|
||||
this.weather = next;
|
||||
this.broadcast('weather', { weather: next });
|
||||
const labels = { sunny: 'The sun breaks through over LifeTown!', cloudy: 'Clouds drift in…', rain: 'Rain patters across Maple Court ☔', storm: 'A storm rolls in — stay cozy!', fog: 'A soft fog wraps the town.' };
|
||||
this.broadcast('notify', { title: 'Weather', text: labels[next], icon: '🌤️' });
|
||||
}
|
||||
}
|
||||
}
|
||||
for (const s of this.sessions) this.sendSession(s, 'time', { ...time, weather: this.weather });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
// LifeTown Online — entry point: static file server + WebSocket upgrade.
|
||||
import http from 'node:http';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { WebSocketServer } from 'ws';
|
||||
import { GameServer } from './game.mjs';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const DIST = path.join(__dirname, '..', 'client', 'dist');
|
||||
const PORT = Number(process.env.GAME_PORT || 7788);
|
||||
|
||||
const MIME = {
|
||||
'.html': 'text/html; charset=utf-8', '.js': 'text/javascript', '.mjs': 'text/javascript',
|
||||
'.css': 'text/css', '.json': 'application/json', '.png': 'image/png', '.jpg': 'image/jpeg',
|
||||
'.svg': 'image/svg+xml', '.ico': 'image/x-icon', '.wasm': 'application/wasm',
|
||||
'.woff2': 'font/woff2', '.mp3': 'audio/mpeg', '.ogg': 'audio/ogg', '.webp': 'image/webp',
|
||||
};
|
||||
|
||||
function serveStatic(req, res) {
|
||||
let urlPath = decodeURIComponent(new URL(req.url, 'http://x').pathname);
|
||||
if (urlPath === '/') urlPath = '/index.html';
|
||||
let filePath = path.normalize(path.join(DIST, urlPath));
|
||||
if (!filePath.startsWith(DIST)) { res.writeHead(403); res.end('Forbidden'); return; }
|
||||
if (!fs.existsSync(filePath) || !fs.statSync(filePath).isFile()) {
|
||||
// SPA fallback
|
||||
filePath = path.join(DIST, 'index.html');
|
||||
if (!fs.existsSync(filePath)) { res.writeHead(503); res.end('LifeTown client is not built yet. Run: npm run build'); return; }
|
||||
}
|
||||
const ext = path.extname(filePath).toLowerCase();
|
||||
res.writeHead(200, {
|
||||
'Content-Type': MIME[ext] || 'application/octet-stream',
|
||||
'Cache-Control': ext === '.html' ? 'no-cache' : 'public, max-age=3600',
|
||||
});
|
||||
fs.createReadStream(filePath).pipe(res);
|
||||
}
|
||||
|
||||
const server = http.createServer(serveStatic);
|
||||
|
||||
// Single WebSocket endpoint: /ws
|
||||
const wss = new WebSocketServer({ noServer: true });
|
||||
server.on('upgrade', (req, socket, head) => {
|
||||
const { pathname } = new URL(req.url, 'http://x');
|
||||
if (pathname === '/ws') {
|
||||
wss.handleUpgrade(req, socket, head, (ws) => game.onConnection(ws));
|
||||
} else {
|
||||
socket.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
const game = new GameServer(wss);
|
||||
|
||||
server.listen(PORT, () => {
|
||||
console.log(`[LifeTown] server listening on http://127.0.0.1:${PORT}`);
|
||||
});
|
||||
@@ -0,0 +1,97 @@
|
||||
// LifeTown Online — JSON-file persistence for player profiles.
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import crypto from 'node:crypto';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import { START_MONEY, HOUSES } from '../shared/data.mjs';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const SAVE_DIR = path.join(__dirname, '..', 'saves');
|
||||
fs.mkdirSync(SAVE_DIR, { recursive: true });
|
||||
|
||||
function sanitizeName(name) {
|
||||
return String(name || '').trim().replace(/[^A-Za-z0-9_\- ]/g, '').slice(0, 20);
|
||||
}
|
||||
|
||||
export function newProfile(name, appearance) {
|
||||
const safe = sanitizeName(name);
|
||||
return {
|
||||
name: safe,
|
||||
token: crypto.randomBytes(16).toString('hex'),
|
||||
createdAt: Date.now(),
|
||||
appearance, // character creator output (client-defined schema)
|
||||
money: START_MONEY,
|
||||
level: 1, xp: 0, // player level
|
||||
job: null, // { id, rank, xp }
|
||||
workLastAt: 0,
|
||||
houseTier: 'studio', // owned house tier id
|
||||
housesOwned: ['studio'],
|
||||
homeLayout: [], // [{itemId,x,z,rot}]
|
||||
inventory: [], // [{itemId}] purchased, not yet placed
|
||||
relationships: {}, // npcId|playerName -> {f,r,status}
|
||||
achievements: [],
|
||||
stats: { shifts: 0, dances: 0, giftsSent: 0 },
|
||||
needs: null, // client-simulated; stored for continuity
|
||||
moodlets: [],
|
||||
};
|
||||
}
|
||||
|
||||
export function loadProfile(name) {
|
||||
const safe = sanitizeName(name);
|
||||
const file = path.join(SAVE_DIR, `${safe.toLowerCase()}.json`);
|
||||
try {
|
||||
if (!fs.existsSync(file)) return null;
|
||||
const raw = JSON.parse(fs.readFileSync(file, 'utf8'));
|
||||
if (!raw || raw.name !== safe) return null;
|
||||
// migrate defaults
|
||||
const base = newProfile(safe, raw.appearance || defaultAppearance());
|
||||
const merged = { ...base, ...raw, name: safe };
|
||||
if (!Array.isArray(merged.homeLayout)) merged.homeLayout = [];
|
||||
if (!Array.isArray(merged.inventory)) merged.inventory = [];
|
||||
if (!Array.isArray(merged.achievements)) merged.achievements = [];
|
||||
if (typeof merged.relationships !== 'object' || !merged.relationships) merged.relationships = {};
|
||||
if (typeof merged.stats !== 'object' || !merged.stats) merged.stats = { shifts: 0, dances: 0, giftsSent: 0 };
|
||||
return merged;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function saveProfile(profile) {
|
||||
const file = path.join(SAVE_DIR, `${profile.name.toLowerCase()}.json`);
|
||||
const tmp = file + '.tmp';
|
||||
fs.writeFileSync(tmp, JSON.stringify(profile));
|
||||
fs.renameSync(tmp, file);
|
||||
}
|
||||
|
||||
export function defaultAppearance() {
|
||||
return {
|
||||
bodyType: 'average', height: 1, skin: '#eab98f', faceShape: 'round',
|
||||
hair: 'short', hairColor: '#4a2f1d', eyes: 'round', eyeColor: '#3a5a40',
|
||||
brows: 'natural', nose: 'button', mouth: 'smile',
|
||||
outfit: { top: 'tee', bottom: 'jeans', dress: null, shoes: 'sneakers', accessory: 'none', topColor: '#4f8fd9', bottomColor: '#33415c' },
|
||||
personality: ['Friendly'], voice: 'warm', age: 25,
|
||||
};
|
||||
}
|
||||
|
||||
export function findProfileByToken(token) {
|
||||
if (!token || typeof token !== 'string') return null;
|
||||
for (const f of fs.readdirSync(SAVE_DIR)) {
|
||||
if (!f.endsWith('.json')) continue;
|
||||
try {
|
||||
const p = JSON.parse(fs.readFileSync(path.join(SAVE_DIR, f), 'utf8'));
|
||||
if (p.token === token) return p;
|
||||
} catch { /* skip corrupt */ }
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function listProfileNames() {
|
||||
try {
|
||||
return fs.readdirSync(SAVE_DIR).filter(f => f.endsWith('.json')).map(f => {
|
||||
try { return JSON.parse(fs.readFileSync(path.join(SAVE_DIR, f), 'utf8')).name; } catch { return null; }
|
||||
}).filter(Boolean);
|
||||
} catch { return []; }
|
||||
}
|
||||
|
||||
export { sanitizeName };
|
||||
+387
@@ -0,0 +1,387 @@
|
||||
// ============================================================
|
||||
// LifeTown Online — shared game data (single source of truth)
|
||||
// Imported by both the Node server and the browser client.
|
||||
// All content is original to LifeTown Online.
|
||||
// ============================================================
|
||||
|
||||
export const GAME_NAME = 'LifeTown Online';
|
||||
export const DISTRICT_NAME = 'Maple Court';
|
||||
export const TIME_SCALE = 60; // 1 real second = 1 game minute -> full day = 24 min
|
||||
export const DAY_MINUTES = 1440;
|
||||
export const START_MONEY = 1500;
|
||||
|
||||
// ---------------- World layout (metres) ---------------------
|
||||
export const WORLD = {
|
||||
size: 150, // playable half-extent reference
|
||||
roadX: { from: -70, to: 70, z: 0, width: 8 }, // main street along X
|
||||
sidewalkZ: 6,
|
||||
plaza: { x: 0, z: -26, r: 14 }, // central plaza + fountain
|
||||
park: { x: 42, z: -30, w: 44, d: 40 }, // park with pond
|
||||
spawn: { x: 0, z: 12 },
|
||||
};
|
||||
|
||||
// Points of interest: where players/NPCs can do things.
|
||||
// kind: sit | eat | work | exercise | shop | fish | stage | jobs | fountain | swim
|
||||
export const POIS = [
|
||||
{ id: 'fountain', name: 'Copper Fountain', x: 0, z: -26, kind: 'fountain', radius: 3 },
|
||||
{ id: 'stage', name: 'Plaza Stage', x: -18, z: -34, kind: 'stage', radius: 4 },
|
||||
{ id: 'bench_park', name: 'Park Bench', x: 36, z: -22, kind: 'sit', radius: 2 },
|
||||
{ id: 'bench_2', name: 'Street Bench', x: -30, z: 9, kind: 'sit', radius: 2 },
|
||||
{ id: 'cafe', name: 'Daily Grind Café', x: -48, z: -14, kind: 'eat', radius: 3, jobWorkspot: true },
|
||||
{ id: 'cityhall', name: 'City Hall Desk', x: 24, z: -16, kind: 'jobs', radius: 3 },
|
||||
{ id: 'gym', name: 'Flex Den Gym', x: 54, z: -14, kind: 'exercise', radius: 3, jobWorkspot: true },
|
||||
{ id: 'store', name: 'MapleMart Home Store',x: -66, z: -16, kind: 'shop', radius: 3 },
|
||||
{ id: 'foodtruck', name: 'Taco Comet Truck', x: 12, z: 10, kind: 'eat', radius: 3 },
|
||||
{ id: 'pond', name: 'Willow Pond', x: 46, z: -40, kind: 'fish', radius: 4 },
|
||||
];
|
||||
|
||||
// Buildings placed along the street (visual shells on the client).
|
||||
export const BUILDINGS = [
|
||||
{ id: 'cafe', name: 'Daily Grind Café', x: -48, z: -26, w: 16, d: 14, color: 0xf2b06b, roof: 0xd96c4f, sign: 'CAFÉ' },
|
||||
{ id: 'cityhall', name: 'LifeTown City Hall', x: 24, z: -28, w: 22, d: 16, color: 0xe8e3d5, roof: 0x7fa88b, sign: 'CITY HALL' },
|
||||
{ id: 'gym', name: 'Flex Den Gym', x: 54, z: -26, w: 16, d: 14, color: 0xc9d7f2, roof: 0x5b74a8, sign: 'GYM' },
|
||||
{ id: 'store', name: 'MapleMart', x: -66, z: -28, w: 18, d: 14, color: 0xf7cdd3, roof: 0xb85c6e, sign: 'MAPLEMART' },
|
||||
{ id: 'apt_a', name: 'Birch Apartments', x: -20, z: 22, w: 18, d: 14, color: 0xd9c9a8, roof: 0x8a6f56, sign: 'APARTMENTS' },
|
||||
{ id: 'apt_b', name: 'Rowan Lofts', x: 6, z: 22, w: 18, d: 14, color: 0xcfd8c2, roof: 0x6f7f5a, sign: 'LOFTS' },
|
||||
{ id: 'arcade', name: 'Pixel Porcupine Arcade', x: 38, z: 22, w: 16, d: 14, color: 0xd7c4ef, roof: 0x8a63b8, sign: 'ARCADE' },
|
||||
];
|
||||
|
||||
// ---------------- Building doors & enterable venues ----------------
|
||||
// Doors sit just outside each building's street-facing entrance.
|
||||
export const DOORS = [
|
||||
{ id: 'door_cafe', x: -48, z: -18.3, label: 'Enter Daily Grind Café', zone: 'venue:cafe' },
|
||||
{ id: 'door_cityhall', x: 24, z: -19.2, label: 'Enter City Hall', zone: 'venue:cityhall' },
|
||||
{ id: 'door_gym', x: 54, z: -18.3, label: 'Enter Flex Den Gym', zone: 'venue:gym' },
|
||||
{ id: 'door_store', x: -66, z: -18.3, label: 'Enter MapleMart', zone: 'venue:store' },
|
||||
{ id: 'door_arcade', x: 38, z: 13.9, label: 'Enter Pixel Porcupine Arcade', zone: 'venue:arcade' },
|
||||
{ id: 'door_apt_a', x: -20, z: 13.9, label: 'Enter Your Apartment', zone: 'home:self' },
|
||||
{ id: 'door_apt_b', x: 6, z: 13.9, label: 'Enter Your Apartment', zone: 'home:self' },
|
||||
];
|
||||
|
||||
// Public venue interiors: shared rooms every resident can walk into.
|
||||
export const VENUES = {
|
||||
'venue:cafe': {
|
||||
name: 'Daily Grind Café', size: [14, 10],
|
||||
items: [
|
||||
{ itemId: 'counter_kitchen', x: -2.5, z: -3.6, rot: 0 },
|
||||
{ itemId: 'counter_kitchen', x: -0.5, z: -3.6, rot: 0 },
|
||||
{ itemId: 'coffeemaker', x: 0.6, z: -3.7, rot: 0 },
|
||||
{ itemId: 'microwave', x: -3.4, z: -3.7, rot: 0 },
|
||||
{ itemId: 'table_dining', x: -4, z: 0.5, rot: 0 }, { itemId: 'stool', x: -4, z: 1.6, rot: 0 }, { itemId: 'stool', x: -4, z: -0.6, rot: 0 },
|
||||
{ itemId: 'table_dining', x: 0.5, z: 0.5, rot: 0 }, { itemId: 'stool', x: 0.5, z: 1.6, rot: 0 }, { itemId: 'stool', x: 0.5, z: -0.6, rot: 0 },
|
||||
{ itemId: 'loveseat', x: 5, z: 2.5, rot: Math.PI / 2 },
|
||||
{ itemId: 'plant_monstera', x: 6, z: -3.5, rot: 0 },
|
||||
{ itemId: 'paint_meadow', x: 0, z: -4.85, rot: 0 },
|
||||
{ itemId: 'lamp_floor', x: 6.2, z: 3.8, rot: 0 },
|
||||
{ itemId: 'rug_round', x: 0.25, z: 0.5, rot: 0 },
|
||||
],
|
||||
spots: [
|
||||
{ x: -1.5, z: -2.6, label: 'Order a coffee ☕', act: 'eat' },
|
||||
{ x: 5.5, z: 1.6, label: 'Lounge on the Loveseat', act: 'sit' },
|
||||
],
|
||||
},
|
||||
'venue:cityhall': {
|
||||
name: 'LifeTown City Hall', size: [16, 11],
|
||||
items: [
|
||||
{ itemId: 'table_desk', x: -3, z: -3, rot: 0 }, { itemId: 'chair_office', x: -3, z: -2.2, rot: Math.PI },
|
||||
{ itemId: 'table_desk', x: 3, z: -3, rot: 0 }, { itemId: 'chair_office', x: 3, z: -2.2, rot: Math.PI },
|
||||
{ itemId: 'shelf_books', x: -6.5, z: -4.6, rot: 0 },
|
||||
{ itemId: 'shelf_cube', x: 6.5, z: -4.6, rot: 0 },
|
||||
{ itemId: 'plant_tree', x: 0, z: -4.4, rot: 0 },
|
||||
{ itemId: 'decor_clock', x: 0, z: -5.35, rot: 0 },
|
||||
{ itemId: 'rug_long', x: 0, z: 1.5, rot: 0 },
|
||||
{ itemId: 'lamp_arc', x: 0, z: 3.4, rot: 0 },
|
||||
],
|
||||
spots: [
|
||||
{ x: -3, z: -1.6, label: 'Speak to the Career Desk 💼', act: 'jobs' },
|
||||
{ x: 3, z: -1.6, label: 'Browse Property Records 🏡', act: 'property' },
|
||||
],
|
||||
},
|
||||
'venue:gym': {
|
||||
name: 'Flex Den Gym', size: [14, 10],
|
||||
items: [
|
||||
{ itemId: 'rug_shag', x: -4, z: -2.5, rot: 0 },
|
||||
{ itemId: 'rug_shag', x: 4, z: -2.5, rot: 0 },
|
||||
{ itemId: 'speaker', x: 0, z: -4.3, rot: 0 },
|
||||
{ itemId: 'fridge_dual', x: -6.2, z: -4, rot: 0 },
|
||||
{ itemId: 'plant_fern', x: 6.2, z: -4.2, rot: 0 },
|
||||
{ itemId: 'tv_oled', x: 0, z: -4.75, rot: 0 },
|
||||
{ itemId: 'sofa_modern', x: 5.5, z: 3.4, rot: Math.PI },
|
||||
],
|
||||
spots: [
|
||||
{ x: -4, z: -1.4, label: 'Hit the Mats 🏋️', act: 'exercise' },
|
||||
{ x: 4, z: -1.4, label: 'Cardio Corner 🏃', act: 'exercise' },
|
||||
],
|
||||
},
|
||||
'venue:store': {
|
||||
name: 'MapleMart Home Store', size: [16, 11],
|
||||
items: [
|
||||
{ itemId: 'shelf_cube', x: -5, z: -3.8, rot: 0 }, { itemId: 'shelf_cube', x: -3, z: -3.8, rot: 0 },
|
||||
{ itemId: 'shelf_books', x: 5, z: -3.8, rot: 0 },
|
||||
{ itemId: 'wardrobe_pine', x: 6.4, z: 0.5, rot: -Math.PI / 2 },
|
||||
{ itemId: 'bed_cozy', x: -6, z: 1.5, rot: 0 },
|
||||
{ itemId: 'table_coffee', x: 0.5, z: 0.8, rot: 0 },
|
||||
{ itemId: 'sofa_basic', x: 2.5, z: 2.8, rot: Math.PI },
|
||||
{ itemId: 'light_neon', x: 0, z: -5.2, rot: 0 },
|
||||
{ itemId: 'plant_cactus', x: -6.8, z: -4.4, rot: 0 },
|
||||
{ itemId: 'rug_round', x: 0.5, z: 0.8, rot: 0 },
|
||||
],
|
||||
spots: [
|
||||
{ x: 0, z: -2.6, label: 'Browse the Catalogue 🛒', act: 'shop' },
|
||||
],
|
||||
},
|
||||
'venue:arcade': {
|
||||
name: 'Pixel Porcupine Arcade', size: [13, 10],
|
||||
items: [
|
||||
{ itemId: 'pc_tower', x: -4, z: -3.6, rot: 0 },
|
||||
{ itemId: 'console', x: 0, z: -3.6, rot: 0 },
|
||||
{ itemId: 'tv_flat', x: 0, z: -4.2, rot: 0 },
|
||||
{ itemId: 'keyboard_elec', x: 4, z: -3.6, rot: 0 },
|
||||
{ itemId: 'light_neon', x: -2.5, z: -5.05, rot: 0 },
|
||||
{ itemId: 'light_neon', x: 2.5, z: -5.05, rot: 0 },
|
||||
{ itemId: 'speaker', x: -6, z: -4.2, rot: 0 },
|
||||
{ itemId: 'stool', x: -4, z: -2.6, rot: 0 }, { itemId: 'stool', x: 0, z: -2.6, rot: 0 }, { itemId: 'stool', x: 4, z: -2.6, rot: 0 },
|
||||
{ itemId: 'rug_long', x: 0, z: 0.5, rot: 0 },
|
||||
],
|
||||
spots: [
|
||||
{ x: 0, z: -2, label: 'Play the Cabinets 🕹️', act: 'arcade' },
|
||||
{ x: 4.5, z: -2, label: 'Dance Machine 💃', act: 'stage' },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
// ---------------- Personality traits ------------------------
|
||||
export const TRAITS = ['Friendly','Romantic','Ambitious','Lazy','Creative','Athletic','Intelligent','Funny','Introverted','Extroverted','Generous','Competitive'];
|
||||
|
||||
// ---------------- Jobs / careers ----------------------------
|
||||
// pay is TownCoins per work shift; xp accumulates toward promotion.
|
||||
export const JOBS = [
|
||||
{ id:'barista', title:'Barista', poi:'cafe', basePay: 55, hours:[6,14],
|
||||
ranks:['Trainee Barista','Barista','Head Barista','Café Manager','Coffee Boss'] },
|
||||
{ id:'chef', title:'Chef', poi:'foodtruck', basePay: 70, hours:[10,19],
|
||||
ranks:['Kitchen Hand','Line Cook','Sous Chef','Head Chef','Star Chef'] },
|
||||
{ id:'programmer', title:'Programmer', poi:'cityhall',basePay: 90, hours:[9,17],
|
||||
ranks:['Junior Developer','Software Engineer','Senior Engineer','Lead Architect','Tech Executive'] },
|
||||
{ id:'designer', title:'Designer', poi:'store', basePay: 75, hours:[10,18],
|
||||
ranks:['Design Intern','Junior Designer','Product Designer','Art Director','Creative Director'] },
|
||||
{ id:'doctor', title:'Doctor', poi:'gym', basePay: 110, hours:[8,16],
|
||||
ranks:['Resident','Physician','Surgeon','Chief of Staff','Medical Director'] },
|
||||
{ id:'teacher', title:'Teacher', poi:'cityhall',basePay: 65, hours:[8,15],
|
||||
ranks:['Substitute','Teacher','Senior Teacher','Dean','Principal'] },
|
||||
{ id:'police', title:'Police Officer', poi:'cityhall',basePay: 80, hours:[7,15],
|
||||
ranks:['Cadet','Officer','Sergeant','Lieutenant','Commissioner'] },
|
||||
{ id:'engineer', title:'Engineer', poi:'gym', basePay: 95, hours:[9,17],
|
||||
ranks:['Assistant Engineer','Engineer','Project Engineer','Principal Engineer','Director of Works'] },
|
||||
{ id:'musician', title:'Musician', poi:'stage', basePay: 50, hours:[17,23],
|
||||
ranks:['Street Performer','Gig Musician','Band Leader','Recording Artist','Headliner'] },
|
||||
{ id:'influencer', title:'Influencer', poi:'plaza', basePay: 45, hours:[11,19],
|
||||
ranks:['Newcomer','Micro-Influencer','Trendsetter','Star Creator','Town Icon'] },
|
||||
{ id:'athlete', title:'Athlete', poi:'gym', basePay: 60, hours:[7,13],
|
||||
ranks:['Rookie','Amateur','Pro','Champion','Legend'] },
|
||||
{ id:'artist', title:'Artist', poi:'pond', basePay: 40, hours:[10,16],
|
||||
ranks:['Sketcher','Painter','Gallery Artist','Master Artist','Living Legend'] },
|
||||
];
|
||||
export const XP_PER_RANK = [0, 100, 260, 520, 900]; // cumulative xp needed to reach rank i
|
||||
export const WORK_SECONDS = 6; // real seconds per shift
|
||||
export const WORK_COOLDOWN = 25; // real seconds between shifts (server-enforced)
|
||||
|
||||
// ---------------- Needs ------------------------------------
|
||||
export const NEEDS = ['hunger','energy','hygiene','fun','social','comfort']; // 0..100
|
||||
export const NEED_DECAY_PER_GAME_HOUR = {
|
||||
hunger: 4.2, energy: 3.6, hygiene: 2.4, fun: 3.0, social: 2.6, comfort: 2.0,
|
||||
};
|
||||
export const MOOD_NEEDS = [ // weight of each need into mood (-100..100 scale)
|
||||
['hunger',1.0],['energy',0.8],['hygiene',0.5],['fun',1.0],['social',0.8],['comfort',0.6]
|
||||
];
|
||||
|
||||
// ---------------- Furniture catalogue -----------------------
|
||||
// fx: multipliers/capacities used by interactable objects at home.
|
||||
// cat: bed sofa table chair tv pc fridge stove shower toilet sink wardrobe shelf plant decor light rug paint elec
|
||||
export const CATALOG = [
|
||||
// Beds
|
||||
{ id:'bed_basic', cat:'bed', name:'Dreamer Single Bed', price:180, lvl:1, w:2, d:3, fx:{ energyRate:1.0 } },
|
||||
{ id:'bed_cozy', cat:'bed', name:'Cloudline Double Bed', price:420, lvl:2, w:2.4, d:3, fx:{ energyRate:1.2 } },
|
||||
{ id:'bed_lux', cat:'bed', name:'Aurora Velvet Bed', price:980, lvl:4, w:2.6, d:3.2, fx:{ energyRate:1.45 } },
|
||||
{ id:'bed_kids', cat:'bed', name:'Rocket Bunk Bed', price:260, lvl:1, w:2.2, d:3, fx:{ energyRate:1.05 } },
|
||||
// Sofas
|
||||
{ id:'sofa_basic', cat:'sofa', name:'Comfi Couch', price:240, lvl:1, w:3, d:1.4, fx:{ comfortRate:1.1 } },
|
||||
{ id:'sofa_modern',cat:'sofa', name:'Pebble Modular Sofa', price:520, lvl:3, w:3.4, d:1.6, fx:{ comfortRate:1.25 } },
|
||||
{ id:'loveseat', cat:'sofa', name:'Sweetheart Loveseat', price:300, lvl:2, w:2.2, d:1.3, fx:{ comfortRate:1.15, romanceAura:true } },
|
||||
{ id:'sofa_lux', cat:'sofa', name:'Velvet Cloud Sectional', price:1100, lvl:5, w:3.8, d:1.8, fx:{ comfortRate:1.4 } },
|
||||
// Tables
|
||||
{ id:'table_dining',cat:'table', name:'Oakmeet Dining Table', price:220, lvl:1, w:2.6, d:1.6, fx:{} },
|
||||
{ id:'table_coffee',cat:'table',name:'Roundabout Coffee Table', price:130, lvl:1, w:1.4, d:1.4, fx:{ comfortRate:1.05 } },
|
||||
{ id:'table_desk', cat:'table', name:'Focus Desk', price:190, lvl:1, w:2, d:1, fx:{ productivity:1.1 } },
|
||||
// Chairs
|
||||
{ id:'chair_wood', cat:'chair', name:'Simple Chair', price:60, lvl:1, w:0.9, d:0.9, fx:{} },
|
||||
{ id:'chair_office',cat:'chair',name:'Ergo Glide Chair', price:170, lvl:2, w:1, d:1, fx:{ productivity:1.15 } },
|
||||
{ id:'stool', cat:'chair', name:'Pop Stool', price:45, lvl:1, w:0.7, d:0.7, fx:{} },
|
||||
// TV & electronics
|
||||
{ id:'tv_flat', cat:'tv', name:'SlimView 40"', price:400, lvl:2, w:1.6, d:0.4, fx:{ funRate:1.2 } },
|
||||
{ id:'tv_oled', cat:'tv', name:'CinemaWall 65"', price:1400, lvl:5, w:2.2, d:0.5, fx:{ funRate:1.5 } },
|
||||
{ id:'pc_tower', cat:'pc', name:'Quanta PC Setup', price:800, lvl:3, w:1.8, d:0.8, fx:{ funRate:1.25, productivity:1.3 } },
|
||||
{ id:'console', cat:'elec', name:'PlayBox Console', price:350, lvl:2, w:0.6, d:0.4, fx:{ funRate:1.3 } },
|
||||
{ id:'speaker', cat:'elec', name:'BoomBerry Speaker', price:150, lvl:1, w:0.5, d:0.5, fx:{ funRate:1.1 } },
|
||||
{ id:'fridge_retro',cat:'fridge',name:'Mint Fridge', price:320, lvl:1, w:1.2, d:1, fx:{ hungerRate:1.1 } },
|
||||
{ id:'fridge_dual',cat:'fridge',name:'TwinFrost Deluxe', price:700, lvl:3, w:1.4, d:1, fx:{ hungerRate:1.25 } },
|
||||
{ id:'stove_basic',cat:'stove',name: 'HeatWhirl Oven', price:290, lvl:1, w:1.2, d:0.9, fx:{ cookSpeed:1.0 } },
|
||||
{ id:'stove_pro', cat:'stove',name:'ChefBlaze Range', price:650, lvl:3, w:1.4, d:0.9, fx:{ cookSpeed:1.35 } },
|
||||
// Bathroom
|
||||
{ id:'shower_std', cat:'shower',name:'RainRing Shower', price:260, lvl:1, w:1.2, d:1.2, fx:{ hygieneRate:1.0 } },
|
||||
{ id:'shower_lux', cat:'shower',name:'Falls Spa Shower', price:600, lvl:4, w:1.4, d:1.4, fx:{ hygieneRate:1.35 } },
|
||||
{ id:'toilet_std', cat:'toilet',name:'Porcelain Throne', price:140, lvl:1, w:0.9, d:1.1, fx:{} },
|
||||
{ id:'sink_std', cat:'sink', name:'Bubble Basin', price:110, lvl:1, w:1, d:0.6, fx:{ hygieneRate:1.08 } },
|
||||
{ id:'bath_tub', cat:'shower',name:'Soakstar Tub', price:480, lvl:3, w:1.8, d:1, fx:{ hygieneRate:1.2, comfortRate:1.05 } },
|
||||
// Storage
|
||||
{ id:'wardrobe_pine',cat:'wardrobe',name:'Pinewood Wardrobe', price:210, lvl:1, w:1.6, d:0.8, fx:{} },
|
||||
{ id:'wardrobe_walk',cat:'wardrobe',name:'Walk-In Closet Set', price:850, lvl:5, w:2.6, d:1.2, fx:{ comfortRate:1.1 } },
|
||||
{ id:'shelf_books',cat:'shelf', name:'Storyline Bookshelf', price:160, lvl:1, w:1.6, d:0.5, fx:{ funRate:1.05 } },
|
||||
{ id:'shelf_cube', cat:'shelf', name:'CubeGrid Shelving', price:190, lvl:2, w:1.8, d:0.5, fx:{} },
|
||||
{ id:'dresser', cat:'wardrobe',name:'Morningview Dresser', price:180, lvl:1, w:1.4, d:0.7, fx:{} },
|
||||
// Plants & decor
|
||||
{ id:'plant_fern', cat:'plant', name:'Feather Fern', price:40, lvl:1, w:0.8, d:0.8, fx:{ comfortRate:1.03 } },
|
||||
{ id:'plant_monstera',cat:'plant',name:'Monstera Magnum', price:90, lvl:2, w:1, d:1, fx:{ comfortRate:1.06 } },
|
||||
{ id:'plant_cactus',cat:'plant',name:'Spike Buddy Cactus', price:30, lvl:1, w:0.5, d:0.5, fx:{} },
|
||||
{ id:'plant_tree', cat:'plant', name:'Indoor Fig Tree', price:140, lvl:2, w:1.2, d:1.2, fx:{ comfortRate:1.08 } },
|
||||
{ id:'decor_vase', cat:'decor', name:'Sunset Vase', price:55, lvl:1, w:0.5, d:0.5, fx:{} },
|
||||
{ id:'decor_clock',cat:'decor', name:'Ticktock Wall Clock', price:70, lvl:1, w:0.6, d:0.2, fx:{} },
|
||||
{ id:'decor_mirror',cat:'decor',name:'Glimmer Mirror', price:120, lvl:2, w:1, d:0.2, fx:{ hygieneRate:1.05 } },
|
||||
{ id:'decor_aquarium',cat:'decor',name:'Ripple Aquarium', price:380, lvl:3, w:1.2, d:0.6, fx:{ funRate:1.15, comfortRate:1.05 } },
|
||||
{ id:'rug_round', cat:'rug', name:'Circle Breeze Rug', price:80, lvl:1, w:2.4, d:2.4, fx:{ comfortRate:1.04 } },
|
||||
{ id:'rug_long', cat:'rug', name:'Hallway Runner', price:65, lvl:1, w:3, d:1.2, fx:{} },
|
||||
{ id:'rug_shag', cat:'rug', name:'Cloudpile Shag Rug', price:150, lvl:2, w:2.8, d:2, fx:{ comfortRate:1.08 } },
|
||||
// Lighting
|
||||
{ id:'lamp_floor', cat:'light',name:'Halo Floor Lamp', price:95, lvl:1, w:0.7, d:0.7, fx:{ comfortRate:1.04 } },
|
||||
{ id:'lamp_table', cat:'light',name:'Dusk Table Lamp', price:60, lvl:1, w:0.5, d:0.5, fx:{} },
|
||||
{ id:'lamp_arc', cat:'light',name:'Arcline Lamp', price:230, lvl:3, w:1.2, d:0.6, fx:{ comfortRate:1.08 } },
|
||||
{ id:'light_neon', cat:'light',name:'NeonWave Strip', price:180, lvl:2, w:2, d:0.2, fx:{ funRate:1.1 } },
|
||||
// Paintings
|
||||
{ id:'paint_meadow',cat:'paint',name:'Meadow Morning Print', price:85, lvl:1, w:1.2, d:0.1, fx:{ comfortRate:1.04 } },
|
||||
{ id:'paint_abstract',cat:'paint',name:'Confetti Abstract', price:130, lvl:2, w:1.4, d:0.1, fx:{ funRate:1.05 } },
|
||||
{ id:'paint_portrait',cat:'paint',name:'Ancestral Portrait', price:200, lvl:3, w:1.2, d:0.1, fx:{ comfortRate:1.06 } },
|
||||
// Kitchen extras / misc
|
||||
{ id:'counter_kitchen',cat:'table',name:'Prep Counter', price:240, lvl:2, w:1.8, d:0.9, fx:{ cookSpeed:1.1 } },
|
||||
{ id:'microwave', cat:'elec', name:'ZapWave Microwave', price:130, lvl:1, w:0.8, d:0.6, fx:{ cookSpeed:1.08 } },
|
||||
{ id:'coffeemaker',cat:'elec', name:'BrewBuddy Machine', price:110, lvl:1, w:0.6, d:0.5, fx:{ energyRate:1.05 } },
|
||||
{ id:'guitar', cat:'decor',name:'Starwood Guitar', price:220, lvl:2, w:0.6, d:0.4, fx:{ funRate:1.15 } },
|
||||
{ id:'keyboard_elec',cat:'elec',name:'MelodyKeys Synth', price:260, lvl:2, w:1.4, d:0.5, fx:{ funRate:1.15 } },
|
||||
{ id:'easel', cat:'decor',name:'Vision Easel', price:150, lvl:2, w:1, d:0.8, fx:{ funRate:1.1 } },
|
||||
{ id:'teddy', cat:'decor',name:'Mr. Snugglesworth', price:45, lvl:1, w:0.5, d:0.5, fx:{ comfortRate:1.05, romanceAura:true } },
|
||||
];
|
||||
export const CATALOG_BY_ID = Object.fromEntries(CATALOG.map(c => [c.id, c]));
|
||||
|
||||
// ---------------- Housing tiers -----------------------------
|
||||
export const HOUSES = [
|
||||
{ id:'studio', name:'Willow Studio Apartment', price:0, lvl:1, size:[11,9] },
|
||||
{ id:'small', name:'Clover Small House', price:4500, lvl:3, size:[13,11] },
|
||||
{ id:'medium', name:'Brookside Medium House', price:12000, lvl:6, size:[16,12] },
|
||||
{ id:'large', name:'Hillcrest Large House', price:28000, lvl:10, size:[19,14] },
|
||||
{ id:'luxury', name:'Lakeside Luxury Villa', price:60000, lvl:15, size:[22,16] },
|
||||
{ id:'mansion',name:'Starfall Mansion', price:125000,lvl:22, size:[26,20] },
|
||||
];
|
||||
|
||||
// ---------------- NPCs (all original) -----------------------
|
||||
// schedule entries: [startHour, poiId] — walks to POIs through the day.
|
||||
export const NPCS = [
|
||||
{ id:'maya', name:'Maya Bloom', role:'Barista', color:0xe8875f, hairColor:0x3b2417, traits:['Friendly','Extroverted'],
|
||||
schedule:[[6,'cafe'],[12,'plaza'],[14,'cafe'],[18,'stage'],[21,'fountain']], home:'cafe' },
|
||||
{ id:'felix', name:'Felix Grant', role:'Programmer', color:0x5f86e8, hairColor:0x20180f, traits:['Intelligent','Introverted'],
|
||||
schedule:[[8,'cityhall'],[12,'foodtruck'],[13,'cityhall'],[18,'arcade'],[22,'apt_b']], home:'apt_b' },
|
||||
{ id:'rosa', name:'Rosa Vega', role:'Chef', color:0xd95f8a, hairColor:0x141414, traits:['Creative','Generous'],
|
||||
schedule:[[9,'foodtruck'],[14,'foodtruck'],[18,'cafe'],[21,'plaza']], home:'apt_a' },
|
||||
{ id:'kenji', name:'Kenji Sato', role:'Personal Coach', color:0x67b56a, hairColor:0x101010, traits:['Athletic','Competitive'],
|
||||
schedule:[[6,'gym'],[12,'park'],[14,'gym'],[19,'stage'],[22,'apt_a']], home:'apt_a' },
|
||||
{ id:'nadia', name:'Nadia Sol', role:'Artist', color:0xefcf62, hairColor:0x7a3d1e, traits:['Creative','Lazy'],
|
||||
schedule:[[9,'pond'],[13,'park'],[16,'store'],[19,'plaza'],[22,'apt_b']], home:'apt_b' },
|
||||
{ id:'theo', name:'Theo Marsh', role:'Shop Clerk', color:0x8fb7d9, hairColor:0x59391f, traits:['Funny','Generous'],
|
||||
schedule:[[8,'store'],[13,'foodtruck'],[14,'store'],[19,'arcade'],[22,'apt_a']], home:'apt_a' },
|
||||
{ id:'ivy', name:'Ivy Lane', role:'Musician', color:0xb58fd9, hairColor:0x2e1e47, traits:['Romantic','Creative'],
|
||||
schedule:[[10,'stage'],[14,'cafe'],[17,'pond'],[20,'stage'],[23,'apt_b']], home:'apt_b' },
|
||||
{ id:'bruno', name:'Bruno Steel', role:'Engineer', color:0xd97f4f, hairColor:0x2a2a2a, traits:['Ambitious','Competitive'],
|
||||
schedule:[[7,'gym'],[9,'cityhall'],[12,'foodtruck'],[13,'cityhall'],[19,'arcade'],[22,'apt_a']], home:'apt_a' },
|
||||
{ id:'cleo', name:'Cleo Brooks', role:'Reporter', color:0x7fd9c2, hairColor:0x8a2f2f, traits:['Extroverted','Funny'],
|
||||
schedule:[[8,'plaza'],[11,'cafe'],[14,'cityhall'],[18,'stage'],[21,'fountain']], home:'apt_b' },
|
||||
{ id:'oliver',name:'Oliver Finch', role:'Doctor', color:0xa8d97f, hairColor:0x4a3018, traits:['Intelligent','Generous'],
|
||||
schedule:[[7,'gym'],[9,'cityhall'],[12,'cafe'],[13,'cityhall'],[19,'pond'],[22,'apt_a']], home:'apt_a' },
|
||||
];
|
||||
// POI anchor points for NPC schedule targets that are areas rather than POIs:
|
||||
export const AREA_POINTS = { plaza:{x:0,z:-26}, park:{x:42,z:-26} };
|
||||
|
||||
// ---------------- Social interactions -----------------------
|
||||
// req: minimum friendship(f)/romance(r) level. fx: relationship deltas & mood.
|
||||
// anim: animation key both parties play. line templates may include {name}.
|
||||
export const INTERACTIONS = [
|
||||
{ id:'hello', group:'Friendly', label:'Say Hello', req:{f:0}, df:2, dr:0, anim:'wave',
|
||||
lines:['Hi there, {name}!','Hello hello!','Hey {name}, good to see you!'] },
|
||||
{ id:'chat', group:'Friendly', label:'Chat', req:{f:0}, df:4, dr:0, anim:'talk',
|
||||
lines:['Did you see the plaza fountain? Gorgeous.','I heard the café has a new roast.','Weather has been lovely lately.'] },
|
||||
{ id:'joke', group:'Friendly', label:'Tell Joke', req:{f:5}, df:5, dr:0, anim:'laugh', moodFx:{fun:+8},
|
||||
lines:['Why did the scarecrow move to LifeTown? He heard the fields were outstanding!','I told my fridge a joke… it didn\'t get it, cold shoulder.'] },
|
||||
{ id:'compliment',group:'Friendly',label:'Compliment', req:{f:5}, df:6, dr:1, anim:'talk', moodFx:{social:+6},
|
||||
lines:['{name}, that outfit really suits you!','You always brighten my day, {name}.'] },
|
||||
{ id:'highfive', group:'Friendly', label:'High Five', req:{f:10}, df:5, dr:0, anim:'highfive', moodFx:{fun:+5},
|
||||
lines:['High five!','Up top!'] },
|
||||
{ id:'story', group:'Friendly', label:'Tell Story', req:{f:15}, df:7, dr:0, anim:'talk', moodFx:{fun:+6},
|
||||
lines:['So yesterday, a pigeon stole my sandwich…','Let me tell you about the great taco incident.'] },
|
||||
{ id:'hug', group:'Friendly', label:'Hug', req:{f:25}, df:8, dr:1, anim:'hug', moodFx:{social:+10,comfort:+6},
|
||||
lines:['Come here, you!','Group hug… well, duo hug.'] },
|
||||
{ id:'flirt', group:'Romantic', label:'Flirt', req:{r:0}, df:1, dr:4, anim:'flirt',
|
||||
lines:['Is your name Wi-Fi? Because I feel a connection.','Do you believe in love at first sight, {name}?'] },
|
||||
{ id:'romantic_compliment',group:'Romantic',label:'Romantic Compliment',req:{r:10}, df:1, dr:6, anim:'flirt', moodFx:{social:+8},
|
||||
lines:['Your smile could light up City Hall, {name}.','Every day with you feels like a festival.'] },
|
||||
{ id:'gift_small',group:'Romantic',label:'Give Flowers', req:{r:10}, cost:40, df:2, dr:8, anim:'gift', moodFx:{social:+8},
|
||||
lines:['These made me think of you!','A little something beautiful, for someone beautiful.'] },
|
||||
{ id:'holdhands',group:'Romantic', label:'Hold Hands', req:{r:25}, df:2, dr:7, anim:'holdhands', moodFx:{social:+9,comfort:+5},
|
||||
lines:['Shall we?','Just like this, {name}.'] },
|
||||
{ id:'date', group:'Romantic', label:'Ask on Date', req:{r:35}, df:3, dr:9, anim:'celebrate', moodFx:{fun:+12,social:+12},
|
||||
lines:['Dinner at the café, just us two?','It\'s a date, {name}!'] },
|
||||
{ id:'kiss', group:'Romantic', label:'Kiss', req:{r:50}, df:2, dr:10, anim:'kiss', moodFx:{social:+14,happiness:10},
|
||||
lines:['❤️','Mwah!'] },
|
||||
{ id:'dance', group:'Funny', label:'Dance Together', req:{f:10}, df:4, dr:1, anim:'dance', moodFx:{fun:+14},
|
||||
lines:['Show me your moves!','DJ, drop the beat!'] },
|
||||
{ id:'funnyface',group:'Funny', label:'Make Funny Face', req:{f:5}, df:4, dr:0, anim:'laugh', moodFx:{fun:+8},
|
||||
lines:['>:P','Boing! Look at my face!'] },
|
||||
{ id:'insult', group:'Negative', label:'Insult', req:{f:0}, df:-12,dr:-6, anim:'argue', moodFx:{happiness:-10},
|
||||
lines:['Nice going, clumsy!','Did you even try today?'] },
|
||||
{ id:'argue', group:'Negative', label:'Argue', req:{f:10}, df:-15,dr:-10,anim:'argue', moodFx:{happiness:-14},
|
||||
lines:['That\'s not what we agreed!','You always say that!'] },
|
||||
{ id:'apologize',group:'Negative', label:'Apologize', req:{f:0}, df:10, dr:2, anim:'talk', moodFx:{happiness:6},
|
||||
lines:['I\'m sorry, truly.','Can we start over, {name}?'] },
|
||||
];
|
||||
export const INTERACTION_BY_ID = Object.fromEntries(INTERACTIONS.map(i=>[i.id,i]));
|
||||
|
||||
// Friendship thresholds (spec): 0 stranger, 10 acquaintance, 25 friend, 50 close friend, 75 best friend.
|
||||
export const FRIEND_TIERS = [
|
||||
{ at:0, label:'Stranger' }, { at:10, label:'Acquaintance' }, { at:25, label:'Friend' },
|
||||
{ at:50, label:'Close Friend' }, { at:75, label:'Best Friend' },
|
||||
];
|
||||
export const ROMANCE_PARTNER_AT = 100;
|
||||
export const REL_MAX = 100;
|
||||
|
||||
// ---------------- Moods -------------------------------------
|
||||
export const MOODS = ['Happy','Excited','Relaxed','Confident','Inspired','Romantic','Sad','Angry','Bored','Embarrassed','Lonely','Tired','Stressed'];
|
||||
export const MOOD_EMOJI = { Happy:'😊', Excited:'🤩', Relaxed:'😌', Confident:'😎', Inspired:'💡', Romantic:'😍',
|
||||
Sad:'😢', Angry:'😠', Bored:'😐', Embarrassed:'😳', Lonely:'🥺', Tired:'🥱', Stressed:'😖', Neutral:'🙂' };
|
||||
|
||||
// ---------------- Weather ----------------------------------
|
||||
export const WEATHER_STATES = ['sunny','cloudy','rain','storm','fog'];
|
||||
export const WEATHER_LABEL = { sunny:'Sunny', cloudy:'Cloudy', rain:'Rain', storm:'Storm', fog:'Fog' };
|
||||
export const WEATHER_EMOJI = { sunny:'☀️', cloudy:'⛅', rain:'🌧️', storm:'⛈️', fog:'🌫️' };
|
||||
|
||||
// ---------------- Achievements ------------------------------
|
||||
export const ACHIEVEMENTS = [
|
||||
{ id:'first_home', name:'First Home', desc:'Buy your first house.' },
|
||||
{ id:'social_butterfly', name:'Social Butterfly', desc:'Make 20 friends (friendship ≥ 25).' },
|
||||
{ id:'millionaire', name:'Millionaire', desc:'Hold 1,000,000 TownCoins.' },
|
||||
{ id:'heartbreaker', name:'Heartbreaker', desc:'Reach partner status 5 times.' },
|
||||
{ id:'interior_designer', name:'Interior Designer', desc:'Place 25 furniture items.' },
|
||||
{ id:'employed', name:'Day One', desc:'Get your first job.' },
|
||||
{ id:'promoted', name:'Moving On Up', desc:'Earn any promotion.' },
|
||||
{ id:'party_animal', name:'Party Animal', desc:'Dance at 3 events.' },
|
||||
];
|
||||
|
||||
// ---------------- Emotes -----------------------------------
|
||||
export const EMOTES = ['wave','dance','laugh','sad','angry','sleep','sit'];
|
||||
|
||||
// Chat moderation: basic length cap.
|
||||
export const MAX_CHAT_LEN = 240;
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"strict": true,
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["client/src"]
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
root: 'client',
|
||||
base: './',
|
||||
build: {
|
||||
target: 'es2020',
|
||||
chunkSizeWarningLimit: 1600,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: { three: ['three'] }
|
||||
}
|
||||
}
|
||||
},
|
||||
server: {
|
||||
port: 5199,
|
||||
proxy: {
|
||||
'/ws': { target: 'ws://127.0.0.1:7788', ws: true }
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user