From e2c70835e25ff33bd40c38765a659e29bbf1aeb4 Mon Sep 17 00:00:00 2001 From: Sergey Krylov Date: Mon, 25 Jul 2022 17:44:48 +0500 Subject: [PATCH] add OPTIONS page, add size, difficult level mode --- src/App.module.scss | 1 + src/components/AppRoutes.tsx | 8 +- src/components/BottomPanel/BottomPanel.tsx | 99 -------------- src/components/CardsField/CardsField.tsx | 2 +- .../FinishedField/FinishedField.module.scss | 27 +++- .../FinishedField/FinishedField.tsx | 9 +- .../MatchGame/MatchGame.module.scss | 26 ---- src/components/MatchGame/MatchGame.tsx | 85 ------------ .../BottomPanel/BottomPanel.module.scss | 0 src/components/UI/BottomPanel/BottomPanel.tsx | 15 ++ src/components/UI/Button/Button.tsx | 2 +- src/constants.ts | 2 + src/context/MatchGameContext.tsx | 18 ++- .../MatchGame/MatchGame.module.scss} | 0 src/pages/MatchGame/MatchGame.tsx | 129 ++++++++++++++++++ src/pages/MatchMenu/MatchMenu.module.scss | 0 .../MatchMenu/MatchMenu.tsx | 1 + src/pages/Options/Option.tsx | 28 ++++ src/pages/Options/Options.module.scss | 48 +++++++ src/pages/Options/Options.tsx | 72 ++++++++++ src/utils.ts | 81 ++++++++++- 21 files changed, 431 insertions(+), 222 deletions(-) delete mode 100644 src/components/BottomPanel/BottomPanel.tsx delete mode 100644 src/components/MatchGame/MatchGame.module.scss delete mode 100644 src/components/MatchGame/MatchGame.tsx rename src/components/{ => UI}/BottomPanel/BottomPanel.module.scss (100%) create mode 100644 src/components/UI/BottomPanel/BottomPanel.tsx rename src/{components/MatchMenu/MatchMenu.module.scss => pages/MatchGame/MatchGame.module.scss} (100%) create mode 100644 src/pages/MatchGame/MatchGame.tsx create mode 100644 src/pages/MatchMenu/MatchMenu.module.scss rename src/{components => pages}/MatchMenu/MatchMenu.tsx (96%) create mode 100644 src/pages/Options/Option.tsx create mode 100644 src/pages/Options/Options.module.scss create mode 100644 src/pages/Options/Options.tsx diff --git a/src/App.module.scss b/src/App.module.scss index ef99aff..7c74785 100644 --- a/src/App.module.scss +++ b/src/App.module.scss @@ -4,4 +4,5 @@ justify-content: center; align-items: center; padding: 20px; + font-family: "Pacifico", sans-serif; } diff --git a/src/components/AppRoutes.tsx b/src/components/AppRoutes.tsx index 89bafc1..c956ddb 100644 --- a/src/components/AppRoutes.tsx +++ b/src/components/AppRoutes.tsx @@ -1,7 +1,8 @@ -import MatchGame from 'components/MatchGame/MatchGame'; -import MatchMenu from 'components/MatchMenu/MatchMenu'; +import MatchGame from 'components/../pages/MatchGame/MatchGame'; +import MatchMenu from 'components/../pages/MatchMenu/MatchMenu'; import { useMatchGame } from 'context/MatchGameContext'; import React from 'react'; +import Options from 'src/pages/Options/Options'; const AppRoutes = () => { const {currentMenuItem} = useMatchGame(); @@ -17,6 +18,9 @@ const AppRoutes = () => { case 'new-game': return ; + case 'options': + return + default: return ; } diff --git a/src/components/BottomPanel/BottomPanel.tsx b/src/components/BottomPanel/BottomPanel.tsx deleted file mode 100644 index f39892e..0000000 --- a/src/components/BottomPanel/BottomPanel.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { useMatchGame } from 'context/MatchGameContext'; -import React, { useEffect, useState } from 'react'; - -import Button from 'components/UI/Button/Button'; -import Timer from 'components/UI/Timer/Timer'; - -import cls from './BottomPanel.module.scss'; - -type BottomPanelProps = { - startGame: () => void; - retryGame: () => void; - isFinishedGame?: boolean; - shuffleCards: () => void; - isNewGame: boolean; -} - -type PanelState = 'start' | 'retry'; - -const BottomPanel: React.FC = (props) => { - const [isTimerStarted, setIsTimerStarted] = useState(false); - const [isTimerStopped, setIsTimerStopped] = useState(false); - const [panelState, setPanelState] = useState('start'); - const {gameTime, changeGameTime, setCurrentMenuItem, setIsGameStarted} = useMatchGame(); - - function onStartBtnClickHandler(event: React.MouseEvent) { - setIsTimerStarted(true); - props.startGame(); - } - - useEffect(() => { - if (props.isFinishedGame) { - setIsTimerStopped(true); - localStorage.removeItem('match-game:cards'); - } - setPanelState(props.isFinishedGame ? 'retry' : 'start'); - }, [props.isFinishedGame]) - - function onRetryBtnClickHandler() { - setCurrentMenuItem?.('new-game'); - - setIsTimerStarted(false); - setIsTimerStopped(false); - setPanelState('start'); - - props.retryGame?.(); - } - - function renderRetryStatePanel() { - return ( - <> - - - - ) - } - - function onShuffleBtnClickHandler() { - props.shuffleCards?.(); - } - - function goToMenu() { - setIsGameStarted?.(false); - setCurrentMenuItem?.('menu'); - } - - function renderStartStatePanel() { - return isTimerStarted - ? <> - - - - : <> - - - {props.isNewGame && } - - } - - function renderPanelByState(state: PanelState) { - if (!state) { - console.error('Нет состояния у панели') - return; - } - - switch (state) { - case 'start': return renderStartStatePanel(); - case 'retry': return renderRetryStatePanel(); - default: return; - } - } - - return ( -
- { renderPanelByState(panelState) } -
- ); -}; - -export default BottomPanel; diff --git a/src/components/CardsField/CardsField.tsx b/src/components/CardsField/CardsField.tsx index 8acd132..e4e8e40 100644 --- a/src/components/CardsField/CardsField.tsx +++ b/src/components/CardsField/CardsField.tsx @@ -115,7 +115,7 @@ const CardsField: React.FC = ({cards, isGameStarted = false, fi useEffect(() => { setCardsState(prev => (prev.map(el => ({...el, disabled: !isGameStarted, toggled: !isGameStarted && isNewGame})))); if (isGameStarted) localStorage.setItem('match-game:cards', JSON.stringify(cardsState)); - }, [isGameStarted]) + }, [isGameStarted, isNewGame]) useEffect(() => { if (isNewGame) setCardsState(cards.map(el => createCard(el))) diff --git a/src/components/FinishedField/FinishedField.module.scss b/src/components/FinishedField/FinishedField.module.scss index 2d1a9c4..260a314 100644 --- a/src/components/FinishedField/FinishedField.module.scss +++ b/src/components/FinishedField/FinishedField.module.scss @@ -1,6 +1,29 @@ .FinishedField { + background: #283593; + border-radius: 10px; + border: 2px solid #fff; + box-sizing: border-box; color: #ffffff; - max-width: 320px; - margin: 0 auto; font-family: 'Pacifico', sans-serif; + height: 500px; + margin: 0 auto; + padding: 10px 50px; + position: relative; + width: 500px; + + h1 { + text-align: center; + font-size: 40px; + } + p { + display: flex; + justify-content: space-between; + font-size: 24px; + + + span { + font-style: italic; + font-weight: bold; + } + } } diff --git a/src/components/FinishedField/FinishedField.tsx b/src/components/FinishedField/FinishedField.tsx index d49af30..7272d0f 100644 --- a/src/components/FinishedField/FinishedField.tsx +++ b/src/components/FinishedField/FinishedField.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { DiffLevel, FieldSize } from 'src/pages/Options/Options'; import { getTimeString } from 'src/utils'; import cls from './FinishedField.module.scss'; @@ -6,16 +7,18 @@ import cls from './FinishedField.module.scss'; type FinishedFieldProps = { mistakesCount?: number; gameTime?: number; + difficultyLevel?: number; + fieldSize?: number; } -const FinishedField: React.FC = ({mistakesCount, gameTime}) => { +const FinishedField: React.FC = ({mistakesCount, gameTime, difficultyLevel, fieldSize}) => { return (

GAME IS FINISHED !

Время: {getTimeString(new Date(gameTime || 0))}

Количество ошибок: {mistakesCount}

-

Сложность: difficultyLevel

-

Размер поля: fieldSize

+

Сложность: {DiffLevel[difficultyLevel as any]}

+

Размер поля: {FieldSize[fieldSize as any]}

); }; diff --git a/src/components/MatchGame/MatchGame.module.scss b/src/components/MatchGame/MatchGame.module.scss deleted file mode 100644 index 4139e4e..0000000 --- a/src/components/MatchGame/MatchGame.module.scss +++ /dev/null @@ -1,26 +0,0 @@ -.FieldFinish { - width: 500px; - height: 500px; - background: #283593; - position: relative; - border: 2px solid #fff; - box-sizing: border-box; - padding: 10px; - border-radius: 10px; - - h1 { - text-align: center; - font-size: 40px; - } - p { - display: flex; - justify-content: space-between; - font-size: 24px; - - - span { - font-style: italic; - font-weight: bold; - } - } -} diff --git a/src/components/MatchGame/MatchGame.tsx b/src/components/MatchGame/MatchGame.tsx deleted file mode 100644 index c1a724f..0000000 --- a/src/components/MatchGame/MatchGame.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React, { useEffect, useState } from 'react'; - -import BottomPanel from 'components/BottomPanel/BottomPanel'; -import CardsField from 'components/CardsField/CardsField'; -import FinishedField from 'components/FinishedField/FinishedField'; -import { cardImages } from 'src/constants'; -import { randomizeElementInArray } from 'src/utils'; -import { useMatchGame } from 'context/MatchGameContext'; - -import cls from './MatchGame.module.scss' - -interface MatchGameProps { - isNewGame: boolean; -} - -const MatchGame: React.FC = ({isNewGame}) => { - // TODO replace to CardsField - const [cards, setCards] = useState(randomizeElementInArray([ - {code: 'react', imageURL: cardImages.react}, - {code: 'angular', imageURL: cardImages.angular}, - {code: 'js', imageURL: cardImages.js}, - {code: 'react', imageURL: cardImages.react}, - {code: 'angular', imageURL: cardImages.angular}, - {code: 'js', imageURL: cardImages.js}, - ])); - - const {gameTime, - mistakesCount, - resetGameProgress, - setIsGameStarted, - setIsGameFinished, - isGameFinished, - isGameStarted - } = useMatchGame(); - - useEffect(() => { - if (isNewGame) resetGameProgress?.(); - }, [isNewGame]) - - function startGame() { - setIsGameStarted?.(true); - } - - function retryGame() { - setIsGameFinished?.(false); - setIsGameStarted?.(false); - setCards(prev => randomizeElementInArray(prev.map(el => ({...el, disabled: true, isMatched: false, toggled: true})))) - - resetGameProgress?.(); - } - - function finishGame() { - setIsGameFinished?.(true); - localStorage.removeItem('match-game:cards'); - } - - // TODO replace to CardsField - function shuffleCards() { - setCards(randomizeElementInArray([...cards])); - } - - function getWrapperClassList() { - let classes = [cls.Field]; - - if (isGameFinished) classes = [cls.FieldFinish]; - - return classes; - } - - return ( - <> -
- { - isGameFinished - ? - : - } -
- - - - ); -}; - -export default MatchGame; diff --git a/src/components/BottomPanel/BottomPanel.module.scss b/src/components/UI/BottomPanel/BottomPanel.module.scss similarity index 100% rename from src/components/BottomPanel/BottomPanel.module.scss rename to src/components/UI/BottomPanel/BottomPanel.module.scss diff --git a/src/components/UI/BottomPanel/BottomPanel.tsx b/src/components/UI/BottomPanel/BottomPanel.tsx new file mode 100644 index 0000000..34ec1a9 --- /dev/null +++ b/src/components/UI/BottomPanel/BottomPanel.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import cls from './BottomPanel.module.scss'; + +type BottomPanelProps = {} + +const BottomPanel: React.FC = ({children}) => { + return ( +
+ { children } +
+ ); +}; + +export default BottomPanel; diff --git a/src/components/UI/Button/Button.tsx b/src/components/UI/Button/Button.tsx index 0c24d96..dd284e9 100644 --- a/src/components/UI/Button/Button.tsx +++ b/src/components/UI/Button/Button.tsx @@ -8,7 +8,7 @@ type ButtonProps = { const Button: React.FC = ({children, className, onClick}) => { return ( - ); diff --git a/src/constants.ts b/src/constants.ts index 1c2df0d..f7d0a8f 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -2,4 +2,6 @@ export const cardImages = { react: 'https://w7.pngwing.com/pngs/79/518/png-transparent-js-react-js-logo-react-react-native-logos-icon-thumbnail.png', js: 'https://www.freepnglogos.com/uploads/javascript-png/javascript-logo-transparent-logo-javascript-images-3.png', angular: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1200px-Angular_full_color_logo.svg.png', + typescript: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/1024px-Typescript_logo_2020.svg.png', + webpack: 'https://cdn.iconscout.com/icon/free/png-256/webpack-3629741-3030792.png', } diff --git a/src/context/MatchGameContext.tsx b/src/context/MatchGameContext.tsx index 20f717d..81eec28 100644 --- a/src/context/MatchGameContext.tsx +++ b/src/context/MatchGameContext.tsx @@ -1,5 +1,5 @@ import React, { useContext, useState } from 'react'; -import { getTimeString } from 'src/utils'; +import { DiffLevel, FieldSize, OptionsType } from 'src/pages/Options/Options'; export type MenuItem = 'menu' | 'new-game' | 'continue-game' | 'options' | 'exit'; @@ -15,6 +15,9 @@ interface MatchGameContextType { setIsGameStarted?: (status: boolean) => void; isGameFinished?: boolean; setIsGameFinished?: (status: boolean) => void; + filedSize?: number; + diffLevel?: number; + saveOptions?: (options: OptionsType) => void; } const MatchGameContext = React.createContext({}); export const useMatchGame = () => useContext(MatchGameContext); @@ -25,6 +28,8 @@ export const MatchGameProvider: React.FC = ({children}) => { const [currentMenuItem, setCurrentMenuItem] = useState('menu'); const [isGameStarted, setIsGameStarted] = useState(false); const [isGameFinished, setIsGameFinished] = useState(false); + const [filedSize, setFieldSize] = useState(FieldSize.Small); + const [diffLevel, setDiffLevel] = useState(DiffLevel.Easy); const addMistakesCount = () => { return setMistakesCount(prev => prev + 1) @@ -39,6 +44,12 @@ export const MatchGameProvider: React.FC = ({children}) => { setGameTime(0); setIsGameStarted(false); setIsGameFinished(false); + localStorage.removeItem('match-game:cards'); + } + + const saveOptions = (options: OptionsType) => { + setFieldSize(options.size); + setDiffLevel(options.diffLevel); } return ( @@ -53,7 +64,10 @@ export const MatchGameProvider: React.FC = ({children}) => { isGameStarted, setIsGameStarted, isGameFinished, - setIsGameFinished + setIsGameFinished, + filedSize, + diffLevel, + saveOptions }}> {children} diff --git a/src/components/MatchMenu/MatchMenu.module.scss b/src/pages/MatchGame/MatchGame.module.scss similarity index 100% rename from src/components/MatchMenu/MatchMenu.module.scss rename to src/pages/MatchGame/MatchGame.module.scss diff --git a/src/pages/MatchGame/MatchGame.tsx b/src/pages/MatchGame/MatchGame.tsx new file mode 100644 index 0000000..194fc36 --- /dev/null +++ b/src/pages/MatchGame/MatchGame.tsx @@ -0,0 +1,129 @@ +import CardsField from 'components/CardsField/CardsField'; +import FinishedField from 'components/FinishedField/FinishedField'; + +import BottomPanel from 'components/UI/BottomPanel/BottomPanel'; +import Button from 'components/UI/Button/Button'; +import Timer from 'components/UI/Timer/Timer'; +import { useMatchGame } from 'context/MatchGameContext'; +import React, { useEffect, useState } from 'react'; +import { createCards, randomizeElementInArray } from 'src/utils'; + +interface MatchGameProps { + isNewGame: boolean; +} +type PanelState = 'start' | 'retry'; + +const MatchGame: React.FC = ({isNewGame}) => { + const { + gameTime, + mistakesCount, + resetGameProgress, + setIsGameStarted, + setIsGameFinished, + isGameFinished, + isGameStarted, + changeGameTime, + setCurrentMenuItem, + diffLevel, + filedSize + } = useMatchGame(); + + // TODO replace to CardsField + const [cards, setCards] = useState(randomizeElementInArray(createCards(diffLevel, filedSize))); + const [isTimerStarted, setIsTimerStarted] = useState(false); + const [isTimerStopped, setIsTimerStopped] = useState(false); + const [panelState, setPanelState] = useState('start'); + + useEffect(() => { + if (isNewGame) resetGameProgress?.(); + }, [isNewGame, resetGameProgress]) + + useEffect(() => { + if (isGameFinished) { + setIsTimerStopped(true); + localStorage.removeItem('match-game:cards'); + } + setPanelState(isGameFinished ? 'retry' : 'start'); + }, [isGameFinished]) + + function startGame() { + setIsGameStarted?.(true); + setIsTimerStarted(true); + } + + function retryGame() { + setIsGameFinished?.(false); + setIsGameStarted?.(false); + setIsTimerStarted?.(false); + setCards(prev => randomizeElementInArray(prev.map(el => ({...el, disabled: true, isMatched: false, toggled: true})))) + + resetGameProgress?.(); + } + + function finishGame() { + setIsGameFinished?.(true); + localStorage.removeItem('match-game:cards'); + } + + function shuffleCards() { + setCards(randomizeElementInArray([...cards])); + } + + function goToMenu() { + setIsGameStarted?.(false); + setCurrentMenuItem?.('menu'); + } + + function renderRetryStatePanel() { + return ( + <> + + + + ) + } + + function renderStartStatePanel() { + return isTimerStarted + ? <> + + + + : <> + + + {isNewGame && } + + } + + function renderPanelByState(state: PanelState) { + if (!state) { + console.error('Нет состояния у панели') + return; + } + + switch (state) { + case 'start': return renderStartStatePanel(); + case 'retry': return renderRetryStatePanel(); + default: return; + } + } + + return ( + <> +
+ { + isGameFinished + ? + : + } +
+ + { renderPanelByState(panelState) } + + + + ); +}; + +export default MatchGame; diff --git a/src/pages/MatchMenu/MatchMenu.module.scss b/src/pages/MatchMenu/MatchMenu.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/MatchMenu/MatchMenu.tsx b/src/pages/MatchMenu/MatchMenu.tsx similarity index 96% rename from src/components/MatchMenu/MatchMenu.tsx rename to src/pages/MatchMenu/MatchMenu.tsx index 268f540..4da339c 100644 --- a/src/components/MatchMenu/MatchMenu.tsx +++ b/src/pages/MatchMenu/MatchMenu.tsx @@ -18,6 +18,7 @@ const MatchMenu: React.FC = () => { return (
+

Match game menu

    { canContinueGame() ?
  • clickItemHandler('continue-game')}>Continue
    • : null diff --git a/src/pages/Options/Option.tsx b/src/pages/Options/Option.tsx new file mode 100644 index 0000000..3978027 --- /dev/null +++ b/src/pages/Options/Option.tsx @@ -0,0 +1,28 @@ +import Button from 'components/UI/Button/Button'; +import React from 'react'; + +import cls from './Options.module.scss' + +interface OptionProps { + text: string; + value: string; + onChange: (type: 'next' | 'prev') => void; +} + +const Option:React.FC = ({value, text, onChange}) => { + return ( +
    +
    + {text} +
    +
    + + {value} + +
    +
    + + ); +}; + +export default Option; diff --git a/src/pages/Options/Options.module.scss b/src/pages/Options/Options.module.scss new file mode 100644 index 0000000..8dbb827 --- /dev/null +++ b/src/pages/Options/Options.module.scss @@ -0,0 +1,48 @@ +.Options { + width: 500px; + height: 500px; + background: #283593; + position: relative; + border: 2px solid #fff; + box-sizing: border-box; + padding: 10px; + border-radius: 10px; + color: #ffffff; + margin-bottom: 20px; + + ul { + list-style: none; + margin: 0; + } + + h2 { + text-align: center; + } +} + +.Option { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 30px; + + .button { + width: 45px; + height: 45px; + margin: 10px 5px; + } + + .selectGroup { + display: flex; + align-items: center; + justify-content: space-between; + + span { + display: block; + width: 100px; + text-align: center; + } + } +} + + diff --git a/src/pages/Options/Options.tsx b/src/pages/Options/Options.tsx new file mode 100644 index 0000000..7582efd --- /dev/null +++ b/src/pages/Options/Options.tsx @@ -0,0 +1,72 @@ +import BottomPanel from 'components/UI/BottomPanel/BottomPanel'; +import Button from 'components/UI/Button/Button'; +import { useMatchGame } from 'context/MatchGameContext'; +import React, { useState } from 'react'; +import Option from 'src/pages/Options/Option'; + +import cls from './Options.module.scss' + +export type OptionsType = { + diffLevel: number; + size: number; +} + +export enum DiffLevel { + Easy, + Normal, + Hard +} + +export enum FieldSize { + Small, + Normal, + Big +} + +const Options: React.FC = () => { + const {saveOptions, setCurrentMenuItem, diffLevel, resetGameProgress, filedSize} = useMatchGame(); + + const [size, setSize] = useState(filedSize || FieldSize.Small); + const [difficultLevel, setDifficultLevel] = useState(diffLevel || DiffLevel.Easy); + + function saveOptionHandler() { + saveOptions?.({ + diffLevel: difficultLevel, + size + }); + resetGameProgress?.(); + setCurrentMenuItem?.('menu'); + } + + function changeFieldSize(type: 'prev' | 'next') { + const size = Object.values(FieldSize).length/2; + + if (type === 'next') setSize(prev => prev + 1 === size ? 0 : prev + 1); + if (type === 'prev') setSize(prev => prev === 0 ? size - 1 : prev - 1); + } + + function changeDiffLevel(type: 'prev' | 'next') { + const size = Object.values(DiffLevel).length/2; + + if (type === 'next') setDifficultLevel(prev => prev + 1 === size ? 0 : prev + 1); + if (type === 'prev') setDifficultLevel(prev => prev === 0 ? size - 1 : prev - 1); + } + + return ( + <> +
    +

    Options

    +
      +
      • +
      • +
    +
    + + + + + + ); +}; + +export default Options; diff --git a/src/utils.ts b/src/utils.ts index cb175de..91aab13 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,5 +1,10 @@ +import { cardImages } from 'src/constants'; +import { DiffLevel, FieldSize } from 'src/pages/Options/Options'; + +export type CardType = {code: string, imageURL: string}; + export function randomizeElementInArray (arr: any[]) { - return arr.sort(() => { + return [...arr].sort(() => { return Math.random() > 0.5 ? 1 : -1; }) } @@ -16,3 +21,77 @@ export function getTimeString(time?: Date): string { return `${minutes}:${seconds}` } +export function createCards(diffLevel: DiffLevel = DiffLevel.Easy, size: FieldSize = FieldSize.Small): CardType[] { + let arrSize = 6; + switch (diffLevel) { + case DiffLevel.Easy: + switch (size) { + case FieldSize.Small: { + arrSize = 6; + break; + } + case FieldSize.Normal:{ + arrSize = 12; + break; + } + case FieldSize.Big:{ + arrSize = 18; + break; + } + } + + return Array(arrSize).fill('').map((_, i) => { + if (i < arrSize / 3) return {code: 'js', imageURL: cardImages.js}; + if (i >= arrSize / 3 && i < arrSize * 2/3) return {code: 'react', imageURL: cardImages.react}; + return {code: 'angular', imageURL: cardImages.angular} + }); + + case DiffLevel.Normal: + switch (size) { + case FieldSize.Small: { + arrSize = 8; + break; + } + case FieldSize.Normal:{ + arrSize = 16; + break; + } + case FieldSize.Big:{ + arrSize = 24; + break; + } + } + + return Array(arrSize).fill('').map((_, i) => { + if (i < arrSize / 4) return {code: 'js', imageURL: cardImages.js}; + if (i >= arrSize / 4 && i < arrSize / 2) return {code: 'react', imageURL: cardImages.react}; + if (i >= arrSize / 2 && i < arrSize * 3/4) return {code: 'angular', imageURL: cardImages.angular}; + return {code: 'typescript', imageURL: cardImages.typescript} + }); + + case DiffLevel.Hard: + switch (size) { + case FieldSize.Small: { + arrSize = 10; + break; + } + case FieldSize.Normal:{ + arrSize = 20; + break; + } + case FieldSize.Big:{ + arrSize = 30; + break; + } + } + return Array(arrSize).fill('').map((_, i) => { + if (i < arrSize / 5) return {code: 'js', imageURL: cardImages.js}; + if (i >= arrSize / 5 && i < arrSize * 2/5) return {code: 'react', imageURL: cardImages.react}; + if (i >= arrSize * 2/5 && i < arrSize * 3/5) return {code: 'angular', imageURL: cardImages.angular}; + if (i >= arrSize * 3/5 && i < arrSize * 4/5) return {code: 'typescript', imageURL: cardImages.typescript}; + return {code: 'webpack', imageURL: cardImages.webpack} + }); + } + + return Array(6).fill({code: 'angular', imageURL: cardImages.angular}); +}