├── .gitignore
├── README.md
├── dolphin
    ├── index.js
    ├── package.json
    └── pnpm-lock.yaml
├── img
    ├── device.png
    └── presenter.png
├── overlay
    ├── App.jsx
    ├── app.js
    ├── controller.svg
    ├── index.html
    ├── package.json
    ├── pnpm-lock.yaml
    └── wii-overlay.svg
├── server
    ├── index.js
    ├── package.json
    └── pnpm-lock.yaml
└── web
    ├── App.jsx
    ├── Pointer.jsx
    ├── app.css
    ├── app.js
    ├── icons.jsx
    ├── index.html
    ├── package.json
    ├── pnpm-lock.yaml
    └── wiimote.svg


/.gitignore:
--------------------------------------------------------------------------------
 1 | .zsign_cache
 2 | .parcel-cache
 3 | __pycache__
 4 | pnpm-debug.log
 5 | dist
 6 | .cache
 7 | .tern-port
 8 | config.json
 9 | package-lock.json
10 | README.html
11 | *~
12 | \#*\#
13 | node_modules
14 | yarn-error.log
15 | npm-error.log
16 | /.vscode
17 | /.idea
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Webii
 2 | A system allowing anyone to enjoy zero-contact Wii with their friends!
 3 | 
 4 | <img src="./img/device.png" width="350" alt="Cellphone showing a Wii remote" />
 5 | 
 6 | ## Setup
 7 | 
 8 | ### Build the web interface
 9 | 
10 | 1. Install dependencies:
11 | 
12 | ```
13 | cd web
14 | pnpm i --shamefully-hoist
15 | ```
16 | 
17 | 2. Create `config.json` with your server URL:
18 | 
19 | ```json
20 | {
21 |   "server": "ws://localhost:5454"
22 | }
23 | ```
24 | 
25 | 3. Build the project
26 | 
27 | ```bash
28 | node_modules/.bin/parcel build index.html
29 | ```
30 | 
31 | ### Run the dispatch server
32 | 
33 | 1. Install dependencies:
34 | 
35 | ```bash
36 | cd server
37 | pnpm i
38 | ```
39 | 
40 | 2. Create `config.json` with the server port:
41 | 
42 | ```json
43 | {
44 |   "port": 5454
45 | }
46 | ```
47 | 
48 | 3. Run the server:
49 | 
50 | ```
51 | node index.js
52 | ```
53 | 
54 | ### Run the Dolphin server
55 | 
56 | 1. Install dependencies:
57 | 
58 | ```bash
59 | cd dolphin
60 | pnpm i
61 | ```
62 | 
63 | 2. Create `config.json` with your server URL:
64 | 
65 | ```json
66 | {
67 |   "server": "ws://localhost:5454"
68 | }
69 | ```
70 | 
71 | 3. Run the server:
72 | 
73 | ```bash
74 | node index.js
75 | ```
76 | 
77 | ## Setting up Dolphin
78 | 1. With Dolphin, connect to the DSU server in Dolphin in `Controls` > `Alternate Input Sources`. Tick the `Enable` box and add the server (should be `127.0.0.1:26760`).
79 | 2. For every Wii remote in the list, select `Emulated Wii Remote`
80 | 3. Click `Configure` on `Wii Remote 1`
81 | 4. Select controller 0 of the DSU server in the dropdown in the top-left
82 | 5. Click every button in the list and bind it by pushing the corresponding button on your mobile device
83 | 6. Make sure you have `None` selected for `Extension`
84 | 7. Open the `Motion Input` tab
85 | 8. Right click every empty button and select the corresponding input from the list. This is a long manual process.
86 | 9. At the top right, type a name on the `Profile` dropdown and click `Save`
87 | 10. Close the configuration window
88 | 11. Open Wii Remotes 2-4, select your saved profile, click `Load`, and select the correct numbered DSUClient input device in the top-left
89 | 
90 | ## Using
91 | Once you have the Dolphin server running, users can open the web interface and type the pin that was shown to gain control of a Wii remote.
92 | 
93 | ## Future ideas
94 | At some point, I'd like to explore having the client use WebRTC for message passing instead of WebSockets for reduced latency, but the current WebSocket approach was chosen due to WebRTC sometimes being blocked by some corporate firewalls.
95 | 
96 | ![Display showing a QR code and Wii sports playing](./img/presenter.png)
97 | 


--------------------------------------------------------------------------------
/dolphin/index.js:
--------------------------------------------------------------------------------
  1 | const WebSocket = require("ws");
  2 | const fs = require("fs");
  3 | const crc32 = require("crc/lib/crc32");
  4 | const long = require("long");
  5 | const dgram = require("dgram");
  6 | 
  7 | const config = JSON.parse(fs.readFileSync("./config.json", "utf8"));
  8 | 
  9 | const wss = new WebSocket.Server({
 10 |   port: config.localPort,
 11 |   server: "127.0.0.1",
 12 | });
 13 | const clients = new Set();
 14 | wss.on("connection", (client) => {
 15 |   if (pin) {
 16 |     clients.add(client);
 17 |     send(
 18 |       "hello",
 19 |       {
 20 |         pin,
 21 |         players: Object.keys(players),
 22 |       },
 23 |       client
 24 |     );
 25 |     client.on("close", () => {
 26 |       clients.delete(client);
 27 |     });
 28 |   } else {
 29 |     console.log(
 30 |       "Got a connection from overlay, but dropping it since we aren't ready yet"
 31 |     );
 32 |     client.close();
 33 |   }
 34 | });
 35 | const ws = new WebSocket(config.server);
 36 | 
 37 | function broadcast(op, data) {
 38 |   for (const client of clients) {
 39 |     try {
 40 |       send(op, data, client);
 41 |     } catch (err) {
 42 |       console.warn("Issue broadcasting, termianting client");
 43 |       client.terminate();
 44 |     }
 45 |   }
 46 | }
 47 | function send(op, data, client) {
 48 |   (client || ws).send(
 49 |     JSON.stringify({
 50 |       op,
 51 |       d: data,
 52 |     })
 53 |   );
 54 | }
 55 | 
 56 | ws.on("open", () => {
 57 |   send("hello", {
 58 |     type: "dolphin",
 59 |   });
 60 | });
 61 | ws.on("message", (frame) => {
 62 |   const data = JSON.parse(frame);
 63 |   HANDLERS[data.op](data.d);
 64 | });
 65 | 
 66 | const players = {};
 67 | let seq = 0;
 68 | 
 69 | const reporting = new Map();
 70 | 
 71 | function generate(playerId) {
 72 |   const connection = reporting.get(playerId);
 73 |   if (!connection) {
 74 |     console.log("No connection for " + playerId);
 75 |     return;
 76 |   }
 77 |   const packet = Buffer.alloc(80);
 78 |   packet[0] = playerId;
 79 |   packet[1] = 2;
 80 |   packet[2] = 2;
 81 |   packet[3] = 2;
 82 |   packet[10] = 0x05;
 83 |   // Outgoing packet
 84 |   packet[11] = 1;
 85 |   packet.writeUInt32LE(seq++, 12);
 86 |   const player = players[playerId];
 87 |   if (!player) {
 88 |     // console.log("No player", playerId);
 89 |     return;
 90 |   }
 91 |   const buttons = player.buttons;
 92 |   const axes = player.axes;
 93 |   packet[16] =
 94 |     buttons.start |
 95 |     (buttons.l3 << 1) |
 96 |     (buttons.r3 << 2) |
 97 |     (buttons.select << 3) |
 98 |     (buttons.up << 4) |
 99 |     (buttons.right << 5) |
100 |     (buttons.down << 6) |
101 |     (buttons.left << 7);
102 |   packet[17] =
103 |     buttons.l2 |
104 |     (buttons.r2 << 1) |
105 |     (buttons.l1 << 2) |
106 |     (buttons.r1 << 3) |
107 |     (buttons.one << 4) |
108 |     (buttons.a << 5) |
109 |     (buttons.b << 6) |
110 |     (buttons.two << 7);
111 | 
112 |   // dpad
113 |   packet[24] = buttons.left ? 255 : 0;
114 |   packet[25] = buttons.down ? 255 : 0;
115 |   packet[26] = buttons.right ? 255 : 0;
116 |   packet[27] = buttons.up ? 255 : 0;
117 |   // buttons
118 |   packet[28] = buttons.one ? 255 : 0;
119 |   packet[29] = buttons.b ? 255 : 0;
120 |   packet[30] = buttons.a ? 255 : 0;
121 |   packet[31] = buttons.two ? 255 : 0;
122 | 
123 |   // IR
124 |   packet[36] = player.point.hidden;
125 |   packet[37] = 1;
126 |   packet.writeUInt16LE(player.point.x, 38);
127 |   packet.writeUInt16LE(player.point.x, 40);
128 |   // Cursed, steals Left X / Left Y
129 |   packet[20] = player.point.distance;
130 |   packet[21] = player.point.hidden;
131 |   // // IR
132 |   // console.log(player.point);
133 |   // packet.writeFloatLE(player.point.x, 80);
134 |   // packet.writeFloatLE(player.point.y, 84);
135 |   // packet[88] = player.point.hidden ? 255 : 0;
136 |   // packet.writeFloatLE(player.point.distance, 89);
137 | 
138 |   // Motion timestamp
139 |   if (player.timestamp) {
140 |     packet.writeUInt32LE(player.timestamp.low, 48);
141 |     packet.writeUInt32LE(player.timestamp.high, 52);
142 |   }
143 | 
144 |   if (axes.accelerometer) {
145 |     packet.writeFloatLE(axes.accelerometer.x, 56);
146 |     packet.writeFloatLE(axes.accelerometer.y, 60);
147 |     packet.writeFloatLE(axes.accelerometer.z, 64);
148 |   }
149 | 
150 |   if (axes.gyroscope) {
151 |     packet.writeFloatLE(axes.gyroscope.x, 68); // pitch
152 |     packet.writeFloatLE(axes.gyroscope.y, 72); // yaw
153 |     packet.writeFloatLE(axes.gyroscope.z, 76); // roll
154 |   }
155 | 
156 |   const packed = pack(0x100002, packet);
157 |   // console.log(" T:PadInfo", playerId);
158 |   // Send twice for crc reasons?
159 |   server.send(packed, 0, packed.length, connection.port, connection.address);
160 |   server.send(packed, 0, packed.length, connection.port, connection.address);
161 | }
162 | 
163 | setInterval(() => {
164 |   for (const playerId of reporting.keys()) {
165 |     if (players[playerId]) {
166 |       generate(playerId);
167 |     }
168 |   }
169 | }, 250);
170 | 
171 | let pin = null;
172 | const HANDLERS = {
173 |   hello(data) {
174 |     pin = data.pin;
175 |     console.log("We have pin " + data.pin);
176 |   },
177 |   connect(data) {
178 |     players[data.player] = {
179 |       buttons: {},
180 |       axes: {},
181 |       timestamp: null,
182 |       point: {x: 0, y: 0, hidden: true, distance: 0},
183 |     };
184 |     broadcast("connect", {player: data.player});
185 |     console.log(
186 |       `Controller ${data.player} is now connected by client ${data.clientId}`
187 |     );
188 |   },
189 |   disconnect(data) {
190 |     delete players[data.player];
191 |     broadcast("disconnect", {player: data.player});
192 |     console.log(
193 |       `Controller ${data.player} has been removed by client ${data.clientId}`
194 |     );
195 |   },
196 |   button(data) {
197 |     players[data.player].buttons[data.button] = data.state;
198 |     console.log(
199 |       `Controller ${data.player}'s ${data.button} is now ${data.state}`
200 |     );
201 |     generate(data.player);
202 |   },
203 |   stick(data) {
204 |     if (data.axis == "accelerometer") {
205 |       players[data.player].timestamp = long.fromNumber(data.t, true);
206 |     }
207 |     players[data.player].axes[data.axis] = {x: data.x, y: data.y, z: data.z};
208 |   },
209 |   ir(data) {
210 |     console.log(data, "ir");
211 |     if (data.x && data.y) {
212 |       players[data.player].point = {
213 |         x: data.x,
214 |         y: data.y,
215 |         distance: data.z,
216 |         hidden: false,
217 |       };
218 |     } else {
219 |       players[data.player].point.hidden = true;
220 |     }
221 |   },
222 | };
223 | 
224 | const serverId = Math.floor(Math.random() * Math.pow(2, 32));
225 | 
226 | function pack(type, content) {
227 |   const length = content.length;
228 |   // Header
229 |   const buffer = Buffer.alloc(20);
230 |   // magic
231 |   buffer.write("DSUS", 0, 4);
232 |   // protocol version
233 |   buffer.writeUInt16LE(1001, 4);
234 |   // Length (+4 is event type)
235 |   buffer.writeUInt16LE(length + 4, 6);
236 |   // CRC32
237 |   // (must be left blank because of CRC)
238 |   // Server ID
239 |   buffer.writeUInt32LE(serverId, 12);
240 |   // event type
241 |   buffer.writeUInt32LE(type, 16);
242 | 
243 |   const result = Buffer.concat([buffer, content], length + 20);
244 |   // CRC
245 |   const crc = crc32(result);
246 |   result.writeUInt32LE(crc, 8);
247 |   return result;
248 | }
249 | 
250 | const server = dgram.createSocket("udp4");
251 | server.bind(26760, "0.0.0.0");
252 | server.on("message", (msg, rinfo) => {
253 |   const type = msg.readUInt32LE(16, 16);
254 |   // console.log("Got a message:", type.toString(16));
255 |   switch (type) {
256 |     case 0x100001: {
257 |       // console.log("R :PortInfo");
258 |       const count = msg.readInt32LE(20);
259 |       // console.log("Got a request for info on device count:", count);
260 |       let last = null;
261 |       for (let i = 0; i < count; ++i) {
262 |         const controllerData = Buffer.alloc(12);
263 |         const controller = msg[24 + i];
264 |         const player = players[controller];
265 |         controllerData[0] = controller; // pad id
266 |         controllerData[1] = player ? 2 : 0; // State (connected)
267 | 
268 |         controllerData[2] = 2; // Full gyro
269 |         controllerData[3] = player ? 2 : 0; // connection = bluetooth
270 |         // Battery
271 |         controllerData[10] = 0x05;
272 |         const packed = pack(0x100001, controllerData);
273 |         // console.log(" T:PortInfo", controller);
274 |         server.send(packed, 0, packed.length, rinfo.port, rinfo.address);
275 |       }
276 |       break;
277 |     }
278 |     case 0x100002: {
279 |       // console.log("R :PadInfo");
280 |       if (msg[20] == 0) {
281 |         for (let i = 0; i < 4; ++i) {
282 |           reporting.set(i, rinfo);
283 |         }
284 |       } else if (msg[20] == 1) {
285 |         reporting.set(msg[21], rinfo);
286 |       }
287 | 
288 |       for (const playerId of reporting.keys()) {
289 |         generate(playerId);
290 |       }
291 |       break;
292 |     }
293 |   }
294 | });
295 | 
296 | async function fifoSend(player, data) {
297 |   console.log("Sending", data, "along fifo");
298 |   await fs.promises.appendFile(config.socket + "-" + player, data + "\n");
299 | }
300 | 


