@benev/tact 0.1.1 → 0.2.0

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 (109) hide show
  1. package/README.md +30 -16
  2. package/package.json +13 -12
  3. package/s/deck/deck.ts +1 -14
  4. package/s/deck/index.ts +1 -2
  5. package/s/deck/parts/db.ts +2 -3
  6. package/s/deck/views/bindings/view.ts +95 -0
  7. package/s/deck/views/overlay/view.ts +46 -0
  8. package/s/demo/game/parts/renderer.ts +4 -5
  9. package/s/demo/game/parts/state.ts +1 -2
  10. package/s/demo/main.bundle.ts +1 -4
  11. package/s/demo/ui/theater/styles.css.ts +1 -2
  12. package/s/demo/ui/theater/view.ts +47 -52
  13. package/s/demo/ui/theater/virtual/view.ts +10 -12
  14. package/s/index.html.ts +53 -44
  15. package/s/nubs/index.ts +3 -4
  16. package/s/nubs/lookpad/{component.ts → view.ts} +10 -16
  17. package/s/nubs/stick/{component.ts → view.ts} +27 -34
  18. package/s/nubs/vpad/{component.ts → view.ts} +25 -33
  19. package/s/utils/circular-clamp.ts +1 -2
  20. package/s/utils/gamepads.ts +2 -2
  21. package/x/core/devices/standard/stick.d.ts +2 -2
  22. package/x/deck/deck.d.ts +0 -7
  23. package/x/deck/deck.js +1 -9
  24. package/x/deck/deck.js.map +1 -1
  25. package/x/deck/index.d.ts +1 -2
  26. package/x/deck/index.js +1 -2
  27. package/x/deck/index.js.map +1 -1
  28. package/x/deck/parts/db.d.ts +3 -3
  29. package/x/deck/parts/db.js.map +1 -1
  30. package/x/deck/parts/overlay-visibility.d.ts +3 -3
  31. package/x/deck/views/bindings/style.css.js.map +1 -0
  32. package/x/deck/views/bindings/view.d.ts +2 -0
  33. package/x/deck/views/bindings/view.js +80 -0
  34. package/x/deck/views/bindings/view.js.map +1 -0
  35. package/x/deck/views/overlay/style.css.js.map +1 -0
  36. package/x/deck/views/overlay/view.d.ts +2 -0
  37. package/x/deck/views/overlay/view.js +40 -0
  38. package/x/deck/views/overlay/view.js.map +1 -0
  39. package/x/demo/game/parts/renderer.js +4 -4
  40. package/x/demo/game/parts/renderer.js.map +1 -1
  41. package/x/demo/game/parts/state.js +1 -1
  42. package/x/demo/game/parts/state.js.map +1 -1
  43. package/x/demo/main.bundle.js +1 -5
  44. package/x/demo/main.bundle.js.map +1 -1
  45. package/x/demo/main.bundle.min.js +242 -233
  46. package/x/demo/main.bundle.min.js.map +4 -4
  47. package/x/demo/ui/theater/styles.css.js +1 -1
  48. package/x/demo/ui/theater/view.d.ts +1 -367
  49. package/x/demo/ui/theater/view.js +27 -32
  50. package/x/demo/ui/theater/view.js.map +1 -1
  51. package/x/demo/ui/theater/virtual/view.d.ts +1 -1
  52. package/x/demo/ui/theater/virtual/view.js +6 -6
  53. package/x/demo/ui/theater/virtual/view.js.map +1 -1
  54. package/x/index.html +41 -125
  55. package/x/index.html.js +50 -39
  56. package/x/index.html.js.map +1 -1
  57. package/x/nubs/index.d.ts +3 -4
  58. package/x/nubs/index.js +3 -4
  59. package/x/nubs/index.js.map +1 -1
  60. package/x/nubs/lookpad/view.d.ts +1 -0
  61. package/x/nubs/lookpad/{component.js → view.js} +11 -14
  62. package/x/nubs/lookpad/view.js.map +1 -0
  63. package/x/nubs/stick/view.d.ts +2 -0
  64. package/x/nubs/stick/{component.js → view.js} +28 -34
  65. package/x/nubs/stick/view.js.map +1 -0
  66. package/x/nubs/vpad/view.d.ts +2 -0
  67. package/x/nubs/vpad/{component.js → view.js} +26 -32
  68. package/x/nubs/vpad/view.js.map +1 -0
  69. package/x/utils/circular-clamp.js +1 -1
  70. package/x/utils/circular-clamp.js.map +1 -1
  71. package/x/utils/gamepads.js +2 -2
  72. package/s/deck/components/components.ts +0 -22
  73. package/s/deck/components/deck-bindings/component.ts +0 -99
  74. package/s/deck/components/deck-overlay/component.ts +0 -51
  75. package/s/deck/components/framework.ts +0 -17
  76. package/s/nubs/components.ts +0 -14
  77. package/s/utils/types.ts +0 -19
  78. package/x/deck/components/components.d.ts +0 -14
  79. package/x/deck/components/components.js +0 -9
  80. package/x/deck/components/components.js.map +0 -1
  81. package/x/deck/components/deck-bindings/component.d.ts +0 -6
  82. package/x/deck/components/deck-bindings/component.js +0 -83
  83. package/x/deck/components/deck-bindings/component.js.map +0 -1
  84. package/x/deck/components/deck-bindings/style.css.js.map +0 -1
  85. package/x/deck/components/deck-overlay/component.d.ts +0 -6
  86. package/x/deck/components/deck-overlay/component.js +0 -44
  87. package/x/deck/components/deck-overlay/component.js.map +0 -1
  88. package/x/deck/components/deck-overlay/style.css.js.map +0 -1
  89. package/x/deck/components/framework.d.ts +0 -7
  90. package/x/deck/components/framework.js +0 -13
  91. package/x/deck/components/framework.js.map +0 -1
  92. package/x/nubs/components.d.ts +0 -9
  93. package/x/nubs/components.js +0 -11
  94. package/x/nubs/components.js.map +0 -1
  95. package/x/nubs/lookpad/component.d.ts +0 -4
  96. package/x/nubs/lookpad/component.js.map +0 -1
  97. package/x/nubs/stick/component.d.ts +0 -368
  98. package/x/nubs/stick/component.js.map +0 -1
  99. package/x/nubs/vpad/component.d.ts +0 -368
  100. package/x/nubs/vpad/component.js.map +0 -1
  101. package/x/utils/types.d.ts +0 -3
  102. package/x/utils/types.js +0 -3
  103. package/x/utils/types.js.map +0 -1
  104. /package/s/deck/{components/deck-bindings → views/bindings}/style.css.ts +0 -0
  105. /package/s/deck/{components/deck-overlay → views/overlay}/style.css.ts +0 -0
  106. /package/x/deck/{components/deck-bindings → views/bindings}/style.css.d.ts +0 -0
  107. /package/x/deck/{components/deck-bindings → views/bindings}/style.css.js +0 -0
  108. /package/x/deck/{components/deck-overlay → views/overlay}/style.css.d.ts +0 -0
  109. /package/x/deck/{components/deck-overlay → views/overlay}/style.css.js +0 -0
