acks-tools/acks/templates/wandering_monster.html

{% extends "base.html" %}
{% set active_page = "wandering_monster" %}

{% block title %}Wandering Monsters{% endblock %}
{% block content %}
<div class="uk-flex uk-flex-center uk-margin-bottom uk-margin-top">
    <h1 class="uk-text-center"><strong>Adventurer Conqueror King</strong>Wandering Monsters</h1>
</div>

<form id="wandering_form" autocomplete="off">
    <div class="uk-margin uk-text-center">
        <span class="uk-margin-right">Where is the party?</span>
        <button class="uk-button uk-button-default" type="button" id="dungeon_select">Dungeon</button>
        <button class="uk-button uk-button-default" type="button" id="wilderness_select">Wilderness</button>
    </div>

    <div class="uk-margin">
        <div id="dungeon_content" class="uk-hidden">
            <hr class="uk-divider-icon"/>

            <div class="uk-margin" uk-grid>
                <div class="uk-width-1-3">
                    <h2 class="uk-text-left">Dungeon Monster</h2>
                    <h3>Configure</h3>

                    <div class="uk-margin uk-text-meta">
                        <strong>Frequency:</strong> When in a dungeon, the Judge should make an encounter throw every 2 turns. A throw of 6+ on a 1d6 indicates a wandering monster is encountered.
                    </div>
                    <div class="uk-margin">
                        <div>
                            <label for="dungeon_level" class="uk-margin-right"><strong>Current dungeon level:</strong></label>
                            <select name="dungeon_level" id="dungeon_level" class="uk-select uk-width-1-5">
                                <option value="1" selected>1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6+</option>
                            </select>
                        </div>

                        <div class="uk-margin">
                            <button type="button" class="uk-button uk-button-primary" id="dungeon_generate_button">Roll</button>
                        </div>
                    </div>
                </div>
                <div class="uk-width-1-5"> &nbsp; </div>
                <div id="dungeon_output" class="uk-width-expand uk-hidden">
                    <div id="roll_result" class="uk-margin uk-text-muted"></div>
                    <div class="uk-card uk-card-secondary uk-card-body">
                        <h3 id="wm_entity" class="uk-card-title uk-text-center uk-margin uk-text-success uk-margin-medium-bottom"></h3>

                        <div class="uk-margin uk-column-1-2 uk-column-divider uk-text-meta">
                            <div class="uk-margin"><strong>Quantity:</strong> <span id="wm_quantity"/></div>
                            <div class="uk-margin"><strong>Reaction:</strong> <span id="wm_reaction"/></div>
                            <div class="uk-margin"><strong>Dungeon Level:</strong> <span id="wm_dungeon_level"/></div>

                            <div class="uk-margin"><strong>Distance:</strong> <span id="wm_distance"/></div>
                            <div class="uk-margin"><strong>Surprise:</strong> <span id="wm_surprise"/></div>
                            <div class="uk-margin"><strong>Roll/Adjust:</strong> <span id="wm_adjust"/></div>
                            <div class="uk-margin"><strong>Monster Table:</strong> <span id="wm_monster_table"/></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="wilderness_content" class="uk-hidden">
            <hr class="uk-divider-icon">

            <div class="uk-margin" uk-grid>
                <div class="uk-width-1-3">
                    <h2 class="uk-text-left">Wilderness Monster</h2>
                    <h3>Configure</h3>

                    <div class="uk-margin uk-text-meta">
                        <strong>Frequency:</strong> When the characters in the wilderness, the Judge should make an encounter throw once per day if they are stationary or in settled terrain. Otherwise, the Judge should make an encounter throw each time the adventurers enter a new 6-mile hex. 
                    </div>
                    <div class="uk-margin">
                        <div>
                            <label for="terrain_type" class="uk-margin-right"><strong>Current terrain type:</strong></label>
                            <select name="terrain_type" id="terrain_type" class="uk-select uk-width-1-1">
                                <option value="1" selected>Clear, Grass, Scrub</option>
                                <option value="2">Woods</option>
                                <option value="3">River</option>
                                <option value="4">Swamp</option>
                                <option value="5">Mountains, Hills</option>
                                <option value="6">Barren, Desert</option>
                                <option value="7">Inhabited</option>
                                <option value="8">City</option>
                                <option value="9">Ocean</option>
                                <option value="10">Jungle</option>
                            </select>
                        </div>

                        <div class="uk-margin">
                            <button type="button" class="uk-button uk-button-primary" id="wilderness_generate_button">Roll</button>
                        </div>
                    </div>
                </div>
                <div class="uk-width-1-5">
                    &nbsp;
                </div>
                <div id="wilderness_output" class="uk-width-expand uk-hidden">
                    <div id="roll_result" class="uk-margin uk-text-muted"></div>
                    <div class="uk-card uk-card-secondary uk-card-body">
                        <h3 id="wm_entity" class="uk-card-title uk-text-center uk-margin uk-text-success"></h3>

                        <div class="uk-margin uk-column-1-2 uk-column-divider uk-text-meta">
                            <div><strong>Surprise:</strong> <span id="wm_surprise"/></div>
                            <div><strong>Reaction:</strong> <span id="wm_reaction"/></div>
                            <div><strong>Monster Table:</strong> <span id="wm_monster_table"/></div>
                            <div><strong>Terrain Type:</strong> <span id="wm_terrain_type"/></div>
                        </div>
                        <div id="wilderness_distance_table" class="uk-margin uk-text-meta uk-flex uk-flex-center uk-margin-large-top">
                            <table>
                                <thead>
                                    <tr>
                                        <th style="text-align: left">Terrain</th>
                                        <th style="text-align: left">Encounter Distance (yards)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td style="text-align: left">Badlands</td>
                                        <td style="text-align: left">2d6x10</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left">Desert</td>
                                        <td style="text-align: left">4d6x10</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left">Fields, Fallow</td>
                                        <td style="text-align: left">4d6x10</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left">Fields, Ripe</td>
                                        <td style="text-align: left">5d10</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left">Fields, Wild</td>
                                        <td style="text-align: left">3d6x5</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left">Forest, Heavy or Jungle</td>
                                        <td style="text-align: left">5d4</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left">Forest, Light</td>
                                        <td style="text-align: left">5d8</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left">Marsh</td>
                                        <td style="text-align: left">8d10</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left">Mountains</td>
                                        <td style="text-align: left">4d6x10</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left">Plains</td>
                                        <td style="text-align: left">5d20x10</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <hr class="uk-divider-icon">

    <div>
        <h3 class="uk-text-center">Roll Modifiers</h3>
        <div class="uk-margin-bottom uk-margin-xlarge-left uk-margin-xlarge-right" uk-grid>
            <div class="uk-width-1-3 uk-flex-column uk-padding">
                <div class="uk-margin-right">Encounter: <input type="number" id="check_mod" min="-10" max="10" class="uk-input uk-width-1-4 uk-margin-left" value="0" onclick="this.select();"></div>
                <div class="uk-text-meta uk-margin-small-top">Adjustment to chance of encountering a wandering monster at all.</div>
            </div>
            <div class="uk-width-1-3 uk-flex-column uk-padding">
                <div class="uk-margin-right">Surprise: <input type="number" id="surprise_mod" min="-10" max="10" class="uk-input uk-width-1-4 uk-margin-left" value="0" onclick="this.select();"></div>
                <div class="uk-text-meta uk-margin-small-top">Adjustments to surprise for vigilance, lighting, noises, and any other bonuses/penalties.</div>
            </div>
            <div class="uk-width-1-3 uk-flex-column uk-padding">
                <div class="uk-margin-right">Reaction: <input type="number" id="reaction_mod" min="-10" max="10" class="uk-input uk-width-1-4 uk-margin-left" value="0" onclick="this.select()"></div>
                <div class="uk-text-meta uk-margin-small-top">Charisma modifier of "lead" character, other situational bonuses/penalties.</div>
            </div>
        </div>
    </div>
