diff --git a/index.html b/index.html index 0d4fa5e..c55228d 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,50 @@ - + - - - - MPC Hello - - -
- - - + + + + + MPC Hello + + + + +
+

MPC Hello World

+ +
+ + +
+ + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/src/App.ts b/src/App.ts new file mode 100644 index 0000000..1bf3713 --- /dev/null +++ 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((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((resolve, reject) => { + // socket.on('open', resolve); + // socket.on('error', reject); + // }); + } + + async mpcLargest(myNumber: number) { + await new Promise(resolve => setTimeout(resolve, 1000)); + return 42; + } +} diff --git a/src/main.ts b/src/main.ts index 6be0237..e06e4ff 100644 --- 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); diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 0000000..a4c95c9 --- /dev/null +++ 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); + } +} \ No newline at end of file