Merge branch 'sponsors' of https://github.com/reactplay/react-play in…

…to sponsors
reactplay · Jun 21, 2023 · 819d404 · 819d404
2 parents e7b0b59 + d847233
commit 819d404
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 17 deletions.
diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx
@@ -88,15 +88,15 @@ const HeaderNav = ({ showBrowse }) => {
             </li>
           )}
           <li>
-            <Link
+            <a
               className="app-header-btn app-header-btn--secondary"
               data-testid="events-btn"
+              href="https://hustles.reactplay.io/"
               target="_blank"
-              to="https://hustles.reactplay.io/"
             >
               <MdEvent className="icon" />
               <span className="btn-label">Events</span>
-            </Link>
+            </a>
           </li>
           <li className="menu-spacer">
             {process.env.NODE_ENV === 'development' ? (

diff --git a/src/common/playlists/DynamicBanner.jsx b/src/common/playlists/DynamicBanner.jsx
@@ -3,42 +3,30 @@ import thumbPlay from 'images/thumb-play.png';
 import { Link } from 'react-router-dom';
 import { MdArrowRightAlt } from 'react-icons/md';
 import { loadCoverImage } from 'common/utils/coverImageUtil';
-
 const DynamicBanner = ({ randomPlay }) => {
   const [coverImage, setCoverImage] = useState(null);
-  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
-    setLoading(true);
-
     async function setPlayCover() {
-      if (loading && randomPlay && randomPlay.cover) {
+      if (randomPlay && randomPlay.cover) {
         setCoverImage(randomPlay.cover);
-        setLoading(false);
       } else {
-        setLoading(true);
         // if it is not passed as a meta data
         // check in the play folder for a cover image with the name cover
         const coverImage = await loadCoverImage(randomPlay.slug);
-
         if (coverImage) {
           setCoverImage(coverImage);
-          setLoading(false);
         } else {
           setCoverImage(thumbPlay);
-
           console.error(
             `Cover image not found for the play ${randomPlay.name}. Setting the default cover image...`
           );
         }
       }
     }
-
     setPlayCover();
   }, [randomPlay]);
 
-  if (loading) return <p>loading...</p>;
-
   return (
     <Fragment>
       <div

diff --git a/src/plays/cricket-game/CricketGame.js b/src/plays/cricket-game/CricketGame.js
@@ -254,6 +254,10 @@ function CricketGame(props) {
     gameTrack.loop = true;
     gameTrack.autoplay = true;
     gameTrack.play();
+
+    // The audio will stop playing
+    // once the component is unmounted
+    return () => gameTrack.pause();
   });
 
   return (

diff --git a/src/plays/cricket-game/components/Pitch.js b/src/plays/cricket-game/components/Pitch.js
@@ -25,7 +25,8 @@ export default function Pitch(props) {
       />
 
       <div
-        className="hit-box w-[35%] h-[12%] absolute top-[8%] md:top-[6%] left-[16%] rounded-[10px] z-30"
+        // className="hit-box w-[35%] h-[12%] absolute top-[8%] md:top-[6%] left-[16%] rounded-[10px] z-30"
+        className="hit-box w-[35%] h-[15%] absolute top-[8%] md:top-[6%] left-[16%] rounded-[10px] z-30"
         ref={hitBoxRef}
         onMouseDown={(e) => onBatSwing(e)}
       />

diff --git a/src/plays/wordle/Wordle.tsx b/src/plays/wordle/Wordle.tsx
@@ -71,6 +71,7 @@ function Wordle(props: any): JSX.Element {
     // This method removes all children from element node
     errorSlideRef.current.replaceChildren();
     setStats(null);
+    setGameOver(false);
   }
 
   function pushError(string: string) {
@@ -254,6 +255,7 @@ function Wordle(props: any): JSX.Element {
                   {'QWERTYUIOP'.split('').map((alphabet) => (
                     <KeyboardKey
                       alphabet={alphabet}
+                      key={alphabet}
                       letterStatus={letterStatus}
                       onKeyClick={onKeyClick}
                     />
@@ -264,6 +266,7 @@ function Wordle(props: any): JSX.Element {
                   {'ASDFGHJKL'.split('').map((alphabet) => (
                     <KeyboardKey
                       alphabet={alphabet}
+                      key={alphabet}
                       letterStatus={letterStatus}
                       onKeyClick={onKeyClick}
                     />
@@ -285,6 +288,7 @@ function Wordle(props: any): JSX.Element {
                     return (
                       <KeyboardKey
                         alphabet={alphabet}
+                        key={alphabet}
                         letterStatus={letterStatus}
                         onKeyClick={onKeyClick}
                       />

diff --git a/src/plays/wordle/components/WordleRow.tsx b/src/plays/wordle/components/WordleRow.tsx
@@ -26,6 +26,7 @@ export default function WordleRow(props: { tileRow: TileRow; wordleWord: string
                   roll
                   correct={isCorrect}
                   index={index}
+                  key={crypto.randomUUID()}
                   style={TileColor.CORRECT}
                   tile={letter}
                 />
@@ -39,6 +40,7 @@ export default function WordleRow(props: { tileRow: TileRow; wordleWord: string
                   roll
                   correct={isCorrect}
                   index={index}
+                  key={crypto.randomUUID()}
                   style={TileColor.MISPLACED}
                   tile={letter}
                 />
@@ -49,6 +51,7 @@ export default function WordleRow(props: { tileRow: TileRow; wordleWord: string
                   roll
                   correct={isCorrect}
                   index={index}
+                  key={crypto.randomUUID()}
                   style={TileColor.WRONG}
                   tile={letter}
                 />
@@ -60,6 +63,7 @@ export default function WordleRow(props: { tileRow: TileRow; wordleWord: string
               <WordleTile
                 correct={isCorrect}
                 index={index}
+                key={crypto.randomUUID()}
                 roll={false}
                 style={TileColor.MISPLACED}
                 tile={letter}