</form>
{% endblock %}

{% block head %}
<style>
div#wilderness_distance_table {
    font-size: .835rem;
}
</style>
{% endblock %}

{% block scripts %}
<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', () => {
        var dungeon_select = document.querySelector('button#dungeon_select');
        var wilderness_select = document.querySelector('button#wilderness_select');

        dungeon_select.addEventListener("click", toggleLocation);
        wilderness_select.addEventListener("click", toggleLocation);

        var dungeon_roll = document.querySelector('button#dungeon_generate_button');
        dungeon_roll.addEventListener("click", generateWanderingDungeonMonster);

        var wilderness_roll = document.querySelector('button#wilderness_generate_button');
        wilderness_roll.addEventListener("click", generateWanderingWildernessMonster);
    });

    function toggleLocation(e) {
        var dungeon_select = document.querySelector('button#dungeon_select');
        var wilderness_select = document.querySelector('button#wilderness_select');

        var dungeon_content = document.querySelector('div#dungeon_content');
        var wilderness_content = document.querySelector('div#wilderness_content');

        if(e.target.id === "dungeon_select") {
            wilderness_content.classList.add("uk-hidden");
            dungeon_content.classList.remove("uk-hidden");

            dungeon_select.classList.add("uk-button-secondary");
            dungeon_select.classList.remove("uk-button-default");

            wilderness_select.classList.add("uk-button-default");
            wilderness_select.classList.remove("uk-button-secondary");
        }

        if(e.target.id === "wilderness_select") {
            dungeon_content.classList.add("uk-hidden");
            wilderness_content.classList.remove("uk-hidden");

            wilderness_select.classList.add("uk-button-secondary");
            wilderness_select.classList.remove("uk-button-default");

            dungeon_select.classList.add("uk-button-default");
            dungeon_select.classList.remove("uk-button-secondary");
        }
    }

    function generateWanderingDungeonMonster() {
        resetOutputAreas();

        var dungeon_level_select = document.querySelector('select#dungeon_level');
        var surprise_mod = document.querySelector('input#surprise_mod');
        var reaction_mod = document.querySelector('input#reaction_mod');
        var check_mod = document.querySelector('input#check_mod');

        var payload = {
            type: "dungeon",
            dungeon_level: parseInt(dungeon_level_select.value),
            surprise_mod: parseInt(surprise_mod.value) || 0,
            reaction_mod: parseInt(reaction_mod.value) || 0,
            check_mod: parseInt(check_mod.value) || 0
        }

        fetch("{{ url_for('default_views.generate_wandering_monster') }}", {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload)
        }).then(response => response.json()).then(populateDungeonResponse);
    }

    function generateWanderingWildernessMonster() {
        resetOutputAreas();

        var terrain_type_select = document.querySelector('select#terrain_type');
        var surprise_mod = document.querySelector('input#surprise_mod');
        var reaction_mod = document.querySelector('input#reaction_mod');
        var check_mod = document.querySelector('input#check_mod');

        var payload = {
            type: "wilderness",
            terrain_type: parseInt(terrain_type_select.value),
            surprise_mod: parseInt(surprise_mod.value) || 0,
            reaction_mod: parseInt(reaction_mod.value) || 0,
            check_mod: parseInt(check_mod.value) || 0
        }

        fetch("{{ url_for('default_views.generate_wandering_monster') }}", {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload)
        }).then(response => response.json()).then(populateWildernessResponse);
    }

    function resetOutputAreas() {
        document.querySelector('div#dungeon_output').classList.remove('uk-animation-fade');
        document.querySelector('div#wilderness_output').classList.remove('uk-animation-fade');

        document.querySelector('div#dungeon_output').classList.add('uk-hidden');
        document.querySelector('div#wilderness_output').classList.add('uk-hidden');
    }

    function populateDungeonResponse(data) {
        var result_flag = document.querySelector('div#dungeon_output div#roll_result');

        // If we didn't get a Monster back
        if(data.check) {
            result_flag.innerText = `Danger! The party has encountered a foe! (${data.check_roll})`;

            result_flag.classList.remove('uk-text-success');
            result_flag.classList.add('uk-text-warning');

            // Populate data-points
            document.querySelector('div#dungeon_output #wm_entity').innerText = data.entity;
            document.querySelector('div#dungeon_output #wm_monster_table').innerText = data.monster_table;
            document.querySelector('div#dungeon_output #wm_dungeon_level').innerText = data.dungeon_level;
            document.querySelector('div#dungeon_output #wm_quantity').innerText = data.quantity;
            document.querySelector('div#dungeon_output #wm_adjust').innerText = `${data.roll} (${data.initial}) / ${data.adjustment}`;;
            document.querySelector('div#dungeon_output #wm_distance').innerText = data.distance + '\'';;
            document.querySelector('div#dungeon_output #wm_surprise').innerText = `${data.surprise[0]} (${data.surprise[1]})`;
            document.querySelector('div#dungeon_output #wm_reaction').innerText = `${data.reaction[0]} (${data.reaction[1]})`;

            document.querySelector('div#dungeon_output > div.uk-card').classList.remove('uk-hidden');
        } else {
            result_flag.innerText = `Safety! The party hasn't encountered a monster... this time. (${data.check_roll})`;

            result_flag.classList.remove('uk-text-warning');
            result_flag.classList.add('uk-text-success');

            document.querySelector('div#dungeon_output > div.uk-card').classList.add('uk-hidden');
        }

        // Unhide the appropriate content box
        document.querySelector('div#wilderness_output').classList.add('uk-hidden');
        document.querySelector('div#dungeon_output').classList.remove('uk-hidden');

        // Hit a fancy animation
        document.querySelector('div#dungeon_output').classList.add('uk-animation-fade');

        // Reset the form to prepare for next values
        document.querySelector('form#wandering_form').reset();
    }

    function populateWildernessResponse(data) {
        var result_flag = document.querySelector('div#wilderness_output div#roll_result');

        // Did we get a monster returned?
        if(data.check) {
            result_flag.innerText = `Danger! The party has encountered a foe! (${data.check_roll})`;

            result_flag.classList.remove('uk-text-success');
            result_flag.classList.add('uk-text-warning');

            document.querySelector('#wilderness_output h3#wm_entity').innerText = data.entity;
            document.querySelector('#wilderness_output span#wm_surprise').innerText = `${data.surprise[0]} (${data.surprise[1]})`;
            document.querySelector('#wilderness_output span#wm_reaction').innerText = `${data.reaction[0]} (${data.reaction[1]})`;
            document.querySelector('#wilderness_output span#wm_monster_table').innerText = data.monster_table;
            document.querySelector('#wilderness_output span#wm_terrain_type').innerText = data.terrain_type;

            document.querySelector('div#wilderness_output > div.uk-card').classList.remove('uk-hidden');
        } else {
            result_flag.innerText = `Safety! The party hasn't encountered a monster... this time. (${data.check_roll})`;

            result_flag.classList.remove('uk-text-warning');
            result_flag.classList.add('uk-text-success');

            document.querySelector('div#wilderness_output > div.uk-card').classList.add('uk-hidden');
        }

        // Unhide the appropriate content box
        document.querySelector('div#dungeon_output').classList.add('uk-hidden');
        document.querySelector('div#wilderness_output').classList.remove('uk-hidden');

        // Hit a fancy animation
        document.querySelector('div#wilderness_output').classList.add('uk-animation-fade');

        // Reset the form to prepare for next values
        document.querySelector('form#wandering_form').reset();
    }
</script>
{% endblock %}