Blocky Maps

Your browser lacks required capabilities. Please upgrade it or switch to another to continue.

Loading…

{ "id": "", "size": { "rows": 3, "cols": 3 }, "zoom": 100, "_default": { "name": "", "desc": "" }, "r1c1": { "cssClass": "player" } }

<div id="loading-cover" class="closed"></div> <<set $mapEdit = false>> <<if $editorMode>> <div title="Edit the map" id="map-editor-link" class="material-button"> <i class="material-icons">edit</i> </div> <</if>> <div id="map-container"> <<= setup.bm.drawMap($curMap)>> </div> <div id="map-ui"> <div id="cur-block-name"> <div class="content"></div> </div> <div id="cur-block-desc"> <div class="content"></div> </div> <div id="cur-block-pos"> <div class="content"></div> </div> <div id="cur-block-acts"> <div class="content"></div> </div> </div> <<timed 200ms>> <<script>> variables().curPos = recall("pCurPos", ""); if (variables().curPos) setup.bm.pMoveCoords(variables().curPos, true); else setup.bm.pMove("up", 0); setup.zoomLevel = variables().curMap.zoom; setup.bm.mapZoom(setup.zoomLevel); $("#loading-cover").removeClass("closed"); <</script>> <</timed>>

{ "id": "bmShowCase01", "size": { "rows": 5, "cols": 9 }, "zoom": 100, "cssClass": "cusMap01", "_default": { "cssClass": "tiled", "name": "Dorm 3C", "desc": "\nIt's the middle of the night.\n\nThis is where the guys wanted to meet. You can see them up ahead. Who knows what they want?\n\nUse WASD or arrow keys to move." }, "r0c0": { "cssClass": "invisible solid" }, "r0c1": { "cssClass": "solid wall" }, "r0c2": { "cssClass": "wall", "content": "<i\nclass=\"material-icons\"\nstyle=\"color: lavenderblush;\"\n>\nmeeting_room\n</i>", "name": "Room No. 301", "desc": "\nYou don't know anyone in the 3rd year that lives here; probably shouldn't poke around." }, "r0c3": { "cssClass": "solid wall" }, "r0c4": { "cssClass": "wall", "content": "<i\nclass=\"material-icons\"\nstyle=\"color: palegreen;\"\n>\nmeeting_room\n</i>", "name": "Room No. 302", "desc": "\nYou don't know anyone in the 3rd year that lives here; probably shouldn't poke around." }, "r0c5": { "cssClass": "solid wall" }, "r0c6": { "cssClass": "wall", "content": "<i\nclass=\"material-icons\"\nstyle=\"color: powderblue;\"\n>\nmeeting_room\n</i>", "name": "Room No. 303", "desc": "\nYou don't know anyone in the 3rd year that lives here; probably shouldn't poke around." }, "r0c7": { "cssClass": "solid wall" }, "r0c8": { "cssClass": "invisible solid" }, "r1c0": { "cssClass": "solid wall" }, "r1c8": { "cssClass": "solid wall" }, "r2c0": { "cssClass": "wall", "content": "<i\nclass=\"material-icons\"\nstyle=\"color: azure;\"\n>\nmeeting_room\n</i>", "name": "Exit", "desc": "\nLeave the dorm?", "acts": "<<link \"Leave\">>\n<<run UI.alert(\"Assume that it works because there exists no hall right now. Didn't code it in.\")>>\n<</link>>" }, "r2c1": { "cssClass": "tiled player" }, "r2c6": { "content": "<i\nclass=\"material-icons\"\nstyle=\"color: hotpink;\"\n>\nsupervised_user_circle\n</i>", "css": "text-shadow: 0 0 1em red;", "name": "Da Bois", "desc": "\nThis is it.\n\nThey're the ones waiting for you... Introduce yourself?", "acts": "<<link \"Doit\">>\n<<run UI.alert(\"Diddit\")>>\n<</link>>" }, "r2c8": { "content": "<i\nclass=\"material-icons\"\nstyle=\"color: lightsteelblue;\"\n>\nwc\n</i>", "cssClass": "wall", "name": "Restroom", "desc": "\nNot now..." }, "r3c0": { "cssClass": "solid wall" }, "r3c8": { "cssClass": "solid wall" }, "r4c0": { "cssClass": "invisible solid" }, "r4c1": { "cssClass": "solid wall" }, "r4c2": { "cssClass": "wall", "content": "<i\nclass=\"material-icons\"\nstyle=\"color: lavenderblush;\"\n>\nmeeting_room\n</i>", "name": "Room No. 304", "desc": "\nYou don't know anyone in the 3rd year that lives here; probably shouldn't poke around." }, "r4c3": { "cssClass": "solid wall" }, "r4c4": { "cssClass": "wall", "content": "<i\nclass=\"material-icons\"\nstyle=\"color: palegreen;\"\n>\nmeeting_room\n</i>", "name": "Room No. 305", "desc": "\nYou don't know anyone in the 3rd year that lives here; probably shouldn't poke around." }, "r4c5": { "cssClass": "solid wall" }, "r4c6": { "cssClass": "wall", "content": "<i\nclass=\"material-icons\"\nstyle=\"color: powderblue;\"\n>\nmeeting_room\n</i>", "name": "Room No. 306", "desc": "\nYou don't know anyone in the 3rd year that lives here; probably shouldn't poke around." }, "r4c7": { "cssClass": "solid wall" }, "r4c8": { "cssClass": "invisible solid" } }

