diff --git a/src/components/app.tsx b/src/components/app.tsx index 0024059..08b6eb9 100644 --- a/src/components/app.tsx +++ b/src/components/app.tsx @@ -112,16 +112,15 @@ export default class Application extends React.Component<{}, IState> { // TODO: Actually implement this // TODO: Don't fetch this when it was already fetched once. return [{ - latin: "Vinum", - german: "Wein", + german: ["Wein"], hint: "Worte auf '-um' sind meistens NeutrUM" type: VocabType.NOMEN, + latin: { + grundform: "Vinum", + genitiv: "Vini", + genus: "Neutrum" + }, id: 0 - }, { - latin: "Vinum (Genitiv)", - german: "Vini", - type: VocabType.NOMEN, - id: 1 }/* , { * latin: "Vici", * german: "", diff --git a/src/models/vocab.ts b/src/models/vocab.ts index e172ff4..ff2fc52 100644 --- a/src/models/vocab.ts +++ b/src/models/vocab.ts @@ -10,13 +10,34 @@ export enum VocabType { ADVERB } +export interface INomenData { + grundform: string; + genitiv: string; + genus: string; +} + +export interface IVerbData { + grundform: string; + // 1. Person + praesens: string; + perfekt: string; + // TODO: Was ist das PPP? +} + +export interface IAdjektivData { + grundform: string; + nominativ_a: string; + nominativ_b: string; +} + export interface IVocab { - german: string; - latin: string; + // If a word has multiple meanings + german: string[]; hint?: string; mnemonic?: string; type: VocabType; + latin: INomenData | IVerbData | IAdjektivData; // This number is lesson specific id: number; diff --git a/src/pages/level.tsx b/src/pages/level.tsx index 0366ac3..b6ca5ac 100644 --- a/src/pages/level.tsx +++ b/src/pages/level.tsx @@ -26,6 +26,9 @@ interface IState { export default class LevelPage extends React.Component { private uid = 0; + // To prevent React from redrawing the vocabulary list and prematurely + // cancelling the animation + private uids: { [key: string]: string } = {}; constructor(props: any) { super(props); @@ -37,8 +40,14 @@ export default class LevelPage extends React.Component { }; } - genUID = (): string => { - return "LEVELPAGE" + this.uid++; + genUID = (vocab: IVocab): string => { + const { grundform } = vocab.latin; + if (grundform in this.uids) { + return this.uids[grundform]; + } else { + this.uids[grundform] = "LEVELPAGE" + this.uid++; + return this.uids[grundform]; + } } renderVocabListItem = (vocab: IVocab): any => { @@ -46,7 +55,7 @@ export default class LevelPage extends React.Component { const lookedAt = this.state.lookedAt.find((el) => el === vocab.id) || vocab.id === 0; // TODO: Actually update the "Vocab View" when clicking - return { + return { // Prevent the user from using too much memory by always clicking on the elements // Show the clicked at vocab word this.setState({ @@ -55,14 +64,15 @@ export default class LevelPage extends React.Component { }); }}> - {`${vocab.latin} ${lookedAt ? "✔" : ""}`} + {`${vocab.latin.grundform} ${lookedAt ? "✔" : ""}`} ; } toReview = () => { + const { levelVocab, id } = this.props; // Only go to the review if all vocabulary item have been looked at - if (this.props.levelVocab().length === this.state.lookedAt.length) { + if (levelVocab(id).length === this.state.lookedAt.length) { this.setState({ toReview: true, }); @@ -76,7 +86,8 @@ export default class LevelPage extends React.Component { - {this.props.levelVocab(this.props.id).map(this.renderVocabListItem)} + {this.props.levelVocab(this.props.id) + .map(this.renderVocabListItem)} {/* TODO*/} @@ -96,10 +107,10 @@ export default class LevelPage extends React.Component { - {currentVocab.latin} + {currentVocab.latin.grundform} - {currentVocab.german} + {currentVocab.german.join(", ")} { currentVocab.hint ? ( diff --git a/src/pages/review.tsx b/src/pages/review.tsx index 82afbe0..633f745 100644 --- a/src/pages/review.tsx +++ b/src/pages/review.tsx @@ -59,9 +59,13 @@ export default class ReviewPage extends React.Component { checkInput = () => { const current = this.currentVocab(); + // Check if the given answer is somewhere in the german words + const german = this.currentVocab().german.map((str) => str.toLowerCase()); + const found = german.find((el) => el === this.state.input.toLowerCase()); + // Check if the user's answer was correct // TODO: Levensthein-Distance? - if (this.state.input.toLowerCase() === current.german.toLowerCase()) { + if (found) { // TODO: Show it's correct // Show the next vocab word if (this.state.current + 1 >= this.vocab.length) { @@ -102,7 +106,7 @@ export default class ReviewPage extends React.Component { - {this.currentVocab().latin} + {this.currentVocab().latin.grundform}