Merge pull request #143 from osutcj/Gauge-Meter-Timer

Hopefully working Gauge Clock

src/firebase/firebase.ts

@@ -2,7 +2,7 @@ import { initializeApp } from 'firebase/app';
 import { getDatabase } from 'firebase/database';
 import { getFirestore } from 'firebase/firestore';
 import { getAuth } from 'firebase/auth';
-import { environmentType } from '../utils/contants';
+import { environmentType } from '../utils/constants';
 
 // Your web app's Firebase configuration for local development
 const firebaseConfigDev = {

src/hooks/useFlashRound.ts

@@ -1,7 +1,7 @@
 import { doc, onSnapshot } from 'firebase/firestore';
 import React, { useEffect, useState } from 'react';
 import { FlashRound } from '../types/flashRound';
-import { FLASH_ROUND_COLLECTION } from '../utils/contants';
+import { FLASH_ROUND_COLLECTION } from '../utils/constants';
 import { firestore } from '../firebase/firebase';
 
 function useFlashRound(docId: string) {

src/hooks/useGame.ts

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { onSnapshot, doc } from 'firebase/firestore';
 import { firestore } from '../firebase/firebase';
-import { GAMES_COLLECTION } from '../utils/contants';
+import { GAMES_COLLECTION } from '../utils/constants';
 import { NormalGame } from '../types/game';
 import { EmptyGame } from '../models/game';
 

src/screens/Admin.tsx

@@ -15,7 +15,7 @@ import { currEnvironment, firestore } from '../firebase/firebase';
 import { auth } from '../firebase/firebase';
 import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
 import { collection, getDocs, query, where } from 'firebase/firestore';
-import { environmentType } from '../utils/contants';
+import { environmentType } from '../utils/constants';
 
 const Admin = () => {
  const [loggedIn, setLoggedIn] = useState(false);

src/screens/FlashRound.tsx

@@ -11,7 +11,8 @@ import { FlashRoundAnswers } from '../types/flashRound';
 import wrongAnswerSound from '../static/x.mp3';
 import { useSounds } from '../hooks/useSounds.hook';
 import wrongAnswerPng from '../static/x.png';
-import { TIMER_LENGTH, TIMER_BONUS } from '../utils/contants';
+import { TIMER_LENGTH, TIMER_BONUS } from '../utils/constants';
+import CountDownTimer from '../shared/FlashRound/CountDownTimer';
 
 const FlashRoundClient = () => {
  const [answers, setAnswers] = useState<FlashRoundAnswers[]>([]);
@@ -37,8 +38,6 @@ const FlashRoundClient = () => {
  return () => clearInterval(interval);
  }, []);
 
- console.log(currentTime);
-
  const Item = styled(Paper)(({ theme }) => ({
  background:
  'linear-gradient(to bottom,#cedbe9 0%,#aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%,#4bb8f0 71%, #3A8BC2 84%, #26558B 100%)',
@@ -115,32 +114,14 @@ const FlashRoundClient = () => {
  };
 
  const RenderCountdownCircle = () => {
- const percentage = (currentTime / TIMER_LENGTH) * 100;
-
- const countdownCircleStyles: React.CSSProperties = {
- position: 'absolute',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)',
- width: '200px',
- height: '200px',
- borderRadius: '50%',
- backgroundColor: 'transparent',
- border: '10px solid #fff'
- };
-
  return (
- <div style={countdownCircleStyles}>
- <div
- style={{
- fontSize: '36px',
- position: 'absolute',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)'
- }}
- ></div>
- </div>
+ <CountDownTimer
+ seconds={currentTime}
+ size={200}
+ strokeBgColor="#ffffff"
+ strokeColor="#000000"
+ strokeWidth={10}
+ />
  );
  };
 

src/screens/Game.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/Grid';
-import Container from '@mui/material/Container';
 import { styled } from '@mui/material';
 import { DBAnswer, DBQuestion } from '../types/questions';
 import { NormalGame } from '../types/game';
@@ -12,7 +10,7 @@ import useGame from '../hooks/useGame';
 import QuestionsService from '../services/questions.service';
 import wrongAnswerPng from '../static/x.png';
 import { truncateQuestion } from '../helpers/truncate-question';
-import { WRONG_ANSWER_TIME } from '../utils/contants';
+import { WRONG_ANSWER_TIME } from '../utils/constants';
 
 const Game = () => {
  const [currentQuestion, setCurrentQuestion] = useState<DBQuestion>();

src/scripts/addToFirestore.ts

@@ -1,6 +1,6 @@
 import { firestore } from '../firebase/firebase';
 import { addDoc, collection } from 'firebase/firestore';
-import { FLASH_ROUND_COLLECTION } from '../utils/contants';
+import { FLASH_ROUND_COLLECTION } from '../utils/constants';
 
 const arrayOfObjects = [
  {

src/scripts/seedFirestore.ts

@@ -1,5 +1,5 @@
 import { addDoc, collection } from 'firebase/firestore';
-import { QUESTIONS_COLLECTION } from '../utils/contants';
+import { QUESTIONS_COLLECTION } from '../utils/constants';
 import { firestore } from '../firebase/firebase';
 import { DBAnswer } from '../types/questions';
 

src/services/flash.service.ts

@@ -1,6 +1,6 @@
 import { addDoc, collection, deleteDoc, doc, getDoc, getDocs, updateDoc } from 'firebase/firestore';
 import { FlashRound } from '../types/flashRound';
-import { FLASH_ROUND_COLLECTION } from '../utils/contants';
+import { FLASH_ROUND_COLLECTION } from '../utils/constants';
 import { firestore } from '../firebase/firebase';
 
 const FlashRoundService = {

src/services/games.service.ts

@@ -1,6 +1,6 @@
 import { firestore, db } from '../firebase/firebase';
 import { collection, addDoc, getDoc, doc, getDocs, updateDoc, deleteDoc } from 'firebase/firestore';
-import { GAMES_COLLECTION } from '../utils/contants';
+import { GAMES_COLLECTION } from '../utils/constants';
 import { NormalGame } from '../types/game';
 
 const GamesService = {

src/services/questions.service.ts

@@ -1,6 +1,6 @@
 import { firestore, db } from '../firebase/firebase';
 import { collection, addDoc, getDoc, doc, getDocs, updateDoc, deleteDoc } from 'firebase/firestore';
-import { QUESTIONS_COLLECTION } from '../utils/contants';
+import { QUESTIONS_COLLECTION } from '../utils/constants';
 import { DBQuestion } from '../types/questions';
 
 const QuestionsService = {

src/shared/FlashRound/CountDownTimer.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { TIMER_BONUS, TIMER_LENGTH } from "../../utils/constants";
+
+type CountdownTimerProps = {
+ seconds: number;
+ size: number;
+ strokeBgColor: string;
+ strokeColor: string;
+ strokeWidth: number;
+};
+
+const CountDownTimer: React.FC<CountdownTimerProps> = ({
+ seconds,
+ size,
+ strokeBgColor,
+ strokeColor,
+ strokeWidth
+}) => {
+ const radius = size / 2;
+ const localStorageIsStarted = localStorage.getItem('isStarted')
+ const maxSeconds = localStorage.getItem('isFirstRound') === 'true' ? TIMER_LENGTH : (TIMER_LENGTH+TIMER_BONUS)
+ const circumference = size * Math.PI;
+
+ const countdownSizeStyles: React.CSSProperties = {
+ height: size,
+ width: size
+ };
+
+ const textStyles: React.CSSProperties = {
+ color: strokeColor,
+ fontSize: size * 0.3
+ };
+
+
+ const strokeDashoffset = () => {
+ if (localStorageIsStarted != 'true') {
+ return 0;
+ }
+ const fractionElapsed = seconds / maxSeconds;
+ console.log(fractionElapsed)
+ console.log(circumference, circumference * (1 - fractionElapsed))
+ return circumference * (1 - fractionElapsed);
+ };
+
+ return (
+ <div>
+ <div
+ style={{
+ opacity: localStorageIsStarted ? 0.4 : 1
+ }}
+ ></div>
+ <div style={{ ...styles.countdownContainer, ...countdownSizeStyles }}>
+ <p style={textStyles}>{seconds}s</p>
+ <svg style={styles.svg}>
+ <circle
+ cx={radius}
+ cy={radius}
+ r={radius}
+ fill="none"
+ stroke={strokeBgColor}
+ strokeWidth={strokeWidth}
+ ></circle>
+ </svg>
+ <svg style={styles.svg}>
+ <circle
+ strokeDasharray={circumference}
+ strokeDashoffset={strokeDashoffset()}
+ r={radius}
+ cx={radius}
+ cy={radius}
+ fill="none"
+ strokeLinecap="round"
+ stroke={strokeColor}
+ strokeWidth={strokeWidth}
+ ></circle>
+ </svg>
+ </div>
+ </div>
+ );
+};
+
+const styles = {
+ countdownContainer: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ position: 'relative' as 'relative',
+ margin: 'auto'
+ },
+ svg: {
+ position: 'absolute' as 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ transform: 'rotateY(-180deg) rotateZ(-90deg)',
+ overflow: 'visible'
+ } as React.CSSProperties
+};
+
+export default CountDownTimer;

src/shared/FlashRound/RoundAnswer.tsx

@@ -20,6 +20,7 @@ const RoundAnswer = (props: any) => {
  if (props.reset) {
  setAnswer('');
  setPoints(0);
+ setShowPoints(false);
  }
  }, [[props.reset]]);
 

src/shared/FlashRound/Timer.tsx

@@ -16,6 +16,11 @@ const Timer = () => {
  } = useTimerStore();
  const [storedCurrentTime, setStoredCurrentTime] = useLocalStorage('currentTime', currentTime);
  const [storedIsFirstRound, storedSetIsFirstRound] = useLocalStorage('isFirstRound', true);
+ const [storedIsStarted, setStoredIsStarted] = useLocalStorage('isStarted', false);
+
+ useEffect(() => {
+ localStorage.setItem('startAnimation', 'false');
+ }, []);
 
  useEffect(() => {
  let timer: any;
@@ -35,6 +40,11 @@ const Timer = () => {
  setStoredCurrentTime(currentTime);
  }, [currentTime, setStoredCurrentTime]);
 
+ useEffect(() => {
+ setStoredIsStarted(isRunning)
+ }, [currentTime, setStoredIsStarted]);
+
+
  useEffect(() => {
  storedSetIsFirstRound(isFirstRound);
  }, [isFirstRound, storedSetIsFirstRound]);
@@ -49,6 +59,10 @@ const Timer = () => {
  storedSetIsFirstRound(false);
  };
 
+ const handleButtonClick = () => {
+ startTimer();
+ };
+
  return (
  <div style={{ marginBottom: '20px;' }}>
  <h2 style={{ fontFamily: 'Popins', fontSize: '30px;', marginBottom: '10px' }}>
@@ -60,7 +74,7 @@ const Timer = () => {
  xs={12}
  style={{ justifyContent: 'space-around', display: 'flex', width: '50%', margin: '0 auto' }}
  >
- <Button variant="contained" onClick={startTimer} disabled={isRunning}>
+ <Button variant="contained" onClick={handleButtonClick} disabled={isRunning}>
  Start
  </Button>
  <Button