jcreek/EstimationPoker
1
0
Fork 0
mirror of https://github.com/jcreek/EstimationPoker.git synced 2026-07-12 18:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #19 from jcreek/5-add-the-ability-to-select-pre-defined-card-sets-eg-fibonaccimodified-fibonacci

Browse Source 
feat(#5): Add the ability to select pre-defined card sets
This commit is contained in:
Josh Creek
2023-07-30 17:27:03 +01:00
committed by GitHub
parent 9e650302aa 5e5b47956f
commit 65ba5304ba
5 changed files with 141 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Estimates.svelte
+21 -18
View File
@@ -1,28 +1,31 @@
<script lang="ts">
export let values: Array<number | string> = [1, 2, 3, 5, 8, 13, 21, '?'];
export let values: Array<number | string>;
export let onEstimateClick: (value: number | string) => void;
export let disableEstimates: boolean = false;
</script>
<div id="estimates-list">
<div class="centered-container">
{#each values as value}
<button
disabled={disableEstimates}
class="{disableEstimates ? 'estimate-card disabled' : 'estimate-card'}"
on:click={() => onEstimateClick(value)}
on:keydown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
onEstimateClick(value);
}
}}
aria-label={`Estimate: ${value}`}
tabindex="0"
>
<p class="value">{value}</p>
</button>
{/each}
{#if values !== undefined}
{#each values as value}
<button
disabled={disableEstimates}
class="{disableEstimates ? 'estimate-card disabled' : 'estimate-card'}"
on:click={() => onEstimateClick(value)}
on:keydown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
onEstimateClick(value);
}
}}
aria-label={`Estimate: ${value}`}
tabindex="0"
>
<p class="value">{value}</p>
</button>
{/each}
{/if}
</div>
</div>
src/routes/+page.svelte
+69 -2
View File
@@ -1,11 +1,26 @@
<script>
import { generateId } from './estimation/estimation.js';
import { onMount } from 'svelte';
import { connectToWebSocket, sendMessage, generateId } from './estimation/estimation.js';
import { goto } from '$app/navigation';
let roomId = '';
let socket;
const cardSets = [
{ 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)' }
];
let selectedCardSet = cardSets[0];
function startARoom() {
const roomId = generateId();
sendMessage(socket, { roomId: roomId, type: 'create-room', cardSetName: selectedCardSet.name });
goto(`/estimation/${roomId}`);
}
@@ -16,12 +31,32 @@
goto(`/estimation/${roomId}`);
}
}
function onMessageReceived(message) {}
onMount(() => {
socket = connectToWebSocket(null, onMessageReceived);
setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({ type: 'ping' }));
}
}, 45000); // send a ping every 45 seconds
});
</script>
<div class="container">
<p>
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.
</p>
<div class="dropdown">
<select on:change={(e) => (selectedCardSet = cardSets[e.target.selectedIndex])}>
{#each cardSets as cardSet, i}
<option value={i}>{cardSet.name} {cardSet.example}</option>
{/each}
</select>
</div>
<button class="button button-green" on:click={startARoom}>Start a room</button>
<div class="join-room-container">
<label for="room-id">Join a room:</label>
@@ -66,6 +101,38 @@
max-width: 20rem;
}
.dropdown {
display: inline-block;
margin-bottom: 10px;
}
.dropdown select {
appearance: none;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: none;
color: #333;
font-size: 14px;
height: 34px;
padding: 6px 12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-position: right 8px center;
background-repeat: no-repeat;
background-size: 16px 16px;
padding-right: 24px;
}
.dropdown select:focus {
border-color: #66afe9;
box-shadow: none;
outline: none;
}
.dropdown select::-ms-expand {
display: none;
}
.button {
appearance: none;
border: 1px solid rgba(27, 31, 35, 0.15);
src/routes/estimation/[roomId]/+page.svelte
+5 -2
View File
@@ -56,11 +56,12 @@
let showModal = true;
const userId = generateId();
let users: Array<User> = [];
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</button
>
<Estimates {disableEstimates} onEstimateClick={handleEstimateClick} />
<Estimates values={selectedCardSet} {disableEstimates} onEstimateClick={handleEstimateClick} />
{#if Object.keys(estimateGroups).length > 0}
<EstimateGroupsList {estimateGroups} />
src/server/classes/Room.ts
+32 -1
View File
@@ -1,12 +1,43 @@
import { WebSocket } from 'ws';
import { User } from './User';
class CardSet {
name: string;
values: Array<string | number>;
example: string;
constructor(name: string, values: Array<string | number>, example: string) {
this.name = name;
this.values = values;
this.example = example;
}
}
export const cardSets: Array<CardSet> = [
{ 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<WebSocket, User>;
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();
}
src/server/websocket.ts
+14 -6
View File
@@ -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;