- \r\n {playersOnline.map(({id, name, waitOtherPlayers, }, index) => (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n setTeamName(target.value)}\r\n onFocus={handleTeamNameFocus}\r\n onBlur={handleTeamNameBlur}\r\n className={classes.teamNameInput}\r\n variant=\"outlined\"\r\n label={tr(t, 'label-current-team-name')}\r\n size=\"small\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {tr(t, 'btn-roll-the-dice')}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n setTeamName(target.value)}\r\n onFocus={handleTeamNameFocus}\r\n onBlur={handleTeamNameBlur}\r\n className={classes.teamNameInput}\r\n variant=\"outlined\"\r\n label={tr(t, 'label-current-team-name')}\r\n size=\"small\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {tr(t, 'btn-roll-the-dice')}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n setTeamName(target.value)}\r\n onFocus={handleTeamNameFocus}\r\n onBlur={handleTeamNameBlur}\r\n className={classes.teamNameInput}\r\n variant=\"outlined\"\r\n label={tr(t, 'label-current-team-name')}\r\n size=\"small\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {tr(t, 'btn-roll-the-dice')}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n setTeamName(target.value)}\r\n onFocus={handleTeamNameFocus}\r\n onBlur={handleTeamNameBlur}\r\n className={classes.teamNameInput}\r\n variant=\"outlined\"\r\n label={tr(t, 'label-current-team-name')}\r\n size=\"small\"\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {tr(t, 'btn-roll-the-dice')}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n {content} {total ? `/ ${total}`: ''}\r\n \r\n \r\n
\r\n );\r\n};\r\nconst HexagonTime = ({ content, total, backgroundColor = \"white\", textColor = \"#4b4c4d\", size = 40, fontSize = 110}) => {\r\n const flexDisplay = { display: \"flex\", flexDirection: \"column\" };\r\n const stickToBottom = { marginTop: \"auto\" };\r\n\r\n return (\r\n \r\n \r\n \r\n {content} \r\n \r\n \r\n /\r\n \r\n \r\n {total} \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst useStyles = makeStyles(() => ({\r\n root: {\r\n marginBottom: 10,\r\n minWidth: '150px',\r\n minHeight: '200px',\r\n borderRadius: '10px',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'space-between'\r\n },\r\n content:{\r\n padding: 10,\r\n paddingBottom: 0,\r\n fontSize: '18px',\r\n },\r\n title: {\r\n fontSize: 15,\r\n },\r\n storyPoints: {\r\n color: '#47B817',\r\n }\r\n}));\r\n\r\nconst Header = styled(CardHeader)`\r\n && {\r\n background-color: #47B817;\r\n padding: 3px;\r\n & .MuiCardHeader-content,\r\n & .MuiCardHeader-title {\r\n display: flex;\r\n padding-left: 3px;\r\n }\r\n & .MuiCardHeader-content{\r\n position: relative;\r\n }\r\n & .MuiCardHeader-subheader {\r\n position: absolute;\r\n top: 14px;\r\n right: 10pt;\r\n font-weight: 700;\r\n font-size: 20pt;\r\n color: white;\r\n }\r\n }\r\n`;\r\n\r\nconst Content = styled(CardContent)`\r\n display: flex;\r\n justify-content: space-between;\r\n flex-grow: 1;\r\n padding-bottom: 0px;\r\n margin-bottom: 0px;\r\n`;\r\n\r\nconst Assignees = styled(CardActions)`\r\n flex-wrap: wrap;\r\n & .MuiChip-root {\r\n margin-top: 8px;\r\n }\r\n`;\r\nconst MoveToColumnButtons = styled(CardActions)`\r\n flex-wrap: wrap;\r\n & .MuiChip-root {\r\n margin-top: 8px;\r\n }\r\n`;\r\n\r\nconst AlertIcon = styled.div`\r\n background: url('${alertIconUrl}') no-repeat;\r\n background-position: center;\r\n background-size: cover;\r\n height: 35px;\r\n width: 35px;\r\n filter: brightness(0) saturate(100%) invert(77%) sepia(32%) saturate(2994%) hue-rotate(320deg) brightness(96%) contrast(98%);\r\n`;\r\n\r\nconst IconsColumn = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n`;\r\n\r\nconst Assignee = ({ accented, ...props }) => {\r\n const accentedStyle = {\r\n backgroundColor: styles.red,\r\n color: \"white\",\r\n };\r\n\r\n return \r\n \r\n {description}\r\n \r\n \r\n {storyPointText}\r\n \r\n
\r\n \r\n \r\n {description}\r\n \r\n \r\n {storyPointText}\r\n \r\n
\r\n 
{colTitle}
\r\n \r\n {items.map((item, index) => (\r\n 0 && assignedUserStoryId !== item.id}\r\n key={item.storyId}\r\n playerId={playerId}\r\n playersOnline={playersOnline}\r\n problemExists={\r\n problems.some(\r\n (problem) =>\r\n problem.storyId === item.id && !problem.hasSolution\r\n )\r\n }\r\n problems={\r\n problems.filter(\r\n (problem) =>\r\n problem.storyId === item.id && !problem.hasSolution\r\n )\r\n }\r\n />\r\n ))}\r\n\r\n {provided.placeholder}\r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n {content}\r\n \r\n \r\n
\r\n );\r\n};\r\nexport const ShortChanceCard = ({ title, description, cardType, provided, isPositive, userStoryId }) => {\r\n const t = useFormatMessage();\r\n const { Icon, typeName, color } = getCardTypeDependentProps(cardType, isPositive, t);\r\n return (\r\n \r\n \r\n {userStoryId !== undefined ?\r\n (\r\n {tr(t, title)} \r\n {tr(t, description)}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nShortChanceCard.propTypes = {\r\n title: PropTypes.string.isRequired,\r\n description: PropTypes.string.isRequired,\r\n cardType: PropTypes.number,\r\n};\r\n\r\nconst getCardTypeDependentProps = (cardType, isPositive, t) => {\r\n if(!cardType){\r\n return {\r\n typeName: tr(t, 'card-type-solution'),\r\n Icon: AlertIcon,\r\n color: \"#ff8943\",\r\n };\r\n }\r\n const typeName = tr(t, ('card-type-' + Object.entries(ChanceCardType).find(([key, value]) => value === cardType)[0]).toLocaleLowerCase());\r\n\r\n switch (cardType) {\r\n case ChanceCardType.Problem:\r\n return {\r\n typeName,\r\n Icon: AlertIcon,\r\n color: \"#FE874B\",\r\n };\r\n\r\n case ChanceCardType.Solution:\r\n return {\r\n typeName,\r\n Icon: LightBulbIcon,\r\n color: \"#0693E3\",\r\n };\r\n\r\n case ChanceCardType.Event:\r\n return {\r\n typeName,\r\n Icon: isPositive ? EventPositiveIcon : EventNegativeIcon,\r\n color: \"#748093\",\r\n };\r\n\r\n default:\r\n return null;\r\n }\r\n};\r\n\r\nconst CardBody = styled(Card)`\r\n && {\r\n width: 250px;\r\n min-height: 130px;\r\n margin: 0 auto;\r\n color: #7c7f83;\r\n user-select: none;\r\n border-radius: 10px;\r\n font-size: 14px;\r\n & .MuiCardContent-root{\r\n padding: 5px;\r\n }\r\n }\r\n`;\r\n\r\nconst Header = styled(CardHeader)`\r\n && {\r\n background-color: ${(props) => props.color};\r\n padding: 3px 10px 3px 10px;\r\n justify-content: space-between;\r\n position: relative;\r\n \r\n & .MuiCardHeader-title {\r\n display: flex;\r\n padding-left: 3px;\r\n position: absolute;\r\n left: 41px;\r\n }\r\n & .MuiCardHeader-content {\r\n display: flex;\r\n height: 20px;\r\n flex: 0;\r\n }\r\n\r\n & .MuiCardHeader-subheader {\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n font-size: 20px;\r\n color: white;\r\n display: inline-block;\r\n right: 15px;\r\n bottom: -7px;\r\n position: absolute;\r\n }\r\n }\r\n`;\r\n\r\nconst CardTitle = styled.div`\r\n font-weight: 700;\r\n margin-bottom: 0px;\r\n font-size: 14px;\r\n`;\r\n\r\nconst LightBulbIcon = styled.div`\r\n background: url('${lightBulbIconUrl}') no-repeat;\r\n background-position: center;\r\n background-size: cover;\r\n height: 20px;\r\n width: 20px;\r\n`;\r\n\r\nconst AlertIcon = styled.div`\r\n background: url('${alertIconUrl}') no-repeat;\r\n background-position: center;\r\n background-size: cover;\r\n height: 20px;\r\n width: 20px;\r\n`;\r\n\r\nconst EventPositiveIcon = styled.div`\r\n background: url('${smileIconUrl}') no-repeat;\r\n background-position: center;\r\n background-size: cover;\r\n height: 20px;\r\n width: 20px;\r\n`;\r\n\r\nconst EventNegativeIcon = styled.div`\r\n background: url('${grumpyIconUrl}') no-repeat;\r\n background-position: center;\r\n background-size: cover;\r\n height: 20px;\r\n width: 20px;\r\n`;\r\n","import React, { useState } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport Grid from \"@material-ui/core/Grid\";\r\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\r\nimport styled from \"styled-components\";\r\n\r\nimport { ShortChanceCard } from \"../ChanceDialog/ShortChanceCard\";\r\nimport { useServiceInjector } from \"../../hooks/ServiceInjectorContext\";\r\nimport { GAME_HUB_METHODS, GAME_HUB_EVENTS } from \"../../services/GameHubConstants\";\r\nimport { useFormatMessage } from 'react-intl-hooks';\r\nimport { tr } from '../TranslateWrapper';\r\n\r\nexport const ProblemResolutionScreen = ({\r\n problems,\r\n solutions,\r\n events,\r\n canMoveCard,\r\n attachSolutionToProblem,\r\n}) => {\r\n const t = useFormatMessage();\r\n const [exceptionProblems, setExceptionProblems] = useState(null);\r\n const { connection } = useServiceInjector();\r\n const sortedProblems = [...problems].sort((f,s) => {\r\n if(f.storyKey < s.storyKey) return -1;\r\n if(f.storyKey > s.storyKey) return 1;\r\n return 0;\r\n }).filter(pr => !pr.resolved);\r\n\r\n const handleDragEnd = async (dragResult) => {\r\n const { source, destination } = dragResult;\r\n setExceptionProblems(null);\r\n if (!destination || source.droppableId === destination.droppableId) return;\r\n\r\n const solutionSequenceNumber = source.index;\r\n\r\n const fromProblemSequenceNumber =\r\n source.droppableId === solutionsPoolElementId ? null : parseInt(source.droppableId);\r\n\r\n const toProblemSequenceNumber =\r\n destination.droppableId === solutionsPoolElementId ? null : parseInt(destination.droppableId);\r\n\r\n attachSolutionToProblem({\r\n solutionSequenceNumber,\r\n fromProblemSequenceNumber,\r\n toProblemSequenceNumber,\r\n });\r\n\r\n await connection.invoke(\r\n GAME_HUB_METHODS.MoveSolutionCard, {\r\n solutionSequenceNumber,\r\n fromProblemSequenceNumber,\r\n toProblemSequenceNumber\r\n }\r\n );\r\n };\r\n const onDragStart = (ev) => {\r\n const solutionId = ev?.source?.index;\r\n if(!solutionId) {\r\n return;\r\n }\r\n const solution = solutions.find(x => x.id === solutionId);\r\n if(!solution){\r\n return;\r\n }\r\n setExceptionProblems(solution.exceptionProblems);\r\n };\r\n return (\r\n <>\r\n {tr(t, 'dlg-resolve-problems-text1')} {tr(t, 'dlg-resolve-problems-text2')} {tr(t, 'dlg-resolve-problems-text3')}\r\n \r\n
)}\r\n {solutions.length > 0 && (<>\r\n \r\n {sortedProblems.map(\r\n (problem) =>\r\n { \r\n const problemSolution = solutions.find(s => s.problemId === problem.id);\r\n const exceptionProblem = (exceptionProblems != null && exceptionProblems.indexOf(problem.originId) > -1);\r\n return !problem.resolved && (\r\n \r\n \r\n {(provided, snapshot) => (\r\n \r\n {problemSolution != null && (\r\n \r\n {(provided) => (\r\n \r\n )}\r\n {provided.placeholder}\r\n \r\n )}\r\n \r\n \r\n );}\r\n )}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n {(provided, snapshot) => (\r\n \r\n {solutions.filter(s=>!s.problemId).map(\r\n (solution, index) => (\r\n \r\n \r\n {(provided) => (\r\n \r\n )}\r\n \r\n \r\n )\r\n )}\r\n {provided.placeholder}\r\n \r\n )}\r\n \r\n
)}\r\n {events.length > 0 && (<>\r\n {events.map(\r\n (event, index) => (
)}\r\n \r\n
\r\n )\r\n )}\r\n \r\n \r\n
);\r\n};\r\nexport default StatisticPanel;","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport StatisticPanel from './statisticPanel';\r\nimport { ResultsDialog } from \".\";\r\nimport { useFormatMessage } from 'react-intl-hooks';\r\nimport { tr } from '../TranslateWrapper';\r\n\r\nexport const EndOfSprintDialog = (props) => {\r\n const t = useFormatMessage();\r\n return (\r\n \r\n
\r\n {(statistics||[]).map(s => (\r\n {tr(t, 'Iteration Sprint')}
\r\n {tr(t, 'Plan')}
\r\n {tr(t, 'Actual')}
\r\n \r\n )}\r\n {s.totalActual ? ( )}\r\n \r\n
\r\n ))}\r\n {s.sprint+1}
\r\n {s.totalPlan ? ({s.totalPlan}\r\n {s.planStories && s.planStories.length !== 0 && (<>
(#{s.planStories.join(', #')}))}
) : ((#{s.planStories.join(', #')}))}
{s.totalActual}\r\n {s.actualStories && s.actualStories.length !== 0 && (<>
(#{s.actualStories.join(', #')}))}
) : ((#{s.actualStories.join(', #')}))}
- \r\n
- {tr(t, 'dlg-sprint-finish-text1')} \r\n
- {tr(t, 'dlg-sprint-finish-text2')} \r\n
- {tr(t, 'dlg-sprint-finish-text3')} \r\n
- {tr(t, 'dlg-sprint-finish-text4')} \r\n
\r\n \r\n \r\n {content}\r\n \r\n \r\n
\r\n );\r\n};\r\nexport const ChanceCard = ({ title, description, cardType, provided, isPositive, userStoryId }) => {\r\n const t = useFormatMessage();\r\n const { Icon, typeName, color } = getCardTypeDependentProps(cardType, isPositive, t);\r\n return (\r\n \r\n \r\n {userStoryId !== undefined ?\r\n (\r\n {tr(t, title)} \r\n {tr(t, description)}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nChanceCard.propTypes = {\r\n title: PropTypes.string.isRequired,\r\n description: PropTypes.string.isRequired,\r\n cardType: PropTypes.number,\r\n};\r\n\r\nconst getCardTypeDependentProps = (cardType, isPositive, t) => {\r\n if(!cardType){\r\n return {\r\n typeName: tr(t, 'card-type-solution'),\r\n Icon: AlertIcon,\r\n color: \"#ff8943\",\r\n };\r\n }\r\n const typeName = tr(t, ('card-type-' + Object.entries(ChanceCardType).find(([key, value]) => value === cardType)[0]).toLocaleLowerCase());\r\n\r\n switch (cardType) {\r\n case ChanceCardType.Problem:\r\n return {\r\n typeName,\r\n Icon: AlertIcon,\r\n color: \"#FE874B\",\r\n };\r\n\r\n case ChanceCardType.Solution:\r\n return {\r\n typeName,\r\n Icon: LightBulbIcon,\r\n color: \"#0693E3\",\r\n };\r\n\r\n case ChanceCardType.Event:\r\n return {\r\n typeName,\r\n Icon: isPositive ? EventPositiveIcon : EventNegativeIcon,\r\n color: \"#748093\",\r\n };\r\n\r\n default:\r\n return null;\r\n }\r\n};\r\n\r\nconst CardBody = styled(Card)`\r\n && {\r\n min-width: 280px;\r\n margin: 0 auto;\r\n color: #7c7f83;\r\n user-select: none;\r\n border-radius: 10px;\r\n }\r\n`;\r\n\r\nconst Header = styled(CardHeader)`\r\n && {\r\n background-color: ${(props) => props.color};\r\n padding: 3px 20px 3px 10px;\r\n justify-content: space-between;\r\n position: relative;\r\n \r\n & .MuiCardHeader-title {\r\n display: flex;\r\n padding-left: 3px;\r\n position: absolute;\r\n left: 41pt;\r\n }\r\n & .MuiCardHeader-content {\r\n display: flex;\r\n height: 0.6em;\r\n flex: 0;\r\n }\r\n\r\n & .MuiCardHeader-subheader {\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n font-size: 20pt;\r\n color: white;\r\n display: inline-block;\r\n right: 10pt;\r\n position: absolute;\r\n }\r\n }\r\n`;\r\n\r\nconst CardTitle = styled.div`\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n`;\r\n\r\nconst LightBulbIcon = styled.div`\r\n background: url('${lightBulbIconUrl}') no-repeat;\r\n background-position: center;\r\n height: 40px;\r\n width: 40px;\r\n`;\r\n\r\nconst AlertIcon = styled.div`\r\n background: url('${alertIconUrl}') no-repeat;\r\n background-position: center;\r\n height: 40px;\r\n width: 40px;\r\n`;\r\n\r\nconst EventPositiveIcon = styled.div`\r\n background: url('${smileIconUrl}') no-repeat;\r\n background-position: center;\r\n height: 40px;\r\n width: 40px;\r\n`;\r\n\r\nconst EventNegativeIcon = styled.div`\r\n background: url('${grumpyIconUrl}') no-repeat;\r\n background-position: center;\r\n height: 40px;\r\n width: 40px;\r\n`;\r\n","import React,{useState, useEffect} from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport { ResultsDialog } from \"../ResultsDialog\";\r\nimport { ChanceCard } from \"./ChanceCard\";\r\nimport { useFormatMessage } from 'react-intl-hooks';\r\nimport { tr } from '../TranslateWrapper';\r\nlet intervalValue = 0;\r\nlet timerHandler = null;\r\nexport const ChanceDialog = ({\r\n isVisible,\r\n title,\r\n description,\r\n cardType,\r\n isPositive,\r\n defaultActionCallback,\r\n}) => {\r\n const t = useFormatMessage();\r\n const [autoPressTime, setAutoPressTime] = useState(0);\r\n const onTimer = () => {\r\n if(intervalValue <= 0){\r\n onActionHandler();\r\n return;\r\n }\r\n intervalValue--;\r\n setAutoPressTime(intervalValue);\r\n timerHandler = setTimeout(onTimer, 1000);\r\n };\r\n useEffect(() => {\r\n if(!isVisible) return;\r\n intervalValue = 15;\r\n setAutoPressTime(intervalValue);\r\n timerHandler = setTimeout(onTimer, 1000);\r\n }, [isVisible]);\r\n const onActionHandler = () => {\r\n clearTimeout(timerHandler);\r\n defaultActionCallback();\r\n };\r\n const buttonText = tr(t, 'btn-text-got-it-format').replace('#t#', autoPressTime);\r\n \r\n return (\r\n \r\n
);\r\n addToast(toastContent, { appearance: appearance, autoDismiss: true });\r\n };\r\n useEffect(() => {\r\n realtimeConnection.on(\r\n GAME_HUB_EVENTS.PlayerMadeMove,\r\n handleMadeMove,\r\n );\r\n return () => {\r\n realtimeConnection.off(GAME_HUB_EVENTS.PlayerMadeMove);\r\n };\r\n }, [playerId, assignedUserStoryId, memoizedSetAssignedUserStoryId, playersOnline]);\r\n const handleMadeMove = ({ userId, userStoryId, newStoryPoints, cartType, cart, gameInfo }) => {\r\n if (cartType === ChanceCardType.Problem) {\r\n dispatchProblemsSolutions({\r\n type: problemsSolutionsActions.ADD_PROBLEM,\r\n payload: { problem: cart },\r\n });\r\n }\r\n \r\n if (cartType === ChanceCardType.Solution) {\r\n dispatchProblemsSolutions({\r\n type: problemsSolutionsActions.ADD_SOLUTION,\r\n payload: { \r\n solution: cart\r\n },\r\n });\r\n }\r\n dispatchUserStories({\r\n type: userStoriesActions.CHANGE_STORY_POINTS,\r\n payload: { userStoryId, newStoryPoints },\r\n });\r\n if(userId === playerId){\r\n setCurrentChanceCard(cart);\r\n }\r\n showchanceCardToast(cart, cartType, userId);\r\n handleNewGamePhase(gameInfo);\r\n };\r\n const handleNewGamePhase = (response) => {\r\n let currentPlayer = response?.players?.find(p=> p.id === playerId);\r\n if (currentPlayer.isTerminated) {\r\n\r\n history.push({\r\n pathname: `/${locale || 'en'}/join/${sessionId}`,\r\n state: { isHost: false, logining: false }\r\n });\r\n return;\r\n }\r\n setAssignedUserStoryId(currentPlayer?.assignedUserStoryId);\r\n setCanRollTheDice(currentPlayer?.canRollTheDice || false);\r\n setIsHost(currentPlayer?.isHost);\r\n setLockMessage(currentPlayer?.LockMessage);\r\n setWaitingForOtherPlayers(currentPlayer?.waitOtherPlayers || false);\r\n setIsSpectator(currentPlayer?.isSpectator);\r\n setPlayersOnline(response?.players);\r\n\r\n setInitialBoardColumns(response.boardColumns);\r\n setStatistics(response.sprintStatistics);\r\n setGameProgress(response.gameProgress);\r\n setEndOfDayDialogOpen(response?.dayIsFinished || false);\r\n setEndOfSprintDialogOpen(response?.sprintJustFinished || false);\r\n setEndOfGameReached(response?.isEndOfGameReached || false);\r\n initializeUserStories({ userStories: response?.userStories }, dispatchUserStories);\r\n initializeProblemsSolutions(dispatchProblemsSolutions, {\r\n problems: response.problems, \r\n solutions: response.solutions, \r\n events: response.events,\r\n });\r\n };\r\n useEffect(() => {\r\n\r\n realtimeConnection.on(GAME_HUB_EVENTS.NextGamePhaseStarted, handleNewGamePhase);\r\n\r\n return () => {\r\n realtimeConnection.off(GAME_HUB_EVENTS.NextGamePhaseStarted);\r\n };\r\n }, [isEndOfDayDialogOpen, isEndOfSprintDialogOpen, currentChanceCard, playersOnline, userStories,\r\n isWaitingForOtherPlayers, assignedUserStoryId, isEndOfGameReached, canRollTheDice]);\r\n const onAddUserAssignment = (userAssignmentInfo) => {\r\n addPlayerAssignment(dispatchUserStories, userAssignmentInfo);\r\n setStoryToCurrentPlayer(userAssignmentInfo.currentUserStoryId);\r\n };\r\n const onAssignUserStory = (userStoryId) => {\r\n setAssignedUserStoryId(userStoryId);\r\n if (userStoryId !== null && !isWaitingForOtherPlayers\r\n && userStories[userStoryId] && userStories[userStoryId].storyPoints > 0)\r\n setCanRollTheDice(true);\r\n setInfoMessage(null);\r\n };\r\n useEffect(() => {\r\n \r\n if(isEndOfDayDialogOpen){\r\n AmplitudeService.SendEndDay(playerId, playerName, isSpectator, isHost, sessionId, null)\r\n }\r\n if (isEndOfSprintDialogOpen) {\r\n AmplitudeService.SendEndSprint(playerId, playerName, isSpectator, isHost, sessionId, null)\r\n }\r\n }, [isEndOfDayDialogOpen, isEndOfSprintDialogOpen]);\r\n \r\n useEffect(() => {\r\n if(!isWaitingForOtherPlayers && (!assignedUserStoryId \r\n || !userStories[assignedUserStoryId]\r\n || userStories[assignedUserStoryId].storyPoints <= 0)\r\n && !isEndOfDayDialogOpen\r\n && !isEndOfSprintDialogOpen\r\n && !currentChanceCard\r\n && !isEndOfGameReached\r\n && playersOnline.length\r\n && !canRollTheDice){\r\n setInfoMessage('notify-player-no-story');\r\n } else {\r\n setInfoMessage(null);\r\n }\r\n }, [isWaitingForOtherPlayers, assignedUserStoryId, playersOnline, userStories, isEndOfDayDialogOpen, isEndOfSprintDialogOpen, currentChanceCard, isEndOfGameReached, canRollTheDice]);\r\n\r\n useEffect(() => {\r\n realtimeConnection.on(\r\n GAME_HUB_EVENTS.SolutionCardMoved,\r\n ({ solutionSequenceNumber, fromProblemSequenceNumber, toProblemSequenceNumber }) => {\r\n attachSolutionToProblem(dispatchProblemsSolutions, {\r\n solutionSequenceNumber,\r\n fromProblemSequenceNumber,\r\n toProblemSequenceNumber,\r\n });\r\n }\r\n );\r\n\r\n return () => {\r\n realtimeConnection.off(GAME_HUB_EVENTS.SolutionCardMoved);\r\n };\r\n }, [attachSolutionToProblem, playersOnline]);\r\n const onClosePlayer = (id) => {\r\n realtimeConnection.invokeIgnore(GAME_HUB_METHODS.TerminatePlayer, {playerId: id}).then(() => {\r\n });\r\n };\r\n return (\r\n <>\r\n {lockMessage && ({tr(t, 'lbl-player')} {playerName}
\r\n{tr(t, card.title)}
\r\n{tr(t, card.description)}
\r\n{tr(t, lockMessage)}
)}\r\n {infoMessage && ({tr(t, infoMessage)}
)}\r\n \r\n\r\n setProfileCode(target.value)}>\r\n {profiles.map(x => {\r\n return ();\r\n })}\r\n \r\n
\r\n \r\n {languages.map(x => ( goToLanguage(x)}>\r\n {x}\r\n
))}\r\n \r\n );\r\n};","import React,{useState, useEffect} from \"react\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport moment from \"moment\";\r\nimport { CreateGameForm } from \"./CreateGameForm\";\r\nimport { Link } from \"react-router-dom\";\r\nimport { realtimeConnection, ResponseStatus } from \"../services/realtimeConnection\";\r\nimport { GAME_HUB_METHODS } from \"../services/GameHubConstants\";\r\nimport { useServiceInjector } from \"../hooks/ServiceInjectorContext\";\r\nimport { LogoLoader } from \"./LogoLoader\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport logoUri from \"../assets/icons/scgo-logo.svg\";\r\nimport mainImageUrl from \"../assets/icons/create-new-game-main-image.svg\";\r\nimport ImageUrl1 from \"../assets/icons/create-new-game-image1.svg\";\r\nimport ImageUrl2 from \"../assets/icons/create-new-game-image2.svg\";\r\nimport ImageUrl3 from \"../assets/icons/create-new-game-image3.svg\";\r\nimport ImageUrl4 from \"../assets/icons/create-new-game-image4.svg\";\r\nimport TranslateWrapper from './TranslateWrapper';\r\nimport { useFormatMessage } from 'react-intl-hooks';\r\nimport { tr } from './TranslateWrapper';\r\nimport { useParams } from \"react-router-dom\";\r\nimport {LanguageSelector} from './languageSelector';\r\nimport imgLogOut from \"../assets/icons/user-header-gray.png\";\r\n\r\nimport { AmplitudeService } from \"../services/AmplitudeService\";\r\nimport { useGameContext } from \"../hooks/GameContext\";\r\n\r\nconst dialogContainerStyle = { maxWidth: \"1024px\", margin: \"20px auto\", padding: \"15px\" };\r\n\r\nconst useStyles = makeStyles(() => ({\r\n page: {\r\n },\r\n header: {\r\n width: \"100%\",\r\n display: \"flex\",\r\n justifyContent: 'space-between',\r\n padding: '7pt'\r\n },\r\n logoutForm: {\r\n width: \"auto\",\r\n },\r\n logoutButton: {\r\n fontSize: '14px',\r\n height: '30px',\r\n width: '30px',\r\n lineHeight: '30px',\r\n textAlign: 'center',\r\n border: '1px solid #9ca6b2',\r\n borderRadius: '100%',\r\n marginTop: '5px',\r\n cursor: 'pointer'\r\n },\r\n logoContainer: {\r\n alignItems: \"center\",\r\n display: \"flex\",\r\n width: \"220px\",\r\n paddingRight: '5px',\r\n marginRight: '10px'\r\n },\r\n logo: {\r\n background: `url(${logoUri}) no-repeat`,\r\n backgroundSize: \"contain\",\r\n backgroundPosition: \"center\",\r\n width: 180,\r\n height: 100,\r\n margin: \"0 10px\",\r\n },\r\n}));\r\n\r\nconst SessionStartScreenComponent = ({ history }) => {\r\n const { jwtTokenService } = useServiceInjector();\r\n const { locale } = useParams();\r\n const [loaded, setLoaded] = useState(false);\r\n const [showAll, setShowAll] = useState(false);\r\n const [sessions, setSessions] = useState([]);\r\n const [profiles, setProfiles] = useState([]);\r\n const t = useFormatMessage();\r\n const classes = useStyles();\r\n sessionStorage.setItem('createGame', 'on');\r\n \r\n const {\r\n player: { playerId, setIsSpectator, setIsHost, setPlayerId, setPlayerName, assignedUserStoryId, setAssignedUserStoryId },\r\n } = useGameContext();\r\n \r\n const createNewGameSession = async (name, profileCode, hostMode) => {\r\n setLoaded(true);\r\n await jwtTokenService.login(name);\r\n await realtimeConnection.stop();\r\n await realtimeConnection.start();\r\n\r\n realtimeConnection.setAmlitudeErrorHandler((error) => AmplitudeService.SendCreateGame(playerId, name, hostMode !== 'player', true, null, profileCode, {'error_type':error}));\r\n const { payload, status, hasErrors } = await realtimeConnection.invoke(GAME_HUB_METHODS.CreateSession, {\r\n name,\r\n profileCode,\r\n isSpectator: hostMode !== 'player',\r\n locale: locale || 'en',\r\n contry:null,\r\n region:null,\r\n });\r\n \r\n \r\n setLoaded(false);\r\n realtimeConnection\r\n .setSessionId(null);\r\n if(status === ResponseStatus.SubscriptionSingleGame){\r\n history.push({\r\n pathname: `/onlySingleGame`\r\n });\r\n return;\r\n }\r\n if(hasErrors){\r\n return;\r\n }\r\n history.push({\r\n pathname: `/${locale || 'en'}/start-game/${payload.sessionId}`,\r\n state: { isHost: true, logining: true }\r\n });\r\n setIsSpectator(hostMode !== 'player');\r\n setIsHost(true);\r\n AmplitudeService.SendCreateGame(playerId, name, hostMode !== 'player', true, payload.sessionId, profileCode)\r\n \r\n };\r\n \r\n useEffect(() => {\r\n jwtTokenService.loadGameProfiles().then((profiles)=> { setProfiles(profiles); })\r\n jwtTokenService.loadSessions().then((sessions) => { setSessions(sessions || []); })\r\n }, []);\r\n if(loaded){\r\n return \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {tr(t, 'start-new-game-page-title')}
\r\n\r\n 
\r\n
\r\n {viewSessions.length ? (\r\n createNewGameSession(playerName, profileCode, hostMode)}\r\n submitButtonText={tr(t, 'start-new-game-btn-start-game')} profiles={profiles}\r\n />\r\n
\r\n \r\n
) : null}\r\n {tr(t, 'previous-games')}
\r\n\r\n {viewSessions.map(s => {\r\n return (
\r\n {sessions.length > 3 ? () : null }\r\n \r\n
);\r\n })} \r\n {tr(t, 'session-item-lbl-key')} {s.key}
\r\n{tr(t, 'session-item-lbl-team-name')} {s.teamName}
\r\n{moment(s.createDate).format('MMMM Do YYYY, h:mm:ss a')}
\r\n{s.isSpectator ? tr(t, 'game-mode-participate-as-spectator') : tr(t, 'game-mode-player')}
\r\n\r\n 
\r\n
\r\n \r\n
\r\n {tr(t, 'game-instruction-block1-text1')}
\r\n- \r\n
- {tr(t, 'game-instruction-block1-text2')} \r\n
- {tr(t, 'game-instruction-block1-text3')} \r\n
- {tr(t, 'game-instruction-block1-text4')}\r\n
- \r\n
- {tr(t, 'game-instruction-block1-text5')} \r\n
- {tr(t, 'game-instruction-block1-text6')} \r\n
- {tr(t, 'game-instruction-block1-text7')} \r\n
\r\n
\r\n 
\r\n
\r\n \r\n
\r\n {tr(t, 'game-instruction-block2-text1')}
\r\n- \r\n
- {tr(t, 'game-instruction-block2-text2')} \r\n
- {tr(t, 'game-instruction-block2-text3')} \r\n
- {tr(t, 'game-instruction-block2-text4')} \r\n
\r\n 
\r\n
\r\n \r\n
\r\n {tr(t, 'game-instruction-block3-text1')}
\r\n- \r\n
- {tr(t, 'game-instruction-block3-text2')} \r\n
- {tr(t, 'game-instruction-block3-text3')} \r\n
- {tr(t, 'game-instruction-block3-text4')}\r\n
- \r\n
- {tr(t, 'game-instruction-block3-text5')} \r\n
- {tr(t, 'game-instruction-block3-text6')} \r\n
- {tr(t, 'game-instruction-block3-text7')} \r\n
\r\n - {tr(t, 'game-instruction-block3-text8')}\r\n
- \r\n
- {tr(t, 'game-instruction-block3-text9')} \r\n
- {tr(t, 'game-instruction-block3-text10')} \r\n
\r\n
\r\n 
\r\n
\r\n \r\n
\r\n {tr(t, 'game-instruction-block4-text1')}
\r\n{tr(t, 'game-instruction-block4-text2')}
\r\n{tr(t, 'game-instruction-block4-text3')}
\r\n- \r\n
- {tr(t, 'game-instruction-block4-text4')} \r\n
- {tr(t, 'game-instruction-block4-text5')} \r\n
- {tr(t, 'game-instruction-block4-text6')} \r\n
- {tr(t, 'game-instruction-block4-text7')} \r\n
{tr(t, 'game-instruction-block4-text8')}
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {tr(t, 'start-new-game-page-title')}
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {tr(t, 'game-instruction-block1-text1')}
\r\n- \r\n
- {tr(t, 'game-instruction-block1-text2')} \r\n
- {tr(t, 'game-instruction-block1-text3')} \r\n
- {tr(t, 'game-instruction-block1-text4')}\r\n
- \r\n
- {tr(t, 'game-instruction-block1-text5')} \r\n
- {tr(t, 'game-instruction-block1-text6')} \r\n
- {tr(t, 'game-instruction-block1-text7')} \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n {tr(t, 'game-instruction-block2-text1')}
\r\n- \r\n
- {tr(t, 'game-instruction-block2-text2')} \r\n
- {tr(t, 'game-instruction-block2-text3')} \r\n
- {tr(t, 'game-instruction-block2-text4')} \r\n
\r\n \r\n
\r\n \r\n
\r\n {tr(t, 'game-instruction-block3-text1')}
\r\n- \r\n
- {tr(t, 'game-instruction-block3-text2')} \r\n
- {tr(t, 'game-instruction-block3-text3')} \r\n
- {tr(t, 'game-instruction-block3-text4')}\r\n
- \r\n
- {tr(t, 'game-instruction-block3-text5')} \r\n
- {tr(t, 'game-instruction-block3-text6')} \r\n
- {tr(t, 'game-instruction-block3-text7')} \r\n
\r\n - {tr(t, 'game-instruction-block3-text8')}\r\n
- \r\n
- {tr(t, 'game-instruction-block3-text9')} \r\n
- {tr(t, 'game-instruction-block3-text10')} \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n {tr(t, 'game-instruction-block4-text1')}
\r\n{tr(t, 'game-instruction-block4-text2')}
\r\n{tr(t, 'game-instruction-block4-text3')}
\r\n- \r\n
- {tr(t, 'game-instruction-block4-text4')} \r\n
- {tr(t, 'game-instruction-block4-text5')} \r\n
- {tr(t, 'game-instruction-block4-text6')} \r\n
- {tr(t, 'game-instruction-block4-text7')} \r\n
{tr(t, 'game-instruction-block4-text8')}
\r\n\r\n {formTitle && {\r\n event.preventDefault();\r\n }}\r\n >\r\n setName(target.value)}\r\n >\r\n {\r\n if(name){\r\n player.setPlayerName(name);\r\n formSubmitCallback(name);\r\n }\r\n }} className='mainButtonStyle'\r\n style={mainButtonStyle}\r\n variant=\"contained\"\r\n disableElevation\r\n >\r\n {submitButtonText}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nPlayerDetailsForm.propTypes = {\r\n formTitle: PropTypes.string,\r\n formSubmitCallback: PropTypes.func.isRequired,\r\n submitButtonText: PropTypes.string.isRequired,\r\n};\r\n\r\nPlayerDetailsForm.defaultProps = {\r\n formTitle: \"\",\r\n};\r\n","import React, { useState } from \"react\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Redirect } from \"react-router-dom\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nimport { realtimeConnection } from \"../../services/realtimeConnection\";\r\nimport { GAME_HUB_METHODS } from \"../../services/GameHubConstants\";\r\nimport { PlayerDetailsForm } from \"../PlayerDetailsForm\";\r\nimport { useServiceInjector } from \"../../hooks/ServiceInjectorContext\";\r\nimport logoUri from \"../../assets/icons/scgo-logo.svg\";\r\nimport mainImageUrl from \"../../assets/icons/create-new-game-main-image.svg\";\r\nimport ImageUrl1 from \"../../assets/icons/create-new-game-image1.svg\";\r\nimport ImageUrl2 from \"../../assets/icons/create-new-game-image2.svg\";\r\nimport ImageUrl3 from \"../../assets/icons/create-new-game-image3.svg\";\r\nimport ImageUrl4 from \"../../assets/icons/create-new-game-image4.svg\";\r\nimport { useFormatMessage } from 'react-intl-hooks';\r\nimport { useParams } from \"react-router-dom\";\r\nimport { tr } from '../TranslateWrapper';\r\nimport { LanguageSelector } from '../languageSelector';\r\nimport { AmplitudeService } from \"../../services/AmplitudeService\"\r\nimport { useGameContext } from \"../../hooks/GameContext\";\r\n\r\nconst dialogContainerStyle = { maxWidth: \"1024px\", margin: \"20px auto\", padding: \"15px\" };\r\n\r\nconst useStyles = makeStyles(() => ({\r\n page: {\r\n },\r\n header: {\r\n width: \"100%\",\r\n display: \"flex\",\r\n justifyContent: 'space-between',\r\n padding: '7pt'\r\n },\r\n logoutForm: {\r\n width: \"auto\",\r\n },\r\n logoutButton: {\r\n borderRadius: '4pt',\r\n border: '1pt solid #d8d8e6',\r\n backgroundColor: '#fff',\r\n width: 'auto',\r\n fontSize: '10pt',\r\n fontWeight: '700',\r\n textTransform: 'uppercase',\r\n lineHeight: '1.2',\r\n letterSpacing: '2.3pt',\r\n textAlign: 'center',\r\n color: '#040414',\r\n padding: '10pt 12pt 12pt 12pt',\r\n margin: '0',\r\n transition: 'all .3s ease-in-out',\r\n cursor: 'pointer'\r\n },\r\n logoContainer: {\r\n alignItems: \"center\",\r\n display: \"flex\",\r\n width: \"220px\",\r\n paddingRight: '5px',\r\n marginRight: '10px'\r\n },\r\n logo: {\r\n background: `url(${logoUri}) no-repeat`,\r\n backgroundSize: \"contain\",\r\n backgroundPosition: \"center\",\r\n width: 180,\r\n height: 100,\r\n margin: \"0 10px\",\r\n },\r\n}));\r\nconst RegularPlayerWelcomeScreen = ({ sessionId, startGame }) => {\r\n const [error, setError] = useState(null);\r\n const classes = useStyles();\r\n const { locale } = useParams();\r\n const t = useFormatMessage();\r\n\r\n const {\r\n player: { playerId, IsSpectator, IsHost, PlayerName, },\r\n } = useGameContext();\r\n\r\n const { jwtTokenService } = useServiceInjector();\r\n\r\n const joinGame=async (name) => {\r\n if(!name) {\r\n return;\r\n }\r\n try {\r\n await jwtTokenService.login(name);\r\n await realtimeConnection.stop();\r\n await realtimeConnection.start();\r\n const {hasErrors,message}=await realtimeConnection.invoke(GAME_HUB_METHODS.JoinSession,{\r\n name,\r\n sessionId,\r\n contry: null,\r\n region: null,\r\n });\r\n\r\n if(hasErrors) {\r\n setError(message);\r\n throw error;\r\n } else {\r\n startGame();\r\n }\r\n\r\n } catch(error) {\r\n realtimeConnection.setAmlitudeErrorHandler((Error) => AmplitudeService.SendJoinPlayer(playerId,name,IsSpectator,IsHost,sessionId,null,{'error_type': error}));\r\n }\r\n };\r\n\r\n return error ? (\r\n {formTitle}
}\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n\r\n \r\n \r\n joinGame(playerName)}\r\n submitButtonText={tr(t, 'join-player-btn-join')}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {tr(t, 'game-instruction-block1-text1')}
\r\n- \r\n
- {tr(t, 'game-instruction-block1-text2')} \r\n
- {tr(t, 'game-instruction-block1-text3')} \r\n
- {tr(t, 'game-instruction-block1-text4')}\r\n
- \r\n
- {tr(t, 'game-instruction-block1-text5')} \r\n
- {tr(t, 'game-instruction-block1-text6')} \r\n
- {tr(t, 'game-instruction-block1-text7')} \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n {tr(t, 'game-instruction-block2-text1')}
\r\n- \r\n
- {tr(t, 'game-instruction-block2-text2')} \r\n
- {tr(t, 'game-instruction-block2-text3')} \r\n
- {tr(t, 'game-instruction-block2-text4')} \r\n
\r\n \r\n
\r\n \r\n
\r\n {tr(t, 'game-instruction-block3-text1')}
\r\n- \r\n
- {tr(t, 'game-instruction-block3-text2')} \r\n
- {tr(t, 'game-instruction-block3-text3')} \r\n
- {tr(t, 'game-instruction-block3-text4')}\r\n
- \r\n
- {tr(t, 'game-instruction-block3-text5')} \r\n
- {tr(t, 'game-instruction-block3-text6')} \r\n
- {tr(t, 'game-instruction-block3-text7')} \r\n
\r\n - {tr(t, 'game-instruction-block3-text8')}\r\n
- \r\n
- {tr(t, 'game-instruction-block3-text9')} \r\n
- {tr(t, 'game-instruction-block3-text10')} \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n {tr(t, 'game-instruction-block4-text1')}
\r\n{tr(t, 'game-instruction-block4-text2')}
\r\n{tr(t, 'game-instruction-block4-text3')}
\r\n- \r\n
- {tr(t, 'game-instruction-block4-text4')} \r\n
- {tr(t, 'game-instruction-block4-text5')} \r\n
- {tr(t, 'game-instruction-block4-text6')} \r\n
- {tr(t, 'game-instruction-block4-text7')} \r\n
{tr(t, 'game-instruction-block4-text8')}
\r\n\r\n \r\n \r\n 🤷♂️\r\n \r\n {tr(t, 'page-404-message')}\r\n \r\n {tr(t, props.location?.state?.message || '')} \r\n
\r\n );\r\n};\r\nexport const NotFound = TranslateWrapper(NotFoundComponent);\r\n","import React from \"react\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TranslateWrapper from './TranslateWrapper';\r\nimport { useFormatMessage } from 'react-intl-hooks';\r\nimport { tr } from './TranslateWrapper';\r\n\r\nconst useStyles = makeStyles({\r\n contentCentered: {\r\n textAlign: \"center\",\r\n marginTop: \"40vh\",\r\n },\r\n});\r\n\r\nconst ErrorPageComponent = (props) => {\r\n const classes = useStyles();\r\n const t = useFormatMessage();\r\n const linkStyle = {\r\n fontSize:'16pt',\r\n margin:'10pt',\r\n textDecotation:'underline',\r\n cursor:'pointer'\r\n };\r\n return (\r\n \r\n \r\n \r\n 🤷♂️\r\n \r\n {tr(t, 'error-page-main-message')}
\r\n { window.location.href='/';}} style={linkStyle}>{tr(t, 'error-page-link-to-main')}\r\n \r\n {tr(t, props.location?.state?.message || '')} \r\n
\r\n );\r\n};\r\nexport const ErrorPage = TranslateWrapper(ErrorPageComponent);\r\n","import React from \"react\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport TranslateWrapper from './TranslateWrapper';\r\n\r\nconst useStyles = makeStyles({\r\n contentCentered: {\r\n textAlign: \"center\",\r\n marginTop: \"20vh\",\r\n },\r\n});\r\n\r\nconst OnlySingleGameComponent = (props) => {\r\n const classes = useStyles();\r\n const linkStyle = {\r\n fontSize:'16pt',\r\n margin:'10pt',\r\n textDecotation:'underline',\r\n cursor:'pointer'\r\n };\r\n return (\r\n \r\n { window.location.href='/';}} style={linkStyle}>{tr(t, 'error-page-link-to-main')}\r\n
\r\n \r\n \r\n 🤷♂️\r\n
\r\n Sorry, you use the Free version that limited to one session at a time.
\r\n Want to use ScrumCardGame for the professional workshop?
\r\n Please buy a Monthly or Annual subscription https://scrumcardgame.com/shop/
\r\n \r\n
\r\n );\r\n};\r\nexport const OnlySingleGame = TranslateWrapper(OnlySingleGameComponent);\r\n","export class JwtTokenService {\r\n constructor() {\r\n this.apiUrl =\r\n !process.env.NODE_ENV || process.env.NODE_ENV === \"development\"\r\n ? process.env.REACT_APP_DEVELOPMENT_API_URL + tokenEndpointPath\r\n : tokenEndpointPath;\r\n }\r\n\r\n async login(name) {\r\n const response = await postData(`${this.apiUrl}/login`, { playerName: name });\r\n this.setToken(response.token);\r\n }\r\n setToken(token){\r\n window.sessionStorage.setItem(\"auth_token\", token);\r\n }\r\n async loadGameProfiles() {\r\n return await getData(`${this.apiUrl}/profiles`);\r\n }\r\n async loadSessions() {\r\n return await getData(`${this.apiUrl}/sessions`);\r\n }\r\n async getTranslations(locale) {\r\n return await getData(`${this.apiUrl}/translations?code=${locale || 'en'}`);\r\n }\r\n getToken(){\r\n return window.sessionStorage.getItem(\"auth_token\");\r\n }\r\n}\r\n\r\nconst tokenEndpointPath = \"/api/token\";\r\n\r\nasync function postData(url = '', data = {}) {\r\n const response = await fetch(url, {\r\n method: 'POST',\r\n cache: 'no-cache',\r\n headers: { 'Content-Type': 'application/json' },\r\n body: JSON.stringify(data)\r\n });\r\n\r\n return await response.json();\r\n}\r\nasync function getData(url = '') {\r\n const response = await fetch(url, {\r\n method: 'GET',\r\n cache: 'no-cache',\r\n headers: { 'Content-Type': 'application/json' }\r\n });\r\n\r\n return await response.json();\r\n}","import React, { useState, useEffect } from \"react\";\r\nimport { BrowserRouter, Switch, Route, useHistory } from \"react-router-dom\";\r\n\r\nimport { GameShell } from \"./GameShell\";\r\nimport { GameContextProvider } from \"../hooks/GameContext\";\r\nimport { ServiceInjector } from \"../hooks/ServiceInjectorContext\";\r\nimport { SessionStartScreen } from \"./SessionStartScreen\";\r\nimport { SessionStartGameScreen } from \"./SessionStartGameScreen\";\r\nimport { JoinToGame } from \"./JoinToGame\";\r\nimport { NotFound } from \"./NotFound\";\r\nimport { ErrorPage } from \"./ErrorPage\";\r\nimport { LogoLoader } from \"./LogoLoader\";\r\nimport { OnlySingleGame } from './OnlySingleGame';\r\nimport { realtimeConnection } from \"../services/realtimeConnection\";\r\nimport { JwtTokenService } from \"../services/jwtTokenService\";\r\nimport { ToastProvider, useToasts } from 'react-toast-notifications';\r\nimport { useParams } from \"react-router-dom\";\r\nimport { useServiceInjector } from \"../hooks/ServiceInjectorContext\";\r\n\r\nconst App = () => {\r\n const { addToast } = useToasts();\r\n const history = useHistory();\r\n const { sessionId } = useParams();\r\n\r\n const [isConnected, setConnected] = useState(false);\r\n const globalHandler = (response) => {\r\n addToast(({response?.message || 'Internal error'}), { appearance: 'error', autoDismiss: true });\r\n history.push(`/${response?.locale || 'en'}/errorPage`);\r\n\r\n };\r\n useEffect(() => {\r\n realtimeConnection\r\n .init({globalHandler: globalHandler});\r\n realtimeConnection\r\n .setSessionId(sessionId);\r\n realtimeConnection\r\n .start()\r\n .then(() => setConnected(true))\r\n .catch((err) => {\r\n return console.error(err.toString());\r\n });\r\n }, []);\r\n\r\n if (!isConnected) {\r\n return \r\n Sorry, you use the Free version that limited to one session at a time.
\r\n Want to use ScrumCardGame for the professional workshop?
\r\n Please buy a Monthly or Annual subscription https://scrumcardgame.com/shop/
\r\n