From 760e044df9ba12610d3a5d1eec6a0cb8b0e47647 Mon Sep 17 00:00:00 2001 From: Andreas Taranetz <57600104+holistic-developer@users.noreply.github.com> Date: Wed, 8 May 2024 17:20:53 +0000 Subject: [PATCH] Add multiplication --- src/Examples.tsx | 60 +++++++++++++++++++++++++++++++++------------- src/Game.tsx | 62 +++++++++++++++++++++++------------------------- src/index.css | 33 ++++++++++++++++++++------ 3 files changed, 100 insertions(+), 55 deletions(-) diff --git a/src/Examples.tsx b/src/Examples.tsx index 0b7b6d6..8da9dee 100644 --- a/src/Examples.tsx +++ b/src/Examples.tsx @@ -8,30 +8,58 @@ export const minValue = 1; type ExampleState = { a: number; b: number; - addition: boolean; + operation: "+" | "-" | "×"; options: number[]; answer: number; }; -export const Examples: React.FC<{ rounds: number; gameMode: GameMode; maxValue: number; done: () => void }> = ({ rounds, gameMode, maxValue, done }) => { +export const Examples: React.FC<{ rounds: number; gameMode: GameMode; done: () => void }> = ({ rounds, gameMode, done }) => { const calculateExample = useCallback( (state: ExampleState) => { + let maxValue = 0; switch (gameMode) { - case GameMode.ADDITION: - state.addition = true; + case GameMode.ADDITION_10: + case GameMode.ADDITION_20: + case GameMode.ADDITION_100: + state.operation = '+'; break; - case GameMode.SUBTRACTION: - state.addition = false; + case GameMode.SUBTRACTION_10: + case GameMode.SUBTRACTION_20: + case GameMode.SUBTRACTION_100: + state.operation = '-'; + break; + case GameMode.MULTIPLICATION_100: + state.operation = '×'; + break; + default: + state.operation = Boolean(getRandomInt(0, 1))? '+' : '-'; + } + switch (gameMode) { + case GameMode.ADDITION_10: + case GameMode.SUBTRACTION_10: + case GameMode.ADDITION_SUBTRACTION_10: + maxValue = 10; + break; + case GameMode.ADDITION_20: + case GameMode.SUBTRACTION_20: + case GameMode.ADDITION_SUBTRACTION_20: + maxValue = 20; break; default: - state.addition = Boolean(getRandomInt(0, 1)); + maxValue = 100; } - state.a = getRandomIntExcept(state.addition ? minValue : Math.floor(maxValue / 2), state.addition ? maxValue - 1 : maxValue, [state.a]); - state.b = getRandomIntExcept(minValue, state.addition ? maxValue - state.a : state.a - 1, [state.b]); - const minAnswer = state.addition ? 2 : 1; - const maxAnswer = state.addition ? maxValue : maxValue - 1; - const correct = state.addition ? state.a + state.b : state.a - state.b; + if(state.operation !== '+' && state.operation !== '-') { + state.a = getRandomIntExcept(1, 10, [state.a]); + state.b = getRandomIntExcept(1, 10, [state.b]); + } else { + state.a = getRandomIntExcept(state.operation === '+' ? minValue : Math.floor(maxValue / 2), state.operation === '+' ? maxValue - 1 : maxValue, [state.a]); + state.b = getRandomIntExcept(minValue, state.operation === '+' ? maxValue - state.a : state.a - 1, [state.b]); + } + + const minAnswer = state.operation === '+' ? 2 : 1; + const maxAnswer = state.operation === '-' ? maxValue - 1 : maxValue; + const correct = state.operation === '+' ? state.a + state.b : state.operation === '-' ? state.a - state.b : state.a * state.b; const answers: number[] = []; for (let i = 0; i < 5; i++) { answers.push(getRandomIntExcept(minAnswer, maxAnswer, [...answers, correct])); @@ -44,15 +72,15 @@ export const Examples: React.FC<{ rounds: number; gameMode: GameMode; maxValue: [rounds, gameMode] ); - const [{ a, b, addition, options, answer }, dispatch] = useReducer( + const [{ a, b, operation, options, answer }, dispatch] = useReducer( calculateExample, { a: 1, b: 2, - addition: true, + operation: "+", options: [], answer: 0, - }, + } as ExampleState, (arg) => calculateExample(arg) ); const [completed, setCompleted] = useState(0); @@ -69,7 +97,7 @@ export const Examples: React.FC<{ rounds: number; gameMode: GameMode; maxValue: return ( <>

- {a} {addition ? '+' : '-'} {b} = + {a} {operation} {b} =

diff --git a/src/Game.tsx b/src/Game.tsx index 20e79c2..698e7ba 100644 --- a/src/Game.tsx +++ b/src/Game.tsx @@ -1,54 +1,52 @@ -import { useRef, useState } from 'react'; +import { useRef, useCallback, useState } from 'react'; import { Examples } from './Examples'; export const enum GameMode { DONE, - ADDITION, - SUBTRACTION, - ADDITION_SUBTRACTION, + ADDITION_10, + ADDITION_20, + ADDITION_100, + SUBTRACTION_10, + SUBTRACTION_20, + SUBTRACTION_100, + ADDITION_SUBTRACTION_10, + ADDITION_SUBTRACTION_20, + ADDITION_SUBTRACTION_100, + MULTIPLICATION_100, } export const Game: React.FC = () => { const main = useRef(null); const [gameMode, setGameMode] = useState(GameMode.DONE); const [rounds, setRounds] = useState(10); - const [maxValue, setMaxValue] = useState(20); + + const startGame = useCallback((mode: GameMode) => () => main.current?.requestFullscreen().then(() => setGameMode(mode)), []); return (
{gameMode ? ( - document.exitFullscreen().finally(() => setGameMode(GameMode.DONE))} /> + document.exitFullscreen().finally(() => setGameMode(GameMode.DONE))} /> ) : ( <> -

+

{rounds} Beispiele - - - -

-

- [1 ... {maxValue}] - - - + + -

- - - - - +
+
+ + + + + + + + + + +
)}
diff --git a/src/index.css b/src/index.css index 5c47d50..c4ca920 100644 --- a/src/index.css +++ b/src/index.css @@ -23,7 +23,7 @@ font-family: sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; - font-size: 9vmin; + font-size: 8vmin; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; @@ -31,8 +31,18 @@ text-align: center; } -.small-font { - font-size: 6vmin; +section { + padding: 2vmin; +} + +.game-modes { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 4vmin; +} + +.game-modes>button { + font-size: 4vmin; } p { @@ -67,9 +77,9 @@ main { } button { - min-width: 2em; + min-width: 2rem; padding: 2vmin; - border-radius: 0.2em; + border-radius: 0.2rem; transition: scale 0.1s ease-in-out; background-color: var(--input); border-radius: 3vh; @@ -86,7 +96,8 @@ button:hover:active { background-color: var(--input); } -button:disabled, button:hover:disabled { +button:disabled, +button:hover:disabled { background-color: var(--disabled); box-shadow: 0 0 1vh var(--disabled); } @@ -112,28 +123,34 @@ button:disabled, button:hover:disabled { .answers { display: grid; grid: auto-flow / 1fr 1fr 1fr; - gap: 1em; + gap: 5vmin; } @keyframes wiggle { 0% { transform: rotate(0deg); } + 20% { transform: rotate(5deg); } + 40% { transform: rotate(-5deg); } + 50% { background-color: var(--wrong) } + 60% { transform: rotate(5deg); } + 80% { transform: rotate(-5deg); } + 100% { transform: rotate(0deg); } @@ -143,9 +160,11 @@ button:disabled, button:hover:disabled { 40% { transform: translate3d(0, -3vh, 0); } + 50% { background-color: var(--correct); } + 70% { transform: translate3d(0); }