{"id":6,"date":"2025-12-20T16:43:37","date_gmt":"2025-12-20T16:43:37","guid":{"rendered":"https:\/\/www.hexgrinder.com\/hexgrinderapp\/hex-explorer\/"},"modified":"2025-12-20T16:43:37","modified_gmt":"2025-12-20T16:43:37","slug":"hex-explorer","status":"publish","type":"page","link":"https:\/\/www.hexgrinder.com\/hexgrinderapp\/hex-explorer\/","title":{"rendered":"Hex Explorer"},"content":{"rendered":"\r\n<div id=\"hexgrinder-app\" class=\"hexgrinder-container\" data-map-id=\"0\" data-can-edit=\"0\">\r\n\r\n    \r\n<!-- Menu Tab (Slide-out Panel) -->\r\n<div class=\"menu-tab\" id=\"menuTab\">\r\n    <div class=\"menu-handle\" onclick=\"toggleMenu()\">\r\n        \ud83d\udcc2 Subscriber Options\r\n    <\/div>\r\n    <div class=\"menu-panel\">\r\n        <div class=\"menu-title\">\r\n            <span>\ud83d\udcc2<\/span>\r\n            <span>Subscriber Options<\/span>\r\n        <\/div>\r\n        <div class=\"menu-section\">\r\n                            <span class=\"menu-btn disabled\">\r\n                    \ud83d\udcc1 My Maps\r\n                <\/span>\r\n                <span class=\"menu-btn disabled\">\r\n                    \ud83d\udcd6 Encounter Tables\r\n                <\/span>\r\n                <span class=\"menu-btn disabled\">\r\n                    \ud83c\udfde\ufe0f Hex Descriptions\r\n                <\/span>\r\n                                    <span class=\"menu-btn disabled\">\r\n                        \ud83d\udcbe Save\r\n                    <\/span>\r\n                    <span class=\"menu-btn disabled\">\r\n                        Save As...\r\n                    <\/span>\r\n                                <a href=\"https:\/\/www.hexgrinder.com\/hexgrinderapp\/wp-login.php?redirect_to=https%3A%2F%2Fwww.hexgrinder.com%2Fhexgrinderapp%2Fhex-explorer%2F\" class=\"menu-btn primary\">\r\n                    Log In\r\n                <\/a>\r\n                    <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Oracle Tab (Slide-out Panel - Left Side) -->\r\n<div class=\"oracle-tab\" id=\"oracleTab\">\r\n    <div class=\"oracle-handle\" onclick=\"toggleOracle()\">\r\n        \ud83d\udd2e Oracle\r\n    <\/div>\r\n    <div class=\"oracle-panel\">\r\n        <div class=\"oracle-title\">\r\n            <span>\ud83d\udd2e<\/span>\r\n            <span>Mythic Oracle<\/span>\r\n        <\/div>\r\n        <div class=\"oracle-attribution\">Based on Mythic Game Master Emulator 2nd Edition by Tana Pigeon<\/div>\r\n\r\n        <!-- Chaos Factor -->\r\n        <div class=\"oracle-section\">\r\n            <div class=\"oracle-section-title\">Chaos Factor<\/div>\r\n            <div class=\"chaos-control\">\r\n                <button class=\"meaning-btn\" onclick=\"adjustChaos(-1)\" style=\"padding:0.4rem 0.6rem;min-width:32px;\">\u2212<\/button>\r\n                <span class=\"chaos-value\" id=\"chaosValue\">5<\/span>\r\n                <input type=\"range\" class=\"chaos-slider\" id=\"chaosSlider\"\r\n                       min=\"1\" max=\"9\" value=\"5\" oninput=\"updateChaosDisplay()\">\r\n                <button class=\"meaning-btn\" onclick=\"adjustChaos(1)\" style=\"padding:0.4rem 0.6rem;min-width:32px;\">+<\/button>\r\n            <\/div>\r\n            <div class=\"chaos-hint\">Higher chaos = more likely \"Yes\" answers and random events<\/div>\r\n        <\/div>\r\n\r\n        <!-- Odds Selection -->\r\n        <div class=\"oracle-section\">\r\n            <div class=\"oracle-section-title\">Odds<\/div>\r\n            <select class=\"odds-select\" id=\"oddsSelect\">\r\n                <option value=\"0\">Impossible<\/option>\r\n                <option value=\"1\">No Way<\/option>\r\n                <option value=\"2\">Very Unlikely<\/option>\r\n                <option value=\"3\">Unlikely<\/option>\r\n                <option value=\"4\" selected>50\/50<\/option>\r\n                <option value=\"5\">Likely<\/option>\r\n                <option value=\"6\">Very Likely<\/option>\r\n                <option value=\"7\">Near Sure Thing<\/option>\r\n                <option value=\"8\">A Sure Thing<\/option>\r\n            <\/select>\r\n            <button class=\"oracle-ask-btn\" onclick=\"askOracle()\">\r\n                \ud83c\udfb2 Ask the Oracle\r\n            <\/button>\r\n        <\/div>\r\n\r\n        <!-- Result Display -->\r\n        <div class=\"oracle-result-box\" id=\"oracleResultBox\" style=\"display: none;\">\r\n            <div class=\"oracle-result-label\">The Oracle Speaks<\/div>\r\n            <div class=\"oracle-result-value\" id=\"oracleResultValue\">Yes<\/div>\r\n            <div class=\"oracle-result-details\" id=\"oracleResultDetails\"><\/div>\r\n            <div class=\"oracle-result-roll\" id=\"oracleResultRoll\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- Random Event Box -->\r\n        <div class=\"oracle-event-box\" id=\"oracleEventBox\" style=\"display: none;\">\r\n            <div class=\"oracle-event-label\">\u26a1 Random Event!<\/div>\r\n            <div class=\"oracle-event-text\" id=\"oracleEventText\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- Meaning Tables -->\r\n        <div class=\"oracle-section\">\r\n            <div class=\"oracle-section-title\">Meaning Tables<\/div>\r\n            <div class=\"meaning-grid\">\r\n                <button class=\"meaning-btn\" onclick=\"rollMeaning('action')\">Action<\/button>\r\n                <button class=\"meaning-btn\" onclick=\"rollMeaning('subject')\">Subject<\/button>\r\n                <button class=\"meaning-btn\" onclick=\"rollMeaning('both')\">Action + Subject<\/button>\r\n                <button class=\"meaning-btn\" onclick=\"rollMeaning('event')\">Random Event<\/button>\r\n            <\/div>\r\n            <div class=\"meaning-result\" id=\"meaningResult\" style=\"display: none;\">\r\n                <div class=\"meaning-result-words\" id=\"meaningResultWords\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- History -->\r\n        <div class=\"oracle-section\">\r\n            <div class=\"oracle-section-title\">History<\/div>\r\n            <div class=\"oracle-history\" id=\"oracleHistory\">\r\n                <div class=\"empty-state\">No questions yet<\/div>\r\n            <\/div>\r\n            <button class=\"clear-oracle-btn\" onclick=\"clearOracleHistory()\">Clear History<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Dice Roller Tab (Slide-out Panel) -->\r\n<div class=\"dice-roller-tab\" id=\"diceRollerTab\">\r\n    <div class=\"dice-roller-handle\" onclick=\"toggleDiceRoller()\">\r\n        \ud83c\udfb2 Dice\r\n    <\/div>\r\n    <div class=\"dice-roller-panel\">\r\n        <div class=\"dice-roller-title\">\r\n            <span>\ud83c\udfb2<\/span>\r\n            <span>Dice Roller<\/span>\r\n        <\/div>\r\n\r\n        <!-- Result Display (moved to top) -->\r\n        <div class=\"dice-result-box\" id=\"diceResultBox\">\r\n            <div class=\"dice-result-label\">Result<\/div>\r\n            <div class=\"dice-result-value\" id=\"diceResultValue\">0<\/div>\r\n            <div class=\"dice-result-details\" id=\"diceResultDetails\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- Quick Roll Dice -->\r\n        <div class=\"dice-section\">\r\n            <div class=\"dice-section-title\">Quick Roll<\/div>\r\n            <div class=\"dice-grid\">\r\n                <!-- d4: Tetrahedron - triangular pyramid -->\r\n                <button class=\"dice-btn dice-shape\" onclick=\"rollDice(4)\" title=\"d4 - Tetrahedron\">\r\n                    <svg class=\"dice-icon\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <polygon points=\"20,2 38,36 2,36\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\r\n                        <line x1=\"20\" y1=\"2\" x2=\"20\" y2=\"26\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"20\" y1=\"26\" x2=\"2\" y2=\"36\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"20\" y1=\"26\" x2=\"38\" y2=\"36\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                    <\/svg>\r\n                    <span class=\"dice-label\">d4<\/span>\r\n                <\/button>\r\n                <!-- d6: Cube - 3D cube view -->\r\n                <button class=\"dice-btn dice-shape\" onclick=\"rollDice(6)\" title=\"d6 - Cube\">\r\n                    <svg class=\"dice-icon\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <polygon points=\"6,14 20,22 20,38 6,30\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\r\n                        <polygon points=\"20,22 34,14 34,30 20,38\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\r\n                        <polygon points=\"6,14 20,6 34,14 20,22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\r\n                    <\/svg>\r\n                    <span class=\"dice-label\">d6<\/span>\r\n                <\/button>\r\n                <!-- d8: Octahedron - diamond with center vertex -->\r\n                <button class=\"dice-btn dice-shape\" onclick=\"rollDice(8)\" title=\"d8 - Octahedron\">\r\n                    <svg class=\"dice-icon\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <polygon points=\"20,2 36,20 20,38 4,20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\r\n                        <line x1=\"20\" y1=\"20\" x2=\"20\" y2=\"2\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"20\" y1=\"20\" x2=\"36\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"20\" y1=\"20\" x2=\"20\" y2=\"38\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"20\" y1=\"20\" x2=\"4\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                    <\/svg>\r\n                    <span class=\"dice-label\">d8<\/span>\r\n                <\/button>\r\n                <!-- d10: Pentagonal trapezohedron - kite with pointed top -->\r\n                <button class=\"dice-btn dice-shape\" onclick=\"rollDice(10)\" title=\"d10 - Pentagonal Trapezohedron\">\r\n                    <svg class=\"dice-icon\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <polygon points=\"20,2 35,16 28,38 12,38 5,16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\r\n                        <line x1=\"20\" y1=\"2\" x2=\"20\" y2=\"22\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"5\" y1=\"16\" x2=\"20\" y2=\"22\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"35\" y1=\"16\" x2=\"20\" y2=\"22\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"12\" y1=\"38\" x2=\"20\" y2=\"22\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"28\" y1=\"38\" x2=\"20\" y2=\"22\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                    <\/svg>\r\n                    <span class=\"dice-label\">d10<\/span>\r\n                <\/button>\r\n                <!-- d12: Dodecahedron - pentagon with inner pentagon -->\r\n                <button class=\"dice-btn dice-shape\" onclick=\"rollDice(12)\" title=\"d12 - Dodecahedron\">\r\n                    <svg class=\"dice-icon\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <polygon points=\"20,2 38,14 32,36 8,36 2,14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\r\n                        <polygon points=\"20,10 30,18 26,30 14,30 10,18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\r\n                        <line x1=\"20\" y1=\"2\" x2=\"20\" y2=\"10\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"38\" y1=\"14\" x2=\"30\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"32\" y1=\"36\" x2=\"26\" y2=\"30\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"8\" y1=\"36\" x2=\"14\" y2=\"30\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"2\" y1=\"14\" x2=\"10\" y2=\"18\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                    <\/svg>\r\n                    <span class=\"dice-label\">d12<\/span>\r\n                <\/button>\r\n                <!-- d20: Icosahedron - triangular with multiple facets -->\r\n                <button class=\"dice-btn dice-shape\" onclick=\"rollDice(20)\" title=\"d20 - Icosahedron\">\r\n                    <svg class=\"dice-icon\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <polygon points=\"20,2 36,10 38,26 28,38 12,38 2,26 4,10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\r\n                        <line x1=\"20\" y1=\"2\" x2=\"12\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"20\" y1=\"2\" x2=\"28\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"4\" y1=\"10\" x2=\"12\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"36\" y1=\"10\" x2=\"28\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"2\" y1=\"26\" x2=\"12\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"38\" y1=\"26\" x2=\"28\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"12\" y1=\"38\" x2=\"12\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"28\" y1=\"38\" x2=\"28\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"12\" y1=\"20\" x2=\"28\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                    <\/svg>\r\n                    <span class=\"dice-label\">d20<\/span>\r\n                <\/button>\r\n                <!-- d100: Percentile (two d10s) -->\r\n                <button class=\"dice-btn dice-shape dice-d100\" onclick=\"rollDice(100)\" title=\"d100 - Percentile\">\r\n                    <svg class=\"dice-icon\" viewBox=\"0 0 70 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                        <polygon points=\"17,2 30,14 24,38 10,38 4,14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\r\n                        <line x1=\"17\" y1=\"2\" x2=\"17\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"4\" y1=\"14\" x2=\"17\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"30\" y1=\"14\" x2=\"17\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"10\" y1=\"38\" x2=\"17\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"24\" y1=\"38\" x2=\"17\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <polygon points=\"53,2 66,14 60,38 46,38 40,14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\r\n                        <line x1=\"53\" y1=\"2\" x2=\"53\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"40\" y1=\"14\" x2=\"53\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"66\" y1=\"14\" x2=\"53\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"46\" y1=\"38\" x2=\"53\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                        <line x1=\"60\" y1=\"38\" x2=\"53\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\r\n                    <\/svg>\r\n                    <span class=\"dice-label\">d100<\/span>\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Modifiers (moved above Dice Pool) -->\r\n        <div class=\"dice-section\">\r\n            <div class=\"dice-section-title\">Modifier<\/div>\r\n            <div class=\"modifier-controls\">\r\n                <button class=\"modifier-btn negative\" onclick=\"applyModifier('subtract')\">\u2212<\/button>\r\n                <input type=\"number\" id=\"modifierValue\" class=\"modifier-input\" value=\"0\" placeholder=\"Current: 0\" onchange=\"onModifierInputChange()\">\r\n                <button class=\"modifier-btn positive\" onclick=\"applyModifier('add')\">+<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Dice Pool -->\r\n        <div class=\"dice-section\">\r\n            <div class=\"dice-section-title\">Dice Pool<\/div>\r\n            <div class=\"dice-pool-controls\">\r\n                <input type=\"number\" id=\"dicePoolCount\" class=\"dice-pool-input\" value=\"1\" min=\"1\" max=\"99\">\r\n                <select id=\"dicePoolType\" class=\"dice-pool-select\">\r\n                    <option value=\"4\">d4<\/option>\r\n                    <option value=\"6\" selected>d6<\/option>\r\n                    <option value=\"8\">d8<\/option>\r\n                    <option value=\"10\">d10<\/option>\r\n                    <option value=\"12\">d12<\/option>\r\n                    <option value=\"20\">d20<\/option>\r\n                    <option value=\"100\">d100<\/option>\r\n                <\/select>\r\n                <button class=\"dice-btn\" onclick=\"rollDicePool()\" style=\"padding: 0.5rem;\">Roll<\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Roll History -->\r\n        <div class=\"dice-section\">\r\n            <div class=\"dice-section-title\">History<\/div>\r\n            <div class=\"dice-history\" id=\"diceHistory\">\r\n                <div class=\"empty-state\">No rolls yet<\/div>\r\n            <\/div>\r\n            <button class=\"clear-history-btn\" onclick=\"clearDiceHistory()\">Clear History<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Weather Tab (Slide-out Panel - Right Side, below Dice) -->\r\n<div class=\"weather-tab\" id=\"weatherTab\">\r\n    <div class=\"weather-handle\" onclick=\"toggleWeather()\">\r\n        \ud83c\udf26\ufe0f Weather\r\n    <\/div>\r\n    <div class=\"weather-panel\">\r\n        <div class=\"weather-title\">\r\n            <span>\ud83c\udf26\ufe0f<\/span>\r\n            <span>Weather<\/span>\r\n        <\/div>\r\n\r\n        <!-- Season Selector -->\r\n        <div class=\"weather-section\">\r\n            <div class=\"weather-section-title\">Season<\/div>\r\n            <div class=\"season-grid\">\r\n                <button class=\"season-btn active\" data-season=\"spring\" onclick=\"setSeason('spring')\">\r\n                    <span class=\"season-icon\">\ud83c\udf31<\/span>\r\n                    <span>Spring<\/span>\r\n                <\/button>\r\n                <button class=\"season-btn\" data-season=\"summer\" onclick=\"setSeason('summer')\">\r\n                    <span class=\"season-icon\">\u2600\ufe0f<\/span>\r\n                    <span>Summer<\/span>\r\n                <\/button>\r\n                <button class=\"season-btn\" data-season=\"fall\" onclick=\"setSeason('fall')\">\r\n                    <span class=\"season-icon\">\ud83c\udf42<\/span>\r\n                    <span>Fall<\/span>\r\n                <\/button>\r\n                <button class=\"season-btn\" data-season=\"winter\" onclick=\"setSeason('winter')\">\r\n                    <span class=\"season-icon\">\u2744\ufe0f<\/span>\r\n                    <span>Winter<\/span>\r\n                <\/button>\r\n            <\/div>\r\n            <div class=\"current-season-display\" id=\"currentSeasonDisplay\">\ud83c\udf31 Spring<\/div>\r\n        <\/div>\r\n\r\n        <!-- Weather Roll Buttons -->\r\n        <div class=\"weather-section\">\r\n            <div class=\"weather-section-title\">Roll Weather<\/div>\r\n            <button class=\"weather-roll-btn\" onclick=\"rollCurrentHexWeather()\">\r\n                <span>\ud83c\udfb2<\/span>\r\n                <span>Current Hex Weather<\/span>\r\n            <\/button>\r\n            <button class=\"weather-roll-btn secondary\" onclick=\"rollGenericWeatherButton()\">\r\n                <span>\ud83c\udf24\ufe0f<\/span>\r\n                <span>Generic Weather<\/span>\r\n            <\/button>\r\n        <\/div>\r\n\r\n        <!-- Result Display -->\r\n        <div class=\"weather-result-box\" id=\"weatherResultBox\" style=\"display: none;\">\r\n            <div class=\"weather-result-label\">Current Weather<\/div>\r\n            <div class=\"weather-result-value\" id=\"weatherResultValue\">Clear<\/div>\r\n            <div class=\"weather-result-description\" id=\"weatherResultDescription\"><\/div>\r\n            <div class=\"weather-result-details\" id=\"weatherResultDetails\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- History -->\r\n        <div class=\"weather-section\">\r\n            <div class=\"weather-section-title\">History<\/div>\r\n            <div class=\"weather-history\" id=\"weatherHistory\">\r\n                <div class=\"empty-state\">No weather rolled yet<\/div>\r\n            <\/div>\r\n            <button class=\"clear-weather-btn\" onclick=\"clearWeatherHistory()\">Clear History<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n    <!-- Site Header -->\r\n    <header class=\"site-header\">\r\n        <h1>HEXGRINDER<\/h1>\r\n                    <p class=\"subtitle\">Praise the Hex!<\/p>\r\n            <\/header>\r\n\r\n    <div class=\"container\">\r\n        <!-- Main Grid -->\r\n        <div class=\"main-grid\">\r\n            <!-- Maps Area -->\r\n            <div class=\"maps-column\">\r\n                <!-- Hex Map -->\r\n                <div class=\"card\">\r\n                    <h2 class=\"card-title\">\r\n                        <span class=\"icon\">\ud83d\uddfa\ufe0f<\/span>\r\n                        Wilderness Map\r\n                        <span class=\"biome-indicator\" id=\"biomeIndicator\" style=\"display:none; margin-left:0.5rem; font-size:0.8rem; font-weight:normal; color:var(--text-secondary); font-family:'Cormorant Garamond',serif;\">\u2014 <span id=\"currentBiomeName\">Standard<\/span><\/span>\r\n                        <span class=\"tooltip\">\r\n                            <span class=\"info-icon\">?<\/span>\r\n                            <span class=\"tooltip-text\">\r\n                                <strong>Navigation<\/strong><br><br>\r\n                                \u2022 Click adjacent dark hexes to reveal terrain<br>\r\n                                \u2022 Click revealed hexes to move there<br>\r\n                                \u2022 Roll for Encounter or Leave Without Exploring<br>\r\n                                \u2022 Drag empty space to pan map<br>\r\n                                \u2022 Hold Shift or middle-click to drag over hexes<br>\r\n                                \u2022 +\/- buttons or scroll to zoom\r\n                            <\/span>\r\n                        <\/span>\r\n                        <button class=\"help-btn\" onclick=\"openInstructionsModal()\" title=\"Open Instructions\">\r\n                            <span class=\"help-icon\">\ud83d\udcd6<\/span>\r\n                            <span>Help<\/span>\r\n                        <\/button>\r\n                    <\/h2>\r\n                    <div class=\"hex-map-wrapper\" id=\"mapWrapper\">\r\n                        <!-- Setup Card Overlay -->\r\n                        <div class=\"card setup-card-overlay\" id=\"setupCard\" >\r\n                            <h2 class=\"card-title\">\r\n                                <span class=\"icon\">\u2699\ufe0f<\/span>\r\n                                New Expedition\r\n                            <\/h2>\r\n                            <div class=\"starting-terrain\" style=\"margin-bottom:1rem;\">\r\n                                <label class=\"meaning-label\" style=\"display:block; margin-bottom:0.5rem; font-size:0.85rem; color:var(--text-secondary);\">Biome<\/label>\r\n                                <select class=\"terrain-select\" id=\"biomeSetSelector\">\r\n                                    <option value=\"standard\">\ud83c\udf0d Standard<\/option>\r\n                                    <option value=\"frozen_north\">\u2744\ufe0f Frozen North<\/option>\r\n                                    <option value=\"deep_dark\">\ud83d\udd73\ufe0f Deep Dark<\/option>\r\n                                <\/select>\r\n                            <\/div>\r\n                            <div class=\"starting-terrain\">\r\n                                <label class=\"meaning-label\" style=\"display:block; margin-bottom:0.5rem; font-size:0.85rem; color:var(--text-secondary);\">Starting Terrain<\/label>\r\n                                <select class=\"terrain-select\" id=\"startingTerrain\">\r\n                                    <option value=\"plains\">\ud83c\udf3e Plains<\/option>\r\n                                    <option value=\"forest\">\ud83c\udf32 Forest<\/option>\r\n                                    <option value=\"hills\">\u26f0\ufe0f Hills<\/option>\r\n                                    <option value=\"mountains\">\ud83c\udfd4\ufe0f Mountains<\/option>\r\n                                    <option value=\"swamp\">\ud83c\udf3f Swamp<\/option>\r\n                                    <option value=\"desert\">\ud83c\udfdc\ufe0f Desert<\/option>\r\n                                    <option value=\"water\">\ud83c\udf0a Water<\/option>\r\n                                    <option value=\"tundra\">\u2744\ufe0f Tundra<\/option>\r\n                                    <option value=\"jungle\">\ud83c\udf34 Jungle<\/option>\r\n                                    <option value=\"wasteland\">\ud83d\udc80 Wasteland<\/option>\r\n                                <\/select>\r\n                            <\/div>\r\n                            <div class=\"starting-terrain\" style=\"margin-top:1rem;\">\r\n                                <label style=\"display:flex; align-items:center; gap:0.5rem; cursor:pointer; font-size:0.9rem; color:var(--text-primary);\">\r\n                                    <input type=\"checkbox\" id=\"startWithSettlement\" style=\"width:1.1rem; height:1.1rem; cursor:pointer;\">\r\n                                    <span>\ud83c\udfd8\ufe0f Start with a settlement<\/span>\r\n                                <\/label>\r\n                            <\/div>\r\n                            <button class=\"action-btn\" onclick=\"startExpedition()\">Begin Expedition<\/button>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"hex-map\" id=\"hexMap\"><\/div>\r\n                        <div class=\"map-controls\">\r\n                            <button class=\"map-btn\" onclick=\"zoomMap(1.2)\" title=\"Zoom In\">+<\/button>\r\n                            <button class=\"map-btn\" onclick=\"zoomMap(0.8)\" title=\"Zoom Out\">\u2212<\/button>\r\n                            <button class=\"map-btn\" onclick=\"centerMap()\" title=\"Center\">\u2316<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Dungeon Map -->\r\n                <div class=\"card\" id=\"dungeonMapCard\">\r\n                    <h2 class=\"card-title\">\r\n                        <span class=\"icon\">\ud83c\udff0<\/span>\r\n                        Dungeon Map\r\n                        <span class=\"tooltip\">\r\n                            <span class=\"info-icon\">?<\/span>\r\n                            <span class=\"tooltip-text\">\r\n                                <strong>Dungeon Exploration<\/strong><br><br>\r\n                                \u2022 Dungeon discovered in current hex<br>\r\n                                \u2022 Explore rooms to reveal the layout<br>\r\n                                \u2022 Click rooms to explore them\r\n                            <\/span>\r\n                        <\/span>\r\n                    <\/h2>\r\n                    <div id=\"dungeonInfo\" style=\"margin-bottom:1rem; padding:0.75rem; background:var(--bg-elevated); border-radius:4px; text-align:center;\">\r\n                        <div style=\"font-family:'Cinzel',serif; color:var(--accent-gold); margin-bottom:0.5rem;\" id=\"dungeonName\">Ancient Crypt<\/div>\r\n                        <div style=\"font-size:0.85rem; color:var(--text-secondary);\" id=\"dungeonCoords\">Hex (0, 0)<\/div>\r\n                    <\/div>\r\n                    <div class=\"hex-map-wrapper\" id=\"dungeonMapWrapper\">\r\n                        <div class=\"hex-map\" id=\"dungeonMap\"><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div><!-- End maps-column -->\r\n\r\n            <!-- Sidebar -->\r\n            <div class=\"sidebar\">\r\n                <!-- Current Position -->\r\n                <div class=\"card collapsible\">\r\n                    <h2 class=\"card-title\" onclick=\"toggleCard(this)\">\r\n                        <span class=\"icon\">\ud83d\udccd<\/span>\r\n                        Current Position\r\n                        <span class=\"collapse-icon\">\u25bc<\/span>\r\n                    <\/h2>\r\n                    <div class=\"card-body\">\r\n                        <div class=\"current-hex-display\" id=\"currentHexDisplay\">\r\n                            <div class=\"current-terrain-icon\" id=\"currentTerrainIcon\">\u2b21<\/div>\r\n                            <div class=\"current-terrain-name\" id=\"currentTerrainName\">Unexplored<\/div>\r\n                            <div class=\"current-coords\" id=\"currentCoords\">\u2014<\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Locations Section -->\r\n                        <div id=\"locationsContainer\" style=\"margin-top: 1rem; display: none;\">\r\n                            <h3 style=\"font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--accent-gold);\">\r\n                                \ud83d\udccd Locations\r\n                            <\/h3>\r\n                            <div id=\"locationsList\" style=\"display: flex; flex-direction: column; gap: 0.5rem;\">\r\n                            <\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- Notes Button -->\r\n                        <button class=\"current-position-button\" id=\"currentPositionNotesBtn\" style=\"margin-top: 1rem; width: 100%;\">\r\n                            \ud83d\udcdd View Notes\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Tile Set Selector -->\r\n                <div class=\"card collapsible collapsed\">\r\n                    <h2 class=\"card-title\" onclick=\"toggleCard(this)\">\r\n                        <span class=\"icon\">\ud83c\udfa8<\/span>\r\n                        Visual Theme\r\n                        <span class=\"collapse-icon\">\u25bc<\/span>\r\n                    <\/h2>\r\n                    <div class=\"card-body\">\r\n                        <div class=\"starting-terrain\">\r\n                            <label class=\"meaning-label\" style=\"display:block; margin-bottom:0.5rem; font-size:0.85rem; color:var(--text-secondary);\">\r\n                                Tile Set\r\n                            <\/label>\r\n                            <select class=\"terrain-select\" id=\"tileSetSelector\" onchange=\"switchTileSet(this.value)\">\r\n                                <option value=\"-1\">Loading...<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                        <div style=\"margin-top:0.5rem; font-size:0.85rem; color:var(--text-muted); font-style:italic;\">\r\n                            Change the visual appearance of terrain tiles\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Settings -->\r\n                <div class=\"card collapsible collapsed\">\r\n                    <h2 class=\"card-title\" onclick=\"toggleCard(this)\">\r\n                        <span class=\"icon\">\u2699\ufe0f<\/span>\r\n                        Settings\r\n                        <span class=\"collapse-icon\">\u25bc<\/span>\r\n                    <\/h2>\r\n                    <div class=\"card-body\">\r\n                        <!-- Use Chaos Factor -->\r\n                        <div class=\"setting-control\">\r\n                            <div class=\"setting-row\">\r\n                                <div class=\"setting-label-group\">\r\n                                    <span class=\"setting-label\" id=\"chaosFactorLabel\">Use Chaos Factor<\/span>\r\n                                    <span class=\"tooltip info-icon\">?\r\n                                        <span class=\"tooltip-text\">When enabled, the Oracle's Chaos Factor (1-9) is added as a bonus to encounter rolls. Higher chaos means encounters skew toward later entries in the encounter table, typically yielding more intense or unusual results.<\/span>\r\n                                    <\/span>\r\n                                <\/div>\r\n                                <label class=\"toggle-switch\">\r\n                                    <input type=\"checkbox\" id=\"useChaosFactorToggle\" onchange=\"updateChaosFactorSetting()\">\r\n                                    <span class=\"toggle-slider\"><\/span>\r\n                                <\/label>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Adjacency Weight -->\r\n                        <div class=\"adjacency-control\" style=\"margin-top: 1rem;\">\r\n                            <div class=\"adjacency-label\">\r\n                                <span>Adjacency Weight<\/span>\r\n                                <span class=\"adjacency-value\" id=\"adjacencyValue\">3x<\/span>\r\n                            <\/div>\r\n                            <input type=\"range\" class=\"adjacency-slider\" id=\"adjacencySlider\" \r\n                                   min=\"1\" max=\"6\" value=\"3\" oninput=\"updateAdjacencyDisplay()\">\r\n                            <div class=\"adjacency-hint\">Higher = terrain more likely to match neighbors<\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- Max Sea Cluster -->\r\n                        <div class=\"adjacency-control\" style=\"margin-top: 1rem;\">\r\n                            <div class=\"adjacency-label\">\r\n                                <span>Max Sea Tiles<\/span>\r\n                                <span class=\"adjacency-value\" id=\"maxSeaClusterValue\">5<\/span>\r\n                            <\/div>\r\n                            <input type=\"range\" class=\"adjacency-slider\" id=\"maxSeaClusterSlider\" \r\n                                   min=\"1\" max=\"20\" value=\"5\" oninput=\"updateMaxSeaClusterDisplay()\">\r\n                            <div class=\"adjacency-hint\">Lower = more land, Higher = more water<\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- Dungeon Chance -->\r\n                        <div class=\"adjacency-control\" style=\"margin-top: 1rem;\">\r\n                            <div class=\"adjacency-label\">\r\n                                <span>Dungeon Chance<\/span>\r\n                                <span class=\"adjacency-value\" id=\"dungeonChanceValue\">5%<\/span>\r\n                            <\/div>\r\n                            <input type=\"range\" class=\"adjacency-slider\" id=\"dungeonChanceSlider\" \r\n                                   min=\"5\" max=\"95\" step=\"5\" value=\"5\" oninput=\"updateDungeonChanceDisplay()\">\r\n                            <div class=\"adjacency-hint\">Chance a hex contains a dungeon when explored<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Terrain Legend -->\r\n                <div class=\"card collapsible collapsed\">\r\n                    <h2 class=\"card-title\" onclick=\"toggleCard(this)\">\r\n                        <span class=\"icon\">\ud83d\uddfa\ufe0f<\/span>\r\n                        Terrain Types\r\n                        <span class=\"collapse-icon\">\u25bc<\/span>\r\n                    <\/h2>\r\n                    <div class=\"card-body\">\r\n                        <div class=\"terrain-legend\">\r\n                            <div class=\"legend-item\" data-terrain=\"plains\" onclick=\"toggleTerrain('plains')\" title=\"Click to toggle Plains\">\r\n                                <span class=\"legend-icon\">\ud83c\udf3e<\/span> Plains\r\n                                <span class=\"terrain-status\">\u2713<\/span>\r\n                            <\/div>\r\n                            <div class=\"legend-item\" data-terrain=\"forest\" onclick=\"toggleTerrain('forest')\" title=\"Click to toggle Forest\">\r\n                                <span class=\"legend-icon\">\ud83c\udf32<\/span> Forest\r\n                                <span class=\"terrain-status\">\u2713<\/span>\r\n                            <\/div>\r\n                            <div class=\"legend-item\" data-terrain=\"hills\" onclick=\"toggleTerrain('hills')\" title=\"Click to toggle Hills\">\r\n                                <span class=\"legend-icon\">\u26f0\ufe0f<\/span> Hills\r\n                                <span class=\"terrain-status\">\u2713<\/span>\r\n                            <\/div>\r\n                            <div class=\"legend-item\" data-terrain=\"mountains\" onclick=\"toggleTerrain('mountains')\" title=\"Click to toggle Mountains\">\r\n                                <span class=\"legend-icon\">\ud83c\udfd4\ufe0f<\/span> Mountains\r\n                                <span class=\"terrain-status\">\u2713<\/span>\r\n                            <\/div>\r\n                            <div class=\"legend-item\" data-terrain=\"swamp\" onclick=\"toggleTerrain('swamp')\" title=\"Click to toggle Swamp\">\r\n                                <span class=\"legend-icon\">\ud83c\udf3f<\/span> Swamp\r\n                                <span class=\"terrain-status\">\u2713<\/span>\r\n                            <\/div>\r\n                            <div class=\"legend-item\" data-terrain=\"desert\" onclick=\"toggleTerrain('desert')\" title=\"Click to toggle Desert\">\r\n                                <span class=\"legend-icon\">\ud83c\udfdc\ufe0f<\/span> Desert\r\n                                <span class=\"terrain-status\">\u2713<\/span>\r\n                            <\/div>\r\n                            <div class=\"legend-item\" data-terrain=\"water\" onclick=\"toggleTerrain('water')\" title=\"Click to toggle Water\">\r\n                                <span class=\"legend-icon\">\ud83c\udf0a<\/span> Water\r\n                                <span class=\"terrain-status\">\u2713<\/span>\r\n                            <\/div>\r\n                            <div class=\"legend-item\" data-terrain=\"tundra\" onclick=\"toggleTerrain('tundra')\" title=\"Click to toggle Tundra\">\r\n                                <span class=\"legend-icon\">\u2744\ufe0f<\/span> Tundra\r\n                                <span class=\"terrain-status\">\u2713<\/span>\r\n                            <\/div>\r\n                            <div class=\"legend-item\" data-terrain=\"jungle\" onclick=\"toggleTerrain('jungle')\" title=\"Click to toggle Jungle\">\r\n                                <span class=\"legend-icon\">\ud83c\udf34<\/span> Jungle\r\n                                <span class=\"terrain-status\">\u2713<\/span>\r\n                            <\/div>\r\n                            <div class=\"legend-item\" data-terrain=\"wasteland\" onclick=\"toggleTerrain('wasteland')\" title=\"Click to toggle Wasteland\">\r\n                                <span class=\"legend-icon\">\ud83d\udc80<\/span> Wasteland\r\n                                <span class=\"terrain-status\">\u2713<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Travel Log -->\r\n                <div class=\"card collapsible\">\r\n                    <h2 class=\"card-title\" onclick=\"toggleCard(this)\">\r\n                        <span class=\"icon\">\ud83d\udcdc<\/span>\r\n                        Travel Log\r\n                        <span class=\"collapse-icon\">\u25bc<\/span>\r\n                    <\/h2>\r\n                    <div class=\"card-body\">\r\n                        <div class=\"travel-log\" id=\"travelLog\">\r\n                            <div class=\"empty-state\">No journey recorded yet...<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Party Notes -->\r\n                <div class=\"card collapsible\">\r\n                    <h2 class=\"card-title\" onclick=\"toggleCard(this)\">\r\n                        <span class=\"icon\">\ud83d\udcdd<\/span>\r\n                        Party Notes\r\n                        <span class=\"collapse-icon\">\u25bc<\/span>\r\n                    <\/h2>\r\n                    <div class=\"card-body\">\r\n                        <button class=\"action-btn secondary\" onclick=\"openPartyNotesModal()\">\r\n                            \ud83d\udcdd Open Party Notes\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Save\/Load -->\r\n                <div class=\"card collapsible collapsed\">\r\n                    <h2 class=\"card-title\" onclick=\"toggleCard(this)\">\r\n                        <span class=\"icon\">\ud83d\udcbe<\/span>\r\n                        Save & Load\r\n                        <span class=\"collapse-icon\">\u25bc<\/span>\r\n                    <\/h2>\r\n                    <div class=\"card-body\">\r\n                                                    <p style=\"text-align:center; color:var(--text-muted); margin-bottom:1rem; font-size:0.9rem;\">\r\n                                <a href=\"https:\/\/www.hexgrinder.com\/hexgrinderapp\/wp-login.php?redirect_to=https%3A%2F%2Fwww.hexgrinder.com%2Fhexgrinderapp%2Fhex-explorer%2F\">Log in<\/a> to save maps to the cloud\r\n                            <\/p>\r\n                                                <button class=\"action-btn secondary\" onclick=\"saveMapState()\">\r\n                            \ud83d\udce5 Download JSON\r\n                        <\/button>\r\n                        <label class=\"action-btn secondary\" style=\"display:block; text-align:center; cursor:pointer;\">\r\n                            \ud83d\udce4 Load JSON\r\n                            <input type=\"file\" accept=\".json\" onchange=\"loadMapState(event)\" style=\"display:none;\">\r\n                        <\/label>\r\n                        <button class=\"action-btn danger\" onclick=\"resetMap()\">\r\n                            \ud83d\udd04 New Map\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div><!-- End sidebar -->\r\n        <\/div><!-- End main-grid -->\r\n    <\/div><!-- End container -->\r\n\r\n    <!-- Modals -->\r\n    \r\n    <!-- Save Map Modal -->\r\n    <div class=\"modal\" id=\"saveMapModal\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h3 class=\"modal-title\">\ud83d\udcbe Save Map<\/h3>\r\n                <button class=\"modal-close\" onclick=\"closeSaveModal()\">&times;<\/button>\r\n            <\/div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"form-group\">\r\n                    <label for=\"mapNameInput\">Map Name<\/label>\r\n                    <input type=\"text\" id=\"mapNameInput\" class=\"form-input\" placeholder=\"My Adventure Map\" value=\"\">\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label>\r\n                        <input type=\"checkbox\" id=\"mapPublicCheckbox\" >\r\n                        Make this map public (others can view)\r\n                    <\/label>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"modal-footer\">\r\n                <button class=\"action-btn secondary\" onclick=\"closeSaveModal()\">Cancel<\/button>\r\n                <button class=\"action-btn\" onclick=\"HexGrinderAPI.confirmSave()\">Save Map<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Notes Modal -->\r\n    <div class=\"modal\" id=\"noteModal\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h3 class=\"modal-title\" id=\"noteModalTitle\">\ud83d\udcdd Hex Notes<\/h3>\r\n                <button class=\"modal-close\" onclick=\"closeNoteModal()\">&times;<\/button>\r\n            <\/div>\r\n            <div class=\"modal-body\">\r\n                <textarea id=\"noteTextarea\" class=\"note-textarea\" placeholder=\"Add your notes here...\"><\/textarea>\r\n            <\/div>\r\n            <div class=\"modal-footer\">\r\n                <button class=\"action-btn danger\" onclick=\"deleteNote()\">Delete<\/button>\r\n                <button class=\"action-btn secondary\" onclick=\"closeNoteModal()\">Cancel<\/button>\r\n                <button class=\"action-btn\" onclick=\"saveNote()\">Save Note<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Party Notes Modal -->\r\n    <div class=\"modal\" id=\"partyNotesModal\">\r\n        <div class=\"modal-content modal-large\">\r\n            <div class=\"modal-header\">\r\n                <h3 class=\"modal-title\">\ud83d\udcdd Party Notes<\/h3>\r\n                <button class=\"modal-close\" onclick=\"closePartyNotesModal()\">&times;<\/button>\r\n            <\/div>\r\n            <div class=\"modal-body\">\r\n                <textarea id=\"partyNotesTextarea\" class=\"note-textarea large\" placeholder=\"Party notes, campaign journal, NPCs met, quests tracked...\"><\/textarea>\r\n            <\/div>\r\n            <div class=\"modal-footer\">\r\n                <button class=\"action-btn danger\" onclick=\"deletePartyNotes()\">Delete All<\/button>\r\n                <button class=\"action-btn secondary\" onclick=\"closePartyNotesModal()\">Cancel<\/button>\r\n                <button class=\"action-btn\" onclick=\"savePartyNotes()\">Save Notes<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Settlement Modal -->\r\n    <div class=\"modal\" id=\"settlementModal\">\r\n        <div class=\"modal-content modal-medium\">\r\n            <div class=\"modal-header\">\r\n                <h3 class=\"modal-title\" id=\"settlementModalTitle\">\ud83c\udfd8\ufe0f Settlement<\/h3>\r\n                <button class=\"modal-close\" onclick=\"closeSettlementModal()\">&times;<\/button>\r\n            <\/div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"settlement-info\">\r\n                    <div class=\"settlement-type\" id=\"settlementType\"><\/div>\r\n                    <div class=\"settlement-locations-header\">Points of Interest<\/div>\r\n                    <ul class=\"settlement-locations\" id=\"settlementLocations\"><\/ul>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"modal-footer\">\r\n                <button class=\"action-btn secondary\" onclick=\"closeSettlementModal()\">Close<\/button>\r\n                <button class=\"action-btn\" onclick=\"openSettlementNotes()\">\ud83d\udcdd View Hex Notes<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Instructions Modal -->\r\n    <div class=\"instructions-modal\" id=\"instructionsModal\">\r\n        <div class=\"instructions-content\">\r\n            <div class=\"instructions-header\">\r\n                <h2 class=\"instructions-title\">\ud83d\udcd6 How to Play<\/h2>\r\n                <button class=\"instructions-close\" onclick=\"closeInstructionsModal()\">&times;<\/button>\r\n            <\/div>\r\n            <div id=\"instructionsBody\">\r\n                <p style=\"color: var(--text-muted); text-align: center;\">Loading help content...<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Encounter Modal -->\r\n    <div class=\"modal\" id=\"encounterModal\">\r\n        <div class=\"modal-content encounter-modal-content\">\r\n            <div class=\"encounter-icon\" id=\"encounterIcon\">\ud83c\udf0d<\/div>\r\n            <h3 class=\"encounter-title\" id=\"encounterTitle\">Exploring...<\/h3>\r\n            \r\n            <!-- Hex Description (always shown) -->\r\n            <div class=\"encounter-description\" id=\"encounterRoll\"><\/div>\r\n            \r\n            <!-- Encounter Result (hidden until revealed) -->\r\n            <div class=\"encounter-result\" id=\"encounterResult\" style=\"display: none;\">\r\n                <div class=\"encounter-divider\">\u2014 Encounter \u2014<\/div>\r\n                <p class=\"encounter-text\" id=\"encounterText\"><\/p>\r\n            <\/div>\r\n            \r\n            <!-- Initial buttons: Reveal or Leave -->\r\n            <div class=\"encounter-buttons\" id=\"encounterButtons\">\r\n                <button class=\"action-btn\" id=\"encounterRevealBtn\" onclick=\"revealEncounter()\">\r\n                    \ud83c\udfb2 Roll for Encounter\r\n                <\/button>\r\n                <button class=\"action-btn secondary\" id=\"encounterLeaveBtn\" onclick=\"leaveWithoutExploring()\">\r\n                    \ud83d\udeb6 Leave Without Exploring\r\n                <\/button>\r\n            <\/div>\r\n            \r\n            <!-- Close button (shown after encounter is revealed) -->\r\n            <button class=\"action-btn\" id=\"encounterCloseBtn\" onclick=\"closeEncounterModal()\" style=\"display: none;\">\r\n                Continue\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Dungeon Encounter Modal -->\r\n    <div class=\"dungeon-encounter-modal\" id=\"dungeonEncounterModal\">\r\n        <div class=\"dungeon-encounter-content\">\r\n            <div class=\"dungeon-encounter-header\">\r\n                <div class=\"dungeon-encounter-icon\" id=\"dungeonEncounterIcon\">\u2694\ufe0f<\/div>\r\n                <h3 class=\"dungeon-encounter-title\" id=\"dungeonEncounterTitle\">Room Encounter<\/h3>\r\n                <div class=\"dungeon-encounter-difficulty\" id=\"dungeonEncounterDifficulty\">Easy<\/div>\r\n                <div class=\"dungeon-encounter-room\" id=\"dungeonEncounterRoom\">Room 1<\/div>\r\n            <\/div>\r\n            <p class=\"dungeon-encounter-description\" id=\"dungeonEncounterDescription\"><\/p>\r\n            <div class=\"dungeon-encounter-text\" id=\"dungeonEncounterText\"><\/div>\r\n            <button class=\"action-btn\" onclick=\"closeDungeonEncounterModal()\">Continue<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Room Note Modal -->\r\n    <div class=\"modal\" id=\"roomNoteModal\">\r\n        <div class=\"modal-content\" style=\"max-width: 500px;\">\r\n            <div class=\"modal-header\">\r\n                <h3 class=\"modal-title\">\ud83d\udcdd Room Notes<\/h3>\r\n                <button class=\"modal-close\" onclick=\"closeRoomNoteModal()\">&times;<\/button>\r\n            <\/div>\r\n            <div class=\"modal-body\">\r\n                <div class=\"form-group\">\r\n                    <label>Room<\/label>\r\n                    <div id=\"roomNoteModalCoords\" style=\"font-weight: bold; color: var(--accent-gold, #c9a84c);\"><\/div>\r\n                <\/div>\r\n                <div class=\"form-group\">\r\n                    <label for=\"roomNoteTextarea\">Notes<\/label>\r\n                    <textarea id=\"roomNoteTextarea\"\r\n                              class=\"form-input\"\r\n                              rows=\"8\"\r\n                              placeholder=\"Add your notes about this room...\"><\/textarea>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"modal-footer\">\r\n                <button class=\"dashboard-btn\" onclick=\"deleteRoomNote()\">Delete Note<\/button>\r\n                <button class=\"dashboard-btn\" onclick=\"closeRoomNoteModal()\">Cancel<\/button>\r\n                <button class=\"dashboard-btn primary\" onclick=\"saveRoomNote()\">Save<\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div><!-- End hexgrinder-app -->\r\n\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.hexgrinder.com\/hexgrinderapp\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hexgrinder.com\/hexgrinderapp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.hexgrinder.com\/hexgrinderapp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.hexgrinder.com\/hexgrinderapp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hexgrinder.com\/hexgrinderapp\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":0,"href":"https:\/\/www.hexgrinder.com\/hexgrinderapp\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.hexgrinder.com\/hexgrinderapp\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}