@rydr/game-sdk 3.0.1 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/README.md +34 -0
  2. package/dist/protocol/version.d.ts +1 -1
  3. package/dist/protocol/version.js +1 -1
  4. package/dist/ui/action-card.d.ts +39 -0
  5. package/dist/ui/action-card.d.ts.map +1 -0
  6. package/dist/ui/action-card.js +38 -0
  7. package/dist/ui/action-card.js.map +1 -0
  8. package/dist/ui/action-diamond.d.ts +41 -0
  9. package/dist/ui/action-diamond.d.ts.map +1 -0
  10. package/dist/ui/action-diamond.js +35 -0
  11. package/dist/ui/action-diamond.js.map +1 -0
  12. package/dist/ui/card.d.ts +45 -0
  13. package/dist/ui/card.d.ts.map +1 -0
  14. package/dist/ui/card.js +73 -0
  15. package/dist/ui/card.js.map +1 -0
  16. package/dist/ui/choice-card.d.ts +73 -0
  17. package/dist/ui/choice-card.d.ts.map +1 -0
  18. package/dist/ui/choice-card.js +141 -0
  19. package/dist/ui/choice-card.js.map +1 -0
  20. package/dist/ui/dialogue-card.d.ts +54 -0
  21. package/dist/ui/dialogue-card.d.ts.map +1 -0
  22. package/dist/ui/dialogue-card.js +107 -0
  23. package/dist/ui/dialogue-card.js.map +1 -0
  24. package/dist/ui/index.d.ts +31 -0
  25. package/dist/ui/index.d.ts.map +1 -0
  26. package/dist/ui/index.js +31 -0
  27. package/dist/ui/index.js.map +1 -0
  28. package/dist/ui/keycap.d.ts +77 -0
  29. package/dist/ui/keycap.d.ts.map +1 -0
  30. package/dist/ui/keycap.js +160 -0
  31. package/dist/ui/keycap.js.map +1 -0
  32. package/dist/ui/labeled-diamond.d.ts +32 -0
  33. package/dist/ui/labeled-diamond.d.ts.map +1 -0
  34. package/dist/ui/labeled-diamond.js +86 -0
  35. package/dist/ui/labeled-diamond.js.map +1 -0
  36. package/dist/ui/showcase/gallery.d.ts +57 -0
  37. package/dist/ui/showcase/gallery.d.ts.map +1 -0
  38. package/dist/ui/showcase/gallery.js +90 -0
  39. package/dist/ui/showcase/gallery.js.map +1 -0
  40. package/dist/ui/showcase/index.d.ts +35 -0
  41. package/dist/ui/showcase/index.d.ts.map +1 -0
  42. package/dist/ui/showcase/index.js +256 -0
  43. package/dist/ui/showcase/index.js.map +1 -0
  44. package/dist/ui/styles.d.ts +12 -0
  45. package/dist/ui/styles.d.ts.map +1 -0
  46. package/dist/ui/styles.js +183 -0
  47. package/dist/ui/styles.js.map +1 -0
  48. package/package.json +13 -2
