Skip to content

Commit 0bd147e

Browse files
ToolboxAidToolboxAid
committed
Add active Account Achievements Build Play Share wireframe - PR_26155_001-account-achievements-wireframe
1 parent 9bc567b commit 0bd147e

15 files changed

Lines changed: 476 additions & 13 deletions

‎account/achievements.html‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Achievements - Game Foundry Studio</title>
8+
<meta name="description" content="Review Build, Play and Share achievements for Game Foundry Studio accounts.">
9+
<link rel="icon" href="/favicon.svg">
10+
<link rel="stylesheet" href="../assets/theme-v2/css/theme.css">
11+
</head>
12+
13+
<body>
14+
<div data-partial="header-nav"></div>
15+
<main>
16+
<section class="page-title">
17+
<div class="container">
18+
<div class="kicker">Account</div>
19+
<h1>Achievements</h1>
20+
<p class="lede">A wireframe account view for creator activity, play history and sharing milestones.</p>
21+
</div>
22+
</section>
23+
<section class="section">
24+
<div class="container account-panel">
25+
<aside class="side-menu" aria-label="Account pages">
26+
<a href="index.html">Account Home</a>
27+
<a href="profile.html">Profile</a>
28+
<a href="preferences.html">Preferences</a>
29+
<a href="security.html">Security</a>
30+
<a class="active" href="achievements.html">Achievements</a>
31+
</aside>
32+
<div class="content-stack">
33+
<div class="card">
34+
<div class="card-body">
35+
<div class="kicker">Status = Wireframe</div>
36+
<h2>Build, Play and Share progress</h2>
37+
<p class="lede">Use the account achievements modes to review game creation, play activity and share reach without adding live account behavior.</p>
38+
<div class="hero-actions" aria-label="Achievement views">
39+
<button class="btn primary" type="button" data-achievements-tab="build" aria-pressed="true">Build</button>
40+
<button class="btn" type="button" data-achievements-tab="play" aria-pressed="false">Play</button>
41+
<button class="btn" type="button" data-achievements-tab="share" aria-pressed="false">Share</button>
42+
</div>
43+
</div>
44+
</div>
45+
46+
<section data-achievements-panel="build" aria-labelledby="build-achievements-title">
47+
<div class="content-stack">
48+
<div class="grid cols-4" aria-label="Build stats">
49+
<article class="mini-stat"><strong>12</strong>Created games</article>
50+
<article class="mini-stat"><strong>8</strong>Playable builds</article>
51+
<article class="mini-stat"><strong>4.7</strong>Average creator rating</article>
52+
<article class="mini-stat"><strong>3</strong>Ready to publish</article>
53+
</div>
54+
<div class="card">
55+
<div class="card-body content-stack">
56+
<div>
57+
<div class="kicker">Build</div>
58+
<h2 id="build-achievements-title">Created games</h2>
59+
</div>
60+
<div class="table-wrapper">
61+
<table class="data-table">
62+
<caption>Build achievements and ratings</caption>
63+
<thead>
64+
<tr>
65+
<th scope="col">Game</th>
66+
<th scope="col">Status</th>
67+
<th scope="col">Stats</th>
68+
<th scope="col">Rating</th>
69+
<th scope="col">Quick actions</th>
70+
</tr>
71+
</thead>
72+
<tbody>
73+
<tr>
74+
<td>Sky Forge Sprint</td>
75+
<td>Playable</td>
76+
<td>18 builds, 6 releases</td>
77+
<td>4.8</td>
78+
<td><button class="btn" type="button">Open build</button></td>
79+
</tr>
80+
<tr>
81+
<td>Crystal Circuit</td>
82+
<td>Draft</td>
83+
<td>9 builds, 2 release checks</td>
84+
<td>4.5</td>
85+
<td><button class="btn" type="button">Review stats</button></td>
86+
</tr>
87+
<tr>
88+
<td>Moonlit Maze</td>
89+
<td>Ready</td>
90+
<td>21 builds, 8 ratings</td>
91+
<td>4.9</td>
92+
<td><button class="btn" type="button">Prepare publish</button></td>
93+
</tr>
94+
</tbody>
95+
</table>
96+
</div>
97+
<div class="status" role="status">Build wireframe only: quick actions are enabled placeholders for future account workflows.</div>
98+
</div>
99+
</div>
100+
</div>
101+
</section>
102+
103+
<section data-achievements-panel="play" aria-labelledby="play-achievements-title" hidden>
104+
<div class="content-stack">
105+
<div class="grid cols-4" aria-label="Play stats">
106+
<article class="mini-stat"><strong>36</strong>Played games</article>
107+
<article class="mini-stat"><strong>14</strong>Favorites</article>
108+
<article class="mini-stat"><strong>72%</strong>Average progress</article>
109+
<article class="mini-stat"><strong>4.6</strong>Average player rating</article>
110+
</div>
111+
<div class="card">
112+
<div class="card-body content-stack">
113+
<div>
114+
<div class="kicker">Play</div>
115+
<h2 id="play-achievements-title">Played games</h2>
116+
</div>
117+
<div class="table-wrapper">
118+
<table class="data-table">
119+
<caption>Play progress and favorite actions</caption>
120+
<thead>
121+
<tr>
122+
<th scope="col">Game</th>
123+
<th scope="col">Progress</th>
124+
<th scope="col">Rating</th>
125+
<th scope="col">Favorite/share actions</th>
126+
</tr>
127+
</thead>
128+
<tbody>
129+
<tr>
130+
<td>Arc Nova Run</td>
131+
<td>84%</td>
132+
<td>5.0</td>
133+
<td><button class="btn" type="button">Favorite</button> <button class="btn" type="button">Share</button></td>
134+
</tr>
135+
<tr>
136+
<td>Garden Grid</td>
137+
<td>61%</td>
138+
<td>4.4</td>
139+
<td><button class="btn" type="button">Favorite</button> <button class="btn" type="button">Share</button></td>
140+
</tr>
141+
<tr>
142+
<td>Nova Keys</td>
143+
<td>100%</td>
144+
<td>4.9</td>
145+
<td><button class="btn" type="button">Favorite</button> <button class="btn" type="button">Share</button></td>
146+
</tr>
147+
</tbody>
148+
</table>
149+
</div>
150+
<div class="status" role="status">Play wireframe only: favorite, share, progress and rating controls are enabled placeholders.</div>
151+
</div>
152+
</div>
153+
</div>
154+
</section>
155+
156+
<section data-achievements-panel="share" aria-labelledby="share-achievements-title" hidden>
157+
<div class="content-stack">
158+
<div class="grid cols-4" aria-label="Share analytics">
159+
<article class="mini-stat"><strong>9.4K</strong>Share views</article>
160+
<article class="mini-stat"><strong>1.8K</strong>Launches from shares</article>
161+
<article class="mini-stat"><strong>428</strong>Profile follows</article>
162+
<article class="mini-stat"><strong>16</strong>Games shared</article>
163+
</div>
164+
<div class="card">
165+
<div class="card-body content-stack">
166+
<div>
167+
<div class="kicker">Share</div>
168+
<h2 id="share-achievements-title">Creator share analytics</h2>
169+
</div>
170+
<div class="grid cols-3">
171+
<article class="callout">
172+
<h3>Top share source</h3>
173+
<p>Creator profile links drive the strongest launch rate for shared games.</p>
174+
</article>
175+
<article class="callout">
176+
<h3>Best shared game</h3>
177+
<p>Sky Forge Sprint leads shared launches and profile follows this month.</p>
178+
</article>
179+
<article class="callout">
180+
<h3>Next milestone</h3>
181+
<p>Reach 10K share views to unlock the next creator visibility marker.</p>
182+
</article>
183+
</div>
184+
<div class="table-wrapper">
185+
<table class="data-table">
186+
<caption>Games I shared</caption>
187+
<thead>
188+
<tr>
189+
<th scope="col">Game</th>
190+
<th scope="col">Views</th>
191+
<th scope="col">Launches</th>
192+
<th scope="col">Rating lift</th>
193+
<th scope="col">Actions</th>
194+
</tr>
195+
</thead>
196+
<tbody>
197+
<tr>
198+
<td>Sky Forge Sprint</td>
199+
<td>4.2K</td>
200+
<td>840</td>
201+
<td>+0.4</td>
202+
<td><button class="btn" type="button">Copy share link</button></td>
203+
</tr>
204+
<tr>
205+
<td>Moonlit Maze</td>
206+
<td>2.7K</td>
207+
<td>510</td>
208+
<td>+0.3</td>
209+
<td><button class="btn" type="button">View analytics</button></td>
210+
</tr>
211+
<tr>
212+
<td>Crystal Circuit</td>
213+
<td>1.5K</td>
214+
<td>320</td>
215+
<td>+0.2</td>
216+
<td><button class="btn" type="button">Share again</button></td>
217+
</tr>
218+
</tbody>
219+
</table>
220+
</div>
221+
<div class="status" role="status">Share wireframe only: analytics and share actions are enabled placeholders.</div>
222+
</div>
223+
</div>
224+
</div>
225+
</section>
226+
</div>
227+
</div>
228+
</section>
229+
</main>
230+
<div data-partial="footer"></div>
231+
<script src="../assets/theme-v2/js/gamefoundry-partials.js" defer></script>
232+
<script src="../assets/theme-v2/js/account-achievements.js" defer></script>
233+
</body>
234+
235+
</html>

