Skip to content

Commit e289fd3

Browse files
ToolboxAidToolboxAid
committed
feat(ui): add rating account page and grouping color swatches
1 parent 0d1f0c6 commit e289fd3

17 files changed

Lines changed: 335 additions & 33 deletions

‎GameFoundryStudio/account/grouping-colors.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ <h1>Tool grouping and color reference.</h1>
2525
<div class="container">
2626
<div class="card">
2727
<div class="card-body">
28-
<h2>Current Tool Groupings</h2>
28+
<h2>Current Tool Groupings (deprecated)</h2>
2929
<p>Your current groupings are strong from a user perspective, but they do not map perfectly to
3030
the color scheme.</p>
3131
<div class="table-wrapper">
@@ -132,7 +132,7 @@ <h2>Color-Aligned Grouping Option</h2>
132132
<div class="grid cols-4">
133133
<article class="mini-stat">
134134
<h3><span class="brand-color-code"><span
135-
class="brand-color-swatch swatch-green"></span>Green: Build &amp;
135+
class="brand-color-swatch swatch-pink"></span>Pink: Build &amp;
136136
Create</span></h3>
137137
<ul>
138138
<li>Game Builder</li>
@@ -213,6 +213,13 @@ <h3><span class="brand-color-code"><span
213213
<div class="callout"><strong>Recommended future alignment:</strong> keep the current category
214214
names as the primary user-facing grouping. Badge colors should be secondary visual grouping
215215
cues inside those categories, and tile colors can be corrected later.</div>
216+
<div class="callout"><strong>Shared grouping color layer:</strong> grouping colors are applied
217+
through shared group classes and per-group imports under
218+
<code>assets/css/tools/grouping/</code>. Tools can be rethemed by changing the grouping CSS
219+
import or token mapping, and pages should not define their own group colors. The current
220+
mapping follows the Color-Aligned Grouping Option: Build &amp; Create pink, Content &amp;
221+
Assets orange, Media &amp; Audio red, AI &amp; Learning purple, Platform &amp; Cloud blue,
222+
and Development &amp; System gray.</div>
216223
</div>
217224
</div>
218225
</div>

‎GameFoundryStudio/account/rating.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
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>Rating - Game Foundry Studio</title>
8+
<meta name="description" content="Game Foundry Studio rating reference for games, content, playability and community quality.">
9+
<link rel="icon" href="../assets/images/favicon.svg" type="image/svg+xml">
10+
<link rel="stylesheet" href="../assets/css/styles.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 Reference</div>
19+
<h1>Rating quality checklist.</h1>
20+
<p class="lede">Static rating categories for game quality, content suitability, player experience,
21+
interaction patterns, and community safety review.</p>
22+
</div>
23+
</section>
24+
<section class="section">
25+
<div class="container">
26+
<div class="grid cols-3">
27+
<article class="card">
28+
<div class="card-body">
29+
<h2>Game Rating</h2>
30+
<p>Core game quality, clarity of objectives, session flow, replay value, and overall game
31+
readiness.</p>
32+
<ul>
33+
<li>Objective clarity</li>
34+
<li>Progression quality</li>
35+
<li>Session pacing</li>
36+
<li>Replay value</li>
37+
</ul>
38+
</div>
39+
</article>
40+
<article class="card">
41+
<div class="card-body">
42+
<h2>Content Rating</h2>
43+
<p>Age suitability, themes, language, visual intensity, audio intensity, and marketplace
44+
expectations.</p>
45+
<ul>
46+
<li>Age range</li>
47+
<li>Theme intensity</li>
48+
<li>Language review</li>
49+
<li>Visual and audio sensitivity</li>
50+
</ul>
51+
</div>
52+
</article>
53+
<article class="card">
54+
<div class="card-body">
55+
<h2>Playability Rating</h2>
56+
<p>Controls, readability, difficulty curve, responsiveness, and ability to recover from
57+
mistakes.</p>
58+
<ul>
59+
<li>Control feel</li>
60+
<li>Difficulty balance</li>
61+
<li>Readable feedback</li>
62+
<li>Failure recovery</li>
63+
</ul>
64+
</div>
65+
</article>
66+
<article class="card">
67+
<div class="card-body">
68+
<h2>Interaction Rating</h2>
69+
<p>Input mapping, menu flow, player prompts, tutorial clarity, and multiplayer or shared
70+
interaction expectations.</p>
71+
<ul>
72+
<li>Input mapping</li>
73+
<li>Prompt clarity</li>
74+
<li>Menu flow</li>
75+
<li>Shared interaction quality</li>
76+
</ul>
77+
</div>
78+
</article>
79+
<article class="card">
80+
<div class="card-body">
81+
<h2>Safety / Community Rating</h2>
82+
<p>Community-facing quality, moderation expectations, identity safety, reporting needs, and
83+
player protection notes.</p>
84+
<ul>
85+
<li>Community safety</li>
86+
<li>Moderation needs</li>
87+
<li>Reporting paths</li>
88+
<li>Player protection</li>
89+
</ul>
90+
</div>
91+
</article>
92+
<article class="card">
93+
<div class="card-body">
94+
<h2>Overall Rating Summary</h2>
95+
<p>Combined score notes, release confidence, recommended fixes, and the final publish-ready
96+
rating decision.</p>
97+
<ul>
98+
<li>Combined score</li>
99+
<li>Release confidence</li>
100+
<li>Recommended fixes</li>
101+
<li>Final rating decision</li>
102+
</ul>
103+
</div>
104+
</article>
105+
</div>
106+
</div>
107+
</section>
108+
</main>
109+
<div data-partial="footer"></div>
110+
<script src="../assets/js/gamefoundry-partials.js" defer></script>
111+
</body>
112+
113+
</html>