--------------------------------------------------------------------------------
/dolphin/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webii-dolphin",
 3 |   "version": "1.0.0",
 4 |   "description": "Client which receives input events from devices and sends them to the Dolphin emulator",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+ssh://git@github.com/mstrodl/webii.git"
12 |   },
13 |   "keywords": [
14 |     "dolphin-emu",
15 |     "dolphin",
16 |     "controller"
17 |   ],
18 |   "author": "Mary Strodl <ipadlover8322@gmail.com>",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/mstrodl/webii/issues"
22 |   },
23 |   "homepage": "https://github.com/mstrodl/webii#readme",
24 |   "dependencies": {
25 |     "crc": "^3.8.0",
26 |     "long": "^4.0.0",
27 |     "ws": "^7.3.1"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/dolphin/pnpm-lock.yaml:
--------------------------------------------------------------------------------
 1 | dependencies:
 2 |   crc: 3.8.0
 3 |   long: 4.0.0
 4 |   ws: 7.3.1
 5 | lockfileVersion: 5.1
 6 | packages:
 7 |   /base64-js/1.3.1:
 8 |     dev: false
 9 |     resolution:
10 |       integrity: sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
11 |   /buffer/5.6.0:
12 |     dependencies:
13 |       base64-js: 1.3.1
14 |       ieee754: 1.1.13
15 |     dev: false
16 |     resolution:
17 |       integrity: sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
18 |   /crc/3.8.0:
19 |     dependencies:
20 |       buffer: 5.6.0
21 |     dev: false
22 |     resolution:
23 |       integrity: sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==
24 |   /ieee754/1.1.13:
25 |     dev: false
26 |     resolution:
27 |       integrity: sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
28 |   /long/4.0.0:
29 |     dev: false
30 |     resolution:
31 |       integrity: sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
32 |   /ws/7.3.1:
33 |     dev: false
34 |     engines:
35 |       node: '>=8.3.0'
36 |     peerDependencies:
37 |       bufferutil: ^4.0.1
38 |       utf-8-validate: ^5.0.2
39 |     peerDependenciesMeta:
40 |       bufferutil:
41 |         optional: true
42 |       utf-8-validate:
43 |         optional: true
44 |     resolution:
45 |       integrity: sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==
46 | specifiers:
47 |   crc: ^3.8.0
48 |   long: ^4.0.0
49 |   ws: ^7.3.1
50 | 


--------------------------------------------------------------------------------
/img/device.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mstrodl/webii/6cb2bfa531b69a67ed625f93387ba43a18c0ef9f/img/device.png


--------------------------------------------------------------------------------
/img/presenter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mstrodl/webii/6cb2bfa531b69a67ed625f93387ba43a18c0ef9f/img/presenter.png


--------------------------------------------------------------------------------
/overlay/App.jsx:
--------------------------------------------------------------------------------
  1 | import React, {useEffect, useState} from "react";
  2 | import wiimoteSvg from "url:./controller.svg";
  3 | import QRCode from "qrcode.react";
  4 | 
  5 | export function App() {
  6 |   const [players, setPlayers] = useState({});
  7 |   const [pin, setPin] = useState(null);
  8 | 
  9 |   useEffect(() => {
 10 |     let ws;
 11 |     function connect() {
 12 |       console.log("Connecting...");
 13 |       setPlayers({});
 14 |       setPin(null);
 15 |       ws = new WebSocket("ws://localhost:9999");
 16 |       ws.addEventListener("message", (frame) => {
 17 |         const msg = JSON.parse(frame.data);
 18 |         if (msg.op == "hello") {
 19 |           const players = {};
 20 |           for (const key of msg.d.players) {
 21 |             players[key] = true;
 22 |           }
 23 |           setPlayers(players);
 24 |           setPin(msg.d.pin);
 25 |         } else if (msg.op == "connect") {
 26 |           setPlayers((players) =>
 27 |             Object.assign({}, players, {[msg.d.player]: true})
 28 |           );
 29 |         } else if (msg.op == "disconnect") {
 30 |           setPlayers((players) =>
 31 |             Object.assign({}, players, {[msg.d.player]: false})
 32 |           );
 33 |         }
 34 |       });
 35 | 
 36 |       ws.addEventListener("close", () => {
 37 |         if (ws) {
 38 |           ws = null;
 39 |           setTimeout(() => {
 40 |             console.log("Timeout hit");
 41 |             connect();
 42 |           }, 500);
 43 |         }
 44 |       });
 45 |       ws.addEventListener("error", () => {
 46 |         if (ws) {
 47 |           ws = null;
 48 |           setTimeout(() => {
 49 |             console.log("Timeout hit on error");
 50 |             connect();
 51 |           }, 500);
 52 |         }
 53 |       });
 54 |     }
 55 |     connect();
 56 | 
 57 |     return () => {
 58 |       if (ws) {
 59 |         ws = null;
 60 |         const old = ws;
 61 |         old.close();
 62 |       }
 63 |     };
 64 |   }, []);
 65 | 
 66 |   return (
 67 |     <div className="overlay">
 68 |       <svg
 69 |         width="1280"
 70 |         height="720"
 71 |         version="1.1"
 72 |         viewBox="0 0 338.67 190.5"
 73 |         xmlns="http://www.w3.org/2000/svg"
 74 |       >
 75 |         <rect width="338.67" height="190.5" fill="#34beec" />
 76 |         {/*<rect x="56.802" y="31.951" width="281.86" height="158.55" />*/}
 77 |         <image
 78 |           x="9.972"
 79 |           y="65.248"
 80 |           width="14.052"
 81 |           height="57.813"
 82 |           opacity={players[0] ? undefined : 0.4}
 83 |           preserveAspectRatio="none"
 84 |           href={wiimoteSvg}
 85 |         />
 86 |         <image
 87 |           x="32.585"
 88 |           y="65.248"
 89 |           width="14.052"
 90 |           height="57.813"
 91 |           opacity={players[1] ? undefined : 0.4}
 92 |           preserveAspectRatio="none"
 93 |           href={wiimoteSvg}
 94 |         />
 95 |         <image
 96 |           x="9.972"
 97 |           y="128.56"
 98 |           width="14.052"
 99 |           height="57.813"
100 |           opacity={players[2] ? undefined : 0.4}
101 |           preserveAspectRatio="none"
102 |           href={wiimoteSvg}
103 |         />
104 |         <image
105 |           x="32.585"
106 |           y="128.56"
107 |           width="14.052"
108 |           height="57.813"
109 |           opacity={players[3] ? undefined : 0.4}
110 |           preserveAspectRatio="none"
111 |           href={wiimoteSvg}
112 |         />
113 |         <text
114 |           transform="translate(63.143 -1.5875)"
115 |           fill="#ffffff"
116 |           fontFamily="sans-serif"
117 |           fontSize="19.756px"
118 |           letterSpacing="0px"
119 |           wordSpacing="0px"
120 |           style={{
121 |             lineHeight: 1.25,
122 |             shapeInside: "url(#rect2192)",
123 |             whiteSpace: "pre",
124 |           }}
125 |         >
126 |           <tspan x="46.863281" y="25.745758">
127 |             <tspan fill="#ffffff" fontFamily="Roboto" fontWeight="500">
128 |               The Contactless Wii
129 |             </tspan>
130 |           </tspan>
131 |         </text>
132 |         <g
133 |           x="4.9531"
134 |           y="13.328"
135 |           width="46.702"
136 |           height="46.702"
137 |           className="qr"
138 |           transform="translate(4.9531, 13.328)"
139 |         >
140 |           {pin && (
141 |             <QRCode
142 |               value={`https://w.c7.pm/${pin}`}
143 |               renderAs="svg"
144 |               size={46.702}
145 |               imageSettings={{x: 4.9531, y: 13.328}}
146 |               includeMargin={true}
147 |             />
148 |           )}
149 |         </g>
150 |         <text
151 |           transform="translate(-3.2455 .99487)"
152 |           fill="#000000"
153 |           fontFamily="sans-serif"
154 |           fontSize="9.8778px"
155 |           letterSpacing="0px"
156 |           wordSpacing="0px"
157 |           style={{
158 |             lineHeight: 1.25,
159 |             shapeInside: "url(#rect2638)",
160 |             whiteSpace: "pre",
161 |           }}
162 |         >
163 |           <tspan x="6.671875" y="10.283994">
164 |             <tspan
165 |               fill="#ffffff"
166 |               fontFamily="Roboto"
167 |               fontSize="9.8778px"
168 |               fontWeight="500"
169 |             >
170 |               Join Game:
171 |             </tspan>
172 |           </tspan>
173 |         </text>
174 |       </svg>
175 |     </div>
176 |   );
177 | }
178 | 


--------------------------------------------------------------------------------
/overlay/app.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import {App} from "./App.jsx";
4 | 
5 | ReactDOM.render(<App />, document.getElementById("mount"));
6 | 


--------------------------------------------------------------------------------
/overlay/controller.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <svg
  3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  4 |    xmlns:cc="http://creativecommons.org/ns#"
  5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  6 |    xmlns:svg="http://www.w3.org/2000/svg"
  7 |    xmlns="http://www.w3.org/2000/svg"
  8 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  9 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 10 |    width="36.113mm"
 11 |    height="148.58mm"
 12 |    version="1.1"
 13 |    viewBox="0 0 36.113 148.58"
 14 |    id="svg276"
 15 |    sodipodi:docname="controller.svg"
 16 |    inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
 17 |   <metadata
 18 |      id="metadata282">
 19 |     <rdf:RDF>
 20 |       <cc:Work
 21 |          rdf:about="">
 22 |         <dc:format>image/svg+xml</dc:format>
 23 |         <dc:type
 24 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 25 |       </cc:Work>
 26 |     </rdf:RDF>
 27 |   </metadata>
 28 |   <defs
 29 |      id="defs280" />
 30 |   <sodipodi:namedview
 31 |      pagecolor="#ffffff"
 32 |      bordercolor="#666666"
 33 |      borderopacity="1"
 34 |      objecttolerance="10"
 35 |      gridtolerance="10"
 36 |      guidetolerance="10"
 37 |      inkscape:pageopacity="0"
 38 |      inkscape:pageshadow="2"
 39 |      inkscape:window-width="1366"
 40 |      inkscape:window-height="703"
 41 |      id="namedview278"
 42 |      showgrid="false"
 43 |      inkscape:zoom="1.8448444"
 44 |      inkscape:cx="-60.104897"
 45 |      inkscape:cy="114.33638"
 46 |      inkscape:window-x="0"
 47 |      inkscape:window-y="0"
 48 |      inkscape:window-maximized="1"
 49 |      inkscape:current-layer="svg276" />
 50 |   <rect
 51 |      x="0.27499935"
 52 |      y="0.27500093"
 53 |      width="35.562"
 54 |      height="148.03"
 55 |      ry="6.3717999"
 56 |      fill="#f2f2f4"
 57 |      stroke="#000000"
 58 |      stroke-linecap="round"
 59 |      stroke-linejoin="bevel"
 60 |      stroke-width="0.551"
 61 |      id="rect191"
 62 |      style="stroke:#000000;stroke-opacity:1" />
 63 |   <circle
 64 |      cx="18.925997"
 65 |      cy="109.22501"
 66 |      r="4.2259002"
 67 |      fill="none"
 68 |      stroke="#000000"
 69 |      stroke-linecap="round"
 70 |      stroke-linejoin="bevel"
 71 |      stroke-width="0.551"
 72 |      id="circle193"
 73 |      style="fill:none;fill-opacity:1;stroke:#000000" />
 74 |   <rect
 75 |      x="13.604998"
 76 |      y="84.184998"
 77 |      width="10.642"
 78 |      height="12.522"
 79 |      fill="none"
 80 |      stroke="#000000"
 81 |      stroke-linecap="round"
 82 |      stroke-linejoin="bevel"
 83 |      stroke-width="0.48353"
 84 |      id="rect208"
 85 |      style="fill:none;fill-opacity:1;stroke:#000000" />
 86 |   <circle
 87 |      id="button-power"
 88 |      cx="9.7029972"
 89 |      cy="7.1849971"
 90 |      r="2.7421999"
 91 |      fill="#aa0000" />
 92 |   <g
 93 |      id="button-up"
 94 |      transform="translate(-63.055556,-97.765)"
 95 |      fill="none"
 96 |      stroke="#000000"
 97 |      stroke-width="0.551"
 98 |      style="fill:none;stroke:#000000">
 99 |     <path
100 |        d="m 79.073,113.48 v 2.8781 l 2.8936,3.7522 2.9458,-3.4997 v -3.1165 z"
101 |        id="path212"
102 |        style="fill:none;stroke:#000000" />
103 |   </g>
104 |   <g
105 |      id="button-down"
106 |      transform="translate(-63.055556,-97.765)"
107 |      fill="none"
108 |      stroke="#000000"
109 |      stroke-width="0.551"
110 |      style="fill:none;stroke:#000000">
111 |     <path
112 |        d="m 79.073,130.85 v -2.8781 l 2.8936,-4.0916 2.9458,3.8392 v 3.1165 z"
113 |        id="path217"
114 |        style="fill:none;stroke:#000000" />
115 |   </g>
116 |   <g
117 |      id="button-left"
118 |      transform="translate(-63.055556,-97.765)"
119 |      fill="none"
120 |      stroke="#000000"
121 |      stroke-width="0.551"
122 |      style="fill:none;stroke:#000000">
123 |     <path
124 |        d="m 73.045,118.98 h 3.0626 l 4.1329,2.8936 -4.0649,2.9458 h -3.1165 z"
125 |        id="path222"
126 |        style="fill:none;stroke:#000000" />
127 |   </g>
128 |   <g
129 |      id="button-right"
130 |      transform="translate(-63.055556,-97.765)"
131 |      fill="none"
132 |      stroke="#000000"
133 |      stroke-width="0.551"
134 |      style="fill:none;stroke:#000000">
135 |     <path
136 |        d="m 90.919,118.98 h -3.0626 l -4.1329,2.8936 4.0649,2.9458 h 3.1165 z"
137 |        id="path227"
138 |        style="fill:none;stroke:#000000" />
139 |   </g>
140 |   <circle
141 |      cx="18.926008"
142 |      cy="122.455"
143 |      r="4.2259002"
144 |      fill="none"
145 |      stroke="#000000"
146 |      stroke-linecap="round"
147 |      stroke-linejoin="bevel"
148 |      stroke-width="0.551"
149 |      id="circle232"
150 |      style="fill:none;fill-opacity:1;stroke:#000000" />
151 |   <circle
152 |      cx="18.92606"
153 |      cy="46.455002"
154 |      r="5.7947001"
155 |      fill="none"
156 |      stroke="#000000"
157 |      stroke-linecap="round"
158 |      stroke-linejoin="bevel"
159 |      stroke-width="0.551"
160 |      id="circle242"
161 |      style="fill:none;fill-opacity:1;stroke:#000000" />
162 |   <g
163 |      transform="translate(-63.069498,-97.765)"
164 |      fill="none"
165 |      stroke="#000000"
166 |      id="g257"
167 |      style="fill:none;fill-opacity:1;stroke:#000000">
168 |     <circle
169 |        cx="91.987999"
170 |        cy="168.67999"
171 |        r="3.0358"
172 |        stroke-linecap="round"
173 |        stroke-linejoin="bevel"
174 |        stroke-width="0.551"
175 |        id="circle251"
176 |        style="fill:none;fill-opacity:1;stroke:#000000" />
177 |   </g>
178 |   <g
179 |      id="button-select"
180 |      fill="none"
181 |      stroke="#000000"
182 |      transform="translate(-62.997,-97.765)"
183 |      style="fill:none;fill-opacity:1;stroke:#000000">
184 |     <circle
185 |        cx="71.980003"
186 |        cy="168.78999"
187 |        r="3.0848"
188 |        stroke-linecap="round"
189 |        stroke-linejoin="bevel"
190 |        stroke-width="0.551"
191 |        id="circle259"
192 |        style="fill:none;fill-opacity:1;stroke:#000000" />
193 |   </g>
194 |   <circle
195 |      id="button-home"
196 |      cx="18.925997"
197 |      cy="71.024994"
198 |      r="3.0848"
199 |      fill="none"
200 |      stroke="#000000"
201 |      stroke-linecap="round"
202 |      stroke-linejoin="bevel"
203 |      stroke-width="0.551"
204 |      style="fill:none;fill-opacity:1;stroke:#000000" />
205 |   <g
206 |      id="player-lights"
207 |      fill="#37abc8"
208 |      transform="translate(-62.997,-97.765)"
209 |      style="fill:#808080">
210 |     <rect
211 |        x="75.924004"
212 |        y="236.02"
213 |        width="3.2643001"
214 |        height="3.3562"
215 |        id="rect265"
216 |        style="fill:#808080" />
217 |     <rect
218 |        x="69.724998"
219 |        y="236.02"
220 |        width="3.2643001"
221 |        height="3.3562"
222 |        id="rect267"
223 |        style="fill:#808080" />
224 |     <rect
225 |        x="89.117996"
226 |        y="236.02"
227 |        width="3.2643001"
228 |        height="3.3562"
229 |        id="rect269"
230 |        style="fill:#808080" />
231 |     <rect
232 |        x="82.918999"
233 |        y="236.02"
234 |        width="3.2643001"
235 |        height="3.3562"
236 |        id="rect271"
237 |        style="fill:#808080" />
238 |   </g>
239 | </svg>
240 | 


--------------------------------------------------------------------------------
/overlay/index.html:
--------------------------------------------------------------------------------
1 | <html>
2 |   <body>
3 |     <style>html,body{margin:0}</style>
4 |     <div id="mount"></div>
5 |     <script src="./app.js"></script>
6 |   </body>
7 | </html>
8 | 


--------------------------------------------------------------------------------
/overlay/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webii-overlay",
 3 |   "version": "1.0.0",
 4 |   "description": "Webpage to show the connected controllers and game pin of the current Dolphin server for OBS overlays",
 5 |   "main": "dist/index.html",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+ssh://git@github.com/mstrodl/webii.git"
12 |   },
13 |   "keywords": [
14 |     "dolphin-emu",
15 |     "dolphin",
16 |     "controller"
17 |   ],
18 |   "author": "Mary Strodl <ipadlover8322@gmail.com>",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/mstrodl/webii/issues"
22 |   },
23 |   "homepage": "https://github.com/mstrodl/webii#readme",
24 |   "dependencies": {
25 |     "parcel": "^2.0.0-beta.1",
26 |     "qrcode.react": "^1.0.0",
27 |     "react": "^16.13.1",
28 |     "react-dom": "^16.13.1"
29 |   },
30 |   "devDependencies": {
31 |     "@babel/core": "^7.11.6"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/overlay/wii-overlay.svg:
--------------------------------------------------------------------------------
 1 | <svg width="1280" height="720" version="1.1" viewBox="0 0 338.67 190.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 |  <rect width="338.67" height="190.5" fill="#34beec"/>
 3 |  <rect x="56.802" y="31.951" width="281.86" height="158.55"/>
 4 |  <image x="9.972" y="65.248" width="14.052" height="57.813" preserveAspectRatio="none" xlink:href="file:///home/mary/projects/webii/web/wiimote.svg"/>
 5 |  <image x="32.585" y="65.248" width="14.052" height="57.813" preserveAspectRatio="none" xlink:href="file:///home/mary/projects/webii/web/wiimote.svg"/>
 6 |  <image x="32.585" y="128.56" width="14.052" height="57.813" opacity=".4" preserveAspectRatio="none" xlink:href="file:///home/mary/projects/webii/web/wiimote.svg"/>
 7 |  <image x="9.972" y="128.56" width="14.052" height="57.813" preserveAspectRatio="none" xlink:href="file:///home/mary/projects/webii/web/wiimote.svg"/>
 8 |  <text transform="translate(63.143 -1.5875)" fill="#ffffff" font-family="sans-serif" font-size="19.756px" letter-spacing="0px" word-spacing="0px" style="line-height:1.25;shape-inside:url(#rect2192);white-space:pre" xml:space="preserve"><tspan x="46.863281" y="25.745758"><tspan fill="#ffffff" font-family="Roboto" font-weight="500">The Contactless Wii</tspan></tspan></text>
 9 |  <image x="4.9531" y="13.328" width="46.702" height="46.702" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAABXAQMAAABLBksvAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP//8i138cAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAC4SURBVDiNzdMxDsIwDAVQow7ZegJLuYa3Xim5QAoXaK+UrddA4gLp5iGScaHQpbhiQMLTGzL8fMsg28BfuAAkQgBveJYaqPZiOmPoMLgDJ6qHjoIHlhoZ3xl2rfnjtP1l1zpF8epk14Vq6+opW5ZJRlZ7wzPXpOHZcnGNMKZODAtfY/bj4/1Ha37yA1leepDmksWw9pnIj2I6Y5/XrgwHB5G97QTN2Zle9nsbOjH83G9Lln99U9/5Dl2otWqJC2fyAAAAAElFTkSuQmCC" preserveAspectRatio="none"/>
10 |  <text transform="translate(-3.2455 .99487)" fill="#000000" font-family="sans-serif" font-size="9.8778px" letter-spacing="0px" word-spacing="0px" style="line-height:1.25;shape-inside:url(#rect2638);white-space:pre" xml:space="preserve"><tspan x="6.671875" y="10.283994"><tspan fill="#ffffff" font-family="Roboto" font-size="9.8778px" font-weight="500">Join Game:</tspan></tspan></text>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
  1 | const fs = require("fs");
  2 | const WebSocket = require("ws");
  3 | 
  4 | const config = JSON.parse(fs.readFileSync("./config.json", "utf8"));
  5 | 
  6 | const wss = new WebSocket.Server({port: config.port, host: "0.0.0.0"});
  7 | const sessions = new Map();
  8 | 
  9 | const CLOSE_CODES = {
 10 |   BAD_PIN: 4001,
 11 |   KICKED: 4002,
 12 |   ROOM_FULL: 4003,
 13 |   BAD_FORMAT: 4004,
 14 |   DOLPHIN_DIED: 4005,
 15 | };
 16 | 
 17 | wss.on("connection", (ws) => {
 18 |   console.log("Client");
 19 |   ws.once("message", (frame) => {
 20 |     const data = JSON.parse(frame);
 21 |     if (data.op != "hello") {
 22 |       ws.close(CLOSE_CODES.BAD_OP);
 23 |     } else {
 24 |       if (!data.d) {
 25 |         console.log(data, "Bad format");
 26 |         return ws.close(CLOSE_CODES.BAD_FORMAT);
 27 |       }
 28 |       const type = data.d.type;
 29 |       if (type == "dolphin") {
 30 |         const dolphin = new Dolphin(ws);
 31 |         sessions.set(dolphin.pin, dolphin);
 32 |         console.log("Created session", dolphin.pin);
 33 |       } else if (type == "client") {
 34 |         console.log("Connection with", data.d.pin);
 35 |         const dolphin = sessions.get(data.d.pin);
 36 |         if (!dolphin) {
 37 |           return ws.close(CLOSE_CODES.BAD_PIN);
 38 |         }
 39 |         const client = new Client(dolphin, ws);
 40 |         console.log("Created client");
 41 |       }
 42 |     }
 43 |   });
 44 | });
 45 | 
 46 | const CHARACTERS = "abcdefghijklmnopqrstuvwxyz";
 47 | function generatePin() {
 48 |   while (true) {
 49 |     let pin = "";
 50 |     for (let i = 0; i < 5; ++i) {
 51 |       pin += CHARACTERS[Math.floor(Math.random() * CHARACTERS.length)];
 52 |     }
 53 |     if (!sessions.has(pin)) {
 54 |       return pin;
 55 |     }
 56 |   }
 57 | }
 58 | 
 59 | class Dolphin {
 60 |   constructor(ws) {
 61 |     this.ws = ws;
 62 |     this.ws.on("message", (frame) => {
 63 |       const data = JSON.parse(frame);
 64 |       this["on" + data.op[0].toUpperCase() + data.op.substring(1)](data.d);
 65 |     });
 66 | 
 67 |     this.ws.on("pong", () => {
 68 |       this.ws.isAlive = true;
 69 |     });
 70 |     this.interval = setInterval(() => {
 71 |       if (this.ws.isAlive === false) {
 72 |         this.ws.terminate();
 73 |       }
 74 |       this.ws.isAlive = false;
 75 |       this.ws.ping(() => {});
 76 |     }, 30000);
 77 | 
 78 |     this.players = new Array(4);
 79 |     this.pin = generatePin();
 80 |     this.CLIENT_COUNT = 0;
 81 |     this.send("hello", {
 82 |       pin: this.pin,
 83 |     });
 84 |     this.ws.on("close", () => {
 85 |       sessions.delete(this.pin);
 86 |       clearInterval(this.interval);
 87 |     });
 88 |   }
 89 | 
 90 |   send(op, data) {
 91 |     this.ws.send(
 92 |       JSON.stringify({
 93 |         op,
 94 |         d: data,
 95 |       })
 96 |     );
 97 |   }
 98 | 
 99 |   attachPlayer(client) {
100 |     for (let index = 0; index < this.players.length; ++index) {
101 |       console.log("Checking", index, this.players[index]);
102 |       if (!this.players[index]) {
103 |         this.players[index] = client;
104 |         console.log("All good");
105 |         return index;
106 |       }
107 |     }
108 |     return null;
109 |   }
110 | 
111 |   onDisconnect(data) {
112 |     for (const index in this.players) {
113 |       if (
114 |         this.players[index] &&
115 |         this.players[index].clientId == data.clientId
116 |       ) {
117 |         this.players[index].close(CLOSE_CODES.KICKED);
118 |         this.players[index] = null;
119 |       }
120 |     }
121 |   }
122 | }
123 | 
124 | class Client {
125 |   constructor(server, ws) {
126 |     this.server = server;
127 |     this.ws = ws;
128 |     this.ws.on("pong", () => {
129 |       this.ws.isAlive = true;
130 |     });
131 |     this.interval = setInterval(() => {
132 |       if (this.ws.isAlive === false) {
133 |         this.ws.terminate();
134 |       }
135 |       this.ws.isAlive = false;
136 |       this.ws.ping(() => {});
137 |     }, 30000);
138 |     this.clientId = ++this.server.CLIENT_COUNT;
139 |     this.ws.on("message", (frame) => {
140 |       // console.log(this.server.pin, "<-", frame);
141 |       const data = JSON.parse(frame);
142 |       this["on" + data.op[0].toUpperCase() + data.op.substring(1)](data.d);
143 |     });
144 |     this.ws.once("close", (code) => {
145 |       clearInterval(this.interval);
146 |       delete this.server.players[this.player];
147 |       this.server.send("disconnect", {
148 |         player: this.player,
149 |       });
150 |     });
151 |     this.server.ws.once("close", () => {
152 |       this.close(CLOSE_CODES.DOLPHIN_DIED);
153 |     });
154 | 
155 |     this.player = this.server.attachPlayer(this);
156 |     if (this.player === null) {
157 |       this.close(CLOSE_CODES.ROOM_FULL);
158 |     } else {
159 |       this.send("hello", {
160 |         player: this.player,
161 |         clientId: this.clientId,
162 |       });
163 |       this.server.send("connect", {
164 |         player: this.player,
165 |         clientId: this.clientId,
166 |       });
167 |     }
168 |   }
169 | 
170 |   send(op, data) {
171 |     this.ws.send(
172 |       JSON.stringify({
173 |         op,
174 |         d: data,
175 |       })
176 |     );
177 |   }
178 | 
179 |   close(code) {
180 |     this.ws.close(code);
181 |   }
182 | 
183 |   onButton(data) {
184 |     if (this.player !== null) {
185 |       this.server.send("button", {
186 |         player: this.player,
187 |         button: data.button,
188 |         state: data.state,
189 |       });
190 |     }
191 |   }
192 | 
193 |   onIr(data) {
194 |     if (this.player !== null) {
195 |       this.server.send("ir", {
196 |         player: this.player,
197 |         x: data.x,
198 |         y: data.y,
199 |         z: data.z,
200 |       });
201 |     }
202 |   }
203 | 
204 |   onStick(data) {
205 |     if (this.player !== null) {
206 |       if (data.axis == "accelerometer") {
207 |         //console.log(data);
208 |       }
209 |       this.server.send("stick", {
210 |         player: this.player,
211 |         axis: data.axis,
212 |         x: data.x,
213 |         y: data.y,
214 |         z: data.z,
215 |         t: data.t,
216 |       });
217 |     }
218 |   }
219 | }
220 | 


--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webii-server",
 3 |   "version": "1.0.0",
 4 |   "description": "Server for routing wii remote inputs from devices to the emulator",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+ssh://git@github.com/mstrodl/webii.git"
12 |   },
13 |   "keywords": [
14 |     "dolphin-emu",
15 |     "dolphin",
16 |     "controller"
17 |   ],
18 |   "author": "Mary Strodl <ipadlover8322@gmail.com>",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/mstrodl/webii/issues"
22 |   },
23 |   "homepage": "https://github.com/mstrodl/webii#readme",
24 |   "dependencies": {
25 |     "ws": "^7.3.1"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/server/pnpm-lock.yaml:
--------------------------------------------------------------------------------
 1 | dependencies:
 2 |   ws: 7.3.1
 3 | lockfileVersion: 5.1
 4 | packages:
 5 |   /ws/7.3.1:
 6 |     dev: false
 7 |     engines:
 8 |       node: '>=8.3.0'
 9 |     peerDependencies:
10 |       bufferutil: ^4.0.1
11 |       utf-8-validate: ^5.0.2
12 |     peerDependenciesMeta:
13 |       bufferutil:
14 |         optional: true
15 |       utf-8-validate:
16 |         optional: true
17 |     resolution:
18 |       integrity: sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==
19 | specifiers:
20 |   ws: ^7.3.1
21 | 


--------------------------------------------------------------------------------
/web/App.jsx:
--------------------------------------------------------------------------------
  1 | import * as icons from "./icons.jsx";
  2 | import config from "./config.json";
  3 | import React, {useState, useCallback, useEffect} from "react";
  4 | import GyroNorm from "gyronorm/dist/gyronorm.complete.min.js";
  5 | import {Pointer} from "./Pointer.jsx";
  6 | 
  7 | export function App() {
  8 |   const [pin, setPin] = useState(null);
  9 |   const [error, setError] = useState(null);
 10 | 
 11 |   useEffect(() => {
 12 |     // Pin can be included in link for QR codes
 13 |     if (location.hash.length > 1) {
 14 |       setPin(location.hash.substring(1));
 15 |     }
 16 | 
 17 |     function handler(event) {
 18 |       event.preventDefault();
 19 |       const elem = document.documentElement;
 20 |       if (elem.requestFullscreen) {
 21 |         elem.requestFullscreen();
 22 |       } else if (elem.webkitRequestFullscreen) {
 23 |         elem.webkitRequestFullscreen();
 24 |       }
 25 |     }
 26 | 
 27 |     window.addEventListener("touchstart", handler);
 28 |     return () => window.removeEventListener("touchstart", handler);
 29 |   }, []);
 30 | 
 31 |   let child = null;
 32 |   if (!pin) {
 33 |     return <PinPicker setPin={(pin) => setPin(pin)} error={error} />;
 34 |   } else {
 35 |     return (
 36 |       <>
 37 |         <Controller
 38 |           pin={pin}
 39 |           setError={(error) => {
 40 |             setError(error);
 41 |             setPin(null);
 42 |           }}
 43 |         />
 44 |         <DarkToggle />
 45 |       </>
 46 |     );
 47 |   }
 48 | 
 49 |   return <div className="app">{child}</div>;
 50 | }
 51 | 
 52 | function DarkToggle() {
 53 |   const [dark, setDark] = useState(
 54 |     window.matchMedia("(prefers-color-scheme: dark)").matches
 55 |   );
 56 |   useEffect(() => {
 57 |     const match = window.matchMedia("(prefers-color-scheme: dark)");
 58 |     console.log("Matched?", match);
 59 |     const listener = (match) => {
 60 |       console.log("Updated");
 61 |       setDark(match.matches);
 62 |     };
 63 |     listener(match);
 64 |     match.addEventListener("change", listener);
 65 |     return () => {
 66 |       match.removeEventListener("change", listener);
 67 |     };
 68 |   }, []);
 69 |   useEffect(() => {
 70 |     if (dark) {
 71 |       document.documentElement.classList.add("dark");
 72 |       document.documentElement.classList.remove("light");
 73 |     } else {
 74 |       document.documentElement.classList.remove("dark");
 75 |       document.documentElement.classList.add("light");
 76 |     }
 77 |   }, [dark]);
 78 |   const onClick = useCallback(() => setDark((dark) => !dark), []);
 79 |   return (
 80 |     <div className="dark-toggle" onClick={onClick}>
 81 |       <icons.Moon />
 82 |     </div>
 83 |   );
 84 | }
 85 | 
 86 | function PinPicker({setPin, error}) {
 87 |   const [tempPin, setTempPin] = useState("");
 88 |   return (
 89 |     <div className="pin-picker">
 90 |       {error && <div className="error">{error}</div>}
 91 |       <input
 92 |         type="text"
 93 |         className="pin"
 94 |         onChange={(event) => setTempPin(event.currentTarget.value)}
 95 |         value={tempPin}
 96 |         placeholder="Game Pin"
 97 |       />
 98 |       <button
 99 |         type="button"
100 |         className="join-btn"
101 |         onClick={() => setPin(tempPin.toLowerCase())}
102 |       >
103 |         Join Game
104 |       </button>
105 |     </div>
106 |   );
107 | }
108 | 
109 | class Client {
110 |   constructor(pin, ready) {
111 |     this.ws = new WebSocket(config.server);
112 |     this.ws.addEventListener("open", () => {
113 |       this.send("hello", {
114 |         type: "client",
115 |         pin: pin,
116 |       });
117 |     });
118 |     this.ws.addEventListener("message", (event) => {
119 |       const msg = JSON.parse(event.data);
120 |       console.log(msg, this);
121 |       if (msg.op == "hello") {
122 |         this.player = msg.d.player;
123 |         ready();
124 |       }
125 |     });
126 |   }
127 | 
128 |   send(op, data) {
129 |     this.ws.send(JSON.stringify({op, d: data}));
130 |   }
131 | 
132 |   button(button, state) {
133 |     this.send("button", {
134 |       button,
135 |       state,
136 |     });
137 |   }
138 | 
139 |   ir(x, y, z) {
140 |     this.send("ir", {x, y, z});
141 |   }
142 | 
143 |   axis(axis, {x, y, z}) {
144 |     this.send("stick", {
145 |       axis,
146 |       x,
147 |       y,
148 |       z,
149 |     });
150 |   }
151 | }
152 | 
153 | function Button({type, client, children}) {
154 |   const Icon = icons[type];
155 |   /* onTouchMove={(event) => {
156 |    *         event.preventDefault();
157 |    *         client.button(type, true);
158 |    *         }} */
159 |   return (
160 |     <g
161 |       className={`button button-${type}`}
162 |       onMouseDown={(event) => {
163 |         event.preventDefault();
164 |         client.button(type, true);
165 |       }}
166 |       onMouseUp={(event) => {
167 |         event.preventDefault();
168 |         client.button(type, false);
169 |       }}
170 |       onTouchStart={(event) => {
171 |         event.preventDefault();
172 |         client.button(type, true);
173 |       }}
174 |       onTouchEnd={() => {
175 |         event.preventDefault();
176 |         client.button(type, false);
177 |       }}
178 |     >
179 |       {children}
180 |     </g>
181 |   );
182 | }
183 | 
184 | const errors = {
185 |   4001: "Bad Pin Provided",
186 |   4002: "You were kicked",
187 |   4003: "Room is full",
188 |   4004: "Internal error: bad format",
189 |   4005: "Session was closed",
190 | };
191 | 
192 | function Controller({setError, pin}) {
193 |   const [connected, setConnected] = useState(false);
194 |   const [client, setClient] = useState(null);
195 |   const [granted, setGranted] = useState(
196 |     typeof DeviceOrientationEvent == "undefined" ||
197 |       typeof DeviceOrientationEvent.requestPermission != "function"
198 |   );
199 |   const [pointing, setPointing] = useState(false); // false
200 |   const [prompting, setPrompting] = useState(false);
201 |   useEffect(() => {
202 |     const client = new Client(pin, () => {
203 |       setConnected(true);
204 |     });
205 |     setClient(client);
206 |     const closeListener = (event) => {
207 |       setError(
208 |         errors[event.code] ||
209 |           "You may have had a network error. Try reconnecting. Error code: " +
210 |             event.code
211 |       );
212 |     };
213 |     client.ws.addEventListener("close", closeListener);
214 |     return () => {
215 |       client.ws.removeEventListener("close", closeListener);
216 |       client.ws.close();
217 |     };
218 |   }, [pin]);
219 |   useEffect(() => {
220 |     if (connected && granted) {
221 |       let running = true;
222 |       const gn = new GyroNorm();
223 |       gn.init({
224 |         frequency: 10,
225 |       })
226 |         .then(() => {
227 |           gn.start((data) => {
228 |             if (running) {
229 |               client.axis("accelerometer", {
230 |                 // 1g = 9.8m/s²
231 |                 x: data.dm.gx / 9.8,
232 |                 y: data.dm.gz / 9.8,
233 |                 z: -data.dm.gy / 9.8,
234 |                 t: Date.now(),
235 |               });
236 |               client.axis("gyroscope", {
237 |                 // (Degrees / sec)
238 |                 x: data.dm.alpha, // Pitch
239 |                 y: data.dm.beta, // Yaw
240 |                 z: data.dm.gamma, // Roll
241 |               });
242 |             }
243 |           });
244 |         })
245 |         .catch((err) => {
246 |           alert(
247 |             "It seems like your hardware might not have an accelerometer! You can still play, but won't have tilt controls. Error: " +
248 |               (err.message || err)
249 |           );
250 |           console.error("No gyro support?", err);
251 |         });
252 |       return () => {
253 |         running = false;
254 |         gn.stop();
255 |       };
256 |     } else if (!granted && connected) {
257 |       setPrompting(true);
258 |     }
259 |   }, [connected, granted]);
260 | 
261 |   if (!connected) {
262 |     return "Connecting...";
263 |   }
264 |   console.log(client.player);
265 |   return (
266 |     <div className="controller">
267 |       {prompting && (
268 |         <div className="modal-contain">
269 |           <div className="modal">
270 |             <div className="text">
271 |               Before we can get you playing, we need permission to get motion
272 |               data from your device so we can tell the game how the controller
273 |               is moving!
274 |             </div>
275 |             <div className="contain">
276 |               <button
277 |                 type="button"
278 |                 onClick={() =>
279 |                   DeviceOrientationEvent.requestPermission().then((state) => {
280 |                     setPrompting(false);
281 |                     setGranted(state == "granted");
282 |                   })
283 |                 }
284 |               >
285 |                 Okay!
286 |               </button>
287 |             </div>
288 |           </div>
289 |         </div>
290 |       )}
291 |       {pointing && <Pointer client={client} />}
292 |       <svg
293 |         width="36.113mm"
294 |         height="148.58mm"
295 |         version="1.1"
296 |         viewBox="0 0 36.113 148.58"
297 |         xmlns="http://www.w3.org/2000/svg"
298 |       >
299 |         <g transform="translate(-62.997 -97.765)">
300 |           <rect
301 |             className="controller-rect"
302 |             x="63.272"
303 |             y="98.04"
304 |             width="35.562"
305 |             height="148.03"
306 |             ry="6.3718"
307 |             fill="#f2f2f4"
308 |             stroke="#000000"
309 |             strokeLinecap="round"
310 |             strokeLinejoin="bevel"
311 |             strokeWidth=".551"
312 |           />
313 |           <Button client={client} type="one">
314 |             <g id="button-one">
315 |               <circle
316 |                 cx="81.923"
317 |                 cy="206.99"
318 |                 r="4.2259"
319 |                 fill="#eee"
320 |                 stroke="#000000"
321 |                 strokeLinecap="round"
322 |                 strokeLinejoin="bevel"
323 |                 strokeWidth=".551"
324 |               />
325 |               <text
326 |                 transform="translate(7.1623 6.1117)"
327 |                 fill="#000000"
328 |                 fontFamily="sans-serif"
329 |                 fontSize="4.2333px"
330 |                 letterSpacing="0px"
331 |                 wordSpacing="0px"
332 |                 style={{
333 |                   lineHeight: 1.25,
334 |                   shapeInside: "url(#rect110)",
335 |                   whiteSpace: "pre",
336 |                 }}
337 |               >
338 |                 <tspan x="73.376953" y="202.42129">
339 |                   <tspan style={{shapeInside: "url(#rect110)"}}>1</tspan>
340 |                 </tspan>
341 |               </text>
342 |             </g>
343 |           </Button>
344 |           <Button client={client} type="b">
345 |             <g id="button-b">
346 |               <rect
347 |                 fill="#eee"
348 |                 x="76.602"
349 |                 y="181.95"
350 |                 width="10.642"
351 |                 height="12.522"
352 |                 stroke="#000000"
353 |                 strokeLinecap="round"
354 |                 strokeLinejoin="bevel"
355 |                 strokeWidth=".48353"
356 |               />
357 | 
358 |               <text
359 |                 transform="translate(7.0362 -12.668)"
360 |                 fill="#000000"
361 |                 fontFamily="sans-serif"
362 |                 fontSize="4.2333px"
363 |                 letterSpacing="0px"
364 |                 wordSpacing="0px"
365 |                 style={{
366 |                   lineHeight: 1.25,
367 |                   shapeInside: "url(#rect1208)",
368 |                   whiteSpace: "pre",
369 |                 }}
370 |               >
371 |                 <tspan x="73.376953" y="202.42129">
372 |                   <tspan style={{shapeInside: "url(#rect1208)"}}>B</tspan>
373 |                 </tspan>
374 |               </text>
375 |             </g>
376 |           </Button>
377 |           <Button client={client} type="power">
378 |             <circle
379 |               id="button-power"
380 |               cx="72.7"
381 |               cy="104.95"
382 |               r="2.7422"
383 |               fill="#a00"
384 |             />
385 |           </Button>
386 |           <Button client={client} type="up">
387 |             <g
388 |               id="button-up"
389 |               transform="translate(-.058556)"
390 |               fill="none"
391 |               stroke="#000000"
392 |               strokeWidth=".551"
393 |             >
394 |               <path
395 |                 fill="#eee"
396 |                 d="m79.073 113.48v2.8781l2.8936 3.7522 2.9458-3.4997v-3.1165z"
397 |               />
398 |               <path d="m81.993 114.34v3.5106" />
399 |             </g>
400 |           </Button>
401 |           <Button client={client} type="down">
402 |             <g
403 |               id="button-down"
404 |               transform="translate(-.058556)"
405 |               fill="none"
406 |               stroke="#000000"
407 |               strokeWidth=".551"
408 |             >
409 |               <path
410 |                 fill="#eee"
411 |                 d="m79.073 130.85v-2.8781l2.8936-4.0916 2.9458 3.8392v3.1165z"
412 |               />
413 |               <path d="m81.993 125.98v3.5106" />
414 |             </g>
415 |           </Button>
416 |           <Button client={client} type="left">
417 |             <g
418 |               id="button-left"
419 |               transform="translate(-.058556)"
420 |               fill="none"
421 |               stroke="#000000"
422 |               strokeWidth=".551"
423 |             >
424 |               <path
425 |                 fill="#eee"
426 |                 d="m73.045 118.98h3.0626l4.1329 2.8936-4.0649 2.9458h-3.1165z"
427 |               />
428 |               <path d="m77.928 121.9h-3.5106" />
429 |             </g>
430 |           </Button>
431 |           <Button client={client} type="right">
432 |             <g
433 |               id="button-right"
434 |               transform="translate(-.058556)"
435 |               fill="none"
436 |               stroke="#000000"
437 |               strokeWidth=".551"
438 |             >
439 |               <path
440 |                 fill="#eee"
441 |                 d="m90.919 118.98h-3.0626l-4.1329 2.8936 4.0649 2.9458h3.1165z"
442 |               />
443 |               <path d="m89.57 121.9h-3.5106" />
444 |             </g>
445 |           </Button>
446 |           <Button client={client} type="two">
447 |             <g transform="translate(-.03899)" id="button-two">
448 |               <circle
449 |                 fill="#eee"
450 |                 cx="81.962"
451 |                 cy="220.22"
452 |                 r="4.2259"
453 |                 stroke="#000000"
454 |                 strokeLinecap="round"
455 |                 strokeLinejoin="bevel"
456 |                 strokeWidth=".551"
457 |               />
458 |               <text
459 |                 transform="translate(7.2954 19.369)"
460 |                 fill="#000000"
461 |                 fontFamily="sans-serif"
462 |                 fontSize="4.2333px"
463 |                 letterSpacing="0px"
464 |                 wordSpacing="0px"
465 |                 style={{
466 |                   lineHeight: 1.25,
467 |                   shapeInside: "url(#rect120)",
468 |                   whiteSpace: "pre",
469 |                 }}
470 |               >
471 |                 <tspan x="73.376953" y="202.42129">
472 |                   <tspan style={{shapeInside: "url(#rect120)"}}>2</tspan>
473 |                 </tspan>
474 |               </text>
475 |             </g>
476 |           </Button>
477 |           <Button client={client} type="a">
478 |             <g id="button-a" transform="translate(-.32894)">
479 |               <circle
480 |                 fill="#eee"
481 |                 cx="82.252"
482 |                 cy="144.22"
483 |                 r="5.7947"
484 |                 stroke="#000000"
485 |                 strokeLinecap="round"
486 |                 strokeLinejoin="bevel"
487 |                 strokeWidth=".551"
488 |               />
489 |               <text
490 |                 transform="translate(8.0708 6.5068)"
491 |                 fill="#000000"
492 |                 fontFamily="sans-serif"
493 |                 fontSize="4.2333px"
494 |                 letterSpacing="0px"
495 |                 wordSpacing="0px"
496 |                 style={{
497 |                   lineHeight: 1.25,
498 |                   shapeInside: "url(#rect124)",
499 |                   whiteSpace: "pre",
500 |                 }}
501 |               >
502 |                 <tspan x="72.734375" y="139.25527">
503 |                   <tspan style={{shapeInside: "url(#rect124)"}}>A</tspan>
504 |                 </tspan>
505 |               </text>
506 |             </g>
507 |           </Button>
508 |           <Button client={client} type="start">
509 |             <g
510 |               id="button-start"
511 |               transform="translate(-.072498)"
512 |               fill="none"
513 |               stroke="#000000"
514 |             >
515 |               <circle
516 |                 cx="91.988"
517 |                 cy="168.68"
518 |                 r="3.0358"
519 |                 fill="#eee"
520 |                 strokeLinecap="round"
521 |                 strokeLinejoin="bevel"
522 |                 strokeWidth=".551"
523 |               />
524 |               <path d="m91.988 166.65v4.0554" strokeWidth=".26458px" />
525 |               <path d="m94.015 168.68h-4.0554" strokeWidth=".26458px" />
526 |             </g>
527 |           </Button>
528 |           <Button client={client} type="select">
529 |             <g id="button-select" fill="none" stroke="#000000">
530 |               <circle
531 |                 cx="71.98"
532 |                 cy="168.79"
533 |                 r="3.0848"
534 |                 fill="#eee"
535 |                 strokeLinecap="round"
536 |                 strokeLinejoin="bevel"
537 |                 strokeWidth=".551"
538 |               />
539 |               <path d="m74.008 168.79h-4.0554" strokeWidth=".26458px" />
540 |             </g>
541 |           </Button>
542 |           <Button client={client} type="home">
543 |             <circle
544 |               id="button-home"
545 |               cx="81.923"
546 |               cy="168.79"
547 |               r="3.0848"
548 |               fill="none"
549 |               stroke="#000000"
550 |               strokeLinecap="round"
551 |               strokeLinejoin="bevel"
552 |               strokeWidth=".551"
553 |             />
554 |           </Button>
555 |           <g id="player-lights">
556 |             <rect
557 |               x="69.725"
558 |               y="236.02"
559 |               width="3.2643"
560 |               height="3.3562"
561 |               fill={client.player >= 0 ? LED_ON : LED_OFF}
562 |             />
563 |             <rect
564 |               x="75.924"
565 |               y="236.02"
566 |               width="3.2643"
567 |               height="3.3562"
568 |               fill={client.player >= 1 ? LED_ON : LED_OFF}
569 |             />
570 |             <rect
571 |               x="82.919"
572 |               y="236.02"
573 |               width="3.2643"
574 |               height="3.3562"
575 |               fill={client.player >= 2 ? LED_ON : LED_OFF}
576 |             />
577 |             <rect
578 |               x="89.118"
579 |               y="236.02"
580 |               width="3.2643"
581 |               height="3.3562"
582 |               fill={client.player >= 3 ? LED_ON : LED_OFF}
583 |             />
584 |           </g>
585 |         </g>
586 |       </svg>
587 |     </div>
588 |   );
589 | }
590 | 
591 | const LED_ON = "#37abc8";
592 | const LED_OFF = "#ccc";
593 | /* 
594 | 
595 | 
596 |       
597 |       <div className="header">
598 |         <div className="top">
599 |           <Button client={client} type="power" client={client} />
600 |         </div>
601 |         <div className="mid">
602 |           <div className="dpad">
603 |             <Button client={client} type="up" client={client} />
604 |             <div className="middle-dpad-wrap">
605 |               <div className="middle-dpad">
606 |                 <Button client={client} type="left" client={client} />
607 |                 <div className="dpad-pad" />
608 |                 <Button client={client} type="right" client={client} />
609 |               </div>
610 |             </div>
611 |             <Button client={client} type="down" client={client} />
612 |           </div>
613 |           <Button client={client} type="a" client={client} />
614 |           <Button client={client} type="b" client={client} />
615 |         </div>
616 |         <div className="details">
617 |           <Button client={client} type="start" client={client} />
618 |           <Button client={client} type="select" client={client} />
619 |         </div>
620 |       </div>
621 | 
622 |       <div className="bottom">
623 |         <Button client={client} type="one" client={client} />
624 |         <Button client={client} type="two" client={client} />
625 |       </div>
626 | 
627 |  */
628 | 


--------------------------------------------------------------------------------
/web/Pointer.jsx:
--------------------------------------------------------------------------------
  1 | import {AR} from "js-aruco";
  2 | import React, {useState, useRef, useCallback, useEffect} from "react";
  3 | 
  4 | export function Pointer({client}) {
  5 |   const [detector] = useState(() => new AR.Detector());
  6 |   const [context, setContext] = useState(null);
  7 |   const [stream, setStream] = useState(null);
  8 |   const [dimensions, setDimensions] = useState(null);
  9 |   const canvas = useRef(null);
 10 |   const video = useRef(null);
 11 | 
 12 |   const setVideo = useCallback(
 13 |     (element) => {
 14 |       video.current = element;
 15 |       attachVideo(stream);
 16 |       console.log("Stream", stream, video.current);
 17 |     },
 18 |     [stream]
 19 |   );
 20 | 
 21 |   const attachVideo = useCallback(
 22 |     (stream) => {
 23 |       console.log("Attach video", video.current, stream);
 24 |       if (video.current && stream) {
 25 |         console.log("setting", stream);
 26 |         if ("srcObject" in video.current) {
 27 |           video.current.srcObject = stream;
 28 |         } else {
 29 |           url = URL.createObjectURL(stream);
 30 |           video.current.src = url;
 31 |         }
 32 | 
 33 |         console.log("context", context);
 34 |         requestAnimationFrame(tick);
 35 |       }
 36 |     },
 37 |     [context]
 38 |   );
 39 | 
 40 |   const tick = useCallback(() => {
 41 |     /* console.log("Tick", context); */
 42 |     if (context) {
 43 |       context.drawImage(
 44 |         video.current,
 45 |         0,
 46 |         0,
 47 |         canvas.current.width,
 48 |         canvas.current.height
 49 |       );
 50 |       const imageData = context.getImageData(
 51 |         0,
 52 |         0,
 53 |         canvas.current.width,
 54 |         canvas.current.height
 55 |       );
 56 |       const markers = detector.detect(imageData);
 57 |       console.log(markers);
 58 |       let located = false;
 59 |       for (const marker of markers) {
 60 |         console.log("Marker", marker);
 61 |         if (marker.id == 1001) {
 62 |           console.log("We did it!");
 63 |           located = true;
 64 |           const avgX =
 65 |             marker.corners.map((corner) => corner.x).reduce((a, b) => a + b) /
 66 |             marker.corners.length;
 67 |           const x = (avgX / canvas.current.width - 0.5) * -2;
 68 |           const avgY =
 69 |             marker.corners.map((corner) => corner.y).reduce((a, b) => a + b) /
 70 |             marker.corners.length;
 71 |           const y = (avgY / canvas.current.height - 0.5) * 2;
 72 |           // Average "radius"
 73 |           const radius =
 74 |             marker.corners
 75 |               .map((corner) => {
 76 |                 return Math.sqrt(
 77 |                   Math.pow(corner.x - avgX, 2),
 78 |                   Math.pow(corner.y - avgY, 2)
 79 |                 );
 80 |               })
 81 |               .reduce((a, b) => a + b) /
 82 |             marker.corners.length /
 83 |             Math.max(canvas.current.width, canvas.current.height);
 84 |           client.ir(x, y, radius);
 85 |         }
 86 |       }
 87 |       if (!located) {
 88 |         client.ir();
 89 |       }
 90 |     }
 91 |     setTimeout(tick, 15);
 92 |   }, [detector, context]);
 93 | 
 94 |   useEffect(() => {
 95 |     navigator.mediaDevices
 96 |       .getUserMedia({
 97 |         video: {
 98 |           facingMode: "environment",
 99 |         },
100 |       })
101 |       .then((stream) => {
102 |         setStream(stream);
103 |         attachVideo(stream);
104 |       })
105 |       .catch((err) => {
106 |         console.error(err);
107 |       });
108 |   }, []);
109 | 
110 |   return (
111 |     <div className="pointer">
112 |       <video
113 |         autoPlay={true}
114 |         ref={setVideo}
115 |         onLoadedMetadata={() =>
116 |           setDimensions({
117 |             width: video.current.videoWidth,
118 |             height: video.current.videoHeight,
119 |           })
120 |         }
121 |       />
122 |       <canvas
123 |         width={dimensions && dimensions.width}
124 |         height={dimensions && dimensions.height}
125 |         ref={(element) => {
126 |           if (element) {
127 |             console.log("Set context");
128 |             setContext(element.getContext("2d"));
129 |           }
130 |           canvas.current = element;
131 |         }}
132 |       />
133 |     </div>
134 |   );
135 | }
136 | 


--------------------------------------------------------------------------------
/web/app.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |   margin: 0;
 3 | }
 4 | 
 5 | .controller svg {
 6 |     height: 100vh;
 7 |     width: auto;
 8 | }
 9 | 
