diff --git a/package.json b/package.json index aca6d858b1..cd1d7c49ab 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,7 @@ "cypress:run": "cypress run", "lint": "eslint src/**/*.{js,jsx,ts,tsx}", "lint:fix": "eslint --fix src/**/*.{js,jsx,ts,tsx}", - "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,md}\" --config ./.prettierrc", + "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,scss,md}\" --config ./.prettierrc", "prepare": "husky install", "pre-commit": "lint-staged" }, diff --git a/src/App.css b/src/App.css index 3ba0679a49..ff7d1c142e 100644 --- a/src/App.css +++ b/src/App.css @@ -620,4 +620,4 @@ small { ::-webkit-scrollbar { width: 25px; -} \ No newline at end of file +} diff --git a/src/common/home/home.css b/src/common/home/home.css index 687f03a5ad..17337fea65 100644 --- 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 index 0fbcfb3b8c..cf8bba9e91 100644 --- 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/codenchill/features/DisplayTrackControls/TrackControlSlice.js b/src/plays/codenchill/features/DisplayTrackControls/TrackControlSlice.js index dfcdeb76e1..7c34d85a57 100644 --- 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/cricket-game/components/EndGameScreen.jsx b/src/plays/cricket-game/components/EndGameScreen.jsx index 2ec6dd551e..3e412b711d 100644 --- 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 diff --git a/src/plays/cricket-game/components/TopBar.jsx b/src/plays/cricket-game/components/TopBar.jsx index d3ff7703b9..50889ce2bf 100644 --- 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 }) { diff --git a/src/plays/cricket-game/game/gameLogic.js b/src/plays/cricket-game/game/gameLogic.js index 1227dffc58..57fff1177f 100644 --- 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/custommemesgenerator/Custommemesgenerator.jsx b/src/plays/custommemesgenerator/Custommemesgenerator.jsx index 284af0368b..3aefca12cf 100644 --- 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/digital-delight/components/CategoryFact.jsx b/src/plays/digital-delight/components/CategoryFact.jsx index 8ed3c8c5dd..6df1f3adf1 100644 --- 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/Modal.jsx b/src/plays/digital-delight/components/Modal.jsx index b734a1a88f..f6b14066ff 100644 --- 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/Title.jsx b/src/plays/digital-delight/components/Title.jsx index a2ef9aea20..dc2e8e2a79 100644 --- a/src/plays/digital-delight/components/Title.jsx +++ b/src/plays/digital-delight/components/Title.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import './Title.css'; function RealTitle() { diff --git a/src/plays/hangman-game/Readme.md b/src/plays/hangman-game/Readme.md index 13102f2095..1fb9cf580f 100644 --- a/src/plays/hangman-game/Readme.md +++ b/src/plays/hangman-game/Readme.md @@ -1,6 +1,6 @@ # Hangman Game -Hangman is an old school favorite, a word game where the goal is simply to find the missing word or words. You will be presented with a number of blank spaces representing the missing letters you need to find. Use the keyboard to guess a letter. +Hangman is an old school favorite, a word game where the goal is simply to find the missing word or words. You will be presented with a number of blank spaces representing the missing letters you need to find. Use the keyboard to guess a letter. ## Play Demographic @@ -11,30 +11,29 @@ Hangman is an old school favorite, a word game where the goal is simply to find - User: ANKITy102 - Gihub Link: https://github.com/ANKITy102 -- Blog: -- Video: +- Blog: +- Video: ## Implementation Details The Hangman game is structured around four major components, each designed for enhanced aesthetics and responsiveness using the Styled Components library: 1. Drawing.tsx -The Drawing.tsx component plays a crucial role in rendering the visual representation of the Hangman figure as the game progresses. It provides a visual cue to the player regarding their current progress and incorrect guesses. + The Drawing.tsx component plays a crucial role in rendering the visual representation of the Hangman figure as the game progresses. It provides a visual cue to the player regarding their current progress and incorrect guesses. 2. Word.tsx -The Word.tsx component is responsible for managing the user's input and displaying the correct answer. It ensures a seamless interaction between the player's guesses and the hidden word, providing real-time feedback on the correctness of their choices. + The Word.tsx component is responsible for managing the user's input and displaying the correct answer. It ensures a seamless interaction between the player's guesses and the hidden word, providing real-time feedback on the correctness of their choices. 3. Keyboard.tsx -The Keyboard.tsx component is designed to facilitate user input. It presents an interactive keyboard to players, allowing them to select letters as guesses. This component enhances the user experience by making it intuitive and straightforward to make guesses. + The Keyboard.tsx component is designed to facilitate user input. It presents an interactive keyboard to players, allowing them to select letters as guesses. This component enhances the user experience by making it intuitive and straightforward to make guesses. 4. Main.tsx -The Main.tsx component serves as the central hub where all other components are integrated, resulting in the complete Hangman game experience. It orchestrates the flow of the game, including initializing the game state, tracking guessed letters, and determining whether the player has won or lost. + The Main.tsx component serves as the central hub where all other components are integrated, resulting in the complete Hangman game experience. It orchestrates the flow of the game, including initializing the game state, tracking guessed letters, and determining whether the player has won or lost. In addition to these core components, the game relies on a wordList.json file, which contains a collection of hints and words used throughout the gameplay. These hints provide context to players and make the game more engaging and challenging. This modular and organized structure ensures that the Hangman game is not only enjoyable but also maintainable and extensible, making it an excellent showcase of best practices in React development. - ## Consideration Update all considerations(if any) diff --git a/src/plays/hangman-game/components/Drawing.tsx b/src/plays/hangman-game/components/Drawing.tsx index a6d75c7df9..e57ccd0b18 100644 --- a/src/plays/hangman-game/components/Drawing.tsx +++ b/src/plays/hangman-game/components/Drawing.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styled from 'styled-components'; + import { Head, Body, diff --git a/src/plays/hangman-game/components/Keyboard.tsx b/src/plays/hangman-game/components/Keyboard.tsx index 84b1bd5cb8..e3350ae45c 100644 --- a/src/plays/hangman-game/components/Keyboard.tsx +++ b/src/plays/hangman-game/components/Keyboard.tsx @@ -1,6 +1,5 @@ import { useEffect } from 'react'; import React from 'react'; -import styled from 'styled-components'; import { KEYS } from '../constants/constants'; import { Key, KeyboardGrid, KeyContainer } from '../styled-components'; diff --git a/src/plays/hangman-game/components/Word.tsx b/src/plays/hangman-game/components/Word.tsx index b25d22fdf3..c2bb21a937 100644 --- a/src/plays/hangman-game/components/Word.tsx +++ b/src/plays/hangman-game/components/Word.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import styled from 'styled-components'; import { Border, LetterComponent, WordContainer } from '../styled-components'; interface WordProps { diff --git a/src/plays/hangman-game/constants/constants.tsx b/src/plays/hangman-game/constants/constants.tsx index f2fb8c576f..2179c09ee1 100644 --- a/src/plays/hangman-game/constants/constants.tsx +++ b/src/plays/hangman-game/constants/constants.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - export const KEYS = [ 'a', 'b', diff --git a/src/plays/hangman-game/styles.css b/src/plays/hangman-game/styles.css index f314329435..5fd508fa9e 100644 --- a/src/plays/hangman-game/styles.css +++ b/src/plays/hangman-game/styles.css @@ -1,2 +1 @@ /* enter stlyes here */ - diff --git a/src/plays/infinite-scroll-with-debouncing-concept/InfiniteScrollWithDebouncingConcept.jsx b/src/plays/infinite-scroll-with-debouncing-concept/InfiniteScrollWithDebouncingConcept.jsx index 6dd7f9a10b..0ae09c59b0 100644 --- a/src/plays/infinite-scroll-with-debouncing-concept/InfiniteScrollWithDebouncingConcept.jsx +++ b/src/plays/infinite-scroll-with-debouncing-concept/InfiniteScrollWithDebouncingConcept.jsx @@ -34,14 +34,14 @@ function InfiniteScrollWithDebouncingConcept(props) { return new Promise((resolve, reject) => { if (apiQuery) { try { - const promise = fetch( + fetch( 'https://openlibrary.org/search.json?' + new URLSearchParams({ q: apiQuery, page: pageNumber }) ).then((res) => { - const data = res.json().then((data) => { + res.json().then((data) => { resolve(); if (data.docs.length === 0) { setNoData(true); diff --git a/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx b/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx index 264cbd32b8..3a45d978f3 100644 --- a/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx +++ b/src/plays/multiplayer-tic-tac-toe/MultiplayerTicTacToe.tsx @@ -50,9 +50,10 @@ function MultiplayerTicTacToe(props: any) { if (pos === 'cross' || pos === 'circle') { count++; } - if (GAME_ARRAY.length === 9 && GAME_ARRAY.indexOf('') < 0) { + if (count > 9 || (GAME_ARRAY.length === 9 && GAME_ARRAY.indexOf('')) < 0) { setFinalMessage('Game Draw!'); setIsFinished(true); + count = 0; } }); diff --git a/src/plays/multiselect-component/styles.scss b/src/plays/multiselect-component/styles.scss index 4ccc3aee64..154b92b6aa 100644 --- a/src/plays/multiselect-component/styles.scss +++ b/src/plays/multiselect-component/styles.scss @@ -9,7 +9,7 @@ $select-component-dropdown-max-height: 450px; #multi-select-component { width: $select-component-width; - margin-top: 100px; + margin-top: 100px; width: 100%; height: max-content; diff --git a/src/plays/object-detector/ObjectDetector.jsx b/src/plays/object-detector/ObjectDetector.jsx index 3223acd92c..b898502293 100644 --- a/src/plays/object-detector/ObjectDetector.jsx +++ b/src/plays/object-detector/ObjectDetector.jsx @@ -1,6 +1,5 @@ import PlayHeader from 'common/playlists/PlayHeader'; import React, { useRef, useEffect } from 'react'; -import * as tf from '@tensorflow/tfjs'; import * as cocossd from '@tensorflow-models/coco-ssd'; import Webcam from 'react-webcam'; diff --git a/src/plays/random-quote-card-generator/Components/SideBarOperation.jsx b/src/plays/random-quote-card-generator/Components/SideBarOperation.jsx index 788b6cc5eb..a508fb862e 100644 --- a/src/plays/random-quote-card-generator/Components/SideBarOperation.jsx +++ b/src/plays/random-quote-card-generator/Components/SideBarOperation.jsx @@ -109,7 +109,7 @@ const SideBarOperation = ({ // 2. Card Color Feature - const handleCardColor = (e) => { + const handleCardColor = () => { if (cardColor === 'Light') { setCardColor('Dark'); } else { diff --git a/src/plays/savings-calculator/components/SavingOptions/savingOptions.scss b/src/plays/savings-calculator/components/SavingOptions/savingOptions.scss index 722fc8f8bd..2284956c44 100644 --- a/src/plays/savings-calculator/components/SavingOptions/savingOptions.scss +++ b/src/plays/savings-calculator/components/SavingOptions/savingOptions.scss @@ -1,4 +1,4 @@ -@import "../../styles/variables"; +@import '../../styles/variables'; .savingCalculator__savingOptions { padding-left: 100px; @@ -112,21 +112,20 @@ .savingOptions__radioInput:checked + label:before, .savingOptions__radioInput:not(:checked) + label:before { - content: ""; + content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; - box-shadow: 3px 3px 2px 2px rgba(0, 0, 0, 0.1), - -3px -3px 2px 2px rgba(255, 255, 255, 0.868); + box-shadow: 3px 3px 2px 2px rgba(0, 0, 0, 0.1), -3px -3px 2px 2px rgba(255, 255, 255, 0.868); border-radius: 100%; background: #fff; } .savingOptions__radioInput:checked + label:after, .savingOptions__radioInput:not(:checked) + label:after { - content: ""; + content: ''; width: 10px; height: 10px; background: $gradient; diff --git a/src/plays/savings-calculator/components/Total/total.scss b/src/plays/savings-calculator/components/Total/total.scss index 202397d012..85acb6ea03 100644 --- a/src/plays/savings-calculator/components/Total/total.scss +++ b/src/plays/savings-calculator/components/Total/total.scss @@ -1,4 +1,4 @@ -@import "../../styles/variables"; +@import '../../styles/variables'; .savingCalculator__total { text-align: center; diff --git a/src/plays/savings-calculator/styles/savingsCalculator.scss b/src/plays/savings-calculator/styles/savingsCalculator.scss index e1a0c40a44..a5536c3167 100644 --- a/src/plays/savings-calculator/styles/savingsCalculator.scss +++ b/src/plays/savings-calculator/styles/savingsCalculator.scss @@ -1,4 +1,4 @@ -@import "./variables"; +@import './variables'; .savingsCalculator__container { display: flex; @@ -11,8 +11,7 @@ .savingsCalculator { display: flex; align-items: center; - box-shadow: 7px 7px 20px 5px rgba(0, 0, 0, 0.1), - -7px -7px 20px 5px rgba(255, 255, 255, 0.868); + box-shadow: 7px 7px 20px 5px rgba(0, 0, 0, 0.1), -7px -7px 20px 5px rgba(255, 255, 255, 0.868); border-radius: 16px; color: $text; padding: 4vh 3vw; diff --git a/src/plays/self-clicking-button/SelfClickingButton.jsx b/src/plays/self-clicking-button/SelfClickingButton.jsx index 5f92255963..30be0b49fb 100644 --- a/src/plays/self-clicking-button/SelfClickingButton.jsx +++ b/src/plays/self-clicking-button/SelfClickingButton.jsx @@ -9,7 +9,7 @@ function SelfClickingButton(props) { const buttonRef = useRef(null); const [counter, setCounter] = useState(0); - function clickHandler(event) { + function clickHandler() { setCounter((prev) => prev + 1); } diff --git a/src/plays/tube2tunes/Tube2tunes.jsx b/src/plays/tube2tunes/Tube2tunes.jsx index 6d2f686516..0b23236264 100644 --- a/src/plays/tube2tunes/Tube2tunes.jsx +++ b/src/plays/tube2tunes/Tube2tunes.jsx @@ -57,7 +57,7 @@ function Tube2tunes(props) { setLoading(false); } }) - .catch((err) => { + .catch(() => { // console.log('Error: ', err); });