diff --git a/src/components/ActionRegistry.tsx b/src/components/ActionRegistry.tsx index e69de29..f1e97a8 100644 --- a/src/components/ActionRegistry.tsx +++ b/src/components/ActionRegistry.tsx @@ -0,0 +1,60 @@ +import { requestJSON } from '@/client/utils' +import type { RoomData } from '@/db/model' +import type { ActionAnswer, ActionJolly } from '@/ggwp' +import { useEffect, useState } from 'preact/hooks' + +type Props = { + roomId: string +} + +const ActionCardAnswer = ({ action }: { action: ActionAnswer }) => { + return ( +
+ {action.question} +
{action.team}
+
{action.outcome}
+
+ ) +} + +const ActionCardJolly = ({ action }: { action: ActionJolly }) => { + return ( +
+ {action.team} +
{action.groupId}
+
+ ) +} + +export const ActionRegistry = ({ roomId }: Props) => { + const [room, setRoom] = useState(null) + useEffect(() => { + requestJSON(`/api/room/${roomId}`).then(room => { + setRoom(room) + }) + }, []) + + if (!room) { + return
Loading...
+ } + + if (room.actions.length === 0) { + return

Ancora nessuna azione

+ } + + return ( + <> + {room.actions.map(action => + action.type === 'answer' ? ( + + ) : action.type === 'jolly' ? ( + + ) : ( +
+ Unknown action type: {JSON.stringify(action)} +
+ ) + )} + + ) +} diff --git a/src/components/AdminPage.tsx b/src/components/AdminPage.tsx new file mode 100644 index 0000000..5d0e6d2 --- /dev/null +++ b/src/components/AdminPage.tsx @@ -0,0 +1,27 @@ +import { LiveLeaderboard } from '@/components/LiveLeaderboard' +import { SubmitAction } from '@/components/SubmitAction' +import { ActionRegistry } from '@/components/ActionRegistry' +import { useRef, useState } from 'preact/hooks' + +export const AdminPage = ({ room }: { room: string }) => { + const listeners = useRef void>>({}) + + return ( + <> +

Admin

+

{room}

+ + Object.values(listeners.current).forEach(listener => listener(teamQuestion)) + } + /> +   +

Azioni

+ (listeners.current[key] = listener)} /> +   +

Registro Azioni

