From 8e3a15504d968b505bd61988ed21dc549cc5c3b6 Mon Sep 17 00:00:00 2001 From: villanovachile <65082164+villanovachile@users.noreply.github.com> Date: Sun, 12 Mar 2023 12:56:54 -0700 Subject: [PATCH] Restructure Components: Move App into its own TruthTally component (#8) * Restructure app into its own Truth Tally component * Created Component specific CSS file --- src/components/App.js | 105 +----- .../{ => TruthTally}/AddItemForm.js | 0 src/components/{ => TruthTally}/Controls.js | 0 src/components/{ => TruthTally}/Item.js | 0 src/components/{ => TruthTally}/ItemsList.js | 0 .../{ => TruthTally}/LoadingSpinner.js | 0 src/components/{ => TruthTally}/ResultItem.js | 0 src/components/{ => TruthTally}/Results.js | 0 src/components/{ => TruthTally}/Stage.js | 0 src/components/TruthTally/TruthTally.js | 77 +++++ src/components/TruthTally/index.css | 317 +++++++++++++++++ src/components/TruthTally/index.js | 3 + src/index.css | 321 +----------------- 13 files changed, 421 insertions(+), 402 deletions(-) rename src/components/{ => TruthTally}/AddItemForm.js (100%) rename src/components/{ => TruthTally}/Controls.js (100%) rename src/components/{ => TruthTally}/Item.js (100%) rename src/components/{ => TruthTally}/ItemsList.js (100%) rename src/components/{ => TruthTally}/LoadingSpinner.js (100%) rename src/components/{ => TruthTally}/ResultItem.js (100%) rename src/components/{ => TruthTally}/Results.js (100%) rename src/components/{ => TruthTally}/Stage.js (100%) create mode 100644 src/components/TruthTally/TruthTally.js create mode 100644 src/components/TruthTally/index.css create mode 100644 src/components/TruthTally/index.js diff --git a/src/components/App.js b/src/components/App.js index 12c4ace..76f2676 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,105 +1,14 @@ -import React, { useState, useRef } from 'react'; -import Header from './Header'; -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 ([]); - - const [gameState, setGameState] = useState('start'); - - const [gameCompleted, setGameCompleted] = useState(false); - - const [loadingText, setLoadingText] = useState(''); - - const [pairs, setPairs] = useState([]); - - const currentIndex = useRef(0); - - const nextItemId = useRef(0); - - - const handleAddItem = (item) => { - nextItemId.current++ - - setItems(prevItems => [ - ...prevItems, - { - item, - score: 0, - id: nextItemId.current - } - ]); - } - - - const handleRemoveItem = (id) => { - setItems(prevItems => prevItems.filter( p => p.id !== id )); - } - - - - - -const updatePairsList = (a) => { - setPairs(a); -} - -const props = { - items, - setItems, - gameState, - setGameState, - gameCompleted, - setGameCompleted, - loadingText, - setLoadingText, - pairs, - setPairs, - currentIndex, - nextItemId, - handleAddItem, - handleRemoveItem, - updatePairsList -}; - +import React from "react"; +import TruthTally from "./TruthTally"; +import Header from "./Header"; +const App = () => { return ( - -
+
- - - - - - - - - - - - +
); -} +}; export default App; diff --git a/src/components/AddItemForm.js b/src/components/TruthTally/AddItemForm.js similarity index 100% rename from src/components/AddItemForm.js rename to src/components/TruthTally/AddItemForm.js diff --git a/src/components/Controls.js b/src/components/TruthTally/Controls.js similarity index 100% rename from src/components/Controls.js rename to src/components/TruthTally/Controls.js diff --git a/src/components/Item.js b/src/components/TruthTally/Item.js similarity index 100% rename from src/components/Item.js rename to src/components/TruthTally/Item.js diff --git a/src/components/ItemsList.js b/src/components/TruthTally/ItemsList.js similarity index 100% rename from src/components/ItemsList.js rename to src/components/TruthTally/ItemsList.js diff --git a/src/components/LoadingSpinner.js b/src/components/TruthTally/LoadingSpinner.js similarity index 100% rename from src/components/LoadingSpinner.js rename to src/components/TruthTally/LoadingSpinner.js diff --git a/src/components/ResultItem.js b/src/components/TruthTally/ResultItem.js similarity index 100% rename from src/components/ResultItem.js rename to src/components/TruthTally/ResultItem.js diff --git a/src/components/Results.js b/src/components/TruthTally/Results.js similarity index 100% rename from src/components/Results.js rename to src/components/TruthTally/Results.js diff --git a/src/components/Stage.js b/src/components/TruthTally/Stage.js similarity index 100% rename from src/components/Stage.js rename to src/components/TruthTally/Stage.js diff --git a/src/components/TruthTally/TruthTally.js b/src/components/TruthTally/TruthTally.js new file mode 100644 index 0000000..f20b632 --- /dev/null +++ b/src/components/TruthTally/TruthTally.js @@ -0,0 +1,77 @@ +import React, { useState, useRef } from "react"; +import ItemsList from "./ItemsList"; +import Stage from "./Stage"; +import Controls from "./Controls"; +import Results from "./Results"; +import LoadingSpinner from "./LoadingSpinner"; + +function TruthTally() { + 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); + + const nextItemId = useRef(0); + + const handleAddItem = (item) => { + nextItemId.current++; + + setItems((prevItems) => [ + ...prevItems, + { + item, + score: 0, + id: nextItemId.current, + }, + ]); + }; + + const handleRemoveItem = (id) => { + setItems((prevItems) => prevItems.filter((p) => p.id !== id)); + }; + + const updatePairsList = (a) => { + setPairs(a); + }; + + const props = { + items, + setItems, + gameState, + setGameState, + gameCompleted, + setGameCompleted, + loadingText, + setLoadingText, + pairs, + setPairs, + currentIndex, + nextItemId, + handleAddItem, + handleRemoveItem, + updatePairsList, + }; + + return ( +
+ + + + + + + + + +
+ ); +} + +export default TruthTally; diff --git a/src/components/TruthTally/index.css b/src/components/TruthTally/index.css new file mode 100644 index 0000000..13cd27f --- /dev/null +++ b/src/components/TruthTally/index.css @@ -0,0 +1,317 @@ +.truthtally-container { + background: #ffffff; + min-width: 375px; + max-width: 700px; + margin: auto; + box-shadow: 0 2px 0 rgb(119, 0, 0); + overflow: hidden; + border: 1px; +} + +.list-item { + display: flex; + justify-content: center; + align-content: center; + text-align: center; + font-size: 1.2em; + border-bottom: solid 2px #eeeeee; + letter-spacing: 2px; +} + +.list-item:hover .remove-item { + visibility: visible; +} + +.list-item { + color: #2f2366; +} + +.player-item { + flex-grow: 1; + line-height: 3.5em; + padding-left: 10px; +} + +.stage-container { + background: #5f0000; + display: flex; + justify-content: space-evenly; + align-content: center; + height: 300px; + padding: 20px 10px 20px 10px; + vertical-align: middle; + align-items: center; + justify-content: center; +} + +.item-card { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + border: 1px; + border-color: white; + border-style: solid; + padding: 10px; + cursor: pointer; + color: white; +} + +.item-card-divider { + display: flex; + align-items: center; + justify-content: center; + width: 20%; + text-align: center; + color: white; + font-size: 20px; +} + +.controls { + padding: 10px; + background-color: rgb(119, 0, 0); + display: flex; + justify-content: center; +} + +.stage-header { + padding: 10px; + text-align: center; + background-color: #9d0000; + color: white; + font-size: 1.1em; +} + +.remove-item { + font-size: 1.15em; + border: none; + outline: none; + visibility: hidden; + color: #ef5350; + cursor: pointer; + margin: 0 10px 0 0; + padding: 0; + background: none; +} + +.results-container { + padding: 20px; + margin: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + text-align: center; +} + +.loading-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 30vh; + + background-color: #dedede; +} + +.spinner { + width: 50px; + height: 50px; + border-radius: 50%; + border: 5px solid #ccc; + border-top-color: #000; + animation: spin 1s linear infinite; + margin: auto; +} + +.loading-text { + font-size: 24px; + margin-top: 16px; + margin: auto; + animation: flash-loading 1s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +@keyframes flash-loading { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.item-card:active { + animation: flash-selection 1.9s; +} + +@keyframes flash-selection { + 0% { + background-color: white; + } + 50% { + background-color: rgb(57, 1, 1); + } + 100% { + background-color: white; + } +} + +@media screen and (max-width: 768px) { + .truthtally-container { + width: 100%; + height: 100%; + box-shadow: none; + border-radius: 0; + border: none; + display: flex; + flex-direction: column; + flex: 1; + } + + .list-item { + font-size: 1.3em; + letter-spacing: normal; + padding: 10px; + } + + .items-list { + flex: 1 1 auto; + display: flex; + flex-direction: column; + overflow-y: scroll; + justify-content: left; + align-items: center; + } + + .player-item { + line-height: 2.5em; + } + + form { + flex-direction: column; + } + + .items-list form { + width: 100%; + } + + input[type="text"] { + margin: 10px 0; + font-size: 1.5em; + } + + input[type="submit"], + button { + font-size: 1em; + margin: 10px 0; + } + + .stage-container { + height: auto; + flex-direction: column; + padding: 10px; + flex: 1 1 auto; + display: flex; + justify-content: center; + align-items: center; + } + + .item-card { + width: 100%; + min-height: 60px; + margin-bottom: 10px; + font-size: 1.8em; + padding: 0px; + background-color: #8d3333; + border-radius: 10px; + border: 5px; + border-style: solid; + border-color: #aea1a1; + color: #fff; + letter-spacing: 2px; + font-weight: bold; + text-shadow: none; + cursor: pointer; + } + + .item-card-divider { + width: 100%; + background-color: #9d0000; + margin-bottom: 10px; + font-size: 1.8em; + } + + .controls { + flex-direction: column; + } + + .stage-header { + font-size: 1.3em; + font-weight: bold; + } + + .remove-item { + font-size: 1em; + margin: 0; + } + + .remove-item { + font-size: 1.15em; + border: none; + outline: none; + visibility: visible; + color: #ef5350; + cursor: pointer; + margin: 0 10px 0 0; + padding: 0; + background: none; + } + + .results-container { + padding: 10px; + font-size: 1.5em; + flex: 1 1 auto; + display: flex; + flex-direction: column; + overflow-y: scroll; + justify-content: left; + align-items: center; + width: 100%; + } + + li { + font-size: 1em; + } + + .loading-container { + height: auto; + flex-direction: column; + padding: 10px; + flex: 1 1 auto; + display: flex; + justify-content: left; + align-items: center; + } + + .spinner { + width: 75px; + height: 75px; + border-width: 3px; + } + + .loading-text { + font-size: 1.7em; + font-weight: bold; + margin-top: 10px; + } +} diff --git a/src/components/TruthTally/index.js b/src/components/TruthTally/index.js new file mode 100644 index 0000000..3b255e0 --- /dev/null +++ b/src/components/TruthTally/index.js @@ -0,0 +1,3 @@ +import "./index.css"; +export * from "./TruthTally"; +export { default } from "./TruthTally"; diff --git a/src/index.css b/src/index.css index 1f36504..7f80b6e 100644 --- a/src/index.css +++ b/src/index.css @@ -4,7 +4,7 @@ body { } header { - color: #FFF; + color: #fff; padding: 5px 10px; text-align: center; background-color: #5f0000; @@ -12,7 +12,6 @@ header { font-size: 1.3em; } - .main-container { background: #ffffff; min-width: 375px; @@ -22,34 +21,9 @@ header { box-shadow: 0 2px 0 rgb(119, 0, 0); border-radius: 6px; overflow: hidden; - border:1px; -} - -.list-item { - display: flex; - justify-content: center; - align-content:center; - text-align: center; - font-size: 1.2em; - border-bottom: solid 2px #EEEEEE; - letter-spacing: 2px; -} - -.list-item:hover .remove-item { - visibility: visible; + border: 1px; } -.list-item { - color: #2F2366; -} - -.player-item { - flex-grow: 1; - line-height: 3.5em; - padding-left: 10px; -} - - /* Form & Buttons */ form { @@ -57,7 +31,7 @@ form { background-color: #5f0000; } -input[type=text] { +input[type="text"] { flex-grow: 1; border-width: 0 0 1px 0; margin: 15px 10px 15px 15px; @@ -71,18 +45,19 @@ input[type=text] { outline: none; } -input[type=text]::-webkit-input-placeholder { +input[type="text"]::-webkit-input-placeholder { color: #ffffff; letter-spacing: 2px; } -input[type=text]:focus { +input[type="text"]:focus { background-color: rgba(0, 0, 0, 0.2); } -input[type=submit], button { +input[type="submit"], +button { display: block; - font-size: .6em; + font-size: 0.6em; margin: 15px 15px 15px 0; padding: 10px; background-color: #8d3333; @@ -97,89 +72,11 @@ input[type=submit], button { } button, -input[type=submit] { - outline: none; - transition: background-color 0.2s ease, - color 0.2s ease; -} - - -.stage-container { - background:#5f0000; - display:flex; - justify-content: space-evenly; - align-content:center; - height: 300px; - padding: 20px 10px 20px 10px; - vertical-align: middle; - align-items:center; - justify-content:center; -} - -.item-card { - display:flex; - align-items:center; - justify-content:center; - width:100%; - height:100%; - border:1px; - border-color:white; - border-style: solid; - padding: 10px; - cursor: pointer; - color: white; -} - - - -.item-card-divider { - display:flex; - align-items:center; - justify-content:center; - width:20%; - text-align:center; - color: white; - font-size: 20px; -} - -.controls { - padding: 10px; - background-color:rgb(119, 0, 0); - display: flex; - justify-content:center; -} - -.stage-header { - padding: 10px; - text-align: center; - background-color:#9d0000; - color: white; - font-size: 1.1em; -} - -.remove-item { - font-size: 1.15em; - border: none; +input[type="submit"] { outline: none; - visibility: hidden; - color: #EF5350; - cursor: pointer; - margin: 0 10px 0 0; - padding: 0; - background: none; -} - -.results-container { - padding: 20px; - margin: auto; - display: flex; - flex-direction: column; - justify-content: center; - align-content: center; - text-align: center; + transition: background-color 0.2s ease, color 0.2s ease; } - ol { display: table; margin: 0 auto; @@ -189,74 +86,12 @@ li { font-weight: bold; } - -.loading-container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 30vh; - - background-color:#dedede -} - -.spinner { - width: 50px; - height: 50px; - border-radius: 50%; - border: 5px solid #ccc; - border-top-color: #000; - animation: spin 1s linear infinite; - margin: auto; -} - -.loading-text { - - font-size: 24px; - margin-top: 16px; - margin: auto; - animation: flash-loading 1s linear infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -@keyframes flash-loading { - 0% { - opacity: 1; - } - 50% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -.item-card:active { - animation: flash-selection 1.9s; -} - -@keyframes flash-selection { - 0% { - background-color: white; - } - 50% { - background-color: rgb(57, 1, 1); - } - 100% { - background-color: white; - } -} - /* Mobile Styles */ /* Apply styles when screen size is less than or equal to 768px */ @media screen and (max-width: 768px) { - html, body { + html, + body { font-size: 16px; margin: 0px; height: 100%; @@ -269,7 +104,7 @@ li { height: 100%; width: 100%; } - + header { font-size: 1.6em; min-height: 10%; @@ -279,7 +114,7 @@ li { align-items: center; justify-content: center; } - + .main-container { width: 100%; height: 100%; @@ -289,146 +124,24 @@ li { display: flex; flex-direction: column; flex: 1; - - } - - .list-item { - font-size: 1.3em; - letter-spacing: normal; - padding: 10px; - - } - - .items-list { - flex: 1 1 auto; - display: flex; - flex-direction: column; - overflow-y: scroll; - justify-content: left; - align-items: center; - } - - - .player-item { - line-height: 2.5em; } form { flex-direction: column; } - .items-list form { - width: 100%; - } - - input[type=text] { + input[type="text"] { margin: 10px 0; font-size: 1.5em; } - input[type=submit], button { + input[type="submit"], + button { font-size: 1em; margin: 10px 0; } - .stage-container { - height: auto; - flex-direction: column; - padding: 10px; - flex: 1 1 auto; - display: flex; - justify-content: center; - align-items: center; - - } - - .item-card { - width: 100%; - min-height: 60px; - margin-bottom: 10px; - font-size: 1.8em; - padding: 0px; - background-color: #8d3333; - border-radius: 10px; - border: 5px; - border-style: solid; - border-color: #aea1a1; - color: #fff; - letter-spacing: 2px; - font-weight: bold; - text-shadow: none; - cursor: pointer; - } - - .item-card-divider { - width: 100%; - background-color:#9d0000; - margin-bottom: 10px; - font-size: 1.8em; - } - - .controls { - flex-direction: column; - } - - .stage-header { - font-size: 1.3em; - font-weight: bold; - } - - .remove-item { - font-size: 1em; - margin: 0; - } - - .remove-item { - font-size: 1.15em; - border: none; - outline: none; - visibility: visible; - color: #EF5350; - cursor: pointer; - margin: 0 10px 0 0; - padding: 0; - background: none; - } - - .results-container { - padding: 10px; - font-size: 1.5em; - flex: 1 1 auto; - display: flex; - flex-direction: column; - overflow-y: scroll; - justify-content: left; - align-items: center; - width: 100%; - } - li { font-size: 1em; } - - .loading-container { - height: auto; - flex-direction: column; - padding: 10px; - flex: 1 1 auto; - display: flex; - justify-content: left; - align-items: center; - } - - .spinner { - width: 75px; - height: 75px; - border-width: 3px; - } - - .loading-text { - font-size: 1.7em; - font-weight: bold; - margin-top: 10px; - } - }