package/dist/ui/styles.js ADDED
@@ -0,0 +1,183 @@
1
+ /**
2
+ * Shared scoped `.rydr-ui-*` CSS for the controller-button UI (keycap · card · action card · action
3
+ * diamond · dialogue · choice · labeled diamond), injected once into <head>. Self-contained, like the
4
+ * perf-overlay: it injects no global styles and depends on no CSS variables, so any game gets the look
5
+ * just by constructing a component. Keep it dependency-free.
6
+ *
7
+ * The font sizes, paddings, and dimensions here are TUNED FOR A TRAINER SCREEN read from a few feet
8
+ * away while pedaling — they are part of the component contract, not defaults to be overridden.
9
+ * Consumers fill the content slot; they must not restyle the `.rydr-ui-*` type/sizing.
10
+ */
11
+ let cssInjected = false;
12
+ export function injectCss() {
13
+ if (cssInjected || document.getElementById("rydr-ui-css")) {
14
+ cssInjected = true;
15
+ return;
16
+ }
17
+ const style = document.createElement("style");
18
+ style.id = "rydr-ui-css";
19
+ style.textContent = CSS;
20
+ document.head.appendChild(style);
21
+ cssInjected = true;
22
+ }
23
+ const CSS = `
24
+ .rydr-ui-root { position: fixed; left: 50%; bottom: 96px; z-index: 40; pointer-events: none;
25
+ transform: translateX(-50%); opacity: 0; transition: opacity 0.18s; }
26
+ .rydr-ui-root.inline { position: relative; left: auto; bottom: auto; transform: none; opacity: 1; display: inline-block; }
27
+ /* the dark action card holding the content slot */
28
+ .rydr-ui-card { position: relative; padding: 10px 20px 12px; border-radius: 12px; background: rgba(8,14,24,0.7);
29
+ border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(0,0,0,0.4);
30
+ color: #eef4ff; text-align: center; }
31
+ /* the card is JUST a dark container with padding — it hugs its content by default. A consumer can fix
32
+ the size via the width/height options (→ .rydr-ui-card.fixed) and the content then centres inside. */
33
+ .rydr-ui-card.fixed { box-sizing: border-box; }
34
+ .rydr-ui-card.fixed > .rydr-ui-card-body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
35
+ /* inside the diamond, cards are a CONSTANT fixed-size frame (uniform), content centred. */
36
+ .rydr-ui-dia .rydr-ui-card-body { width: 150px; min-height: 52px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
37
+ /* a string label gets the bold, centred, 2-line-clamped "ATTAQUER" look; custom content styles itself. */
38
+ .rydr-ui-card-lbl { font: 800 20px system-ui, sans-serif; letter-spacing: 0.04em;
39
+ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
40
+ line-height: 1.12; text-align: center; overflow-wrap: anywhere; }
41
+ /* the action-card keycap (a DIRECT child of the card) floats over the card, straddling its bottom edge.
42
+ Direct-child selector so keycaps nested inside the body (e.g. the dialogue card's corner) are NOT pinned. */
43
+ .rydr-ui-card > .rydr-ui-diamond { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 65%); }
44
+ .rydr-ui-diamond { position: relative; }
45
+
46
+ /* DIALOGUE CARD — speaker name + typed line + a continue cue (▸ / ✓) and keycap, inside the dark card */
47
+ .rydr-ui-dlg { width: min(720px, 90vw); text-align: left; }
48
+ .rydr-ui-dlg-name { color: #ffe27a; font: 800 22px system-ui, sans-serif; letter-spacing: 0.01em; margin-bottom: 10px; }
49
+ .rydr-ui-dlg-line { color: #eef4ff; font: 600 26px system-ui, sans-serif; line-height: 1.4; min-height: 2.8em; }
50
+ .rydr-ui-dlg-go { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }
51
+ .rydr-ui-dlg-cue { color: rgba(255,255,255,0.6); font: 800 22px system-ui, sans-serif; }
52
+
53
+ /* CHOICE CARD — player menu: speaker name + optional prompt + a highlighted option list (▲▼ move, A confirm) */
54
+ .rydr-ui-choice { width: min(720px, 90vw); text-align: left; }
55
+ /* the conversation cards (NPC discussion + player choice) use even padding on all sides — the shared
56
+ .rydr-ui-card is asymmetric to seat a straddling keycap, which neither of these cards has. */
57
+ .rydr-ui-card:has(> .rydr-ui-card-body > .rydr-ui-choice),
58
+ .rydr-ui-card:has(> .rydr-ui-card-body > .rydr-ui-dlg) { padding: 20px; }
59
+ .rydr-ui-choice-name { color: #ffe27a; font: 800 22px system-ui, sans-serif; letter-spacing: 0.01em; margin-bottom: 10px; }
60
+ .rydr-ui-choice-prompt { color: #eef4ff; font: 600 24px system-ui, sans-serif; line-height: 1.35; margin-bottom: 14px;
61
+ overflow-wrap: anywhere; }
62
+ .rydr-ui-choice-list { display: flex; flex-direction: column; gap: 10px; }
63
+ /* an option row: a soft pill (accent-highlighted when selected). The row is tall enough to seat two
64
+ stacked arrows, and reserves a left gutter (.has-arrows) so labels stay aligned whether or not the
65
+ arrow guide is showing on this row. */
66
+ .rydr-ui-choice-opt { position: relative; display: flex; align-items: center; min-height: 52px; padding: 12px 18px;
67
+ border-radius: 12px; border: 2px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04);
68
+ color: #dfe7f3; transition: border-color 0.12s, background 0.12s, color 0.12s, padding-left 0.1s ease, padding-right 0.1s ease; }
69
+ /* only the SELECTED row opens a left gutter for the arrows; it pushes right quickly to make the room */
70
+ .rydr-ui-choice-opt.has-arrows.selected { padding-left: 60px; }
71
+ /* the confirm A keycap parks on the right of the selected row, so reserve room for it there */
72
+ .rydr-ui-choice-opt.selected { padding-right: 58px; }
73
+ .rydr-ui-choice-opt > .rydr-ui-diamond { position: absolute; right: 14px; top: 50%; transform: translateY(calc(-50% - 2px)); }
74
+ /* lift the selected row so its arrow gutter (which overflows the short row) paints ABOVE the rows below */
75
+ .rydr-ui-choice-opt.selected { border-color: rgba(255,226,122,0.85); background: rgba(255,226,122,0.1); color: #ffe27a; z-index: 2; }
76
+ /* the left gutter is ABSOLUTE so showing/hiding arrows never shifts the label; only the selected row's
77
+ gutter is populated. Arrow keycaps stack (UP over DOWN), centred in the gutter. */
78
+ .rydr-ui-choice-arrows { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 44px;
79
+ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
80
+ .rydr-ui-choice-label { flex: 1 1 auto; font: 700 24px system-ui, sans-serif; overflow-wrap: anywhere; }
81
+
82
+ .rydr-ui-pip { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center;
83
+ color: #0c1014; font-family: system-ui, sans-serif;
84
+ background: linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, #fff) 0%, var(--c) 60%);
85
+ box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 55%, #000), 0 5px 9px rgba(0,0,0,0.45);
86
+ transition: transform 0.08s ease, box-shadow 0.08s ease; }
87
+ .rydr-ui-pip-letter { font-weight: 800; line-height: 1; font-size: 0; position: relative; z-index: 2; }
88
+ /* directional glyph (chevron/caret/arrow) — drawn pointing up, rotated per position, dark like a letter */
89
+ .rydr-ui-pip-glyph { display: block; position: relative; z-index: 2; }
90
+ /* in the full diamond, the idle siblings sit pressed-in (shorter) so the active button reads as raised */
91
+ .rydr-ui-pip:not(.active) { transform: translateY(2px);
92
+ box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 50%, #000), inset 0 1px 2px rgba(0,0,0,0.45); }
93
+ .rydr-ui-pip.anim { animation: rydr-ui-pulse 1.6s ease-in-out infinite; }
94
+ /* pressed sink — opposite of the pulse's lift */
95
+ .rydr-ui-pip.pressed { transform: translateY(3px);
96
+ box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 55%, #000), 0 2px 4px rgba(0,0,0,0.45); }
97
+ .rydr-ui-pip.pressed.anim { animation: none; }
98
+
99
+ /* COOLDOWN — while recharging the button goes greyed + pushed-in ("spent"), with a circular loader
100
+ inside the rim and a centred countdown number. */
101
+ .rydr-ui-ring { position: absolute; inset: 2px; border-radius: 50%; z-index: 3; display: none;
102
+ background: conic-gradient(var(--c) calc(var(--cd, 0) * 360deg), rgba(255,255,255,0.16) 0);
103
+ -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 72%);
104
+ mask: radial-gradient(closest-side, transparent 70%, #000 72%); }
105
+ .rydr-ui-cd-num { position: absolute; inset: 0; z-index: 3; display: none; align-items: center; justify-content: center;
106
+ font: 800 18px system-ui, sans-serif; color: #eef4ff; }
107
+
108
+ .rydr-ui-pip.cooling { animation: none; transform: translateY(3px);
109
+ background: linear-gradient(180deg, #555d6b 0%, #3a414d 60%);
110
+ box-shadow: 0 1px 0 #20242d, 0 2px 5px rgba(0,0,0,0.4); }
111
+ .rydr-ui-pip.cooling .rydr-ui-pip-letter,
112
+ .rydr-ui-pip.cooling .rydr-ui-pip-glyph { display: none; }
113
+ .rydr-ui-pip.cooling .rydr-ui-ring { display: block; }
114
+ .rydr-ui-pip.cooling .rydr-ui-cd-num { display: flex; }
115
+
116
+ /* DISABLED — the action is unavailable. The CARD fades (frame + content read at ~50%), but the
117
+ floating keycap stays crisp — opacity can't be undone in children, so we dim the card's frame via
118
+ alpha + fade only its body, NOT the whole card, leaving the keycap to carry its OWN inert style.
119
+ The button reads as inert: flat grey, no pulse, no raised lip, letter dimmed. Distinct from
120
+ "cooling" (spent + recharging, with a ring). */
121
+ .rydr-ui-card.disabled { background: rgba(8,14,24,0.35); border-color: rgba(255,255,255,0.07);
122
+ box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
123
+ .rydr-ui-card.disabled > .rydr-ui-card-body { opacity: 0.5; }
124
+ .rydr-ui-pip.disabled { animation: none; transform: none;
125
+ background: linear-gradient(180deg, #4a515c 0%, #3a414d 60%);
126
+ box-shadow: 0 2px 0 #20242d, 0 2px 4px rgba(0,0,0,0.3); }
127
+ .rydr-ui-pip.disabled .rydr-ui-pip-letter,
128
+ .rydr-ui-pip.disabled .rydr-ui-pip-glyph { opacity: 0.35; color: #fff; }
129
+
130
+ /* the A/B/Y/Z move diamond — Z left · Y+B stacked in the centre column · A right. A centred grid that
131
+ sizes to its content, so the cluster takes only the room it needs and stays centred in any container. */
132
+ .rydr-ui-dia { display: grid; width: 100%; height: 100%; min-height: 240px; box-sizing: border-box;
133
+ grid-template-columns: auto auto auto; grid-template-rows: auto auto;
134
+ justify-content: center; align-content: center; justify-items: center; align-items: center;
135
+ column-gap: 10px; row-gap: 40px; }
136
+ .rydr-ui-dia .rydr-ui-dia-card.pos-lft { grid-column: 1; grid-row: 1 / span 2; }
137
+ .rydr-ui-dia .rydr-ui-dia-card.pos-top { grid-column: 2; grid-row: 1; }
138
+ .rydr-ui-dia .rydr-ui-dia-card.pos-bot { grid-column: 2; grid-row: 2; }
139
+ .rydr-ui-dia .rydr-ui-dia-card.pos-rgt { grid-column: 3; grid-row: 1 / span 2; }
140
+ .rydr-ui-dia-card.active .rydr-ui-card { border-color: rgba(255,226,122,0.85); background: rgba(255,226,122,0.14); }
141
+
142
+ /* LABELED DIAMOND (mountLabeledDiamond) — a central A/B/Y/Z pip cluster with a label radiating from
143
+ each active button. Outer 3×3 grid: cluster in the centre, one label cell per direction (each with
144
+ its own outward alignment). .rydr-ui-ld-host is the placement shell: an absolute overlay by default
145
+ (driven by setScreenPos), or inline + full-width when .inline. */
146
+ .rydr-ui-ld-host { position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 30; }
147
+ .rydr-ui-ld-host.inline { position: relative; transform: none; width: 100%; pointer-events: auto; }
148
+ .rydr-ui-ld-wrap { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto 1fr;
149
+ align-items: center; justify-items: center; gap: 0; box-sizing: border-box; }
150
+ .rydr-ui-ld-host:not(.inline) .rydr-ui-ld-wrap { width: max-content; }
151
+ .rydr-ui-ld-host.inline .rydr-ui-ld-wrap { width: 100%; min-height: 210px; padding: 8px 0; }
152
+ /* the pip cluster: four absolutely-placed pips packed into a tight, nearly-touching losange. (CSS gap
153
+ can't go negative, so we position by hand to pull the buttons right up against each other.) Lifted
154
+ above the labels so a button can overlap (sit on top of) the card pulled in beneath it. */
155
+ .rydr-ui-ld-cluster { grid-area: 2 / 2; position: relative; width: 110px; height: 100px; z-index: 3; }
156
+ .rydr-ui-ld-cluster .rydr-ui-pip { position: absolute; width: 40px; height: 40px; }
157
+ .rydr-ui-ld-cluster .pos-top { left: 35px; top: 0; }
158
+ .rydr-ui-ld-cluster .pos-bot { left: 35px; top: 60px; }
159
+ .rydr-ui-ld-cluster .pos-lft { left: 0; top: 30px; }
160
+ .rydr-ui-ld-cluster .pos-rgt { left: 70px; top: 30px; }
161
+ /* labels seat in the outer cell matching their button, snug against the cluster + aligned outward.
162
+ Each label is pulled under its button so the button overlaps it, and kept BELOW the button (the
163
+ cluster outranks it). Top/bottom sit a touch further out, left/right a touch closer. */
164
+ .rydr-ui-ld-lbl-top { grid-area: 1 / 2; align-self: end; text-align: center; margin-bottom: -14px; }
165
+ .rydr-ui-ld-lbl-bot { grid-area: 3 / 2; align-self: start; text-align: center; margin-top: -14px; }
166
+ .rydr-ui-ld-lbl-lft { grid-area: 2 / 1; justify-self: end; text-align: right; margin-right: -22px; }
167
+ .rydr-ui-ld-lbl-rgt { grid-area: 2 / 3; justify-self: start; text-align: left; margin-left: -22px; }
168
+ .rydr-ui-ld-lbl { position: relative; z-index: 1; }
169
+ /* short action verbs — keep them on one line so the side labels don't get squeezed into a wrap */
170
+ .rydr-ui-ld-lbl { white-space: nowrap; }
171
+ .rydr-ui-ld-lbl .rydr-ui-card-lbl { white-space: nowrap; display: block; -webkit-line-clamp: initial; }
172
+ /* a disabled action's label fades back (the pip carries its own inert grey via .rydr-ui-pip.disabled) */
173
+ .rydr-ui-ld-lbl-off { opacity: 0.4; transition: opacity 0.12s; }
174
+
175
+ @keyframes rydr-ui-pulse {
176
+ 0%,100% { transform: translateY(0);
177
+ box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 55%, #000), 0 7px 12px rgba(0,0,0,0.5),
178
+ 0 0 16px 1px rgba(0,0,0,0.6); }
179
+ 50% { transform: translateY(-5px);
180
+ box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 55%, #000), 0 7px 12px rgba(0,0,0,0.5),
181
+ 0 0 30px 7px rgba(0,0,0,0.6); } }
182
+ `;
183
+ //# sourceMappingURL=styles.js.map
package/dist/ui/styles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,IAAI,WAAW,GAAG,KAAK,CAAC;AAExB,MAAM,UAAU,SAAS;IACvB,IAAI,WAAW,IAAI,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;QAAC,WAAW,GAAG,IAAI,CAAC;QAAC,OAAO;IAAC,CAAC;IAC1F,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,aAAa,CAAC;IACzB,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,WAAW,GAAG,IAAI,CAAC;AACrB,CAAC;AAED,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+JX,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rydr/game-sdk",
3
- "version": "3.0.1",
3
+ "version": "3.1.1",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/bdefrenne/rydr-game-sdk.git"
@@ -19,6 +19,14 @@
19
19
  "./three": {
20
20
  "types": "./dist/three/index.d.ts",
21
21
  "import": "./dist/three/index.js"
22
+ },
23
+ "./ui": {
24
+ "types": "./dist/ui/index.d.ts",
25
+ "import": "./dist/ui/index.js"
26
+ },
27
+ "./ui/showcase": {
28
+ "types": "./dist/ui/showcase/index.d.ts",
29
+ "import": "./dist/ui/showcase/index.js"
22
30
  }
23
31
  },
24
32
  "main": "./dist/index.js",
@@ -32,6 +40,8 @@
32
40
  "dev": "tsc -w -p tsconfig.json",
33
41
  "clean": "rm -rf dist",
34
42
  "typecheck": "tsc --noEmit -p tsconfig.json",
43
+ "showcase": "npm run build && vite examples/ui",
44
+ "showcase:build": "npm run build && vite build examples/ui",
35
45
  "preversion": "node scripts/check-changelog.mjs",
36
46
  "version": "node scripts/sync-version.mjs && node scripts/release-changelog.mjs && git add src/protocol/version.ts CHANGELOG.md",
37
47
  "postversion": "git push --follow-tags"
@@ -47,6 +57,7 @@
47
57
  "devDependencies": {
48
58
  "@types/three": "^0.184.0",
49
59
  "three": "^0.184.0",
50
- "typescript": "^5.5.0"
60
+ "typescript": "^5.5.0",
61
+ "vite": "^6.0.0"
51
62
  }
52
63
  }