1. Headings lined up. 2. Color scheme for results.

This commit is contained in:
aodulov
2025-10-13 15:21:32 +03:00
parent be858855c8
commit 3e2c3bf9f3
5 changed files with 29 additions and 27 deletions

1
.gitignore vendored
View File

@@ -1,3 +1,4 @@
/frontend/node_modules
/backend/node_modules
/.context
.env

View File

@@ -143,7 +143,7 @@ export const createWebSocketServer = (server: any) => {
if (!sessionData.clients.has(clientId)) {
sessionData.clients.set(clientId, ws);
console.log(`Client ${clientId} registered for session: ${sessionId}. Total clients: ${sessionData.clients.size}`);
ws.send(JSON.stringify({ type: 'STATE_UPDATE', payload: { session: getSerializableSession(sessionData) } }));
ws.send(JSON.stringify({ type: 'STATE_UPDATE', payload: { session: getSerializableSession(sessionData, clientId) } }));
}
console.log(`Received message from ${clientId} in session ${sessionId}:`, type);
@@ -202,6 +202,7 @@ export const handleWebSocketMessage = async (ws: WebSocket, sessionId: string, p
switch (type) {
case 'REGISTER_CLIENT':
console.log(`Client ${clientId} registered successfully for session ${sessionId}.`);
break;
case 'SETUP_SESSION':

View File

@@ -8,8 +8,8 @@ interface ResultsDisplayProps {
decision: Decision;
}
const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded?: boolean }>
= ({ title, desire, defaultExpanded = true }) => {
const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded?: boolean; borderColor?: string }>
= ({ title, desire, defaultExpanded = true, borderColor = '#e0e0e0' }) => {
const [expanded, setExpanded] = React.useState(defaultExpanded);
if (!desire) {
@@ -17,7 +17,7 @@ const CategorySection: React.FC<{ title: string; desire: string; defaultExpanded
}
return (
<Box sx={{ mt: 3, border: '1px solid #e0e0e0', borderRadius: '4px', p: 2 }}>
<Box sx={{ mt: 3, border: `1px solid ${borderColor}`, borderRadius: '4px', p: 2 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Typography variant="h6" component="h2" gutterBottom>
{title}
@@ -46,11 +46,11 @@ const ResultsDisplay: React.FC<ResultsDisplayProps> = ({ decision }) => {
Cooperative Decision
</Typography>
<CategorySection title="Go-to" desire={decision.goTo} />
<CategorySection title="Also good" desire={decision.alsoGood} />
<CategorySection title="Considerable" desire={decision.considerable} defaultExpanded={true} />
<CategorySection title="No-goes" desire={decision.noGoes} />
<CategorySection title="Needs discussion" desire={decision.needsDiscussion} />
<CategorySection title="Go-to" desire={decision.goTo} borderColor="#a5d6a7" /> {/* Pale Green */}
<CategorySection title="Also good" desire={decision.alsoGood} borderColor="#90caf9" /> {/* Pale Blue */}
<CategorySection title="Considerable" desire={decision.considerable} defaultExpanded={true} /> {/* Grey (default) */}
<CategorySection title="Needs discussion" desire={decision.needsDiscussion} borderColor="#ffe082" /> {/* Pale Yellow */}
<CategorySection title="No-goes" desire={decision.noGoes} borderColor="#ef9a9a" /> {/* Pale Red */}
</Box>
);
};

View File

@@ -80,6 +80,7 @@ export const useSession = (sessionId: string): [Session | null, Dispatch<SetStat
const handleMessage = (message: any) => {
console.log('useSession: Processing incoming message:', message);
if (message.type === 'STATE_UPDATE') {
console.log('useSession: Received STATE_UPDATE, session payload:', message.payload.session);
setSession(message.payload.session);
setError(null); // Clear error on successful state update
} else if (message.type === 'ERROR') {

View File

@@ -54,21 +54,11 @@ const SessionPage = () => {
return (
<Container maxWidth="md">
<Box sx={{ mt: 4 }}>
{wsError && <Alert severity="error" sx={{ mb: 2 }}>{wsError}</Alert>}
<Typography variant="h4" component="h1" gutterBottom>
{session.topic || session.sessionId}
</Typography>
{session.description && (
<Typography variant="body1" color="text.secondary" sx={{ mb: 2 }}>
{session.description}
</Typography>
)}
{session.state === SessionState.SETUP && (
<Box sx={{ mt: 4, p: 3, border: '1px dashed grey', borderRadius: '4px', textAlign: 'center' }}>
<Typography variant="h6" component="p" gutterBottom>
Set Up Desires Harmonization
<Box sx={{ mt: 4, p: 3, textAlign: 'center' }}>
<Typography variant="h5" component="h5" gutterBottom>
Harmonize Desires
</Typography>
<TextField
margin="normal"
@@ -130,11 +120,20 @@ const SessionPage = () => {
</Box>
)}
{/* Session status is hidden as per FR-008 */}
{session.state !== SessionState.SETUP && (
<Typography variant="h6" gutterBottom>
<Box sx={{ mt: 2, p: 2, border: '1px solid #e0e0e0', borderRadius: '4px', backgroundColor: '#f5f5f5' }}>
<Typography variant="h4" component="h4" gutterBottom>
{session.topic || session.sessionId}
</Typography>
{session.description && (
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
Details: {session.description}
</Typography>
)}
<Typography variant="body2" color="text.secondary">
Expected Responses: {session.expectedResponses}
</Typography>
</Box>
)}
{session.state === SessionState.GATHERING && !hasSubmittedCurrentParticipant && (