feat: add card click handler

PapePathe · Oct 27, 2023 · 65c877a · 65c877a
1 parent 3edf8ed
commit 65c877a
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 28 deletions.
diff --git a/baloot/src/App.js b/baloot/src/App.js
@@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect, useRef } from 'react';
 import useWebSocket, { ReadyState } from 'react-use-websocket';
 import TakesGroupView from './components/TakesGroupView';
 import PlayingCardsView from './components/PlayingCardsView';
+import { Text, Grid, GridItem, VStack, Box, StackDivider } from '@chakra-ui/react';
 
 const WS_URL = 'ws://127.0.0.1:7777/ws/100';
 
@@ -11,6 +12,7 @@ function App() {
   const [ playingCards, setPlayingCards] = useState([]);
   const [ cards, setCards] = useState([]);
   const [ takes, setTakes] = useState([]);
+  const [ gametake, setGametake] = useState(null);
   const [ playerTakes, setPlayerTakes] = useState([]);
   const [ playerID, setPlayerID] = useState(null);
   const dragItem = useRef();
@@ -61,8 +63,9 @@ function App() {
           case 2:
             setCards((prev) => [])
             setTakes((prev) => [])
-            setPlayerTakes((prev) => ['test'])
+            setPlayerTakes((prev) => [])
             setPlayingCards((prev) => lastJsonMessage.player.playing_hand.Cards)
+            setGametake((prev) => lastJsonMessage.gametake.Name)
             break
           case 5:
             setPlayerTakes((prev) => [...prev, lastJsonMessage.take])
@@ -77,10 +80,14 @@ function App() {
   }, [lastJsonMessage, setMessageHistory]);
 
   const handleClickSendMessage = useCallback((take, pid) => {
-    console.log(take);
     sendMessage(JSON.stringify({player_id: `${pid}`, gametake: take, id: "2"}))
   }, [sendMessage]);
 
+  const handleClickPlayMessage = useCallback((couleur, genre, event) => {
+    sendMessage(JSON.stringify({player_id: `${playerID}`, color: couleur, genre: genre, id: '4'}))
+    console.log(event, couleur, genre);
+  }, []);
+
   const connectionStatus = {
     [ReadyState.CONNECTING]: 'Connecting',
     [ReadyState.OPEN]: 'Open',
@@ -91,22 +98,31 @@ function App() {
 
   return (
     <div>
-      <span>The WebSocket is currently {connectionStatus}</span>
-      {takes.length > 0 ? (
-        <TakesGroupView takes={takes} onClickHandler={handleClickSendMessage} playerID={playerID}  />
-      ) : null }
-
-      {playingCards? (
-        <PlayingCardsView cards={playingCards} onDragEnd={orderPlayingCards} onDragEnter={dragEnter} onDragStart={dragStart}  />
-      ) : null }
-
-      {cards? (
-        <PlayingCardsView cards={cards} onDragEnd={drop} onDragEnter={dragEnter} onDragStart={dragStart}  />
-      ) : null}
+      <div>
+        <Grid h='100vh' templateRows='repeat(3, 1fr)' templateColumns='repeat(6, 1fr)' gap={0}>
+          <GridItem colSpan={1} rowSpan={3} bg='tomato' />
+          <GridItem colSpan={4} rowSpan={3} bg='papayawhip'>
+            <VStack spacing={0} align='stretch' height='100%'>
+              <Box h='25%' bg='yellow.200'></Box>
+              <Box h='40%' bg='tomato'>{gametake? (<Text>{gametake}</Text>) : null}</Box>
+              <Box h='35%' bg='pink.100'>
+                {takes? (
+                  <TakesGroupView takes={takes} onClickHandler={handleClickSendMessage} playerID={playerID}  />
+                ) : null }
+                {playingCards? (
+                  <PlayingCardsView cards={playingCards} onDragEnd={orderPlayingCards} onDragEnter={dragEnter} onDragStart={dragStart}  onClick={handleClickPlayMessage} />
+                ) : null }
+                {cards? (
+                  <PlayingCardsView cards={cards} onDragEnd={drop} onDragEnter={dragEnter} onDragStart={dragStart}  />
+                ) : null}
+              </Box>
+            </VStack>
+          </GridItem>
+          <GridItem colSpan={1} rowSpan={3} bg='tomato' />
+        </Grid>
+      </div>
    </div>
   );
 }
 
-
-
 export default App;
diff --git a/baloot/src/components/CardView.js b/baloot/src/components/CardView.js
@@ -3,25 +3,25 @@ import { TrefleIcon, CarreauIcon, PiqueIcon, CoeurIcon } from './Icons';
 
 const icons = {
  "Carreau": <CarreauIcon boxSize={64} color='red.500' />,
-  "Coeur": <CoeurIcon boxSize={64} color='red.500' />,
- "Pique": <PiqueIcon boxSize={64} color='red.500' />,
- "Trefle": <TrefleIcon boxSize={64} color='red.500' />,
+ "Coeur":   <CoeurIcon   boxSize={64} color='red.500' />,
+ "Pique":   <PiqueIcon   boxSize={64} color='red.500' />,
+ "Trefle":  <TrefleIcon  boxSize={64} color='red.500' />,
 }
 
-function CardView({ Genre, Couleur, onDragStart, onDragEnter, onDragEnd}) {
-  const icon = icons[Couleur];
-
+function CardView({ Genre, Couleur, onDragStart, onDragEnter, onDragEnd, onClick}) {
   return (
-    <Card w={128} draggable onDragStart={onDragStart} onDragEnter={onDragEnter} onDragEnd={onDragEnd}>
+    <Card w={128} h={64} draggable onDragStart={onDragStart} onDragEnter={onDragEnter} onDragEnd={onDragEnd} onClick={ onClick? onClick.bind(this, Couleur, Genre) : null }>
       <CardHeader>
-        <Text textAlign={'left'} fontSize="32" flex='1'>{Genre}</Text>
+        <Text textAlign={'left'} fontSize="22" flex='1'>{Genre}</Text>
       </CardHeader>
-      <CardBody align='center'>{icon}</CardBody>
+      <CardBody align='center'>{icons[Couleur]}</CardBody>
       <CardFooter>
-        <Text textAlign={'right'} fontSize="32" flex='1'>{Genre}</Text>
+        <Text textAlign={'right'} fontSize="22" flex='1'>{Genre}</Text>
       </CardFooter>
     </Card>
   );
 }
 
 export default CardView;
+
+
diff --git a/baloot/src/components/PlayingCardsView.js b/baloot/src/components/PlayingCardsView.js
@@ -3,12 +3,13 @@ import {
 } from '@chakra-ui/react'
 import CardView from './CardView';
 
-function PlayingCardsView({cards, onDragStart, onDragEnter, onDragEnd}) {
-  return (  <SimpleGrid spacing={0} templateColumns='repeat(auto-fill, minmax(200px, 1fr))'>
+function PlayingCardsView({cards, onDragStart, onDragEnter, onDragEnd, onClick}) {
+  return (  <SimpleGrid spacing={2} templateColumns='repeat(auto-fill, minmax(120px, 1fr))'>
     {
       cards.map((c) => {
         return c? (
           <CardView
+            onClick={onClick}
             Genre={c.Genre}
             Couleur={c.Couleur}
             onDragStart={(e) => onDragStart(e)}