wip

2026-04-19 03:00:05 -04:00 · 2024-10-17 15:52:28 +11:00
parent bc111e90e0
commit 0984aefd8d
4 changed files with 212 additions and 12 deletions
--- a/index.html
+++ b/index.html
@@ -1,12 +1,50 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MPC Hello</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MPC Hello</title>
+  <link rel="stylesheet" href="src/styles.css">
+</head>
+
+<body>
+  <div class="app">
+    <h1>MPC Hello World</h1>
+
+    <div id="step-1" class="step">
+      <button id="host-btn">Host</button>
+      <button id="join-btn">Join</button>
+    </div>
+
+    <div id="step-2-host" class="step hidden">
+      <p>Joining code:</p>
+      <div id="host-code" class="code-box"></div>
+    </div>
+
+    <div id="step-2-join" class="step hidden">
+      <label for="join-code-input">Enter host code:</label>
+      <input type="text" id="join-code-input">
+      <button id="join-submit-btn">Join</button>
+    </div>
+
+    <div id="step-3" class="step hidden">
+      <label for="number-input">Enter your number:</label>
+      <input type="number" id="number-input">
+      <button id="submit-number-btn">Submit</button>
+    </div>
+
+    <div id="step-4" class="step hidden">
+      <p>Calculating...</p>
+      <div class="spinner"></div>
+    </div>
+
+    <div id="step-5" class="step hidden">
+      <h2>Result: <span id="result-value"></span></h2>
+    </div>
+  </div>
+
+  <script type="module" src="src/main.ts"></script>
+</body>
+
+</html>
--- a/src/App.ts
+++ b/src/App.ts
@@ -0,0 +1,44 @@
+import { RtcPairSocket } from 'rtc-pair-socket';
+
+export default class App {
+  socket?: RtcPairSocket;
+  party?: 'alice' | 'bob';
+
+  generateJoiningCode() {
+    // 128 bits of entropy
+    return [
+      Math.random().toString(36).substring(2, 12),
+      Math.random().toString(36).substring(2, 12),
+      Math.random().toString(36).substring(2, 7),
+    ].join('');
+  }
+
+  async host(code: string) {
+    // this.party = 'alice';
+    // const socket = new RtcPairSocket(code, 'alice');
+    // this.socket = socket;
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    // await new Promise<void>((resolve, reject) => {
+    //   socket.on('open', resolve);
+    //   socket.on('error', reject);
+    // });
+  }
+
+  async join(code: string) {
+    // this.party = 'bob';
+    // const socket = new RtcPairSocket(code, 'bob');
+    // this.socket = socket;
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    // await new Promise<void>((resolve, reject) => {
+    //   socket.on('open', resolve);
+    //   socket.on('error', reject);
+    // });
+  }
+
+  async mpcLargest(myNumber: number) {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    return 42;
+  }
+}
--- a/src/main.ts
+++ b/src/main.ts
@@ -1 +1,73 @@
-console.log('hello world');
+import App from './App';
+
+const hostBtn = document.getElementById('host-btn') as HTMLButtonElement;
+const joinBtn = document.getElementById('join-btn') as HTMLButtonElement;
+const submitNumberBtn = document.getElementById('submit-number-btn') as HTMLButtonElement;
+const joinSubmitBtn = document.getElementById('join-submit-btn') as HTMLButtonElement;
+
+const step1 = document.getElementById('step-1') as HTMLDivElement;
+const step2Host = document.getElementById('step-2-host') as HTMLDivElement;
+const step2Join = document.getElementById('step-2-join') as HTMLDivElement;
+const step3 = document.getElementById('step-3') as HTMLDivElement;
+const step4 = document.getElementById('step-4') as HTMLDivElement;
+const step5 = document.getElementById('step-5') as HTMLDivElement;
+
+const hostCodeElement = document.getElementById('host-code') as HTMLDivElement;
+const resultValueElement = document.getElementById('result-value') as HTMLSpanElement;
+
+let myNumber: number | null = null;
+
+const app = new App();
+
+async function handleHost() {
+  const code = app.generateJoiningCode();
+  hostCodeElement.textContent = code;
+
+  step1.classList.add('hidden');
+  step2Host.classList.remove('hidden');
+
+  await app.host(code);
+
+  step2Host.classList.add('hidden');
+  step3.classList.remove('hidden');
+}
+
+async function handleJoin() {
+  step1.classList.add('hidden');
+  step2Join.classList.remove('hidden');
+}
+
+async function handleJoinSubmit() {
+  const joinCodeInput = document.getElementById('join-code-input') as HTMLInputElement;
+  const code = joinCodeInput.value;
+
+  await app.join(code);
+
+  step2Join.classList.add('hidden');
+  step3.classList.remove('hidden');
+}
+
+async function handleSubmitNumber() {
+  const numberInput = document.getElementById('number-input') as HTMLInputElement;
+  myNumber = parseInt(numberInput.value, 10);
+
+  if (myNumber === null || isNaN(myNumber)) {
+    // eslint-disable-next-line no-alert
+    alert('Please enter a valid number.');
+    return;
+  }
+
+  step3.classList.add('hidden');
+  step4.classList.remove('hidden');
+
+  const result = await app.mpcLargest(myNumber);
+
+  step4.classList.add('hidden');
+  step5.classList.remove('hidden');
+  resultValueElement.textContent = result.toString();
+}
+
+hostBtn.addEventListener('click', handleHost);
+joinBtn.addEventListener('click', handleJoin);
+submitNumberBtn.addEventListener('click', handleSubmitNumber);
+joinSubmitBtn.addEventListener('click', handleJoinSubmit);
--- a/src/styles.css
+++ b/src/styles.css
@@ -0,0 +1,46 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+
+.app {
+  text-align: center;
+}
+
+.step {
+  margin-top: 20px;
+}
+
+.hidden {
+  display: none;
+}
+
+.code-box {
+  font-size: 1.5rem;
+  background-color: #f0f0f0;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border-left-color: #333;
+  animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}