dao-game / commit
Starting to transmit mouse positions.
public/index.html | 2 +- public/online.html | 2 +- src/app.ts | 3 ++- src/remote-game.ts | 40 ++++++++++++++++++++++++++++++++++++---- 4 files changed, 40 insertions(+), 7 deletions(-) diff --git a/public/index.html b/public/index.html index 5eb09b2..766b639 100644 --- a/public/index.html +++ b/public/index.html @@ -17,7 +17,7 @@ </div> <main> <div class="controls"> - <span class="p1-turn-text"> Red's turn! </span> + <span class="p1-turn-text"> Red's turn </span> <span class="divider">|</span> <span class="p2-turn-text"> Blue's turn </span> </div> diff --git a/public/online.html b/public/online.html index 88997d3..1b5fc5d 100644 --- a/public/online.html +++ b/public/online.html @@ -19,7 +19,7 @@ </div> <main> <div class="controls"> - <span class="p1-turn-text"> Red's turn! </span> + <span class="p1-turn-text"> Red's turn </span> <span class="divider">|</span> diff --git a/src/app.ts b/src/app.ts index ceec005..515eb31 100644 --- a/src/app.ts +++ b/src/app.ts @@ -1,3 +1,4 @@ -import { playGame } from './local-game' +// import { playGame } from './local-game' +import { playGame } from './remote-game'; playGame(); \ No newline at end of file diff --git a/src/remote-game.ts b/src/remote-game.ts index 4dd362f..90f579e 100644 --- a/src/remote-game.ts +++ b/src/remote-game.ts @@ -6,19 +6,51 @@ interface LocalData { selfPeerId: string; otherPeerIds: string[] } -const { getter: getData, setter: setData } = useLocalStorage<LocalData>('dao-game', - { selfPeerId: `dao-game-${prompt('Name?', 'Red') ?? 'Red'}`, otherPeerIds: ['dao-game-Blue'] }); +interface Pos { + x: number; + y: number; +} +interface PeerData { + mousePos: Pos; +} + +// { +// selfPeerId: `dao-game-${prompt('Name?', 'Red') ?? 'Red'}`, +// otherPeerIds: [] +// } +const { getter: getData, setter: setData } = useLocalStorage<LocalData>('dao-game'); export class PeerGame extends LocalGame { + peerMousePos: Pos; + public constructor() { super('Local', 'Remote'); const { selfPeerId, otherPeerIds } = getData(); const peer = new Peer(selfPeerId); + peer.on('connection',) + if (otherPeerIds.length > 0) { const otherPeer = otherPeerIds[0]; - peer.connect(otherPeer); + const conn = peer.connect(otherPeer); + conn.on('data', (data: string) => { + const peerData = JSON.parse(data) as PeerData; + if (peerData && peerData.mousePos) { + this.peerMousePos = peerData.mousePos; + } + }); + const main = document.getElementsByTagName('main')[0]; + main.addEventListener('mousemove', (ev: MouseEvent) => { + const peerData: PeerData = { mousePos: { x: ev.x, y: ev.y } }; + const text = JSON.stringify(peerData); + conn.send(text); + }); } - } +} + +export const playGame = () => { + const pg = new PeerGame(); + pg.init(); + pg.nextMove(); } \ No newline at end of file