Fw 3502 add wordle to fv games section

src/common/utils/gameHelpers.js

@@ -0,0 +1,16 @@
+export const hasWordleEnabled = (sitename) => {
+  // Temporary utility till WORDLE is refactored to use the new BE
+  const WORDLE_ENABLED_SITES = [
+    'tseshahtlanguage',
+    'homalco',
+    'lilwat',
+    'nadleh-stella-whutenne',
+    'sliammon',
+    'smalgyax-beta',
+    'stzuminus',
+    'tahltan',
+    'wuikala',
+  ]
+
+  return WORDLE_ENABLED_SITES.includes(sitename)
+}

src/components/Game/GamePresentation.js

@@ -1,31 +1,59 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
+import { useNavigate } from 'react-router-dom'
 
 import Parachute from 'components/Game/Parachute'
+import { hasWordleEnabled } from 'common/utils/gameHelpers'
+import getIcon from 'common/utils/getIcon'
 
 function GamePresentation({ sitename, gameId }) {
   const [isLoaded, setIsLoaded] = useState(false)
 
+  const icon = getIcon(
+    'InfoCircleSolid',
+    'fill-current text-word h-12 w-12 md:h-20 md:w-20 mx-auto',
+  )
+
+  const navigate = useNavigate()
+
   switch (gameId) {
     case 'parachute':
       return <Parachute.Container />
     case 'wordle':
+      if (hasWordleEnabled(sitename)) {
+        return (
+          <div className={`${isLoaded ? '' : 'hidden'}`}>
+            <iframe
+              id="GameIframe"
+              title="Wordle"
+              onLoad={() => setIsLoaded(true)}
+              src={`https://games.firstvoices.io/wordle/?language=${sitename}`}
+              allowFullScreen
+              style={{
+                marginTop: '35px',
+                minHeight: '100vh',
+                overflow: 'hidden',
+                border: 'none',
+              }}
+              width="100%"
+            />
+          </div>
+        )
+      }
       return (
-        <div className={`${isLoaded ? '' : 'hidden'}`}>
-          <iframe
-            id="GameIframe"
-            title="Wordle"
-            onLoad={() => setIsLoaded(true)}
-            src={`https://games.firstvoices.io/wordle/?language=${sitename}`}
-            allowFullScreen
-            style={{
-              marginTop: '35px',
-              minHeight: '100vh',
-              overflow: 'hidden',
-              border: 'none',
-            }}
-            width="100%"
-          />
+        <div className="w-full text-center text-2xl mt-32">
+          {/* Message to be updated after confirmation. Ref: FW-3510 */}
+          <div>{icon}</div>
+          <h2 className="text-2xl font-bold tracking-tight text-fv-charcoal sm:text-3xl mt-4">
+            This FirstVoices language site has not been set up for WORDLE yet.
+          </h2>
+          <button
+            type="button"
+            onClick={() => navigate(`/${sitename}/games`)}
+            className="mx-auto flex items-center rounded-md bg-primary mt-6 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-light focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+          >
+            Browse more games on the site.
+          </button>
         </div>
       )
     default:

src/components/Games/GamesPresentation.js

@@ -1,46 +1,35 @@
 import React from 'react'
-// import PropTypes from 'prop-types'
-// import { Link, useParams } from 'react-router-dom'
+import PropTypes from 'prop-types'
+import { Link, useParams } from 'react-router-dom'
 
 // FPCC
-import SectionTitle from 'components/SectionTitle'
-// import getIcon from 'common/utils/getIcon'
+import getIcon from 'common/utils/getIcon'
 
-function GamesPresentation() {
-  // Adding notice and commenting things out for FW-4515 until games are updated for new back-end.
-
-  // const games = [
-  //   { pathname: 'memory', title: 'Memory', icon: 'Memory' },
-  //   { pathname: 'jigsaw', title: 'Jigsaw', icon: 'Jigsaw' },
-  //   { pathname: 'parachute', title: 'Parachute', icon: 'Parachute' },
-  //   { pathname: 'quiz', title: 'Quiz', icon: 'Quiz' },
-  //   { pathname: 'wordscramble', title: 'Word Scramble', icon: 'WordScramble' },
-  //   { pathname: 'wordsearch', title: 'Word Search', icon: 'WordSearch' },
-  // ]
-  // const { sitename } = useParams()
+function GamesPresentation({ kids }) {
+  const games = [
+    // { pathname: 'memory', title: 'Memory', icon: 'Memory' },
+    // { pathname: 'jigsaw', title: 'Jigsaw', icon: 'Jigsaw' },
+    // { pathname: 'parachute', title: 'Parachute', icon: 'Parachute' },
+    // { pathname: 'quiz', title: 'Quiz', icon: 'Quiz' },
+    // { pathname: 'wordscramble', title: 'Word Scramble', icon: 'WordScramble' },
+    // { pathname: 'wordsearch', title: 'Word Search', icon: 'WordSearch' },
+    { pathname: 'wordle', title: 'wordle', icon: 'Wordle' },
+  ]
+  const { sitename } = useParams()
   return (
     <main
       className="pt-2 md:pt-4 lg:pt-8 bg-white"
       data-testid="GamesPresentation"
     >
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <SectionTitle.Presentation title="GAMES" accentColor="tertiaryA" />
-        <div className="w-full flex-1 min-h-full min-w-full p-10 lg:p-20 text-gray-800 relative items-center text-center">
-          <h1 className="font-black text-3xl lg:text-5xl text-fv-charcoal mb-10">
-            FirstVoices Games will return soon!
-          </h1>
-        </div>
-        {/* <div className="flex-1 flex items-stretch overflow-hidden">
+        <div className="flex-1 flex items-stretch overflow-hidden">
           <main className="flex-1 overflow-y-auto">
             <div className="px-4 sm:px-6 lg:px-8">
               <section className="mt-8 pb-16" aria-labelledby="gallery-heading">
                 <h2 id="gallery-heading" className="sr-only">
                   Games
                 </h2>
-                <ul
-                  role="list"
-                  className="grid grid-cols-1 gap-y-8 md:gap-x-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-8"
-                >
+                <ul className="grid grid-cols-1 gap-y-8 md:gap-x-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-8">
                   {games.map((game) => (
                     <li key={game.pathname} className="relative">
                       <div className="focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-gray-100 focus-within:ring-tertiaryA group block w-full rounded-lg overflow-hidden">
@@ -61,10 +50,21 @@ function GamesPresentation() {
               </section>
             </div>
           </main>
-        </div> */}
+        </div>
       </div>
     </main>
   )
 }
 
+// PROPTYPES
+const { bool } = PropTypes
+
+GamesPresentation.propTypes = {
+  kids: bool,
+}
+
+GamesPresentation.defaultProps = {
+  kids: null,
+}
+
 export default GamesPresentation