modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
87 lines • 6.13 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TossupQuestion = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const mobx_react_lite_1 = require("mobx-react-lite");
const react_1 = require("@fluentui/react");
const TossupQuestionController = __importStar(require("./TossupQuestionController"));
require("../state/UIState");
require("../state/PacketState");
const QuestionWord_1 = require("./QuestionWord");
require("../state/Cycle");
const BuzzMenu_1 = require("./BuzzMenu");
const Answer_1 = require("./Answer");
require("../parser/IFormattedText");
const TossupProtestDialog_1 = require("./dialogs/TossupProtestDialog");
const CancelButton_1 = require("./CancelButton");
require("../state/AppState");
const PostQuestionMetadata_1 = require("./PostQuestionMetadata");
exports.TossupQuestion = mobx_react_lite_1.observer(function TossupQuestion(props) {
var _a, _b, _c;
const classes = getClassNames();
const selectedWordRef = React.useRef(null);
const tossupTextRef = React.useRef(null);
const [lastTossup, setLastTossup] = React.useState(props.tossup);
if (lastTossup !== props.tossup) {
setLastTossup(props.tossup);
if (tossupTextRef.current != null) {
// Reset the scrollbar to go back to the top so they can read from the beginning
tossupTextRef.current.scrollTop = 0;
}
}
const correctBuzzIndex = (_b = (_a = props.cycle.correctBuzz) === null || _a === void 0 ? void 0 : _a.marker.position) !== null && _b !== void 0 ? _b : -1;
const wrongBuzzIndexes = ((_c = props.cycle.wrongBuzzes) !== null && _c !== void 0 ? _c : [])
.filter((buzz) => buzz.tossupIndex === props.tossupNumber - 1)
.map((buzz) => buzz.marker.position);
const words = props.tossup.getWords(props.appState.game.gameFormat);
let questionWords = [jsx_runtime_1.jsxs("span", { children: [props.tossupNumber, ". "] }, "tuNumber")];
questionWords = questionWords.concat(words.map((word) => (jsx_runtime_1.jsx(QuestionWordWrapper, Object.assign({ correctBuzzIndex: correctBuzzIndex, index: word.canBuzzOn ? word.wordIndex : undefined, isLastWord: word.canBuzzOn && word.isLastWord, selectedWordRef: selectedWordRef, word: word.word, wrongBuzzIndexes: wrongBuzzIndexes }, props), word.canBuzzOn ? `qw_${word.wordIndex}` : `nqw_${word.nonWordIndex}`))));
const throwOutClickHandler = React.useCallback(() => {
TossupQuestionController.throwOutTossup(props.cycle, props.tossupNumber);
}, [props]);
// Need tossuptext/answer in one container, X in the other
return (jsx_runtime_1.jsxs("div", Object.assign({ className: classes.tossupContainer }, { children: [jsx_runtime_1.jsx(TossupProtestDialog_1.TossupProtestDialog, { appState: props.appState, cycle: props.cycle }, void 0),
jsx_runtime_1.jsxs("div", Object.assign({ ref: tossupTextRef }, { children: [jsx_runtime_1.jsx(react_1.FocusZone, Object.assign({ as: "div", className: classes.tossupQuestionText, shouldRaiseClicks: true, direction: react_1.FocusZoneDirection.bidirectional, onClick: TossupQuestionController.selectWordFromClick, onDoubleClick: TossupQuestionController.selectWordFromClick }, { children: questionWords }), void 0),
jsx_runtime_1.jsx(Answer_1.Answer, { text: props.tossup.answer }, void 0),
jsx_runtime_1.jsx(PostQuestionMetadata_1.PostQuestionMetadata, { metadata: props.tossup.metadata }, void 0)] }), void 0),
jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(CancelButton_1.CancelButton, { tooltip: "Throw out tossup", onClick: throwOutClickHandler }, void 0) }, void 0)] }), void 0));
});
// We need to use a wrapper component so we can give it a key. Otherwise, React will complain
const QuestionWordWrapper = mobx_react_lite_1.observer(function QuestionWordWrapper(props) {
const uiState = props.appState.uiState;
const selected = props.index === uiState.selectedWordIndex;
const buzzMenu = selected && props.index != undefined && uiState.buzzMenuState.visible ? (jsx_runtime_1.jsx(BuzzMenu_1.BuzzMenu, { appState: props.appState, bonusIndex: props.bonusIndex, cycle: props.cycle, isLastWord: props.isLastWord, wordIndex: props.index, target: props.selectedWordRef, tossup: props.tossup, tossupNumber: props.tossupNumber }, void 0)) : undefined;
return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(QuestionWord_1.QuestionWord, { index: props.index, word: props.word, selected: props.index === uiState.selectedWordIndex, correct: props.index === props.correctBuzzIndex, wrong: props.wrongBuzzIndexes.findIndex((position) => position === props.index) >= 0, componentRef: selected ? props.selectedWordRef : undefined }, void 0), buzzMenu, "\u00A0"] }, void 0));
});
const getClassNames = () => react_1.mergeStyleSets({
tossupContainer: {
paddingLeft: "24px",
display: "flex",
justifyContent: "space-between",
},
tossupQuestionText: {
display: "inline-block",
marginBottom: "0.5em",
},
});
//# sourceMappingURL=TossupQuestion.js.map