10 | .pin-picker {
11 |   margin: 1em;
12 | }
13 | 
14 | .button {
15 |   cursor: pointer;
16 | }
17 | 
18 | .modal button {
19 |   background: #34beec;
20 |   color: #fff;
21 |   border: none;
22 |   padding: 0.5em 1em;
23 |   margin: 0 auto;
24 |   position: absolute;
25 |   left: 0;
26 |   right: 0;
27 | }
28 | 
29 | .modal .contain {
30 |   position: relative;
31 |   height: 2em;
32 |   margin: 0.5em 0 0 0;
33 | }
34 | 
35 | .modal {
36 |   position: absolute;
37 |   left: 0;
38 |   right: 0;
39 |   width: 80vw;
40 |   margin: auto;
41 |   background: #eee;
42 |   top: 50%;
43 |   transform: translateY(-50%);
44 |   padding: 1em 2em;
45 | }
46 | 
47 | .modal-contain {
48 |   background: #000a;
49 |   height: 100%;
50 |   width: 100%;
51 |   position: absolute;
52 | }
53 | 
54 | 
55 | .controller, .controller text {
56 |   -webkit-user-select: none !important;
57 |   user-select: none !important;
58 |   -webkit-touch-callout: none !important;
59 |   -webkit-user-select: none !important;
60 |   -webkit-tap-highlight-color: transparent !important;
61 |   -moz-user-select: none !important;
62 | }
63 | 
64 | /* Cheese it! */
65 | html.dark .controller *[fill="#f2f2f4"] {
66 |   fill: #000 !important;
67 | }
68 | html.dark .controller *[fill="#eee"] {
69 |   fill: #000 !important;
70 | }
71 | html.dark .controller *[stroke="#000000"] {
72 |   stroke: #f2f2f4 !important;
73 | }
74 | html.dark .controller *[fill="#000000"] {
75 |   fill: #f2f2f4 !important;
76 | }
77 | html.dark, html.dark body {
78 |   background: #000;
79 | }
80 | 
81 | .dark-toggle {
82 |   position: absolute;
83 |   bottom: 0;
84 |   right: 0;
85 |   height: 3rem;
86 |   width: 3rem;
87 |   margin: 1rem;
88 | }
89 | 