‎account/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h1>Account Home</h1>
2727
<a href="profile.html">Profile</a>
2828
<a href="preferences.html">Preferences</a>
2929
<a href="security.html">Security</a>
30+
<a href="achievements.html">Achievements</a>
3031
</aside>
3132
<div class="card">
3233
<div class="card-body">

‎account/preferences.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h1>Preferences</h1>
2727
<a href="profile.html">Profile</a>
2828
<a class="active" href="preferences.html">Preferences</a>
2929
<a href="security.html">Security</a>
30+
<a href="achievements.html">Achievements</a>
3031
</aside>
3132
<div class="card">
3233
<div class="card-body">

‎account/profile.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h1>Profile</h1>
2727
<a class="active" href="profile.html">Profile</a>
2828
<a href="preferences.html">Preferences</a>
2929
<a href="security.html">Security</a>
30+
<a href="achievements.html">Achievements</a>
3031
</aside>
3132
<div class="card">
3233
<div class="card-body">

‎account/security.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h1>Security</h1>
2727
<a href="profile.html">Profile</a>
2828
<a href="preferences.html">Preferences</a>
2929
<a class="active" href="security.html">Security</a>
30+
<a href="achievements.html">Achievements</a>
3031
</aside>
3132
<div class="card">
3233
<div class="card-body">

