Arcane Tycoon — Heroes & Magic theme park tycoon game
Complete browser game inspired by OpenRCT2 with fantasy twist: - Custom roller coaster designer with physics-based ratings + on-ride POV - 10 animated rides, 7 shops, 16 scenery items, path network & guest AI - Heroes guild vs monster invasions (5 classes, XP/gear/bosses) - Magic spell system (8 spells), research tree, economy/marketing/loans - Day-night cycle, weather, park rating, awards, 4 scenarios - Save/load slots + autosave, procedural WebAudio SFX/music - Isometric canvas renderer, minimap, diagnostics overlay - Test suites: smoke(13), linkcheck, inputcheck, framecheck, rendercheck, flow
This commit is contained in:
+287
@@ -0,0 +1,287 @@
|
||||
/* ============ Arcane Tycoon — theme ============ */
|
||||
:root {
|
||||
--bg0: #0b0e1a;
|
||||
--bg1: #131829;
|
||||
--bg2: #1b2238;
|
||||
--panel: rgba(16, 20, 36, .94);
|
||||
--panel-brd: #3a4668;
|
||||
--gold: #f5c542;
|
||||
--gold-dim: #b9962e;
|
||||
--ink: #e8ecf7;
|
||||
--ink-dim: #9aa4c0;
|
||||
--good: #57d97a;
|
||||
--bad: #ff6b6b;
|
||||
--warn: #ffb347;
|
||||
--mana: #a86bff;
|
||||
--accent: #58c1ff;
|
||||
font-size: 15px;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body { width: 100%; height: 100%; overflow: hidden; }
|
||||
body {
|
||||
background: var(--bg0);
|
||||
color: var(--ink);
|
||||
font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
|
||||
user-select: none;
|
||||
}
|
||||
#app { position: fixed; inset: 0; }
|
||||
#game { position: absolute; inset: 0; display: block; cursor: default; }
|
||||
.hidden { display: none !important; }
|
||||
.spacer { flex: 1; }
|
||||
|
||||
/* ============ Top HUD ============ */
|
||||
#topbar {
|
||||
position: absolute; top: 8px; left: 8px; right: 8px;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
pointer-events: auto; z-index: 30;
|
||||
}
|
||||
.hud-group {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--panel-brd);
|
||||
border-radius: 10px;
|
||||
padding: 6px 12px;
|
||||
font-size: .95rem;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,.45);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hud-group.brand { color: var(--gold); font-weight: bold; letter-spacing: .06em; text-shadow: 0 0 12px rgba(245,197,66,.35); }
|
||||
.hud-group.stat span b { color: var(--gold); }
|
||||
.mana-bar { width: 90px; height: 10px; background: #241a3d; border-radius: 6px; overflow: hidden; border: 1px solid #4a3a75; }
|
||||
#mana-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #7b3ff2, #c39bff); transition: width .25s; }
|
||||
#mana-num { font-size: .78rem; color: #cbb2ff; min-width: 52px; }
|
||||
.clock { font-variant-numeric: tabular-nums; }
|
||||
|
||||
.hbtn {
|
||||
background: var(--panel); border: 1px solid var(--panel-brd); color: var(--ink);
|
||||
border-radius: 10px; padding: 6px 11px; font-size: 1rem; cursor: pointer;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,.45);
|
||||
}
|
||||
.hbtn:hover { border-color: var(--gold); background: #1c2440; }
|
||||
.hbtn.active { border-color: var(--gold); color: var(--gold); }
|
||||
#speed-group { display: flex; gap: 4px; }
|
||||
|
||||
/* ============ Minimap ============ */
|
||||
#minimap-wrap {
|
||||
position: absolute; right: 10px; top: 54px; z-index: 25;
|
||||
border: 1px solid var(--panel-brd); border-radius: 10px; overflow: hidden;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,.5); line-height: 0; background:#000;
|
||||
}
|
||||
#minimap { cursor: crosshair; }
|
||||
|
||||
/* ============ Toolbar ============ */
|
||||
#toolbar {
|
||||
position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px;
|
||||
display: flex; gap: 5px; padding: 6px; z-index: 30;
|
||||
background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 14px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,.55);
|
||||
}
|
||||
.tbtn {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 2px;
|
||||
min-width: 62px; padding: 6px 4px;
|
||||
background: transparent; border: 1px solid transparent; border-radius: 10px;
|
||||
color: var(--ink); font-size: 1.25rem; cursor: pointer;
|
||||
}
|
||||
.tbtn span { font-size: .68rem; color: var(--ink-dim); letter-spacing: .02em; }
|
||||
.tbtn:hover { background: #202a4a; }
|
||||
.tbtn.active { border-color: var(--gold); background: #232d52; }
|
||||
.tbtn.active span { color: var(--gold); }
|
||||
|
||||
/* ============ Palette ============ */
|
||||
#palette {
|
||||
position: absolute; left: 8px; bottom: 76px; width: 308px; max-height: 62vh;
|
||||
background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 12px;
|
||||
z-index: 32; display: flex; flex-direction: column;
|
||||
box-shadow: 0 6px 22px rgba(0,0,0,.55);
|
||||
}
|
||||
.pal-head {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 9px 12px; border-bottom: 1px solid var(--panel-brd);
|
||||
color: var(--gold); font-weight: bold; letter-spacing: .04em;
|
||||
}
|
||||
.pal-head button { background:none;border:none;color:var(--ink-dim);cursor:pointer;font-size:1rem; }
|
||||
.pal-head button:hover{color:var(--bad);}
|
||||
#pal-body { overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 7px; }
|
||||
.pal-item {
|
||||
background: var(--bg2); border: 1px solid var(--panel-brd); border-radius: 10px;
|
||||
padding: 8px 6px; text-align: center; cursor: pointer; position: relative;
|
||||
display:flex;flex-direction:column;align-items:center;gap:3px;
|
||||
}
|
||||
.pal-item:hover { border-color: var(--gold); background: #232c50; }
|
||||
.pal-item.selected { outline: 2px solid var(--gold); }
|
||||
.pal-item.locked { opacity: .45; filter: grayscale(.8); cursor: not-allowed; }
|
||||
.pal-item .ic { font-size: 1.5rem; line-height: 1; }
|
||||
.pal-item .nm { font-size: .72rem; color: var(--ink); line-height:1.15; }
|
||||
.pal-item .pr { font-size: .7rem; color: var(--gold); }
|
||||
.pal-item.unaffordable .pr { color: var(--bad); }
|
||||
|
||||
/* ============ Context panel ============ */
|
||||
#context-panel {
|
||||
position: absolute; right: 10px; top: 250px; width: 264px;
|
||||
background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 12px;
|
||||
z-index: 28; padding: 12px; box-shadow: 0 6px 22px rgba(0,0,0,.55);
|
||||
max-height: 46vh; overflow-y: auto;
|
||||
}
|
||||
.ctx-title { color: var(--gold); font-weight: bold; margin-bottom: 6px; display:flex;justify-content:space-between;align-items:center; }
|
||||
.ctx-title button{background:none;border:none;color:var(--ink-dim);cursor:pointer;}
|
||||
.ctx-row { display: flex; justify-content: space-between; font-size: .84rem; padding: 2.5px 0; color: var(--ink-dim); }
|
||||
.ctx-row b { color: var(--ink); font-weight: normal; }
|
||||
.bar { height: 8px; background: #26203c; border-radius: 5px; overflow: hidden; margin: 3px 0 7px; border:1px solid #3a3157;}
|
||||
.bar > div { height: 100%; border-radius: 5px; }
|
||||
.btnrow { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
|
||||
|
||||
/* ============ Buttons ============ */
|
||||
.btn {
|
||||
background: linear-gradient(180deg, #2a3559, #1d2542);
|
||||
color: var(--ink); border: 1px solid var(--panel-brd);
|
||||
border-radius: 9px; padding: 7px 13px; cursor: pointer; font-size: .88rem;
|
||||
}
|
||||
.btn:hover { border-color: var(--gold); color: var(--gold); }
|
||||
.btn.primary { background: linear-gradient(180deg, #8a6b1d, #6b520f); border-color: var(--gold); color: #fff; }
|
||||
.btn.primary:hover { filter: brightness(1.15); color:#fff; }
|
||||
.btn.danger { border-color: #a04444; color: #ff9c9c; }
|
||||
.btn:disabled { opacity: .4; cursor: not-allowed; }
|
||||
|
||||
/* ============ Tool hint ============ */
|
||||
#tool-hint {
|
||||
position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
|
||||
background: rgba(20,16,40,.92); border: 1px solid var(--mana);
|
||||
color: #d9ccff; border-radius: 999px; padding: 6px 18px; font-size: .85rem; z-index: 31;
|
||||
box-shadow: 0 0 18px rgba(140,90,255,.25);
|
||||
}
|
||||
|
||||
/* ============ Toasts ============ */
|
||||
#toasts {
|
||||
position: absolute; right: 10px; bottom: 76px; width: 300px;
|
||||
display: flex; flex-direction: column-reverse; gap: 7px; z-index: 40; pointer-events: none;
|
||||
}
|
||||
.toast {
|
||||
background: var(--panel); border: 1px solid var(--panel-brd); border-left: 4px solid var(--accent);
|
||||
border-radius: 10px; padding: 8px 12px; font-size: .83rem;
|
||||
animation: toast-in .25s ease-out; box-shadow: 0 4px 14px rgba(0,0,0,.5);
|
||||
}
|
||||
.toast.gold { border-left-color: var(--gold); }
|
||||
.toast.bad { border-left-color: var(--bad); }
|
||||
.toast.good { border-left-color: var(--good); }
|
||||
.toast.magic { border-left-color: var(--mana); }
|
||||
.toast .t-title { color: var(--gold); font-weight: bold; font-size: .8rem; }
|
||||
@keyframes toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
|
||||
.toast.fade { opacity: 0; transition: opacity .6s; }
|
||||
|
||||
/* ============ Modal ============ */
|
||||
#modal-root {
|
||||
position: fixed; inset: 0; background: rgba(5,7,14,.66); z-index: 100;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.modal {
|
||||
background: linear-gradient(180deg, #171d33, #10142a);
|
||||
border: 1px solid var(--panel-brd); border-radius: 16px;
|
||||
width: min(720px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
|
||||
box-shadow: 0 20px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05);
|
||||
}
|
||||
.modal.wide { width: min(980px, 96vw); }
|
||||
.modal-head {
|
||||
padding: 14px 18px; border-bottom: 1px solid var(--panel-brd);
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
color: var(--gold); font-weight: bold; font-size: 1.1rem; letter-spacing: .05em;
|
||||
}
|
||||
.modal-head button { background: none; border: none; color: var(--ink-dim); font-size: 1.2rem; cursor: pointer; }
|
||||
.modal-head button:hover { color: var(--bad); }
|
||||
.modal-body { padding: 16px 18px; overflow-y: auto; }
|
||||
.modal-foot { padding: 12px 18px; border-top: 1px solid var(--panel-brd); display: flex; justify-content: flex-end; gap: 8px; }
|
||||
|
||||
/* Scenario cards */
|
||||
.scen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.scen-card {
|
||||
border: 1px solid var(--panel-brd); border-radius: 12px; padding: 14px;
|
||||
background: var(--bg2); cursor: pointer; transition: transform .12s, border-color .12s;
|
||||
}
|
||||
.scen-card:hover { border-color: var(--gold); transform: translateY(-2px); }
|
||||
.scen-card h3 { color: var(--gold); margin-bottom: 4px; font-size: 1.02rem; }
|
||||
.scen-card p { font-size: .82rem; color: var(--ink-dim); margin-bottom: 8px; }
|
||||
.scen-card .diff { font-size: .74rem; color: var(--warn); letter-spacing: .1em; }
|
||||
.scen-goals { list-style: none; margin-top: 6px; }
|
||||
.scen-goals li { font-size: .78rem; color: var(--ink-dim); padding: 1px 0; }
|
||||
|
||||
/* Research */
|
||||
.res-track { margin-bottom: 14px; border: 1px solid var(--panel-brd); border-radius: 12px; padding: 10px 12px; background: var(--bg2); }
|
||||
.res-track h4 { color: var(--accent); margin-bottom: 6px; display:flex; justify-content:space-between; }
|
||||
.res-items { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.res-item { border: 1px solid var(--panel-brd); border-radius: 9px; padding: 6px 10px; font-size: .8rem; background: var(--bg1); }
|
||||
.res-item.done { border-color: var(--good); color: var(--good); }
|
||||
.res-item.avail { cursor: pointer; border-color: var(--warn); }
|
||||
.res-item.avail:hover { background: #33301c; }
|
||||
.res-item.avail.cant { opacity:.5; cursor:not-allowed; }
|
||||
|
||||
/* Finances table */
|
||||
table.fin { width: 100%; border-collapse: collapse; font-size: .85rem; }
|
||||
table.fin th, table.fin td { padding: 5px 8px; text-align: right; border-bottom: 1px solid #232a44; }
|
||||
table.fin th:first-child, table.fin td:first-child { text-align: left; }
|
||||
table.fin th { color: var(--ink-dim); font-weight: normal; }
|
||||
.pos { color: var(--good); } .neg { color: var(--bad); }
|
||||
|
||||
/* Hero guild */
|
||||
.hero-card { border: 1px solid var(--panel-brd); border-radius: 12px; padding: 10px; background: var(--bg2); display:flex; gap:10px; align-items:center; }
|
||||
.hero-card .portrait { font-size: 2rem; filter: drop-shadow(0 0 8px rgba(120,160,255,.35)); }
|
||||
.hero-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
|
||||
.hp-bar { height: 7px; background:#33202c; border-radius:5px; overflow:hidden; }
|
||||
.hp-bar>div{height:100%;background:linear-gradient(90deg,#e5484d,#ff8a5c);}
|
||||
.xp-bar { height: 5px; background:#20303c; border-radius:5px; overflow:hidden; margin-top:3px;}
|
||||
.xp-bar>div{height:100%;background:var(--accent);}
|
||||
|
||||
/* Help / tutorial */
|
||||
.help-cols { columns: 2; column-gap: 26px; font-size: .86rem; color: var(--ink-dim); }
|
||||
.help-cols h4 { color: var(--gold); margin: 8px 0 4px; break-inside: avoid-column; }
|
||||
.help-cols p, .help-cols li { margin-bottom: 4px; break-inside: avoid-column; }
|
||||
kbd { background:#242c4c; border:1px solid #3c486e; border-radius:5px; padding:0 6px; font-family:inherit; font-size:.78rem; color:#cdd6f4;}
|
||||
|
||||
/* Settings rows */
|
||||
.set-row { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid #222a46; font-size:.9rem; }
|
||||
input[type=range]{ accent-color: var(--gold); width:170px;}
|
||||
input[type=text], input[type=number], select{
|
||||
background:#0e1326; color:var(--ink); border:1px solid var(--panel-brd); border-radius:7px; padding:5px 9px; font-family:inherit;
|
||||
}
|
||||
|
||||
/* ============ Main menu ============ */
|
||||
#main-menu {
|
||||
position: fixed; inset: 0; z-index: 80;
|
||||
background:
|
||||
radial-gradient(1100px 500px at 50% -80px, rgba(168,107,255,.28), transparent 60%),
|
||||
radial-gradient(900px 480px at 85% 108%, rgba(88,193,255,.16), transparent 55%),
|
||||
radial-gradient(800px 420px at 12% 105%, rgba(245,197,66,.13), transparent 55%),
|
||||
linear-gradient(180deg, #0a0d1c 0%, #12172c 55%, #1a1430 100%);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.mm-inner { text-align: center; animation: mm-in .7s ease-out; }
|
||||
@keyframes mm-in { from { opacity: 0; transform: translateY(16px) scale(.98);} to {opacity:1;transform:none;} }
|
||||
.mm-title {
|
||||
font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: .18em; color: var(--gold);
|
||||
text-shadow: 0 0 30px rgba(245,197,66,.45), 0 4px 0 #6b520f; font-weight: 900;
|
||||
}
|
||||
.mm-sub { color: #cbb2ff; letter-spacing: .42em; margin: 10px 0 38px; font-size: .95rem; text-transform: uppercase; }
|
||||
.mm-buttons { display: flex; flex-direction: column; gap: 13px; width: 290px; margin: 0 auto; }
|
||||
.big-btn {
|
||||
padding: 14px; font-size: 1.08rem; border-radius: 13px; cursor: pointer;
|
||||
background: linear-gradient(180deg, #8a6b1d, #5d480d); color: #fff;
|
||||
border: 1px solid var(--gold); letter-spacing: .06em;
|
||||
box-shadow: 0 6px 22px rgba(245,197,66,.22);
|
||||
}
|
||||
.big-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }
|
||||
.big-btn.ghost { background: rgba(255,255,255,.05); border-color: var(--panel-brd); color: var(--ink); box-shadow:none; }
|
||||
.mm-credit { margin-top: 44px; color: #5d6787; font-size: .76rem; letter-spacing: .08em; }
|
||||
|
||||
/* POV overlay (on-ride camera) */
|
||||
#pov-overlay { position: fixed; inset: 0; z-index: 70; background: #000; }
|
||||
#pov-canvas { width: 100%; height: 100%; display:block; }
|
||||
#pov-hud {
|
||||
position:absolute; top:14px; left:50%; transform:translateX(-50%);
|
||||
background:rgba(10,10,25,.7); border:1px solid var(--panel-brd); border-radius:999px;
|
||||
padding:8px 22px; display:flex; gap:22px; font-size:.9rem; align-items:center;
|
||||
}
|
||||
#pov-exit { position:absolute; top:14px; right:14px; }
|
||||
|
||||
/* scrollbars */
|
||||
::-webkit-scrollbar{width:9px;height:9px}
|
||||
::-webkit-scrollbar-thumb{background:#2c3658;border-radius:6px}
|
||||
::-webkit-scrollbar-track{background:transparent}
|
||||
Reference in New Issue
Block a user