reactplay · Angra974 · Oct 13, 2023 · Oct 14, 2023
diff --git a/src/App.css b/src/App.css
@@ -620,4 +620,4 @@ small {
 
 ::-webkit-scrollbar {
  width: 25px;
-}
+}
diff --git a/src/common/home/home.css b/src/common/home/home.css
@@ -728,7 +728,7 @@
  .heart-handshake {
  opacity: 0;
  transition: all 0.2s ease-in-out;
- position: absolute; 
+ position: absolute;
  left: 15rem;
  }
  }

diff --git a/src/common/playlists/PlayThumbnail.jsx b/src/common/playlists/PlayThumbnail.jsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { BsPlayCircleFill } from 'react-icons/bs';
-import thumbPlay from 'images/thumb-play.png';
 import Shimmer from 'react-shimmer-effect';
 import userImage from 'images/user.png';
 import Like from 'common/components/Like/Like';

diff --git a/src/plays/2048/Game2048Styles/game.css b/src/plays/2048/Game2048Styles/game.css
@@ -6,9 +6,13 @@
  position: absolute;
  left: 36rem;
  top: 11rem;
- box-shadow: 1.9px 2.6px 9.6px rgb(0 0 0 / 7%), 4.6px 6.3px 18.2px rgb(0 0 0 / 10%),
- 8.6px 11.8px 25.8px rgb(0 0 0 / 12%), 15.4px 21px 32.8px rgb(0 0 0 / 14%),
- 28.8px 39.3px 41.4px rgb(0 0 0 / 17%), 69px 94px 80px rgb(0 0 0 / 24%);
+ box-shadow:
+ 1.9px 2.6px 9.6px rgb(0 0 0 / 7%),
+ 4.6px 6.3px 18.2px rgb(0 0 0 / 10%),
+ 8.6px 11.8px 25.8px rgb(0 0 0 / 12%),
+ 15.4px 21px 32.8px rgb(0 0 0 / 14%),
+ 28.8px 39.3px 41.4px rgb(0 0 0 / 17%),
+ 69px 94px 80px rgb(0 0 0 / 24%);
 }
 
 .twenty-forty-eight-row {

diff --git a/src/plays/analog-clock/AnalogClock.css b/src/plays/analog-clock/AnalogClock.css
@@ -12,7 +12,10 @@
  border-radius: 50%;
  position: relative;
  background-color: #3d3d3d;
- box-shadow: inset 0px 6px 0px 2px #646262, -4px 4px 1px 0px #959393, 0px 0px 1px 2px #959393,
+ box-shadow:
+ inset 0px 6px 0px 2px #646262,
+ -4px 4px 1px 0px #959393,
+ 0px 0px 1px 2px #959393,
  -4px 4px 7px 1px #434343;
 }
 .clock::after {
@@ -24,7 +27,9 @@
  top: 49%;
  left: 49%;
  border-radius: 50%;
- box-shadow: 0px 0px 0px 4px #a3a1a1, 0px 0px 0px 5px #9d9d9d;
+ box-shadow:
+ 0px 0px 0px 4px #a3a1a1,
+ 0px 0px 0px 5px #9d9d9d;
 }
 .hour-hand {
  width: 10px;

diff --git a/src/plays/basic-calculator/styles.css b/src/plays/basic-calculator/styles.css
@@ -17,7 +17,9 @@
  border: 0;
  outline: 0;
  border-radius: 10px;
- box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.2);
+ box-shadow:
+ -8px -8px 15px rgba(255, 255, 255, 0.1),
+ 5px 5px 15px rgba(0, 0, 0, 0.2);
  background: white;
 }
 .calculator_grid > button:hover,

