Skip to content

Commit

Permalink
feat: working game :)
Browse files Browse the repository at this point in the history
  • Loading branch information
@OptimusCrime
OptimusCrime committed Sep 1, 2023
1 parent f988677 commit 4b39607
Show file tree
Hide file tree
Showing 36 changed files with 1,843 additions and 1,475 deletions.
245 changes: 12 additions & 233 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,244 +1,23 @@
import React, { useState } from 'react';
import React, {useState} from 'react';

Check failure on line 1 in src/App.tsx

View workflow job for this annotation

GitHub Actions / build 

Run autofix to sort these imports!

import { BrailleSymbol, BrailleSymbolSpace } from './components/BrailleSymbol';
import { decode } from './decoder';
import { BRAILLE } from './symbols';
import { translate } from './translator';
import {WordList} from "./wordList/wordList";
import {Layout} from "./components/Layout";
import {Layout} from "./components";
import {Pages} from "./types";
import {LETTERS, NUMBERS, SIGNS} from "./symbols/keys";
import {getSettings, saveSettings} from "./settings/settings";

interface SettingsSectionProps {
symbols: string[];
heading: string;
}

const checkError = (params: {
correct: BRAILLE[][];
answer: BRAILLE[][] | null;
wordIdx: number;
letterIdx: number;
}): boolean | null => {
const { correct, answer, wordIdx, letterIdx } = params;

// Force this because we know it has to exist
const correctSymbol = correct[wordIdx][letterIdx] as BRAILLE;

// If no answer was given, return true
if (answer === null) {
return null;
}

// Check array lengths
if (answer.length <= wordIdx) {
return true;
}
if (answer[wordIdx].length < letterIdx) {
return true;
}

return correctSymbol !== answer[wordIdx][letterIdx];
};

const wordList = new WordList();
console.log(wordList.applySettings(getSettings()));
import {Game, Settings} from "./pages";