--------------------------------------------------------------------------------
/web/app.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import {App} from "./App.jsx";
4 | 
5 | ReactDOM.render(<App />, document.getElementById("mount"));
6 | 


--------------------------------------------------------------------------------
/web/icons.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export function a() {
 4 |   return "A";
 5 | }
 6 | export function b() {
 7 |   return "B";
 8 | }
 9 | export function one() {
10 |   return "1";
11 | }
12 | export function two() {
13 |   return "2";
14 | }
15 | export function start() {
16 |   return "+";
17 | }
18 | export function select() {
19 |   return "-";
20 | }
21 | export function power() {
22 |   return "Power";
23 | }
24 | export function home() {
25 |   return "Home";
26 | }
27 | 
28 | export function up() {
29 |   return "|";
30 | }
31 | export function down() {
32 |   return "|";
33 | }
34 | export function left() {
35 |   return "-";
36 | }
37 | export function right() {
38 |   return "-";
39 | }
40 | 
41 | export function Moon() {
42 |   return (
43 |     <svg viewBox="0 0 97.361236 97.361236" version="1.1">
44 |       <g transform="translate(-15.489532,-43.219131)">
45 |         <circle
46 |           style={{
47 |             fill: "#ffffff",
48 |             fillOpacity: 1,
49 |             stroke: "none",
50 |             strokeWidth: 1.79834,
51 |             stopColor: "#000000",
52 |           }}
53 |           cx="64.170151"
54 |           cy="91.89975"
55 |           r="48.680618"
56 |         />
57 |         <path
58 |           style={{
59 |             fill: "#2f2f2f",
60 |             strokeWidth: "0.264583px",
61 |             stopColor: "#000000",
62 |           }}
63 |           d="m 79.608763,53.099859 a 49.691485,51.377749 74.525282 0 1 6.747743,14.45497 49.691485,51.377749 74.525282 0 1 -36.256853,61.598391 49.691485,51.377749 74.525282 0 1 -1.794264,0.42756 41.368244,41.368244 0 0 0 28.267057,2.2876 A 41.368244,41.368244 0 0 0 105.40327,80.962505 41.368244,41.368244 0 0 0 79.608763,53.099859 Z"
64 |         />
65 |         <path
66 |           style={{fill: "none", stroke: "#2f2f2f", strokeWidth: 1.765}}
67 |           d="m 61.737303,97.831168 h 10 l -10.12227,9.926522 h 10.12227"
68 |         />
69 |         <path
70 |           style={{fill: "none", stroke: "#2f2f2f", strokeWidth: 1.765}}
71 |           d="m 55.906482,80.736739 h 10 l -10.12227,9.926526 h 10.12227"
72 |         />
73 |       </g>
74 |     </svg>
75 |   );
76 | }
77 | 


