Skip to content

Commit 4cad989

Browse files
committed
feat(website): stats — split downloads by hardware family, not PC vs handhelds
The "02" stats widget was a binary PC-vs-handheld bar that ignored Android and PS2 even though their download counts were already aggregated. Rework it into a data-driven rollup over every family in data/families.yaml (Komputery / Telefony i tablety / Handheldy / Konsole), injected as window.WACKI_FAMILIES the same way the platform list is. Add a family in the YAML and it shows up in the split for free.
1 parent c51901c commit 4cad989

6 files changed

Lines changed: 105 additions & 46 deletions

File tree

website/data/families.yaml

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
# Platform families, in display order. The single source for how platforms are
2-
# grouped on the home grid and the /platformy/ hub. `key` matches each platform
3-
# page's params.familyKey (also the stats "kind" bucket: pc|mobile|handheld|console).
4-
# Adding a platform = drop a content file in content/platformy/ with the right
5-
# familyKey; it slots into the matching group automatically.
2+
# grouped on the home grid, the /platformy/ hub and the stats "by hardware
3+
# family" split. `key` matches each platform page's params.familyKey (also the
4+
# stats "kind" bucket: pc|mobile|handheld|console). `color` feeds the stats
5+
# family split (via window.WACKI_FAMILIES) — keep it in sync with the fallback
6+
# palette in static/stats.js. Adding a platform = drop a content file in
7+
# content/platformy/ with the right familyKey; it slots into the matching
8+
# group automatically.
69
- key: pc
710
label: Komputery
811
icon: "🖥️"
12+
color: "#1c3a52"
913
blurb: "macOS, Linux i Windows — mysz, klawiatura, pełny ekran."
1014
- key: mobile
1115
label: Telefony i tablety
1216
icon: "📱"
17+
color: "#14a84a"
1318
blurb: "Android — sterowanie dotykiem, obraz zawsze w poziomie."
1419
- key: handheld
1520
label: Handheldy
1621
icon: "🎮"
22+
color: "#ff7b08"
1723
blurb: "Miyoo, Anbernic i dziesiątki innych kieszonkowych konsol."
1824
- key: console
1925
label: Konsole
2026
icon: "📀"
27+
color: "#b8330f"
2128
blurb: "Wielkie pudła pod telewizor — na razie PlayStation 2."

website/hugo.toml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ repo = "mszula/wacki"
3131

3232
# Cache-buster appended to styles.css/main.js/stats.* — bump on every CSS/JS
3333
# change so browsers (and the local preview) don't serve a stale build.
34-
assetver = "20260617h"
34+
assetver = "20260619a"
3535

3636
# Where the (1998, out-of-print) game can be downloaded as abandonware. Used by
3737
# the FAQ, the platform-page disc callout and the hub notice so the framing +

website/layouts/_default/stats.html

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{{ define "head" }}
22
<meta
33
name="description"
4-
content="Ile razy pobrano port Wacki: Kosmiczna rozgrywka? Statystyki na żywo z GitHuba — podział na platformy (PC i handheldy) oraz na wydania."
4+
content="Ile razy pobrano port Wacki: Kosmiczna rozgrywka? Statystyki na żywo z GitHuba — podział wg platformy, rodziny sprzętu (komputery, telefony, handheldy, konsole) i wydania."
55
/>
66
<link rel="canonical" href="{{ .Permalink }}" />
77

@@ -83,30 +83,16 @@ <h2 class="h2"><span class="h2__tag">01</span> Wg platformy</h2>
8383