package/s/index.html.ts CHANGED
@@ -1,52 +1,61 @@
1
1
 
2
- import {ssg, html} from "@e280/scute"
2
+ import {template, html, dataSvgEmoji, socialCard} from "@e280/scute"
3
3
 
4
4
  const title = "@benev/tact"
5
5
  const domain = "tact.benevolent.games"
6
6
  const favicon = "/assets/b.png"
7
7
  const description = "keybindings and gamepad support for web games"
8
8
 
9
- export default ssg.page(import.meta.url, async orb => ({
10
- title,
11
- js: "demo/main.bundle.min.js",
12
- css: "demo/main.css",
13
- dark: true,
14
- favicon,
15
-
16
- socialCard: {
17
- title,
18
- description,
19
- themeColor: "#f2ea8e",
20
- siteName: domain,
21
- image: `https://${domain}${favicon}`,
22
- },
23
-
24
- body: html`
25
- <header>
26
- <h1>
27
- <strong>@benev/tact</strong>
28
- <small>v${orb.packageVersion()}</small>
29
- </h1>
30
- <div class=deets>
31
- <p><em>"from keypress to couch co-op"</em></p>
32
- <p>
33
- tact is a user input toolkit for the web. it's good at customizable keybindings, and multiple gamepad support.
34
- see <a href="https://github.com/benevolent-games/tact">github</a>,
35
- see <a href="https://benevolent.games/">benevolent.games</a>.
36
- </p>
37
- </div>
38
- </header>
39
-
40
- <demo-theater></demo-theater>
41
-
42
- <section>
43
- <h3>controls</h3>
44
- <ul>
45
- <li><strong>keyboard</strong> wasd, left-bracket, right-bracket, backslash.</li>
46
- <li><strong>gamepad</strong> thumbsticks, hold beta/gamma and press bumpers or dpad left/right.</li>
47
- <li><strong>virtual</strong> use your mouse to press the little buttons.</li>
48
- </ul>
49
- </section>
50
- `,
51
- }))
9
+ export default template(import.meta.url, async orb => html`
10
+ <!doctype html>
11
+ <html>
12
+ <head>
13
+ <title>${title}</title>
14
+
15
+ <meta charset="utf-8"/>
16
+ <meta name="viewport" content="width=device-width,initial-scale=1"/>
17
+ <meta name="darkreader-lock"/>
18
+ <style>@layer base{html{background:#000}}</style>
19
+
20
+ <link rel="icon" href="${dataSvgEmoji("🎮")}"/>
21
+ <link rel="stylesheet" href="${orb.hashurl("demo/main.css")}"/>
22
+ <script type="module" src="${orb.hashurl("demo/main.bundle.min.js")}"></script>
23
+
24
+ ${socialCard({
25
+ title,
26
+ description,
27
+ themeColor: "#f2ea8e",
28
+ siteName: domain,
29
+ image: `https://${domain}${favicon}`,
30
+ })}
31
+ </head>
32
+ <body>
33
+ <header>
34
+ <h1>
35
+ <strong>@benev/tact</strong>
36
+ <small>v${orb.packageVersion()}</small>
37
+ </h1>
38
+ <div class=deets>
39
+ <p><em>"from keypress to couch co-op"</em></p>
40
+ <p>
41
+ tact is a user input toolkit for the web. it's good at customizable keybindings, and multiple gamepad support.
42
+ see <a href="https://github.com/benevolent-games/tact">github</a>,
43
+ see <a href="https://benevolent.games/">benevolent.games</a>.
44
+ </p>
45
+ </div>
46
+ </header>
47
+
48
+ <div id=demo-theater></div>
49
+
50
+ <section>
51
+ <h3>controls</h3>
52
+ <ul>
53
+ <li><strong>keyboard</strong> wasd, left-bracket, right-bracket, backslash.</li>
54
+ <li><strong>gamepad</strong> thumbsticks, hold beta/gamma and press bumpers or dpad left/right.</li>
55
+ <li><strong>virtual</strong> use your mouse to press the little buttons.</li>
56
+ </ul>
57
+ </section>
58
+ </body>
59
+ </html>
60
+ `)
52
61
 
package/s/nubs/index.ts CHANGED
@@ -1,6 +1,5 @@
1
1
 
2
- export * from "./lookpad/component.js"
3
- export * from "./stick/component.js"
4
- export * from "./vpad/component.js"
5
- export * from "./components.js"
2
+ export * from "./lookpad/view.js"
3
+ export * from "./stick/view.js"
4
+ export * from "./vpad/view.js"
6
5
 
@@ -1,20 +1,21 @@
1
1
 
2
- import {dom, view} from "@e280/sly"
2
+ import {dom, shadow, useHost, useMount, useName, useSignal, useStyles} from "@e280/sly"
3
3
  import {styles} from "./styles.js"
4
4
 
5
- const NubLookpadView = view(use => () => {
6
- use.name("nub-lookpad")
7
- use.styles(styles)
5
+ export const NubLookpad = shadow(() => {
6
+ useName("nub-lookpad")
7
+ useStyles(styles)
8
+ const host = useHost()
8
9
 
9
- const $captured = use.signal<number | undefined>(undefined)
10
+ const $captured = useSignal<number | undefined>(undefined)
10
11
 
11
- use.mount(() => dom.events(use.element, {
12
+ useMount(() => dom.events(host, {
12
13
  pointerdown: (event: PointerEvent) => {
13
14
  event.preventDefault()
14
15
  if ($captured.value)
15
- use.element.releasePointerCapture($captured.value)
16
+ host.releasePointerCapture($captured.value)
16
17
 
17
- use.element.setPointerCapture(event.pointerId)
18
+ host.setPointerCapture(event.pointerId)
18
19
  $captured.value = event.pointerId
19
20
  // onPointerDrag(event)
20
21
  },
@@ -29,17 +30,10 @@ const NubLookpadView = view(use => () => {
29
30
  pointerup: (event: PointerEvent) => {
30
31
  event.preventDefault()
31
32
  if (event.pointerId === $captured.value) {
32
- use.element.releasePointerCapture($captured.value)
33
+ host.releasePointerCapture($captured.value)
33
34
  $captured.value = undefined
34
35
  // onPointerDrag(event)
35
36
  }
36
37
  },
37
38
  }))
38
39
  })
39
-
40
- export class NubLookpad extends (
41
- NubLookpadView
42
- .component()
43
- .props(() => [])
44
- ) {}
45
-
@@ -2,22 +2,23 @@
2
2
  import {html} from "lit"
3
3
  import {coalesce, nap} from "@e280/stz"
4
4
  import {Scalar, Vec2} from "@benev/math"
5
- import {BaseElement, cssReset, dom, view} from "@e280/sly"
5
+ import {cssReset, dom, shadow, useCss, useHost, useMount, useName, useOnce, useSignal} from "@e280/sly"
6
6
 
7
7
  import styleCss from "./style.css.js"
8
8
  import {circularClamp} from "../../utils/circular-clamp.js"
9
9
  import {StickDevice} from "../../core/devices/standard/stick.js"
10
10
 
11
- const NubStickView = view(use => ({$vector}: StickDevice) => {
12
- use.name("nub-stick")
13
- use.css(cssReset, styleCss)
11
+ export const NubStick = shadow(({$vector}: StickDevice) => {
12
+ useName("nub-stick")
13
+ useCss(cssReset, styleCss)
14
+ const host = useHost()
14
15
 
15
- const range = use.once(() => new Vec2(0.2, 0.8))
16
- const $captured = use.signal<number | undefined>(undefined)
16
+ const range = useOnce(() => new Vec2(0.2, 0.8))
17
+ const $captured = useSignal<number | undefined>(undefined)
17
18
 
18
- use.mount(() => {
19
+ useMount(() => {
19
20
  function recalc(event: PointerEvent) {
20
- const rect = use.element.getBoundingClientRect()
21
+ const rect = host.getBoundingClientRect()
21
22
  const vector = $vector.get()
22
23
  vector.x = Scalar.remap(event.clientX, rect.left, rect.right, -1, 1)
23
24
  vector.y = Scalar.remap(event.clientY, rect.top, rect.bottom, -1, 1)
@@ -34,7 +35,7 @@ const NubStickView = view(use => ({$vector}: StickDevice) => {
34
35
  // where our captured pointerup was clicking outside buttons
35
36
  nap(0).then(() => {
36
37
  if ($captured.value === undefined) return
37
- use.element.releasePointerCapture($captured.value)
38
+ host.releasePointerCapture($captured.value)
38
39
  $captured.value = undefined
39
40
  })
40
41
  }
@@ -50,11 +51,11 @@ const NubStickView = view(use => ({$vector}: StickDevice) => {
50
51
  }],
51
52
  }),
52
53
 
53
- dom.events(use.element, {
54
+ dom.events(host, {
54
55
  pointerdown: (event: PointerEvent) => {
55
56
  if ($captured.value === undefined) {
56
57
  $captured.value = event.pointerId
57
- use.element.setPointerCapture($captured.value)
58
+ host.setPointerCapture($captured.value)
58
59
  recalc(event)
59
60
  }
60
61
  },
@@ -83,33 +84,25 @@ const NubStickView = view(use => ({$vector}: StickDevice) => {
83
84
  }
84
85
 
85
86
  return html`
