Merge goalie-tester worktree: modes, 3v3 goalies, OOB faceoffs, CF deploy.
Bring main menu (1v1/3v3), scrimmage with nets and goalies, dead-puck whistles at the nearest faceoff circle, skater board re-entry, and Cloudflare Workers/Pages deploy config. Keep main jersey gear stack and compact goalie floaters.
This commit is contained in:
+64
-1
@@ -21,13 +21,76 @@
|
||||
#hud { position:absolute; left:14px; top:12px; color:#8fb4d4; font-size:12px;
|
||||
line-height:1.5; white-space:pre; pointer-events:none; text-shadow:0 1px 2px #000; }
|
||||
#boot { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
|
||||
color:#6ea8dc; letter-spacing:5px; font-size:13px; background:#0a0e14; z-index:10; }
|
||||
color:#6ea8dc; letter-spacing:5px; font-size:13px; background:#0a0e14; z-index:20; }
|
||||
#menu {
|
||||
position:absolute; inset:0; z-index:15;
|
||||
display:flex; flex-direction:column; align-items:center; justify-content:center;
|
||||
background:radial-gradient(ellipse at 50% 35%, #121a26 0%, #0a0e14 70%);
|
||||
color:#c8dcea; pointer-events:auto;
|
||||
}
|
||||
#menu[hidden] { display:none; }
|
||||
#menu .brand {
|
||||
letter-spacing:0.55em; font-size:13px; color:#6ea8dc; margin:0 0 10px;
|
||||
text-indent:0.55em;
|
||||
}
|
||||
#menu h1 {
|
||||
margin:0 0 8px; font-size:42px; font-weight:600; letter-spacing:0.08em;
|
||||
color:#e8f2fa; text-shadow:0 2px 24px rgba(80,140,200,0.35);
|
||||
}
|
||||
#menu .tag {
|
||||
margin:0 0 36px; font-size:12px; color:#6a849c; letter-spacing:0.12em;
|
||||
}
|
||||
#menu .choices {
|
||||
display:flex; flex-direction:column; gap:12px; width:min(360px, 86vw);
|
||||
}
|
||||
#menu button.choice {
|
||||
appearance:none; border:1px solid #2a4058; background:#121c28;
|
||||
color:#d4e6f5; font:inherit; font-size:15px; letter-spacing:0.06em;
|
||||
padding:16px 20px; text-align:left; cursor:pointer;
|
||||
border-radius:4px; transition:border-color .12s, background .12s, transform .08s;
|
||||
}
|
||||
#menu button.choice:hover, #menu button.choice:focus-visible {
|
||||
outline:none; border-color:#5a9fd4; background:#172433;
|
||||
}
|
||||
#menu button.choice:active { transform:scale(0.99); }
|
||||
#menu button.choice .label {
|
||||
display:block; font-size:16px; color:#eef6fc; margin-bottom:4px;
|
||||
}
|
||||
#menu button.choice .hint {
|
||||
display:block; font-size:11px; color:#6a849c; letter-spacing:0.04em;
|
||||
}
|
||||
#menu button.choice .key {
|
||||
float:right; margin-top:2px; color:#5a9fd4; font-size:12px;
|
||||
border:1px solid #2a5070; border-radius:3px; padding:2px 7px;
|
||||
}
|
||||
#menu .foot {
|
||||
margin-top:28px; font-size:11px; color:#4a6074; letter-spacing:0.08em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="stage"></canvas>
|
||||
<div id="hud"></div>
|
||||
<div id="menu" hidden>
|
||||
<div class="brand">TILT</div>
|
||||
<h1>HOCKEY</h1>
|
||||
<p class="tag">pick a mode</p>
|
||||
<div class="choices">
|
||||
<button type="button" class="choice" data-mode="1v1" id="mode-1v1">
|
||||
<span class="key">1</span>
|
||||
<span class="label">1-on-1</span>
|
||||
<span class="hint">Shootout — one shooter, one goalie, alternating ends</span>
|
||||
</button>
|
||||
<button type="button" class="choice" data-mode="3v3" id="mode-3v3">
|
||||
<span class="key">2</span>
|
||||
<span class="label">3-on-3</span>
|
||||
<span class="hint">Full ice — nets, goalies, hits, pass, shoot for a score</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="foot">Esc returns here · pad or keyboard once you’re in</p>
|
||||
</div>
|
||||
<div id="boot">TILT…</div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user