jcreek/EstimationPoker
1
0
Fork 0
mirror of https://github.com/jcreek/EstimationPoker.git synced 2026-07-13 02:53:46 +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"> <script lang="ts">
/** @type {import('./$types').PageData} */ /** @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 UsersList from '../../../components/UsersList.svelte';
import EstimateGroupsList from '../../../components/EstimateGroupsList.svelte'; import EstimateGroupsList from '../../../components/EstimateGroupsList.svelte';
import AverageEstimate from '../../../components/AverageEstimate.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; 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(() => { onMount(() => {
// Connect to WebSocket server with the room ID // 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 = [ function joinRoom(name: string) {
{ name: 'User 1', estimate: 8 }, sendMessage(socket, new JoinRoomMessage(data.roomId, generateId(), name));
{ name: 'User 2', estimate: 8 }, }
{ name: 'User 3', estimate: 13 },
{ name: 'User 4', estimate: 13 }, let estimates = [];
{ name: 'User 5', estimate: 13 }, // let estimates = [
{ name: 'User 6', estimate: 21 }, // { name: 'User 1', estimate: 8 },
{ name: 'User 7', estimate: 21 }, // { name: 'User 2', estimate: 8 },
{ name: 'User 8', estimate: 21 }, // { name: 'User 3', estimate: 13 },
{ name: 'User 9', estimate: 34 }, // { name: 'User 4', estimate: 13 },
{ name: 'User 10', estimate: 34 }, // { name: 'User 5', estimate: 13 },
{ name: 'User 11', estimate: 34 }, // { name: 'User 6', estimate: 21 },
{ name: 'User 12', estimate: 34 }, // { name: 'User 7', estimate: 21 },
{ name: 'User 13', estimate: 55 }, // { name: 'User 8', estimate: 21 },
{ name: 'User 14', estimate: 55 }, // { name: 'User 9', estimate: 34 },
{ name: 'User 15', estimate: 55 } // { 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 // Group users by their estimates
let estimateGroups: { [key: number]: string[] } = {}; let estimateGroups: { [key: number]: string[] } = {};
@@ -50,38 +89,38 @@
}); });
} }
function calculateAverageEstimate() { // function calculateAverageEstimate() {
let total = 0; // let total = 0;
estimates.forEach((estimate) => { // estimates.forEach((estimate) => {
if (estimate.estimate !== null) { // if (estimate.estimate !== null) {
total += estimate.estimate; // total += estimate.estimate;
} // }
}); // });
return total / estimates.length; // return total / estimates.length;
} // }
let average = calculateAverageEstimate(); // let average = calculateAverageEstimate();
onMount(() => { // function handleEstimateChange(event: any, user: any) {
groupEstimates(); // const { value } = event.target;
}); // user.estimate = value !== '' ? Number(value) : null;
// groupEstimates();
function handleEstimateChange(event: any, user: any) { // average = calculateAverageEstimate();
const { value } = event.target; // }
user.estimate = value !== '' ? Number(value) : null;
groupEstimates();
average = calculateAverageEstimate();
}
</script> </script>
<h1>Estimation Page</h1> <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} {#if Object.keys(estimateGroups).length > 0}
<EstimateGroupsList {estimateGroups} /> <EstimateGroupsList {estimateGroups} />
<AverageEstimate {average} /> <AverageEstimate {average} />
{/if} {/if} -->
<style> <style>
/* CSS styles */ /* CSS styles */