Add keyboard controls for use during game

* Ensure auto generated names are always lowercase
justitsi · Oct 25, 2023 · 8c5360d · 8c5360d
1 parent 77dc66e
commit 8c5360d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 11 deletions.
diff --git a/frontend/src/components/GameComponents/Card/Card.js b/frontend/src/components/GameComponents/Card/Card.js
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import ManagerComponent from './../../../assets/cards/ManagerComponent'
 
 
-function Card(props) {
+const Card = (props) => {
     const { t } = useTranslation('translations');
 
     const handleOnCLick = () => {

diff --git a/frontend/src/components/GameComponents/Hand/Hand.js b/frontend/src/components/GameComponents/Hand/Hand.js
@@ -1,12 +1,13 @@
 import styles from './Hand.module.scss'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Card from '../Card'
 import { useTranslation } from 'react-i18next';
 import { sortCards } from './../../../modules/GameFunctions';
 import { ReactComponent as ArrowIcon } from './../../../assets/icons/ArrowCardOrder.svg';
-import { Button, Container } from 'react-bootstrap'
+import { Button } from 'react-bootstrap'
+import { log } from '../../../modules/util';
 
-function Hand(props) {
+const Hand = (props) => {
     const { t } = useTranslation('translations');
     const [selected, setSelected] = useState(-1);
     const [reverseCardOrder, setReverseCardOrder] = useState(false);
@@ -28,25 +29,30 @@ function Hand(props) {
 
 
     let cardsToShow = []
-    if (props.roundStatus === 'in_progress' || props.roundStatus === 'started_selecting_suit' || props.roundStatus === 'suit_selected') {
+    let activeCards = []
+    if (props.roundStatus === 'in_progress' ||
+        props.roundStatus === 'started_selecting_suit' ||
+        props.roundStatus === 'suit_selected') {
 
         for (let i = 0; i < props.cardCount; i++) {
             let cardElement = null;
+            let cardShouldBeActive = false
+
             if (props.showCards === true) {
                 const selectHandler = (index) => {
                     if (index !== selected) setSelected(index)
                     else setSelected(-1)
-                    console.log(index, selected,)
+                    log("debug", `${index}, ${selected}`)
                 }
 
-                let cardShouldBeActive = false
                 for (const activeCard of props.validOptions) {
                     if (activeCard.suit === cardsInHand[i].suit && activeCard.rank === cardsInHand[i].rank)
                         cardShouldBeActive = true
                 }
 
                 cardElement =
-                    <div className={props.vertical ? styles.verticalListItem : styles.horizontalListItem} key={i}>
+                    <div className={props.vertical ? styles.verticalListItem : styles.horizontalListItem}
+                        key={i}>
                         <Card
                             rank={cardsInHand[i].rank}
                             suit={cardsInHand[i].suit}
@@ -59,14 +65,55 @@ function Hand(props) {
             }
             else {
                 cardElement =
-                    <div className={props.vertical ? styles.verticalListItem : styles.horizontalListItem} key={i}>
+                    <div className={props.vertical ? styles.verticalListItem : styles.horizontalListItem}
+                        key={i}>
                         <Card />
                     </div >
             }
+            // store selectable card list for keyboard controls
+            activeCards.push(cardShouldBeActive && props.roundStatus === 'in_progress')
             cardsToShow.push(cardElement)
         }
     }
 
+    // setup event listeners for keyboard controls for game
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            console.log(event)
+            // handle selecting cards with keyboard
+            if (event.code.includes("Digit")) {
+                const digit = parseInt(event.key)
+                log("debug", `Handling selecting card ${digit} using keyboard`)
+                if (digit > 0) {
+                    if (digit < cardsInHand.length + 1) {
+                        // check if card can even be selected
+                        const toSelectIndex = digit - 1;
+                        if (activeCards[toSelectIndex] === true)
+                            setSelected(toSelectIndex);
+                    }
+                }
+            }
+            // handle playing selected card with keyboard
+            if (event.code.toLowerCase() === "enter") {
+                log("debug", 'Handling playing selected card from ENTER key');
+                playSelectedCard();
+            }
+            if (event.code.toLowerCase() === "space") {
+                log("debug", 'Handling playing selected card from SPACE key');
+                playSelectedCard();
+            }
+        }
+
+        // handle adding event listener
+        document.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            // remove event listener after component unmount
+            document.removeEventListener('keydown', handleKeyDown);
+        }
+
+    }, [])
+
     return (
         <div className={styles.handContainer}>
             <div className={props.vertical ? styles.verticalList : styles.horizontalList}>

diff --git a/frontend/src/modules/util.js b/frontend/src/modules/util.js
@@ -51,13 +51,13 @@ export const getWordCombo = () => {
 export const getAdjective = () => {
     return ADJ_LIST['adjs'][
         (Math.floor(Math.random() * ADJ_LIST['adjs'].length))
-    ];
+    ].toLowerCase();
 }
 
 export const getNoun = () => {
     return NOUN_LIST['nouns'][
         (Math.floor(Math.random() * NOUN_LIST['nouns'].length))
-    ];
+    ].toLowerCase();
 }
 
 export const generateRoomName = () => {