The Sims Online 2D — full game: CAS, build mode, needs, AI Mode (whim-driven autonomy), careers+chance cards, neighborhood AI sims, death/ghosts, meal tiers+sickness, paintings/novels, house parties, memories, weather; 38 headless tests green
This commit is contained in:
+156
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The Sims Online 2D</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<canvas id="game"></canvas>
|
||||
|
||||
<!-- ===== TOP HUD ===== -->
|
||||
<div id="topbar" class="hidden">
|
||||
<div id="fundsBox" class="hud-chip">§<span id="fundsVal">0</span></div>
|
||||
<div id="clockBox" class="hud-chip">
|
||||
<span id="clockTime">12:00 AM</span> · <span id="clockDay">Mon, Day 1</span>
|
||||
<span id="weatherIcon" title="Weather">☀️</span>
|
||||
</div>
|
||||
<div id="speedBox" class="hud-chip">
|
||||
<button class="speed-btn" data-speed="0" title="Pause">⏸</button>
|
||||
<button class="speed-btn active" data-speed="1" title="Normal">▶</button>
|
||||
<button class="speed-btn" data-speed="2" title="Fast">▶▶</button>
|
||||
<button class="speed-btn" data-speed="3" title="Ultra">▶▶▶</button>
|
||||
</div>
|
||||
<div id="optionsBox" class="hud-chip">
|
||||
<button id="btnMute" class="opt-btn active" title="Toggle sound">🔊</button>
|
||||
<button id="btnFreeWill" class="opt-btn active" title="AI Mode — sims act on their own needs & personal goals (F)">🤖 AI Mode</button>
|
||||
<button id="btnHood" class="opt-btn" title="Neighborhood (N)">🏘️ Neighborhood</button>
|
||||
<button id="btnSave" class="opt-btn" title="Save Game">💾</button>
|
||||
<button id="btnHelp" class="opt-btn" title="Help">❓</button>
|
||||
<button id="btnQuit" class="opt-btn" title="Quit to Neighborhood">🚪</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== NOTIFICATIONS ===== -->
|
||||
<div id="toasts"></div>
|
||||
|
||||
<!-- ===== BOTTOM BAR ===== -->
|
||||
<div id="bottombar" class="hidden">
|
||||
<div id="portraitRow"></div>
|
||||
<div id="modeBtns">
|
||||
<button id="modeLive" class="mode-btn active" title="Live Mode"><span>🏠</span><label>Live</label></button>
|
||||
<button id="modeBuy" class="mode-btn" title="Buy Mode"><span>🛒</span><label>Buy</label></button>
|
||||
<button id="modeBuild" class="mode-btn" title="Build Mode"><span>🔨</span><label>Build</label></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== SIM INFO PANEL (right) ===== -->
|
||||
<div id="simPanel" class="hidden">
|
||||
<button id="simPanelClose">✕</button>
|
||||
<div id="simPanelHead">
|
||||
<canvas id="simPortrait" width="72" height="72"></canvas>
|
||||
<div>
|
||||
<div id="simPanelName">—</div>
|
||||
<div id="simPanelMood"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="simPanelTabs">
|
||||
<button data-tab="needs" class="active">Needs</button>
|
||||
<button data-tab="wants">✨</button>
|
||||
<button data-tab="skills">Skills</button>
|
||||
<button data-tab="rels">Rel.</button>
|
||||
<button data-tab="career">Career</button>
|
||||
<button data-tab="bio">Bio</button>
|
||||
</div>
|
||||
<div id="simPanelBody"></div>
|
||||
</div>
|
||||
|
||||
<!-- ===== BUY CATALOG DRAWER ===== -->
|
||||
<div id="buyDrawer" class="hidden">
|
||||
<div id="buyTabs"></div>
|
||||
<div id="buyGrid"></div>
|
||||
<div id="buyHint">Click item, then click a tile to place · <b>R</b> rotate · <b>Esc</b> cancel · Right-click placed item to sell</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== BUILD TOOLBAR ===== -->
|
||||
<div id="buildBar" class="hidden">
|
||||
<button data-tool="wall" title="Drag to build walls ($70/segment)">🧱 Wall</button>
|
||||
<button data-tool="door" title="Place door in wall ($250)">🚪 Door</button>
|
||||
<button data-tool="window" title="Place window in wall ($180)">🪟 Window</button>
|
||||
<button data-tool="floor" title="Paint floor tiles">🎨 Floor</button>
|
||||
<button data-tool="delWall" title="Delete walls/doors/windows">✂️ Remove</button>
|
||||
<span id="floorSwatches"></span>
|
||||
<span id="wallSwatches"></span>
|
||||
<div id="buildHint">Wall: drag along edges · Door/Window: click a wall segment</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== PIE / CONTEXT MENU ===== -->
|
||||
<div id="pieMenu" class="hidden"></div>
|
||||
|
||||
<!-- ===== CREATE-A-SIM SCREEN ===== -->
|
||||
<div id="casScreen" class="hidden">
|
||||
<h1 class="cas-title">Create A Sim</h1>
|
||||
<div id="casMain">
|
||||
<div id="casLeft">
|
||||
<canvas id="casPreview" width="300" height="420"></canvas>
|
||||
<button id="casRandomize" class="cas-btn">🎲 Randomize</button>
|
||||
</div>
|
||||
<div id="casRight"></div>
|
||||
</div>
|
||||
<div id="casFamilyRow"></div>
|
||||
<div id="casActions">
|
||||
<button id="casAdd" class="cas-btn">➕ Add Sim</button>
|
||||
<button id="casMoveIn" class="cas-btn primary">🏡 Move In →</button>
|
||||
<button id="casBack" class="cas-btn">← Back</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== TITLE SCREEN ===== -->
|
||||
<div id="titleScreen">
|
||||
<div id="titleInner">
|
||||
<h1>THE SIMS<span class="tm">™</span></h1>
|
||||
<h2>ONLINE — 2D EDITION</h2>
|
||||
<p class="tagline">Build a home. Chase careers. Keep your sims alive.</p>
|
||||
<div id="titleBtns">
|
||||
<button id="btnNewGame" class="title-btn">👨👩👧 New Family</button>
|
||||
<button id="btnContinue" class="title-btn">📂 Continue</button>
|
||||
</div>
|
||||
<p class="credits">Fan-made tribute · runs fully in your browser · autosaves daily</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== HELP OVERLAY ===== -->
|
||||
<div id="helpOverlay" class="hidden">
|
||||
<div id="helpCard">
|
||||
<h2>How To Play</h2>
|
||||
<ul>
|
||||
<li><b>Live mode:</b> click the ground to send your sim walking; click objects for their menu; click other sims to socialize.</li>
|
||||
<li><b>Needs</b> decay all day — Hunger, Energy, Bladder, Hygiene, Fun, Social, Comfort, Room. Red bars = act now!</li>
|
||||
<li><b>Buy mode</b>: spend simoleons on furniture. Sell items back at 70%.</li>
|
||||
<li><b>Build mode</b>: walls auto-connect; add doors & windows; paint floors.</li>
|
||||
<li><b>Careers</b>: use the computer or newspaper → Find Job. The carpool arrives 1 hour before work.</li>
|
||||
<li><b>Skills</b> from bookshelves, mirrors, easels, treadmills & more unlock promotions.</li>
|
||||
<li><b>✨ Whims</b>: fulfil your sim's short-term wants (panel tab) for aspiration points.</li>
|
||||
<li><b>Bills</b> arrive every 3 days — pay from the envelope toast before the collector visits!</li>
|
||||
<li><b>Sound</b>: toggle with the 🔊 button. Everything is synthesized live — no downloads.</li>
|
||||
<li>Keys: <b>Space</b> pause · <b>1/2/3</b> speed · <b>P</b> cycles modes · <b>F</b> free will · <b>WASD/arrows</b> pan camera.</li>
|
||||
</ul>
|
||||
<button id="helpClose" class="cas-btn primary">Got it!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/core.js"></script>
|
||||
<script src="js/audio.js"></script>
|
||||
<script src="js/data.js"></script>
|
||||
<script src="js/world.js"></script>
|
||||
<script src="js/sims.js"></script>
|
||||
<script src="js/ai.js"></script>
|
||||
<script src="js/render.js"></script>
|
||||
<script src="js/ui.js"></script>
|
||||
<script src="js/hood.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user