Initial I Want to Heal app

2026-06-17 20:04:36 -04:00
parent 3880db1b58
commit 3c90998a61
109 changed files with 32775 additions and 0 deletions
@@ -0,0 +1,102 @@
+import type { CSSProperties } from 'react'
+import {
+  bindingLabel,
+  compactBindingLabel,
+  type ControllerIconStyle,
+} from '../input'
+
+const FACE_BUTTONS: Record<ControllerIconStyle, Partial<Record<number, { color: string; label: string }>>> = {
+  xbox: {
+    0: { color: '#107c10', label: 'A' },
+    1: { color: '#d13438', label: 'B' },
+    2: { color: '#0078d4', label: 'X' },
+    3: { color: '#ffb900', label: 'Y' },
+  },
+  playstation: {
+    0: { color: '#0070d1', label: '×' },
+    1: { color: '#df0024', label: '○' },
+    2: { color: '#f27ab8', label: '□' },
+    3: { color: '#00a35a', label: '△' },
+  },
+  nintendo: {
+    0: { color: '#e60012', label: 'B' },
+    1: { color: '#e60012', label: 'A' },
+    2: { color: '#e60012', label: 'Y' },
+    3: { color: '#e60012', label: 'X' },
+  },
+}
+
+function faceButtonFor(binding: string, iconStyle: ControllerIconStyle) {
+  if (!binding.startsWith('Button')) return null
+  return FACE_BUTTONS[iconStyle][Number(binding.slice(6))] ?? null
+}
+
+function FaceIcon({
+  color,
+  iconStyle,
+  label,
+  title,
+}: {
+  color: string
+  iconStyle: ControllerIconStyle
+  label: string
+  title: string
+}) {
+  return (
+    <span
+      aria-label={title}
+      className={`controller-face-icon controller-face-${iconStyle}`}
+      role="img"
+      style={{ '--button-color': color } as CSSProperties}
+    >
+      {label}
+    </span>
+  )
+}
+
+export function ControllerBindingLabel({
+  binding,
+  compact = false,
+  iconStyle,
+}: {
+  binding: string
+  compact?: boolean
+  iconStyle: ControllerIconStyle
+}) {
+  const faceButton = faceButtonFor(binding, iconStyle)
+  const title = bindingLabel(binding, iconStyle)
+
+  if (faceButton) {
+    return (
+      <FaceIcon
+        color={faceButton.color}
+        iconStyle={iconStyle}
+        label={faceButton.label}
+        title={title}
+      />
+    )
+  }
+
+  return <>{compact ? compactBindingLabel(binding, iconStyle) : title}</>
+}
+
+export function ControllerStylePreview({ iconStyle }: { iconStyle: ControllerIconStyle }) {
+  return (
+    <span className="controller-style-preview" aria-hidden="true">
+      {[0, 1, 2, 3].map((button) => {
+        const faceButton = FACE_BUTTONS[iconStyle][button]
+        if (!faceButton) return null
+
+        return (
+          <FaceIcon
+            color={faceButton.color}
+            iconStyle={iconStyle}
+            key={button}
+            label={faceButton.label}
+            title=""
+          />
+        )
+      })}
+    </span>
+  )
+}