86
- <div class=frame>
87
- <div class=inner style="${innerstyle}"></div>
88
- </div>
87
+ <div class=frame>
88
+ <div class=inner style="${innerstyle}"></div>
89
+ </div>
89
90
 
90
- <div class=frame>
91
- <div class=outer style="${outerstyle}"></div>
92
- </div>
91
+ <div class=frame>
92
+ <div class=outer style="${outerstyle}"></div>
93
+ </div>
93
94
 
94
- <div class=frame>
95
- <div class=stickbase></div>
96
- </div>
95
+ <div class=frame>
96
+ <div class=stickbase></div>
97
+ </div>
97
98
 
98
- <div class=frame style="${framestyle(0.5)}">
99
- <div class=stickunder></div>
100
- </div>
99
+ <div class=frame style="${framestyle(0.5)}">
100
+ <div class=stickunder></div>
101
+ </div>
101
102
 
102
- <div class=frame style="${framestyle(1.0)}">
103
- <div class=stick></div>
104
- </div>
103
+ <div class=frame style="${framestyle(1.0)}">
104
+ <div class=stick></div>
105
+ </div>
105
106
  `
106
107
  })
107
108
 
108
- export class NubStick extends (
109
- NubStickView
110
- .component(class extends BaseElement {
111
- readonly device = new StickDevice()
112
- })
113
- .props(el => [el.device])
114
- ) {}
115
-
@@ -1,26 +1,27 @@
1
1
 
2
2
  import {html} from "lit"
3
- import {BaseElement, view} from "@e280/sly"
4
- import {ev, MapG} from "@e280/stz"
3
+ import {ev, GMap} from "@e280/stz"
4
+ import {shadow, useCss, useMount, useName, useOnce, useRendered, useShadow} from "@e280/sly"
5
5
 
6
6
  import stylesCss from "./styles.css.js"
7
7
 
8
- import {NubStick} from "../stick/component.js"
8
+ import {NubStick} from "../stick/view.js"
9
9
  import {GamepadInputs} from "./utils/gamepad-inputs.js"
10
10
  import {touchTracking} from "./utils/touch-tracking.js"
11
11
  import {VpadDevice} from "../../core/devices/standard/vpad.js"
12
12
  import {preventDefaultTouchShenanigans} from "./utils/prevent-default-touch-shenanigans.js"
13
13
 
14
- const NubVpadView = view(use => (device: VpadDevice) => {
15
- use.name("nub-vpad")
16
- use.css(stylesCss)
14
+ export const NubVpad = shadow((device: VpadDevice) => {
15
+ useName("nub-vpad")
16
+ useCss(stylesCss)
17
+ const shadowRoot = useShadow()
17
18
 
18
- const buttons = use.once(() => new Set<HTMLButtonElement>())
19
- const codes = use.once(() => new MapG<HTMLButtonElement, keyof GamepadInputs>())
19
+ const buttons = useOnce(() => new Set<HTMLButtonElement>())
20
+ const codes = useOnce(() => new GMap<HTMLButtonElement, keyof GamepadInputs>())
20
21
 
21
- use.rendered.then(() => {
22
+ useRendered().then(() => {
22
23
  const elements = Array.from(
23
- use.shadow.querySelectorAll<HTMLButtonElement>("button[x-code]")
24
+ shadowRoot.querySelectorAll<HTMLButtonElement>("button[x-code]")
24
25
  )
25
26
  for (const button of elements) {
26
27
  const code = button.getAttribute("x-code")
@@ -31,22 +32,22 @@ const NubVpadView = view(use => (device: VpadDevice) => {
31
32
  }
32
33
  })
33
34
 
34
- use.mount(() => preventDefaultTouchShenanigans())
35
+ useMount(() => preventDefaultTouchShenanigans())
35
36
 
36
- use.mount(() => touchTracking({
37
- target: use.shadow,
37
+ useMount(() => touchTracking({
38
+ target: shadowRoot,
38
39
  buttons,
39
- touchdown: button => {
40
+ touchdown: (button: HTMLButtonElement) => {
40
41
  const code = codes.require(button)
41
42
  device.setSample(code, 1)
42
43
  },
43
- touchup: button => {
44
+ touchup: (button: HTMLButtonElement) => {
44
45
  const code = codes.require(button)
45
46
  device.setSample(code, 0)
46
47
  },
47
48
  }))
48
49
 
49
- use.mount(() => ev(use.shadow, {
50
+ useMount(() => ev(shadowRoot, {
50
51
  contextmenu: (e: Event) => e.preventDefault(),
51
52
  }))
52
53
 
@@ -121,29 +122,20 @@ const NubVpadView = view(use => (device: VpadDevice) => {
121
122
  <div class="left side">
122
123
  ${renderLeftShoulder()}
123
124
  ${renderDPad()}
124
- ${NubStick.view
125
- .props(device.stickLeft)
126
- .attr("class", "stick")
127
- .render()}
125
+ ${NubStick.with({
126
+ props: [device.stickLeft],
127
+ attrs: {class: "stick"},
128
+ })}
128
129
  </div>
129
130
 
130
131
  <div class="right side">
131
132
  ${renderRightShoulder()}
132
133
  ${renderButtonPad()}
133
- ${NubStick.view
134
- .props(device.stickRight)
135
- .attr("class", "stick")
136
- .render()}
134
+ ${NubStick.with({
135
+ props: [device.stickRight],
136
+ attrs: {class: "stick"},
137
+ })}
137
138
  </div>
138
139
  </div>
139
140
  `