export const App = () => {
const inputRef = React.useRef<null | HTMLInputElement>(null);
const [page, setPage] = useState<Pages>(Pages.Game);
const [answer, setAnswer] = useState<BRAILLE[][] | null>(null);
const [currentExercise, setCurrentExercise] = useState<string[] | null>(null);
const [currentLine, setCurrentLine] = useState<number | null>(null);
const [maxLines, setMaxLines] = useState<number | null>(null);
const [settings, setSettings] = useState<string[]>(getSettings());

/*
const reset = () => {
setAnswer(null);
if (inputRef.current) {
inputRef.current.value = '';
inputRef.current.focus();
}
};
const verifyInput = () => {
const input = inputRef.current?.value;
if (!input) {
return;
}
setAnswer(translate(input));
};
const resetError = () => {
setAnswer(null);
};

const selectExercise = (exerciseName: string) => {
const exercise = texts.find((exercise) => exercise.name === exerciseName);
if (!exercise) {
return;
}
setCurrentExercise(shuffleArray(exercise.lines));
setCurrentLine(0);
setMaxLines(exercise.lines.length);
reset();
};
const changeLine = (move: number) => {
if (currentLine !== null) {
// Whatever
setCurrentLine(currentLine + move);
reset();
}
};
const translated =
currentLine === null || currentExercise === null ? null : translate(currentExercise[currentLine] as string);
*/

if (page === Pages.Game) {
return (
<Layout setPage={setPage} page={page}>
<p>Game</p>
</Layout>
);
}

const SettingsSection = ({symbols, heading}: SettingsSectionProps ) => (
<>
<h2 className="m-4">{heading}</h2>
<ul className="flex flex-wrap">
{symbols.map(symbol => {
const brailleInput = decode(translate(symbol)[0][0]);
return (
<div
className="pr-8 pb-8 cursor-pointer"
onClick={() => {
if (settings.includes(symbol)) {
// This is so dumb...
setSettings(prevState => [
...prevState.filter(value => value !== symbol)
]);
}
else {
setSettings(prevState => [
...prevState,
symbol
]);
}
}}
>
<BrailleSymbol input={brailleInput} error={!(settings.includes(symbol))} text={symbol} />
</div>
);
})}
</ul>
</>
);

return (
const AppWrapper = ({ children}: { children: React.ReactNode }) => (
<Layout setPage={setPage} page={page}>
<div className="flex justify-center flex-col w-1/3">
<h1>Toggle symbols</h1>
<SettingsSection symbols={LETTERS} heading="Letters" />
<SettingsSection symbols={NUMBERS} heading="Numbers" />
<SettingsSection symbols={SIGNS} heading="Signs" />
<button
className="btn"
onClick={() => saveSettings(settings)}
>
Save settings
</button>
</div>
{children}
</Layout>
);

/*
return (
<>
<div className="flex py-10 justify-center">
<select
className="select select-bordered w-full max-w-xs flex-wrap"
onChange={(e) => selectExercise(e.target.value)}
>
<option disabled selected>
Select exercise
</option>
{texts.map((text) => (
<option value={text.name}>{text.name}</option>
))}
</select>
</div>
{translated !== null && (
<>
<div className="flex justify-center mx-14 flex-wrap">
{translated.map((word, wordIdx) => (
<>
<div className="flex pb-7">
{wordIdx > 0 ? <BrailleSymbolSpace /> : ''}
{word.map((letter, letterIdx) => {
const decoded = decode(letter);
// Special handling for spaces
if (decoded.every((value) => !value)) {
return <BrailleSymbolSpace />;
}
const error = checkError({
correct: translated,
answer: answer,
wordIdx: wordIdx,
letterIdx: letterIdx,
});
return <BrailleSymbol input={decoded} error={error} />;
})}
</div>
</>
))}
</div>
<div className="flex justify-center">
{currentExercise !== null && currentLine !== null && currentExercise.length && currentLine > 0 && (
<div className="flex pr-4">
<button className="btn" onClick={() => changeLine(-1)}>
{`Previous line ${`(${currentLine} / ${maxLines as number})`}`}
</button>
</div>
)}
<div className="flex w-full max-w-xl">
<input
type="text"
ref={inputRef}
placeholder="Type here"
className="input w-full input-bordered max-w-xl"
onKeyUp={(e) => {
if (e.key.toLowerCase() === 'enter') {
verifyInput();
} else {
resetError();
}
}}
/>
</div>
{currentExercise !== null &&
currentLine !== null &&
currentExercise.length &&
currentExercise.length > currentLine + 1 && (
<div className="flex pl-4">
<button className="btn" onClick={() => changeLine(1)}>
{`Next line ${`(${currentLine + 2} / ${maxLines as number})`}`}
</button>
</div>
)}
</div>
</>
)}
</>
);
*/
switch (page) {
case Pages.Settings:
return <AppWrapper><Settings /></AppWrapper>;
case Pages.Game:
default:
return <AppWrapper><Game /></AppWrapper>;
}
};
74 changes: 43 additions & 31 deletions src/components/BrailleSymbol.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';

Check failure on line 1 in src/components/BrailleSymbol.tsx

View workflow job for this annotation

GitHub Actions / build 

Run autofix to sort these imports!
import {DecodeResponseType} from "../types";
import {BRAILLE} from "../symbols";
import {convertToDots} from "../utilities";

const BrailleSymbolRow = ({ children, padding }: { children: React.ReactNode; padding?: boolean }) => (
<div className={`${padding ? 'pb-1' : ''} flex items-center justify-between`}>{children}</div>
Expand All @@ -12,8 +13,8 @@ const BrailleDot = ({ enabled, padding }: { enabled: boolean; padding?: boolean
);

interface BrailleSymbolProps {
input: DecodeResponseType;
error: boolean | null;
input: BRAILLE;
highlight?: 'success' | 'failure';
text?: string;
}

Expand All @@ -31,33 +32,44 @@ interface BrailleSymbolProps {
* @param text
* @constructor
*/
export const BrailleSymbol = ({ input, error, text }: BrailleSymbolProps) => (
<div>
<div
className={`flex flex-col items-center justify-center mr-2 rounded ${
error === null ? '' : error ? 'bg-red-500' : 'bg-green-600'
}`}
>
<BrailleSymbolRow padding={true}>
<BrailleDot enabled={input[0]} />
<BrailleDot enabled={input[3]} padding={true} />
</BrailleSymbolRow>
<BrailleSymbolRow padding={true}>
<BrailleDot enabled={input[1]} />
<BrailleDot enabled={input[4]} padding={true} />
</BrailleSymbolRow>
<BrailleSymbolRow>
<BrailleDot enabled={input[2]} />
<BrailleDot enabled={input[5]} padding={true} />
</BrailleSymbolRow>
</div>
{text && (
<div className="text-center"
export const BrailleSymbol = ({ input, highlight, text }: BrailleSymbolProps) => {
const [
dot1,
dot2,
dot3,
dot4,
dot5,
dot6
] = convertToDots(input);

return (
<div>
<div
className={`flex flex-col items-center justify-center mr-2 mb-4 rounded ${
!highlight ? '' : highlight === 'failure' ? 'bg-red-500' : 'bg-green-600'
}`}
>
{text}
<BrailleSymbolRow padding={true}>
<BrailleDot enabled={dot1} />
<BrailleDot enabled={dot4} padding={true} />
</BrailleSymbolRow>
<BrailleSymbolRow padding={true}>
<BrailleDot enabled={dot2} />
<BrailleDot enabled={dot5} padding={true} />
</BrailleSymbolRow>
<BrailleSymbolRow>
<BrailleDot enabled={dot3} />
<BrailleDot enabled={dot6} padding={true} />
</BrailleSymbolRow>
</div>
)}
</div>
);

export const BrailleSymbolSpace = () => <div className="flex w-6"></div>;
{text && (
<div className="text-center prose"
>
<span>
{text}
</span>
</div>
)}
</div>
);
};
Loading

0 comments on commit 4b39607

Please sign in to comment.