8484
<section class="section">
8585
<div class="wrap">
86-
<h2 class="h2"><span class="h2__tag">02</span> PC kontra handheldy</h2>
86+
<h2 class="h2"><span class="h2__tag">02</span> Wg rodziny sprzętu</h2>
8787
<p class="section__sub">
88-
Pecet (Windows, macOS, Linux) czy kieszonkowa konsola (Miyoo,
89-
Anbernic i spółka)?
88+
Te same pobrania co wyżej, zsumowane w cztery światy: komputery
89+
(Windows, macOS, Linux), telefony i tablety (Android), handheldy
90+
(Miyoo, Anbernic i spółka) oraz konsole (PlayStation 2). Ile waży
91+
każdy z nich?
9092
</p>
9193
<div class="split">
92-
<div class="split__bar">
93-
<div class="split__seg split__seg--pc" id="split-pc-fill">
94-
<span id="split-pc-pct"></span>
95-
</div>
96-
<div class="split__seg split__seg--hh" id="split-hh-fill">
97-
<span id="split-hh-pct"></span>
98-
</div>
99-
</div>
100-
<div class="split__legend">
101-
<span class="split__item">
102-
<span class="split__dot split__dot--pc"></span>
103-
🖥️ PC — <b id="split-pc-num"></b>
104-
</span>
105-
<span class="split__item">
106-
<span class="split__dot split__dot--hh"></span>
107-
🎮 Handheldy — <b id="split-hh-num"></b>
108-
</span>
109-
</div>
94+
<div class="split__bar" id="split-bar"></div>
95+
<div class="split__legend" id="split-legend"></div>
11096
</div>
11197
</div>
11298
</section>
@@ -132,5 +118,6 @@ <h2 class="h2"><span class="h2__tag">03</span> Wg wydania</h2>
132118
{{ end }}
133119

134120
{{ define "scripts" }}
121+
{{ partial "families-data.html" . }}
135122
<script src="{{ "stats.js" | relURL }}?v={{ site.Params.assetver }}"></script>
136123
{{ end }}
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{{- /* Emits the hardware-family list (data/families.yaml) as a JS global so
2+
stats.js can roll the live download counter up into family groups — the
3+
same single source of truth that drives the home grid and the /platformy/
4+
hub. Add a family in families.yaml → it shows up in the stats split for
5+
free. Like platforms-data.html, this MUST be `jsonify | safeJS`: inside a
6+
<script> block Go's html/template double-escapes a plain jsonify'd string
7+
into a broken mess, and safeJS marks it as already-safe JS. */ -}}
8+
{{- $fams := slice -}}
9+
{{- range hugo.Data.families -}}
10+
{{- $fams = $fams | append (dict
11+
"key" .key
12+
"label" .label
13+
"icon" .icon
14+
"color" .color
15+
) -}}
16+
{{- end -}}
17+
<script>window.WACKI_FAMILIES = {{ $fams | jsonify | safeJS }};</script>

website/static/stats.css

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,9 @@ a.bar:hover {
204204
.bar__fill { transition: none; }
205205
}
206206

