modaq
Version:
Quiz Bowl Reader using TypeScript, React, and MobX
99 lines • 5.68 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExportToJsonDialog = 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 QBJ = __importStar(require("../../qbj/QBJ"));
require("../../state/AppState");
require("../../state/GameState");
const StateContext_1 = require("../../contexts/StateContext");
const RoundSelector_1 = require("../RoundSelector");
const ModalVisibilityStatus_1 = require("../../state/ModalVisibilityStatus");
const content = {
type: react_2.DialogType.normal,
title: "Export to JSON",
closeButtonAriaLabel: "Close",
showCloseButton: true,
styles: {
innerContent: {
display: "flex",
flexDirection: "column",
},
},
};
const modalProps = {
isBlocking: false,
dragOptions: {
moveMenuItemText: "Move",
closeMenuItemText: "Close",
menu: react_2.ContextualMenu,
},
styles: {
main: {
// To have max width respected normally, we'd need to pass in an IDialogStyleProps, but it ridiculously
// requires you to pass in an entire theme to modify the max width. We could also use a modal, but that
// requires building much of what Dialogs offer easily (close buttons, footer for buttons)
minWidth: "30vw !important",
},
},
topOffsetFixed: true,
};
exports.ExportToJsonDialog = mobx_react_lite_1.observer(function ExportToJsonDialog() {
var _a, _b, _c;
const appState = react_1.default.useContext(StateContext_1.StateContext);
const game = appState.game;
const cancelHandler = react_1.default.useCallback(() => hideDialog(appState), [appState]);
const exportHandler = react_1.default.useCallback(() => exportGame(appState), [appState]);
const roundNumber = (_b = (_a = appState.uiState.exportRoundNumber) !== null && _a !== void 0 ? _a : appState.uiState.sheetsState.roundNumber) !== null && _b !== void 0 ? _b : 1;
const joinedTeamNames = game.teamNames.join("_");
const cyclesJson = new Blob([JSON.stringify(game.cycles)], { type: "application/json" });
const cyclesHref = URL.createObjectURL(cyclesJson);
const cyclesFilename = `Round_${roundNumber}_${joinedTeamNames}_Events.json`;
const gameJson = new Blob([JSON.stringify(game)], { type: "application/json" });
const gameHref = URL.createObjectURL(gameJson);
const gameFilename = `Round_${roundNumber}_${joinedTeamNames}_Game.json`;
const qbjJson = new Blob([QBJ.toQBJString(game, (_c = game.packet.name) !== null && _c !== void 0 ? _c : appState.uiState.packetFilename, roundNumber)], {
type: "application/json",
});
const qbjHref = URL.createObjectURL(qbjJson);
const qbjFilename = `Round_${roundNumber}_${joinedTeamNames}.qbj`;
return (jsx_runtime_1.jsxs(react_2.Dialog, Object.assign({ hidden: appState.uiState.dialogState.visibleDialog !== ModalVisibilityStatus_1.ModalVisibilityStatus.ExportToJson, dialogContentProps: content, modalProps: modalProps, maxWidth: "40vw", onDismiss: cancelHandler }, { children: [jsx_runtime_1.jsx(react_2.Label, { children: "To export the whole game (packet, players, and events), click on \"Export game\"." }, void 0),
jsx_runtime_1.jsx(react_2.Label, { children: "To only export the events, click on \"Export events\"." }, void 0),
jsx_runtime_1.jsx(RoundSelector_1.RoundSelector, { roundNumber: roundNumber, onRoundNumberChange: (newValue) => appState.uiState.setExportRoundNumber(newValue) }, void 0),
jsx_runtime_1.jsxs(react_2.DialogFooter, { children: [jsx_runtime_1.jsx(react_2.PrimaryButton, { text: "Export game", onClick: exportHandler, href: gameHref, download: gameFilename }, void 0),
jsx_runtime_1.jsx(react_2.PrimaryButton, { text: "Export events", onClick: exportHandler, href: cyclesHref, download: cyclesFilename }, void 0),
jsx_runtime_1.jsx(react_2.PrimaryButton, { text: "Export QBJ", onClick: exportHandler, href: qbjHref, download: qbjFilename }, void 0),
jsx_runtime_1.jsx(react_2.DefaultButton, { text: "Cancel", onClick: cancelHandler }, void 0)] }, void 0)] }), void 0));
});
function exportGame(appState) {
appState.game.markUpdateComplete();
hideDialog(appState);
}
function hideDialog(appState) {
appState.uiState.dialogState.hideModalDialog();
}
//# sourceMappingURL=ExportToJsonDialog.js.map