From 32dc0518a20af4b127ac8cafeeaf1708784c373d Mon Sep 17 00:00:00 2001 From: lingdocs <71590811+lingdocs@users.noreply.github.com> Date: Thu, 30 Sep 2021 19:21:08 -0400 Subject: [PATCH] study links on browser and formatting fix on phonetics viewer --- package.json | 1 + src/App.tsx | 2 - src/components/Table.js | 2 +- src/components/phonetics/PhoneticsViewer.tsx | 137 ++++++++++--------- src/content/games.mdx | 2 +- src/games/GamesBrowser.tsx | 11 +- src/games/games.tsx | 19 ++- src/games/sub-cores/GenderGame.tsx | 4 +- src/games/sub-cores/UnisexNounGame.tsx | 4 +- src/types.d.ts | 1 + yarn.lock | 29 ++++ 11 files changed, 132 insertions(+), 80 deletions(-) diff --git a/package.json b/package.json index df356e8..7ed2f23 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-countdown-circle-timer": "^2.5.4", "react-dom": "^17.0.1", "react-ga": "^3.3.0", + "react-media": "^1.10.0", "react-rewards": "^1.1.2", "react-router-dom": "^5.2.0", "react-router-hash-link": "^2.3.1", diff --git a/src/App.tsx b/src/App.tsx index 355143f..2f2906b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -37,8 +37,6 @@ if (prod) { function App(props: RouteComponentProps) { const [navOpen, setNavOpen] = useState(false); const { user } = useUser(); - // TODO: seperate function for getUserInfo with useUser and fetch - // then set cronjob to call that - also do signin flox useEffect(() => { ReactGA.pageview(window.location.pathname); }, []); diff --git a/src/components/Table.js b/src/components/Table.js index ed3dc01..b2ff8d5 100644 --- a/src/components/Table.js +++ b/src/components/Table.js @@ -12,7 +12,7 @@ const isObject = x => ( function Table({ headRow, children, opts, wide }) { return (
- +
{headRow && {headRow.map((h, i) => ( diff --git a/src/components/phonetics/PhoneticsViewer.tsx b/src/components/phonetics/PhoneticsViewer.tsx index f2c33fd..92f2e67 100644 --- a/src/components/phonetics/PhoneticsViewer.tsx +++ b/src/components/phonetics/PhoneticsViewer.tsx @@ -8,6 +8,7 @@ import { } from "./phonemes"; import playAudio from "../../lib/play-audio"; import views from "./views"; +import Media from "react-media"; export type ViewOptions = "all" | "shortVowel" | "longVowel" | "fiveYs" | "specialConsonant"; @@ -42,74 +43,80 @@ class PhoneticsViewer extends React.Component { } return <>
-
- {views.map(({ label, value }) => ( - - ))} -
+ + {matches => ( +
+ {views.map(({ label, value }) => ( + + ))} +
+ )} +
click the phonetic letter or examples to hear - not all sounds are available
-
- - - - {/* */} - - - - - - - {phonemesShowing.map((phoneme) => ( - - - {/* */} - - - +
+
Phonetic LetterIPA LetterShort ExplanationExamplePashto Letter(s)
- {phoneme.phoneme} - {phoneme.ipa.letter} - {phoneme.quickExplanation}{" "} - {phoneme.ipa.video && ( - - - - )} - - {highlightExample( - phoneme.examples[0].f, - phoneme.examples[0].fHighlight - )} - {` - `} - {highlightExample( - phoneme.examples[0].p, - phoneme.examples[0].pHighlight - )} - - {phoneme.possibleLetters - ? phoneme.possibleLetters.reduce( - (s, l) => - `${s}${l.letter} ${ - l.alternate ? ` (${l.alternate}) ` : "" - }`, - "" - ) - : ""} - {/* phoneme.diacritic && `(diacritic ◌${phoneme.diacritic})` */} -
+ + + + {/* */} + + + - ))} - -
Phonetic LetterIPA LetterShort ExplanationExamplePashto Letter(s)
+ + + {phonemesShowing.map((phoneme) => ( + + + {phoneme.phoneme} + + {/* {phoneme.ipa.letter} */} + + {phoneme.quickExplanation}{" "} + {phoneme.ipa.video && ( + + + + )} + + + {highlightExample( + phoneme.examples[0].f, + phoneme.examples[0].fHighlight + )} + {` - `} + {highlightExample( + phoneme.examples[0].p, + phoneme.examples[0].pHighlight + )} + + + {phoneme.possibleLetters + ? phoneme.possibleLetters.reduce( + (s, l) => + `${s}${l.letter} ${ + l.alternate ? ` (${l.alternate}) ` : "" + }`, + "" + ) + : ""} + {/* phoneme.diacritic && `(diacritic ◌${phoneme.diacritic})` */} + + + ))} + + +
{selectedOption?.notes &&

Notes about {selectedOption.label.toLowerCase()}:

{selectedOption.notes} diff --git a/src/content/games.mdx b/src/content/games.mdx index c6c81d1..524daa1 100644 --- a/src/content/games.mdx +++ b/src/content/games.mdx @@ -4,7 +4,7 @@ title: Games 🎮 import Link from "../components/Link"; -There are little games/quizzes scattered throughout this book. Here you can see them all listed below. If you are logged in, when you successfully complete a game you will see a ✅ beside it. Try to master them all! 🤓🏆 +There are little games/quizzes scattered throughout this book. Here you can see them all listed below. If you are logged in, when you successfully complete a game you will see a ✅ beside it. To study for a game, click on the 📚 on the right. Try to master them all! 🤓🏆 There currently just a few games available. Keep checking back as over time there will be lots of games covering all the aspects of grammar. diff --git a/src/games/GamesBrowser.tsx b/src/games/GamesBrowser.tsx index f00f70b..d5a05de 100644 --- a/src/games/GamesBrowser.tsx +++ b/src/games/GamesBrowser.tsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; import games from "./games"; import { useUser } from "../user-context"; +import Link from "../components/Link"; import SmoothCollapse from "react-smooth-collapse"; function GamesBrowser() { @@ -15,7 +16,7 @@ function GamesBrowser() { {games.map((chapter) => ( <>

{chapter.chapter}

- {chapter.items.map(({ id, title, Game }) => { + {chapter.items.map(({ id, title, Game, studyLink }) => { const done = user && user.tests.some(t => t.id === id); const open = opened === id; return
@@ -23,10 +24,16 @@ function GamesBrowser() {

handleTitleClick(id)}> {title} + {` `}

-

{done ? "✅" : ""}

+

+ {done ? "✅" + : + {"📚"} + } +

diff --git a/src/games/games.tsx b/src/games/games.tsx index 8e6aeaa..6ef3c47 100644 --- a/src/games/games.tsx +++ b/src/games/games.tsx @@ -2,28 +2,37 @@ import React from "react"; import GenderGame from "./sub-cores/GenderGame"; import UnisexNounGame from "./sub-cores/UnisexNounGame"; -function makeGameRecord(title: string, id: string, game: (id: string) => (() => JSX.Element)): GameRecord { +function makeGameRecord( + title: string, + id: string, + studyLink: string, + game: (id: string, link: string) => (() => JSX.Element), +): GameRecord { return { title, + studyLink, id, - Game: game(id), + Game: game(id, studyLink), } } export const nounGenderGame1 = makeGameRecord( "Identify Noun Genders - Level 1", "gender-nouns-1", - (id) => () => , + "/nouns/nouns-gender#gender-by-ending", + (id, link) => () => , ); export const nounGenderGame2 = makeGameRecord( "Identify Noun Genders - Level 2", "gender-nouns-2", - (id) => () => , + "/nouns/nouns-gender#exceptions", + (id, link) => () => , ); export const unisexNounGame = makeGameRecord( "Changing genders on unisex nouns", "unisex-nouns-1", - (id) => () => , + "/nouns/nouns-unisex/", + (id, link) => () => , ); const games: { chapter: string, items: GameRecord[] }[] = [ diff --git a/src/games/sub-cores/GenderGame.tsx b/src/games/sub-cores/GenderGame.tsx index 90553d0..f305ddf 100644 --- a/src/games/sub-cores/GenderGame.tsx +++ b/src/games/sub-cores/GenderGame.tsx @@ -50,7 +50,7 @@ const exceptions: Record = { const amount = 35; -export default function({level, id}: { level: 1 | 2, id: string}) { +export default function({level, id, link}: { level: 1 | 2, id: string, link: string }) { function* questions () { const wordPool = {...types}; const exceptionsPool = {...exceptions}; @@ -101,7 +101,7 @@ export default function({level, id}: { level: 1 | 2, id: string}) { } return > { let pool = [...nouns]; for (let i = 0; i < amount; i++) { @@ -127,7 +127,7 @@ export default function({ id }: { id: string }) { } return = { type GameRecord = { title: string, id: string, + studyLink: string, Game: () => JSX.Element, }; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 33acbd7..037ef6b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1223,6 +1223,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.2.0": + version "7.15.4" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a" + integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278" @@ -7225,6 +7232,13 @@ json-stringify-safe@~5.0.1: resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus= +json2mq@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a" + integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo= + dependencies: + string-convert "^0.2.0" + json3@^3.3.2: version "3.3.3" resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81" @@ -10031,6 +10045,16 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-media@^1.10.0: + version "1.10.0" + resolved "https://registry.yarnpkg.com/react-media/-/react-media-1.10.0.tgz#7b0c5fe8ac55a53ce31b5249db3aaf8a22ff7703" + integrity sha512-FjgYmFoaPTImST06jqotuu0Mk8LOXiGYS/fIyiXuLnf20l3DPniBwtrxi604/HxxjqvmHS3oz5rAwnqdvosV4A== + dependencies: + "@babel/runtime" "^7.2.0" + invariant "^2.2.2" + json2mq "^0.2.0" + prop-types "^15.5.10" + react-overlays@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.0.0.tgz#b50351de194dda0706b40f9632d261c9f0011c4c" @@ -11387,6 +11411,11 @@ strict-uri-encode@^1.0.0: resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= +string-convert@^0.2.0: + version "0.2.1" + resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97" + integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c= + string-length@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"