‎GameFoundryStudio/assets/css/gamefoundrystudio.css‎

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -435,7 +435,7 @@ details.vertical-accordion summary::-webkit-details-marker {
435435
}
436436

437437
details.vertical-accordion summary:after {
438-
content: "+";
438+
content: "⌄";
439439
width: 24px;
440440
height: 24px;
441441
border: 1px solid var(--line);
@@ -448,7 +448,7 @@ details.vertical-accordion summary:after {
448448
}
449449

450450
details.vertical-accordion[open] summary:after {
451-
content: "-"
451+
content: "⌃"
452452
}
453453

454454
.accordion-body {
@@ -611,6 +611,23 @@ details.vertical-accordion[open] summary:after {
611611
display: none
612612
}
613613

614+
.tool-display-mode summary:after {
615+
content: "⌄";
616+
width: 24px;
617+
height: 24px;
618+
border: 1px solid var(--meaning-border, var(--line));
619+
border-radius: 999px;
620+
background: var(--panel-soft);
621+
color: var(--meaning-color, var(--gold));
622+
display: inline-grid;
623+
place-items: center;
624+
flex: 0 0 auto
625+
}
626+
627+
.tool-display-mode[open] summary:after {
628+
content: "⌃"
629+
}
630+
614631
.tool-display-mode__badge {
615632
width: 42px;
616633
height: 42px;
@@ -656,6 +673,31 @@ details.vertical-accordion[open] summary:after {
656673
align-items: stretch
657674
}
658675

676+
.tool-group-label {
677+
display: inline-flex;
678+
align-items: center;
679+
gap: var(--space-sm);
680+
color: var(--tool-group-color)
681+
}
682+
683+
.tool-group-swatch {
684+
width: var(--icon-size-sm);
685+
height: var(--icon-size-sm);
686+
flex: 0 0 auto;
687+
border: 1px solid var(--swatch-border);
688+
border-radius: var(--radius-pill);
689+
background: var(--tool-group-color);
690+
box-shadow: var(--shadow-sm)
691+
}
692+
693+
.vertical-accordion[class*="tool-group-"] {
694+
border-color: var(--tool-group-accent)
695+
}
696+
697+
.vertical-accordion[class*="tool-group-"] summary {
698+
color: var(--tool-group-color)
699+
}
700+
659701
.tool-card img {
660702
width: 210px;
661703
height: 263px;
@@ -668,7 +710,16 @@ details.vertical-accordion[open] summary:after {
668710
}
669711

670712
.tool-card .body {
671-
padding: 14px
713+
padding: 14px;
714+
display: flex;
715+
flex-direction: column;
716+
flex: 1
717+
}
718+
719+
.tool-card a {
720+
display: flex;
721+
flex-direction: column;
722+
height: 100%
672723
}
673724

674725
.role {
@@ -679,6 +730,12 @@ details.vertical-accordion[open] summary:after {
679730
text-transform: uppercase
680731
}
681732

733+
.tool-card .role:last-child {
734+
display: block;
735+
margin-top: auto;
736+
padding-top: var(--space-md)
737+
}
738+
682739
.tool-card.spark,
683740
.tool-card.forge {
684741
border-color: var(--orange-border-muted)
@@ -692,6 +749,10 @@ details.vertical-accordion[open] summary:after {
692749
border-color: var(--cyan-border-muted)
693750
}
694751

752+
.tool-card[class*="tool-group-"] {
753+
border-color: var(--tool-group-accent)
754+
}
755+
695756
body.tool-focus-mode .site-header,
696757
body.tool-focus-mode .page-title,
697758
body.tool-focus-mode .footer {

‎GameFoundryStudio/assets/css/pages.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,10 @@
240240
background: var(--green)
241241
}
242242

243+
.swatch-pink {
244+
background: var(--pink)
245+
}
246+
243247
.swatch-red {
244248
background: var(--red)
245249
}

‎GameFoundryStudio/assets/css/styles.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
@import url("colors.css");
2+
@import url("tools/grouping/build-create.css");
3+
@import url("tools/grouping/content-assets.css");
4+
@import url("tools/grouping/media-audio.css");
5+
@import url("tools/grouping/ai-learning.css");
6+
@import url("tools/grouping/platform-cloud.css");
7+
@import url("tools/grouping/development-system.css");
8+
@import url("tools/grouping/community-marketplace.css");
9+
@import url("tools/grouping/play.css");
210
@import url("tokens.css");
311
@import url("base.css");
412
@import url("controls.css");

‎GameFoundryStudio/assets/css/tools/grouping/ai-learning.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.tool-group-ai-learning {
2+
--tool-group-color: var(--purple);
3+
--tool-group-accent: var(--purple)
4+
}

‎GameFoundryStudio/assets/css/tools/grouping/build-create.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.tool-group-build-create {
2+
--tool-group-color: var(--pink);
3+
--tool-group-accent: var(--pink)
4+
}

‎GameFoundryStudio/assets/css/tools/grouping/community-marketplace.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.tool-group-community-marketplace {
2+
--tool-group-color: var(--gold);
3+
--tool-group-accent: var(--gold)
4+
}

‎GameFoundryStudio/assets/css/tools/grouping/content-assets.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.tool-group-content-assets {
2+
--tool-group-color: var(--orange);
3+
--tool-group-accent: var(--orange)
4+
}

‎GameFoundryStudio/assets/css/tools/grouping/development-system.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.tool-group-development-system {
2+
--tool-group-color: var(--steel-gray);
3+
--tool-group-accent: var(--steel-gray)
4+
}

0 commit comments

Comments
 (0)