+ + + ) +} diff --git a/src/components/Leaderboard.tsx b/src/components/Leaderboard.tsx index 514ea6a..9d19d83 100644 --- a/src/components/Leaderboard.tsx +++ b/src/components/Leaderboard.tsx @@ -4,10 +4,10 @@ type Props = { questions: Question[] scoreboard: Scoreboard - onQuestionClick?: (team: string, questionId: string) => void + selectTeamQuestion?: ({ team, question }: { team: string; question: string }) => void } -export const Leaderboard = ({ questions, scoreboard, onQuestionClick }: Props) => { +export const Leaderboard = ({ questions, scoreboard, selectTeamQuestion }: Props) => { return (
{questions.map((question, j) => ( -
onQuestionClick?.(team, question.id)}> +
{ + console.log('emitting', { team, question: question.id }) + return selectTeamQuestion?.({ team, question: question.id }) + }} + > {questionScores[question.id]}
))} diff --git a/src/components/LiveLeaderboard.tsx b/src/components/LiveLeaderboard.tsx index 7b8fce7..b5862b1 100644 --- a/src/components/LiveLeaderboard.tsx +++ b/src/components/LiveLeaderboard.tsx @@ -6,9 +6,10 @@ import { computeScoreboardState } from '@/ggwp' type Props = { roomId: string + selectTeamQuestion?: ({ team, question }: { team: string; question: string }) => void } -export const LiveLeaderboard = ({ roomId }: Props) => { +export const LiveLeaderboard = ({ roomId, selectTeamQuestion }: Props) => { const [room, setRoom] = useState(null) useEffect(() => { requestJSON(`/api/room/${roomId}`).then(room => { @@ -30,5 +31,5 @@ export const LiveLeaderboard = ({ roomId }: Props) => { room.actions ) - return + return } diff --git a/src/components/SubmitAction.tsx b/src/components/SubmitAction.tsx index 8eace19..3b880d4 100644 --- a/src/components/SubmitAction.tsx +++ b/src/components/SubmitAction.tsx @@ -6,32 +6,71 @@ import { useEffect, useState } from 'preact/hooks' type Outcome = 'correct' | 'partial' | 'wrong' const handleSendAnswer = (action: Action) => { + // TODO: send action to server console.log(action) } -export const SubmitActionAnswer = ({ room }: { room: RoomData }) => { +export const SubmitActionAnswer = ({ + room, + onTeamQuestionIndex, +}: { + room: RoomData + onTeamQuestionIndex?: Receiver<{ team: string; question: string }> +}) => { const [answer, setAnswer] = useState({ question: '', team: '', outcome: 'correct', }) + onTeamQuestionIndex?.('SubmitActionAnswer', ({ team, question }) => { + console.log('onTeamQuestionIndex', team, question) + setAnswer(answer => ({ ...answer, team, question })) + }) + return ( - <> - +

Invia Risposta

+ + + {room.questions.map((question, i) => ( + + ))} + + + {/* setAnswer({ ...answer, team: e.currentTarget.value })} - /> + /> */} + + + +

Invia Jolly

+ + + + {room.teams.map((team, i) => ( + + ))} + + + + - +
) } -export const SubmitAction = ({ roomId }: { roomId: string }) => { +export const SubmitAction = ({ + roomId, + onTeamQuestionIndex, +}: { + roomId: string + onTeamQuestionIndex?: Receiver<{ team: string; question: string }> +}) => { const [room, setRoom] = useState(null) useEffect(() => { requestJSON(`/api/room/${roomId}`).then(room => { @@ -104,12 +192,9 @@ export const SubmitAction = ({ roomId }: { roomId: string }) => { } return ( -
-

Risposta

- - -

Jolly

- -
+ <> + + + ) } diff --git a/src/pages/[room]/admin.astro b/src/pages/[room]/admin.astro index 6adce6a..dd594d8 100644 --- a/src/pages/[room]/admin.astro +++ b/src/pages/[room]/admin.astro @@ -1,9 +1,9 @@ --- import Base from '@/layouts/Base.astro' -import { LiveLeaderboard } from '@/components/LiveLeaderboard' import { getSession } from '@/db/sessions' -import { SubmitAction } from '@/components/SubmitAction' + +import { AdminPage } from '@/components/AdminPage' const { room } = Astro.params if (!room) { @@ -17,6 +17,9 @@ if (Astro.cookies.has('sid')) { } const sessionRoom = getSession(sid.value) + if (!sessionRoom) { + return Astro.redirect('/error?msg=' + encodeURIComponent(`Sessione non valida`)) + } if (sessionRoom !== room) { return Astro.redirect('/error?msg=' + encodeURIComponent(`Sei solo l'admin di "${sessionRoom}"`)) @@ -24,15 +27,13 @@ if (Astro.cookies.has('sid')) { } else { return Astro.redirect('/error?msg=' + encodeURIComponent(`Devi essere loggato per accedere a questa pagina`)) } ---- - -

Admin

-

{room}

- +type Callback = (value: T) => void -   +const listeners: Callback<{ team: string; question: string }>[] = [] +console.log('listeners', listeners) +--- -

Azioni

- + + diff --git a/src/styles.css b/src/styles.css index 4636075..aaa8323 100644 --- a/src/styles.css +++ b/src/styles.css @@ -225,7 +225,7 @@ select { outline: none; - &:focus { + &:hover { background: oklch(from var(--tint) calc(l + 1) 0.05 h); } }