New source found from dndbeyond.com
This commit is contained in:
Generated
Vendored
+48
@@ -0,0 +1,48 @@
|
||||
var __rest = (this && this.__rest) || function (s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||
t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
import React, { Children } from 'react';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
const useStyles = makeStyles()(() => ({
|
||||
'AspectRatio--outer': {
|
||||
height: 0,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
},
|
||||
'AspectRatio--inner': {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
'& > *': {
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
}));
|
||||
/**
|
||||
* this component is a little context sensitive, if it's rendered as a child of
|
||||
* a flex-container it'll need a way to figure out it's width (via explicity
|
||||
* setting a `width`, or by configuring it's `flex`/`flex-basis`) otherwise
|
||||
* it'll just collapse
|
||||
*
|
||||
* in `block` and `inline-block` contexts it should grow to fill the width of
|
||||
* it's parent and can be manipulated in the usual CSS ways (e.g. `max-width`
|
||||
* and `margin: 0 auto` or whatever)
|
||||
*/
|
||||
export const AspectRatio = (_a) => {
|
||||
var { ratio, children } = _a, props = __rest(_a, ["ratio", "children"]);
|
||||
const { classes } = useStyles();
|
||||
return (React.createElement("div", Object.assign({}, props),
|
||||
React.createElement("div", { className: classes['AspectRatio--outer'], style: { paddingTop: `${(1 / (ratio || 1)) * 100}%` } },
|
||||
React.createElement("div", { className: classes['AspectRatio--inner'] }, Children.only(children)))));
|
||||
};
|
||||
//# sourceMappingURL=AspectRatio.js.map
|
||||
Generated
Vendored
+45
@@ -0,0 +1,45 @@
|
||||
var __rest = (this && this.__rest) || function (s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||
t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
import React, { useState } from 'react';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
import { Flex } from '../Flex';
|
||||
export const fallbackAvatarUrl = 'https://www.dndbeyond.com/content/skins/waterdeep/images/characters/default-avatar-builder.png';
|
||||
export const ddbAvatarUrl = 'https://www.dndbeyond.com/content/skins/waterdeep/images/dnd-beyond-b-red.png';
|
||||
const useStyles = makeStyles()(({ gameLog: { gameLogEntryAvatarMargin, gameLogEntryAvatarSize } }) => ({
|
||||
Avatar: {
|
||||
width: gameLogEntryAvatarSize,
|
||||
height: gameLogEntryAvatarSize,
|
||||
margin: `0 ${gameLogEntryAvatarMargin} ${gameLogEntryAvatarMargin} 0`,
|
||||
},
|
||||
AvatarPortrait: {
|
||||
width: gameLogEntryAvatarSize,
|
||||
height: gameLogEntryAvatarSize,
|
||||
borderRadius: '50%',
|
||||
objectFit: 'cover',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
}));
|
||||
/**
|
||||
* "... but HTML paragraphs can be any structural grouping of related content,
|
||||
* such as images or form fields."
|
||||
*
|
||||
* @see https://stackoverflow.com/questions/57860703/whats-the-most-appropriate-markup-for-an-html-user-avatar
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
|
||||
*/
|
||||
export const Avatar = (_a) => {
|
||||
var { className, avatarUrl, name } = _a, props = __rest(_a, ["className", "avatarUrl", "name"]);
|
||||
const [avatarDidError, setAvatarDidError] = useState(false);
|
||||
const { classes, cx } = useStyles();
|
||||
return (React.createElement(Flex, Object.assign({ tagName: "p" }, props, { className: cx(className, classes.Avatar), role: "img" }),
|
||||
React.createElement("img", { className: classes.AvatarPortrait, src: avatarDidError ? fallbackAvatarUrl : avatarUrl, alt: name, onError: () => setAvatarDidError(true) })));
|
||||
};
|
||||
//# sourceMappingURL=Avatar.js.map
|
||||
Generated
Vendored
+271
@@ -0,0 +1,271 @@
|
||||
import React, { useContext } from 'react';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
import { Divider } from '../DiceMessageWrapper/images/Divider';
|
||||
import { DividerResult } from '../DiceMessageWrapper/images/DividerResult';
|
||||
import { DieIcon } from '../DieIcon';
|
||||
import { Flex } from '../Flex';
|
||||
import { GameLogContext, toggleMessageExpandedActionType, } from '../GameLogContextProvider';
|
||||
// TODO: clean up when dice is more tree-shake-able
|
||||
var RollKind;
|
||||
(function (RollKind) {
|
||||
RollKind["None"] = "";
|
||||
RollKind["Advantage"] = "advantage";
|
||||
RollKind["Disadvantage"] = "disadvantage";
|
||||
RollKind["CriticalHit"] = "critical hit";
|
||||
})(RollKind || (RollKind = {}));
|
||||
/**
|
||||
* returns `''` for 0 or undefined, `'+ 1'` for 1, `'- 2'` for -2, etc.
|
||||
*/
|
||||
const toSigned = (value) => value && value !== 0
|
||||
? value > 0
|
||||
? `+ ${value}`
|
||||
: `- ${Math.abs(value)}`
|
||||
: '';
|
||||
/**
|
||||
* returns `'1 + 2 + 3'`, or in the case of adv/dis: `'(1, 2) + 3'`, or just
|
||||
* `'?'` if no result exists yet
|
||||
*/
|
||||
const getRollText = ({ result, rollKind }) => result
|
||||
? `${rollKind === RollKind.Advantage || rollKind === RollKind.Disadvantage
|
||||
? `(${result.values.join(', ')})`
|
||||
: result.values.join(' + ')} ${toSigned(result.constant)}`
|
||||
: '?';
|
||||
/**
|
||||
* `'1d4+1d6+3'` or, in the case of adv: `'2d20kh1+3'`, or dis: `'2d20kl1+3'`
|
||||
*
|
||||
* TODO: this used to create `DiceNotation` and `DieTerm` class instances just
|
||||
* to call `toString` on them (see below). It seems wrong-ish to do all that
|
||||
* "extra" work, but also not reusing complicated serialization logic seems
|
||||
* wrong too ... maybe some kind of shared utils lib? The approach listed below
|
||||
* failed in test, and I just kinda don't want to dig into why (Jest, Babel,
|
||||
* Rollup, et al configs) until we figure this out.
|
||||
*
|
||||
* ```ts
|
||||
* const getRollNotation = (roll: RollRequestRoll): string =>
|
||||
* new DiceNotation(
|
||||
* roll.diceNotation.set.map(
|
||||
* ({ count, dieType, operation, operand }) =>
|
||||
* new DieTerm(count, dieType, operation, operand),
|
||||
* ),
|
||||
* roll.diceNotation.constant,
|
||||
* ).toDiceNotationString();
|
||||
* ```
|
||||
*
|
||||
* n.b. need also to keep in mind Avrae and rolls generated by sources other
|
||||
* than `@dndbeyond/dice`
|
||||
*
|
||||
* @see https://github.com/DnDBeyond/ddb-game-log/pull/92#pullrequestreview-569551274
|
||||
* @see https://wikia-inc.atlassian.net/browse/DDBADV-1922
|
||||
*/
|
||||
const getRollNotation = (roll) => `${roll.diceNotation.set
|
||||
.map((set) => `${set === null || set === void 0 ? void 0 : set.count}${set === null || set === void 0 ? void 0 : set.dieType}`)
|
||||
.join('+')}${roll.rollKind === RollKind.Advantage ? 'kh1' : ''}${roll.rollKind === RollKind.Disadvantage ? 'kl1' : ''}${toSigned(roll.diceNotation.constant).replace(' ', '')}`;
|
||||
const rollTypeToColor = ({ rollTypeRollColor, rollTypeToHitColor, rollTypeDamageColorSelf, rollTypeDamageColor, rollTypeCheckColorSelf, rollTypeCheckColor, rollTypeSaveColor, rollTypeAdvantageColor, rollTypeDisadvantageColor, rollTypeDefaultColor, }, { roll, isSelf }) => {
|
||||
var _a;
|
||||
return ((_a = {
|
||||
roll: rollTypeRollColor,
|
||||
'to hit': rollTypeToHitColor,
|
||||
damage: isSelf ? rollTypeDamageColorSelf : rollTypeDamageColor,
|
||||
check: isSelf ? rollTypeCheckColorSelf : rollTypeCheckColor,
|
||||
spell: isSelf ? rollTypeCheckColorSelf : rollTypeCheckColor,
|
||||
save: rollTypeSaveColor,
|
||||
heal: rollTypeSaveColor,
|
||||
advantage: rollTypeAdvantageColor,
|
||||
disadvantage: rollTypeDisadvantageColor,
|
||||
}[roll.rollType]) !== null && _a !== void 0 ? _a : rollTypeDefaultColor);
|
||||
};
|
||||
const rollTypeToColorForTotalHeader = ({ rollTypeAdvantageColorSelf, rollTypeAdvantageColor, rollTypeDisadvantageColorSelf, rollTypeDisadvantageColor, }, { roll, isSelf }) => ({
|
||||
advantage: isSelf ? rollTypeAdvantageColorSelf : rollTypeAdvantageColor,
|
||||
disadvantage: isSelf
|
||||
? rollTypeDisadvantageColorSelf
|
||||
: rollTypeDisadvantageColor,
|
||||
}[roll.rollType]);
|
||||
const useStyles = makeStyles()(({ gameLog: { actionColorPending, fontRoboto, fontRobotoCondensed, messageColorOther, rollTypeAdvantageColor, rollTypeAdvantageColorSelf, rollTypeCheckColor, rollTypeCheckColorSelf, rollTypeDamageColor, rollTypeDamageColorSelf, rollTypeDefaultColor, rollTypeDisadvantageColor, rollTypeDisadvantageColorSelf, rollTypeRollColor, rollTypeSaveColor, rollTypeToHitColor, targetColorSelf, valueColorOther, valueColorPending, valueColorSelf, }, }, { roll, isSelf }, classes) => ({
|
||||
DiceResultContainer: {
|
||||
width: '100%',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
Line: {
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
},
|
||||
Notation: {
|
||||
fontSize: '14px',
|
||||
color: messageColorOther,
|
||||
fontFamily: fontRoboto,
|
||||
fontWeight: 500,
|
||||
},
|
||||
Title: {
|
||||
fontFamily: fontRobotoCondensed,
|
||||
textTransform: 'uppercase',
|
||||
fontWeight: 700,
|
||||
[`&.${classes.Self}`]: {
|
||||
color: targetColorSelf,
|
||||
},
|
||||
},
|
||||
Breakdown: {
|
||||
fontSize: '1.25rem',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
width: '100%',
|
||||
fontFamily: fontRoboto,
|
||||
fontWeight: 500,
|
||||
'& > svg': {
|
||||
flex: '0 0 auto',
|
||||
},
|
||||
},
|
||||
Number: {
|
||||
[`&.${classes.Self}`]: {
|
||||
color: valueColorSelf,
|
||||
},
|
||||
[`&.${classes.Other}`]: {
|
||||
color: valueColorOther,
|
||||
},
|
||||
[`&.${classes.Pending}`]: {
|
||||
color: valueColorPending,
|
||||
},
|
||||
},
|
||||
Target: {
|
||||
[`&.${classes.Self}`]: {
|
||||
color: targetColorSelf,
|
||||
},
|
||||
[`&.${classes.Other}`]: {
|
||||
color: messageColorOther,
|
||||
},
|
||||
},
|
||||
Action: {
|
||||
[`&.${classes.Pending}`]: {
|
||||
color: actionColorPending,
|
||||
},
|
||||
},
|
||||
RollType: {
|
||||
color: rollTypeToColor({
|
||||
rollTypeRollColor,
|
||||
rollTypeToHitColor,
|
||||
rollTypeDamageColorSelf,
|
||||
rollTypeDamageColor,
|
||||
rollTypeCheckColorSelf,
|
||||
rollTypeCheckColor,
|
||||
rollTypeSaveColor,
|
||||
rollTypeAdvantageColor,
|
||||
rollTypeDisadvantageColor,
|
||||
rollTypeDefaultColor,
|
||||
}, { roll, isSelf }),
|
||||
},
|
||||
Result: {
|
||||
flex: '1 1 auto',
|
||||
minWidth: 0,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
Divider: {
|
||||
margin: '0 12px',
|
||||
flex: '0 0 auto',
|
||||
},
|
||||
DividerResult: {
|
||||
margin: '0 12px',
|
||||
flex: '0 0 auto',
|
||||
'&$Target': {
|
||||
marginTop: '12px',
|
||||
},
|
||||
},
|
||||
TotalContainer: {
|
||||
position: 'relative',
|
||||
alignSelf: 'stretch',
|
||||
},
|
||||
TotalHeader: {
|
||||
fontFamily: fontRobotoCondensed,
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase',
|
||||
position: 'absolute',
|
||||
top: '1px',
|
||||
color: rollTypeToColorForTotalHeader({
|
||||
rollTypeAdvantageColorSelf,
|
||||
rollTypeAdvantageColor,
|
||||
rollTypeDisadvantageColorSelf,
|
||||
rollTypeDisadvantageColor,
|
||||
}, { roll, isSelf }),
|
||||
},
|
||||
Total: {
|
||||
minWidth: '2.5rem',
|
||||
fontSize: '2rem',
|
||||
fontWeight: 'bold',
|
||||
flex: '0 0 auto',
|
||||
lineHeight: 1,
|
||||
[`&.${classes.Self}`]: {
|
||||
color: valueColorSelf,
|
||||
},
|
||||
[`&.${classes.Other}`]: {
|
||||
color: valueColorOther,
|
||||
},
|
||||
[`&.${classes.Collapsed}`]: {
|
||||
fontSize: '1.4rem',
|
||||
},
|
||||
[`&.${classes.Pending}`]: {
|
||||
color: valueColorPending,
|
||||
},
|
||||
[`&.${classes.Target}`]: {
|
||||
marginTop: '13px',
|
||||
},
|
||||
},
|
||||
DieIcon: {
|
||||
marginRight: '6px',
|
||||
color: messageColorOther,
|
||||
},
|
||||
Self: {},
|
||||
Other: {},
|
||||
Pending: {},
|
||||
Collapsed: {},
|
||||
}));
|
||||
export const DiceMessage = (props) => {
|
||||
var _a, _b, _c, _d, _e, _f, _g;
|
||||
const { message, isSelf, roll, isPending, isCollapsed } = props;
|
||||
const { classes, cx } = useStyles({ roll, isSelf });
|
||||
const [{ userId, activeCampaign }, dispatch] = useContext(GameLogContext);
|
||||
const dmUserId = (_b = (_a = activeCampaign === null || activeCampaign === void 0 ? void 0 : activeCampaign.dmId) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '';
|
||||
const toggleIsExpanded = () => {
|
||||
var _a;
|
||||
return dispatch({
|
||||
type: toggleMessageExpandedActionType,
|
||||
payload: {
|
||||
messageId: (_a = message.data.rollId) !== null && _a !== void 0 ? _a : '',
|
||||
wasExpandedByUser: true,
|
||||
},
|
||||
});
|
||||
};
|
||||
return (React.createElement(Flex, { className: classes.DiceResultContainer, justifyContent: "space-between", onClick: toggleIsExpanded },
|
||||
React.createElement("div", { className: classes.Result },
|
||||
React.createElement("div", { className: cx(classes.Line, classes.Title, isSelf ? classes.Self : classes.Other) },
|
||||
React.createElement("span", { className: cx(classes.Action, isPending && classes.Pending) }, message.data.action),
|
||||
": ",
|
||||
React.createElement("span", { className: cx(classes.RollType) }, roll.rollType)),
|
||||
message.messageScope === 'userId' && (React.createElement("div", { className: cx(classes.Line, classes.Title) },
|
||||
React.createElement("span", { className: cx(classes.Target, isSelf ? classes.Self : classes.Other) },
|
||||
"TO:",
|
||||
' ',
|
||||
message.messageTarget === dmUserId &&
|
||||
message.messageTarget !== userId
|
||||
? 'DM'
|
||||
: 'Self'))),
|
||||
!isCollapsed && (React.createElement(React.Fragment, null,
|
||||
React.createElement("div", { className: cx(classes.Line, classes.Breakdown) },
|
||||
roll.diceNotation.set.length > 0 && (React.createElement(DieIcon, { className: classes.DieIcon, forDie: (_e = (_d = (_c = roll.diceNotation.set[0]) === null || _c === void 0 ? void 0 : _c.dice[0]) === null || _d === void 0 ? void 0 : _d.dieType) !== null && _e !== void 0 ? _e : 'd20' })),
|
||||
React.createElement("span", { className: cx(classes.Line, classes.Number, isSelf ? classes.Self : classes.Other, isPending && classes.Pending), title: getRollText(roll) }, getRollText(roll))),
|
||||
React.createElement("div", { className: cx(classes.Line, classes.Notation) },
|
||||
React.createElement("span", null, getRollNotation(roll)))))),
|
||||
isCollapsed ? (React.createElement(Divider, { className: classes.Divider })) : (React.createElement(DividerResult, { className: cx(classes.DividerResult, message.messageScope === 'userId' ? classes.Target : '') })),
|
||||
React.createElement(Flex, { className: classes.TotalContainer, flexDirection: "column" },
|
||||
!isCollapsed &&
|
||||
(roll.rollKind === RollKind.Advantage ||
|
||||
roll.rollKind === RollKind.Disadvantage) && (React.createElement("small", { className: cx(classes.TotalHeader) },
|
||||
React.createElement("span", null,
|
||||
roll.rollKind === RollKind.Advantage && '+ADV',
|
||||
roll.rollKind === RollKind.Disadvantage && '-DIS'))),
|
||||
React.createElement(Flex, { className: cx(classes.Total, isSelf ? classes.Self : classes.Other, isCollapsed && classes.Collapsed, isPending && classes.Pending, message.messageScope === 'userId' && !isCollapsed
|
||||
? classes.Target
|
||||
: '') },
|
||||
React.createElement("span", null, (_g = (_f = roll.result) === null || _f === void 0 ? void 0 : _f.total) !== null && _g !== void 0 ? _g : '...')))));
|
||||
};
|
||||
//# sourceMappingURL=DiceMessage.js.map
|
||||
Generated
Vendored
+19
@@ -0,0 +1,19 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
import { DiceMessage } from '../DiceMessage';
|
||||
import { DiceThumbnails } from '../DiceThumbnails';
|
||||
import { Flex } from '../Flex';
|
||||
const useStyles = makeStyles()(() => ({
|
||||
Container: {
|
||||
width: '100%',
|
||||
},
|
||||
}));
|
||||
export const DiceMessageWrapper = ({ message, isCollapsed, isSelf, }) => {
|
||||
var _a;
|
||||
const { classes } = useStyles();
|
||||
const isPending = message.eventType.includes('pending');
|
||||
return (React.createElement(Flex, { className: classes.Container, flexDirection: "column" }, (_a = message.data.rolls) === null || _a === void 0 ? void 0 : _a.map((roll, key) => (React.createElement(Fragment, { key: key },
|
||||
React.createElement(DiceMessage, { message: message, isSelf: isSelf, roll: roll, isPending: isPending, isCollapsed: isCollapsed }),
|
||||
!isPending && !isCollapsed && roll.diceNotation.set.length > 0 && (React.createElement(DiceThumbnails, { roll: roll, setId: message.data.setId || '00101' })))))));
|
||||
};
|
||||
//# sourceMappingURL=DiceMessageWrapper.js.map
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const Divider = (props) => (React.createElement("svg", Object.assign({ width: "1", height: "32" }, props),
|
||||
React.createElement("path", { fill: "currentColor", d: "M0 0h1v32H0z" })));
|
||||
//# sourceMappingURL=Divider.js.map
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const DividerResult = (props) => (React.createElement("svg", Object.assign({ width: "19", height: "70", viewBox: "0 0 19 100" }, props),
|
||||
React.createElement("path", { fill: "currentColor", d: "M10 0v30H9V0zm0 70v30H9V70zm9-13H0v-3h19zm0-10H0v-3h19z" })));
|
||||
//# sourceMappingURL=DividerResult.js.map
|
||||
Generated
Vendored
+87
@@ -0,0 +1,87 @@
|
||||
import React, { useContext, useState } from 'react';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
import { DieIcon } from '../DieIcon';
|
||||
import { GameLogContext } from '../GameLogContextProvider';
|
||||
export const getD100TensPlaceValue = (dieValue) => Math.floor(dieValue / 10) * 10;
|
||||
export const getD100OnesPlaceValue = (dieValue) => {
|
||||
const result = dieValue - getD100TensPlaceValue(dieValue);
|
||||
return result === 0 ? 10 : result;
|
||||
};
|
||||
const useStyles = makeStyles()(({ gameLog: { fontRoboto, dieThumbnailImageSize, dieDoubleThumbnailImageSize, }, }, _params, classes) => ({
|
||||
DieThumbnailContainer: {
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
'&:before': {
|
||||
content: '""',
|
||||
display: 'block',
|
||||
paddingTop: '100%',
|
||||
},
|
||||
},
|
||||
DieThumbnailWrapper: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
[`&.${classes.Placeholder}`]: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
},
|
||||
DieThumbnailDoubleWrapper: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
[`&.${classes.Placeholder}`]: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
},
|
||||
DieThumbnailImage: {
|
||||
width: dieThumbnailImageSize,
|
||||
height: dieThumbnailImageSize,
|
||||
marginLeft: '-35%',
|
||||
marginTop: '-40%',
|
||||
},
|
||||
DieThumbnailImageD100: {
|
||||
width: dieDoubleThumbnailImageSize,
|
||||
height: dieDoubleThumbnailImageSize,
|
||||
marginTop: '-48%',
|
||||
marginLeft: '-42%',
|
||||
},
|
||||
DieThumbnailImageD10: {
|
||||
width: dieDoubleThumbnailImageSize,
|
||||
height: dieDoubleThumbnailImageSize,
|
||||
marginTop: '-110%',
|
||||
marginLeft: '-10%',
|
||||
},
|
||||
PlaceholderValue: {
|
||||
fontSize: '0.75rem',
|
||||
fontFamily: fontRoboto,
|
||||
fontWeight: 500,
|
||||
lineHeight: 1,
|
||||
},
|
||||
Placeholder: {},
|
||||
}));
|
||||
export const DiceThumbnail = ({ className, onClick, setDiceResult, setId, }) => {
|
||||
const [imageDidFail, setImageDidFail] = useState(false);
|
||||
const [{ diceThumbnailsUrl }] = useContext(GameLogContext);
|
||||
const { classes, cx } = useStyles(null);
|
||||
return (
|
||||
/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
|
||||
React.createElement("span", { className: cx(className, classes.DieThumbnailContainer), onClick: onClick }, imageDidFail ? (React.createElement("span", { className: cx(classes.DieThumbnailWrapper, classes.Placeholder) },
|
||||
React.createElement(DieIcon, { forDie: setDiceResult.dieType }),
|
||||
React.createElement("span", { className: classes.PlaceholderValue }, setDiceResult.dieValue))) : setDiceResult.dieType === 'd100' ? (React.createElement("span", { title: setDiceResult.dieValue.toString(), className: classes.DieThumbnailDoubleWrapper },
|
||||
React.createElement("img", { className: classes.DieThumbnailImageD100, src: `${diceThumbnailsUrl}/${setId}-d100-${getD100TensPlaceValue(setDiceResult.dieValue)}.png`, alt: `d100 roll of ${setDiceResult.dieValue}`, onError: () => setImageDidFail(true) }),
|
||||
React.createElement("img", { className: classes.DieThumbnailImageD10, src: `${diceThumbnailsUrl}/${setId}-d10-${getD100OnesPlaceValue(setDiceResult.dieValue)}.png`, alt: `${setDiceResult.dieType} roll of ${setDiceResult.dieValue}`, onError: () => setImageDidFail(true) }))) : (React.createElement("span", { title: setDiceResult.dieValue.toString(), className: classes.DieThumbnailWrapper },
|
||||
React.createElement("img", { className: classes.DieThumbnailImage, src: `${diceThumbnailsUrl}/${setId}-${setDiceResult.dieType}-${setDiceResult.dieValue}.png`, alt: `${setDiceResult.dieType} roll of ${setDiceResult.dieValue}`, onError: () => setImageDidFail(true) })))));
|
||||
};
|
||||
//# sourceMappingURL=DiceThumbnail.js.map
|
||||
Generated
Vendored
+111
@@ -0,0 +1,111 @@
|
||||
import React, { useCallback, useContext, useState, } from 'react';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
import { DiceThumbnail } from '../DiceThumbnail/DiceThumbnail';
|
||||
import { Flex } from '../Flex';
|
||||
import { GameLogContext } from '../GameLogContextProvider';
|
||||
import { CloseIcon } from './images/CloseIcon';
|
||||
import { ExternalLinkIcon } from './images/ExternalLinkIcon';
|
||||
// Set this to change how many dice are needed before switching to displaying smaller icons with 3 columns
|
||||
// So if set to 7, up to 6 dice will display in 2 larger columns
|
||||
const diceCountForSmallIcons = 7;
|
||||
// GA parameters the Analytics team requested we use
|
||||
const diceCtaAnalyticsParameters = '?icid_medium=cta&icid_source=shared_gamespace&icid_campaign=dice';
|
||||
const useStyles = makeStyles()(({ gameLog: { fontRobotoCondensed, messageColorOther } }, _params, classes) => ({
|
||||
DicePreviewContainer: {
|
||||
width: '100%',
|
||||
},
|
||||
SetPreviewContainer: {
|
||||
width: '100%',
|
||||
[`&.${classes.Expanded}`]: {
|
||||
marginLeft: 0,
|
||||
},
|
||||
},
|
||||
SetPreviewDescriptionContainer: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
},
|
||||
SetPreviewDescription: {
|
||||
fontFamily: fontRobotoCondensed,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '12px',
|
||||
lineHeight: '16px',
|
||||
letterSpacing: '0.4px',
|
||||
color: '#a7b6c2',
|
||||
},
|
||||
SetPreviewActionsContainer: {
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
SetPreviewCallToAction: {
|
||||
color: 'inherit',
|
||||
},
|
||||
SetPreviewCallToActionIcon: {
|
||||
marginLeft: '6px',
|
||||
verticalAlign: 'text-top',
|
||||
},
|
||||
SetPreviewCloseAction: {
|
||||
marginLeft: '32px',
|
||||
marginTop: '-3px',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
DieThumbnailsList: {
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
PreviewThumbnail: {
|
||||
width: '60px',
|
||||
minWidth: '60px',
|
||||
marginLeft: '-12px',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
DieThumbnail: {
|
||||
width: '33.3333%',
|
||||
[`&.${classes.Large}`]: {
|
||||
width: '50%',
|
||||
},
|
||||
},
|
||||
Divider: {
|
||||
width: '100%',
|
||||
height: '1px',
|
||||
margin: '12px 0 8px 0',
|
||||
backgroundColor: messageColorOther,
|
||||
},
|
||||
Expanded: {},
|
||||
Large: {},
|
||||
}));
|
||||
export const DiceThumbnails = ({ roll, setId }) => {
|
||||
var _a, _b, _c;
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const toggleIsExpanded = useCallback(() => setIsExpanded((prevIsExpanded) => !prevIsExpanded), []);
|
||||
const [{ diceFamilies, baseUrl }] = useContext(GameLogContext);
|
||||
const { classes, cx } = useStyles(null);
|
||||
const familyId = setId.substring(0, 3);
|
||||
const diceFamilyInfo = diceFamilies.entities[familyId];
|
||||
const diceSetInfo = (_a = diceFamilies.entities[familyId]) === null || _a === void 0 ? void 0 : _a.sets.definitionData.find((x) => x.id === setId);
|
||||
const diceRollSets = roll.diceNotation.set;
|
||||
const firstSetResult = (_c = (_b = diceRollSets[0]) === null || _b === void 0 ? void 0 : _b.dice) === null || _c === void 0 ? void 0 : _c[0];
|
||||
const shouldDisplayLargeDice = diceRollSets.reduce((acc, set) => acc + Number(set === null || set === void 0 ? void 0 : set.dice.length), 0) <
|
||||
diceCountForSmallIcons;
|
||||
const descriptionString = `Rolled with ${diceSetInfo === null || diceSetInfo === void 0 ? void 0 : diceSetInfo.fullName}`;
|
||||
return (React.createElement(Flex, { className: classes.DicePreviewContainer, flexDirection: "column" },
|
||||
React.createElement(Flex, { className: cx(classes.SetPreviewContainer, isExpanded && classes.Expanded) },
|
||||
!isExpanded && (React.createElement(DiceThumbnail, { className: classes.PreviewThumbnail, setDiceResult: firstSetResult, setId: setId, onClick: toggleIsExpanded })),
|
||||
React.createElement("div", { className: classes.SetPreviewDescriptionContainer },
|
||||
React.createElement("div", { className: classes.Divider }),
|
||||
diceFamilyInfo && (React.createElement(Flex, { className: classes.SetPreviewActionsContainer },
|
||||
React.createElement("span", { className: classes.SetPreviewDescription }, isExpanded && diceFamilyInfo.marketplaceUrl ? (React.createElement("a", { className: classes.SetPreviewCallToAction, href: `${baseUrl}${diceFamilyInfo.marketplaceUrl}${diceCtaAnalyticsParameters}`, target: "_blank", rel: "noreferrer" },
|
||||
descriptionString,
|
||||
React.createElement(ExternalLinkIcon, { className: classes.SetPreviewCallToActionIcon }))) : (descriptionString)),
|
||||
isExpanded && (React.createElement("span", { className: classes.SetPreviewCloseAction },
|
||||
React.createElement(CloseIcon, { onClick: () => toggleIsExpanded() }))))))),
|
||||
React.createElement("div", { className: classes.DieThumbnailsList }, isExpanded &&
|
||||
diceRollSets.map((set, setIndex) => {
|
||||
const setDiceGroups = set === null || set === void 0 ? void 0 : set.dice;
|
||||
return setDiceGroups.map((setDice, setDiceIndex) => (React.createElement(DiceThumbnail, { className: cx(classes.DieThumbnail, shouldDisplayLargeDice && classes.Large), setDiceResult: setDice, setId: setId, key: `${setIndex}-${setDiceIndex}` })));
|
||||
}))));
|
||||
};
|
||||
//# sourceMappingURL=DiceThumbnails.js.map
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const CloseIcon = (props) => (React.createElement("svg", Object.assign({ width: "20", height: "20", fill: "none" }, props),
|
||||
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.712 5.05L10 8.763 6.288 5.05A.875.875 0 105.05 6.288L8.763 10 5.05 13.712a.875.875 0 101.238 1.238L10 11.237l3.712 3.713a.875.875 0 101.238-1.238L11.238 10l3.712-3.712a.875.875 0 10-1.238-1.238z", fill: "currentColor" })));
|
||||
//# sourceMappingURL=CloseIcon.js.map
|
||||
Generated
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
import React from 'react';
|
||||
export const ExternalLinkIcon = (props) => (React.createElement("svg", Object.assign({ width: "12", height: "12", fill: "none" }, props),
|
||||
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.78.22a.748.748 0 01.22.528V4.5a.75.75 0 11-1.5 0V2.56L5.78 7.28a.748.748 0 01-1.06 0 .75.75 0 010-1.06L9.44 1.5H7.5a.75.75 0 110-1.5h3.752a.74.74 0 01.528.22zM8.25 7.5a.75.75 0 111.5 0v3.75A.75.75 0 019 12H.75a.75.75 0 01-.75-.75V3a.75.75 0 01.75-.75H4.5a.75.75 0 110 1.5h-3v6.75h6.75v-3z", fill: "#1B9AF0" }),
|
||||
React.createElement("mask", { id: "a", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "12", height: "12" },
|
||||
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.78.22a.748.748 0 01.22.528V4.5a.75.75 0 11-1.5 0V2.56L5.78 7.28a.748.748 0 01-1.06 0 .75.75 0 010-1.06L9.44 1.5H7.5a.75.75 0 110-1.5h3.752a.74.74 0 01.528.22zM8.25 7.5a.75.75 0 111.5 0v3.75A.75.75 0 019 12H.75a.75.75 0 01-.75-.75V3a.75.75 0 01.75-.75H4.5a.75.75 0 110 1.5h-3v6.75h6.75v-3z", fill: "#fff" }))));
|
||||
//# sourceMappingURL=ExternalLinkIcon.js.map
|
||||
Generated
Vendored
+34
@@ -0,0 +1,34 @@
|
||||
var __rest = (this && this.__rest) || function (s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||
t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
import React from 'react';
|
||||
import { D10 } from './images/D10';
|
||||
import { D100 } from './images/D100';
|
||||
import { D12 } from './images/D12';
|
||||
import { D20 } from './images/D20';
|
||||
import { D4 } from './images/D4';
|
||||
import { D6 } from './images/D6';
|
||||
import { D8 } from './images/D8';
|
||||
const Icon = {
|
||||
d100: D100,
|
||||
d20: D20,
|
||||
d12: D12,
|
||||
d10: D10,
|
||||
d8: D8,
|
||||
d6: D6,
|
||||
d4: D4,
|
||||
};
|
||||
export const DieIcon = (_a) => {
|
||||
var { forDie } = _a, props = __rest(_a, ["forDie"]);
|
||||
const D = Icon[forDie];
|
||||
return React.createElement(D, Object.assign({}, props));
|
||||
};
|
||||
//# sourceMappingURL=DieIcon.js.map
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const D10 = (props) => (React.createElement("svg", Object.assign({ width: "32", height: "32", fill: "currentColor", title: "D10" }, props),
|
||||
React.createElement("path", { d: "M16 1.5l-16 12 1 6 15 11 15-11 1-6-16-12zm13.7 12.8l-.5 3.2-3.5-1.7-5.4-9 9.4 7.5zM15 21.1v6.1l-11.1-8L7 17.6l8 3.5zm2 0l8-3.5 3.1 1.6L17 27.3v-6.2zm6.6-5.1L16 19.4 8.4 16 16 4.4 23.6 16zM2.3 14.3l9.4-7.5-5.4 9-3.5 1.7-.5-3.2z" })));
|
||||
//# sourceMappingURL=D10.js.map
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const D100 = (props) => (React.createElement("svg", Object.assign({ width: "48", height: "32", fill: "currentColor", title: "D100" }, props),
|
||||
React.createElement("path", { d: "M12 5L0 14l.75 4.5L12 26.75l11.25-8.25L24 14 12 5zm10.275 9.6L21.9 17l-2.625-1.275-4.05-6.75 7.05 5.625zM11.25 19.7v4.575l-8.325-6 2.325-1.2 6 2.625zm1.5 0l6-2.625 2.325 1.2-8.325 6.075V19.7zm4.95-3.825l-5.7 2.55-5.7-2.55 5.7-8.7 5.7 8.7zM1.725 14.6l7.05-5.625-4.05 6.75L2.1 17l-.375-2.4zM36 5l-12 9 .75 4.5L36 26.75l11.25-8.25L48 14 36 5zm10.275 9.6L45.9 17l-2.625-1.275-4.05-6.75 7.05 5.625zM35.25 19.7v4.575l-8.325-6 2.325-1.2 6 2.625zm1.5 0l6-2.625 2.325 1.2-8.325 6.075V19.7zm4.95-3.825l-5.7 2.55-5.7-2.55 5.7-8.7 5.7 8.7zM25.725 14.6l7.05-5.625-4.05 6.75L26.1 17l-.375-2.4z" })));
|
||||
//# sourceMappingURL=D100.js.map
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const D12 = (props) => (React.createElement("svg", Object.assign({ width: "32", height: "32", fill: "currentColor", title: "D12" }, props),
|
||||
React.createElement("path", { d: "M26 4L16 0 6 4l-5 7v10l6 7 9 4 9-4 6-7V11l-5-7zM3 11.9L7 14l3.7 8.2-3.4 3.4L3 21v-9.1zM13 22l-3.7-7.2L16 9.2l6.7 5.5L19 22h-6zm16-1l-4.3 4.7-3.4-3.4L25 14l4-2.1V21zM17 2.2l7.8 3.6L28 10l-4.5 2.6L17 7.5V2.2zM7.2 5.8L15 2.2v5.2l-6.5 5.1-.5-.1L4 10l3.2-4.2zm2.1 21l3-3h7.5l3 3L16 30l-6.7-3.2z" })));
|
||||
//# sourceMappingURL=D12.js.map
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const D20 = (props) => (React.createElement("svg", Object.assign({ width: "32", height: "32", fill: "currentColor", title: "D20" }, props),
|
||||
React.createElement("path", { d: "M16 1l14 7.45v15l-1 .596L16 31 2 23.55V8.45L16 1zm5 19.868H10l6 7.45 5-7.45zm-13.3.496L5 22.954l7.1 3.874-4.4-5.464zm16.6-.1l-4.4 5.464 7.1-3.874-2.7-1.59zM4 13.716v7.55l2.7-1.59-2.7-5.96zm24 0l-2.7 5.96.2.1 2.5 1.49v-7.55zM16 9.841l-6 9.04h12l-6-9.04zm-2-.596l-9.6.795 3.7 7.947L14 9.245zm4 0l5.8 8.742 3.7-8.047-9.5-.695zm-1-5.464V7.16l7.4.596L17 3.781zm-2 0L7.6 7.755l7.4-.596V3.78z" })));
|
||||
//# sourceMappingURL=D20.js.map
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const D4 = (props) => (React.createElement("svg", Object.assign({ width: "32", height: "32", fill: "currentColor", title: "D4" }, props),
|
||||
React.createElement("path", { d: "M14.65 3L31 15.15 25.532 29H1L14.65 3zm.208 3.373L3.91 27.228h19.707l-8.76-20.855zm2.14.57l7.917 18.848 3.957-10.026-11.874-8.822z" })));
|
||||
//# sourceMappingURL=D4.js.map
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const D6 = (props) => (React.createElement("svg", Object.assign({ width: "32", height: "32", fill: "currentColor", title: "D6" }, props),
|
||||
React.createElement("path", { d: "M29.5 2.5v18.796L21.523 29.5H2.5V8.931L12.66 2.5H29.5zm-9.233 7.8h-16v17.434h16V10.3zm7.467-5.069l-5.701 4.607V26.44l5.7-5.864V5.231zm-1.616-.965H13.17L6.428 8.534h14.409l5.28-4.268z" })));
|
||||
//# sourceMappingURL=D6.js.map
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const D8 = (props) => (React.createElement("svg", Object.assign({ width: "32", height: "32", fill: "currentColor", title: "D8" }, props),
|
||||
React.createElement("path", { d: "M16 .5l-13 8v13l13 10 13-10v-13l-13-8zm11 15.9L20 5l7 4.5v6.9zM16 2.5l.1.1 11.1 17.9H4.8L15.9 2.6l.1-.1zM12 5L5 16.4V9.5L12 5zM6.9 22.5h18.2L16 29l-9.1-6.5z" })));
|
||||
//# sourceMappingURL=D8.js.map
|
||||
Generated
Vendored
+31
@@ -0,0 +1,31 @@
|
||||
var __rest = (this && this.__rest) || function (s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||
t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
import React from 'react';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
const useStyles = makeStyles()((theme, { alignItems, flexDirection, justifyContent }) => ({
|
||||
Flex: {
|
||||
display: 'flex',
|
||||
alignItems: alignItems,
|
||||
flexDirection: flexDirection,
|
||||
justifyContent: justifyContent,
|
||||
},
|
||||
}));
|
||||
export const Flex = (_a) => {
|
||||
var { className, tagName: Tag = 'div', alignItems = 'center', flexDirection = 'row', justifyContent = 'center', children } = _a, props = __rest(_a, ["className", "tagName", "alignItems", "flexDirection", "justifyContent", "children"]);
|
||||
const { classes, cx } = useStyles({
|
||||
alignItems,
|
||||
flexDirection,
|
||||
justifyContent,
|
||||
});
|
||||
return (React.createElement(Tag, Object.assign({}, props, { className: cx(className, classes.Flex) }), children));
|
||||
};
|
||||
//# sourceMappingURL=Flex.js.map
|
||||
Generated
Vendored
+123
@@ -0,0 +1,123 @@
|
||||
import createGenerateClassName from '@mui/styles/createGenerateClassName';
|
||||
import StylesProvider from '@mui/styles/StylesProvider';
|
||||
import React, { useContext, useEffect } from 'react';
|
||||
import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
import { Flex } from '../Flex';
|
||||
import { GameLogContext } from '../GameLogContextProvider';
|
||||
import { GameLogEntry } from '../GameLogEntry';
|
||||
import { GameLogHeader } from '../GameLogHeader';
|
||||
import { Sentinel } from '../Sentinel';
|
||||
import { EmptyStateIcon } from './images/EmptyStateIcon';
|
||||
import { DiceRollActionTypes } from '@dndbeyond/pocket-dimension-dice/constants';
|
||||
const generateClassName = createGenerateClassName({
|
||||
productionPrefix: 'gl',
|
||||
});
|
||||
const useStyles = makeStyles()(({ gameLog: { fontRoboto } }) => ({
|
||||
GameLogContainer: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
minWidth: '288px',
|
||||
maxWidth: '512px', // or 64 8pt units
|
||||
},
|
||||
GameLog: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexFlow: 'column-reverse nowrap',
|
||||
overscrollBehavior: 'container',
|
||||
overflow: 'auto',
|
||||
},
|
||||
GameLogEntries: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexFlow: 'column-reverse nowrap',
|
||||
transform: 'translateZ(0)',
|
||||
padding: '0 10px',
|
||||
listStyleType: 'none',
|
||||
'& > li:last-child': {
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
top: '30vh',
|
||||
},
|
||||
},
|
||||
ZeroStateContainer: {
|
||||
alignSelf: 'center',
|
||||
maxWidth: '75%',
|
||||
height: '100%',
|
||||
},
|
||||
ZeroStateTitle: {
|
||||
marginTop: '40px',
|
||||
fontFamily: fontRoboto,
|
||||
fontWeight: 900,
|
||||
fontSize: '1.125rem',
|
||||
},
|
||||
ZeroStateDescription: {
|
||||
marginTop: '10px',
|
||||
fontFamily: fontRoboto,
|
||||
fontWeight: 400,
|
||||
fontSize: '0.875rem',
|
||||
lineHeight: 1.57,
|
||||
textAlign: 'center',
|
||||
},
|
||||
}));
|
||||
export const GameLog = ({ isVisible }) => {
|
||||
const [{ entityId, fetchHistory, messages }] = useContext(GameLogContext);
|
||||
const [gameLogRef, startRef] = useInfiniteScroll(fetchHistory);
|
||||
const { classes, cx } = useStyles();
|
||||
const latestMessage = messages.entities[messages.ids[0]];
|
||||
const isPending = latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.eventType.includes('pending');
|
||||
const isSelf = (latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.entityId) === entityId;
|
||||
useEffect(() => {
|
||||
if (!gameLogRef.current) {
|
||||
return;
|
||||
}
|
||||
let immediateId;
|
||||
if (isPending && isSelf) {
|
||||
immediateId = setImmediate(() => {
|
||||
var _a;
|
||||
(_a = gameLogRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
|
||||
behavior: 'smooth',
|
||||
top: 0,
|
||||
});
|
||||
});
|
||||
}
|
||||
return () => {
|
||||
clearImmediate(immediateId);
|
||||
};
|
||||
}, [gameLogRef, isPending, isSelf, messages.ids.length]);
|
||||
if (!isVisible)
|
||||
return null;
|
||||
/**
|
||||
* we need a static class name so that importing apps (like character tools)
|
||||
* can target the game-log without targeting CSS module mangled (or hashed)
|
||||
* class names
|
||||
*
|
||||
* n.b. `glc` is a kind of namespace for `game-log-client` (`character-tools`
|
||||
* uses a similar `ct` prefix), `game-log` is itself, I believe the "block" in
|
||||
* BEM, so it doesn't get an element (like `root` or something), based on the
|
||||
* below-linked cheatsheet
|
||||
*
|
||||
* @see https://9elements.com/bem-cheat-sheet/
|
||||
*/
|
||||
return (
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore old type error
|
||||
React.createElement(StylesProvider, { generateClassName: generateClassName },
|
||||
React.createElement(Flex, { flexDirection: "column", className: cx('glc-game-log', classes.GameLogContainer) },
|
||||
React.createElement(GameLogHeader, { headerName: "Game Log" }),
|
||||
React.createElement("div", { className: classes.GameLog, ref: gameLogRef }, messages.ids.length > 0 ? (React.createElement("ol", { className: classes.GameLogEntries },
|
||||
messages.ids
|
||||
.filter((id) => {
|
||||
var _a;
|
||||
return ((_a = messages.entities[id]) === null || _a === void 0 ? void 0 : _a.eventType) !==
|
||||
DiceRollActionTypes.Deferred;
|
||||
})
|
||||
.map((messageId) => (React.createElement(GameLogEntry, { key: messageId, messageId: messageId }))),
|
||||
React.createElement("li", null,
|
||||
React.createElement(Sentinel, { ref: startRef })))) : (React.createElement(Flex, { flexDirection: "column", className: classes.ZeroStateContainer },
|
||||
React.createElement(EmptyStateIcon, null),
|
||||
React.createElement("div", { className: classes.ZeroStateTitle }, "No Game Activity Yet"),
|
||||
React.createElement("div", { className: classes.ZeroStateDescription }, "There are no rolls for your campaign. When you roll, it will show up here for everyone in your campaign.")))))));
|
||||
};
|
||||
//# sourceMappingURL=GameLog.js.map
|
||||
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
export const EmptyStateIcon = (props) => (React.createElement("svg", Object.assign({ width: "80", height: "89", fill: "none" }, props),
|
||||
React.createElement("circle", { cx: "40", cy: "40", r: "39.5", fill: "#F5F8FA", stroke: "#ADB7BF" }),
|
||||
React.createElement("path", { d: "M40 15.625L17.25 27.813v24.7L40 64.7l21.125-11.375 1.625-.975V27.812L40 15.626zm-3.25 13.488l-9.587 14.3-6.013-13 15.6-1.3zm-6.5 15.762L40 30.087l9.75 14.788h-19.5zm22.425-1.462l-9.425-14.3 15.438 1.137-6.013 13.163zm-11.05-23.238l12.025 6.5-12.025-.975v-5.525zm-3.25 0V25.7l-12.025.975 12.025-6.5zM20.5 36.425l4.387 9.75-4.387 2.6v-12.35zm1.625 15.113l4.387-2.6 7.15 8.937-11.537-6.337zm8.125-3.413h17.875L40 60.313l-9.75-12.188zm16.087 9.587l7.15-8.937 4.388 2.6-11.538 6.337zm9.1-11.375l-.325-.162 4.388-9.75v12.35l-4.063-2.438z", fill: "#1B9AF0" }),
|
||||
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M58 60l1.155 23.471 5.615-5.079L70.086 88l2.607-1.443 2.609-1.442-5.316-9.608 7.286-2.06L58 60z", fill: "#fff" }),
|
||||
React.createElement("path", { clipRule: "evenodd", d: "M58 60l1.155 23.471 5.615-5.079L70.086 88l2.607-1.443 2.609-1.442-5.316-9.608 7.286-2.06L58 60z", stroke: "#A7B2BE", strokeLinecap: "round", strokeLinejoin: "round" })));
|
||||
//# sourceMappingURL=EmptyStateIcon.js.map
|
||||
Generated
Vendored
+36
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import ListTimeline from '@dndbeyond/fontawesome-cache/svgs/light/list-timeline.svg';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
import { GameLogNotificationWrapper, NotificationPosition, } from '../GameLogNotificationWrapper';
|
||||
const useStyles = makeStyles()(({ gameLog: { fontRobotoCondensed } }) => ({
|
||||
'gamelog-button': {
|
||||
backgroundColor: '#fff',
|
||||
border: '2px solid #000',
|
||||
borderRadius: '3px',
|
||||
padding: '5px 16px 5px 16px',
|
||||
fontFamily: fontRobotoCondensed,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '13px',
|
||||
lineHeight: '15px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
textAlign: 'center',
|
||||
textTransform: 'uppercase',
|
||||
color: '#000',
|
||||
},
|
||||
'gamelog-button__icon': {
|
||||
margin: '4px 4px 4px 0',
|
||||
width: '18px',
|
||||
height: '18px',
|
||||
padding: '1px 0',
|
||||
},
|
||||
}));
|
||||
export const GameLogButton = ({ onClick, disabled, gameLogIsVisible, notificationOnClick, }) => {
|
||||
const { classes } = useStyles();
|
||||
return (React.createElement(GameLogNotificationWrapper, { themeColor: 'currentColor', gameLogIsOpen: gameLogIsVisible, position: NotificationPosition.TOP, notificationOnClick: notificationOnClick },
|
||||
React.createElement("button", { className: classes['gamelog-button'], onClick: onClick, disabled: disabled },
|
||||
React.createElement(ListTimeline, { className: classes['gamelog-button__icon'] }),
|
||||
"Game Log")));
|
||||
};
|
||||
//# sourceMappingURL=GameLogButton.js.map
|
||||
Generated
Vendored
+389
@@ -0,0 +1,389 @@
|
||||
import { byDateTime, isValidGameId } from '@dndbeyond/message-broker-lib';
|
||||
import createCache from '@emotion/cache';
|
||||
import { CacheProvider } from '@emotion/react';
|
||||
import { DiceActionTypes, DiceVisibilities, } from '@dndbeyond/pocket-dimension-dice/constants';
|
||||
import { useUserDiceDataStore } from '@dndbeyond/pocket-dimension-dice/hooks/useUserDiceDataStore';
|
||||
import { ThemeProvider } from '@mui/material/styles';
|
||||
import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef, } from 'react';
|
||||
import { getTssDefaultEmotionCache, TssCacheProvider } from 'tss-react';
|
||||
import { useActiveCampaign } from '../../hooks/useActiveCampaign';
|
||||
import { useActiveCharacters } from '../../hooks/useActiveCharacters';
|
||||
import { useAwaitMessageBroker } from '../../hooks/useAwaitMessageBroker';
|
||||
import { useDiceFamilies } from '../../hooks/useDiceFamilies';
|
||||
import { useFetchHistory } from '../../hooks/useFetchHistory';
|
||||
import { useMessageBroker } from '../../hooks/useMessageBroker';
|
||||
import { darkTheme, lightTheme } from '../../shared/themes';
|
||||
import { useActivePlayers } from '../../hooks/useActivePlayers';
|
||||
/**
|
||||
* ids used with `MessageTargetOptions` to maintain a proper display order
|
||||
* other options, such as other non-dm users, would start with 4
|
||||
*/
|
||||
export var MessageTargetOptionOrder;
|
||||
(function (MessageTargetOptionOrder) {
|
||||
MessageTargetOptionOrder[MessageTargetOptionOrder["Game"] = 0] = "Game";
|
||||
MessageTargetOptionOrder[MessageTargetOptionOrder["Self"] = 1] = "Self";
|
||||
MessageTargetOptionOrder[MessageTargetOptionOrder["Dm"] = 2] = "Dm";
|
||||
})(MessageTargetOptionOrder || (MessageTargetOptionOrder = {}));
|
||||
var DiceRollActionType;
|
||||
(function (DiceRollActionType) {
|
||||
DiceRollActionType["Pending"] = "dice/roll/pending";
|
||||
DiceRollActionType["Rejected"] = "dice/roll/rejected";
|
||||
DiceRollActionType["Fulfilled"] = "dice/roll/fulfilled";
|
||||
DiceRollActionType["Deferred"] = "dice/roll/deferred";
|
||||
})(DiceRollActionType || (DiceRollActionType = {}));
|
||||
const replaceMessageBrokerGameIdActionType = 'replace/messageBroker/gameId';
|
||||
const fetchActiveCharactersActionType = 'fetch/activeCharacters';
|
||||
const fetchActivePlayersActionType = 'fetch/activePlayers';
|
||||
const fetchActiveCampaignActionType = 'fetch/activeCampaign';
|
||||
const setFetchHistoryActionType = 'set/fetchHistory';
|
||||
const fetchDiceFamilyInfoActionType = 'fetch/diceFamilyInfo';
|
||||
const addMessageTargetOptionActionType = 'add/messageTargetOption';
|
||||
const setUserIdActionType = 'set/userId';
|
||||
export const toggleMessageExpandedActionType = 'update/toggleMessageExpanded';
|
||||
export const setDefaultMessageTargetOptionActionType = 'set/defaultMessageTargetOption';
|
||||
const diceRollActionTypes = [
|
||||
DiceRollActionType.Pending,
|
||||
DiceRollActionType.Rejected,
|
||||
DiceRollActionType.Fulfilled,
|
||||
DiceRollActionType.Deferred,
|
||||
];
|
||||
// had a really hard time not naming this `isNotJustAnyMessage`, idk if all of
|
||||
// this is necessary but I wanted to start out "thorough"
|
||||
export const isMessage = (message) => 'entityId' in message &&
|
||||
'entityType' in message &&
|
||||
'persist' in message &&
|
||||
'messageScope' in message &&
|
||||
'messageTarget' in message &&
|
||||
'data' in message;
|
||||
const isDiceRollActionType = (t) => diceRollActionTypes.includes(t);
|
||||
const isReplaceMessageBrokerGameIdActionType = (t) => t === replaceMessageBrokerGameIdActionType;
|
||||
const toRollId = ({ data: { rollId } }) => rollId;
|
||||
const addMessageTargetOption = (option, state) => {
|
||||
state.messageTargetOptions.entities[option.id] = option;
|
||||
// keep the items in their proper display order
|
||||
const sortedIds = Object.keys(state.messageTargetOptions.entities).sort();
|
||||
return Object.assign(Object.assign({}, state), { messageTargetOptions: Object.assign(Object.assign({}, state.messageTargetOptions), { ids: sortedIds }) });
|
||||
};
|
||||
/**
|
||||
* n.b. `messages` state is keyed off of `message.data.rollId` (not
|
||||
* `message.id`) so that a fulfilled roll resolves a pending roll in line
|
||||
*
|
||||
* each message gets a unique uuid, and we simply overwrite the pending message
|
||||
* with the fulfilled one
|
||||
*
|
||||
* the fulfilled dice roll almost certainly has an update `dateTime` so we have
|
||||
* to resort on both pending and fulfilled messages
|
||||
*/
|
||||
const mergeDiceRollMessage = (message, state) => {
|
||||
var _a, _b;
|
||||
// n.b. mutates the `entities` object, but doesn't update `ids`
|
||||
state.messages.entities[message.data.rollId] = Object.assign(Object.assign({}, message), {
|
||||
/**
|
||||
* prefer an existing (`/pending`) message's `dateTime` to avoid the case:
|
||||
*
|
||||
* 1. `/pending` message a, sort order is: [a]
|
||||
* 2. `/pending` message b, sort order is: [a, b]
|
||||
* 3. `/fulfilled` message a, sort order is: [b, a] // changes!
|
||||
* 4. `/fulfilled` message b, sort order is: [a, b] // changes again!
|
||||
*
|
||||
* messages from the server are already `/fulfilled` and should never update
|
||||
*/
|
||||
dateTime: (_b = (_a = state.messages.entities[message.data.rollId]) === null || _a === void 0 ? void 0 : _a.dateTime) !== null && _b !== void 0 ? _b : message.dateTime });
|
||||
// ... because we want a new array of ids in the right sort order
|
||||
const sortedIds = Object.values(state.messages.entities)
|
||||
.sort(byDateTime)
|
||||
.map(toRollId);
|
||||
// n.b. there used to be an `areArraysEqual` check here that turned out to be
|
||||
// a little too good at it's job of preventing re-renders
|
||||
//
|
||||
// TODO: look again at performance here, maybe Redux makes sense at this point
|
||||
return Object.assign(Object.assign({}, state), { messages: Object.assign(Object.assign({}, state.messages), { ids: sortedIds }) });
|
||||
};
|
||||
const removeDiceRollMessage = (rollId, state) => {
|
||||
const messages = Object.assign({}, state.messages);
|
||||
let didMutate = false;
|
||||
if (rollId in messages.entities) {
|
||||
delete messages.entities[rollId];
|
||||
didMutate = true;
|
||||
}
|
||||
if (didMutate) {
|
||||
messages.ids = messages.ids.filter((id) => id in messages.entities);
|
||||
return Object.assign(Object.assign({}, state), { messages });
|
||||
}
|
||||
return state;
|
||||
};
|
||||
const toggleMessageExpanded = (expandedMessage, state) => {
|
||||
return Object.assign(Object.assign({}, state), { expandedMessages: state.expandedMessages.some((item) => item.messageId === expandedMessage.messageId)
|
||||
? state.expandedMessages.filter((item) => item.messageId !== expandedMessage.messageId)
|
||||
: [...state.expandedMessages, expandedMessage] });
|
||||
};
|
||||
const expandNewestMessage = (messageId, state) => {
|
||||
if (state.messages.ids[0] === messageId) {
|
||||
// this will collapse old non-user-expanded messages
|
||||
const userExpandedMessages = state.expandedMessages.filter((item) => item.wasExpandedByUser);
|
||||
return Object.assign(Object.assign({}, state), { expandedMessages: [
|
||||
...userExpandedMessages,
|
||||
{ messageId, wasExpandedByUser: false },
|
||||
] });
|
||||
}
|
||||
else {
|
||||
return state;
|
||||
}
|
||||
};
|
||||
const gameLogReducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case DiceRollActionType.Pending:
|
||||
return expandNewestMessage(action.payload.data.rollId, mergeDiceRollMessage(action.payload, state));
|
||||
case DiceRollActionType.Rejected:
|
||||
return removeDiceRollMessage(action.payload.data.rollId, state);
|
||||
case DiceRollActionType.Fulfilled:
|
||||
return expandNewestMessage(action.payload.data.rollId, mergeDiceRollMessage(action.payload, state));
|
||||
case DiceRollActionType.Deferred:
|
||||
// don't do anything, the worker will post back a fulfilled message
|
||||
return state;
|
||||
case fetchActiveCharactersActionType:
|
||||
return Object.assign(Object.assign({}, state), { activeCharacters: {
|
||||
ids: action.payload.map(({ id }) => id.toString()),
|
||||
entities: action.payload.reduce((acc, activeCharacter) => {
|
||||
acc[activeCharacter.id.toString()] = activeCharacter;
|
||||
return acc;
|
||||
}, {}),
|
||||
} });
|
||||
case fetchActiveCampaignActionType:
|
||||
return Object.assign(Object.assign({}, state), { activeCampaign: action.payload });
|
||||
case fetchActivePlayersActionType:
|
||||
return Object.assign(Object.assign({}, state), { activePlayers: action.payload.reduce((acc, activePlayer) => {
|
||||
const id = activePlayer.id.toString();
|
||||
acc.ids.push(id);
|
||||
acc.entities[id] = activePlayer;
|
||||
return acc;
|
||||
}, {
|
||||
ids: [],
|
||||
entities: {},
|
||||
}) });
|
||||
case setFetchHistoryActionType:
|
||||
return Object.assign(Object.assign({}, state), { fetchHistory: action.payload });
|
||||
case fetchDiceFamilyInfoActionType:
|
||||
return Object.assign(Object.assign({}, state), { diceFamilies: {
|
||||
ids: action.payload.map(({ id }) => id.toString()),
|
||||
entities: action.payload.reduce((acc, diceFamilyInfo) => {
|
||||
acc[diceFamilyInfo.id.toString()] = diceFamilyInfo;
|
||||
return acc;
|
||||
}, {}),
|
||||
} });
|
||||
case toggleMessageExpandedActionType:
|
||||
return toggleMessageExpanded(action.payload, state);
|
||||
case replaceMessageBrokerGameIdActionType:
|
||||
return Object.assign(Object.assign({}, state), { messages: {
|
||||
ids: [],
|
||||
entities: {},
|
||||
}, expandedMessages: [] });
|
||||
case setDefaultMessageTargetOptionActionType:
|
||||
return Object.assign(Object.assign({}, state), { defaultMessageTargetOption: state.messageTargetOptions.entities[action.payload] });
|
||||
case addMessageTargetOptionActionType:
|
||||
return addMessageTargetOption(action.payload, state);
|
||||
case setUserIdActionType:
|
||||
return Object.assign(Object.assign({}, state), { userId: action.payload });
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
const gameLogInitialState = {
|
||||
activeCharacters: {
|
||||
ids: [],
|
||||
entities: {},
|
||||
},
|
||||
activePlayers: {
|
||||
ids: [],
|
||||
entities: {},
|
||||
},
|
||||
diceFamilies: {
|
||||
ids: [],
|
||||
entities: {},
|
||||
},
|
||||
messages: {
|
||||
ids: [],
|
||||
entities: {},
|
||||
},
|
||||
expandedMessages: [],
|
||||
messageTargetOptions: {
|
||||
ids: [],
|
||||
entities: {},
|
||||
},
|
||||
};
|
||||
export const GameLogContext = createContext([gameLogInitialState, () => { }]);
|
||||
const { Provider } = GameLogContext;
|
||||
const muiCache = createCache({
|
||||
key: 'mui',
|
||||
prepend: true,
|
||||
});
|
||||
const DdbThemeProvider = ({ children, theme }) => (
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore old type error
|
||||
React.createElement(CacheProvider, { value: muiCache },
|
||||
React.createElement(TssCacheProvider, { value: getTssDefaultEmotionCache() },
|
||||
React.createElement(ThemeProvider, { theme: theme }, children))));
|
||||
const initialDate = new Date();
|
||||
export const GameLogContextProvider = ({ authUrl, baseUrl, ddbApiUrl, diceServiceUrl, diceThumbnailsUrl, entityId, children, targetingDisabled, darkThemeEnabled, diceWorkerContext, }) => {
|
||||
const [state, dispatch] = useReducer(gameLogReducer, Object.assign(Object.assign({}, gameLogInitialState), { entityId,
|
||||
baseUrl,
|
||||
diceThumbnailsUrl,
|
||||
targetingDisabled }));
|
||||
const chainRef = useRef(Promise.resolve());
|
||||
const mb = useAwaitMessageBroker();
|
||||
const diceWorkerCtx = useContext(diceWorkerContext ||
|
||||
createContext({}));
|
||||
useEffect(() => {
|
||||
if (!mb) {
|
||||
return;
|
||||
}
|
||||
dispatch({
|
||||
type: setUserIdActionType,
|
||||
payload: mb.userId,
|
||||
});
|
||||
}, [mb, mb === null || mb === void 0 ? void 0 : mb.userId]);
|
||||
useEffect(() => {
|
||||
if (!(mb && isValidGameId(mb.gameId))) {
|
||||
return;
|
||||
}
|
||||
if (mb.gameId) {
|
||||
dispatch({
|
||||
type: addMessageTargetOptionActionType,
|
||||
payload: {
|
||||
id: MessageTargetOptionOrder.Game,
|
||||
displayValue: 'Everyone',
|
||||
messageScope: 'gameId',
|
||||
messageTarget: mb.gameId,
|
||||
},
|
||||
});
|
||||
}
|
||||
dispatch({
|
||||
type: addMessageTargetOptionActionType,
|
||||
payload: {
|
||||
id: MessageTargetOptionOrder.Self,
|
||||
displayValue: 'Self',
|
||||
messageScope: 'userId',
|
||||
messageTarget: mb.userId,
|
||||
},
|
||||
});
|
||||
// initialize with game as the default
|
||||
if (!state.defaultMessageTargetOption) {
|
||||
dispatch({
|
||||
type: setDefaultMessageTargetOptionActionType,
|
||||
payload: mb.gameId
|
||||
? MessageTargetOptionOrder.Game
|
||||
: MessageTargetOptionOrder.Self,
|
||||
});
|
||||
}
|
||||
}, [mb, mb === null || mb === void 0 ? void 0 : mb.userId, mb === null || mb === void 0 ? void 0 : mb.gameId, state.defaultMessageTargetOption]);
|
||||
useEffect(() => {
|
||||
var _a, _b;
|
||||
// we only want to display the dm target option if the user is not the dm
|
||||
const dmId = (_b = (_a = state === null || state === void 0 ? void 0 : state.activeCampaign) === null || _a === void 0 ? void 0 : _a.dmId) === null || _b === void 0 ? void 0 : _b.toString();
|
||||
if (!(mb && dmId && mb.userId !== dmId)) {
|
||||
return;
|
||||
}
|
||||
dispatch({
|
||||
type: addMessageTargetOptionActionType,
|
||||
payload: {
|
||||
id: MessageTargetOptionOrder.Dm,
|
||||
displayValue: 'Dungeon Master',
|
||||
messageScope: 'userId',
|
||||
messageTarget: dmId,
|
||||
},
|
||||
});
|
||||
}, [mb, mb === null || mb === void 0 ? void 0 : mb.userId, state.activeCampaign]);
|
||||
useMessageBroker(useCallback((message) => {
|
||||
if (!(isMessage(message) && isDiceRollActionType(message.eventType))) {
|
||||
if (isReplaceMessageBrokerGameIdActionType(message.eventType)) {
|
||||
dispatch({
|
||||
type: message.eventType,
|
||||
payload: null,
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
chainRef.current = chainRef.current.then(() => new Promise((resolve) => {
|
||||
setImmediate(() => {
|
||||
dispatch({
|
||||
type: message.eventType,
|
||||
payload: message,
|
||||
});
|
||||
resolve();
|
||||
});
|
||||
}));
|
||||
}, []));
|
||||
useActiveCharacters(authUrl, ddbApiUrl, useCallback((activeCharacters) => dispatch({
|
||||
type: fetchActiveCharactersActionType,
|
||||
payload: activeCharacters,
|
||||
}), []));
|
||||
useActiveCampaign(authUrl, ddbApiUrl, useCallback((activeCampaign) => {
|
||||
var _a, _b;
|
||||
return dispatch({
|
||||
type: fetchActiveCampaignActionType,
|
||||
payload: {
|
||||
id: activeCampaign.id,
|
||||
name: activeCampaign.name,
|
||||
dateCreated: activeCampaign.dateCreated,
|
||||
dmUsername: activeCampaign.dmDisplayName,
|
||||
dmId: activeCampaign.dmId,
|
||||
playerCount: (_b = (_a = activeCampaign.activePlayers) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0,
|
||||
},
|
||||
});
|
||||
}, []));
|
||||
useActivePlayers(authUrl, ddbApiUrl, useCallback(({ activePlayers }) => dispatch({
|
||||
type: fetchActivePlayersActionType,
|
||||
payload: activePlayers,
|
||||
}), []));
|
||||
useMessageBroker(useCallback((message) => {
|
||||
var _a, _b;
|
||||
const diceVisibility = (_a = useUserDiceDataStore
|
||||
.getState()
|
||||
.getUserDiceData(Number(mb === null || mb === void 0 ? void 0 : mb.userId))) === null || _a === void 0 ? void 0 : _a.settings.visibility;
|
||||
if ((diceWorkerCtx === null || diceWorkerCtx === void 0 ? void 0 : diceWorkerCtx.isPddReady) &&
|
||||
!document.hidden &&
|
||||
isMessage(message) &&
|
||||
new Date(Number(message.dateTime)) > initialDate &&
|
||||
message.eventType === DiceRollActionType.Deferred &&
|
||||
(diceVisibility === DiceVisibilities.Shared ||
|
||||
(diceVisibility === DiceVisibilities.Self &&
|
||||
message.userId === String(mb === null || mb === void 0 ? void 0 : mb.userId)))) {
|
||||
(_b = diceWorkerCtx === null || diceWorkerCtx === void 0 ? void 0 : diceWorkerCtx.physicsWorker) === null || _b === void 0 ? void 0 : _b.postMessage({
|
||||
type: DiceRollActionType.Deferred,
|
||||
payload: message,
|
||||
});
|
||||
}
|
||||
}, [diceWorkerCtx === null || diceWorkerCtx === void 0 ? void 0 : diceWorkerCtx.physicsWorker, diceWorkerCtx === null || diceWorkerCtx === void 0 ? void 0 : diceWorkerCtx.isPddReady, mb === null || mb === void 0 ? void 0 : mb.userId]));
|
||||
useMessageBroker(useCallback((message) => {
|
||||
var _a;
|
||||
if (isMessage(message) &&
|
||||
new Date(Number(message.dateTime)) > initialDate &&
|
||||
message.eventType === DiceActionTypes.SetUpdate) {
|
||||
if (message.userId === (mb === null || mb === void 0 ? void 0 : mb.userId)) {
|
||||
const currentUserDiceData = useUserDiceDataStore
|
||||
.getState()
|
||||
.getUserDiceData(Number(mb === null || mb === void 0 ? void 0 : mb.userId));
|
||||
if (currentUserDiceData) {
|
||||
useUserDiceDataStore
|
||||
.getState()
|
||||
.setUserDiceData(Number(mb === null || mb === void 0 ? void 0 : mb.userId), Object.assign(Object.assign({}, currentUserDiceData), { setId: message.data }));
|
||||
}
|
||||
}
|
||||
(_a = diceWorkerCtx === null || diceWorkerCtx === void 0 ? void 0 : diceWorkerCtx.renderedWorker) === null || _a === void 0 ? void 0 : _a.postMessage({
|
||||
type: DiceActionTypes.SetUpdate,
|
||||
payload: message.data,
|
||||
});
|
||||
}
|
||||
}, [diceWorkerCtx === null || diceWorkerCtx === void 0 ? void 0 : diceWorkerCtx.renderedWorker, mb === null || mb === void 0 ? void 0 : mb.userId]));
|
||||
useFetchHistory(useCallback((fetchHistory) => dispatch({
|
||||
type: 'set/fetchHistory',
|
||||
payload: fetchHistory,
|
||||
}), []));
|
||||
useDiceFamilies(diceServiceUrl, useCallback((diceFamilies) => dispatch({
|
||||
type: fetchDiceFamilyInfoActionType,
|
||||
payload: diceFamilies,
|
||||
}), []));
|
||||
return (React.createElement(Provider, { value: [state, dispatch] },
|
||||
React.createElement(DdbThemeProvider, { theme: darkThemeEnabled ? darkTheme : lightTheme }, children)));
|
||||
};
|
||||
//# sourceMappingURL=GameLogContextProvider.js.map
|
||||
Generated
Vendored
+117
@@ -0,0 +1,117 @@
|
||||
import React, { useContext } from 'react';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
import { Avatar, ddbAvatarUrl, fallbackAvatarUrl } from '../Avatar';
|
||||
import { DiceMessageWrapper } from '../DiceMessageWrapper';
|
||||
import { Flex } from '../Flex';
|
||||
import { GameLogContext } from '../GameLogContextProvider';
|
||||
import { TimeAgo } from '../TimeAgo';
|
||||
import { getMessageName } from '../../helpers/getMessageName';
|
||||
const useStyles = makeStyles()(({ gameLog: { fontRoboto, gameLogEntryAvatarMargin, gameLogEntryAvatarSize, glGray, gray5, messageBackgroundOther, messageBackgroundPending, messageBackgroundSelf, messageBorderOther, messageBorderPending, messageBorderSelf, messageColorOther, messageColorPending, messageColorSelf, }, }, _params, classes) => ({
|
||||
GameLogEntry: {
|
||||
width: '100%',
|
||||
marginBottom: '10px',
|
||||
// This specifically addresses a height calculation issue in Safari
|
||||
flex: '0 0 auto',
|
||||
// /**
|
||||
// * n.b. these properties are pretty new and probably only help in Chromium-
|
||||
// * based browsers until Firefox & Safari decide to implement
|
||||
// *
|
||||
// * @see https://youtu.be/FFA-v-CIxJQ
|
||||
// * @see https://web.dev/content-visibility/
|
||||
// */
|
||||
// contentVisibility: 'auto',
|
||||
// containIntrinsicSize: '206.5px',
|
||||
// contain: 'layout style paint',
|
||||
[`&.${classes.Self}`]: {
|
||||
width: `calc(100% - (${gameLogEntryAvatarSize} + ${gameLogEntryAvatarMargin}))`,
|
||||
alignSelf: 'flex-end',
|
||||
},
|
||||
},
|
||||
MessageContainer: {
|
||||
width: '100%',
|
||||
minWidth: 0,
|
||||
},
|
||||
Message: {
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
padding: '8px 16px',
|
||||
[`&.${classes.Self}`]: {
|
||||
color: messageColorSelf,
|
||||
background: messageBackgroundSelf,
|
||||
border: `1px solid ${messageBorderSelf}`,
|
||||
borderRadius: '0.75rem 0.75rem 0 0.75rem',
|
||||
},
|
||||
[`&.${classes.Other}`]: {
|
||||
color: messageColorOther,
|
||||
background: messageBackgroundOther,
|
||||
border: `1px solid ${messageBorderOther}`,
|
||||
borderRadius: '0.75rem 0.75rem 0.75rem 0',
|
||||
},
|
||||
[`&.${classes.Collapsed}`]: {
|
||||
padding: '8px 10px',
|
||||
},
|
||||
[`&.${classes.Pending}`]: {
|
||||
color: messageColorPending,
|
||||
background: messageBackgroundPending,
|
||||
border: `1px solid ${messageBorderPending}`,
|
||||
},
|
||||
},
|
||||
// TODO: Duplicated in DiceMessage
|
||||
Line: {
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
width: '100%',
|
||||
fontFamily: fontRoboto,
|
||||
fontWeight: 'bold',
|
||||
color: glGray,
|
||||
},
|
||||
Sender: {
|
||||
fontSize: '0.8rem',
|
||||
},
|
||||
TimeAgo: {
|
||||
alignSelf: 'flex-end',
|
||||
marginTop: '4px',
|
||||
fontFamily: fontRoboto,
|
||||
fontWeight: 'bold',
|
||||
fontSize: '0.7rem',
|
||||
color: gray5,
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
Self: {},
|
||||
Other: {},
|
||||
Collapsed: {},
|
||||
Pending: {},
|
||||
}));
|
||||
export const GameLogEntry = ({ messageId }) => {
|
||||
var _a, _b;
|
||||
const [{ activeCampaign, activeCharacters, activePlayers, entityId, messages, expandedMessages, },] = useContext(GameLogContext);
|
||||
const { classes, cx } = useStyles(null);
|
||||
const message = messages.entities[messageId];
|
||||
if (!message) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
throw new Error([
|
||||
`message id ${messageId} has no associated entity, expected a`,
|
||||
`'Message' but got ${message}`,
|
||||
].join(' '));
|
||||
}
|
||||
return null;
|
||||
}
|
||||
const isMapActivateMessage = message.eventType === 'map/activate/fulfilled';
|
||||
const isCollapsed = !expandedMessages.some((item) => item.messageId === messageId);
|
||||
const character = activeCharacters.entities[message.entityId];
|
||||
const avatarUrl = isMapActivateMessage
|
||||
? ddbAvatarUrl
|
||||
: (_b = (_a = message.data.context) === null || _a === void 0 ? void 0 : _a.avatarUrl) !== null && _b !== void 0 ? _b : ((character === null || character === void 0 ? void 0 : character.avatarUrl) || fallbackAvatarUrl);
|
||||
const name = getMessageName(message, activePlayers.entities, activeCharacters.entities, activeCampaign === null || activeCampaign === void 0 ? void 0 : activeCampaign.dmId);
|
||||
const isPending = message.eventType.includes('pending');
|
||||
const isSelf = message.entityId === entityId;
|
||||
return (React.createElement(Flex, { tagName: "li", alignItems: "flex-end", justifyContent: "flex-start", key: message.id, className: cx(classes.GameLogEntry, isSelf ? classes.Self : classes.Other) },
|
||||
!isSelf && React.createElement(Avatar, { avatarUrl: avatarUrl, name: name }),
|
||||
React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start", className: classes.MessageContainer },
|
||||
React.createElement(Flex, { className: classes.Line, justifyContent: "space-between" },
|
||||
React.createElement("span", { className: classes.Sender }, name)),
|
||||
React.createElement(Flex, { className: cx(classes.Message, isCollapsed && classes.Collapsed, isPending && classes.Pending, isSelf ? classes.Self : classes.Other) }, isMapActivateMessage ? (React.createElement("span", null, "Your game is LIVE!")) : (React.createElement(DiceMessageWrapper, { message: message, isCollapsed: isCollapsed, isSelf: isSelf }))),
|
||||
React.createElement(TimeAgo, { className: classes.TimeAgo, dateTime: parseInt(message.dateTime, 10) }))));
|
||||
};
|
||||
//# sourceMappingURL=GameLogEntry.js.map
|
||||
Generated
Vendored
+135
@@ -0,0 +1,135 @@
|
||||
import Button from '@mui/material/Button';
|
||||
import ListItemIcon from '@mui/material/ListItemIcon';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import React, { useContext } from 'react';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
import { Flex } from '../Flex';
|
||||
import { GameLogContext } from '../GameLogContextProvider';
|
||||
import { ArrowDownIcon, ArrowUpIcon, CheckIcon } from '../icons';
|
||||
import { TargetIcon } from './TargetIcon';
|
||||
import { useDiceRollPrivacyStore } from '@dndbeyond/pocket-dimension-dice/hooks/useDiceRollPrivacyStore';
|
||||
import { RollTos } from '@dndbeyond/pocket-dimension-dice/constants';
|
||||
const useStyles = makeStyles()(({ gameLog: { fontRoboto, fontRobotoCondensed }, palette }) => ({
|
||||
Button: {
|
||||
'&.MuiButton-root': {
|
||||
position: 'relative',
|
||||
top: '0px',
|
||||
left: '13px',
|
||||
background: '#ffffff',
|
||||
height: '32px',
|
||||
border: '1px solid #ffffff',
|
||||
'&:hover': {
|
||||
background: '#f5f8fa',
|
||||
border: '1px solid #ced9e0',
|
||||
boxSizing: 'border-box',
|
||||
borderRadius: '2px',
|
||||
},
|
||||
'&:focus': {
|
||||
outlineWidth: '0px !important',
|
||||
},
|
||||
},
|
||||
'&.MuiButton-text': {
|
||||
fontFamily: 'Roboto',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 500,
|
||||
fontSize: '14px',
|
||||
lineHeight: '40px',
|
||||
color: '#1c1d1e',
|
||||
textTransform: 'none',
|
||||
},
|
||||
},
|
||||
menuPaper: {
|
||||
border: '1px solid #ced9e0',
|
||||
background: '#ffffff',
|
||||
boxSizing: 'border-box',
|
||||
borderRadius: '2px',
|
||||
},
|
||||
menuItemRoot: {
|
||||
height: '44px',
|
||||
display: 'flex !important',
|
||||
'&:focus': {
|
||||
outlineWidth: '0px !important',
|
||||
},
|
||||
},
|
||||
listItemTextRoot: {
|
||||
width: '105px',
|
||||
fontFamily: 'Roboto',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 500,
|
||||
fontSize: '14px',
|
||||
lineHeight: '40px',
|
||||
color: palette.text.primary,
|
||||
alignItems: 'center',
|
||||
},
|
||||
listItemIconRoot: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
Title: {
|
||||
fontFamily: fontRobotoCondensed,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '18px',
|
||||
},
|
||||
SendToLabel: {
|
||||
fontFamily: fontRoboto,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '11px',
|
||||
lineHeight: '13px',
|
||||
alignItems: 'center',
|
||||
letterSpacing: '1px',
|
||||
textTransform: 'uppercase',
|
||||
color: '#6f7478',
|
||||
},
|
||||
Container: {
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
},
|
||||
}));
|
||||
export const GameLogHeader = ({ headerName }) => {
|
||||
const [{ messageTargetOptions, targetingDisabled, userId, activeCampaign }] = useContext(GameLogContext);
|
||||
const { classes } = useStyles();
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const diceRollPrivacy = useDiceRollPrivacyStore((state) => state.getDiceRollPrivacy(Number(userId)));
|
||||
const selectedTargetId = (diceRollPrivacy === null || diceRollPrivacy === void 0 ? void 0 : diceRollPrivacy.rollTo) === RollTos.Everyone ? 0 : 1;
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
const hasTargetOptions = Object.values(messageTargetOptions.entities).length > 0;
|
||||
const getRollToText = (rollToOption) => rollToOption === RollTos.Self
|
||||
? String(activeCampaign === null || activeCampaign === void 0 ? void 0 : activeCampaign.dmId) === userId
|
||||
? 'Self'
|
||||
: 'DM'
|
||||
: 'Everyone';
|
||||
return (React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start", className: classes.Container },
|
||||
React.createElement("div", { className: classes.Title }, headerName),
|
||||
!targetingDisabled && activeCampaign && (React.createElement(Flex, null,
|
||||
React.createElement("span", { className: classes.SendToLabel }, "Send To (Default):"),
|
||||
React.createElement(Button, { className: classes.Button, onClick: handleClick, startIcon: React.createElement(TargetIcon, { iconId: selectedTargetId }), endIcon: hasTargetOptions &&
|
||||
(anchorEl ? React.createElement(ArrowUpIcon, null) : React.createElement(ArrowDownIcon, null)), disableRipple: true, disableFocusRipple: true, disabled: !hasTargetOptions }, (diceRollPrivacy === null || diceRollPrivacy === void 0 ? void 0 : diceRollPrivacy.rollTo)
|
||||
? getRollToText(diceRollPrivacy.rollTo)
|
||||
: 'Everyone'),
|
||||
hasTargetOptions && (React.createElement(Menu, { classes: { paper: classes.menuPaper }, anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, style: { zIndex: 60001 }, disableScrollLock: true, elevation: 0, anchorOrigin: {
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right',
|
||||
}, transformOrigin: {
|
||||
vertical: 'top',
|
||||
horizontal: 'left',
|
||||
} }, Object.values(RollTos).map((rollToOption) => (React.createElement(MenuItem, { classes: { root: classes.menuItemRoot }, key: rollToOption, value: rollToOption, onClick: () => useDiceRollPrivacyStore
|
||||
.getState()
|
||||
.setRollToPrivacy(Number(userId)), disableGutters: true, disableRipple: true },
|
||||
React.createElement(ListItemIcon, { classes: { root: classes.listItemIconRoot } }, React.createElement(TargetIcon, { iconId: rollToOption === RollTos.Everyone ? 0 : 1 })),
|
||||
React.createElement(ListItemText, { classes: { root: classes.listItemTextRoot }, disableTypography: true }, getRollToText(rollToOption)),
|
||||
React.createElement(ListItemIcon, { classes: { root: classes.listItemIconRoot } }, (selectedTargetId === 0 &&
|
||||
rollToOption === RollTos.Everyone) ||
|
||||
(selectedTargetId === 1 &&
|
||||
rollToOption === RollTos.Self) ? (React.createElement(CheckIcon, null)) : (React.createElement(React.Fragment, null))))))))))));
|
||||
};
|
||||
//# sourceMappingURL=GameLogHeader.js.map
|
||||
Generated
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
import { DungeonMasterIcon, EveryoneIcon, SelfIcon } from '../icons';
|
||||
const Icons = {
|
||||
'0': React.createElement(EveryoneIcon, null),
|
||||
'1': React.createElement(SelfIcon, null),
|
||||
'2': React.createElement(DungeonMasterIcon, null),
|
||||
};
|
||||
export const TargetIcon = ({ iconId }) => Icons[iconId];
|
||||
//# sourceMappingURL=TargetIcon.js.map
|
||||
Generated
Vendored
+227
@@ -0,0 +1,227 @@
|
||||
import React, { Fragment, useContext, useEffect, useMemo, useRef, useState, } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
import { GameLogContext } from '../GameLogContextProvider';
|
||||
import { GameLogNotificationMessage } from '../GameLogNotificationMessage';
|
||||
import { getMessageName } from '../../helpers/getMessageName';
|
||||
const maskImageSvg = `\
|
||||
<svg xmlns='http://www.w3.org/2000/svg' height='31' width='28'>
|
||||
<path d='M14 0L0 7.5V22.7L14 30.2L27 23.2L28 22.6V7.5L14 0ZM12 8.3L6.1 17.1L2.4 9.1L12 8.3ZM8 18L14 8.9L20 18H8ZM21.8 17.1L16 8.3L25.5 9L21.8 17.1ZM15 2.8L22.4 6.8L15 6.2V2.8ZM13 2.8V6.2L5.6 6.8L13 2.8ZM2 12.8L4.7 18.8L2 20.4V12.8ZM3 22.1L5.7 20.5L10.1 26L3 22.1ZM8 20H19L14 27.5L8 20ZM17.9 25.9L22.3 20.4L25 22L17.9 25.9ZM23.5 18.9L23.3 18.8L26 12.8V20.4L23.5 18.9Z' />
|
||||
</svg>
|
||||
`
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.join('');
|
||||
const useStyles = makeStyles()(({ gameLog: { fontRoboto } }) => ({
|
||||
'@keyframes game-log-notification-bounce-in-down': {
|
||||
from: {
|
||||
WebkitAnimationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
},
|
||||
'60%': {
|
||||
WebkitAnimationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
opacity: 1,
|
||||
WebkitTransform: 'translate3d(0, 25px, 0)',
|
||||
transform: 'translate3d(0, 25px, 0)',
|
||||
},
|
||||
'75%': {
|
||||
WebkitAnimationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
WebkitTransform: 'translate3d(0, -10px, 0)',
|
||||
transform: 'translate3d(0, -10px, 0)',
|
||||
},
|
||||
'90%': {
|
||||
WebkitAnimationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
WebkitTransform: 'translate3d(0, 5px, 0)',
|
||||
transform: 'translate3d(0, 5px, 0)',
|
||||
},
|
||||
to: {
|
||||
WebkitAnimationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||
WebkitTransform: 'translate3d(0, 0, 0)',
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
},
|
||||
'0%': {
|
||||
opacity: 0,
|
||||
WebkitTransform: 'translate3d(0, -3000px, 0)',
|
||||
transform: 'translate3d(0, -3000px, 0)',
|
||||
},
|
||||
},
|
||||
NotRoot: {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: 9999999999,
|
||||
},
|
||||
Notification: {
|
||||
display: 'flex',
|
||||
position: 'relative',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
MessageRoot: {
|
||||
width: 'auto',
|
||||
position: 'absolute',
|
||||
display: 'flex',
|
||||
flexFlow: 'column',
|
||||
alignItems: 'center',
|
||||
animation: '$game-log-notification-bounce-in-down ease-in 1',
|
||||
animationDuration: '400ms',
|
||||
animationFillMode: 'forwards',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
Message: {
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
MessageWrapper: {
|
||||
borderRadius: '16px',
|
||||
height: '55px',
|
||||
minHeight: '55px',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#fff',
|
||||
color: '#738694',
|
||||
padding: '8px 10px 8px 8px',
|
||||
zIndex: 1,
|
||||
boxShadow: '0 0 10px #242424',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
fontSize: '12px',
|
||||
fontWeight: 700,
|
||||
fontFamily: fontRoboto,
|
||||
textTransform: 'uppercase',
|
||||
border: '1px solid #e7e7e7',
|
||||
},
|
||||
MessageCarrot: {
|
||||
borderTop: '10px solid #fff',
|
||||
borderLeft: '10px solid transparent',
|
||||
borderRight: '10px solid transparent',
|
||||
textAlign: 'center',
|
||||
width: 0,
|
||||
marginTop: '-1px',
|
||||
zIndex: 2,
|
||||
animation: '$game-log-notification-bounce-in-down ease-in 1',
|
||||
animationDuration: '400ms',
|
||||
animationFillMode: 'forwards',
|
||||
},
|
||||
MessageIcon: {
|
||||
left: 0,
|
||||
width: '42px',
|
||||
height: '42px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: '25px',
|
||||
},
|
||||
MessageContent: {
|
||||
whiteSpace: 'nowrap',
|
||||
marginLeft: '10px',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
},
|
||||
MessageTotal: {
|
||||
fontSize: '24px',
|
||||
borderLeft: '1px solid #8a9ba8',
|
||||
color: '#202b33',
|
||||
padding: '0 5px 0 10px',
|
||||
marginLeft: '5px',
|
||||
},
|
||||
'Message-right': {
|
||||
left: 0,
|
||||
},
|
||||
'Message-left': {
|
||||
right: 0,
|
||||
},
|
||||
MessageIconDie: {
|
||||
marginLeft: '4px',
|
||||
maskImage: `url("data:image/svg+xml;utf8,${maskImageSvg}")`,
|
||||
WebkitMaskImage: `url("data:image/svg+xml;utf8,${maskImageSvg}")`,
|
||||
maskRepeat: 'no-repeat',
|
||||
WebkitMaskRepeat: 'no-repeat',
|
||||
height: '32px',
|
||||
width: '32px',
|
||||
display: 'inline-block',
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
GameLive: {
|
||||
color: '#000',
|
||||
whiteSpace: 'pre',
|
||||
marginRight: '10px',
|
||||
},
|
||||
}));
|
||||
export const GameLogNotification = ({ message, themeColor, notificationWrapperRef, notificationOnClick, }) => {
|
||||
var _a, _b;
|
||||
const { classes, cx } = useStyles();
|
||||
const messageRootRef = useRef(null);
|
||||
const GameLogNotificationContainer = useMemo(() => {
|
||||
const rootElement = document.createElement('div');
|
||||
rootElement.classList.add(classes.NotRoot);
|
||||
return rootElement;
|
||||
}, [classes.NotRoot]);
|
||||
const [{ activeCampaign, activeCharacters, activePlayers }] = useContext(GameLogContext);
|
||||
const [box, setBox] = useState(notificationWrapperRef === null || notificationWrapperRef === void 0 ? void 0 : notificationWrapperRef.getBoundingClientRect());
|
||||
const [messageRootBox, setMessageRootBox] = useState((_a = messageRootRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect());
|
||||
useEffect(() => {
|
||||
document.body.appendChild(GameLogNotificationContainer);
|
||||
return () => {
|
||||
document.body.removeChild(GameLogNotificationContainer);
|
||||
};
|
||||
}, [GameLogNotificationContainer]);
|
||||
useEffect(() => {
|
||||
const int = setInterval(() => {
|
||||
var _a;
|
||||
setBox(notificationWrapperRef === null || notificationWrapperRef === void 0 ? void 0 : notificationWrapperRef.getBoundingClientRect());
|
||||
setMessageRootBox((_a = messageRootRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect());
|
||||
}, 10);
|
||||
return () => clearInterval(int);
|
||||
}, [notificationWrapperRef]);
|
||||
const getTop = (root, box, offset) => { var _a, _b; return Math.max(((_a = box === null || box === void 0 ? void 0 : box.top) !== null && _a !== void 0 ? _a : 0) - ((_b = root === null || root === void 0 ? void 0 : root.height) !== null && _b !== void 0 ? _b : 0) + offset, 0); };
|
||||
const getLeft = (root, box, offset) => {
|
||||
var _a, _b, _c, _d, _e;
|
||||
const carrotHeight = 5;
|
||||
let result = ((_a = box === null || box === void 0 ? void 0 : box.left) !== null && _a !== void 0 ? _a : 0) -
|
||||
((_b = root === null || root === void 0 ? void 0 : root.width) !== null && _b !== void 0 ? _b : 0) * 0.5 +
|
||||
((_c = box === null || box === void 0 ? void 0 : box.width) !== null && _c !== void 0 ? _c : 0) * 0.5 +
|
||||
offset;
|
||||
result =
|
||||
result > document.body.getBoundingClientRect().width - ((_d = root === null || root === void 0 ? void 0 : root.width) !== null && _d !== void 0 ? _d : 0)
|
||||
? document.body.getBoundingClientRect().width -
|
||||
((_e = root === null || root === void 0 ? void 0 : root.width) !== null && _e !== void 0 ? _e : 0) -
|
||||
carrotHeight
|
||||
: result;
|
||||
return result > 0 ? result : carrotHeight;
|
||||
};
|
||||
const getTopCarrot = (root, box, offset) => {
|
||||
var _a, _b, _c;
|
||||
return Math.max(((_a = box === null || box === void 0 ? void 0 : box.top) !== null && _a !== void 0 ? _a : 0) - ((_b = root === null || root === void 0 ? void 0 : root.height) !== null && _b !== void 0 ? _b : 0) + ((_c = root === null || root === void 0 ? void 0 : root.height) !== null && _c !== void 0 ? _c : 0) + offset, 0);
|
||||
};
|
||||
const getLeftCarrot = (root, box, offset) => {
|
||||
var _a, _b;
|
||||
return ((_a = box === null || box === void 0 ? void 0 : box.left) !== null && _a !== void 0 ? _a : 0) + ((_b = box === null || box === void 0 ? void 0 : box.width) !== null && _b !== void 0 ? _b : 0) * 0.5 + offset;
|
||||
};
|
||||
const name = getMessageName(message, activePlayers.entities, activeCharacters.entities, activeCampaign === null || activeCampaign === void 0 ? void 0 : activeCampaign.dmId);
|
||||
return ReactDOM.createPortal(React.createElement(React.Fragment, null,
|
||||
React.createElement("div", { className: cx(classes.MessageCarrot, classes.MessageRoot), style: {
|
||||
top: getTopCarrot(messageRootBox, box, -10),
|
||||
left: getLeftCarrot(messageRootBox, box, -10),
|
||||
} }),
|
||||
React.createElement("div", { className: cx(classes.MessageRoot), style: {
|
||||
top: getTop(messageRootBox, box, -10),
|
||||
left: getLeft(messageRootBox, box, -5),
|
||||
}, ref: messageRootRef, onClick: notificationOnClick },
|
||||
React.createElement("div", { className: classes.Message }, message.eventType === 'dice/roll/fulfilled' && (React.createElement("div", { className: classes.MessageWrapper },
|
||||
React.createElement("div", { className: classes.MessageIcon, style: { background: themeColor } },
|
||||
React.createElement("span", { className: classes.MessageIconDie })),
|
||||
React.createElement("span", { className: classes.MessageContent },
|
||||
name,
|
||||
" Rolled", (_b = message.data.rolls) === null || _b === void 0 ? void 0 :
|
||||
_b.map((roll, index) => {
|
||||
var _a;
|
||||
return (React.createElement(Fragment, { key: index },
|
||||
"\u00A0",
|
||||
React.createElement(GameLogNotificationMessage, { message: message, roll: roll }),
|
||||
"\u00A0",
|
||||
React.createElement("span", { className: cx(classes.MessageTotal) }, (_a = roll.result) === null || _a === void 0 ? void 0 : _a.total)));
|
||||
}))))))), GameLogNotificationContainer);
|
||||
};
|
||||
//# sourceMappingURL=GameLogNotification.js.map
|
||||
Generated
Vendored
+38
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
const rollTypeToColor = ({ rollTypeAdvantageColor, rollTypeCheckColor, rollTypeDamageColor, rollTypeDisadvantageColor, rollTypeRollColor, rollTypeSaveColor, rollTypeToHitColor, }, { roll }) => ({
|
||||
roll: rollTypeRollColor,
|
||||
'to hit': rollTypeToHitColor,
|
||||
damage: rollTypeDamageColor,
|
||||
check: rollTypeCheckColor,
|
||||
spell: rollTypeCheckColor,
|
||||
save: rollTypeSaveColor,
|
||||
heal: rollTypeSaveColor,
|
||||
advantage: rollTypeAdvantageColor,
|
||||
disadvantage: rollTypeDisadvantageColor,
|
||||
}[roll.rollType]);
|
||||
const useStyles = makeStyles()(({ gameLog: { rollTypeAdvantageColor, rollTypeCheckColor, rollTypeDamageColor, rollTypeDisadvantageColor, rollTypeRollColor, rollTypeSaveColor, rollTypeToHitColor, }, }, { roll }) => ({
|
||||
RollAction: {
|
||||
whiteSpace: 'nowrap',
|
||||
maxWidth: '200px',
|
||||
textOverflow: 'ellipsis',
|
||||
overflow: 'hidden',
|
||||
color: rollTypeToColor({
|
||||
rollTypeAdvantageColor,
|
||||
rollTypeCheckColor,
|
||||
rollTypeDamageColor,
|
||||
rollTypeDisadvantageColor,
|
||||
rollTypeRollColor,
|
||||
rollTypeSaveColor,
|
||||
rollTypeToHitColor,
|
||||
}, { roll }),
|
||||
},
|
||||
}));
|
||||
export const GameLogNotificationMessage = (props) => {
|
||||
const { message, roll } = props;
|
||||
const { classes, cx } = useStyles({ roll });
|
||||
return (React.createElement("span", { title: message.data.action, className: cx(classes.RollAction) },
|
||||
message.data.action,
|
||||
roll.rollType !== 'roll' ? ` ${roll.rollType}` : ''));
|
||||
};
|
||||
//# sourceMappingURL=GameLogNotificationMessage.js.map
|
||||
Generated
Vendored
+102
@@ -0,0 +1,102 @@
|
||||
import React, { useCallback, useContext, useEffect, useRef, useState, } from 'react';
|
||||
import { useMessageBroker } from '../../hooks/useMessageBroker';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
import { GameLogContext, isMessage } from '../GameLogContextProvider';
|
||||
import { GameLogNotification } from '../GameLogNotification';
|
||||
export var NotificationPosition;
|
||||
(function (NotificationPosition) {
|
||||
NotificationPosition["TOP"] = "top";
|
||||
NotificationPosition["BOTTOM"] = "bottom";
|
||||
})(NotificationPosition || (NotificationPosition = {}));
|
||||
const getLocalStorageLastMessageTime = (characterId) => {
|
||||
let lastMessageTime = 0;
|
||||
try {
|
||||
const lsLastMessageTime = localStorage.getItem(`gameLog-lastMessageTime-${characterId}`);
|
||||
if (lsLastMessageTime) {
|
||||
lastMessageTime = parseInt(lsLastMessageTime, 10);
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
return lastMessageTime;
|
||||
};
|
||||
const setLocalStorageLastMessageTime = (userId, lastMessageTime) => {
|
||||
try {
|
||||
localStorage.setItem(`gameLog-lastMessageTime-${userId}`, lastMessageTime.toString());
|
||||
}
|
||||
catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
const useStyles = makeStyles()(() => ({
|
||||
'@keyframes game-log-notification-fade-in': {
|
||||
from: {
|
||||
opacity: 0,
|
||||
},
|
||||
to: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
Notification: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
},
|
||||
NewMessage: {
|
||||
borderRadius: '20px',
|
||||
backgroundColor: '#409bff',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
border: '1px solid rgb(231, 231, 231)',
|
||||
position: 'absolute',
|
||||
right: '-4px',
|
||||
top: '-4px',
|
||||
animation: '$game-log-notification-fade-in ease-in 1',
|
||||
animationDuration: '200ms',
|
||||
animationFillMode: 'forwards',
|
||||
},
|
||||
}));
|
||||
export const GameLogNotificationWrapper = ({ children, themeColor, gameLogIsOpen, delay = 5000,
|
||||
// TODO: implement position
|
||||
position: _position = NotificationPosition.TOP, notificationOnClick, isCharacterBuilder, }) => {
|
||||
const [{ entityId }] = useContext(GameLogContext);
|
||||
const { classes } = useStyles();
|
||||
const notificationWrapperRef = useRef(null);
|
||||
const [savedLastMessageTime, setSavedLastMessageTime] = useState(getLocalStorageLastMessageTime(entityId !== null && entityId !== void 0 ? entityId : ''));
|
||||
const [message, setMessage] = useState(null);
|
||||
const [lastMessageTime, setLastMessageTime] = useState(0);
|
||||
useEffect(() => {
|
||||
const currentTime = new Date().getTime();
|
||||
setSavedLastMessageTime(currentTime);
|
||||
setLocalStorageLastMessageTime(entityId !== null && entityId !== void 0 ? entityId : '', currentTime);
|
||||
setMessage(null);
|
||||
}, [entityId, gameLogIsOpen]);
|
||||
//set timer after every message to disable it after x seconds.
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setMessage(null);
|
||||
}, delay);
|
||||
return () => clearTimeout(timer);
|
||||
// message is here so when a new message comes in we reset the timer.
|
||||
}, [delay, message]);
|
||||
useMessageBroker(useCallback((message) => {
|
||||
if (!isMessage(message)) {
|
||||
return;
|
||||
}
|
||||
const parsedDateTime = parseInt(message.dateTime, 10);
|
||||
// checks if the message is a persist message and is recent enough to show
|
||||
if (message.persist &&
|
||||
savedLastMessageTime < parsedDateTime &&
|
||||
message.eventType === 'dice/roll/fulfilled' &&
|
||||
(message.entityType === 'character' || message.entityType === 'user')) {
|
||||
setMessage(message);
|
||||
setLastMessageTime(parsedDateTime);
|
||||
}
|
||||
}, [savedLastMessageTime]));
|
||||
return (React.createElement("div", { className: classes.Notification, ref: notificationWrapperRef },
|
||||
!gameLogIsOpen && (React.createElement(React.Fragment, null,
|
||||
!isCharacterBuilder && savedLastMessageTime < lastMessageTime && (React.createElement("div", { className: classes.NewMessage })),
|
||||
message && (React.createElement(GameLogNotification, { message: message, themeColor: themeColor, notificationWrapperRef: notificationWrapperRef.current, notificationOnClick: notificationOnClick })))),
|
||||
children));
|
||||
};
|
||||
//# sourceMappingURL=GameLogNotificationWrapper.js.map
|
||||
Generated
Vendored
+16
@@ -0,0 +1,16 @@
|
||||
import React, { forwardRef, } from 'react';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
const useStyles = makeStyles()(() => ({
|
||||
Sentinel: {
|
||||
border: 0,
|
||||
// handy for debugging these guys:
|
||||
// borderTop: `5px solid hsl(${Math.floor(Math.random() * 361)}, 80%, 50%)`,
|
||||
margin: 0,
|
||||
},
|
||||
}));
|
||||
export const Sentinel = forwardRef((props, ref) => {
|
||||
const { classes } = useStyles();
|
||||
return React.createElement("hr", Object.assign({ className: classes.Sentinel, ref: ref }, props));
|
||||
});
|
||||
Sentinel.displayName = 'Sentinel';
|
||||
//# sourceMappingURL=Sentinel.js.map
|
||||
Generated
Vendored
+89
@@ -0,0 +1,89 @@
|
||||
var __rest = (this && this.__rest) || function (s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||
t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
import { differenceInHours, differenceInMinutes, differenceInSeconds, formatDistanceStrict, formatISO, lightFormat, } from 'date-fns';
|
||||
import React, { useState } from 'react';
|
||||
import { useInterval } from '../../hooks/useInterval';
|
||||
import { makeStyles } from '../../shared/makeStyles';
|
||||
export const meridiem = /[A|P]M$/;
|
||||
const endsWithMeridiem = (formattedTime) => meridiem.test(formattedTime);
|
||||
const Now = 'now';
|
||||
const shortFormat = 'h:mm a';
|
||||
const shortForm = (dateTime) => lightFormat(dateTime, shortFormat);
|
||||
const longFormat = `M/d/yyyy ${shortFormat}`;
|
||||
const longForm = (dateTime) => lightFormat(dateTime, longFormat);
|
||||
/**
|
||||
* for the fp hard-liners:
|
||||
*
|
||||
* ```ts
|
||||
* const formatTimeFp = (dateTime: number) =>
|
||||
* differenceInSeconds(Date.now(), dateTime) < 5
|
||||
* ? 'Now'
|
||||
* : differenceInSeconds(Date.now(), dateTime) < 60
|
||||
* ? `< ${formatDistanceToNowStrict(dateTime, {
|
||||
* roundingMethod: 'ceil',
|
||||
* unit: 'minute',
|
||||
* }).replace(/ute/, '')} Ago`
|
||||
* : differenceInMinutes(Date.now(), dateTime) < 60
|
||||
* ? `${formatDistanceToNowStrict(dateTime, {
|
||||
* roundingMethod: 'ceil',
|
||||
* unit: 'minute',
|
||||
* }).replace(/ute/, '')} Ago`
|
||||
* : lightFormat(dateTime, 'h:mm a');
|
||||
* ```
|
||||
*/
|
||||
const formatTime = (dateTime) => {
|
||||
const now = Date.now();
|
||||
const seconds = differenceInSeconds(now, dateTime);
|
||||
const minutes = differenceInMinutes(now, dateTime);
|
||||
const toNow = formatDistanceStrict(now, dateTime, {
|
||||
roundingMethod: 'ceil',
|
||||
unit: 'minute',
|
||||
}).replace(/ute/, '');
|
||||
if (seconds < 5) {
|
||||
// less than 5 seconds is "Now"
|
||||
return Now;
|
||||
}
|
||||
if (seconds < 30) {
|
||||
// less than 30 seconds is "< 1 Min Ago"
|
||||
return `< ${toNow} ago`;
|
||||
}
|
||||
if (seconds < 60 || minutes < 60) {
|
||||
// less than 60 seconds or minutes is "${n} Mins Ago"
|
||||
return `${toNow} ago`;
|
||||
}
|
||||
// greater than that and we just drop to "meridiem" time
|
||||
return differenceInHours(now, dateTime) < 24
|
||||
? shortForm(dateTime)
|
||||
: longForm(dateTime);
|
||||
};
|
||||
const getPeriod = (formattedTime) => {
|
||||
if (endsWithMeridiem(formattedTime)) {
|
||||
return null;
|
||||
}
|
||||
if (formattedTime === Now || formattedTime.startsWith('<')) {
|
||||
return 5000;
|
||||
}
|
||||
return 30000;
|
||||
};
|
||||
const useStyles = makeStyles()(() => ({
|
||||
TimeAgo: {
|
||||
display: 'inline-block',
|
||||
},
|
||||
}));
|
||||
export const TimeAgo = (_a) => {
|
||||
var { className, dateTime } = _a, props = __rest(_a, ["className", "dateTime"]);
|
||||
const [formattedTime, setFormattedTime] = useState(formatTime(dateTime));
|
||||
const { classes, cx } = useStyles();
|
||||
useInterval(() => setFormattedTime(formatTime(dateTime)), getPeriod(formattedTime));
|
||||
return (React.createElement("time", Object.assign({ dateTime: formatISO(dateTime), title: longForm(dateTime), className: cx(className, classes.TimeAgo) }, props), formattedTime));
|
||||
};
|
||||
//# sourceMappingURL=TimeAgo.js.map
|
||||
Generated
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
import SvgIcon from '@mui/material/SvgIcon';
|
||||
import React from 'react';
|
||||
export const ArrowDownIcon = (props) => (React.createElement(SvgIcon, Object.assign({}, props),
|
||||
React.createElement("path", { d: "M7 10L12 15L17 10H7Z", fill: "currentColor" })));
|
||||
//# sourceMappingURL=ArrowDownIcon.js.map
|
||||
Generated
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
import SvgIcon from '@mui/material/SvgIcon';
|
||||
import React from 'react';
|
||||
export const ArrowUpIcon = (props) => (React.createElement(SvgIcon, Object.assign({}, props),
|
||||
React.createElement("path", { d: "M7 15L12 10L17 15H7Z", fill: "currentColor" })));
|
||||
//# sourceMappingURL=ArrowUpIcon.js.map
|
||||
Generated
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
import SvgIcon from '@mui/material/SvgIcon';
|
||||
import React from 'react';
|
||||
export const CheckIcon = (props) => (React.createElement(SvgIcon, Object.assign({}, props),
|
||||
React.createElement("path", { d: "M9.00016 16.17L4.83016 12L3.41016 13.41L9.00016 19L21.0002 7.00003L19.5902 5.59003L9.00016 16.17Z", fill: "currentColor" })));
|
||||
//# sourceMappingURL=CheckIcon.js.map
|
||||
Generated
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
import SvgIcon from '@mui/material/SvgIcon';
|
||||
import React from 'react';
|
||||
export const DungeonMasterIcon = (props) => (React.createElement(SvgIcon, Object.assign({}, props),
|
||||
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3 17V7H7C7.53043 7 8.03914 7.21071 8.41421 7.58579C8.78929 7.96086 9 8.46957 9 9V15C9 15.5304 8.78929 16.0391 8.41421 16.4142C8.03914 16.7893 7.53043 17 7 17H3ZM7 9H5V15H7V9ZM11.5858 7.58579C11.9609 7.21071 12.4696 7 13 7H19C19.5304 7 20.0391 7.21071 20.4142 7.58579C20.7893 7.96086 21 8.46957 21 9V17H19V9H17V16H15V9H13V17H11V9C11 8.46957 11.2107 7.96086 11.5858 7.58579Z", fill: "currentColor" })));
|
||||
//# sourceMappingURL=DungeonMasterIcon.js.map
|
||||
Generated
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
import SvgIcon from '@mui/material/SvgIcon';
|
||||
import React from 'react';
|
||||
export const EveryoneIcon = (props) => (React.createElement(SvgIcon, Object.assign({}, props),
|
||||
React.createElement("path", { d: "M9 13.75C6.66 13.75 2 14.92 2 17.25V19H16V17.25C16 14.92 11.34 13.75 9 13.75ZM4.34 17C5.18 16.42 7.21 15.75 9 15.75C10.79 15.75 12.82 16.42 13.66 17H4.34ZM9 12C10.93 12 12.5 10.43 12.5 8.5C12.5 6.57 10.93 5 9 5C7.07 5 5.5 6.57 5.5 8.5C5.5 10.43 7.07 12 9 12ZM9 7C9.83 7 10.5 7.67 10.5 8.5C10.5 9.33 9.83 10 9 10C8.17 10 7.5 9.33 7.5 8.5C7.5 7.67 8.17 7 9 7ZM16.04 13.81C17.2 14.65 18 15.77 18 17.25V19H22V17.25C22 15.23 18.5 14.08 16.04 13.81V13.81ZM15 12C16.93 12 18.5 10.43 18.5 8.5C18.5 6.57 16.93 5 15 5C14.46 5 13.96 5.13 13.5 5.35C14.13 6.24 14.5 7.33 14.5 8.5C14.5 9.67 14.13 10.76 13.5 11.65C13.96 11.87 14.46 12 15 12Z", fill: "currentColor" })));
|
||||
//# sourceMappingURL=EveryoneIcon.js.map
|
||||
Generated
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
import SvgIcon from '@mui/material/SvgIcon';
|
||||
import React from 'react';
|
||||
export const SelfIcon = (props) => (React.createElement(SvgIcon, Object.assign({}, props),
|
||||
React.createElement("path", { d: "M12 5.9C13.16 5.9 14.1 6.84 14.1 8C14.1 9.16 13.16 10.1 12 10.1C10.84 10.1 9.9 9.16 9.9 8C9.9 6.84 10.84 5.9 12 5.9ZM12 14.9C14.97 14.9 18.1 16.36 18.1 17V18.1H5.9V17C5.9 16.36 9.03 14.9 12 14.9ZM12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4ZM12 13C9.33 13 4 14.34 4 17V20H20V17C20 14.34 14.67 13 12 13Z", fill: "currentColor" })));
|
||||
//# sourceMappingURL=SelfIcon.js.map
|
||||
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
export const getMessageName = (message, activePlayersEntities, activeCharactersEntities, dmId) => {
|
||||
var _a, _b, _c, _d, _e;
|
||||
return message.entityType === 'user' && Number(message === null || message === void 0 ? void 0 : message.entityId) !== dmId
|
||||
? (_a = activePlayersEntities[Number(message === null || message === void 0 ? void 0 : message.entityId)]) === null || _a === void 0 ? void 0 : _a.displayName
|
||||
: (_e = (_c = (_b = message === null || message === void 0 ? void 0 : message.data.context) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : (_d = activeCharactersEntities[Number(message === null || message === void 0 ? void 0 : message.entityId)]) === null || _d === void 0 ? void 0 : _d.name) !== null && _e !== void 0 ? _e : 'Dungeon Master';
|
||||
};
|
||||
//# sourceMappingURL=getMessageName.js.map
|
||||
Generated
Vendored
+63
@@ -0,0 +1,63 @@
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
import { AuthUtils } from '@dndbeyond/authentication-lib-js';
|
||||
import { isValidGameId } from '@dndbeyond/message-broker-lib';
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { useAwaitMessageBroker } from '../useAwaitMessageBroker';
|
||||
export const useActiveCampaign = (authUrl, baseUrl, callback) => {
|
||||
const mb = useAwaitMessageBroker();
|
||||
const getShortTermToken = useMemo(() => AuthUtils.makeGetShortTermToken({ authUrl }), [authUrl]);
|
||||
useEffect(() => {
|
||||
if (process.env.NODE_ENV === 'test' ||
|
||||
!(mb && mb.gameId && isValidGameId(mb.gameId))) {
|
||||
return;
|
||||
}
|
||||
const controller = new AbortController();
|
||||
const { signal } = controller;
|
||||
(() => __awaiter(void 0, void 0, void 0, function* () {
|
||||
let stt = undefined;
|
||||
let response = undefined;
|
||||
let data = undefined;
|
||||
try {
|
||||
stt = yield getShortTermToken();
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to get stt', error);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
response = yield fetch(`${baseUrl}/campaigns/v1/details/${mb.gameId}`, {
|
||||
signal,
|
||||
headers: {
|
||||
Authorization: `Bearer ${stt}`,
|
||||
},
|
||||
});
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to fetch', error);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
({ data } = yield response.json());
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to parse json', error);
|
||||
return;
|
||||
}
|
||||
if (!signal.aborted && data !== undefined) {
|
||||
callback(data);
|
||||
}
|
||||
}))();
|
||||
return () => {
|
||||
controller.abort();
|
||||
};
|
||||
}, [baseUrl, callback, getShortTermToken, mb, mb === null || mb === void 0 ? void 0 : mb.gameId]);
|
||||
};
|
||||
//# sourceMappingURL=useActiveCampaign.js.map
|
||||
Generated
Vendored
+63
@@ -0,0 +1,63 @@
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
import { AuthUtils } from '@dndbeyond/authentication-lib-js';
|
||||
import { isValidGameId } from '@dndbeyond/message-broker-lib';
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { useAwaitMessageBroker } from '../useAwaitMessageBroker';
|
||||
export const useActiveCharacters = (authUrl, baseUrl, callback) => {
|
||||
const mb = useAwaitMessageBroker();
|
||||
const getShortTermToken = useMemo(() => AuthUtils.makeGetShortTermToken({ authUrl }), [authUrl]);
|
||||
useEffect(() => {
|
||||
if (process.env.NODE_ENV === 'test' ||
|
||||
!(mb && mb.gameId && isValidGameId(mb.gameId))) {
|
||||
return;
|
||||
}
|
||||
const controller = new AbortController();
|
||||
const { signal } = controller;
|
||||
(() => __awaiter(void 0, void 0, void 0, function* () {
|
||||
let stt = undefined;
|
||||
let response = undefined;
|
||||
let data = undefined;
|
||||
try {
|
||||
stt = yield getShortTermToken();
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to get stt', error);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
response = yield fetch(`${baseUrl}/campaigns/v1/${mb.gameId}/characters`, {
|
||||
signal,
|
||||
headers: {
|
||||
Authorization: `Bearer ${stt}`,
|
||||
},
|
||||
});
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to fetch', error);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
({ data } = yield response.json());
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to parse json', error);
|
||||
return;
|
||||
}
|
||||
if (!signal.aborted && data !== undefined) {
|
||||
callback(data);
|
||||
}
|
||||
}))();
|
||||
return () => {
|
||||
controller.abort();
|
||||
};
|
||||
}, [baseUrl, callback, getShortTermToken, mb, mb === null || mb === void 0 ? void 0 : mb.gameId]);
|
||||
};
|
||||
//# sourceMappingURL=useActiveCharacters.js.map
|
||||
ddb_main/node_modules/@dndbeyond/game-log-components/dist/hooks/useActivePlayers/useActivePlayers.js
Generated
Vendored
+63
@@ -0,0 +1,63 @@
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
import { AuthUtils } from '@dndbeyond/authentication-lib-js';
|
||||
import { isValidGameId } from '@dndbeyond/message-broker-lib';
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { useAwaitMessageBroker } from '../useAwaitMessageBroker';
|
||||
export const useActivePlayers = (authUrl, baseUrl, callback) => {
|
||||
const mb = useAwaitMessageBroker();
|
||||
const getShortTermToken = useMemo(() => AuthUtils.makeGetShortTermToken({ authUrl }), [authUrl]);
|
||||
useEffect(() => {
|
||||
if (process.env.NODE_ENV === 'test' ||
|
||||
!(mb && mb.gameId && isValidGameId(mb.gameId))) {
|
||||
return;
|
||||
}
|
||||
const controller = new AbortController();
|
||||
const { signal } = controller;
|
||||
(() => __awaiter(void 0, void 0, void 0, function* () {
|
||||
let stt = undefined;
|
||||
let response = undefined;
|
||||
let data = undefined;
|
||||
try {
|
||||
stt = yield getShortTermToken();
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to get stt', error);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
response = yield fetch(`${baseUrl}/campaigns/v1/details/${mb.gameId}`, {
|
||||
signal,
|
||||
headers: {
|
||||
Authorization: `Bearer ${stt}`,
|
||||
},
|
||||
});
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to fetch', error);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
({ data } = yield response.json());
|
||||
}
|
||||
catch (error) {
|
||||
console.error('Failed to parse json', error);
|
||||
return;
|
||||
}
|
||||
if (!signal.aborted && data !== undefined) {
|
||||
callback(data);
|
||||
}
|
||||
}))();
|
||||
return () => {
|
||||
controller.abort();
|
||||
};
|
||||
}, [baseUrl, callback, getShortTermToken, mb, mb === null || mb === void 0 ? void 0 : mb.gameId]);
|
||||
};
|
||||
//# sourceMappingURL=useActivePlayers.js.map
|
||||
Generated
Vendored
+28
@@ -0,0 +1,28 @@
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
import { getMessageBroker } from '@dndbeyond/message-broker-lib';
|
||||
import { useEffect, useState } from 'react';
|
||||
export const useAwaitMessageBroker = () => {
|
||||
const [mb, setMb] = useState();
|
||||
useEffect(() => {
|
||||
(() => __awaiter(void 0, void 0, void 0, function* () {
|
||||
try {
|
||||
setMb(yield getMessageBroker());
|
||||
}
|
||||
catch (error) {
|
||||
if (process.env.NODE_ENV !== 'test') {
|
||||
console.error(error.message);
|
||||
}
|
||||
}
|
||||
}))();
|
||||
}, []);
|
||||
return mb;
|
||||
};
|
||||
//# sourceMappingURL=useAwaitMessageBroker.js.map
|
||||
Generated
Vendored
+28
@@ -0,0 +1,28 @@
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
import { useEffect } from 'react';
|
||||
export const useDiceFamilies = (diceServiceUrl, callback) => {
|
||||
useEffect(() => {
|
||||
if (process.env.NODE_ENV === 'test') {
|
||||
return;
|
||||
}
|
||||
(() => __awaiter(void 0, void 0, void 0, function* () {
|
||||
try {
|
||||
const response = yield fetch(`${diceServiceUrl}/dice/v1/getallfamilysets`);
|
||||
const { data } = yield response.json();
|
||||
callback(data);
|
||||
}
|
||||
catch (error) {
|
||||
console.error(error.message);
|
||||
}
|
||||
}))();
|
||||
}, [callback, diceServiceUrl]);
|
||||
};
|
||||
//# sourceMappingURL=useDiceFamilies.js.map
|
||||
Generated
Vendored
+12
@@ -0,0 +1,12 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useAwaitMessageBroker } from '../useAwaitMessageBroker';
|
||||
export const useFetchHistory = (callback) => {
|
||||
const mb = useAwaitMessageBroker();
|
||||
useEffect(() => {
|
||||
if (!mb) {
|
||||
return;
|
||||
}
|
||||
callback(() => mb.fetchHistory());
|
||||
}, [callback, mb]);
|
||||
};
|
||||
//# sourceMappingURL=useFetchHistory.js.map
|
||||
Generated
Vendored
+59
@@ -0,0 +1,59 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
/**
|
||||
* this hook takes an optional callback, wires it up to be called when a
|
||||
* "sentinel" element scrolls into view inside of a scroll container, and
|
||||
* returns `RefObject`s to use to attach to the appropriate DOM elements, e.g.
|
||||
*
|
||||
* ```jsx
|
||||
* export const InfiniteScroller: FC = () => {
|
||||
* const myCallback = useCallback(() => {
|
||||
* // do something when the sentinel scrolls into view inside the scroll
|
||||
* // container
|
||||
* }, []);
|
||||
*
|
||||
* const [scrollContainerRef, sentinelRef] = useInfiniteScroll(myCallback);
|
||||
*
|
||||
* return (
|
||||
* <div className="scroll-container" ref={scrollContainerRef}>
|
||||
* <div className="taller-than-scroll-container">
|
||||
* // other stuff could go here ...
|
||||
* <hr className="sentinel" ref={sentinelRef} />
|
||||
* // ... or other stuff could go here
|
||||
* </div>
|
||||
* </div>
|
||||
* );
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* the styling and exact structure is up to the implementor
|
||||
*
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
|
||||
*/
|
||||
export const useInfiniteScroll = (callback) => {
|
||||
const scrollContainerRef = useRef(null);
|
||||
const sentinelRef = useRef(null);
|
||||
useEffect(() => {
|
||||
if (!(scrollContainerRef.current && sentinelRef.current)) {
|
||||
return;
|
||||
}
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (!(scrollContainerRef.current &&
|
||||
scrollContainerRef.current.scrollHeight >
|
||||
scrollContainerRef.current.clientHeight &&
|
||||
entry.isIntersecting)) {
|
||||
return;
|
||||
}
|
||||
callback === null || callback === void 0 ? void 0 : callback();
|
||||
});
|
||||
}, {
|
||||
root: scrollContainerRef.current,
|
||||
});
|
||||
observer.observe(sentinelRef.current);
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
};
|
||||
}, [callback]);
|
||||
return [scrollContainerRef, sentinelRef];
|
||||
};
|
||||
//# sourceMappingURL=useInfiniteScroll.js.map
|
||||
Generated
Vendored
+23
@@ -0,0 +1,23 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
/**
|
||||
* heavily inspired by @dan_abramov's post
|
||||
*
|
||||
* @see https://overreacted.io/making-setinterval-declarative-with-react-hooks/
|
||||
*/
|
||||
export const useInterval = (handler, timeout) => {
|
||||
const handlerRef = useRef();
|
||||
useEffect(() => {
|
||||
handlerRef.current = handler;
|
||||
}, [handler]);
|
||||
useEffect(() => {
|
||||
if (timeout === null) {
|
||||
return;
|
||||
}
|
||||
const intervalId = setInterval(() => {
|
||||
var _a;
|
||||
typeof handlerRef.current === 'function' && ((_a = handlerRef.current) === null || _a === void 0 ? void 0 : _a.call(handlerRef));
|
||||
}, timeout);
|
||||
return () => clearInterval(intervalId);
|
||||
}, [timeout]);
|
||||
};
|
||||
//# sourceMappingURL=useInterval.js.map
|
||||
ddb_main/node_modules/@dndbeyond/game-log-components/dist/hooks/useMessageBroker/useMessageBroker.js
Generated
Vendored
+12
@@ -0,0 +1,12 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useAwaitMessageBroker } from '../useAwaitMessageBroker';
|
||||
export const useMessageBroker = (callback) => {
|
||||
const mb = useAwaitMessageBroker();
|
||||
useEffect(() => {
|
||||
if (!mb) {
|
||||
return;
|
||||
}
|
||||
return mb.subscribe(callback);
|
||||
}, [callback, mb]);
|
||||
};
|
||||
//# sourceMappingURL=useMessageBroker.js.map
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { createMakeStyles } from 'tss-react';
|
||||
export const { makeStyles } = createMakeStyles({ useTheme });
|
||||
//# sourceMappingURL=makeStyles.js.map
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import { createDarkTheme, createLightTheme } from '@dndbeyond/ddb-theme';
|
||||
import * as gameLog from './variables';
|
||||
export const darkTheme = createDarkTheme({ gameLog });
|
||||
export const lightTheme = createLightTheme({ gameLog });
|
||||
//# sourceMappingURL=themes.js.map
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
// TODO: Pull shared colors from waterdeep-vars package
|
||||
export const glWhite = '#ffffff';
|
||||
export const glGray = '#738694';
|
||||
export const gray5 = '#bfccd6';
|
||||
export const blue1 = '#1b9af0';
|
||||
export const grayDark1 = '#182026';
|
||||
/**
|
||||
* per waterdeep-vars, but slightly adjusted to favor 'Arial Narrow' as a
|
||||
* fallback for 'Roboto Condensed'
|
||||
*
|
||||
* @see https://github.com/DnDBeyond/ddb-waterdeep-vars/blob/master/src/sass/_common-vars.scss#L100-L101
|
||||
* @see https://www.cssfontstack.com/
|
||||
*/
|
||||
export const fontRoboto = "Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif";
|
||||
export const fontRobotoCondensed = "'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif";
|
||||
export const messageColorSelf = glWhite;
|
||||
export const messageColorOther = '#5c7080';
|
||||
export const messageColorPending = '#a7b6c2';
|
||||
export const messageBackgroundSelf = grayDark1;
|
||||
export const messageBackgroundOther = '#f5f8fa';
|
||||
export const messageBackgroundPending = glWhite;
|
||||
export const messageBorderSelf = blue1;
|
||||
export const messageBorderOther = '#ced9e0';
|
||||
export const messageBorderPending = '#bfccd6';
|
||||
export const actionCustomColor = '#ced9e0';
|
||||
export const actionColorPending = '#a7b6c2';
|
||||
export const rollTypeDefaultColor = blue1;
|
||||
export const rollTypeRollColor = '#f5a623';
|
||||
export const rollTypeToHitColor = blue1;
|
||||
export const rollTypeDamageColor = '#d54f4f';
|
||||
export const rollTypeDamageColorSelf = '#df7b7b';
|
||||
export const rollTypeCheckColor = '#8359ee';
|
||||
export const rollTypeCheckColorSelf = '#b55dff';
|
||||
export const rollTypeSaveColor = '#6cbf5b';
|
||||
export const rollTypeAdvantageColor = '#008800';
|
||||
export const rollTypeDisadvantageColor = '#aa0000';
|
||||
export const rollTypeAdvantageColorSelf = '#80bc67';
|
||||
export const rollTypeDisadvantageColorSelf = '#df7b7b';
|
||||
export const targetColorSelf = '#a7b6c2';
|
||||
export const valueColorSelf = glWhite;
|
||||
export const valueColorOther = grayDark1;
|
||||
export const valueColorPending = '#bfccd6';
|
||||
export const gameLogEntryAvatarSize = '32px';
|
||||
export const gameLogEntryAvatarMargin = '4px';
|
||||
export const dieThumbnailImageSize = '170%';
|
||||
export const dieDoubleThumbnailImageSize = '150%';
|
||||
//# sourceMappingURL=variables.js.map
|
||||
Generated
Vendored
+36
@@ -0,0 +1,36 @@
|
||||
"use strict";
|
||||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
||||
if (k2 === undefined) k2 = k;
|
||||
var desc = Object.getOwnPropertyDescriptor(m, k);
|
||||
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
||||
desc = { enumerable: true, get: function() { return m[k]; } };
|
||||
}
|
||||
Object.defineProperty(o, k2, desc);
|
||||
}) : (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.GlobalStyles = void 0;
|
||||
const react_1 = __importDefault(require("react"));
|
||||
const reactEmotion = __importStar(require("@emotion/react"));
|
||||
function GlobalStyles(props) {
|
||||
const { styles } = props;
|
||||
return react_1.default.createElement(reactEmotion.Global, { styles: reactEmotion.css(styles) });
|
||||
}
|
||||
exports.GlobalStyles = GlobalStyles;
|
||||
Generated
Vendored
+86
@@ -0,0 +1,86 @@
|
||||
"use strict";
|
||||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
||||
if (k2 === undefined) k2 = k;
|
||||
var desc = Object.getOwnPropertyDescriptor(m, k);
|
||||
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
||||
desc = { enumerable: true, get: function() { return m[k]; } };
|
||||
}
|
||||
Object.defineProperty(o, k2, desc);
|
||||
}) : (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.TssCacheProvider = exports.useTssEmotionCache = exports.getTssDefaultEmotionCache = exports.getDoExistsTssDefaultEmotionCacheMemoizedValue = void 0;
|
||||
const react_1 = __importStar(require("react"));
|
||||
const cache_1 = __importDefault(require("@emotion/cache"));
|
||||
const { getDoExistsTssDefaultEmotionCacheMemoizedValue, getTssDefaultEmotionCache, reactContext, } = (() => {
|
||||
const propertyKey = "__tss-react_context";
|
||||
const peerDepObj =
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
react_1.createContext;
|
||||
let sharedContext = peerDepObj["__tss-react_context"];
|
||||
if (sharedContext === undefined) {
|
||||
const { getTssDefaultEmotionCache, getDoExistsTssDefaultEmotionCacheMemoizedValue, } = (() => {
|
||||
let cache = undefined;
|
||||
/**
|
||||
* Lazily initialized singleton
|
||||
* If doReset is set to true the memoized instance will be
|
||||
* discarded and a new one created.
|
||||
* */
|
||||
function getTssDefaultEmotionCache(params) {
|
||||
const { doReset = false } = params !== null && params !== void 0 ? params : {};
|
||||
if (doReset) {
|
||||
cache = undefined;
|
||||
}
|
||||
if (cache === undefined) {
|
||||
cache = (0, cache_1.default)({ "key": "tss" });
|
||||
}
|
||||
return cache;
|
||||
}
|
||||
return {
|
||||
getTssDefaultEmotionCache,
|
||||
"getDoExistsTssDefaultEmotionCacheMemoizedValue": () => cache !== undefined,
|
||||
};
|
||||
})();
|
||||
sharedContext = {
|
||||
getTssDefaultEmotionCache,
|
||||
getDoExistsTssDefaultEmotionCacheMemoizedValue,
|
||||
"reactContext": (0, react_1.createContext)(undefined),
|
||||
};
|
||||
Object.defineProperty(peerDepObj, propertyKey, {
|
||||
"configurable": false,
|
||||
"enumerable": false,
|
||||
"writable": false,
|
||||
"value": sharedContext,
|
||||
});
|
||||
}
|
||||
return sharedContext;
|
||||
})();
|
||||
exports.getDoExistsTssDefaultEmotionCacheMemoizedValue = getDoExistsTssDefaultEmotionCacheMemoizedValue;
|
||||
exports.getTssDefaultEmotionCache = getTssDefaultEmotionCache;
|
||||
function useTssEmotionCache() {
|
||||
const cacheExplicitlyProvidedForTss = (0, react_1.useContext)(reactContext);
|
||||
return cacheExplicitlyProvidedForTss !== null && cacheExplicitlyProvidedForTss !== void 0 ? cacheExplicitlyProvidedForTss : getTssDefaultEmotionCache();
|
||||
}
|
||||
exports.useTssEmotionCache = useTssEmotionCache;
|
||||
function TssCacheProvider(props) {
|
||||
const { children, value } = props;
|
||||
return (react_1.default.createElement(reactContext.Provider, { value: value }, children));
|
||||
}
|
||||
exports.TssCacheProvider = TssCacheProvider;
|
||||
Generated
Vendored
+101
@@ -0,0 +1,101 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.useCssAndCx = exports.createCssAndCx = void 0;
|
||||
const classnames_1 = require("./tools/classnames");
|
||||
const serialize_1 = require("@emotion/serialize");
|
||||
const utils_1 = require("@emotion/utils");
|
||||
const useGuaranteedMemo_1 = require("./tools/useGuaranteedMemo");
|
||||
const cache_1 = require("./cache");
|
||||
const types_1 = require("./types");
|
||||
exports.createCssAndCx = (() => {
|
||||
function merge(registered, css, className) {
|
||||
const registeredStyles = [];
|
||||
const rawClassName = (0, utils_1.getRegisteredStyles)(registered, registeredStyles, className);
|
||||
if (registeredStyles.length < 2) {
|
||||
return className;
|
||||
}
|
||||
return rawClassName + css(registeredStyles);
|
||||
}
|
||||
function createCssAndCx(params) {
|
||||
const { cache } = params;
|
||||
const css = (...args) => {
|
||||
const serialized = (0, serialize_1.serializeStyles)(args, cache.registered);
|
||||
(0, utils_1.insertStyles)(cache, serialized, false);
|
||||
const className = `${cache.key}-${serialized.name}`;
|
||||
scope: {
|
||||
const arg = args[0];
|
||||
if (!(0, types_1.matchCSSObject)(arg)) {
|
||||
break scope;
|
||||
}
|
||||
increaseSpecificityToTakePrecedenceOverMediaQuerries.saveClassNameCSSObjectMapping(cache, className, arg);
|
||||
}
|
||||
return className;
|
||||
};
|
||||
const cx = (...args) => {
|
||||
const className = (0, classnames_1.classnames)(args);
|
||||
const feat27FixedClassnames = increaseSpecificityToTakePrecedenceOverMediaQuerries.fixClassName(cache, className, css);
|
||||
return merge(cache.registered, css, feat27FixedClassnames);
|
||||
//return merge(cache.registered, css, className);
|
||||
};
|
||||
return { css, cx };
|
||||
}
|
||||
return { createCssAndCx };
|
||||
})().createCssAndCx;
|
||||
/** Will pickup the contextual cache if any */
|
||||
function useCssAndCx() {
|
||||
const cache = (0, cache_1.useTssEmotionCache)();
|
||||
const { css, cx } = (0, useGuaranteedMemo_1.useGuaranteedMemo)(() => (0, exports.createCssAndCx)({ cache }), [cache]);
|
||||
return { css, cx };
|
||||
}
|
||||
exports.useCssAndCx = useCssAndCx;
|
||||
// https://github.com/garronej/tss-react/issues/27
|
||||
const increaseSpecificityToTakePrecedenceOverMediaQuerries = (() => {
|
||||
const cssObjectMapByCache = new WeakMap();
|
||||
return {
|
||||
"saveClassNameCSSObjectMapping": (cache, className, cssObject) => {
|
||||
let cssObjectMap = cssObjectMapByCache.get(cache);
|
||||
if (cssObjectMap === undefined) {
|
||||
cssObjectMap = new Map();
|
||||
cssObjectMapByCache.set(cache, cssObjectMap);
|
||||
}
|
||||
cssObjectMap.set(className, cssObject);
|
||||
},
|
||||
"fixClassName": (() => {
|
||||
function fix(classNameCSSObjects) {
|
||||
let isThereAnyMediaQueriesInPreviousClasses = false;
|
||||
return classNameCSSObjects.map(([className, cssObject]) => {
|
||||
if (cssObject === undefined) {
|
||||
return className;
|
||||
}
|
||||
let out;
|
||||
if (!isThereAnyMediaQueriesInPreviousClasses) {
|
||||
out = className;
|
||||
for (const key in cssObject) {
|
||||
if (key.startsWith("@media")) {
|
||||
isThereAnyMediaQueriesInPreviousClasses = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
out = {
|
||||
"&&": cssObject,
|
||||
};
|
||||
}
|
||||
return out;
|
||||
});
|
||||
}
|
||||
return (cache, className, css) => {
|
||||
const cssObjectMap = cssObjectMapByCache.get(cache);
|
||||
return (0, classnames_1.classnames)(fix(className
|
||||
.split(" ")
|
||||
.map(className => [
|
||||
className,
|
||||
cssObjectMap === null || cssObjectMap === void 0 ? void 0 : cssObjectMap.get(className),
|
||||
])).map(classNameOrCSSObject => typeof classNameOrCSSObject === "string"
|
||||
? classNameOrCSSObject
|
||||
: css(classNameOrCSSObject)));
|
||||
};
|
||||
})(),
|
||||
};
|
||||
})();
|
||||
Generated
Vendored
+27
@@ -0,0 +1,27 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.createMakeAndWithStyles = exports.TssCacheProvider = exports.getTssDefaultEmotionCache = exports.GlobalStyles = exports.keyframes = exports.createWithStyles = exports.createMakeStyles = exports.useMergedClasses = exports.useCssAndCx = void 0;
|
||||
/** @see <https://docs.tss-react.dev/api-references> */
|
||||
var cssAndCx_1 = require("./cssAndCx");
|
||||
Object.defineProperty(exports, "useCssAndCx", { enumerable: true, get: function () { return cssAndCx_1.useCssAndCx; } });
|
||||
var mergeClasses_1 = require("./mergeClasses");
|
||||
Object.defineProperty(exports, "useMergedClasses", { enumerable: true, get: function () { return mergeClasses_1.useMergedClasses; } });
|
||||
const makeStyles_1 = require("./makeStyles");
|
||||
Object.defineProperty(exports, "createMakeStyles", { enumerable: true, get: function () { return makeStyles_1.createMakeStyles; } });
|
||||
const withStyles_1 = require("./withStyles");
|
||||
Object.defineProperty(exports, "createWithStyles", { enumerable: true, get: function () { return withStyles_1.createWithStyles; } });
|
||||
/** @see <https://docs.tss-react.dev/api-references/keyframes> */
|
||||
var react_1 = require("@emotion/react");
|
||||
Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return react_1.keyframes; } });
|
||||
/** @see <https://docs.tss-react.dev/api-references/globalstyles> */
|
||||
var GlobalStyles_1 = require("./GlobalStyles");
|
||||
Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return GlobalStyles_1.GlobalStyles; } });
|
||||
/** @see <https://docs.tss-react.dev/cache> */
|
||||
var cache_1 = require("./cache");
|
||||
Object.defineProperty(exports, "getTssDefaultEmotionCache", { enumerable: true, get: function () { return cache_1.getTssDefaultEmotionCache; } });
|
||||
Object.defineProperty(exports, "TssCacheProvider", { enumerable: true, get: function () { return cache_1.TssCacheProvider; } });
|
||||
/** @see <https://docs.tss-react.dev/api-references/makestyles-usestyles> */
|
||||
function createMakeAndWithStyles(params) {
|
||||
return Object.assign(Object.assign({}, (0, makeStyles_1.createMakeStyles)(params)), (0, withStyles_1.createWithStyles)(params));
|
||||
}
|
||||
exports.createMakeAndWithStyles = createMakeAndWithStyles;
|
||||
Generated
Vendored
+122
@@ -0,0 +1,122 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.createMakeStyles = void 0;
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
const react_1 = require("react");
|
||||
const Object_fromEntries_1 = require("./tools/polyfills/Object.fromEntries");
|
||||
const objectKeys_1 = require("./tools/objectKeys");
|
||||
const cssAndCx_1 = require("./cssAndCx");
|
||||
const getDependencyArrayRef_1 = require("./tools/getDependencyArrayRef");
|
||||
const typeGuard_1 = require("./tools/typeGuard");
|
||||
const cache_1 = require("./cache");
|
||||
const assert_1 = require("./tools/assert");
|
||||
const mergeClasses_1 = require("./mergeClasses");
|
||||
let counter = 0;
|
||||
function createMakeStyles(params) {
|
||||
const { useTheme } = params;
|
||||
/** returns useStyle. */
|
||||
function makeStyles(params) {
|
||||
const { name: nameOrWrappedName, uniqId = counter++ } = params !== null && params !== void 0 ? params : {};
|
||||
const name = typeof nameOrWrappedName !== "object"
|
||||
? nameOrWrappedName
|
||||
: Object.keys(nameOrWrappedName)[0];
|
||||
return function (cssObjectByRuleNameOrGetCssObjectByRuleName) {
|
||||
const getCssObjectByRuleName = typeof cssObjectByRuleNameOrGetCssObjectByRuleName ===
|
||||
"function"
|
||||
? cssObjectByRuleNameOrGetCssObjectByRuleName
|
||||
: () => cssObjectByRuleNameOrGetCssObjectByRuleName;
|
||||
return function useStyles(params, styleOverrides) {
|
||||
var _a, _b;
|
||||
const theme = useTheme();
|
||||
const { css, cx } = (0, cssAndCx_1.useCssAndCx)();
|
||||
const cache = (0, cache_1.useTssEmotionCache)();
|
||||
let classes = (0, react_1.useMemo)(() => {
|
||||
const refClassesCache = {};
|
||||
const refClasses = typeof Proxy !== "undefined" &&
|
||||
new Proxy({}, {
|
||||
"get": (_target, propertyKey) => {
|
||||
if (typeof propertyKey === "symbol") {
|
||||
(0, assert_1.assert)(false);
|
||||
}
|
||||
return (refClassesCache[propertyKey] = `${cache.key}-${uniqId}${name !== undefined ? `-${name}` : ""}-${propertyKey}-ref`);
|
||||
},
|
||||
});
|
||||
const cssObjectByRuleName = getCssObjectByRuleName(theme, params, refClasses || {});
|
||||
const classes = (0, Object_fromEntries_1.objectFromEntries)((0, objectKeys_1.objectKeys)(cssObjectByRuleName).map(ruleName => {
|
||||
const cssObject = cssObjectByRuleName[ruleName];
|
||||
if (!cssObject.label) {
|
||||
cssObject.label = `${name !== undefined ? `${name}-` : ""}${ruleName}`;
|
||||
}
|
||||
return [
|
||||
ruleName,
|
||||
`${css(cssObject)}${(0, typeGuard_1.typeGuard)(ruleName, ruleName in refClassesCache)
|
||||
? ` ${refClassesCache[ruleName]}`
|
||||
: ""}`,
|
||||
];
|
||||
}));
|
||||
(0, objectKeys_1.objectKeys)(refClassesCache).forEach(ruleName => {
|
||||
if (ruleName in classes) {
|
||||
return;
|
||||
}
|
||||
classes[ruleName] =
|
||||
refClassesCache[ruleName];
|
||||
});
|
||||
return classes;
|
||||
}, [cache, css, cx, theme, (0, getDependencyArrayRef_1.getDependencyArrayRef)(params)]);
|
||||
const propsClasses = styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.props.classes;
|
||||
{
|
||||
classes = (0, react_1.useMemo)(() => (0, mergeClasses_1.mergeClasses)(classes, propsClasses, cx), [classes, (0, getDependencyArrayRef_1.getDependencyArrayRef)(propsClasses), cx]);
|
||||
}
|
||||
{
|
||||
let cssObjectByRuleNameOrGetCssObjectByRuleName = undefined;
|
||||
try {
|
||||
cssObjectByRuleNameOrGetCssObjectByRuleName =
|
||||
name !== undefined
|
||||
? (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b.styleOverrides
|
||||
: undefined;
|
||||
// eslint-disable-next-line no-empty
|
||||
}
|
||||
catch (_c) { }
|
||||
const themeClasses = (0, react_1.useMemo)(() => {
|
||||
if (!cssObjectByRuleNameOrGetCssObjectByRuleName) {
|
||||
return undefined;
|
||||
}
|
||||
const themeClasses = {};
|
||||
for (const ruleName in cssObjectByRuleNameOrGetCssObjectByRuleName) {
|
||||
const cssObjectOrGetCssObject = cssObjectByRuleNameOrGetCssObjectByRuleName[ruleName];
|
||||
if (!(cssObjectOrGetCssObject instanceof Object)) {
|
||||
continue;
|
||||
}
|
||||
themeClasses[ruleName] = css(typeof cssObjectOrGetCssObject === "function"
|
||||
? cssObjectOrGetCssObject(Object.assign({ theme, "ownerState": styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.ownerState }, styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.props))
|
||||
: cssObjectOrGetCssObject);
|
||||
}
|
||||
return themeClasses;
|
||||
}, [
|
||||
cssObjectByRuleNameOrGetCssObjectByRuleName ===
|
||||
undefined
|
||||
? undefined
|
||||
: JSON.stringify(cssObjectByRuleNameOrGetCssObjectByRuleName),
|
||||
(0, getDependencyArrayRef_1.getDependencyArrayRef)(styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.props),
|
||||
(0, getDependencyArrayRef_1.getDependencyArrayRef)(styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.ownerState),
|
||||
css,
|
||||
]);
|
||||
classes = (0, react_1.useMemo)(() => (0, mergeClasses_1.mergeClasses)(classes, themeClasses, cx), [classes, themeClasses, cx]);
|
||||
}
|
||||
return {
|
||||
classes,
|
||||
theme,
|
||||
css,
|
||||
cx,
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
function useStyles() {
|
||||
const theme = useTheme();
|
||||
const { css, cx } = (0, cssAndCx_1.useCssAndCx)();
|
||||
return { theme, css, cx };
|
||||
}
|
||||
return { makeStyles, useStyles };
|
||||
}
|
||||
exports.createMakeStyles = createMakeStyles;
|
||||
Generated
Vendored
+35
@@ -0,0 +1,35 @@
|
||||
"use strict";
|
||||
/* eslint-disable @typescript-eslint/ban-types */
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.useMergedClasses = exports.mergeClasses = void 0;
|
||||
const objectKeys_1 = require("./tools/objectKeys");
|
||||
const getDependencyArrayRef_1 = require("./tools/getDependencyArrayRef");
|
||||
const cssAndCx_1 = require("./cssAndCx");
|
||||
const react_1 = require("react");
|
||||
function mergeClasses(classesFromUseStyles, classesFromProps, cx) {
|
||||
//NOTE: We use this test to be resilient in case classesFromProps is not of the expected type.
|
||||
if (!(classesFromProps instanceof Object)) {
|
||||
return classesFromUseStyles;
|
||||
}
|
||||
const out = {};
|
||||
(0, objectKeys_1.objectKeys)(classesFromUseStyles).forEach(ruleName => (out[ruleName] = cx(classesFromUseStyles[ruleName], classesFromProps[ruleName])));
|
||||
(0, objectKeys_1.objectKeys)(classesFromProps).forEach(ruleName => {
|
||||
if (ruleName in classesFromUseStyles) {
|
||||
return;
|
||||
}
|
||||
const className = classesFromProps[ruleName];
|
||||
//...Same here, that why we don't do className === undefined
|
||||
if (typeof className !== "string") {
|
||||
return;
|
||||
}
|
||||
out[ruleName] = className;
|
||||
});
|
||||
return out;
|
||||
}
|
||||
exports.mergeClasses = mergeClasses;
|
||||
function useMergedClasses(classes, classesOv) {
|
||||
const { cx } = (0, cssAndCx_1.useCssAndCx)();
|
||||
return (0, react_1.useMemo)(() => mergeClasses(classes, classesOv, cx), [classes, (0, getDependencyArrayRef_1.getDependencyArrayRef)(classesOv), cx]);
|
||||
}
|
||||
exports.useMergedClasses = useMergedClasses;
|
||||
Generated
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.assert = void 0;
|
||||
/** https://docs.tsafe.dev/assert */
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
function assert(condition, msg) {
|
||||
if (!condition) {
|
||||
throw new Error(msg);
|
||||
}
|
||||
}
|
||||
exports.assert = assert;
|
||||
Generated
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.capitalize = void 0;
|
||||
/** @see <https://docs.tsafe.dev/capitalize> */
|
||||
function capitalize(str) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
return (str.charAt(0).toUpperCase() + str.slice(1));
|
||||
}
|
||||
exports.capitalize = capitalize;
|
||||
Generated
Vendored
+54
@@ -0,0 +1,54 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.classnames = void 0;
|
||||
const assert_1 = require("./assert");
|
||||
const typeGuard_1 = require("./typeGuard");
|
||||
/** Copy pasted from
|
||||
* https://github.com/emotion-js/emotion/blob/23f43ab9f24d44219b0b007a00f4ac681fe8712e/packages/react/src/class-names.js#L17-L63
|
||||
**/
|
||||
const classnames = (args) => {
|
||||
const len = args.length;
|
||||
let i = 0;
|
||||
let cls = "";
|
||||
for (; i < len; i++) {
|
||||
const arg = args[i];
|
||||
if (arg == null)
|
||||
continue;
|
||||
let toAdd;
|
||||
switch (typeof arg) {
|
||||
case "boolean":
|
||||
break;
|
||||
case "object": {
|
||||
if (Array.isArray(arg)) {
|
||||
toAdd = (0, exports.classnames)(arg);
|
||||
}
|
||||
else {
|
||||
(0, assert_1.assert)(!(0, typeGuard_1.typeGuard)(arg, false));
|
||||
if (process.env.NODE_ENV !== "production" &&
|
||||
arg.styles !== undefined &&
|
||||
arg.name !== undefined) {
|
||||
console.error("You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n" +
|
||||
"`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.");
|
||||
}
|
||||
toAdd = "";
|
||||
for (const k in arg) {
|
||||
if (arg[k] && k) {
|
||||
toAdd && (toAdd += " ");
|
||||
toAdd += k;
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
toAdd = arg;
|
||||
}
|
||||
}
|
||||
if (toAdd) {
|
||||
cls && (cls += " ");
|
||||
cls += toAdd;
|
||||
}
|
||||
}
|
||||
return cls;
|
||||
};
|
||||
exports.classnames = classnames;
|
||||
Generated
Vendored
+42
@@ -0,0 +1,42 @@
|
||||
"use strict";
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.getDependencyArrayRef = void 0;
|
||||
/**
|
||||
* useEffect(
|
||||
* ()=> { ... },
|
||||
* [ { "foo": "bar" } ]
|
||||
* )
|
||||
* => The callback will be invoked every render.
|
||||
* because { "foo": "bar" } is a new instance every render.
|
||||
*
|
||||
* useEffect(
|
||||
* ()=> { ... },
|
||||
* [ getDependencyArrayRef({ "foo": "bar" }) ]
|
||||
* );
|
||||
* => The callback will only be invoked once.
|
||||
*
|
||||
* The optimization will be enabled only if obj is
|
||||
* of the form Record<string, string | number | undefined | null>
|
||||
* overwise the object is returned (the function is the identity function).
|
||||
*/
|
||||
function getDependencyArrayRef(obj) {
|
||||
if (!(obj instanceof Object) || typeof obj === "function") {
|
||||
return obj;
|
||||
}
|
||||
const arr = [];
|
||||
for (const key in obj) {
|
||||
const value = obj[key];
|
||||
const typeofValue = typeof value;
|
||||
if (!(typeofValue === "string" ||
|
||||
(typeofValue === "number" && !isNaN(value)) ||
|
||||
typeofValue === "boolean" ||
|
||||
value === undefined ||
|
||||
value === null)) {
|
||||
return obj;
|
||||
}
|
||||
arr.push(`${key}:${typeofValue}_${value}`);
|
||||
}
|
||||
return "xSqLiJdLMd9s" + arr.join("|");
|
||||
}
|
||||
exports.getDependencyArrayRef = getDependencyArrayRef;
|
||||
Generated
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.objectKeys = void 0;
|
||||
/** Object.keys() with types */
|
||||
function objectKeys(o) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
return Object.keys(o);
|
||||
}
|
||||
exports.objectKeys = objectKeys;
|
||||
Generated
Vendored
+18
@@ -0,0 +1,18 @@
|
||||
"use strict";
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.objectFromEntries = void 0;
|
||||
exports.objectFromEntries = !Object
|
||||
.fromEntries
|
||||
? (entries) => {
|
||||
if (!entries || !entries[Symbol.iterator]) {
|
||||
throw new Error("Object.fromEntries() requires a single iterable argument");
|
||||
}
|
||||
const o = {};
|
||||
Object.keys(entries).forEach(key => {
|
||||
const [k, v] = entries[key];
|
||||
o[k] = v;
|
||||
});
|
||||
return o;
|
||||
}
|
||||
: Object.fromEntries;
|
||||
Generated
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
"use strict";
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.typeGuard = void 0;
|
||||
/** https://docs.tsafe.dev/typeguard */
|
||||
function typeGuard(_value, isMatched) {
|
||||
return isMatched;
|
||||
}
|
||||
exports.typeGuard = typeGuard;
|
||||
Generated
Vendored
+19
@@ -0,0 +1,19 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.useGuaranteedMemo = void 0;
|
||||
const react_1 = require("react");
|
||||
/** Like react's useMemo but with guarantee that the fn
|
||||
* won't be invoked again if deps hasn't change */
|
||||
function useGuaranteedMemo(fn, deps) {
|
||||
const ref = (0, react_1.useRef)();
|
||||
if (!ref.current ||
|
||||
deps.length !== ref.current.prevDeps.length ||
|
||||
ref.current.prevDeps.map((v, i) => v === deps[i]).indexOf(false) >= 0) {
|
||||
ref.current = {
|
||||
"v": fn(),
|
||||
"prevDeps": [...deps],
|
||||
};
|
||||
}
|
||||
return ref.current.v;
|
||||
}
|
||||
exports.useGuaranteedMemo = useGuaranteedMemo;
|
||||
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.matchCSSObject = void 0;
|
||||
function matchCSSObject(arg) {
|
||||
return (arg instanceof Object &&
|
||||
!("styles" in arg) &&
|
||||
!("length" in arg) &&
|
||||
!("__emotion_styles" in arg));
|
||||
}
|
||||
exports.matchCSSObject = matchCSSObject;
|
||||
Generated
Vendored
+99
@@ -0,0 +1,99 @@
|
||||
"use strict";
|
||||
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
||||
if (k2 === undefined) k2 = k;
|
||||
var desc = Object.getOwnPropertyDescriptor(m, k);
|
||||
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
||||
desc = { enumerable: true, get: function() { return m[k]; } };
|
||||
}
|
||||
Object.defineProperty(o, k2, desc);
|
||||
}) : (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 __rest = (this && this.__rest) || function (s, e) {
|
||||
var t = {};
|
||||
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
||||
t[p] = s[p];
|
||||
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
||||
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
||||
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
||||
t[p[i]] = s[p[i]];
|
||||
}
|
||||
return t;
|
||||
};
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.createWithStyles = void 0;
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
const react_1 = __importStar(require("react"));
|
||||
const makeStyles_1 = require("./makeStyles");
|
||||
const capitalize_1 = require("./tools/capitalize");
|
||||
function createWithStyles(params) {
|
||||
const { useTheme } = params;
|
||||
const { makeStyles } = (0, makeStyles_1.createMakeStyles)({ useTheme });
|
||||
function withStyles(Component, cssObjectByRuleNameOrGetCssObjectByRuleName, params) {
|
||||
const Component_ = typeof Component === "string"
|
||||
? (() => {
|
||||
const tag = Component;
|
||||
const Out = function (_a) {
|
||||
var { children } = _a, props = __rest(_a, ["children"]);
|
||||
return (0, react_1.createElement)(tag, props, children);
|
||||
};
|
||||
Object.defineProperty(Out, "name", {
|
||||
"value": (0, capitalize_1.capitalize)(tag),
|
||||
});
|
||||
return Out;
|
||||
})()
|
||||
: Component;
|
||||
const name = (() => {
|
||||
const { name } = Component_;
|
||||
return typeof name === "string" ? name : undefined;
|
||||
})();
|
||||
const useStyles = makeStyles(params)(typeof cssObjectByRuleNameOrGetCssObjectByRuleName === "function"
|
||||
? (theme, props, classes) => incorporateMediaQueries(cssObjectByRuleNameOrGetCssObjectByRuleName(theme, props, classes))
|
||||
: incorporateMediaQueries(cssObjectByRuleNameOrGetCssObjectByRuleName));
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const Out = (0, react_1.forwardRef)(function (props, ref) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { className, classes: _classes } = props, rest = __rest(props, ["className", "classes"]);
|
||||
const { classes, cx } = useStyles(props, { props });
|
||||
return (react_1.default.createElement(Component_, Object.assign({ ref: ref, className: cx(classes.root, className) }, (typeof Component === "string" ? {} : { classes }), rest)));
|
||||
});
|
||||
if (name !== undefined) {
|
||||
Object.defineProperty(Out, "name", {
|
||||
"value": `${name}WithStyles`,
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
return Out;
|
||||
}
|
||||
return { withStyles };
|
||||
}
|
||||
exports.createWithStyles = createWithStyles;
|
||||
function incorporateMediaQueries(cssObjectByRuleNameWithMediaQueries) {
|
||||
const cssObjectByRuleName = {};
|
||||
const cssObjectByRuleNameWithMediaQueriesByMediaQuery = {};
|
||||
Object.keys(cssObjectByRuleNameWithMediaQueries).forEach(ruleNameOrMediaQuery => ((ruleNameOrMediaQuery.startsWith("@media")
|
||||
? cssObjectByRuleNameWithMediaQueriesByMediaQuery
|
||||
: cssObjectByRuleName)[ruleNameOrMediaQuery] =
|
||||
cssObjectByRuleNameWithMediaQueries[ruleNameOrMediaQuery]));
|
||||
Object.keys(cssObjectByRuleNameWithMediaQueriesByMediaQuery).forEach(mediaQuery => {
|
||||
const cssObjectByRuleNameBis = cssObjectByRuleNameWithMediaQueriesByMediaQuery[mediaQuery];
|
||||
Object.keys(cssObjectByRuleNameBis).forEach(ruleName => {
|
||||
var _a;
|
||||
return (cssObjectByRuleName[ruleName] = Object.assign(Object.assign({}, ((_a = cssObjectByRuleName[ruleName]) !== null && _a !== void 0 ? _a : {})), { [mediaQuery]: cssObjectByRuleNameBis[ruleName] }));
|
||||
});
|
||||
});
|
||||
return cssObjectByRuleName;
|
||||
}
|
||||
Reference in New Issue
Block a user