<div id="loading-cover" class="closed"></div> <div id="editor-map-container"> <div id="map-container"> <<= setup.bm.drawMap($curMap)>> </div> </div> <<timed 200ms>> <<script>> setup.bm.cameraFollow(".player"); setup.zoomLevel = variables().curMap.zoom; setup.bm.mapZoom(setup.zoomLevel); $("#loading-cover").removeClass("closed"); mapEditorInit(); <</script>> <</timed>> <div title="Play the map" id="play-map" class="material-button"> <i class="material-icons">play_arrow</i> </div> <div title="Center the map" id="re-center-map" class="material-button"> <i class="material-icons">my_location</i> </div> <div title="Open Options menu" id="menu-link" class="material-button"> <i class="material-icons">menu_open</i> </div> <div title="Copy JSON to clipboard" id="c-clipboard" class="material-button ccJS"> <i class="material-icons">file_copy</i> </div> <div title="Edit raw JSON" id="edit-map" class="material-button"> <i class="material-icons">code</i> </div> <div id="json-editor" class="closed"> <div id="editor-scrim"></div> <div id="cm-json-editor" class="cm-text-editor" contenteditable="true"></div> </div> <div id="current-edit-array"> <div> SELECTED BLOCKS: <<button "Clear selection">> <<script>> $(".editing").removeClass("editing"); editArr = []; $(document).trigger(":selection-changed"); <</script>> <</button>> </div> <span class="content"></span> </div> <div id="object-editor" class="closed"> <h6>Map properties</h6> <div id="map-meta"> <span title="Not required, but helps with keeping track of multiple maps."> <i class="material-icons ttips info">help</i> </span> ID: <input id="mm-id" type="text"> Rows: <input id="mm-size-rows" type="text"> Columns: <input id="mm-size-cols" type="text"> <span title="Set the zoom multiplier at which the map is loaded onto screen during play.
Default value is 100. Recommended to keep between 25 and 250"> <i class="material-icons ttips info">help</i> </span> Map zoom level: <input id="mm-zoom" type="text"> <span title="The CSS classes (separate by whitespace) to attach to the map as a whole.
Useful when having different color schemes for different 'regions' in the world."> <i class="material-icons ttips info">help</i> </span> Map CSS classes: <input id="mm-map-css" type="text"> </div> <h6>Block properties</h6> <div id="cell-selected"> <span title="Text shown to the player for the selected blocks on the map as the name of the place represented by block."> <i class="material-icons ttips info">help</i> </span> Name: <input id="cs-name" type="text"> <span title="Text shown to the player for the selected blocks on the map as the description of the place represented by block."> <i class="material-icons ttips info">help</i> </span> Description: <textarea id="cs-desc"></textarea> <span title="'Content'(images/icons) which shows up on the selected blocks.
Use plain html markup."> <i class="material-icons ttips info">help</i> </span> <span title="Example:
 <img src="images/icon.png">"> <i class="material-icons ttips info">info</i> </span> Content: <textarea id="cs-content"></textarea> <span title="Classes (separate by whitespace) to attach to the selected blocks on the map."> <i class="material-icons ttips info">help</i> </span> CSS classes: <input id="cs-css" type="text"> <span title="Inline styling for the selected blocks on the map."> <i class="material-icons ttips info">help</i> </span> <span title="Example:
 background-color: red;
 border-color: white;"> <i class="material-icons ttips info">info</i> </span> Inline CSS: <textarea id="cs-inline"></textarea> <span title="Markup that is rendered to the 'actions' section of the UI for the selected blocks.
Use-case: Links/buttons/etc using regular SugarCube/Html code."> <i class="material-icons ttips info">help</i> </span> Actions: <textarea id="cs-acts"></textarea> <span title="SugarCube code that is run when the player is on the selected blocks."> <i class="material-icons ttips info">help</i> </span> Triggers: <textarea id="cs-triggers"></textarea> </div> </div>

Blocky Maps <<= setup.bm.version>>, <br> by Cyrus Firheir, for SugarCube v2 <br><br> <div class="button-link"> https://cyrusfirheir.github.io/BlockyMapsDocs/#/ </div> <hr> <<button "Restart with new map">> <<run UI.restart()>> <</button>> <br> <input id="load-JSON" type="file" style="display: none;" accept=".json"> <<button "Import map JSON">> <<run $("#load-JSON").trigger("click")>> <</button>> <br> <span title="File name:
 _map-[mapID]-[dateStamp].json"> <<button "Export current map">> <<run exportJSON()>> <</button>> </span>

<<set $curMap = Story.get("mapTemplate").text>> <<if window.location.hash === "#demo">> <<set $curMap = Story.get("demo").text>> <</if>> <<goto "editMap">>