Skip to content

Commit

Permalink
Add multiplication
Browse files Browse the repository at this point in the history
  • Loading branch information
@holistic-developer
holistic-developer committed May 8, 2024
1 parent 97f77ce commit 760e044
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 55 deletions.
60 changes: 44 additions & 16 deletions src/Examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]));
Expand All @@ -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<number>(0);
Expand All @@ -69,7 +97,7 @@ export const Examples: React.FC<{ rounds: number; gameMode: GameMode; maxValue:
return (
<>
<h1>
{a} {addition ? '+' : '-'} {b} =
{a} {operation} {b} =
</h1>
<Answers correct={answer} answers={options} success={solved} />
<div className="progress">
Expand Down
62 changes: 30 additions & 32 deletions src/Game.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<HTMLElement>(null);
const [gameMode, setGameMode] = useState<GameMode>(GameMode.DONE);
const [rounds, setRounds] = useState<number>(10);
const [maxValue, setMaxValue] = useState<number>(20);

const startGame = useCallback((mode: GameMode) => () => main.current?.requestFullscreen().then(() => setGameMode(mode)), []);

return (
<main ref={main}>
{gameMode ? (
<Examples rounds={rounds} gameMode={gameMode} maxValue={maxValue} done={() => document.exitFullscreen().finally(() => setGameMode(GameMode.DONE))} />
<Examples rounds={rounds} gameMode={gameMode} done={() => document.exitFullscreen().finally(() => setGameMode(GameMode.DONE))} />
) : (
<>
<p>
<section>
{rounds} Beispiele
<span style={{ display: 'flex', gap: '1vw', justifyContent: 'center' }}>
<button onClick={() => setRounds((prev) => prev + 1)}>+</button>
<button onClick={() => setRounds((prev) => prev - 1)} disabled={rounds <= 2}>
−
</button>
</span>
</p>
<p>
[1 ... {maxValue}]
<span style={{ display: 'flex', gap: '1vw', justifyContent: 'center' }}>
<button onClick={() => setMaxValue((prev) => prev + 1)}>+</button>
<button onClick={() => setMaxValue((prev) => prev - 1)} disabled={maxValue <= 10}>
−
</button>
<button onClick={() => setRounds((prev) => prev + 1)}>➕</button>
<button onClick={() => setRounds((prev) => prev - 1)} disabled={rounds <= 2}>➖</button>
</span>
</p>
<span style={{ display: 'flex', gap: '2vw', flexDirection: 'column' }}>
<button className={'small-font'} onClick={() => main.current?.requestFullscreen().then(() => setGameMode(GameMode.ADDITION))}>
Nur Addition
</button>
<button className={'small-font'} onClick={() => main.current?.requestFullscreen().then(() => setGameMode(GameMode.SUBTRACTION))}>
Nur Subtraktion
</button>
<button className={'small-font'} onClick={() => main.current?.requestFullscreen().then(() => setGameMode(GameMode.ADDITION_SUBTRACTION))}>
Addition und Subtraktion
</button>
</span>
</section>
<section className="game-modes">
<button onClick={startGame(GameMode.ADDITION_10)}>➕ bis 10</button>
<button onClick={startGame(GameMode.ADDITION_20)}>➕ bis 20</button>
<button onClick={startGame(GameMode.ADDITION_100)}>➕ bis 100</button>
<button onClick={startGame(GameMode.SUBTRACTION_10)}>➖ bis 10</button>
<button onClick={startGame(GameMode.SUBTRACTION_20)}>➖ bis 20</button>
<button onClick={startGame(GameMode.SUBTRACTION_100)}>➖ bis 100</button>
<button onClick={startGame(GameMode.ADDITION_SUBTRACTION_10)}>➕&nbsp;/&nbsp;➖&nbsp;bis&nbsp;10</button>
<button onClick={startGame(GameMode.ADDITION_SUBTRACTION_20)}>➕&nbsp;/&nbsp;➖&nbsp;bis&nbsp;20</button>
<button onClick={startGame(GameMode.ADDITION_SUBTRACTION_100)}>➕&nbsp;/&nbsp;➖&nbsp;bis&nbsp;100</button>
<button style={{gridColumn: "span 3"}} onClick={startGame(GameMode.MULTIPLICATION_100)}>1×1 bis 100</button>
</section>
</>
)}
</main>
Expand Down
33 changes: 26 additions & 7 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,26 @@
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%;
color: var(--primary);
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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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);
}
Expand All @@ -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);
}
Expand All @@ -143,9 +160,11 @@ button:disabled, button:hover:disabled {
40% {
transform: translate3d(0, -3vh, 0);
}

50% {
background-color: var(--correct);
}

70% {
transform: translate3d(0);
}
Expand Down

0 comments on commit 760e044

Please sign in to comment.