added headings

src/client/theme.ts

@@ -1,4 +1,8 @@
-import { extendTheme, withDefaultColorScheme } from '@chakra-ui/react';
+import {
+  defineStyleConfig,
+  extendTheme,
+  withDefaultColorScheme,
+} from '@chakra-ui/react';
 
 export const theme = extendTheme(
   {
@@ -6,6 +10,13 @@ export const theme = extendTheme(
       initialColorMode: 'light',
       useSystemColorMode: false,
     },
+    components: {
+      Heading: defineStyleConfig({
+        baseStyle: {
+          textAlign: 'center',
+        },
+      }),
+    },
   },
   withDefaultColorScheme({ colorScheme: 'orange' }),
 );

src/client/view/Canvas/index.tsx

@@ -9,15 +9,6 @@ const Canvas: React.FC = () => {
   const { gameState } = useGameState();
 
   if (!gameState) return null;
-  const players = [
-    { score: 0, name: 'Der große Saurier' },
-    { score: 0, name: 'Zwei Hühner' },
-    { score: 0, name: 'Bongo der Herrscher' },
-    { score: 0, name: 'Bongo der D' },
-    { score: 0, name: 'Zwei Keks' },
-    { score: 0, name: 'Drei Keks' },
-    { score: 0, name: 'Quadro keks' },
-  ];
   const currentQuestion = questions[gameState.category][gameState.round];
   return (
     <>
@@ -38,7 +29,7 @@ const Canvas: React.FC = () => {
               templateColumns="repeat(auto-fit,minmax(300px,1fr));"
               gap="32px"
             >
-              {players.map((player) => (
+              {gameState.players.map((player) => (
                 <Flex
                   justifySelf="center"
                   width="300px"
@@ -47,12 +38,18 @@ const Canvas: React.FC = () => {
                   alignItems="center"
                   paddingX="8px"
                 >
-                  <Heading size="sm" whiteSpace="normal" textAlign="center">
+                  <Heading
+                    size="sm"
+                    color="orange.600"
+                    whiteSpace="normal"
+                    textAlign="center"
+                  >
                     {player.name}
                   </Heading>
-                  <Heading color="orange.600" size="sm">
+                  <Heading size="sm">{player.score} Punkte</Heading>
-                    {player.score}
+                  {player.showAnswer && (
-                  </Heading>
+                    <Heading size="sm">{player.answer}</Heading>
+                  )}
                 </Flex>
               ))}
             </Grid>

src/client/view/Player/index.tsx

@@ -3,6 +3,7 @@ import { usePlayerName } from './playerAtom';
 import { Join } from './scenes/Join';
 import { questions } from 'questions';
 import Question from './scenes/Question';
+import { Center, Heading } from '@chakra-ui/react';
 
 export const Player: React.FC = () => {
   const [playerName] = usePlayerName();
@@ -12,5 +13,15 @@ export const Player: React.FC = () => {
 
   const currentQuestion = questions[gameState.category][gameState.round];
 
-  return playerName ? <Question question={currentQuestion} /> : <Join />;
+  return playerName ? (
+    gameState.screen === 'question' ? (
+      <Question question={currentQuestion} />
+    ) : (
+      <Center minWidth="100vw" minHeight="100vh">
+        <Heading>Hier gibt es noch nichts zu sehen.</Heading>
+      </Center>
+    )
+  ) : (
+    <Join />
+  );
 };

src/client/view/Player/scenes/Question/FlagQuestion.tsx

@@ -13,11 +13,12 @@ const FlagQuestionComponent: React.FC<{
 
   return (
     <VStack padding="32px" flexDir="column" gap="32px">
+      <Heading size="md">Zu welchem Land gehört diese Flagge?</Heading>
       <Image
         src={question.image}
         height="auto"
         width="600px"
-        border="1px solid grey"
+        border="3px solid #333"
       />
       {isCanvas && gameState?.showCorrectAnswer ? (
         <Heading size="md" color="orange.600">

src/client/view/Player/scenes/Question/LawQuestion.tsx

@@ -1,4 +1,4 @@
-import { Button, VStack } from '@chakra-ui/react';
+import { Button, Heading, VStack } from '@chakra-ui/react';
 import { LawQuestion } from 'types/Question';
 import { usePlayer } from '../../playerAtom';
 import { useGameState } from 'client/hooks/useGameState';
@@ -15,6 +15,7 @@ const LawQuestionComponent: React.FC<{
 
   return (
     <VStack padding="32px" flexDir="column" gap="32px">
+      <Heading size="md">Welches Gesetz gibt es wirklich?</Heading>
       {question.laws.map((law, index) => (
         <Button
           key={law}

src/types/GameState.ts

@@ -1,6 +1,11 @@
 import { z } from 'zod';
 
-export const screen = z.union([z.literal('welcome'), z.literal('question')]);
+export const screen = z.union([
+  z.literal('welcome'),
+  z.literal('question'),
+  z.literal('overview'),
+  z.literal('question-preview'),
+]);
 
 export type ScreenType = z.infer<typeof screen>;