--------------------------------------------------------------------------------
/web/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>Wii</title>
 4 |     <meta name="viewport" content="width=device-width, user-scalable=no; minimal-ui">
 5 | 
 6 |     <link href="./app.css" rel="stylesheet">
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <div id="mount"></div>
11 |     <script src="./app.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/web/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webii-web",
 3 |   "version": "1.0.0",
 4 |   "description": "Client to send wii remote inputs to the emulator",
 5 |   "main": "dist/index.html",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+ssh://git@github.com/mstrodl/webii.git"
12 |   },
13 |   "keywords": [
14 |     "dolphin-emu",
15 |     "dolphin",
16 |     "controller"
17 |   ],
18 |   "author": "Mary Strodl <ipadlover8322@gmail.com>",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/mstrodl/webii/issues"
22 |   },
23 |   "homepage": "https://github.com/mstrodl/webii#readme",
24 |   "dependencies": {
25 |     "gyronorm": "^2.0.6",
26 |     "js-aruco": "^0.1.0",
27 |     "parcel": "^2.0.0-beta.1",
28 |     "react": "^16.13.1",
29 |     "react-dom": "^16.13.1"
30 |   },
31 |   "devDependencies": {
32 |     "@babel/core": "^7.11.6"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/web/wiimote.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg width="36.113mm" height="148.58mm" version="1.1" viewBox="0 0 36.113 148.58" xmlns="http://www.w3.org/2000/svg">
 3 |  <g transform="translate(-62.997 -97.765)">
 4 |   <rect x="63.272" y="98.04" width="35.562" height="148.03" ry="6.3718" fill="#f2f2f4" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width=".551"/>
 5 |   <g id="button-one">
 6 |    <circle cx="81.923" cy="206.99" r="4.2259" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width=".551"/>
 7 |    <text transform="translate(7.1623 6.1117)" fill="#000000" font-family="sans-serif" font-size="4.2333px" letter-spacing="0px" word-spacing="0px" style="line-height:1.25;shape-inside:url(#rect110);white-space:pre" xml:space="preserve"><tspan x="73.376953" y="202.42129"><tspan style="shape-inside:url(#rect110)">1</tspan></tspan></text>
 8 |   </g>
 9 |   <g id="button-b">
10 |    <text transform="translate(7.0362 -12.668)" fill="#000000" font-family="sans-serif" font-size="4.2333px" letter-spacing="0px" word-spacing="0px" style="line-height:1.25;shape-inside:url(#rect1208);white-space:pre" xml:space="preserve"><tspan x="73.376953" y="202.42129"><tspan style="shape-inside:url(#rect1208)">B</tspan></tspan></text>
11 |    <rect x="76.602" y="181.95" width="10.642" height="12.522" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width=".48353"/>
12 |   </g>
13 |   <circle id="button-power" cx="72.7" cy="104.95" r="2.7422" fill="#a00"/>
14 |   <g id="button-up" transform="translate(-.058556)" fill="none" stroke="#000" stroke-width=".551">
15 |    <path d="m79.073 113.48v2.8781l2.8936 3.7522 2.9458-3.4997v-3.1165z"/>
16 |    <path d="m81.993 114.34v3.5106"/>
17 |   </g>
18 |   <g id="button-down" transform="translate(-.058556)" fill="none" stroke="#000" stroke-width=".551">
19 |    <path d="m79.073 130.85v-2.8781l2.8936-4.0916 2.9458 3.8392v3.1165z"/>
20 |    <path d="m81.993 125.98v3.5106"/>
21 |   </g>
22 |   <g id="button-left" transform="translate(-.058556)" fill="none" stroke="#000" stroke-width=".551">
23 |    <path d="m73.045 118.98h3.0626l4.1329 2.8936-4.0649 2.9458h-3.1165z"/>
24 |    <path d="m77.928 121.9h-3.5106"/>
25 |   </g>
26 |   <g id="button-right" transform="translate(-.058556)" fill="none" stroke="#000" stroke-width=".551">
27 |    <path d="m90.919 118.98h-3.0626l-4.1329 2.8936 4.0649 2.9458h3.1165z"/>
28 |    <path d="m89.57 121.9h-3.5106"/>
29 |   </g>
30 |   <g transform="translate(-.03899)">
31 |    <circle cx="81.962" cy="220.22" r="4.2259" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width=".551"/>
32 |    <text transform="translate(7.2954 19.369)" fill="#000000" font-family="sans-serif" font-size="4.2333px" letter-spacing="0px" word-spacing="0px" style="line-height:1.25;shape-inside:url(#rect120);white-space:pre" xml:space="preserve"><tspan x="73.376953" y="202.42129"><tspan style="shape-inside:url(#rect120)">2</tspan></tspan></text>
33 |   </g>
34 |   <g id="button-a" transform="translate(-.32894)">
35 |    <circle cx="82.252" cy="144.22" r="5.7947" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width=".551"/>
36 |    <text transform="translate(8.0708 6.5068)" fill="#000000" font-family="sans-serif" font-size="4.2333px" letter-spacing="0px" word-spacing="0px" style="line-height:1.25;shape-inside:url(#rect124);white-space:pre" xml:space="preserve"><tspan x="72.734375" y="139.25527"><tspan style="shape-inside:url(#rect124)">A</tspan></tspan></text>
37 |   </g>
38 |   <g transform="translate(-.072498)" fill="none" stroke="#000">
39 |    <circle cx="91.988" cy="168.68" r="3.0358" stroke-linecap="round" stroke-linejoin="bevel" stroke-width=".551"/>
40 |    <path d="m91.988 166.65v4.0554" stroke-width=".26458px"/>
41 |    <path d="m94.015 168.68h-4.0554" stroke-width=".26458px"/>
42 |   </g>
43 |   <g id="button-select" fill="none" stroke="#000">
44 |    <circle cx="71.98" cy="168.79" r="3.0848" stroke-linecap="round" stroke-linejoin="bevel" stroke-width=".551"/>
45 |    <path d="m74.008 168.79h-4.0554" stroke-width=".26458px"/>
46 |   </g>
47 |   <circle id="button-home" cx="81.923" cy="168.79" r="3.0848" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="bevel" stroke-width=".551"/>
48 |   <g id="player-lights" fill="#37abc8">
49 |    <rect x="75.924" y="236.02" width="3.2643" height="3.3562"/>
50 |    <rect x="69.725" y="236.02" width="3.2643" height="3.3562"/>
51 |    <rect x="89.118" y="236.02" width="3.2643" height="3.3562"/>
52 |    <rect x="82.919" y="236.02" width="3.2643" height="3.3562"/>
53 |   </g>
54 |  </g>
55 | </svg>
56 | 


--------------------------------------------------------------------------------