From 236588307b97db6adf3e2bfc7e8c24bffe7e2c8e Mon Sep 17 00:00:00 2001 From: Josh Creek <8179928+jcreek@users.noreply.github.com> Date: Sun, 30 Jul 2023 17:01:00 +0100 Subject: [PATCH 1/2] feat(#5): Add the ability to select pre-defined card sets --- src/components/Estimates.svelte | 39 +++++++++++---------- src/routes/+page.svelte | 37 ++++++++++++++++++- src/routes/estimation/[roomId]/+page.svelte | 7 ++-- src/server/classes/Room.ts | 33 ++++++++++++++++- src/server/websocket.ts | 20 +++++++---- 5 files changed, 108 insertions(+), 28 deletions(-) diff --git a/src/components/Estimates.svelte b/src/components/Estimates.svelte index 83d7c4a..834a792 100644 --- a/src/components/Estimates.svelte +++ b/src/components/Estimates.svelte @@ -1,28 +1,31 @@
- {#each values as value} - - {/each} + + {#if values !== undefined} + {#each values as value} + + {/each} + {/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 563a70f..41a7abe 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,11 +1,26 @@

Simply start a room and share the URL to everyone else who needs to join the estimation session.

+
+ +
diff --git a/src/routes/estimation/[roomId]/+page.svelte b/src/routes/estimation/[roomId]/+page.svelte index f493fba..a5d1912 100644 --- a/src/routes/estimation/[roomId]/+page.svelte +++ b/src/routes/estimation/[roomId]/+page.svelte @@ -56,11 +56,12 @@ let showModal = true; const userId = generateId(); let users: Array = []; - let estimateGroups: { [key: number]: string[] } = {}; + let estimateGroups: { [key: number | string]: string[] } = {}; let showRestartButton = false; let showEstimates = false; let disableEstimates: boolean = false; let audioElement; + let selectedCardSet; function closeModal() { showModal = false; @@ -104,6 +105,8 @@ if (message.type === 'user-joined') { sendMessage(socket, { type: 'get-user-estimates' }); } else if (message.type === 'user-estimates') { + selectedCardSet = message.selectedCardSet.values; + message.users.forEach((user) => { let updatedUser = users.find((u) => u.userId === user.userId); if (updatedUser === undefined) { @@ -187,7 +190,7 @@ >Share Room Link - + {#if Object.keys(estimateGroups).length > 0} diff --git a/src/server/classes/Room.ts b/src/server/classes/Room.ts index af6ddd4..ae349a1 100644 --- a/src/server/classes/Room.ts +++ b/src/server/classes/Room.ts @@ -1,12 +1,43 @@ import { WebSocket } from 'ws'; import { User } from './User'; +class CardSet { + name: string; + values: Array; + example: string; + + constructor(name: string, values: Array, example: string) { + this.name = name; + this.values = values; + this.example = example; + } +} + +export const cardSets: Array = [ + { name: 'Fibonacci', values: [1, 2, 3, 5, 8, 13, 21, '?'], example: '(1, 2, 3, 5)' }, + { + name: 'T-Shirt Sizing', + values: ['XS', 'S', 'M', 'L', 'XL', 'XXL', '?'], + example: '(XS, S, M, L)' + }, + { name: 'Powers of 2', values: [1, 2, 4, 8, 16, 32, '?'], example: '(1, 2, 4, 8)' }, + { name: 'Sequential', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, '?'], example: '(1, 2, 3, 4)' } +]; + export class Room { id: string; + cardSet: CardSet; users: Map; - constructor(id: string) { + constructor(id: string, cardSetName: string) { this.id = id; + const cardSet = cardSets.find((cardSet) => cardSet.name === cardSetName); + if (cardSet) { + this.cardSet = cardSet; + } else { + this.cardSet = cardSets[0]; + } + this.users = new Map(); } diff --git a/src/server/websocket.ts b/src/server/websocket.ts index aff0a10..11b82b6 100644 --- a/src/server/websocket.ts +++ b/src/server/websocket.ts @@ -1,6 +1,6 @@ import express from 'express'; import { WebSocketServer, WebSocket } from 'ws'; -import { Room } from './classes/Room.js'; +import { Room, cardSets } from './classes/Room.js'; import { User } from './classes/User.js'; import { JoinRoomMessage } from './classes/messages/JoinRoomMessage.js'; import { ChangeEstimateMessage } from './classes/messages/ChangeEstimateMessage.js'; @@ -62,23 +62,31 @@ wss.on('connection', (ws: WebSocket, req) => { ws.on('error', onSocketPostError); + function createRoom(roomId: string, cardSetName: string) { + room = new Room(roomId, cardSetName); + rooms.add(room); + } + ws.on('message', (message) => { const data = JSON.parse(message.toString()); - if (data.type === 'join-room') { + if (data.type === 'create-room') { + const roomId = data.roomId; + const cardSetName = data.cardSetName; + createRoom(roomId, cardSetName); + } else if (data.type === 'join-room') { const joinRoomMessage: JoinRoomMessage = data as JoinRoomMessage; const { roomId, userId, name } = joinRoomMessage; room = getRoomById(roomId); // Create room if it doesn't already exist if (!room) { - room = new Room(roomId); - rooms.add(room); + createRoom(roomId, data.cardSetName); } // Create the user in the room const user = new User(userId, name); - room.addUser(ws, user); + room!.addUser(ws, user); broadcastToRoom(roomId, { type: 'user-joined', message: `${name} has joined the room` }); } else if (data.type === 'select-estimate') { @@ -144,7 +152,7 @@ wss.on('connection', (ws: WebSocket, req) => { } else if (data.type === 'get-user-estimates') { if (room) { const users = room.getUsers(); - broadcastToRoom(room.id, { type: 'user-estimates', users }); + broadcastToRoom(room.id, { type: 'user-estimates', users, selectedCardSet: room.cardSet }); } } else if (data.type === 'trigger-emoji') { const { cardId, emoji } = data; From 5e5b47956f8e7bd739da19b3d455decf478adb0e Mon Sep 17 00:00:00 2001 From: Josh Creek <8179928+jcreek@users.noreply.github.com> Date: Sun, 30 Jul 2023 17:06:38 +0100 Subject: [PATCH 2/2] feat(#5): Add nicer styling and messaging --- src/routes/+page.svelte | 40 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 41a7abe..4e597b6 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -31,9 +31,8 @@ goto(`/estimation/${roomId}`); } } - function onMessageReceived(message) { - - } + + function onMessageReceived(message) {} onMount(() => { socket = connectToWebSocket(null, onMessageReceived); @@ -48,7 +47,8 @@

- Simply start a room and share the URL to everyone else who needs to join the estimation session. + Simply choose a card set, start a room and share the URL to everyone else who needs to join the + estimation session.