Merge pull request #127 from alopezlago/alopezlago/public_1_2_3

Merged PR 220: v 1.2.3 - Pronunciation guides in bonuses
alopezlago · Nov 7, 2021 · ee83611 · ee83611
2 parents d98fcda + fbe2208
commit ee83611
Show file tree

Hide file tree

Showing 12 changed files with 181 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -16,6 +16,8 @@ To use MODAQ in your product as an npm package, do the following
 
 4. If you want to use the packet parser (instead of passing in a packet parameter), you need to include a URL to YAPP
 
+To see what each prop does, visit [this page](https://github.com/alopezlago/QuizBowlDiscordScoreTracker/wiki/ModaqControl-props).
+
 # Getting Started
 
 You will need to have [npm](https://www.npmjs.com/get-npm) and [yarn](https://yarnpkg.com/getting-started/install) installed on your system.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "modaq",
-    "version": "1.2.2",
+    "version": "1.2.3",
     "description": "Quiz Bowl Reader using TypeScript, React, and MobX",
     "repository": {
         "type": "git",

diff --git a/server.js b/server.js
@@ -6,10 +6,10 @@ new WebpackDevServer(webpack(config), {
     publicPath: config.output.publicPath,
     hot: false,
     historyApiFallback: true,
-}).listen(8080, "localhost.qbreader", function (err, result) {
+}).listen(8080, "localhost.quizbowlreader.com", function (err, result) {
     if (err) {
         console.log(err);
     }
 
-    console.log("Listening at localhost.qbreader:8080");
+    console.log("Listening at localhost.quizbowlreader.com:8080");
 });
diff --git a/src/components/BonusQuestion.tsx b/src/components/BonusQuestion.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { observer } from "mobx-react-lite";
 import { mergeStyleSets } from "@fluentui/react";
 
-import * as FormattedTextParser from "src/parser/FormattedTextParser";
+import * as PacketState from "../state/PacketState";
 import { BonusQuestionPart } from "./BonusQuestionPart";
 import { Bonus } from "src/state/PacketState";
 import { Cycle } from "src/state/Cycle";
@@ -22,7 +22,10 @@ export const BonusQuestion = observer((props: IBonusQuestionProps) => {
     const throwOutClickHandler: () => void = React.useCallback(() => {
         props.cycle.addThrownOutBonus(props.bonusIndex);
     }, [props]);
-    const formattedLeadin: IFormattedText[] = FormattedTextParser.parseFormattedText(props.bonus.leadin.trim());
+    const formattedLeadin: IFormattedText[] = React.useMemo(
+        () => PacketState.getBonusWords(props.bonus.leadin, props.appState.game.gameFormat),
+        [props.bonus.leadin, props.appState.game.gameFormat]
+    );
 
     const parts: JSX.Element[] = props.bonus.parts.map((bonusPartProps, index) => {
         return (

diff --git a/src/components/BonusQuestionPart.tsx b/src/components/BonusQuestionPart.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Checkbox, Dropdown, IDropdownOption, IDropdownStyles, mergeStyleSets } from "@fluentui/react";
 import { observer } from "mobx-react-lite";
 
-import * as FormattedTextParser from "src/parser/FormattedTextParser";
+import * as PacketState from "src/state/PacketState";
 import { BonusPart } from "src/state/PacketState";
 import { Cycle } from "src/state/Cycle";
 import { Answer } from "./Answer";
@@ -66,7 +66,10 @@ export const BonusQuestionPart = observer((props: IBonusQuestionPartProps) => {
         );
     }
 
-    const bonusPartText: IFormattedText[] = FormattedTextParser.parseFormattedText(props.bonusPart.question);
+    const bonusPartText: IFormattedText[] = React.useMemo(
+        () => PacketState.getBonusWords(props.bonusPart.question, props.gameFormat),
+        [props.bonusPart.question, props.gameFormat]
+    );
 
     // TODO: We should try to resize the checkbox's box to match the font size
     return (

diff --git a/src/components/FormattedText.tsx b/src/components/FormattedText.tsx
@@ -9,7 +9,7 @@ export const FormattedText = observer(
         const classes: IFormattedTextClassNames = useStyles();
         const elements: JSX.Element[] = [];
         for (let i = 0; i < props.segments.length; i++) {
-            elements.push(<FormattedSegment key={`segment_${i}`} segment={props.segments[i]} />);
+            elements.push(<FormattedSegment key={`segment_${i}`} classNames={classes} segment={props.segments[i]} />);
         }
 
         const className: string = props.className ? `${classes.text} ${props.className}` : classes.text;
@@ -42,6 +42,10 @@ const FormattedSegment = observer((props: IFormattedSegmentProps) => {
         );
     }
 
+    if (props.segment.pronunciation) {
+        element = <span className={props.classNames.pronunciationGuide}>{element}</span>;
+    }
+
     return element;
 });
 
@@ -52,10 +56,12 @@ export interface IFormattedTextProps {
 
 interface IFormattedSegmentProps {
     segment: IFormattedText;
+    classNames: IFormattedTextClassNames;
 }
 
 interface IFormattedTextClassNames {
     text: string;
+    pronunciationGuide: string;
 }
 
 const useStyles = memoizeFunction(
@@ -64,5 +70,8 @@ const useStyles = memoizeFunction(
             text: {
                 display: "inline",
             },
+            pronunciationGuide: {
+                color: "rgb(128, 128, 128)",
+            },
         })
 );
diff --git a/src/components/QuestionWord.tsx b/src/components/QuestionWord.tsx
@@ -7,13 +7,7 @@ import { FormattedText } from "./FormattedText";
 
 export const QuestionWord = observer(
     (props: IQuestionWordProps): JSX.Element => {
-        const classes = getClassNames(
-            props.selected,
-            props.correct,
-            props.wrong,
-            props.inPronunciationGuide,
-            props.index != undefined
-        );
+        const classes = getClassNames(props.selected, props.correct, props.wrong, props.index != undefined);
 
         return (
             <span ref={props.componentRef} data-index={props.index} className={classes.word}>
@@ -26,7 +20,6 @@ export const QuestionWord = observer(
 interface IQuestionWordProps {
     word: IFormattedText[];
     index: number | undefined;
-    inPronunciationGuide?: boolean;
     selected?: boolean;
     correct?: boolean;
     wrong?: boolean;
@@ -44,7 +37,6 @@ const getClassNames = memoizeFunction(
         selected: boolean | undefined,
         correct: boolean | undefined,
         wrong: boolean | undefined,
-        isPronunciation: boolean | undefined,
         isIndexDefined: boolean
     ): IQuestionWordClassNames =>
         mergeStyleSets({
@@ -67,9 +59,6 @@ const getClassNames = memoizeFunction(
                         background: "rgba(128, 128, 128, 0.2)",
                         textDecoration: "underline double",
                     },
-                isPronunciation && {
-                    color: "rgb(128, 128, 128)",
-                },
                 // Only highlight a word on hover if it's not in an existing state from selected/correct/wrong
                 isIndexDefined &&
                     !(selected || correct || wrong) && { "&:hover": { background: "rgba(200, 200, 0, 0.15)" } },

diff --git a/src/components/TossupQuestion.tsx b/src/components/TossupQuestion.tsx
@@ -38,7 +38,6 @@ export const TossupQuestion = observer(
                 correctBuzzIndex={correctBuzzIndex}
                 index={word.canBuzzOn ? word.wordIndex : undefined}
                 isLastWord={word.canBuzzOn && word.isLastWord}
-                inPronunciationGuide={!word.canBuzzOn && word.inPronunciationGuide}
                 selectedWordRef={selectedWordRef}
                 word={word.word}
                 wrongBuzzIndexes={wrongBuzzIndexes}
@@ -112,7 +111,6 @@ const QuestionWordWrapper = observer((props: IQuestionWordWrapperProps) => {
                 index={props.index}
                 word={props.word}
                 selected={props.index === uiState.selectedWordIndex}
-                inPronunciationGuide={props.inPronunciationGuide}
                 correct={props.index === props.correctBuzzIndex}
                 wrong={props.wrongBuzzIndexes.findIndex((position) => position === props.index) >= 0}
                 componentRef={selected ? props.selectedWordRef : undefined}
@@ -170,7 +168,6 @@ interface IQuestionWordWrapperProps {
     cycle: Cycle;
     index?: number;
     isLastWord: boolean;
-    inPronunciationGuide: boolean;
     selectedWordRef: React.MutableRefObject<null>;
     tossup: Tossup;
     tossupNumber: number;

diff --git a/src/parser/IFormattedText.ts b/src/parser/IFormattedText.ts
@@ -2,6 +2,7 @@ export interface IFormattedText {
     text: string;
     bolded: boolean;
     emphasized: boolean;
+    pronunciation?: boolean;
     required?: boolean;
     underlined?: boolean;
 }
diff --git a/src/state/IPacket.ts b/src/state/IPacket.ts
@@ -6,14 +6,12 @@ export interface IPacket {
 export interface ITossup {
     question: string;
     answer: string;
-    number: number;
 }
 
 export interface IBonus {
     leadin: string;
     parts: string[];
     answers: string[];
-    number: number;
     values: number[];
     difficultyModifiers?: string[];
 }
diff --git a/src/state/PacketState.ts b/src/state/PacketState.ts
@@ -1,4 +1,4 @@
-import { observable, makeObservable, makeAutoObservable } from "mobx";
+import { makeAutoObservable } from "mobx";
 import { format } from "mobx-sync";
 
 import * as FormattedTextParser from "src/parser/FormattedTextParser";
@@ -169,11 +169,14 @@ export class Tossup implements IQuestion {
                     canBuzzOn,
                 });
             } else {
+                for (const segment of word) {
+                    segment.pronunciation = !canBuzzOn && inPronunciationGuide;
+                }
+
                 words.push({
                     nonWordIndex: index,
                     textIndex: i,
                     word,
-                    inPronunciationGuide,
                     canBuzzOn,
                 });
             }
@@ -198,15 +201,51 @@ export class Bonus {
 
     constructor(leadin: string, parts: BonusPart[]) {
         // We don't use makeAutoObservable because leadin doesn't need to be observable (never changes)
-        makeObservable(this, {
-            parts: observable,
-        });
+        makeAutoObservable(this);
 
-        this.leadin = leadin;
+        this.leadin = leadin.trim();
         this.parts = parts;
     }
 }
 
+export function getBonusWords(text: string, format: IGameFormat): IFormattedText[] {
+    if (
+        format.pronunciationGuideMarkers == undefined ||
+        format.pronunciationGuideMarkers.length !== 2 ||
+        format.pronunciationGuideMarkers.some((guide) => guide == undefined)
+    ) {
+        return FormattedTextParser.parseFormattedText(text);
+    }
+
+    const formattedText: IFormattedText[][] = FormattedTextParser.splitFormattedTextIntoWords(text);
+
+    const pronunciationGuideMarkers: [string, string] = format.pronunciationGuideMarkers;
+    let inPronunciationGuide = false;
+    for (let i = 0; i < formattedText.length; i++) {
+        const word: IFormattedText[] = formattedText[i];
+        const fullText = word.reduce((result, text) => result + text.text, "");
+
+        if (fullText.startsWith(pronunciationGuideMarkers[0])) {
+            inPronunciationGuide = true;
+        }
+
+        for (const segment of word) {
+            segment.pronunciation = inPronunciationGuide;
+        }
+
+        if (inPronunciationGuide && fullText.indexOf(pronunciationGuideMarkers[1]) >= 0) {
+            inPronunciationGuide = false;
+        }
+
+        // Add the space back to all but the last word
+        if (i !== formattedText.length - 1) {
+            word[word.length - 1].text += " ";
+        }
+    }
+
+    return formattedText.reduce((previous, next) => previous.concat(next), []);
+}
+
 export type ITossupWord = IBuzzableTossupWord | INonbuzzableTossupWord;
 
 export interface IBuzzableTossupWord extends IBaseTossupWord {
@@ -217,7 +256,6 @@ export interface IBuzzableTossupWord extends IBaseTossupWord {
 
 export interface INonbuzzableTossupWord extends IBaseTossupWord {
     nonWordIndex: number;
-    inPronunciationGuide: boolean;
     canBuzzOn: false;
 }