‎assets/theme-v2/js/account-achievements.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
(function () {
2+
const tabs = Array.from(document.querySelectorAll("[data-achievements-tab]"));
3+
const panels = Array.from(document.querySelectorAll("[data-achievements-panel]"));
4+
if (!tabs.length || !panels.length) {
5+
return;
6+
}
7+
8+
function showTab(tabName) {
9+
tabs.forEach((tab) => {
10+
const isActive = tab.dataset.achievementsTab === tabName;
11+
tab.setAttribute("aria-pressed", String(isActive));
12+
tab.classList.toggle("primary", isActive);
13+
});
14+
15+
panels.forEach((panel) => {
16+
panel.hidden = panel.dataset.achievementsPanel !== tabName;
17+
});
18+
}
19+
20+
tabs.forEach((tab) => {
21+
tab.addEventListener("click", () => {
22+
showTab(tab.dataset.achievementsTab);
23+
});
24+
});
25+
26+
showTab("build");
27+
}());

‎assets/theme-v2/js/gamefoundry-partials.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
"account-profile": "account/profile.html",
6363
"account-preferences": "account/preferences.html",
6464
"account-security": "account/security.html",
65+
"account-achievements": "account/achievements.html",
6566
branding: "admin/branding.html",
6667
controls: "admin/controls.html",
6768
"design-system": "admin/design-system.html",

‎assets/theme-v2/partials/footer.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ <h2 id="footer-account">Account</h2>
3333
<a data-route="account-profile" href="account/profile.html">Profile</a>
3434
<a data-route="account-preferences" href="account/preferences.html">Preferences</a>
3535
<a data-route="account-security" href="account/security.html">Security</a>
36+
<a data-route="account-achievements" href="account/achievements.html">Achievements</a>
3637
</div>
3738
</section>
3839
<section class="footer__group footer__legal" aria-labelledby="footer-legal">

‎assets/theme-v2/partials/header-nav.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@
8383
<a data-nav-link data-route="account-profile" href="account/profile.html">Profile</a>
8484
<a data-nav-link data-route="account-preferences" href="account/preferences.html">Preferences</a>
8585
<a data-nav-link data-route="account-security" href="account/security.html">Security</a>
86+
<a data-nav-link data-route="account-achievements" href="account/achievements.html">Achievements</a>
8687
</div>
8788
</div>
8889
</nav>

0 commit comments

Comments
 (0)