Skip to content

Commit 3fa680a

Browse files
author
DavidQ
committed
Correcting displayed games on index.html and added filters
1 parent 63d3e52 commit 3fa680a

8 files changed

Lines changed: 697 additions & 85 deletions

File tree

‎games/index.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
.games-filter-grid {
2+
display: grid;
3+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
4+
gap: 12px;
5+
}
6+
7+
.games-filter-field {
8+
display: flex;
9+
flex-direction: column;
10+
gap: 6px;
11+
}
12+
13+
.game-level-grid {
14+
display: grid;
15+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
16+
gap: 12px;
17+
}
18+
19+
.game-card {
20+
overflow: hidden;
21+
}
22+
23+
.game-title-row {
24+
display: flex;
25+
align-items: center;
26+
gap: 6px;
27+
}
28+
29+
.game-preview-link {
30+
display: block;
31+
border-radius: 10px;
32+
overflow: hidden;
33+
border: 1px solid var(--line, rgba(221, 214, 254, 0.26));
34+
margin-bottom: 10px;
35+
}
36+
37+
.game-thumb {
38+
display: block;
39+
width: 100%;
40+
height: auto;
41+
transform: scale(1);
42+
transform-origin: center;
43+
transition: transform 120ms ease;
44+
}
45+
46+
.game-preview-link:hover .game-thumb,
47+
.game-preview-link:focus-visible .game-thumb {
48+
transform: scale(1.05);
49+
}
50+
51+
.game-preview-missing {
52+
display: block;
53+
padding: 14px;
54+
text-align: center;
55+
color: var(--muted, #e9ddff);
56+
text-decoration: none;
57+
}
58+
59+
.game-title-link {
60+
color: var(--accent, #ddd6fe);
61+
text-decoration: none;
62+
}
63+
64+
.game-title-link:hover,
65+
.game-title-link:focus-visible {
66+
text-decoration: underline;
67+
}
68+
69+
.game-badges {
70+
display: flex;
71+
flex-wrap: wrap;
72+
gap: 8px;
73+
margin: 0 0 8px;
74+
}
75+
76+
.game-badge {
77+
display: inline-flex;
78+
align-items: center;
79+
border-radius: 999px;
80+
padding: 3px 8px;
81+
font-size: 0.72rem;
82+
font-weight: 700;
83+
}
84+
85+
.game-badge--playable {
86+
background: #2b8a3e;
87+
color: #fff;
88+
}
89+
90+
.game-badge--in-progress {
91+
background: #f08c00;
92+
color: #111;
93+
}
94+
95+
.game-badge--planned {
96+
background: #1971c2;
97+
color: #fff;
98+
}
99+
100+
.game-badge--sample-track {
101+
background: #9c36b5;
102+
color: #fff;
103+
}
104+
105+
.game-badge--debug-showcase {
106+
background: #14b8a6;
107+
color: #032320;
108+
}
109+
110+
.game-service-note {
111+
margin-top: 8px;
112+
font-size: 0.9rem;
113+
}
114+
115+
.hub-page-games .pin-label {
116+
margin-right: 6px;
117+
}

‎games/index.html‎

Lines changed: 33 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<title>Games - HTML JavaScript Gaming</title>
1313
<link rel="stylesheet" href="../src/engine/theme/main.css" />
1414
<link rel="stylesheet" href="../src/engine/ui/hubCommon.css" />
15+
<link rel="stylesheet" href="./index.css" />
1516
</head>
1617
<body class="hub-page-games">
1718
<details class="is-collapsible" open>
@@ -31,61 +32,52 @@ <h1>Games Hub</h1>
3132
</details>
3233

3334
<main class="page-shell">
34-
3535
<section class="content-section">
36-
<h2>Playable Now</h2>
37-
<div class="card-grid">
38-
<a class="card-link" href="/games/GravityWell/index.html">
39-
<h3>Gravity Well</h3>
40-
<p>Orbital route-planning gameplay with gravity assists and beacon collection objectives.</p>
41-
</a>
42-
<a class="card-link" href="/games/Asteroids/index.html">
43-
<h3>Asteroids</h3>
44-
<p>Classic arcade combat with tuned ship handling and score-chase progression.</p>
45-
</a>
46-
<a class="card-link" href="/games/SpaceInvaders/index.html">
47-
<h3>Space Invaders</h3>
48-
<p>Formation shooter gameplay with wave pacing, lives, and escalating pressure.</p>
49-
</a>
50-
</div>
36+
<h2>Pinned Games</h2>
37+
<div id="games-pinned-list" class="game-level-grid"></div>
5138
</section>
5239

5340
<section class="content-section">
54-
<h2>In Progress</h2>
55-
<div class="card-grid">
56-
<a class="card-link" href="/games/SpaceDuel/index.html">
57-
<h3>Space Duel</h3>
58-
<p>Vector-style inertial combat and wave-based scenario tuning.</p>
59-
</a>
60-
<a class="card-link" href="/games/Pong/index.html">
61-
<h3>Pong</h3>
62-
<p>Multi-mode paddle gameplay and input polish across keyboard and gamepad flows.</p>
63-
</a>
41+
<h2>Filter Games</h2>
42+
<p>Filter by level, class, tag, or free-text search.</p>
43+
<div class="games-filter-grid">
44+
<div class="games-filter-field">
45+
<label for="games-filter-level">Level</label>
46+
<select id="games-filter-level">
47+
<option value="">All levels</option>
48+
</select>
49+
</div>
50+
<div class="games-filter-field">
51+
<label for="games-filter-class">Class</label>
52+
<select id="games-filter-class">
53+
<option value="">All classes</option>
54+
</select>
55+
</div>
56+
<div class="games-filter-field">
57+
<label for="games-filter-tag">Tag</label>
58+
<select id="games-filter-tag">
59+
<option value="">All tags</option>
60+
</select>
61+
</div>
62+
<div class="games-filter-field">
63+
<label for="games-filter-search">Search</label>
64+
<input id="games-filter-search" type="text" placeholder="arcade, physics, planned..." autocomplete="off" />
65+
</div>
6466
</div>
67+
<p id="games-filter-status" aria-live="polite"></p>
6568
</section>
6669

6770
<section class="content-section">
68-
<h2>Roadmap Anchors</h2>
69-
<div class="card-grid">
70-
<a class="card-link" href="/games/Breakout/index.html">
71-
<h3>Breakout</h3>
72-
<p>Debug-showcase-aligned brick-breaker loop with onboarding-ready flow.</p>
73-
</a>
74-
<a class="card-link" href="/games/Pacman/index.html">
75-
<h3>Pacman</h3>
76-
<p>Personality-driven ghost behaviors and deterministic routing lane.</p>
77-
</a>
78-
<a class="card-link" href="/games/AITargetDummy/index.html">
79-
<h3>AI Target Dummy</h3>
80-
<p>Behavior-state validation lane for idle, chase, attack, and recover cycles.</p>
81-
</a>
82-
</div>
71+
<h2>Games By Level</h2>
72+
<p>Data-driven catalog of playable, in-progress, and planned games with roadmap grouping.</p>
73+
<div id="games-index-list"></div>
8374
</section>
8475

8576
<div class="footer-note">
8677
Open game pages through a local web server for stable module and asset loading.
8778
</div>
8879
</main>
8980
<script type="module" src="../src/engine/theme/mount-shared-header.js"></script>
81+
<script type="module" src="./index.render.js"></script>
9082
</body>
9183
</html>

0 commit comments

Comments
 (0)