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 b17ebc5
Show file tree
Hide file tree
Showing 42 changed files with 1,862 additions and 1,526 deletions.
2 changes: 2 additions & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@
build
public
package-lock.json
*.json
*.txt
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,5 @@ The word list is combined from the following sources:

### Filtering

Words that contain invalid characters (characters that does not exist in Braille) are stripped out. Duplicates are
Words that contain invalid characters (characters that does not exist in Braille) are stripped out. Duplicates are
removed. The total number of unique words included in the game is XX.
253 changes: 20 additions & 233 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,244 +1,31 @@
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 {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 { Layout } from './components';
import { Pages } from './types';
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>
);
}
};
64 changes: 33 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,34 @@ 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 b17ebc5

Please sign in to comment.