add change question functionality

Author: bpmutter

content/en.json

@@ -0,0 +1,42 @@
+[
+ [
+ "en",
+ "English"
+ ],
+ [
+ "es",
+ "Español (Spanish) "
+ ],
+ [
+ "fr",
+ "Français (French) "
+ ],
+ [
+ "de",
+ "Deutsch (German)"
+ ],
+ [
+ "id",
+ "Indonesia (Indonesian)"
+ ],
+ [
+ "ru",
+ "Русский (Russian)"
+ ],
+ [
+ "zh-cn",
+ "简体中文 (Mainland Chinese)"
+ ],
+ [
+ "pt-br",
+ "Português Brasil (Brazilian Portuguese)"
+ ],
+ [
+ "ja",
+ "日本語 (Japanese)"
+ ],
+ [
+ "ko",
+ "한국어 (Korean)"
+ ]
+]

content/supportedLanguages.json

@@ -23,6 +23,7 @@
  "prop-types": "^15.7.2",
  "react": "latest",
  "react-dom": "latest",
+ "react-icons": "^3.10.0",
  "react-markdown": "^4.3.1",
  "react-syntax-highlighter": "^13.2.1",
  "rebass": "^4.0.7",

package.json

@@ -0,0 +1,5 @@
+import React from "react";
+
+const AppContext = React.createContext();
+
+export default AppContext;

src/components/Context.js

@@ -1,5 +1,12 @@
 import React, { useState, useContext } from "react";
+import Question from './Question';
+import GameNavigation from './GameNavigation';
+import LanguageQuestionsCompleted from './LanguageQuestionsCompleted';
 
 export default function GameWithContext() {
- return <p>derp derp derp</p>;
+ return(<>
+ <GameNavigation/>
+ <Question/>
+ <LanguageQuestionsCompleted/>
+ </>);
 }

src/components/Game.js

@@ -1,5 +1,108 @@
 import React, { useState, useContext } from "react";
+import context from './Context';
+import { Box, Button, Text } from "rebass";
+import { Label, Select } from "@rebass/forms";
+import supportedLangs from '../../content/supportedLanguages.json';
+import {GrLanguage} from 'react-icons/gr';
+import {FaArrowCircleLeft} from 'react-icons/fa';
+import {FaArrowCircleRight} from 'react-icons/fa';
+import {FaRandom} from 'react-icons/fa';
+const styles = {
+ navContainer: {
+ backgroundColor: "#F5F5FA",
+ borderRadius: ".5em",
+ margin: "1em",
+ padding: "1em",
+ display: "flex",
+ flexDirection: "row",
+ justifyContent: "space-between",
+ "@media screen and (max-width: 600px)": {
+ flexDirection: "column-reverse",
+ alignItems: 'center',
+ },
+ },
+ navButton: {
+ margin: ".5em",
+ fontWeight: "bold",
+ display: "inline-flex",
+ alignItems: "center",
+ "@media screen and (max-width: 600px)": {
+ width: 50,
+ height: 50,
+ fontSize: 30,
+ justifyContent: 'center',
+ margin: '1em .25em .5em',
+ },
+ '&:disabled': {
+ cursor: 'not-allowed',
+ opacity: 0.4
+ }
+ },
+ langSelect: {
+ maxWidth: 150,
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ },
+ label: {
+ display: "flex",
+ justifyContent: "flex-end",
+ paddingRight: ".5em",
+ fontWeight: "bold",
+ fontSize: 25,
+ },
+};
 
 export default function GameWithContext() {
- return <p>derp derp derp</p>;
+ const {
+ goToNextQuestion,
+ goToPrevQuestion,
+ goToRandomUnvisitedQuestion,
+ activeQuestionNum,
+ questions,
+ } = useContext(context);
+
+ const nextQuestion = () => {
+ goToNextQuestion();
+ }
+ const prevQuestion = () => {
+ goToPrevQuestion();
+ };
+ const randomQuestion = () => {
+ goToRandomUnvisitedQuestion()
+ }
+ return (
+ <Box sx={styles.navContainer} as="nav">
+ <Box>
+ <Button
+ sx={styles.navButton}
+ onClick={prevQuestion}
+ disabled={activeQuestionNum === 1}
+ >
+ <FaArrowCircleLeft />
+ </Button>
+ <Button
+ sx={styles.navButton}
+ onClick={nextQuestion}
+ disabled={activeQuestionNum === questions.length}
+ >
+ <FaArrowCircleRight />
+ </Button>
+ <Button sx={styles.navButton} onClick={randomQuestion}>
+ <FaRandom />
+ </Button>
+ </Box>
+ <Box sx={styles.langSelect}>
+ <Label htmlFor="lang" sx={styles.label}>
+ <GrLanguage />
+ </Label>
+ <Select id="lang" name="lang" defaultValue="English">
+ {Object.entries(supportedLangs).map((langWithData) => {
+ const lang = langWithData[1];
+ return <option key={lang[0]}>{lang[1]}</option>;
+ })}
+ </Select>
+ </Box>
+ </Box>
+ );
 }

src/components/GameNavigation.js

@@ -1,15 +1,53 @@
-//notes on game:
-/* 
-so the game will basically be a full client-side react app with state management and data persistence occurring in the browser
-
-so at this top "app" lvl, need to set context, and then there are basically 2 parallel systems running to persist data, context that the app is doing, and then a mirror image of it is being passed to localstorage for when the user comes back to the website.
-
-*/
-import React, {useState, useContext} from 'react';
+import React, {useState, useEffect, useContext} from 'react';
+import Context from './Context';
+import Game from './Game'
+import setUpGameState from '../state-management/setUpGameState';
 
 export default function GameWithContext(){
+ const [activeQuestionNum, setActiveQuestion] = useState({});
+ const [language, setLanguage] = useState("");
+ const [questions, setQuestions] = useState([]);
+ const [questionsCompleted, setQuestionsCompleted] = useState([]);
+
+ useEffect(()=>{
+ (async()=>{
+ const state = await setUpGameState();
+ const {activeLanguage, activeLangQuestions, activeLangAnswered, activeQuestionNum} = state;
+ setActiveQuestion(activeQuestionNum);
+ setLanguage(activeLanguage);
+ setQuestions(activeLangQuestions);
+ setQuestionsCompleted(activeLangAnswered);
+ })();
+ },[]);
 
- return(<p>
- derp derp derp
- </p>)
+ const restartGame = (lang)=>{
+ return 
+ }
+ const goToPrevQuestion = () => {
+ if(activeQuestionNum > 1) setActiveQuestion(activeQuestionNum - 1);
+ };
+ const goToNextQuestion = () => {
+ if (activeQuestionNum < questions.length) setActiveQuestion(activeQuestionNum + 1);
+ };
+ const goToRandomUnvisitedQuestion = () => {
+ return;
+ };
+ const updateQuestionsCompleted = (question, answer) => {
+ return;
+ }
+ const context = {
+ goToNextQuestion,
+ goToPrevQuestion,
+ goToRandomUnvisitedQuestion,
+ restartGame,
+ activeQuestionNum,
+ language,
+ questions,
+ questionsCompleted,
+ };
+ return(
+ <Context.Provider value={context}>
+ <Game />
+ </Context.Provider>
+ )
 }

src/components/GameWithContext.js

@@ -0,0 +1,12 @@
+import React, { useState, useContext } from "react";
+import { Box, Button, Text } from "rebass";
+
+export default function LanguageQuestionsCompleted() {
+ return (
+ <nav>
+ <div>
+ </div>
+ <div></div>
+ </nav>
+ );
+}