modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
62 lines • 4.36 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GameViewer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const mobx_react_lite_1 = require("mobx-react-lite");
const react_2 = require("@fluentui/react");
const QuestionViewerContainer_1 = require("./QuestionViewerContainer");
const Scoreboard_1 = require("./Scoreboard");
const EventViewer_1 = require("./EventViewer");
const GameBar_1 = require("./GameBar");
require("../state/AppState");
const StateContext_1 = require("../contexts/StateContext");
const Clock_1 = require("./Clock");
const ExportStatus_1 = require("./ExportStatus");
const PacketNameLabel_1 = require("./PacketNameLabel");
const scoreboardAndQuestionViewerTokens = { childrenGap: 20 };
exports.GameViewer = mobx_react_lite_1.observer(function GameViewer() {
const appState = react_1.default.useContext(StateContext_1.StateContext);
const gameExists = appState.game.isLoaded;
const classes = getClassNames(gameExists, appState.uiState.isEventLogHidden, appState.uiState.isClockHidden);
// Include an empty div to keep the scoreboard centered
const showClock = gameExists && !appState.uiState.isClockHidden;
const showPacketName = gameExists && !appState.uiState.isPacketNameHidden;
const clock = showClock ? jsx_runtime_1.jsx(Clock_1.Clock, { className: classes.clock }, void 0) : undefined;
const packetName = showPacketName ? jsx_runtime_1.jsx(PacketNameLabel_1.PacketNameLabel, {}, void 0) : undefined;
const clockSpaceFiller = showClock ? jsx_runtime_1.jsx("div", {}, void 0) : undefined;
// TODO: See if we should convert the game viewer section into a StackItem. It's using a grid now, so it might
// not make sense to have it be a stack item. Alternatively, we could make another Stack that's horizontally aligned
return (jsx_runtime_1.jsxs(react_2.Stack, { children: [jsx_runtime_1.jsx(react_2.StackItem, { children: jsx_runtime_1.jsx(GameBar_1.GameBar, {}, void 0) }, void 0),
jsx_runtime_1.jsxs("div", Object.assign({ className: classes.gameViewer }, { children: [jsx_runtime_1.jsx(react_2.StackItem, Object.assign({ className: classes.questionViewerContainer }, { children: jsx_runtime_1.jsxs(react_2.Stack, Object.assign({ tokens: scoreboardAndQuestionViewerTokens }, { children: [jsx_runtime_1.jsx(react_2.StackItem, { children: jsx_runtime_1.jsxs("div", Object.assign({ className: classes.scoreboardContainer }, { children: [clockSpaceFiller, jsx_runtime_1.jsx(Scoreboard_1.Scoreboard, {}, void 0), clock] }), void 0) }, void 0),
jsx_runtime_1.jsx(react_2.StackItem, { children: jsx_runtime_1.jsx(QuestionViewerContainer_1.QuestionViewerContainer, {}, void 0) }, void 0),
jsx_runtime_1.jsx(react_2.StackItem, { children: packetName }, void 0),
jsx_runtime_1.jsx(react_2.StackItem, { children: jsx_runtime_1.jsx(ExportStatus_1.ExportStatus, {}, void 0) }, void 0)] }), void 0) }), void 0),
jsx_runtime_1.jsx(react_2.StackItem, Object.assign({ className: classes.eventViewerContainer }, { children: jsx_runtime_1.jsx(EventViewer_1.EventViewer, {}, void 0) }), void 0)] }), void 0)] }, void 0));
});
// TODO: play around with flex-grow/flex-shrink to see what will work. Alternatively, have a minimum width for scoreboard
const getClassNames = (gameLoaded, isEventLogHidden, isClockHidden) => react_2.mergeStyleSets({
clock: {
justifySelf: "end",
},
gameViewer: {
// Grid should be more resize friendly than flex if we ever do responsive design
display: "grid",
gridTemplateColumns: isEventLogHidden ? "1fr" : "3fr 1fr",
},
eventViewerContainer: {
margin: "0 10px",
overflowY: "auto",
visibility: gameLoaded ? undefined : "hidden",
},
questionViewerContainer: {},
scoreboardContainer: {
display: "grid",
gridTemplateColumns: isClockHidden ? "1fr" : "1fr 1fr 1fr",
alignItems: "center",
},
});
//# sourceMappingURL=GameViewer.js.map