First public build

villanovachile · Feb 28, 2023 · a942651 · a942651
1 parent b0632a6
commit a942651
Show file tree

Hide file tree

Showing 18 changed files with 364 additions and 218 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -7,37 +7,25 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="List bias ranker sorter"
     />
+    <meta
+      name="author"
+      content="Daniel Rodriguez"
+    />
+
+    <meta
+    name="keywords"
+    content="bias, ranker, list sorter, HTML, CSS, JavaScript, React"
+  />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Truth Tally - bias ranker/sorter</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Truth Tally",
+  "name": "Truth Tally bias ranker / sorter",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/components/AddItemForm.js b/src/components/AddItemForm.js
@@ -17,9 +17,9 @@ const AddItemForm = ({addItem, items}) => {
                 dupe = true;
             }
         });
-
+        
         if (!dupe && input) {
-            addItem(itemInput.current.value);
+            addItem(itemInput.current.value.replace(/(^|\s)[a-z]/g, f => f.toUpperCase()));
             e.currentTarget.reset();
         }
 

diff --git a/src/components/App.js b/src/components/App.js
@@ -4,38 +4,22 @@ import ItemsList from './ItemsList';
 import Stage from './Stage';
 import Controls from './Controls';
 import Results from './Results';
+import LoadingSpinner from './LoadingSpinner';
 
 
 //import logo from './logo.svg';
 
 
 function App() {
 
-  const [items, setItems] = useState ([
-    // {
-    //   item: 'Red',
-    //   score: 0,
-    //   id: 1
-    // },
-    // {
-    //   item: 'Blue',
-    //   score: 0,
-    //   id: 2
-    // },
-    // {
-    //   item: 'White',
-    //   score: 0,
-    //   id: 3
-    // },
-    // {
-    //   item: 'Green',
-    //   score: 0,
-    //   id: 4
-    // },
-  ]);
+  const [items, setItems] = useState ([]);
 
   const [gameState, setGameState] = useState('start');
 
+  const [gameCompleted, setGameCompleted] = useState(false);
+
+  const [loadingText, setLoadingText] = useState('');
+
   const [pairs, setPairs] = useState([]);
 
   const currentIndex = useRef(0);
@@ -69,53 +53,48 @@ const updatePairsList = (a) => {
   setPairs(a);
 }
 
+const props = {
+  items,
+  setItems,
+  gameState,
+  setGameState,
+  gameCompleted,
+  setGameCompleted,
+  loadingText,
+  setLoadingText,
+  pairs,
+  setPairs,
+  currentIndex,
+  nextItemId,
+  handleAddItem,
+  handleRemoveItem,
+  updatePairsList
+};
 
 
   return (
 
     <div className="main-container">  
       <Header />
+
+      <LoadingSpinner 
+        {...props}
+      />
 
       <ItemsList
-        items={items}
-        addItem={handleAddItem}
-        removeItem={handleRemoveItem}
-        pairs={pairs}
-        updatePairsList={updatePairsList}
-        gameState={gameState}
-        setGameState={setGameState}
-        />
+        {...props}
+      />
 
       <Stage
-        items={items}
-        setItems={setItems}
-        pairs={pairs}
-        setPairs={setPairs}
-        gameState={gameState}
-        setGameState={setGameState}
-        currentIndex={currentIndex}
+        {...props} 
       />
 
       <Results
-        items={items}
-        setItems={setItems}
-        pairs={pairs}
-        setPairs={setPairs}
-        gameState={gameState}
-        setGameState={setGameState}
-        currentIndex={currentIndex}
+        {...props}
       />
 
       <Controls 
-        items={items}
-        setItems={setItems}
-        updatePairsList={updatePairsList}
-        pairs={pairs}
-        gameState={gameState}
-        setGameState={setGameState}
-        currentIndex={currentIndex}
-        nextItemId={nextItemId}
-        setPairs={setPairs}
+        {...props}
       />
 
 

diff --git a/src/components/Controls.js b/src/components/Controls.js
@@ -1,22 +1,27 @@
 import React from 'react';
 
-const Controls = ({items, setItems, nextItemId, setPairs, updatePairsList, gameState, setGameState, currentIndex}) => {
+const Controls = ({items, setItems, nextItemId, setPairs, updatePairsList, gameState, setGameState, currentIndex, setLoadingText, setGameCompleted}) => {
 
     const genList = () => {
 
         const generatePairs = (arr) => {
-
-          const result = [];
-          for (let i = 0; i < arr.length; i++) {
-            for (let j = i + 1; j < arr.length; j++) {
-              result.push([arr[i], arr[j]]);
+            const result = [];
+            for (let i = 0; i < arr.length; i++) {
+              for (let j = i + 1; j < arr.length; j++) {
+                result.push([arr[i], arr[j]]);
+              }
             }
-          }
-          setGameState('inProgress')
-          return result;
-        }
-
-        updatePairsList(generatePairs(items));
+            setLoadingText('Generating pairs...');
+            setGameCompleted(false);
+            setGameState('loading');
+            // Shuffle the array of pairs
+            for (let i = result.length - 1; i > 0; i--) {
+              const j = Math.floor(Math.random() * (i + 1));
+              [result[i], result[j]] = [result[j], result[i]];
+            }
+            return result;
+          };
+          updatePairsList(generatePairs(items));
 
       }
 
@@ -30,12 +35,14 @@ const Controls = ({items, setItems, nextItemId, setPairs, updatePairsList, gameS
         setItems(resetScores);
         currentIndex.current = 0;
         genList();
+        setGameCompleted(false)
         setGameState('inProgress')
       }
 
     const startOver = () => {
         setItems([]);
         setPairs([]);
+        setGameCompleted(false)
         setGameState('start');
         nextItemId.current = 0;
         currentIndex.current = 0;
@@ -49,9 +56,9 @@ const Controls = ({items, setItems, nextItemId, setPairs, updatePairsList, gameS
 
             {items.length > 0 && gameState === 'start' ? <button onClick={() => clearList()}>Clear</button> : null}
 
-            {gameState !== 'start' ? <button onClick={() => startOver()}>Start Over</button> : null }
+            {gameState !== 'start' && gameState !== 'loading' ? <button onClick={() => startOver()}>Start Over</button> : null }
 
-            {gameState !== 'start' ? <button onClick={() => rateAgain()}>Rate Again</button> : null }
+            {gameState !== 'start' && gameState !== 'loading' ? <button onClick={() => rateAgain()}>Rate Again</button> : null }
 
 
         </div>

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -4,8 +4,7 @@ import React from 'react';
 const Header = () => {
     return (
         <header>
-            TruthTally
-
+            Truth Tally
         </header>
     );
 }

diff --git a/src/components/Item.js b/src/components/Item.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 
-const Item = ({item, id, score, removeItem}) => {
+const Item = ({item, id, removeItem}) => {
     return (
         <span className='list-item'>
             <button className='remove-item' onClick={() => removeItem(id)}>✖</button>

diff --git a/src/components/ItemsList.js b/src/components/ItemsList.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Item from './Item';
 import AddItemForm from './AddItemForm';
 
-const ItemsList = ({items, addItem, pairs, updatePairsList, gameState, setGameState, removeItem}) => {
+const ItemsList = ({items, addItem, gameState, removeItem}) => {
 
   if (gameState === 'start') {
     return (

diff --git a/src/components/LoadingSpinner.js b/src/components/LoadingSpinner.js
@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+
+const LoadingSpinner = ({ gameState, setGameState, loadingText, gameCompleted }) => {
+  const [showSpinner, setShowSpinner] = useState(false);
+
+  useEffect(() => {
+    if (gameState === 'loading') {
+      setShowSpinner(true);
+
+      const timer = setTimeout(() => {
+        setShowSpinner(false);
+        gameCompleted === false ? setGameState('inProgress') : setGameState('finished');
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [gameState, setGameState, gameCompleted]);
+
+    if (gameState==='loading') {
+        return (
+            <div className='loading-container'>
+            {showSpinner && (
+                <div className="spinner">
+                </div>
+            )}
+            <div className="loading-text">{loadingText}</div>
+            </div>
+        );
+    }
+};
+
+export default LoadingSpinner;
diff --git a/src/components/ResultItem.js b/src/components/ResultItem.js
@@ -1,8 +1,8 @@
 import React from 'react';
 
-const ResultItem = ({rank, item}) => {
+const ResultItem = ({item}) => {
     return (
-        <div className='result-item'>{rank +  '.) ' + item}</div>
+        <li>{item}</li>
     )
 }
 

diff --git a/src/components/Results.js b/src/components/Results.js
@@ -4,22 +4,22 @@ import ResultItem from './ResultItem';
 const Results = ({gameState, items}) => {
 
     if ( gameState === 'finished' ) {
-        let rank = 1
         let key = 1
         return (
             <div className='results-container'>
                 <h2>Results</h2>
+                <ol>
                 {
                     items.sort((a,b) => b.score - a.score).map(item => 
 
                     <ResultItem
-                    rank={rank++}
                     item={item.item}
                     key={key++}
                     />
                     )
 
                 }
+                </ol>
 
             </div>
         )