diff --git a/src/plays/codenchill/features/DisplayTrackControls/TrackControlSlice.js b/src/plays/codenchill/features/DisplayTrackControls/TrackControlSlice.js
@@ -1,4 +1,4 @@
-import { createSlice, current } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
 import tracks from '../../data/track';
 
 const initialState = {

diff --git a/src/plays/context-with-real-usecases/contextWithRealUsecases.css b/src/plays/context-with-real-usecases/contextWithRealUsecases.css
@@ -210,14 +210,20 @@ pre {
  padding: 2px 10px;
  text-transform: capitalize;
  color: #fff;
- box-shadow: 1px 1px rgb(123, 123, 123), 2px 2px 5px rgb(173, 173, 173),
- 5px 5px 10px 0px rgb(134, 134, 134), 7px 7px 15px #ccc;
+ box-shadow:
+ 1px 1px rgb(123, 123, 123),
+ 2px 2px 5px rgb(173, 173, 173),
+ 5px 5px 10px 0px rgb(134, 134, 134),
+ 7px 7px 15px #ccc;
  margin: 15px;
 }
 .context-with-real-usecases .btn-cuisine-modal:active {
  transform: translateY(1px);
- box-shadow: 1px 1px rgb(123, 123, 123), 2px 2px 3px rgb(173, 173, 173),
- 3px 3px 5px 0px rgb(134, 134, 134), 4px 4px 10px #ccc;
+ box-shadow:
+ 1px 1px rgb(123, 123, 123),
+ 2px 2px 3px rgb(173, 173, 173),
+ 3px 3px 5px 0px rgb(134, 134, 134),
+ 4px 4px 10px #ccc;
 }
 
 @media screen and (max-width: 915px) {

diff --git a/src/plays/cricket-game/components/EndGameScreen.jsx b/src/plays/cricket-game/components/EndGameScreen.jsx
@@ -16,7 +16,7 @@ export default function EndGameScreen({ endScreenRef, resultTitle, resultDesc, r
 
  <button
  className="start-match-button w-32 h-8 md:w-40 md:h-10 rounded-full font-semibold text-base md:text-xl font-cricket-game"
- onClick={(event) => {
+ onClick={() => {
  window.location.reload();
  }}
  >

diff --git a/src/plays/cricket-game/components/Modal.jsx b/src/plays/cricket-game/components/Modal.jsx
@@ -15,7 +15,7 @@ export default function Modal({ userLevel, levelInfo, startGame, modalRef }) {
 
  <button
  className="start-match-button w-32 h-8 md:w-40 md:h-10 rounded-full font-semibold text-lg md:text-xl font-cricket-game"
- onClick={(event) => startGame()}
+ onClick={() => startGame()}
  >
  START!
  </button>

diff --git a/src/plays/cricket-game/components/TopBar.jsx b/src/plays/cricket-game/components/TopBar.jsx
@@ -26,13 +26,13 @@ export default function TopBar({ hitBoxRef, gameTrack }) {
  </button>
  <button
  className="top-bar-button w-6 md:w-8 h-8 rounded-lg bg-orange-200 text-sm opacity-80 hover:opacity-90 active:opacity-100"
- onClick={(event) => toggleMusicPlay()}
+ onClick={() => toggleMusicPlay()}
  >
  🎵
  </button>
  <button
  className="top-bar-button w-24 md:w-28 h-8 rounded-lg bg-orange-200 text-[0.80rem] md:text-sm opacity-80 hover:opacity-90 active:opacity-100 font-cricket-game"
- onClick={(event) => hitBoxRef.current.classList.toggle('hit-box-blink')}
+ onClick={() => hitBoxRef.current.classList.toggle('hit-box-blink')}
  >
  Toggle Hit Box
  </button>

diff --git a/src/plays/cricket-game/game/gameLogic.js b/src/plays/cricket-game/game/gameLogic.js
@@ -1,4 +1,4 @@
-import { plural, sleep, randomChoice } from './utils.js';
+import { sleep, randomChoice } from './utils.js';
 import { COMMENTARY } from './commentary.js';
 
 export class GameState {
@@ -87,7 +87,7 @@ export function hitTheBall(event, ballCentre, shotBallRef) {
  shotBallRef.current.classList.add(shotName);
 
  // Reset shot ball's position now
- sleep(1 * 1000).then((resp) => {
+ sleep(1 * 1000).then(() => {
  shotBallRef.current.classList.add('invisible');
  shotBallRef.current.classList.remove(shotName);
 

diff --git a/src/plays/cricket-game/styles.css b/src/plays/cricket-game/styles.css
@@ -5,8 +5,11 @@
 /* The main body of game */
 .cricket-home-body {
  background-image: url('./assets//cricket-ground.jpg');
- box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.2), 0px 0px 7px 2px rgba(0, 0, 0, 0.2),
- 0px 0px 7px 2px rgba(0, 0, 0, 0.2), 0px 0px 7px 2px rgba(0, 0, 0, 0.2);
+ box-shadow:
+ 0px 0px 7px 2px rgba(0, 0, 0, 0.2),
+ 0px 0px 7px 2px rgba(0, 0, 0, 0.2),
+ 0px 0px 7px 2px rgba(0, 0, 0, 0.2),
+ 0px 0px 7px 2px rgba(0, 0, 0, 0.2);
 
  padding: 0px;
  margin: 0px;
@@ -37,7 +40,9 @@
 .score,
 .info-box,
 .commentary-and-timeline {
- box-shadow: 5px 5px 5px rgba(38, 107, 245, 0.3), -5px -5px 5px rgba(114, 239, 253, 0.3);
+ box-shadow:
+ 5px 5px 5px rgba(38, 107, 245, 0.3),
+ -5px -5px 5px rgba(114, 239, 253, 0.3);
 }
 
 .score,

diff --git a/src/plays/custommemesgenerator/Custommemesgenerator.css b/src/plays/custommemesgenerator/Custommemesgenerator.css
@@ -166,8 +166,16 @@
  text-transform: uppercase;
  color: white;
  letter-spacing: 1px;
- text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 0 2px 0 #000,
- 2px 0 0 #000, 0 -2px 0 #000, -2px 0 0 #000, 2px 2px 5px #000;
+ text-shadow:
+ 2px 2px 0 #000,
+ -2px -2px 0 #000,
+ 2px -2px 0 #000,
+ -2px 2px 0 #000,
+ 0 2px 0 #000,
+ 2px 0 0 #000,
+ 0 -2px 0 #000,
+ -2px 0 0 #000,
+ 2px 2px 5px #000;
 }
 
 @media screen and (max-width: 400px) {

diff --git a/src/plays/custommemesgenerator/Custommemesgenerator.jsx b/src/plays/custommemesgenerator/Custommemesgenerator.jsx
@@ -1,10 +1,9 @@
-import PlayHeader from 'common/playlists/PlayHeader';
 import './Custommemesgenerator.css';
 import Header from './Header.jsx';
 import Meme from './Meme.jsx';
 
 // WARNING: Do not change the entry componenet name
-function Custommemesgenerator(props) {
+function Custommemesgenerator() {
  // Your Code Start below.
 
  return (

diff --git a/src/plays/dad-jokes/components/jokeList/jokeList.css b/src/plays/dad-jokes/components/jokeList/jokeList.css
@@ -49,7 +49,9 @@
 .dad-jokes-play .jokelist-sidebar-emoji img {
  width: 45%;
  border-radius: 50%;
- box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.1);
+ box-shadow:
+ 0 19px 38px rgba(0, 0, 0, 0.3),
+ 0 15px 12px rgba(0, 0, 0, 0.1);
 }
 
 /*----------------------------New Jokes Button----------------------------*/
@@ -85,7 +87,9 @@
  align-self: center;
  width: 70%;
  overflow: scroll;
- box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.1);
+ box-shadow:
+ 0 19px 38px rgba(0, 0, 0, 0.3),
+ 0 15px 12px rgba(0, 0, 0, 0.1);
 }
 
 .dad-jokes-play .dark .jokelist-jokes {

diff --git a/src/plays/dad-jokes/components/singleJoke/SingleJoke.css b/src/plays/dad-jokes/components/singleJoke/SingleJoke.css
@@ -39,7 +39,9 @@
  font-size: 20px;
  font-weight: 300;
  border: 3px solid red;
- box-shadow: 0 10px 38px rgba(0, 0, 0, 0.2), 0 10px 12px rgba(0, 0, 0, 0.1);
+ box-shadow:
+ 0 10px 38px rgba(0, 0, 0, 0.2),
+ 0 10px 12px rgba(0, 0, 0, 0.1);
  color: #0d0d0d;
 }
 
@@ -81,7 +83,9 @@
  font-size: 3rem;
  margin-left: auto;
  border-radius: 50%;
- box-shadow: 0 10px 38px rgba(0, 0, 0, 0.2), 0 10px 12px rgba(0, 0, 0, 0.1);
+ box-shadow:
+ 0 10px 38px rgba(0, 0, 0, 0.2),
+ 0 10px 12px rgba(0, 0, 0, 0.1);
  color: #ffc107;
 }
 

diff --git a/src/plays/dev-jokes/devJokes.css b/src/plays/dev-jokes/devJokes.css
@@ -46,16 +46,24 @@
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
- box-shadow: rgba(44, 187, 99, 0.2) 0 -25px 18px -14px inset, rgba(44, 187, 99, 0.15) 0 1px 2px,
- rgba(44, 187, 99, 0.15) 0 2px 4px, rgba(44, 187, 99, 0.15) 0 4px 8px,
- rgba(44, 187, 99, 0.15) 0 8px 16px, rgba(44, 187, 99, 0.15) 0 16px 32px;
+ box-shadow:
+ rgba(44, 187, 99, 0.2) 0 -25px 18px -14px inset,
+ rgba(44, 187, 99, 0.15) 0 1px 2px,
+ rgba(44, 187, 99, 0.15) 0 2px 4px,
+ rgba(44, 187, 99, 0.15) 0 4px 8px,
+ rgba(44, 187, 99, 0.15) 0 8px 16px,
+ rgba(44, 187, 99, 0.15) 0 16px 32px;
  position: relative;
 }
 
 .dev-jokes-btn:hover {
- box-shadow: rgba(44, 187, 99, 0.35) 0 -25px 18px -14px inset, rgba(44, 187, 99, 0.25) 0 1px 2px,
- rgba(44, 187, 99, 0.25) 0 2px 4px, rgba(44, 187, 99, 0.25) 0 4px 8px,
- rgba(44, 187, 99, 0.25) 0 8px 16px, rgba(44, 187, 99, 0.25) 0 16px 32px;
+ box-shadow:
+ rgba(44, 187, 99, 0.35) 0 -25px 18px -14px inset,
+ rgba(44, 187, 99, 0.25) 0 1px 2px,
+ rgba(44, 187, 99, 0.25) 0 2px 4px,
+ rgba(44, 187, 99, 0.25) 0 4px 8px,
+ rgba(44, 187, 99, 0.25) 0 8px 16px,
+ rgba(44, 187, 99, 0.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
 }
 @media screen and (max-width: 764px) {

diff --git a/src/plays/digital-delight/components/CategoryFact.jsx b/src/plays/digital-delight/components/CategoryFact.jsx
@@ -8,7 +8,7 @@ import './Categoryfact.css';
 
 function CategoryFact() {
  const [fact, setFact] = useState(CategoryFacts);
- const [error, setError] = useState('');
+ // const [error, setError] = useState('');
  const [selectedVoice, setSelectedVoice] = useState('Zira');
  const [showSelecter, setShowSelecter] = useState(false);
  const speechHandler = (msg) => {
@@ -42,7 +42,7 @@ function CategoryFact() {
  speechHandler(new SpeechSynthesisUtterance(data.number + ' is ' + data.text));
  setShowSelecter(true);
  } catch (error) {
- setError('Error fetching fact. Please try again later.');
+ // setError('Error fetching fact. Please try again later.');
  }
  };
 

diff --git a/src/plays/digital-delight/components/Categoryfact.css b/src/plays/digital-delight/components/Categoryfact.css
@@ -82,8 +82,18 @@
 
 .tooltip {
  position: relative;
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
- Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ font-family:
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ 'Segoe UI',
+ Roboto,
+ Oxygen,
+ Ubuntu,
+ Cantarell,
+ 'Open Sans',
+ 'Helvetica Neue',
+ sans-serif;
  color: rgb(106, 101, 94);
  font-size: 18px;
  padding: 5px;

diff --git a/src/plays/digital-delight/components/Modal.css b/src/plays/digital-delight/components/Modal.css
@@ -179,19 +179,25 @@
  cursor: pointer;
  will-change: box-shadow, transform;
  background: radial-gradient(100% 100% at 100% 0%, #89e5ff 0%, #5468ff 100%);
- box-shadow: 0px 2px 4px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%),
+ box-shadow:
+ 0px 2px 4px rgb(45 35 66 / 40%),
+ 0px 7px 13px -3px rgb(45 35 66 / 30%),
  inset 0px -3px 0px rgb(58 65 111 / 50%);
  padding: 0 32px;
  border-radius: 6px;
  color: #fff;
  height: 48px;
  font-size: 18px;
  text-shadow: 0 1px 0 rgb(0 0 0 / 40%);
- transition: box-shadow 0.15s ease, transform 0.15s ease;
+ transition:
+ box-shadow 0.15s ease,
+ transform 0.15s ease;
 }
 
 .digits-delight-modal .content .button-section button :hover {
- box-shadow: 0px 4px 8px rgb(45 35 66 / 40%), 0px 7px 13px -3px rgb(45 35 66 / 30%),
+ box-shadow:
+ 0px 4px 8px rgb(45 35 66 / 40%),
+ 0px 7px 13px -3px rgb(45 35 66 / 30%),
  inset 0px -3px 0px #3c4fe0;
  transform: translateY(-2px);
 }

diff --git a/src/plays/digital-delight/components/Modal.jsx b/src/plays/digital-delight/components/Modal.jsx
@@ -7,7 +7,7 @@ import { MdClose } from 'react-icons/md';
 
 const Modal = ({ showModal, toggle }) => {
  const [currState, setCurrentState] = useState(0);
- const data = structuringData[currState];
+ // const data = structuringData[currState];
 
  useEffect(() => {
  setCurrentState(0);

diff --git a/src/plays/digital-delight/components/TextFact.css b/src/plays/digital-delight/components/TextFact.css
@@ -11,7 +11,9 @@
  color: #ff4742;
  background: 0 0;
  padding: 8px;
- box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1.5px 0px;
+ box-shadow:
+ rgba(0, 0, 0, 0.07) 0px 2px 4px 0px,
+ rgba(0, 0, 0, 0.05) 0px 1px 1.5px 0px;
  font-weight: 800;
  font-size: 16px;
  height: 42px;
@@ -31,7 +33,9 @@
  border-radius: 4px;
  padding: 8px 16px;
  border: 2px solid transparent;
- box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px, rgb(0 0 0 / 24%) 0px 1px 2px;
+ box-shadow:
+ rgb(0 0 0 / 12%) 0px 1px 3px,
+ rgb(0 0 0 / 24%) 0px 1px 2px;
  background: rgb(251, 251, 251);
  transition: all 0.1s ease 0s;
 }

diff --git a/src/plays/digital-delight/components/Title.jsx b/src/plays/digital-delight/components/Title.jsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import './Title.css';
 
 function RealTitle() {