140
141
  })
141
-
142
- export class NubVpad extends (
143
- NubVpadView
144
- .component(class extends BaseElement {
145
- readonly device = new VpadDevice()
146
- })
147
- .props(el => [el.device])
148
- ) {}
149
-
@@ -10,6 +10,5 @@ export function circularClamp(vector: Xy, range: Vec2) {
10
10
  0, 1,
11
11
  true,
12
12
  )
13
- return v.normalize().multiplyBy(modifiedDistance)
13
+ return v.normalize().mulBy(modifiedDistance)
14
14
  }
15
-
@@ -1,5 +1,5 @@
1
1
 
2
- import {Disposable, ev, MapG} from "@e280/stz"
2
+ import {Disposable, ev, GMap} from "@e280/stz"
3
3
  import {evergreen} from "./evergreen.js"
4
4
 
5
5
  /** stable reference to a gamepad, has a getter to get the latest gamepad snapshot */
@@ -13,7 +13,7 @@ export class Pad {
13
13
 
14
14
  /** track gamepad lifecycles as they connect or disconnect */
15
15
  export function gamepads(on: (pad: Pad) => () => void) {
16
- const pads = new MapG<number, {pad: Pad, dispose: () => void}>()
16
+ const pads = new GMap<number, {pad: Pad, dispose: () => void}>()
17
17
  return ev(window, {
18
18
  gamepadconnected: ({gamepad}: GamepadEvent) => {
19
19
  const get = () => navigator.getGamepads().at(gamepad.index)
@@ -3,8 +3,8 @@ import { Sample } from "../types.js";
3
3
  import { Device } from "../device.js";
4
4
  export declare class StickDevice extends Device {
5
5
  channel: string;
6
- $vector: import("@e280/strata").SignalFn<Vec2>;
7
- $breakdown: import("@e280/strata").DerivedFn<{
6
+ $vector: import("@e280/strata").Signal<Vec2>;
7
+ $breakdown: import("@e280/strata").Derived<{
8
8
  up: number;
9
9
  down: number;
10
10
  left: number;
package/x/deck/deck.d.ts CHANGED
@@ -6,7 +6,6 @@ import { MetaBindings } from "../core/hub/types.js";
6
6
  import { DeviceSkins } from "./parts/device-skins/device-skin.js";
7
7
  import { OverlayVisibility } from "./parts/overlay-visibility.js";
8
8
  import { PrimaryDevice } from "../core/devices/standard/primary.js";
9
- import { DeckViews } from "./components/components.js";
10
9
  export type DeckOptions<B extends Bindings, MB extends MetaBindings = any> = {
11
10
  kv: Kv;
12
11
  bindings: B;
@@ -23,12 +22,6 @@ export declare class Deck<B extends Bindings, MB extends MetaBindings = any> {
23
22
  deviceSkins: DeviceSkins;
24
23
  primaryDevice: PrimaryDevice;
25
24
  overlayVisibility: OverlayVisibility;
26
- components: {
27
- DeckOverlay: typeof import("./index.js").DeckOverlay;
28
- DeckBindings: typeof import("./components/deck-bindings/component.js").DeckBindings;
29
- };
30
- views: DeckViews;
31
- registerComponents(): void;
32
25
  constructor(baseBindings: B, baseMetaBindings: MB, hub: Hub<B, MB>, db: Db);
33
26
  get catalog(): import("./index.js").Catalog;
34
27
  }
package/x/deck/deck.js CHANGED
@@ -1,5 +1,4 @@
1
- import { dom } from "@e280/sly";
2
- import { disposer, ob, range } from "@e280/stz";
1
+ import { disposer, range } from "@e280/stz";
3
2
  import { Db } from "./parts/db.js";
4
3
  import { Hub } from "../core/hub/hub.js";
5
4
  import { Port } from "../core/hub/port.js";
@@ -9,7 +8,6 @@ import { makeMetaBindings } from "../core/hub/meta-bindings.js";
9
8
  import { DeviceSkins } from "./parts/device-skins/device-skin.js";
10
9
  import { OverlayVisibility } from "./parts/overlay-visibility.js";
11
10
  import { PrimaryDevice } from "../core/devices/standard/primary.js";
12
- import { deckComponents } from "./components/components.js";
13
11
  export class Deck {
14
12
  baseBindings;
15
13
  baseMetaBindings;
@@ -30,12 +28,6 @@ export class Deck {
30
28
  deviceSkins = new DeviceSkins();
31
29
  primaryDevice = new PrimaryDevice();
32
30
  overlayVisibility;
33
- components = deckComponents(this);
34
- views = (ob(this.components)
35
- .map(c => (...a) => c.view(this, ...a)));
36
- registerComponents() {
37
- dom.register(this.components);
38
- }
39
31
  constructor(baseBindings, baseMetaBindings, hub, db) {
40
32
  this.baseBindings = baseBindings;
41
33
  this.baseMetaBindings = baseMetaBindings;
@@ -1 +1 @@
1
- {"version":3,"file":"deck.js","sourceRoot":"","sources":["../../s/deck/deck.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"deck.js","sourceRoot":"","sources":["../../s/deck/deck.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,WAAW,CAAA;AAEzC,OAAO,EAAC,EAAE,EAAC,MAAM,eAAe,CAAA;AAChC,OAAO,EAAC,GAAG,EAAC,MAAM,oBAAoB,CAAA;AACtC,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAA;AAExC,OAAO,EAAC,aAAa,EAAC,MAAM,2BAA2B,CAAA;AACvD,OAAO,EAAe,QAAQ,EAAC,MAAM,sBAAsB,CAAA;AAC3D,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAA;AAC7D,OAAO,EAAC,WAAW,EAAC,MAAM,qCAAqC,CAAA;AAC/D,OAAO,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAC,aAAa,EAAC,MAAM,qCAAqC,CAAA;AASjE,MAAM,OAAO,IAAI;IAyBP;IACA;IACA;IACA;IA3BT,MAAM,CAAC,KAAK,CAAC,IAAI,CAAoD,OAA2B;QAC/F,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAA;QAErD,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;aACpC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;aACpD,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;aAClE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,IAAI,CAAI,QAAa,CAAC,CAAC,CAAA;QAE7C,MAAM,GAAG,GAAG,IAAI,GAAG,CAClB,KAAK,EACL,EAAE,CAAC,QAAQ,EAAE,CAAC,YAAY;eACtB,OAAO,CAAC,YAAY;eACpB,gBAAgB,EAAE,CACtB,CAAA;QAED,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,OAAO,CAAC,YAAY,EAAE,GAAG,EAAE,EAAE,CAAC,CAAA;IACjE,CAAC;IAED,OAAO,GAAG,QAAQ,EAAE,CAAA;IACpB,WAAW,GAAG,IAAI,WAAW,EAAE,CAAA;IAC/B,aAAa,GAAG,IAAI,aAAa,EAAE,CAAA;IACnC,iBAAiB,CAAmB;IAEpC,YACS,YAAe,EACf,gBAAoB,EACpB,GAAe,EACf,EAAM;QAHN,iBAAY,GAAZ,YAAY,CAAG;QACf,qBAAgB,GAAhB,gBAAgB,CAAI;QACpB,QAAG,GAAH,GAAG,CAAY;QACf,OAAE,GAAF,EAAE,CAAI;QAGd,IAAI,CAAC,iBAAiB,GAAG,IAAI,iBAAiB,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;QAErE,sBAAsB;QACtB,IAAI,CAAC,OAAO,CAAC,QAAQ,CACpB,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;YACxD,IAAI,MAAM,CAAC,OAAO;gBACjB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAA;QAC/B,CAAC,CAAC,CACF,CAAA;IACF,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAA;IAC1B,CAAC;CACD"}
package/x/deck/index.d.ts CHANGED
@@ -5,6 +5,5 @@ export * from "./parts/db.js";
5
5
  export * from "./parts/local-storage-kv.js";
6
6
  export * from "./parts/merge-bindings.js";
7
7
  export * from "./parts/overlay-visibility.js";
8
- export * from "./components/deck-overlay/component.js";
9
- export * from "./components/deck-overlay/style.css.js";
8
+ export * from "./views/overlay/view.js";
10
9
  export * from "./deck.js";
package/x/deck/index.js CHANGED
@@ -5,7 +5,6 @@ export * from "./parts/db.js";
5
5
  export * from "./parts/local-storage-kv.js";
6
6
  export * from "./parts/merge-bindings.js";
7
7
  export * from "./parts/overlay-visibility.js";
8
- export * from "./components/deck-overlay/component.js";
9
- export * from "./components/deck-overlay/style.css.js";
8
+ export * from "./views/overlay/view.js";
10
9
  export * from "./deck.js";
11
10
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/deck/index.ts"],"names":[],"mappings":"AACA,cAAc,sCAAsC,CAAA;AACpD,cAAc,qCAAqC,CAAA;AACnD,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,+BAA+B,CAAA;AAE7C,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AAEtD,cAAc,WAAW,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/deck/index.ts"],"names":[],"mappings":"AACA,cAAc,sCAAsC,CAAA;AACpD,cAAc,qCAAqC,CAAA;AACnD,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,6BAA6B,CAAA;AAC3C,cAAc,2BAA2B,CAAA;AACzC,cAAc,+BAA+B,CAAA;AAE7C,cAAc,yBAAyB,CAAA;AAEvC,cAAc,WAAW,CAAA"}
@@ -1,14 +1,14 @@
1
- import { SignalFn } from "@e280/strata";
1
+ import { Signal } from "@e280/strata";
2
2
  import { Store } from "@e280/kv";
3
3
  import { Bindings } from "../../core/bindings/types.js";
4
4
  import { Catalog, CatalogData, Profile } from "./catalog.js";
5
5
  export declare class Db {
6
6
  #private;
7
7
  private store;
8
- $catalog: SignalFn<Catalog>;
8
+ $catalog: Signal<Catalog>;
9
9
  static load(store: Store<CatalogData>): Promise<Db>;
10
10
  dispose: import("@e280/stz").Disposer;
11
- constructor(store: Store<CatalogData>, $catalog: SignalFn<Catalog>);
11
+ constructor(store: Store<CatalogData>, $catalog: Signal<Catalog>);
12
12
  reload(): Promise<void>;
13
13
  save(catalog: Catalog): Promise<void>;
14
14
  createProfile(label: string, bindings: Bindings): Promise<Profile>;
@@ -1 +1 @@
1
- {"version":3,"file":"db.js","sourceRoot":"","sources":["../../../s/deck/parts/db.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,GAAG,EAAC,MAAM,WAAW,CAAA;AACvC,OAAO,EAAC,MAAM,EAAW,MAAM,cAAc,CAAA;AAC7C,OAAO,EAAC,aAAa,EAAQ,MAAM,UAAU,CAAA;AAG7C,OAAO,EAAC,OAAO,EAAuB,MAAM,cAAc,CAAA;AAE1D,MAAM,OAAO,EAAE;IASJ;IACD;IATT,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAyB;QAC1C,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;QACvD,OAAO,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IACjC,CAAC;IAED,OAAO,GAAG,QAAQ,EAAE,CAAA;IAEpB,YACU,KAAyB,EAC1B,QAA2B;QAD1B,UAAK,GAAL,KAAK,CAAoB;QAC1B,aAAQ,GAAR,QAAQ,CAAmB;QAGnC,IAAI,CAAC,OAAO,CAAC,QAAQ,CACpB,aAAa,CAAC,cAAc,CAAC,KAAK,IAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CACtD,CAAA;IACF,CAAC;IAED,KAAK,CAAC,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,OAAO,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAA;QACjD,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;IAC/B,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,OAAgB;QAC1B,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAA;QACtC,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC7B,CAAC;IAED,KAAK,CAAC,cAAc,CAAI,EAA2B;QAClD,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAA;QACvC,MAAM,MAAM,GAAG,EAAE,CAAC,OAAO,CAAC,CAAA;QAC1B,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAA;QACtC,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;QAC5B,OAAO,MAAM,CAAA;IACd,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,KAAa,EAAE,QAAkB;QACpD,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;YACpC,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,CAAA;YACvB,MAAM,OAAO,GAAY,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAC,CAAA;YAC9C,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;YACjC,OAAO,OAAO,CAAA;QACf,CAAC,CAAC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,EAAU;QAC7B,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;YACpC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QAC5B,CAAC,CAAC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,iBAAiB,CAAC,KAAa,EAAE,SAAwB;QAC9D,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;YACpC,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,SAAS,CAAA;QACxC,CAAC,CAAC,CAAA;IACH,CAAC;CACD"}
1
+ {"version":3,"file":"db.js","sourceRoot":"","sources":["../../../s/deck/parts/db.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,GAAG,EAAC,MAAM,WAAW,CAAA;AACvC,OAAO,EAAC,MAAM,EAAS,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAC,aAAa,EAAQ,MAAM,UAAU,CAAA;AAG7C,OAAO,EAAC,OAAO,EAAuB,MAAM,cAAc,CAAA;AAE1D,MAAM,OAAO,EAAE;IASJ;IACD;IATT,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,KAAyB;QAC1C,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;QACvD,OAAO,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IACjC,CAAC;IAED,OAAO,GAAG,QAAQ,EAAE,CAAA;IAEpB,YACU,KAAyB,EAC1B,QAAyB;QADxB,UAAK,GAAL,KAAK,CAAoB;QAC1B,aAAQ,GAAR,QAAQ,CAAiB;QAGjC,IAAI,CAAC,OAAO,CAAC,QAAQ,CACpB,aAAa,CAAC,cAAc,CAAC,KAAK,IAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CACtD,CAAA;IACF,CAAC;IAED,KAAK,CAAC,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,OAAO,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAA;QACjD,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;IAC/B,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,OAAgB;QAC1B,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAA;QACtC,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC7B,CAAC;IAED,KAAK,CAAC,cAAc,CAAI,EAA2B;QAClD,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAA;QACvC,MAAM,MAAM,GAAG,EAAE,CAAC,OAAO,CAAC,CAAA;QAC1B,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAA;QACtC,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;QAC5B,OAAO,MAAM,CAAA;IACd,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,KAAa,EAAE,QAAkB;QACpD,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;YACpC,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,CAAA;YACvB,MAAM,OAAO,GAAY,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAC,CAAA;YAC9C,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,CAAA;YACjC,OAAO,OAAO,CAAA;QACf,CAAC,CAAC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,EAAU;QAC7B,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;YACpC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;QAC5B,CAAC,CAAC,CAAA;IACH,CAAC;IAED,KAAK,CAAC,iBAAiB,CAAC,KAAa,EAAE,SAAwB;QAC9D,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE;YACpC,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,SAAS,CAAA;QACxC,CAAC,CAAC,CAAA;IACH,CAAC;CACD"}
@@ -7,11 +7,11 @@ export declare class OverlayVisibility {
7
7
  auto: boolean;
8
8
  dispose: import("@e280/stz").Disposer;
9
9
  /** manual override for whether the ports view should be visible */
10
- readonly $manual: import("@e280/strata").SignalFn<boolean>;
10
+ readonly $manual: import("@e280/strata").Signal<boolean>;
11
11
  /** derived signal about whether the ports view should be visible */
12
- readonly $visible: import("@e280/strata").DerivedFn<boolean>;
12
+ readonly $visible: import("@e280/strata").Derived<boolean>;
13
13
  /** whether or not to show labels in the overlay ui */
14
- readonly $showLabels: import("@e280/strata").SignalFn<boolean>;
14
+ readonly $showLabels: import("@e280/strata").Signal<boolean>;
15
15
  constructor(hub: Hub<any>, deviceSkins?: DeviceSkins);
16
16
  bump(): Promise<void>;
17
17
  toggle(active?: boolean): Promise<boolean>;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/deck/views/bindings/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;CAEjB,CAAA"}
@@ -0,0 +1,2 @@
1
+ import { Deck } from "../../deck.js";
2
+ export declare const DeckBindings: import("@e280/sly").ShadowView<[deck: Deck<any, any>]>;
@@ -0,0 +1,80 @@
1
+ import { html } from "lit";
2
+ import { bytename } from "@e280/stz";
3
+ import { cssReset, shadow, useCss, useName, useSignal } from "@e280/sly";
4
+ import styleCss from "./style.css.js";
5
+ export const DeckBindings = shadow((deck) => {
6
+ useCss(cssReset, styleCss);
7
+ useName("deck-bindings");
8
+ const { db, hub } = deck;
9
+ const catalog = db.$catalog();
10
+ const defaultProfile = { id: "default", label: "default", bindings: deck.baseBindings };
11
+ const allProfiles = [defaultProfile, ...catalog.profiles.values()];
12
+ const $selectedProfileId = useSignal("default");
13
+ const profile = db.$catalog().getProfile($selectedProfileId()) ?? defaultProfile;
14
+ function renderPort(_port, index) {
15
+ const portProfile = catalog.getProfileForPort(index) ?? defaultProfile;
16
+ return html `
17
+ <div class=port>
18
+ <span>port ${index + 1}</span>
19
+ <select>
20
+ ${allProfiles.map(profile => html `
21
+ <option
22
+ data-id="${profile.id}"
23
+ ?selected="${profile.id === portProfile.id}">
24
+ ${profile.label}
25
+ </option>
26
+ `)}
27
+ </select>
28
+ </div>
29
+ `;
30
+ }
31
+ function renderBindingBracket(entry) {
32
+ const [mode, bracket] = entry;
33
+ return html `
34
+ <div class=bracket>
35
+ <strong class=mode>${mode}</strong>
36
+ <div>${Object.entries(bracket).map(renderBinds)}</div>
37
+ </div>
38
+ `;
39
+ }
40
+ function renderBinds([action, _atom]) {
41
+ return html `
42
+ <div class=bind>
43
+ <span class=action>${action}</span>
44
+ </div>
45
+ `;
46
+ }
47
+ const clickClone = async () => {
48
+ const { bindings } = profile;
49
+ const label = bytename.random(4);
50
+ const p = await db.createProfile(label, bindings);
51
+ $selectedProfileId(p.id);
52
+ };
53
+ const deleteProfile = (id) => async () => {
54
+ await db.deleteProfile(id);
55
+ };
56
+ const onSelected = (event) => {
57
+ const select = event.target;
58
+ const id = select.value;
59
+ $selectedProfileId(id);
60
+ };
61
+ return html `
62
+ <div class=portlist>
63
+ ${hub.ports.map(renderPort)}
64
+ </div>
65
+
66
+ <div class=bindable>
67
+ <select @input="${onSelected}">
68
+ ${allProfiles.map(p => html `
69
+ <option value="${p.id}" ?selected="${p.id === profile.id}">${p.label}</option>
70
+ `)}
71
+ </select>
72
+ <button @click="${clickClone}">clone</button>
73
+ <button ?disabled="${profile.id === defaultProfile.id}" @click="${deleteProfile(profile.id)}">delete</button>
74
+ <div class=bindings>
75
+ ${Object.entries(profile.bindings).map(renderBindingBracket)}
76
+ </div>
77
+ </div>
78
+ `;
79
+ });
80
+ //# sourceMappingURL=view.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"view.js","sourceRoot":"","sources":["../../../../s/deck/views/bindings/view.ts"],"names":[],"mappings":"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"}