{"id":251,"date":"2026-06-23T10:56:07","date_gmt":"2026-06-23T14:56:07","guid":{"rendered":"https:\/\/talltale.games\/?page_id=251"},"modified":"2026-06-23T11:57:08","modified_gmt":"2026-06-23T15:57:08","slug":"whiteboard-map-demo","status":"publish","type":"page","link":"https:\/\/talltale.games\/tour\/whiteboard-map-demo\/","title":{"rendered":"Whiteboard \/ Map Demo"},"content":{"rendered":"\t<style>\n\t\thtml,\n\t\tbody {\n\t\t\toverflow: initial\n\t\t}\n\t<\/style>\n<div class=\"hd-whiteboard-shortcode\" style=\"position:relative;\">\n\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"display:none\" aria-hidden=\"true\">\n\t\t<symbol id=\"icon-draw\" viewBox=\"0 0 24 24\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\"\/><\/symbol>\n\t\t<symbol id=\"icon-line\" viewBox=\"0 0 24 24\"><line stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><\/symbol>\n\t\t<symbol id=\"icon-rect\" viewBox=\"0 0 24 24\"><rect fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"1\"\/><\/symbol>\n\t\t<symbol id=\"icon-circle\" viewBox=\"0 0 24 24\"><circle fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" cx=\"12\" cy=\"12\" r=\"9\"\/><\/symbol>\n\t\t<symbol id=\"icon-npc\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"\/><\/symbol>\n\t\t<symbol id=\"icon-colors\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 3C7.03 3 3 7.03 3 12s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z\"\/><\/symbol>\n\t\t<symbol id=\"icon-move\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"\/><\/symbol>\n\t\t<symbol id=\"icon-ping\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/><\/symbol>\n\t\t<symbol id=\"icon-initiative\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM7 10.82C5.84 10.4 5 9.3 5 8V7h2v3.82zM19 8c0 1.3-.84 2.4-2 2.82V7h2v1z\"\/><\/symbol>\n\t\t<symbol id=\"icon-erase\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M15.14 3c-.51 0-1.02.2-1.41.59L2.59 14.73c-.78.77-.78 2.04 0 2.83L5.03 20H20v-2h-8.36l7.77-7.77c.78-.78.78-2.05 0-2.83l-2.86-2.82c-.39-.39-.9-.58-1.41-.58zM6.44 20l-2.83-2.84 5.3-5.3 2.83 2.83L6.44 20z\"\/><\/symbol>\n\t\t<symbol id=\"icon-undo\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z\"\/><\/symbol>\n\t\t<symbol id=\"icon-clear\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\/><\/symbol>\n\t\t<symbol id=\"icon-fog\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 001 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z\"\/><\/symbol>\n\t\t<symbol id=\"icon-reveal\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"\/><\/symbol>\n\t\t<symbol id=\"icon-stats\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z\"\/><\/symbol>\n\t\t<symbol id=\"icon-skills\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z\"\/><\/symbol>\n\t\t<symbol id=\"icon-spells\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z\"\/><\/symbol>\n\t\t<symbol id=\"icon-equipment\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M12 2L4 5v5.5c0 5.25 3.4 10.15 8 11.5 4.6-1.35 8-6.25 8-11.5V5l-8-3z\"\/><\/symbol>\n\t\t<symbol id=\"icon-items\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M20 2H4c-1 0-2 .9-2 2v3.01c0 .72.43 1.34 1 1.72V20c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8.72c.57-.38 1-.99 1-1.71V4c0-1.1-.9-2-2-2zm-5 12H9v-2h6v2zm5-7H4V4l16-.01V7z\"\/><\/symbol>\n\t\t<symbol id=\"icon-conditions\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"\/><\/symbol>\n\t\t<symbol id=\"icon-other\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"\/><\/symbol>\n\t\t<symbol id=\"icon-notes\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z\"\/><\/symbol>\n\t<\/svg>\n\n\t<div class=\"whiteboard-panel\" style=\"width:100%;height:100%;\">\n\t\t<div id=\"toolbarMenu\" class=\"toolbar-menu\" style=\"display:none\">\n\t\t\t<button id=\"radialToggle\" class=\"toolbar-toggle\" title=\"Tools\">\n\t\t\t\t<span id=\"radialToggleIcon\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-draw\"><\/use><\/svg><\/span>\n\t\t\t\t<span class=\"toolbar-color-swatch\" id=\"colorIndicator\"><\/span>\n\t\t\t<\/button>\n\t\t\t<div id=\"toolbarRows\" class=\"toolbar-rows\">\n\t\t\t\t<div class=\"toolbar-row\">\n\t\t\t\t\t<button class=\"tool-item active\" data-tool=\"draw\" data-icon=\"icon-draw\" title=\"Free draw\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-draw\"><\/use><\/svg><\/button>\n\t\t\t\t\t<button class=\"tool-item\" data-tool=\"line\" data-icon=\"icon-line\" title=\"Line\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-line\"><\/use><\/svg><\/button>\n\t\t\t\t\t<button class=\"tool-item\" data-tool=\"rect\" data-icon=\"icon-rect\" title=\"Rectangle\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-rect\"><\/use><\/svg><\/button>\n\t\t\t\t\t<button class=\"tool-item\" data-tool=\"circle\" data-icon=\"icon-circle\" title=\"Circle\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-circle\"><\/use><\/svg><\/button>\n\t\t\t\t\t<span class=\"tool-item-divider\"><\/span>\n\t\t\t\t\t<button class=\"tool-item tool-color-btn\" id=\"radialColorBtn\" data-icon=\"icon-colors\" title=\"Colors\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-colors\"><\/use><\/svg><\/button>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"toolbar-row\">\n\t\t\t\t\t<button class=\"tool-item\" data-tool=\"move\" data-icon=\"icon-move\" title=\"Move\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-move\"><\/use><\/svg><\/button>\n\t\t\t\t\t<span class=\"tool-item-divider\"><\/span>\n\t\t\t\t\t<button class=\"tool-item\" data-tool=\"erase\" data-icon=\"icon-erase\" title=\"Eraser\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-erase\"><\/use><\/svg><\/button>\n\t\t\t\t\t<button class=\"tool-item tool-action\" id=\"undoBtn\" data-icon=\"icon-undo\" title=\"Undo\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-undo\"><\/use><\/svg><\/button>\n\t\t\t\t\t<button class=\"tool-item tool-action\" id=\"clearBoardBtn\" data-icon=\"icon-clear\" title=\"Clear board\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-clear\"><\/use><\/svg><\/button>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"toolbar-row\">\n\t\t\t\t\t<button class=\"tool-item gm-only\" id=\"fogModeBtn\" data-icon=\"icon-fog\" title=\"Fog Mode\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-fog\"><\/use><\/svg><\/button>\n\t\t\t\t\t<button class=\"tool-item gm-only fog-mode-only\" data-tool=\"reveal\" data-icon=\"icon-reveal\" title=\"Reveal Area\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-reveal\"><\/use><\/svg><\/button>\n\t\t\t\t\t<span class=\"tool-item-divider\"><\/span>\n\t\t\t\t\t<button class=\"tool-item\" data-tool=\"ping\" data-icon=\"icon-ping\" title=\"Ping\"><svg class=\"tool-icon\" aria-hidden=\"true\"><use href=\"#icon-ping\"><\/use><\/svg><\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<div id=\"colorPanel\" class=\"color-panel\" style=\"display: none\">\n\t\t\t<div class=\"color-panel-row\">\n\t\t\t\t<label class=\"color-panel-label\">Outline<\/label>\n\t\t\t\t<div id=\"strokeColorSwatch\" class=\"color-swatch\"><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"color-panel-row\">\n\t\t\t\t<label class=\"color-panel-label\">Fill<\/label>\n\t\t\t\t<div id=\"fillColorSwatch\" class=\"color-swatch\"><\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t<div id=\"whiteboardViewport\">\n\t\t\t<canvas id=\"whiteboard\"><\/canvas>\n\t\t<\/div>\n\n\t\t<div class=\"zoom-controls\">\n\t\t\t<button class=\"zoom-btn\" id=\"zoomInBtn\" title=\"Zoom in\">+<\/button>\n\t\t\t<button class=\"zoom-btn\" id=\"zoomOutBtn\" title=\"Zoom out\">&minus;<\/button>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n\n\n<div class=\"divider hd_divider\" aria-hidden=\"true\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">NPC \/ Character creation disabled for this public demo. No data is saved or synced.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can see how NPC creation works by viewing the video below<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"687\" style=\"aspect-ratio: 843 \/ 687;\" width=\"843\" controls src=\"https:\/\/talltale.games\/hdpress\/storage\/2026\/06\/Screencast-From-2026-06-23-11-55-10.mp4\" playsinline><\/video><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>NPC \/ Character creation disabled for this public demo. No data is saved or synced. You can see how NPC creation works by viewing the video below<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":124,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-251","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/talltale.games\/hdapi\/wp\/v2\/pages\/251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/talltale.games\/hdapi\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/talltale.games\/hdapi\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/talltale.games\/hdapi\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/talltale.games\/hdapi\/wp\/v2\/comments?post=251"}],"version-history":[{"count":5,"href":"https:\/\/talltale.games\/hdapi\/wp\/v2\/pages\/251\/revisions"}],"predecessor-version":[{"id":273,"href":"https:\/\/talltale.games\/hdapi\/wp\/v2\/pages\/251\/revisions\/273"}],"up":[{"embeddable":true,"href":"https:\/\/talltale.games\/hdapi\/wp\/v2\/pages\/124"}],"wp:attachment":[{"href":"https:\/\/talltale.games\/hdapi\/wp\/v2\/media?parent=251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}