Initial commit

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

.github/workflows/deploy.yml

@@ -0,0 +1,49 @@
+name: Deploy to Github Pages
+on:
+  push:
+    branches: ["main"]
+  # Allow running this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Vite Build
+    steps:
+      - uses: actions/checkout@v4
+      - name: actions/configure-pages@v3
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "yarn"
+      - run: yarn --immutable
+
+      - name: Vite Build
+        run: yarn build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./dist
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
+

.github/workflows/status-checks.yml

@@ -0,0 +1,45 @@
+name: Status Checks
+on:
+  push:
+
+jobs:
+  biome:
+    runs-on: ubuntu-latest
+    name: Biome Lint
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "yarn"
+      - run: yarn --immutable
+
+      - name: Biome Lint/Format
+        run: yarn lint:ci
+  tsc:
+    runs-on: ubuntu-latest
+    name: Typescript
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "yarn"
+      - run: yarn --immutable
+
+      - name: Typescript
+        run: yarn typecheck
+  build:
+    runs-on: ubuntu-latest
+    name: Vite Build
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "yarn"
+      - run: yarn --immutable
+
+      - name: Vite Build
+        run: yarn build
+

.gitignore

@@ -0,0 +1,11 @@
+node_modules
+dist
+
+# yarn zero install
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.mise.toml

@@ -0,0 +1,2 @@
+[tools]
+node = "20.11"

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["biomejs.biome"]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.defaultFormatter": "biomejs.biome",
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "typescript.preferences.preferTypeOnlyAutoImports": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit",
+    "source.fixAll": "explicit"
+  }
+}

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

README.md

@@ -0,0 +1,32 @@
+# SMX Config - Web Edition
+
+This is an early WIP for a web-based config tool for StepManiaX stages using WebHID for communication and React for the UI.
+
+## Developing
+
+Recommend you install [mise](https://mise.jdx.dev/) to manage your NodeJS install.
+
+### First time setup
+
+Install the [Biome linter/formatter extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) in VS Code.
+
+```
+# set up nodejs
+$ mise install
+
+# install yarn
+$ npm i -g yarn
+```
+
+### Day-to-day dev work
+
+```
+# install/update local copies of npm dependencies
+$ yarn install
+
+# start the local live-reloading dev server
+$ yarn start
+
+# apply all auto-fixes to formatting, style, etc
+$ yarn lint --apply
+```

biome.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.6.2/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "lineWidth": 120
+  },
+  "files": {
+    "include": ["vite.config.ts", "sdk/**/*", "ui/**/*"]
+  }
+}

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="https://stepmaniax.com/img/smx_pad.png" />
+    <title>SMX Web Config Tool</title>
+    <link rel="stylesheet" href="./ui/styles.css" />
+    <script src="./ui/script.ts" defer type="module"></script>
+  </head>
+  <body>
+    <h1>SMX WebUSB</h1>
+
+    <button id="btn">Pick device...</button>
+    <button id="btnp1">Fetch P1 Config...</button>
+
+    <pre id="status"></pre>
+    <pre id="output"></pre>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "node16",
+    "target": "ESNext",
+    "checkJs": true,
+    "strict": true,
+    "lib": ["es6", "dom", "ESNext"],
+    "types": ["w3c-web-hid"]
+  },
+  "include": ["**/*"]
+}

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "smx-config-web",
+  "version": "0.1.0",
+  "description": "A template for HTML and CSS",
+  "type": "module",
+  "main": "index.html",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "lint": "biome check sdk ui",
+    "lint:ci": "biome ci sdk ui",
+    "preview": "vite preview",
+    "typecheck": "tsc"
+  },
+  "keywords": [
+    "html",
+    "css"
+  ],
+  "author": "Noah Manneschmidt <noah@manneschmidt.net>",
+  "license": "MIT",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "struct-buffer": "https://github.com/noahm/struct-buffer.git#commit=af2e9c9f0a42e7c16cfefb87cecb0f72228d085d"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.6.2",
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.22",
+    "@types/w3c-web-hid": "1.0.6",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6"
+  },
+  "packageManager": "yarn@4.1.1"
+}

sdk/api.ts

@@ -0,0 +1,19 @@
+const encoder = new TextEncoder();
+
+export const API_COMMAND = {
+  GET_DEVICE_INFO: encoder.encode("i")[0],
+  GET_CONFIG: encoder.encode("g")[0],
+  GET_CONFIG_V5: encoder.encode("G")[0],
+  WRITE_CONFIG: encoder.encode("w")[0],
+  WRITE_CONFIG_V5: encoder.encode("W")[0],
+  FACTORY_RESET: encoder.encode("f")[0],
+  SET_LIGHT_STRIP: encoder.encode("L")[0],
+  FORCE_RECALIBRATION: encoder.encode("C")[0],
+  GET_SENSOR_TEST_DATA: encoder.encode("y")[0],
+  SET_SERIAL_NUMBERS: encoder.encode("s")[0],
+  SET_PANEL_TEST_MODE: encoder.encode("t")[0],
+};
+
+export const SMX_USB_VENDOR_ID = 0x2341;
+export const SMX_USB_PRODUCT_ID = 0x8037;
+export const SMX_USB_PRODUCT_NAME = "StepManiaX";