diff --git a/src/components/quizes/Adjectives.tsx b/src/components/quizes/Adjectives.tsx index e181823..ecd3653 100644 --- a/src/components/quizes/Adjectives.tsx +++ b/src/components/quizes/Adjectives.tsx @@ -1,15 +1,48 @@ import React, { useState } from 'react'; import { Helmet } from 'react-helmet'; +import styled from '@emotion/styled'; +import useCookie from 'react-use-cookie'; import VocabularyQuiz from '../VocabularyQuiz'; import QuizIntro from '../QuizIntro'; import adjectives from '../../lib/adjectives.json'; +interface SettingObject { + showRomaji?: boolean; +} + +const OptionsForm = styled.form` + margin-bottom: 1em; +`; + +const OptionCheck = styled.input` + margin-right: 1em; + margin-bottom: 1em; +`; + +const getInitialSettings = (): string => { + return JSON.stringify({ + showRomaji: true, + }); +}; + const Adjectives = () => { const [startQuiz, setStartQuiz] = useState(false); + const [settings, setSettings] = useCookie('vocabularyQuiz', getInitialSettings()); + const settingsObj = JSON.parse(settings); + const randomizedAdjectives = adjectives.vocabulary.sort( () => 0.5 - Math.random() ); + const setSettingsOption = (setting: SettingObject) => { + setSettings( + JSON.stringify({ + ...settingsObj, + ...setting, + }) + ); + }; + return ( <> @@ -20,7 +53,7 @@ const Adjectives = () => { words={randomizedAdjectives} placeholder="Enter english translation" question="hiragana" - hint="romaji" + hint={settingsObj.showRomaji ? "romaji" : ""} /> ) : ( { } onStart={() => setStartQuiz(true)} - /> + > + + +
+ +
+
+
)} );