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

feat(*): Add working room joining and name submission modal

Browse Source
This commit is contained in:
Josh Creek
2023-07-09 21:34:49 +00:00
parent d866e094f8
commit c95c60638e
1 changed files with 83 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/estimation/[roomId]/+page.svelte
+83 -44
View File
@@ -1,38 +1,77 @@
<script lang="ts">
/** @type {import('./$types').PageData} */
export let data;
export let data;
import { onMount } from 'svelte';
import { onMount, afterUpdate } from 'svelte';
import UsersList from '../../../components/UsersList.svelte';
import EstimateGroupsList from '../../../components/EstimateGroupsList.svelte';
import AverageEstimate from '../../../components/AverageEstimate.svelte';
import { connectToWebSocket, sendMessage } from '../estimation.js';
import Modal from '../../../components/Modal.svelte';
import { connectToWebSocket, sendMessage, generateId } from '../estimation.js';
import { User } from '../../../../server/classes/user';
import { Room } from '../../../../server/classes/room';
import { ChangeEstimateMessage } from '../../../../server/classes/messages/ChangeEstimateMessage';
import { JoinRoomMessage } from '../../../../server/classes/messages/JoinRoomMessage';
import { SelectEstimateMessage } from '../../../../server/classes/messages/SelectEstimateMessage';
let socket;
console.log(data.roomId);
let showModal = true;
let currentUserIndex = -1;
let userEstimateFields: HTMLInputElement[] = [];
function closeModal() {
showModal = false;
}
afterUpdate(() => {
// Disable all estimate fields
userEstimateFields.forEach((field) => (field.disabled = true));
// Enable the estimate field for the current user
if (currentUserIndex !== -1) {
userEstimateFields[currentUserIndex].disabled = false;
}
});
function onMessageReceived(message) {
console.log(message);
};
onMount(() => {
// Connect to WebSocket server with the room ID
socket = connectToWebSocket(data.roomId);
socket = connectToWebSocket(data.roomId, onMessageReceived);
// // Initialize the userEstimateFields array
// userEstimateFields = Array.from(
// document.querySelectorAll('.estimate-field')
// ) as HTMLInputElement[];
// groupEstimates();
});
let estimates = [
{ name: 'User 1', estimate: 8 },
{ name: 'User 2', estimate: 8 },
{ name: 'User 3', estimate: 13 },
{ name: 'User 4', estimate: 13 },
{ name: 'User 5', estimate: 13 },
{ name: 'User 6', estimate: 21 },
{ name: 'User 7', estimate: 21 },
{ name: 'User 8', estimate: 21 },
{ name: 'User 9', estimate: 34 },
{ name: 'User 10', estimate: 34 },
{ name: 'User 11', estimate: 34 },
{ name: 'User 12', estimate: 34 },
{ name: 'User 13', estimate: 55 },
{ name: 'User 14', estimate: 55 },
{ name: 'User 15', estimate: 55 }
];
function joinRoom(name: string) {
sendMessage(socket, new JoinRoomMessage(data.roomId, generateId(), name));
}
let estimates = [];
// let estimates = [
// { name: 'User 1', estimate: 8 },
// { name: 'User 2', estimate: 8 },
// { name: 'User 3', estimate: 13 },
// { name: 'User 4', estimate: 13 },
// { name: 'User 5', estimate: 13 },
// { name: 'User 6', estimate: 21 },
// { name: 'User 7', estimate: 21 },
// { name: 'User 8', estimate: 21 },
// { name: 'User 9', estimate: 34 },
// { name: 'User 10', estimate: 34 },
// { name: 'User 11', estimate: 34 },
// { name: 'User 12', estimate: 34 },
// { name: 'User 13', estimate: 55 },
// { name: 'User 14', estimate: 55 },
// { name: 'User 15', estimate: 55 }
// ];
// Group users by their estimates
let estimateGroups: { [key: number]: string[] } = {};
@@ -50,38 +89,38 @@
});
}
function calculateAverageEstimate() {
let total = 0;
estimates.forEach((estimate) => {
if (estimate.estimate !== null) {
total += estimate.estimate;
}
});
return total / estimates.length;
}
// function calculateAverageEstimate() {
// let total = 0;
// estimates.forEach((estimate) => {
// if (estimate.estimate !== null) {
// total += estimate.estimate;
// }
// });
// return total / estimates.length;
// }
let average = calculateAverageEstimate();
// let average = calculateAverageEstimate();
onMount(() => {
groupEstimates();
});
function handleEstimateChange(event: any, user: any) {
const { value } = event.target;
user.estimate = value !== '' ? Number(value) : null;
groupEstimates();
average = calculateAverageEstimate();
}
// function handleEstimateChange(event: any, user: any) {
// const { value } = event.target;
// user.estimate = value !== '' ? Number(value) : null;
// groupEstimates();
// average = calculateAverageEstimate();
// }
</script>
<h1>Estimation Page</h1>
<UsersList {estimates} {handleEstimateChange} />
{#if showModal}
<Modal {closeModal} {joinRoom} />
{/if}
<!-- <UsersList {estimates} {handleEstimateChange} bind:this={userEstimateFields} />
{#if Object.keys(estimateGroups).length > 0}
<EstimateGroupsList {estimateGroups} />
<AverageEstimate {average} />
{/if}
{/if} -->
<style>
/* CSS styles */