Rising/index.html at main · Gallind/Rising · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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">
    <title>RISING</title>
    <style>
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overscroll-behavior: none;
}
#gameCanvas {
  display: block;
  position: relative;
  z-index: 1;
  width: min(100vw, calc(100vh * 2 / 3));
  height: min(100vh, calc(100vw * 3 / 2));
  image-rendering: pixelated;
  touch-action: none;
}
#overlay {
  position: absolute;
  z-index: 2;
  width: min(100vw, calc(100vh * 2 / 3));
  height: min(100vh, calc(100vw * 3 / 2));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
  max-width: 100vw; /* belt-and-suspenders: width formula already caps at 100vw */
  box-sizing: border-box;
  overflow-y: auto;
  padding: 16px 12px;
}
#overlay.active { pointer-events: all; }
#overlay h1 { color: white; text-shadow: 2px 2px 4px black; margin: 0; font-size: clamp(1.4rem, 5vw, 2rem); }
#overlay h2 { color: white; text-shadow: 1px 1px 3px black; margin: 0; font-size: clamp(0.9rem, 3vw, 1.3rem); }
#overlay button {
  padding: 10px 24px;
  font-size: clamp(0.9rem, 3vw, 1rem);
  min-height: 44px; /* satisfies 44px tap-target without changing visual padding */
  min-width: 44px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: #2196F3;
  color: white;
  font-weight: bold;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
  touch-action: manipulation;
}
#overlay button:hover { background: #1976D2; }
#fireSphereCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: none;
  pointer-events: none;
}
#leaderboard {
  background: rgba(0,0,0,0.6);
  border-radius: 8px;
  padding: 10px 20px;
  color: white;
  font-family: monospace;
  font-size: 0.9rem;
  min-width: 160px;
  text-align: center;
}
#leaderboard h3 { margin: 0 0 6px; color: gold; }
#leaderboard ol { margin: 0; padding-left: 20px; }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <div id="overlay"></div>
    <!-- Character select overlay -->
    <div id="character-select" style="display:none; position:absolute; top:0; left:0; width:100%; height:100%;
      background:rgba(0,0,0,0.9); flex-direction:column; align-items:center; justify-content:center;
      z-index:20; color:#fff; font-family:monospace; text-align:center; padding:20px; box-sizing:border-box;">
      <h2 style="margin:0 0 4px; font-size:1.4em; color:#ef4444;">⚠️ TZEVA ADOM</h2>
      <p style="margin:0 0 16px; color:#94a3b8; font-size:0.9em;">Choose your runner</p>
      <div id="char-grid" style="display:grid; grid-template-columns:repeat(3,1fr);
        gap:10px; max-width:400px; width:100%; margin-bottom:16px;"></div>
      <div id="char-detail" style="background:#1e293b; border-radius:8px; padding:12px 16px;
        max-width:380px; width:100%; margin-bottom:16px; min-height:60px;"></div>
      <button id="char-play-btn" style="padding:10px 32px; font-size:1em; font-family:monospace;
        background:#22c55e; color:#000; border:none; border-radius:6px; cursor:pointer; font-weight:bold;">
        ▶ Play
      </button>
    </div>
    <!-- Stage complete overlay — hidden by default; showStageClear() switches to display:flex -->
    <div id="stage-complete" style="display:none; position:absolute; top:0; left:0; width:100%; height:100%;
      background:rgba(0,0,0,0.85); flex-direction:column; align-items:center;
      justify-content:center; z-index:20; color:#fff; font-family:monospace; text-align:center;">
      <div id="stage-clear-title" style="font-size:2em; font-weight:bold; color:#FFD700; margin-bottom:12px;"></div>
      <div id="stage-clear-score" style="font-size:1.2em; margin-bottom:8px;"></div>
      <div id="stage-clear-unlock" style="font-size:1em; color:#22c55e; margin-bottom:24px; min-height:1.5em;"></div>
      <button id="stage-clear-btn" style="padding:10px 28px; font-size:1em; font-family:monospace;
        background:#22c55e; color:#000; border:none; border-radius:6px; cursor:pointer; font-weight:bold;">
        ▶ Next Stage
      </button>
      <button id="stage-menu-btn" style="margin-top:10px; padding:8px 20px; font-size:0.9em;
        font-family:monospace; background:transparent; color:#aaa; border:1px solid #555;
        border-radius:6px; cursor:pointer;">
        ↩ Main Menu
      </button>
    </div>
    <script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/[email protected]/build/three.module.js",
    "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
  }
}
</script>
    <script type="module" src="js/main.js"></script>
</body>
</html>