207-
/* Desktop vs handheld split */
207+
/* Hardware-family split. Segments are built in stats.js, one per family from
208+
data/families.yaml, and coloured inline from each family's `color` — so this
209+
stylesheet no longer hard-codes per-segment colours. */
208210
.split {
209211
max-width: 760px;
210212
margin: 0 auto;
@@ -227,11 +229,16 @@ a.bar:hover {
227229
color: #fff;
228230
letter-spacing: 1px;
229231
font-size: 1.05rem;
232+
/* White % over whatever colour the family carries — the shadow keeps it
233+
legible on the lighter segments (e.g. orange handhelds). */
234+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
230235
transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
231236
min-width: 0;
237+
overflow: hidden;
232238
}
233-
.split__seg--pc { background: var(--navy); }
234-
.split__seg--hh { background: var(--green-deep); }
239+
/* Thin divider between adjacent segments so neighbouring family colours read
240+
as distinct slices, not one smeared band. */
241+
.split__seg + .split__seg { border-left: 2px solid var(--ink); }
235242
@media (prefers-reduced-motion: reduce) {
236243
.split__seg { transition: none; }
237244
}
@@ -254,8 +261,6 @@ a.bar:hover {
254261
border: 2px solid var(--ink);
255262
border-radius: 4px;
256263
}
257-
.split__dot--pc { background: var(--navy); }
258-
.split__dot--hh { background: var(--green-deep); }
259264
.split__item b { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 1px; }
260265

261266
.stats-note {

website/static/stats.js

Lines changed: 57 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,21 @@
3131
: FALLBACK_PLATFORMS;
3232
var OTHER = { key: "other", icon: "📦", label: "Inne", kind: "pc", color: "#6b5a3e" };
3333

34+
// Hardware families, for the higher-level "by family" split. Comes from Hugo
35+
// (window.WACKI_FAMILIES, injected from data/families.yaml) so it shares the
36+
// site's single source of truth — add a family there and it buckets here for
37+
// free. Order = display order of the split; `color`/`label`/`icon` mirror the
38+
// YAML. The inline array is only a fallback for a stale/cached stats.html.
39+
var FALLBACK_FAMILIES = [
40+
{ key: "pc", label: "Komputery", icon: "🖥️", color: "#1c3a52" },
41+
{ key: "mobile", label: "Telefony i tablety", icon: "📱", color: "#14a84a" },
42+
{ key: "handheld", label: "Handheldy", icon: "🎮", color: "#ff7b08" },
43+
{ key: "console", label: "Konsole", icon: "📀", color: "#b8330f" }
44+
];
45+
var FAMILIES = (window.WACKI_FAMILIES && window.WACKI_FAMILIES.length)
46+
? window.WACKI_FAMILIES
47+
: FALLBACK_FAMILIES;
48+
3449
function platformFor(assetName) {
3550
var n = (assetName || "").toLowerCase();
3651
for (var i = 0; i < PLATFORMS.length; i++) {
@@ -64,7 +79,9 @@
6479
var p = platformFor(a.name);
6580
perPlatform[p.key] = perPlatform[p.key] || { meta: p, count: 0 };
6681
perPlatform[p.key].count += c;
67-
byKind[p.kind] += c;
82+
// Guarded so a platform whose kind isn't pre-seeded (a new family) adds
83+
// up instead of producing NaN.
84+
byKind[p.kind] = (byKind[p.kind] || 0) + c;
6885
relTotal += c;
6986
total += c;
7087
if (a.created_at && (!firstAssetDate || a.created_at < firstAssetDate)) {
@@ -187,19 +204,45 @@
187204
);
188205
});
189206

190-
// desktop vs handheld split (other kinds — consoles like PS2, Android —
191-
// show in the per-platform bars + grand total, but not this binary
192-
// PC↔handheld widget)
193-
var pc = data.byKind.pc, hh = data.byKind.handheld, sum = pc + hh;
194-
var pcPct = sum ? Math.round((pc / sum) * 100) : 0;
195-
var hhPct = sum ? 100 - pcPct : 0;
196-
el("split-pc-num").textContent = fmt(pc);
197-
el("split-hh-num").textContent = fmt(hh);
198-
el("split-pc-pct").textContent = pcPct + "%";
199-
el("split-hh-pct").textContent = hhPct + "%";
200-
applySoon(function () {
201-
el("split-pc-fill").style.width = pcPct + "%";
202-
el("split-hh-fill").style.width = hhPct + "%";
207+
// hardware-family split — the same downloads as the per-platform bars,
208+
// rolled up into the families from data/families.yaml as one 100%-stacked
209+
// bar. Families with zero downloads are dropped so it shows only what
210+
// people actually play on. Percentages are a share of this sum (which
211+
// equals the grand total once every platform maps to a family).
212+
var famSum = 0;
213+
FAMILIES.forEach(function (f) { famSum += data.byKind[f.key] || 0; });
214+
var splitBar = el("split-bar");
215+
var splitLegend = el("split-legend");
216+
splitBar.innerHTML = "";
217+
splitLegend.innerHTML = "";
218+
FAMILIES.forEach(function (f) {
219+
var count = data.byKind[f.key] || 0;
220+
if (count <= 0) return;
221+
// Exact float width (so segments always fill the bar); rounded label.
222+
var pctExact = famSum ? (count / famSum) * 100 : 0;
223+
var pctLabel = Math.round(pctExact);
224+
225+
var seg = document.createElement("div");
226+
seg.className = "split__seg";
227+
seg.style.background = f.color;
228+
seg.title = f.label + " — " + fmt(count) + " (" + pctLabel + "%)";
229+
// Only label segments wide enough to fit the text without clipping; the
230+
// legend carries the rest so a thin sliver doesn't show garbled digits.
231+
if (pctExact >= 10) seg.textContent = pctLabel + "%";
232+
splitBar.appendChild(seg);
233+
applySoon(function () { seg.style.width = pctExact + "%"; });
234+
235+
var item = document.createElement("span");
236+
item.className = "split__item";
237+
var dot = document.createElement("span");
238+
dot.className = "split__dot";
239+
dot.style.background = f.color;
240+
var b = document.createElement("b");
241+
b.textContent = fmt(count);
242+
item.appendChild(dot);
243+
item.appendChild(document.createTextNode(" " + f.icon + " " + f.label + " — "));
244+
item.appendChild(b);
245+
splitLegend.appendChild(item);
203246
});
204247

205248
// per-release bars (already latest-first from API) — share of grand total

0 commit comments

Comments
 (0)