Started on css. Hands can display in acceptable way. Position for pla…

…yer hands on left and right is not ideal, but won't be fixing it.

package.json

@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint-plugin-react-hooks": "^4.6.0"
   }
 }

src/App.css

@@ -1,38 +1,52 @@
-.App {
-  text-align: center;
+body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  margin: 0;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.container {
+  display: flex;
+  justify-content: space-around;
+  flex: 1;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.box {
+  position: relative;
+  width: 83%;
+  height: 25vh;
+  background-color: lightblue;
+  border: 1px solid #000;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.cool {
+  background-color: red;
 }
 
-.App-link {
-  color: #61dafb;
+.waycool {
+  height: 50vh;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.slick {
+  width: 134%;
 }
+
+.hand0 {
+  position: absolute;
+  bottom: 0;
+}
+
+.hand1 {
+  position: absolute;
+  transform-origin: center right;
+  bottom: 90%;
+  right: 10%;
+}
+
+.hand3 {
+  position: absolute;
+  transform-origin: center left;
+  bottom: 90%;
+  left: 10%;
+}

src/App.js

@@ -1,27 +1,12 @@
-import logo from './logo.svg';
 import './App.css';
-import { StartGame } from './beginGame';
+import Game from './Game';
 
 function App() {
-  StartGame();
 
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+      <div className="App">
+        <Game></Game>
+      </div>
   );
 }
 

src/Game.js

@@ -0,0 +1,40 @@
+import Hand from './Hand';
+
+function Game() {
+
+  const hands = [
+    ['h3','w2','b4','h1','h1','h1','h1'],
+    ['b','b','h','w','w','h','h'],
+    ['b','b','h','w','w','h','h'],
+    ['b','b','h','w','w','h','h']]
+
+  return (
+    <div className="Game">
+      <div className="container">
+        <div className="box cool"></div>
+        <div className="box slick">
+          <Hand handClass="hand2" hand={hands[2]} rotation={180}></Hand>
+        </div>
+        <div className="box cool"></div>
+      </div>
+      <div className="container">
+        <div className="box waycool">
+          <Hand handClass="hand3" hand={hands[3]} rotation={90}></Hand>
+        </div>
+        <div className="box cool waycool slick"></div>
+        <div className="box waycool">
+          <Hand handClass="hand1" hand={hands[1]} rotation={270}></Hand>
+        </div>
+      </div>
+      <div className="container">
+        <div className="box cool"></div>
+        <div className="box slick">
+          <Hand handClass="hand0" hand={hands[0]} rotation={0}></Hand>
+        </div>
+        <div className="box cool"></div>
+      </div>
+    </div>
+  );
+}
+
+export default Game;

src/Hand.js

@@ -0,0 +1,38 @@
+import React, { useState, useEffect, useMemo } from 'react';
+
+function Hand(props) {
+  const cardNames = useMemo(() => [
+    'w', 'w1', 'w2', 'w3',
+    'h', 'h1', 'h2', 'h3',
+    'b', 'b4', 'b5', 'b6', 'b7', 'b8', 'b9', 'b12'
+  ], []);
+
+  const [cards, setCards] = useState({});
+
+  useEffect(() => {
+    const importCards = async () => {
+      const cardImports = cardNames.map(cardName => import(`./images/cards/${cardName}.png`));
+      const cardModules = await Promise.all(cardImports);
+      const cardMap = {};
+      cardNames.forEach((cardName, index) => {
+        cardMap[cardName] = cardModules[index].default;
+      });
+      setCards(cardMap);
+    };
+
+    importCards();
+  }, [cardNames]);
+
+  const hand = props.hand.map((cardName, index) => {
+    const card = cards[cardName];
+    return <img key={index} src={card} alt={`A ${card} card`} style={{ width: 100 / props.hand.length + "%" }} />;
+  });
+
+  return (
+    <div className={props.handClass} style={{ transform: `rotate(${props.rotation}deg)` }}>
+      {hand}
+    </div>
+  );
+}
+
+export default Hand;

src/beginGame.js

@@ -3,61 +3,63 @@ import { ContinueGame } from './gameFlow';
 import { shuffle } from './randomizers';
 
 export function StartGame() {
+  const {
+    players,
+    setPlayers,
+    setHands,
+    setTokens,
+    setSpaces,
+    setLost,
+    decks,
+    setDecks
+  } = useStateValue();
+
   console.log("Select number of players by pressing 2, 3, or 4.")
   document.addEventListener("keyup", ChoosePlayersCountEvent);
-}
 
-function ChoosePlayersCountEvent(event) {
-  console.log("Is the beforrre after useStateValue?????");
 
+  function ChoosePlayersCountEvent(event) {
+    console.log("Is the beforrre after useStateValue?????");
 
-  const { 
-    players,
-    setPlayers, 
-    setHands, 
-    setTokens, 
-    setSpaces, 
-    setLost, 
-    decks,
-    setDecks
-  } = useStateValue();
 
-  console.log("Is the error after useStateValue?????");
 
-  const selection = parseInt(event.key);
-  if (selection < 2 || selection > 4 || Number.isNaN(selection)) return;
+    console.log("Is the error after useStateValue?????");
 
-  setPlayers(selection);
+    const selection = parseInt(event.key);
+    if (selection < 2 || selection > 4 || Number.isNaN(selection)) return;
 
-  console.log(`Starting game with ${players} players.`);
-  document.removeEventListener("keyup", ChoosePlayersCountEvent);
+    setPlayers(selection);
 
+    console.log(`Starting game with ${players} players.`);
+    document.removeEventListener("keyup", ChoosePlayersCountEvent);
 
-  const hands = [];
-  const tokens = [];
-  const spaces = [];
-  const lost = [];
 
-  for (let i = 0; i < players; i++) {
-    hands.push([]);
-    tokens.push(true);
-    spaces.push(0);
-    lost.push(false);
-  }
+    const hands = [];
+    const tokens = [];
+    const spaces = [];
+    const lost = [];
 
-  setHands(hands);
-  setTokens(tokens);
-  setSpaces(spaces);
-  setLost(lost);
+    for (let i = 0; i < players; i++) {
+      hands.push([]);
+      tokens.push(true);
+      spaces.push(0);
+      lost.push(false);
+    }
 
+    setHands(hands);
+    setTokens(tokens);
+    setSpaces(spaces);
+    setLost(lost);
 
-  let decksTemp = decks.slice();
-  for (const deck in decksTemp) {
-    shuffle(decksTemp[deck]);
-  }
-  console.log("Did shuffling work?", decksTemp);
 
-  setDecks(decksTemp);
+    let decksTemp = {};
+    for (const deck in decks) {
+      decksTemp[deck] = decks[deck].slice();
+      shuffle(decksTemp[deck]);
+    }
+
+    setDecks(decksTemp);
 
-  ContinueGame();
+    ContinueGame();
+  }
 }