\n {this.render_loaded()}\n {this.is_multiplayer &&\n this.render_multiplayer_popup()}\n
;\n }\n}\n\nexport default Game;\n","'use strict';\nimport React from \"react\";\nimport Game from \"./Game\";\nimport { prepareInfobox } from \"./utils\";\nimport {Button} from \"react-bootstrap\";\nimport {FormattedMessage as Msg} from \"react-intl\";\nimport Map from \"../components/Map\";\n\n\nclass Puzzle extends Game {\n GAME_NAME = 'puzzle';\n\n static extractData(polygons, solved) {\n return polygons.map(country => {\n // useDecode because TrueSizePolygon accepts (lng, lat)\n let paths = Map.preparePolygon(country.polygon, true);\n paths = Map.moveTo(paths, country.center, country.default_position);\n return {\n id: country.id,\n draggable: true,\n isSolved: false,\n isOpen: false,\n defaultPosition: country.default_position,\n infobox: {name: country.name, loaded: false},\n paths: paths\n }\n }).concat(solved.map(region => {\n return {\n id: region.id,\n draggable: false,\n isSolved: true,\n isOpen: true,\n infobox: region.infobox,\n paths: Map.preparePolygon(region.polygon)\n }\n })).sort((one, another) => {\n return one.infobox.name > another.infobox.name ? 1 : -1\n });\n }\n\n _dispatchMessage = (data) => {\n let regions = this.state.regions;\n let infobox = this.state.infobox;\n switch(data.type) {\n case 'PUZZLE_CHECK_SUCCESS':\n regions = regions.map((region) => {\n if (region.id === data.id) {\n return {\n ...region,\n draggable: false,\n isSolved: true,\n isOpen: true,\n infobox: {...prepareInfobox(data.infobox), loaded: true},\n paths: Map.preparePolygon(data.polygon),\n };\n } else {\n return region;\n }\n });\n infobox = data.infobox;\n this.setState(state => ({...state, regions: regions, infobox: infobox}));\n break;\n case 'PUZZLE_GIVEUP_DONE':\n regions = regions.map((polygon) => {\n if (!polygon.isSolved) {\n let solve = data.solves[polygon.id];\n return {\n ...polygon,\n draggable: false,\n isOpen: true,\n infobox: {...prepareInfobox(solve.infobox), loaded: true},\n paths: Map.preparePolygon(solve.polygon),\n };\n } else {\n return polygon;\n }\n });\n this.setState(state => ({...state, regions: regions, infobox: infobox}));\n break;\n }\n };\n\n loadData = () => {\n fetch(`${location.pathname}questions/${location.search}`)\n .then(response => response.json())\n .then(data => {\n this.startGame({regions: Puzzle.extractData(data.questions, data.solved), sticky: data.sticky});\n })\n .catch(response => {\n this.setState({...this.state, isLoaded: false})\n });\n };\n\n giveUp = () => {\n let ids = this.state.regions.filter(obj => (!obj.isSolved)).map(polygon => (polygon.id));\n return this.wsSend({ids: ids, type: 'PUZZLE_GIVEUP'});\n };\n\n refreshMap = () => {\n this.setState({...this.state, showMap: false}, () => {this.setState({...this.state, showMap: true})});\n };\n\n onDragPolygon = (id, coords, path) => {\n this.wsSend({type: 'PUZZLE_CHECK', coords: coords, id: id, zoom: this.props.map.zoom});\n };\n\n render_question() {\n return