index.html

<!DOCTYPE html>
<HTML>
    <head>
        <link rel = "stylesheet" href = "style.css">
        
        <script type="module" src="src/HackTimer/HackTimer.min.js"></script>
        <script type='module' src="dist/bundle.js?version=v0.4.6.39"></script>
        <!--script type="module" src="src/main.js"></script-->

        <!--Icons-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <!--favicon-->
        <link rel="icon" href="/favicon.ico" type="image/x-icon">

        <meta name="google-site-verification" content="IgjSYOU5-uUlX2dSA22IZ-aU9GvRbmQ5uie5qjuRWQg" />
        
        <meta name="description" content="A text-based idle RPG game inspired by Proto23, with heavy focus on progression through skill leveling, created by Miktaew.">
        <meta name="author" content="Miktaew">
        <meta property="og:title" content="Yet Another Idle RPG">
        <meta property="og:description" content="A text-based idle RPG game inspired by Proto23, with heavy focus on progression through skill leveling, created by Miktaew.">
        <meta property="og:image" content="https://miktaew.github.io/yet-another-idle-rpg-dev/resources/img/bigger_icon.png">
        <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "WebPage",
            "headline": "Yet Another Idle RPG",
            "description": "A text-based idle RPG game inspired by Proto23, with heavy focus on progression through skill leveling, created by Miktaew.",
            "image": "https://miktaew.github.io/yet-another-idle-rpg-dev/resources/img/bigger_icon.png",
            "author": {
                "@type": "Person",
                "name": "Miktaew"
            }
        }
        </script>

        <Title>Yet Another Idle RPG</Title>
    </head>

    <body onload = "prepareGame()">

        <div id = "loading_screen">
            LOADING
        </div>

        <div id = "main_content">
            

            <div id = "global_content"> <!-- stuff that needs to be available in both area page and character page-->
                <!-- basic character info (name, title, hp)-->
                <div id = "basic_character_info_div" class = "box_div">
                    <div id = "character_name_div"> 
                        <input type = "text" id = "character_name_field"> 
                    </div>

                    <div id = "character_xp_div">
                        <div id ="character_xp_bar_max">
                            <div id = "character_xp_bar_current">
                                
                            </div>
                        </div>
                        <div id = "character_xp_value">
                        </div>
                    </div>
                    
                    <div id = "character_stamina_div">
                        <div id ="character_stamina_bar_max">
                            <div id = "character_stamina_bar_current">
                            </div>
                        </div>
                        <div id = "character_stamina_value">
                            
                        </div>
                    </div>
                    <div id = "character_mana_div">
                        <div id ="character_mana_bar_max">
                            <div id = "character_mana_bar_current">
                            </div>
                        </div>
                        <div id = "character_mana_value">
                            0/0 mana
                        </div>
                    </div>

                    <div id = "character_health_div"> 
                        <div id = "character_healthbar_max"> 
                            <div id = "character_healthbar_current">
                            </div>
                        </div>
                        <div id = "character_health_value">
                        </div>
                    </div>
                </div>

                <div id = "time_and_location" class = "box_div">
                    <div id = "time_div"> </div>
                    
                    <div id = "location_name_div">
                        <span id = "location_icon_span"></span>
                        <span id = "location_name_span"></span>
                        <span id = "location_name_tooltip"></span>
                    </div>
                    <div id = "location_types_div">
                        
                    </div>
                </div>

                <!-- inventory list -->
                <div id = "inventory_div" class = "box_div"> 
                    <div id = "money_div">  </div>
                    <div id = "inventory_content_div"> </div>

                    <div id = "inventory_sorting_div" class="activable_buttons">
                        <div id = "inventory_sort_by_name" class = "character_sorting_button active_selection_button" onclick='sortCharacterInventory("name")'> Sort by name </div>
                        <div id = "inventory_sort_by_price" class = "character_sorting_button" onclick='sortCharacterInventory("price")'> Sort by value </div>
                    </div>
                    <div id = "inventory_control_div" class="activable_buttons">
                        <div id = "inventory_show_all" class = "inventory_control_button active_selection_button" onclick = "showAllItems()"> All </div>
                        <div id = "inventory_show_equipment" class = "inventory_control_button" onclick = "showOnlyEquipment()"> Equipment </div>
                        <div id = "inventory_show_consumable" class = "inventory_control_button" onclick = "showOnlyConsumables()"> Usable </div>
                        <div id = "inventory_show_other" class = "inventory_control_button" onclick = "showOnlyOther()"> Other </div> 
                    </div>
                </div>

                <div id = "character_combat_management" class = "box_div">            
                    <div id = "attack_stats">
                        <div class = "attack_stat attack_stat_long">

                        </div>
                        |
                        <div class = "attack_stat attack_stat_long">
                            
                        </div>
                        |
                        <div class = "attack_stat attack_stat_short">
                            
                        </div>
                        |
                        <div class = "attack_stat attack_stat_short">
                            
                        </div>
                        |
                        <div class = "attack_stat attack_stat_short">
                            
                        </div>
                    </div>
                    <div id = "character_stance_name">
                        <span>Normal stance</span>
                        <div id = "character_stance_selection">
                        
                        </div>
                    </div>
                    <div id = "character_attack_bar">

                    </div>
                </div>

                <div id = "inventory_combat_switch_selection" class="activable_buttons box_div">
                    <div id="switch_to_inventory" class="active_selection_button" onclick="switchToInventory()">Inventory
                    </div>
                    <div id="switch_to_combat" onclick="switchToCombat()">Combat</div>
                </div>

                <!-- location info (name, type[safe/combat], weather, time, etc?)-->
                <div id = "location_div" class = "box_div"> 
                    <div id = "location_description_div" data-nosnippet>
                        
                    </div>
                </div>

                <div id = "combat_div" class = "box_div" data-nosnippet>
                    <div id = "enemies_div">
                        <div id = "enemy_0_div" class = "enemy_div">
                            <div>
                                <div class = "enemy_name">
                                    
                                </div>
                                <div class = "enemy_stats">
                                    <div class = "enemy_stat enemy_stat_long">

                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_long">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                    
                                    </div>
                                </div>
                                <div class = "enemy_health_div">
                                    <div class = "enemy_healthbar_max">
                                        <div class = "enemy_healthbar_current">

                                        </div>
                                    </div>
                                    <div class = "enemy_health_value">
                                            
                                    </div>

                                </div>
                                
                                <div class = "enemy_attack_bar">

                                </div>
                            </div>
                        </div>
                        <div id = "enemy_1_div" class = "enemy_div">
                            <div>
                                <div class = "enemy_name">

                                </div>
                                <div class = "enemy_stats">
                                    <div class = "enemy_stat enemy_stat_long">

                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_long">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                </div>
                                <div class = "enemy_health_div">
                                    <div class = "enemy_healthbar_max">
                                        <div class = "enemy_healthbar_current">

                                        </div>
                                    </div>
                                    <div class = "enemy_health_value">
                                        
                                    </div>

                                </div>
                                
                                <div class = "enemy_attack_bar">

                                </div>
                            </div>
                        </div>
                        <div id = "enemy_2_div" class = "enemy_div">
                            <div>
                                <div class = "enemy_name">

                                </div>
                                <div class = "enemy_stats">
                                    <div class = "enemy_stat enemy_stat_long">

                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_long">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                </div>
                                <div class = "enemy_health_div">
                                    <div class = "enemy_healthbar_max">
                                        <div class = "enemy_healthbar_current">

                                        </div>
                                    </div>
                                    <div class = "enemy_health_value">
                                        
                                    </div>

                                </div>
                                
                                <div class = "enemy_attack_bar">

                                </div>
                            </div>
                        </div>
                        <div id = "enemy_3_div" class = "enemy_div">
                            <div>
                                <div class = "enemy_name">

                                </div>
                                <div class = "enemy_stats">
                                    <div class = "enemy_stat enemy_stat_long">

                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_long">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                </div>
                                <div class = "enemy_health_div">
                                    <div class = "enemy_healthbar_max">
                                        <div class = "enemy_healthbar_current">

                                        </div>
                                    </div>
                                    <div class = "enemy_health_value">
                                        
                                    </div>

                                </div>
                                
                                <div class = "enemy_attack_bar">

                                </div>
                            </div>
                        </div>
                        <div id = "enemy_4_div" class = "enemy_div">
                            <div>
                                <div class = "enemy_name">

                                </div>
                                <div class = "enemy_stats">
                                    <div class = "enemy_stat enemy_stat_long">

                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_long">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                </div>
                                <div class = "enemy_health_div">
                                    <div class = "enemy_healthbar_max">
                                        <div class = "enemy_healthbar_current">

                                        </div>
                                    </div>
                                    <div class = "enemy_health_value">
                                        
                                    </div>

                                </div>
                                
                                <div class = "enemy_attack_bar">

                                </div>
                            </div>
                        </div>
                        <div id = "enemy_5_div" class = "enemy_div">
                            <div>
                                <div class = "enemy_name">

                                </div>
                                <div class = "enemy_stats">
                                    <div class = "enemy_stat enemy_stat_long">

                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_long">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                </div>
                                <div class = "enemy_health_div">
                                    <div class = "enemy_healthbar_max">
                                        <div class = "enemy_healthbar_current">

                                        </div>
                                    </div>
                                    <div class = "enemy_health_value">
                                        
                                    </div>

                                </div>
                                
                                <div class = "enemy_attack_bar">

                                </div>
                            </div>
                        </div>
                        <div id = "enemy_6_div" class = "enemy_div">
                            <div>
                                <div class = "enemy_name">

                                </div>
                                <div class = "enemy_stats">
                                    <div class = "enemy_stat enemy_stat_long">

                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_long">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                </div>
                                
                                <div class = "enemy_health_div">
                                    <div class = "enemy_healthbar_max">
                                        <div class = "enemy_healthbar_current">

                                        </div>
                                    </div>
                                    <div class = "enemy_health_value">
                                        
                                    </div>

                                </div>

                                
                                <div class = "enemy_attack_bar">

                                </div>
                            </div>
                        </div>
                        <div id = "enemy_7_div" class = "enemy_div">
                            <div>
                                <div class = "enemy_name">

                                </div>
                                <div class = "enemy_stats">
                                    <div class = "enemy_stat enemy_stat_long">

                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_long">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                    |
                                    <div class = "enemy_stat enemy_stat_short">
                                        
                                    </div>
                                </div>
                                <div class = "enemy_health_div">
                                    <div class = "enemy_healthbar_max">
                                        <div class = "enemy_healthbar_current">

                                        </div>
                                    </div>
                                    <div class = "enemy_health_value">
                                        
                                    </div>

                                </div>
                                
                                <div class = "enemy_attack_bar">

                                </div>
                            </div>
                        </div>
                    </div>
                    <div id = "enemy_count_div">
                        <div id = "enemy_count_content">
                            <div style = "display:inline-block;"> 
                                Enemy groups left: 
                            </div>
                            <div id = "enemies_left_div">
                                
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- actions and stuff-->
                <div id = "location_related_div" class = "box_div">
                    <div id = "location_actions_div">	
                        
                    </div>

                    <div id = "trade_div">
                        <div id = "trader_sorting_buttons" class="activable_buttons"> 
                            <div id = "trader_sort_by_name" class = "trader_sorting_button active_selection_button" onclick='sortTraderInventory("name")'>
                                Sort by name
                            </div>
                            <div id = "trader_sort_by_price" class = "trader_sorting_button" onclick='sortTraderInventory("price")'>
                                Sort by value
                            </div>
                        </div>
                        <div id = "trader_category_buttons" class="activable_buttons">
                            <div id = "trader_category_all" class = "trader_category_button active_selection_button" onclick='showAllTraderItems()'>
                                all
                            </div>
                            <div id = "trader_category_equipment" class = "trader_category_button" onclick="showOnlyTraderEquipment()">
                                equipment
                            </div>
                            <div id = "trader_category_usable" class = "trader_category_button" onclick="showOnlyTraderConsumables()">
                                usable
                            </div>
                            <div id = "trader_category_other" class = "trader_category_button" onclick="showOnlyTraderOther()">
                                other
                            </div>
                        </div>


                        <div id = "trader_inventory_div">

                        </div>
                        <div id = "trade_control_div">

                            <div id = "trader_cost_mult">
                                <div id = "trader_cost_mult_text"> Prices: </div>
                                <div id = "trader_cost_mult_value"> </div>
                            </div>
                            
                            <div id = "trade_price_div">
                                <div id = "trade_price_text"> Total price: </div>
                                <div id = "trade_price_value"> 0C </div>
                            </div>

                            <div id = "accept_trade_button" onclick = "acceptTrade()">
                                Accept
                            </div> 
                            <div id = "cancel_trade_button" onclick = "cancelTrade()">
                                Cancel
                            </div> 
                            <div id = "exit_trade_button" onclick = "exitTrade()">
                                Exit
                            </div>
                        </div>
                    </div>

                    <div id = "storage_div">
                        <div id = "storage_sorting_buttons" class="activable_buttons"> 
                            <div id = "storage_sort_by_name" class = "storage_sorting_button active_selection_button" onclick='sortStorageInventory("name")'>
                                Sort by name
                            </div>
                            <div id = "storage_sort_by_price" class = "storage_sorting_button" onclick='sortStorageInventory("price")'>
                                Sort by value
                            </div>
                        </div>
                        <div id = "storage_category_buttons" class="activable_buttons">
                            <div id = "storage_category_all" class = "storage_category_button active_selection_button" onclick='showAllStorageItems()'>
                                all
                            </div>
                            <div id = "storage_category_equipment" class = "storage_category_button" onclick="showOnlyStorageEquipment()">
                                equipment
                            </div>
                            <div id = "storage_category_usable" class = "storage_category_button" onclick="showOnlyStorageConsumables()">
                                usable
                            </div>
                            <div id = "storage_category_other" class = "storage_category_button" onclick="showOnlyStorageOther()">
                                other
                            </div>
                        </div>


                        <div id = "storage_inventory_div">

                        </div>
                        <div id = "storage_control_div">
                            <div id = "exit_storage_button" onclick = "exitStorage()">
                                Exit
                            </div>
                        </div>
                    </div>

                    <div id = "crafting_window" class="crafting_window">
                        <div id="crafting_mainpage_buttons" class="activable_buttons crafting_mainpage_buttons">
                            <div class="crafting_mainpage_button active_selection_button" onclick="switchCraftingRecipesPage('crafting')">Crafting</div>
                            <div class="crafting_mainpage_button" onclick="switchCraftingRecipesPage('cooking')">Cooking</div>
                            <div class="crafting_mainpage_button" onclick="switchCraftingRecipesPage('smelting')">Smelting</div>
                            <div class="crafting_mainpage_button" onclick="switchCraftingRecipesPage('forging')">Forging</div>
                            <div class="crafting_mainpage_button" onclick="switchCraftingRecipesPage('alchemy')">Alchemy</div>
                        </div>
                        <div class="crafting_category" data-crafting_category="crafting">
                            <div class="crafting_subpage_buttons activable_buttons">
                                <div class="crafting_subpage_button crafting_subpage_button_3 active_selection_button" onclick="switchCraftingRecipesSubpage('crafting', 'items')">Items/trinkets</div>
                                <div class="crafting_subpage_button crafting_subpage_button_3" onclick="switchCraftingRecipesSubpage('crafting', 'components')">Components</div>
                                <div class="crafting_subpage_button crafting_subpage_button_3" onclick="switchCraftingRecipesSubpage('crafting', 'equipment')">Equipment</div>
                            </div>
                            <div class="crafting_category crafting_recipe_list" data-crafting_category="crafting" data-crafting_subcategory="items">
                                
                            </div>
                            <div class="crafting_category crafting_recipe_list" data-crafting_category="crafting" data-crafting_subcategory="components">
                                
                            </div>
                            <div class="crafting_category crafting_recipe_list" data-crafting_category="crafting" data-crafting_subcategory="equipment">
                                
                            </div>
                        </div>
                        <div class="crafting_category" data-crafting_category="cooking"  style="display:none">
                            <div class="crafting_subpage_buttons activable_buttons">
                                <div class="crafting_subpage_button crafting_subpage_button_1 active_selection_button" onclick="switchCraftingRecipesSubpage('cooking', 'items')">Items</div>
                            </div>
                            <div class="crafting_category crafting_recipe_list" data-crafting_category="cooking" data-crafting_subcategory="items">
                                
                            </div>
                        </div>
                        <div class="crafting_category" data-crafting_category="smelting"  style="display:none">
                            <div class="crafting_subpage_buttons activable_buttons">
                                <div class="crafting_subpage_button crafting_subpage_button_1 active_selection_button" onclick="switchCraftingRecipesSubpage('smelting', 'items')">Items</div>
                            </div>
                            <div class="crafting_category crafting_recipe_list" data-crafting_category="smelting" data-crafting_subcategory="items">

                            </div>
                        </div>
                        <div class="crafting_category" data-crafting_category="forging"  style="display:none">
                            <div class="crafting_subpage_buttons activable_buttons">
                                <div class="crafting_subpage_button crafting_subpage_button_2 active_selection_button"  onclick="switchCraftingRecipesSubpage('forging', 'items')">Items/trinkets</div>
                                <div class="crafting_subpage_button crafting_subpage_button_2"  onclick="switchCraftingRecipesSubpage('forging', 'components')">Components</div>
                            </div>

                            <div class="crafting_category crafting_recipe_list" data-crafting_category="forging" data-crafting_subcategory="items">

                            </div>
                            <div class="crafting_category crafting_recipe_list" data-crafting_category="forging" data-crafting_subcategory="components">
                                
                            </div>
                        </div>
                        <div class="crafting_category" data-crafting_category="alchemy"  style="display:none">
                            <div class="crafting_subpage_buttons activable_buttons">
                                <div class="crafting_subpage_button crafting_subpage_button_1 active_selection_button" onclick="switchCraftingRecipesSubpage('alchemy', 'items')">Items</div>
                            </div>
                            <div class="crafting_category crafting_recipe_list" data-crafting_category="alchemy" data-crafting_subcategory="items">

                            </div>
                        </div>
                        <div id="exit_crafting_button" onclick="closeCraftingWindow()">
                            Exit
                        </div>
                    </div>
                </div>

                <div id="skills_and_stances_div" class="box_div">
                    <div id = "skill_list_div">
                            <div id = "skill_list">
                            </div>
                            <div id = "skill_sorting_buttons" class="activable_buttons"> 
                                <div id = "skill_sort_by_name" class = "skill_sorting_button active_selection_button" onclick='sortSkills({sort_by:"name"})'>
                                    Sort by name
                                </div>
                                <div id = "skill_sort_by_level" class = "skill_sorting_button" onclick='sortSkills({sort_by:"level"})'>
                                    Sort by level
                                </div>
                            </div>
                    </div>
                    <div id = "stance_list_div">
                        <table id = "stance_list">
                        </table>
                    </div>
                    <div id = "magic_list_div">
                        <div id = "magic_list">
                        </div>
                    </div>
                    <div id = "skill_and_stance_control_div" class="activable_buttons">
                        <div id="show_skills" class="skill_stance_control_button active_selection_button" onclick="showSkills()">
                            Skills
                        </div>
                        <div id="show_stances" class="skill_stance_control_button" onclick="showStances()">
                            Stances
                        </div>
                        <div id="show_magic" class="skill_stance_control_button" onclick="showMagic()">
                            Magic
                        </div>
                    </div>
                </div>

                <div id = "journal_div" class = "box_div">
                    <div id = "journal_control_div" class="activable_buttons">
                        <div id = "journal_show_quests" class = "journal_control_button" onclick = "showQuests()"> Quests </div>
                        <div id = "journal_show_bestiary" class = "journal_control_button active_selection_button" onclick = "showBestiary()"> Bestiary </div>
                        <div id = "journal_show_data" class = "journal_control_button" onclick = "showData()"> Data </div>
                    </div>
                    <div id = "quests_box_div">
                        <div id = "quests_header">
                            = Quests =
                        </div>
                        <div id = "quest_list">

                        </div>
                    </div>
                    <div id = "bestiary_box_div">
                        <div id = "bestiary_list">

                        </div>
                        
                    </div>
                    <div id = "data_box_div">
                        <div id = "data_list">
                            <div id = "data_xp">
                                <div id = "character_xp_multiplier" class="data_entry"></div>
                                <div id = "skills_xp_multiplier" class="data_entry"></div>
                            </div>
                            <div id = "stamina_efficiency_multiplier" class="data_entry"></div>
                        </div>
                    </div>
                </div>

                <!-- character stats and equipment-->
                <div id = "character_div" class = "box_div"> 
                    <div id = "character_stats_div"> 
                        <div id = "character_level_div">
                            Lvl: 0
                        </div>
                        <div class = "grid_container">
                            <div class = "stat_slot_div"> 
                                <div class = "stat_name"> Strength: </div>
                                <div class = "stat_value" id = "strength_slot"></div> 
                                <div class = "stat_tooltip"> 
                                    <div>Your strength. It affects power of physical attacks</div>
                                    <div class="stat_breakdown"></div>
                             </div>
                            </div>
                            <div class = "stat_slot_div"> 
                                <div class = "stat_name"> Agility: </div>
                                <div class = "stat_value" id = "agility_slot"></div> 
                                <div class = "stat_tooltip"> 
                                    <div>Your agility. It affects your evasion chance</div>
                                    <div class="stat_breakdown"></div>
                                </div>
                            </div>
                        </div>
                        <div class = "grid_container">
                            <div class = "stat_slot_div"> 
                                <div class = "stat_name"> Dexterity: </div>
                                <div class = "stat_value" id = "dexterity_slot"></div> 
                                <div class = "stat_tooltip"> 
                                    <div> Your dexterity. It affects your chance to hit target </div>
                                    <div class="stat_breakdown"></div>
                                </div>
                            </div>
                            <div class = "stat_slot_div"> 
                                <div class = "stat_name"> Intuition </div>
                                <div class = "stat_value" id = "intuition_slot"></div> 
                                <div class = "stat_tooltip"> 
                                    <div>Your intuition. It's necessary for magic, while also providing slight bonus to hit chance and evasion </div>
                                    <div class="stat_breakdown"></div>
                                </div>
                            </div>
                            
                        </div>
                        
                        <div class = "grid_container">
                            <div class = "stat_slot_div"> 
                                <div class = "stat_name"> Defense: </div>
                                <div class = "stat_value" id = "defense_slot"></div> 
                                <div class = "stat_tooltip"> 
                                    <div>Your defense. Based on worn equipment, lowers damage taken </div>
                                    <div class="stat_breakdown"></div>
                                </div>
                            </div>
                            <div class = "stat_slot_div"> 
                                <div class = "stat_name"> Magic: </div>
                                <div class = "stat_value" id = "magic_slot"></div> 
                                <div class = "stat_tooltip"> 
                                    <div>Your magic power. It affects the power of spells </div>
                                    <div class="stat_breakdown"></div>
                                </div>
                            </div>
                            
                        </div>
                        <div class = "grid_container">
                            <div class = "stat_slot_div"> 
                                <div class = "stat_name"> Atk power: </div>
                                <div class = "stat_value" id = "attack_power_slot"></div> 
                                <div class = "stat_tooltip"> 
                                    <div>Attack power. Based on weapon statistics, strength and/or magic </div>
                                    <div class="stat_breakdown"></div>
                                </div>
                            </div>
                            <div class = "stat_slot_div"> 
                                <div class = "stat_name"> Atk spd: </div>
                                <div class = "stat_value" id = "attack_speed_slot"></div> 
                                <div class = "stat_tooltip"> 
                                    <div>Attack speed. Directly affects the attack frequency </div>
                                    <div class="stat_breakdown"></div>
                                </div>
                            </div>
                            
                            
                        </div>
                        <div class = "grid_container">
                            <div class = "stat_slot_div"> 
                                <div class = "stat_name"> Crit rate: </div>
                                <div class = "stat_value" id = "crit_rate_slot"></div> 
                                <div class = "stat_tooltip">
                                    <div> Your chance for critical attack </div>
                                    <div class="stat_breakdown"></div>
                                </div>
                            </div>
                            <div class = "stat_slot_div"> 
                                <div class = "stat_name"> Crit mult: </div>
                                <div class = "stat_value" id = "crit_multiplier_slot"></div> 
                                <div class = "stat_tooltip"> 
                                    <div>Damage of your critical attacks </div>
                                    <div class="stat_breakdown"></div>
                                </div>
                            </div>
                        </div>
                        <div class = "grid_container">
                            <div class = "stat_slot_div"> 
                                <div class = "stat_name"> AP: </div>
                                <div class = "stat_value" id = "hit_chance_slot"></div> 
                                <div class = "stat_tooltip"> 
                                    <div> Attack points, a total value of everything that contributes to the chance to hit an enemy, except for some situational skills and modifiers. </div>
                                    <div class="stat_breakdown"></div>
                                </div>
                            </div>
                            <div class = "stat_slot_div" id = "defensive_action_chance"> 
                                <div class = "stat_name" id = "defensive_action_slot"> </div>
                                <div class = "stat_value" id = "defensive_action_chance_slot"></div> 

                                <!-- tooltip content is set in display.js-->
                                <div class = "stat_tooltip">
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>

                        <div id = "character_effects">
                            <div id = "effects_div">
                                <div> Active effects: </div>
                                <div id = "active_effect_count"> 0 </div>
                                <div id = "effects_tooltip"> 
                                    No active effects            
                                </div>
                            </div>
                        </div>

                    </div>
                    
                    <div id = "character_equipment_div"> 
                        <div class = "grid_container">
                            <div class = "equipment_slot_div" id = "head_slot"> head </div>
                            <div class = "equipment_slot_div" id = "torso_slot"> torso </div>
                        </div>
                        <div class = "grid_container">
                            <div class = "equipment_slot_div" id = "arms_slot"> arms </div>
                            <div class = "equipment_slot_div" id = "ring_slot"> ring</div>
                        </div>
                        <div class = "grid_container">
                            <div class = "equipment_slot_div" id = "weapon_slot"> weapon </div>
                            <div class = "equipment_slot_div" id = "off-hand_slot"> off-hand </div>
                        </div>
                        <div class = "grid_container">
                            <div class = "equipment_slot_div" id = "legs_slot"> legs </div>
                            <div class = "equipment_slot_div" id = "feet_slot"> feet </div>
                        </div>
                        <div class = "grid_container">
                            <div class = "equipment_slot_div" id = "amulet_slot"> amulet </div>
                            <div class = "equipment_slot_div" id = "artifact_slot"> artifact </div>
                        </div>
                    </div>

                    <div id = "character_tools_div">
                        <div class = "equipment_slot_div" id = "axe_slot"> axe </div>
                        <div class = "equipment_slot_div" id = "pickaxe_slot"> pickaxe </div>
                        <div class = "equipment_slot_div" id = "sickle_slot"> sickle </div>
                    </div>

                    <div id = "character_control_div" class="activable_buttons">
                        <div id = "character_show_stats" class = "character_control_button active_selection_button" onclick = "showCharacterStats()"> Stats </div>
                        <div id = "character_show_equipment" class = "character_control_button" onclick = "showCharacterEquipment()"> Equipment </div>
                        <div id = "character_show_tools" class = "character_control_button" onclick = "showCharacterTools()"> Tools </div>
                    </div>
                </div>


            <!-- message log -->
            <div id = "message_log_div" class = "box_div">
                <div id = "message_box_div">

                </div>
                <div id = "message_controls">

                    <div id = "message_show_unlocks" class = "message_control_button active_selection_button" onclick = "showUnlocksMessages()">
                        Levels / unlocks
                    </div>
                    <div id = "message_show_events" class = "message_control_button active_selection_button" onclick = "showEventsMessages()">
                        Events
                    </div>
                    <div id = "message_show_crafting" class = "message_control_button active_selection_button" onclick = "showCraftingMessages()">
                        Crafting
                    </div>
                    <div id = "message_show_combat" class = "message_control_button active_selection_button" onclick = "showCombatMessages()">
                        Combat
                    </div>
                    <div id = "message_show_loot" class = "message_control_button active_selection_button" onclick = "showLootMessages()">
                        Loot
                    </div>
                    <div id = "message_show_background" class = "message_control_button active_selection_button" onclick = "showBackgroundMessages()">
                        BGM
                    </div>
                    
                </div>
            </div>
        </div>

        <div id = "bottom_panel_div" data-nosnippet>
            <div id = "save_button" class = "sl_button" onclick = "saveProgress()"> Save </div>
            <div id = "save_to_file_button" class = "sl_button" onclick = "saveToFile()"> Export </div>
            <label id = "load_from_file_button" class = "sl_button" for = "saved_file_input"> Import </label> 
            <input id = "saved_file_input" type='file' accept = 'text/plain' onchange = 'loadProgress(event)'>	

            <div id = "options_button" class = "game_info" onclick="openOptions()"><span><i class="material-icons">settings</i></span></div>
            <div id = "changelog_button" class = "game_info"><a href="changelog.html" target="_blank"></a></div>
            <div id = "help_button" class = "game_info"><a href="help.html" target="_blank"><i class="material-icons">help_outline</i></a></div>
            <div id = "ko_fi_link" class = "financial_link" title="Support me on Ko-fi!"><a href="https://ko-fi.com/miktaew" target="_blank"><img src="resources/img/ko-fi icon.png" style="height:40px"></img></a></div>
        </div>

        <div id="options_panel" data-nosnippet>
            <div id="options_choices">
                <div class="options_choice">
                    <input type="checkbox" id="options_textsize" name="options_textsize" value="options_textsize" onclick = "option_uniform_textsize()" />
                    <label for="options_textsize">Increase size of text in dialogues</label>
                </div>
                <div class="options_choice">
                    <input type="checkbox" id="options_bed_return" name="options_bed_return" value="options_bed_return" onclick = "option_bed_return()" checked/>
                    <label for="options_bed_return">Return to last bed upon defeat</label>
                </div>
                <div class="options_choice">
                    <input type="checkbox" id="options_save_messagelog_settings" name="options_save_messagelog_settings" value="options_save_messagelog_settings" onclick = "option_remember_filters()"/>
                    <label for="options_save_messagelog_settings">Remember message log filters</label>
                </div>
                <div class="options_choice">
                    <input type="checkbox" id="options_dont_autoswitch_to_combat" name="options_dont_autoswitch_to_combat" value="options_dont_autoswitch_to_combat" onclick = "option_combat_autoswitch()"/>
                    <label for="options_dont_autoswitch_to_combat">Don't autoswitch out from inventory when starting combat</label>
                </div>
                <div class="options_choice">
                    <input type="checkbox" id="options_log_all_gathering" name="options_log_all_gathering" value="options_log_all_gathering" onclick = "option_log_all_gathering()" checked/>
                    <label for="options_log_all_gathering">Log gathered materials for every gathering period</label>
                </div>
                <div class="options_choice">
                    <input type="checkbox" id="options_log_gathering_result" name="options_log_gathering_result" value="options_log_gathering_result" onclick = "option_log_gathering_result()" checked/>
                    <label for="options_log_gathering_result">Log total gathered materials on gathering finish</label>
                </div>
            </div>
            <div id="close_options" onclick="closeOptions()"> X </div>
            <div id = "backup_load_button" class="options_button" onclick = "loadTheBackup()">Load the backup autosave</div>
            <div id = "import_other_save_button" class="options_button" onclick = "importOtherSave()"> Import save from </div>
            <div id = "hard_reset_button" class="options_button" onclick = "hardReset()"> Hard reset the game <i class="material-icons"> warning_amber </i> </div>
        </div>

        <script>
            function openOptions() {
                if(document.documentElement.style.getPropertyValue("--options_display") !== "block") {
                    document.documentElement.style.setProperty('--options_display', 'block');
                }
                else {
                    closeOptions();
                }
            }
            function closeOptions() {
                document.documentElement.style.setProperty('--options_display', 'none');
            }
            function showAllItems() {
                document.documentElement.style.setProperty('--equipment_display', 'inline-block');
                document.documentElement.style.setProperty('--consumables_display', 'inline-block');
                document.documentElement.style.setProperty('--other_display', 'inline-block');
            }
            function showOnlyEquipment() {
                document.documentElement.style.setProperty('--equipment_display', 'inline-block');
                document.documentElement.style.setProperty('--consumables_display', 'none');
                document.documentElement.style.setProperty('--other_display', 'none');
            }
            function showOnlyConsumables() {
                document.documentElement.style.setProperty('--equipment_display', 'none');
                document.documentElement.style.setProperty('--consumables_display', 'inline-block');
                document.documentElement.style.setProperty('--other_display', 'none');

            }
            function showOnlyOther() {
                document.documentElement.style.setProperty('--equipment_display', 'none');
                document.documentElement.style.setProperty('--consumables_display', 'none');
                document.documentElement.style.setProperty('--other_display', 'inline-block');
            }

            function showAllTraderItems() {
                document.documentElement.style.setProperty('--trader_equipment_display', 'inline-block');
                document.documentElement.style.setProperty('--trader_consumable_display', 'inline-block');
                document.documentElement.style.setProperty('--trader_other_display', 'inline-block');
            }
            function showOnlyTraderEquipment() {
                document.documentElement.style.setProperty('--trader_equipment_display', 'inline-block');
                document.documentElement.style.setProperty('--trader_consumable_display', 'none');
                document.documentElement.style.setProperty('--trader_other_display', 'none');
            }
            function showOnlyTraderConsumables() {
                document.documentElement.style.setProperty('--trader_equipment_display', 'none');
                document.documentElement.style.setProperty('--trader_consumable_display', 'inline-block');
                document.documentElement.style.setProperty('--trader_other_display', 'none');
            }
            function showOnlyTraderOther() {
                document.documentElement.style.setProperty('--trader_equipment_display', 'none');
                document.documentElement.style.setProperty('--trader_consumable_display', 'none');
                document.documentElement.style.setProperty('--trader_other_display', 'inline-block');
            }

            function showAllStorageItems() {
                document.documentElement.style.setProperty('--storage_equipment_display', 'inline-block');
                document.documentElement.style.setProperty('--storage_consumable_display', 'inline-block');
                document.documentElement.style.setProperty('--storage_other_display', 'inline-block');
            }
            function showOnlyStorageEquipment() {
                document.documentElement.style.setProperty('--storage_equipment_display', 'inline-block');
                document.documentElement.style.setProperty('--storage_consumable_display', 'none');
                document.documentElement.style.setProperty('--storage_other_display', 'none');
            }
            function showOnlyStorageConsumables() {
                document.documentElement.style.setProperty('--storage_equipment_display', 'none');
                document.documentElement.style.setProperty('--storage_consumable_display', 'inline-block');
                document.documentElement.style.setProperty('--storage_other_display', 'none');
            }
            function showOnlyStorageOther() {
                document.documentElement.style.setProperty('--storage_equipment_display', 'none');
                document.documentElement.style.setProperty('--storage_consumable_display', 'none');
                document.documentElement.style.setProperty('--storage_other_display', 'inline-block');
            }


            function showCombatMessages() {
                if(document.documentElement.style.getPropertyValue('--message_combat_display') !== "none") {
                    document.documentElement.style.setProperty('--message_combat_display', 'none');
                } else {
                    document.documentElement.style.setProperty('--message_combat_display', 'inline-block');
                }
            }

            function showUnlocksMessages() {
                if(document.documentElement.style.getPropertyValue('--message_unlocks_display') !== "none") {
                    document.documentElement.style.setProperty('--message_unlocks_display', 'none');
                } else {
                    document.documentElement.style.setProperty('--message_unlocks_display', 'inline-block');
                }
            }

            function showLootMessages() {
                if(document.documentElement.style.getPropertyValue('--message_loot_display') !== "none") {
                    document.documentElement.style.setProperty('--message_loot_display', 'none');
                } else {
                    document.documentElement.style.setProperty('--message_loot_display', 'inline-block');
                }
            }

            function showEventsMessages() {
                if(document.documentElement.style.getPropertyValue('--message_events_display') !== "none") {
                    document.documentElement.style.setProperty('--message_events_display', 'none');
                } else {
                    document.documentElement.style.setProperty('--message_events_display', 'inline-block');
                }
            }

            function showCraftingMessages() {
                if(document.documentElement.style.getPropertyValue('--message_crafting_display') !== "none") {
                    document.documentElement.style.setProperty('--message_crafting_display', 'none');
                } else {
                    document.documentElement.style.setProperty('--message_crafting_display', 'inline-block');
                }
            }

            function showBackgroundMessages() {
                if(document.documentElement.style.getPropertyValue('--message_background_display') !== "none") {
                    document.documentElement.style.setProperty('--message_background_display', 'none');
                } else {
                    document.documentElement.style.setProperty('--message_background_display', 'inline-block');
                }
            }
            
            function showData() {
                document.getElementById("data_box_div").style.display = "block";
                document.getElementById("quests_box_div").style.display = "none";
                document.getElementById("bestiary_box_div").style.display = "none";
            }
            function showQuests() {
                document.getElementById("data_box_div").style.display = "none";
                document.getElementById("quests_box_div").style.display = "block";
                document.getElementById("bestiary_box_div").style.display = "none";
            }
            function showBestiary() {
                document.getElementById("data_box_div").style.display = "none";
                document.getElementById("quests_box_div").style.display = "none";
                document.getElementById("bestiary_box_div").style.display = "block";
            }

            function showCharacterStats() {
                document.getElementById("character_equipment_div").style.display = "none";
                document.getElementById("character_stats_div").style.display = '';
                document.getElementById("character_tools_div").style.display = "none";

            }
            function showCharacterEquipment() {
                document.getElementById("character_equipment_div").style.display = "grid";
                document.getElementById("character_stats_div").style.display = "none";
                document.getElementById("character_tools_div").style.display = "none";
            }

            function showCharacterTools() {
                document.getElementById("character_equipment_div").style.display = "none";
                document.getElementById("character_stats_div").style.display = "none";
                document.getElementById("character_tools_div").style.display = "grid";
            }

            function showSkills() {
                document.getElementById("skill_list_div").style.display = "block";
                document.getElementById("stance_list_div").style.display = "none";
                document.getElementById("magic_list_div").style.display = "none";
            }

            function showStances() {
                document.getElementById("skill_list_div").style.display = "none";
                document.getElementById("stance_list_div").style.display = "block";
                document.getElementById("magic_list_div").style.display = "none";
            }

            function showMagic() {
                document.getElementById("skill_list_div").style.display = "none";
                document.getElementById("stance_list_div").style.display = "none";
                document.getElementById("magic_list_div").style.display = "block";
            }

            function switchToCombat() {
                document.documentElement.style.setProperty('--inventory_div_display', 'none');
                document.documentElement.style.setProperty('--character_combat_div_display', 'block');
            }
            function switchToInventory() {
                document.documentElement.style.setProperty('--inventory_div_display', 'block');
                document.documentElement.style.setProperty('--character_combat_div_display', 'none');
            }

            let in_trade = false;
            let in_storage = false;
            let total_price;
            const trade_price_value = document.getElementById("trade_price_value");
            let trader_sorting = "name";
            let storage_sorting = "name";
            let character_sorting = "name";
            let skill_sorting = "name";

            function check_trade_cost() {
                const accept_button = document.getElementById("accept_trade_button");
                if(total_price + get_character_money() < 0) { //can't afford
                    accept_button.style.cursor = "no-drop";
                    accept_button.style.backgroundColor = "rgba(0, 128, 0, 0.3)";
                    
                    return false;
                } else {
                    accept_button.style.cursor = "pointer";
                    accept_button.style.backgroundColor = "green";

                    return true;
                }
            }
            
            function startTrade(trader_key) {
                in_trade = true;
                total_price = 0;
                trade_price_value.innerHTML = format_money(total_price);
                document.documentElement.style.setProperty('--trade_ammount_button_display', 'inline-block');
                document.documentElement.style.setProperty('--item_use_button_display', 'none');

                start_trade(trader_key);
            }
            function exitTrade() {
                in_trade = false;
                total_price = 0;
                trade_price_value.innerHTML = format_money(total_price);
                document.documentElement.style.setProperty('--trade_ammount_button_display', 'none');
                document.documentElement.style.setProperty('--item_use_button_display', 'inline-block');

                const accept_button = document.getElementById("accept_trade_button");
                accept_button.style.cursor = "pointer";
                accept_button.style.backgroundColor = "green";

                exit_trade();
            }

            function cancelTrade() {
                total_price = 0;
                trade_price_value.innerHTML = format_money(total_price);

                const accept_button = document.getElementById("accept_trade_button");
                accept_button.style.cursor = "pointer";
                accept_button.style.backgroundColor = "green";

                cancel_trade();
            }

            function acceptTrade() {
                if(check_trade_cost()) {
                    total_price = 0;
                    trade_price_value.innerHTML = format_money(total_price);
                    accept_trade();
                } else {
                    console.log("You can't afford this");
                }
            }

            function openStorage() {
                in_storage = true;

                document.documentElement.style.setProperty('--trade_ammount_button_display', 'inline-block');
                document.documentElement.style.setProperty('--item_use_button_display', 'none');

                open_storage();
            }
            function exitStorage() {
                in_trade = false;

                document.documentElement.style.setProperty('--trade_ammount_button_display', 'none');
                document.documentElement.style.setProperty('--item_use_button_display', 'inline-block');

                exit_storage();
            }

            function sortTraderInventory(option) {
                trader_sorting = option;
                sort_displayed_inventory({sort_by: option, target: "trader", change_direction: true});
            }

            function sortCharacterInventory(option) {
                character_sorting = option;
                sort_displayed_inventory({sort_by: option, target: "character", change_direction: true})
            }

            function sortStorageInventory(option) {
                storage_sorting = option;
                sort_displayed_inventory({sort_by: option, target: "storage", change_direction: true});
            }

            function sortSkills({sort_by}) {
                sort_displayed_skills({sort_by, change_direction: true});
            }

            function saveToFile() {
                var a = window.document.createElement('a');
                a.href = window.URL.createObjectURL(new Blob([save_to_file()], {type: 'text/plain'}));
                a.download = `yet-another-idle-rpg${isOnDev()?"-dev":""} ${getDate()}.txt`;

                document.body.appendChild(a);
                a.click();

                document.body.removeChild(a);
            }

            function loadProgress(event) {
                    var file = event.target.files[0];
                    var reader = new FileReader();

                    reader.onload = function() {
                        load_progress(reader.result);
                    };

                    reader.readAsText(file);

                    event.target.value = ""; //necessary to allow loading same file more than once in a row without refreshing
            };

            function importOtherSave() {
                let confirmation = prompt(`This will import the savefile from the other release - dev if you are on main, main if you are on dev. In the first case it might break your game if dev save was made on newer game version. If you are sure this is what you want, type "import" below`);

                if(confirmation === "import" || confirmation === `"import"`) {
                    importOtherReleaseSave();
                    return false;
                }
                else {
                    console.log("Import of the other save was cancelled.");
                }
            }

            function loadTheBackup() {
                let confirmation = prompt(`This will load your backup save, losing all the progress you made it since then. It is not recommended unless something broke, in which case please export the broken save and report the issue. If you are sure this is what you want, type "load" below`);

                if(confirmation === "load" || confirmation === `"load"`) {
                    loadBackup();
                    return false;
                }
                else {
                    console.log("Loading of the backup save was cancelled.");
                }
            }

            function select_stance(stance_id) {
                change_stance(stance_id);
            }

            /**
             * keeps going up through clicked_element's parents until it reaches one with with any of target_classes, returns false if it reached any of break_classes instead
             * probably not as efficient as a bunch of ifs, but much more manageable
             * @param {HTMLNode} clicked_element
             * @param {String} target_class
             * @param {Array} break_classes
             * 
             */
            function retarget_clicked_to_class(clicked_element, target_classes, break_classes) {
                let end = false;
                while(true) {
                    if(!clicked_element.classList) {
                        return;
                    }
                    for(let i = 0; i < target_classes?.length; i++) {
                        if(clicked_element.classList.contains(target_classes[i])) {
                            end = true;
                        }
                    }
                    if(end) { 
                        break;
                    }
                    for(let i = 0; i < break_classes?.length; i++) {
                        if(clicked_element.classList.contains(break_classes[i])) {
                            return;
                        }
                    }

                    clicked_element = clicked_element.parentNode;
                }
                return clicked_element;
            }

            function prepareGame() { //called on body loaded
                document.getElementById("changelog_button").children[0].innerHTML = get_game_version();

                document.body.addEventListener('keyup', (event)=>{
                    if(event.key === "Escape") {
                            closeOptions();
                    }
                }, false)

                let tooltip_move_ticks = 60;
                let tooltip_wait = 0;

                //mostly sets up event listeners
                /////////////////////
                //(un)equipping items:
                const inventory_div = document.getElementById("inventory_div");
                inventory_div.onclick = function(event) {
                    let clicked_element = event.target;
                    if(clicked_element.classList.contains("equip_item_button")) {
                        equip_item(clicked_element.parentNode.parentNode.getAttribute("data-character_item"));
                    } else if(clicked_element.classList.contains("unequip_item_button")) {
                        unequip_item(clicked_element.parentNode.parentNode.getAttribute("data-item_slot"));
                    } else if(clicked_element.classList.contains("item_use_button")) {
                        if(clicked_element.parentNode.parentNode.classList.contains("character_item_book")) {
                            //is book -> read
                            start_reading(clicked_element.parentNode.parentNode.getAttribute("data-character_item"));
                        } else {
                            //is usable -> use
                            use_item(clicked_element.parentNode.parentNode.getAttribute("data-character_item"));
                            update_displayed_character_inventory(character_sorting);
                        }
                    } else if(clicked_element.classList.contains("item_auto_use_button")) {
                        //is auto use button, grab key, read id, change fav status
                        const item_id = JSON.parse(clicked_element.parentNode.parentNode.dataset.character_item).id;
                        change_consumable_favourite_status(item_id);
                        clicked_element.classList.toggle("item_auto_use_button_active");
                    }
                }

                const location_icon_span = document.getElementById("location_icon_span");
                location_icon_span.onclick = (event) => {
                    handleLocationIconClick();
                }

                const item_tooltip_margin = Number(getComputedStyle(document.querySelector('.item_tooltip'))["margin-left"].replace("px",""));
                //margin-left of tooltip elements

                ///////////////
                //character item tooltips
                inventory_div.addEventListener('mousemove', move_item_tooltip, false);
                function move_item_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        let hovered_element = retarget_clicked_to_class(event.target, ["inventory_item_control", "equipped_item_control"], []);

                        //set horizontal position
                        document.documentElement.style.setProperty('--item_tooltip_left', `${event.pageX - 20}px`);

                        if(!hovered_element) {
                            return;
                        }
                        
                        //calculate vertical position so it doesnt go under bottom edge
                        const tooltip_height = hovered_element.children[0].children[1].scrollHeight;

                        const body = document.getElementsByTagName("body")[0];
                        const scrollbar_X_visible = (body.scrollWidth - body.clientWidth) > 0;

                        const bottom_edge_position = 
                            window.innerHeight - tooltip_height - item_tooltip_margin + window.scrollY + 10 - (scrollbar_X_visible?10:0);
                        
                        if(event.pageY > bottom_edge_position) {
                            document.documentElement.style.setProperty('--item_tooltip_top', `${bottom_edge_position - 400}px`);
                        } else {
                            document.documentElement.style.setProperty('--item_tooltip_top', `${event.pageY - 400}px`);
                        }
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }


                const storage_div = document.getElementById("storage_div");
                ///////////////////////
                //storage item tooltips
                storage_div.addEventListener('mousemove', move_storage_item_tooltip, false);
                function move_storage_item_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        let hovered_element = retarget_clicked_to_class(event.target, ["inventory_item_control"], []);

                        //set horizontal position
                        document.documentElement.style.setProperty('--item_tooltip_left', `${event.pageX - 400}px`);

                        if(!hovered_element) {
                            return;
                        }
                        
                        //calculate vertical position so it doesnt go under bottom edge
                        const tooltip_height = hovered_element.children[0].children[1].scrollHeight;

                        const body = document.getElementsByTagName("body")[0];
                        const scrollbar_X_visible = (body.scrollWidth - body.clientWidth) > 0;

                        const bottom_edge_position = 
                            window.innerHeight - tooltip_height - item_tooltip_margin + window.scrollY - (scrollbar_X_visible?10:0);
                        
                        if(event.pageY > bottom_edge_position) {
                            document.documentElement.style.setProperty('--item_tooltip_top', `${bottom_edge_position - 350}px`);
                        } else {
                            document.documentElement.style.setProperty('--item_tooltip_top', `${event.pageY - 350}px`);
                        }
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }

                //////////////////////
                //trader item tooltips
                const trader_inventory_div = document.getElementById("trader_inventory_div");
                trader_inventory_div.addEventListener('mousemove', move_trader_item_tooltip, false);
                function move_trader_item_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        if(event.target.id === "trader_inventory_div") {
                            return;
                        }

                        let hovered_element = retarget_clicked_to_class(event.target, ["trader_item_control"]);

                        const tooltip_width = hovered_element.children[0].children[1].scrollWidth;
                        const tooltip_height = hovered_element.children[0].children[1].scrollHeight;

                        const body = document.getElementsByTagName("body")[0];
                        const scrollbar_Y_visible = (body.scrollHeight - body.clientHeight) > 0;
                        const scrollbar_X_visible = (body.scrollWidth - body.clientWidth) > 0;

                        const right_edge_position = 
                            window.innerWidth - tooltip_width  - item_tooltip_margin + window.scrollX - (scrollbar_Y_visible?10:0);
                        const bottom_edge_position = 
                            window.innerHeight - tooltip_height - item_tooltip_margin + window.scrollY - (scrollbar_X_visible?10:0);
                    
                        if(event.pageX > right_edge_position) {
                            document.documentElement.style.setProperty('--item_tooltip_left', `${right_edge_position - 420}px`);
                        } else {
                            document.documentElement.style.setProperty('--item_tooltip_left', `${event.pageX - 420}px`);
                        }
                        
                        if(event.pageY > bottom_edge_position) {
                            document.documentElement.style.setProperty('--item_tooltip_top', `${bottom_edge_position - 400}px`);
                        } else {
                            document.documentElement.style.setProperty('--item_tooltip_top', `${event.pageY - 400}px`);
                        }
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }

                trader_inventory_div.addEventListener('mouseenter', (event) => {
                    document.documentElement.style.setProperty('--item_tooltip_top', `${event.pageY - 370}px`);
                    document.documentElement.style.setProperty('--item_tooltip_left', `${event.pageX - 370}px`);
                }); 
                //prevents trader item tooltip from initially appearing in wrong spot on some occassions

                //item slots / worn equipment tooltips
                let equipment_div = document.getElementById("character_equipment_div");
                let tools_div = document.getElementById("character_tools_div");
                equipment_div.addEventListener('mousemove', move_equipment_tooltip, false);
                tools_div.addEventListener('mousemove', move_equipment_tooltip, false);
                function move_equipment_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        let hovered_element = event.target;
                        if(hovered_element.classList.contains("equipment_slot_div")){
                            hovered_element.children[0].style.left = event.pageX + "px";
                            hovered_element.children[0].style.top = event.pageY - 130 + "px";
                        }
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }

                const crafting_window = document.getElementById("crafting_window");
                crafting_window.addEventListener('mouseenter', (event) => {
                    document.documentElement.style.setProperty('--recipe_tooltip_top', `${event.pageY - 370}px`);
                    document.documentElement.style.setProperty('--recipe_tooltip_left', `${event.pageX - 370}px`);
                }); 

                crafting_window.addEventListener('mousemove', move_recipe_tooltip, false);
                function move_recipe_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        let hovered_element = retarget_clicked_to_class(event.target, 
                            ["recipe_div", "selectable_component", "selectable_material", "recipe_creation_button"], 
                            ["crafting_subpage_button", "crafting_subpage_buttons", "crafting_category", "crafting_mainpage_buttons", "crafting_mainpage_button", "crafting_window"]
                        );

                        if(!hovered_element) {
                            return;
                        }

                        const tooltip = hovered_element.getElementsByClassName("recipe_tooltip")[0];
                        if(!tooltip) {
                            return;
                        }

                        //set horizontal position
                        document.documentElement.style.setProperty('--recipe_tooltip_left', `${event.pageX - 400}px`);

                        let tooltip_height = tooltip.scrollHeight;

                        const body = document.getElementsByTagName("body")[0];
                        const scrollbar_X_visible = (body.scrollWidth - body.clientWidth) > 0;

                        const bottom_edge_position = 
                            window.innerHeight - tooltip_height + window.scrollY - 30 - (scrollbar_X_visible?10:0);
                        if(event.pageY > bottom_edge_position) {
                            document.documentElement.style.setProperty('--recipe_tooltip_top', `${bottom_edge_position - 350}px`);
                        } else {
                            document.documentElement.style.setProperty('--recipe_tooltip_top', `${event.pageY - 350}px`);
                        }
                        
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }
                //stats tooltips
                let stats_div = document.getElementById("character_stats_div");
                stats_div.addEventListener('mousemove', move_stat_tooltip, false);
                function move_stat_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        document.documentElement.style.setProperty('--stat_tooltip_top', `${event.pageY - 140}px`);
                        document.documentElement.style.setProperty('--stat_tooltip_left', `${event.pageX}px`);
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }

                //unequip item
                equipment_div.onclick = function(event) {
                    let clicked_element = event.target;
                    if(clicked_element.classList.contains("equipment_slot_div") && !clicked_element.classList.contains("equipment_slot_empty"))
                    {
                        unequip_item(clicked_element.id.replace("_slot", ""));

                        clicked_element.children[0].style.left = event.pageX + "px";
                        clicked_element.children[0].style.top = event.pageY + "px";
                    }
                }

                //activities tooltips (including the tooltip for resource gathering, since it shares a class with them)
                const location_actions_div = document.getElementById("location_actions_div");
                location_actions_div.addEventListener('mousemove', move_activity_tooltip, false);
                function move_activity_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        document.documentElement.style.setProperty('--job_tooltip_top', `${event.pageY - 410}px`);
                        document.documentElement.style.setProperty('--job_tooltip_left', `${event.pageX - 420}px`);
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }

                //skill tooltips
                const skills_div = document.getElementById("skill_list_div");
                skills_div.addEventListener('mousemove', move_skill_tooltip, false);
                function move_skill_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        let hovered_element = retarget_clicked_to_class(event.target,["skill_div"],["skill_category_div", "skill_list", "skill_list_div", "icon"]);
                        if(!hovered_element) {
                            return;
                        }

                        const tooltip_height = hovered_element.children[0].children[2].scrollHeight;
                        
                        const body = document.getElementsByTagName("body")[0];
                        const scrollbar_X_visible = (body.scrollWidth - body.clientWidth) > 0;

                        const bottom_edge_position = 
                            window.innerHeight - tooltip_height + window.scrollY - 33 - (scrollbar_X_visible?10:0);
                        
                        //size of window - size of tooltip + scrolling position - 23 (not sure where it comes from) - 10 (for scrollbar if its visible)

                        document.documentElement.style.setProperty('--skill_tooltip_left', `${event.pageX - 1150}px`);

                        if(event.pageY > bottom_edge_position) {
                            document.documentElement.style.setProperty('--skill_tooltip_top', `${bottom_edge_position - 320}px`);
                        } else {
                            document.documentElement.style.setProperty('--skill_tooltip_top', `${event.pageY - 320}px`);
                        }
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }

                //stance tooltips
                const stances_tab = document.getElementById("stance_list");
                stances_tab.addEventListener('mousemove', move_stance_tooltip, false);
                function move_stance_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        let hovered_element = retarget_clicked_to_class(event.target,["stance_list_entry"],["stance_list_header"]);
                        if(!hovered_element) {
                            return;
                        }

                        const tooltip_height = hovered_element.children[3].scrollHeight;
                        
                        const body = document.getElementsByTagName("body")[0];
                        const scrollbar_X_visible = (body.scrollWidth - body.clientWidth) > 0;

                        const bottom_edge_position = 
                            window.innerHeight - tooltip_height + window.scrollY - 33 - (scrollbar_X_visible?10:0);
                        
                        //size of window - size of tooltip + scrolling position - 23 (not sure where it comes from) - 10 (for scrollbar if its visible)

                        document.documentElement.style.setProperty('--stance_tooltip_left', `${event.pageX - 1150}px`);

                        if(event.pageY > bottom_edge_position) {
                            document.documentElement.style.setProperty('--stance_tooltip_top', `${bottom_edge_position - 380}px`);
                        } else {
                            document.documentElement.style.setProperty('--stance_tooltip_top', `${event.pageY - 380}px`);
                        }
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }

                //location type tooltips
                let location_types_div = document.getElementById("location_types_div");
                location_types_div.addEventListener('mousemove', move_location_type_tooltip, false);
                function move_location_type_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        let hovered_element = event.target;

                        if(!hovered_element.classList.contains("location_type_div")) {
                            return;
                        } 
                        const tooltip_width = hovered_element.children[0].scrollWidth;
                        
                        const body = document.getElementsByTagName("body")[0];
                        const scrollbar_Y_visible = (body.scrollHeight - body.clientHeight) > 0;

                        const right_edge_position = 
                            window.innerWidth - tooltip_width - 23 - 40 + window.scrollX - (scrollbar_Y_visible?10:0);

                        if(event.pageX > right_edge_position) {
                            document.documentElement.style.setProperty('--location_type_tooltip_left', `${right_edge_position - 680}px`);
                        } else {
                            document.documentElement.style.setProperty('--location_type_tooltip_left', `${event.pageX - 680}px`);
                        }

                        document.documentElement.style.setProperty('--location_type_tooltip_top', `${event.pageY - 60}px`);
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }

                //location desc tooltip (for combat locations)
                let location_name_div = document.getElementById("location_name_div");
                location_name_div.addEventListener('mousemove', move_location_desc_tooltip, false);
                function move_location_desc_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        let hovered_element = event.target;

                        if(hovered_element.id === "location_name_span") {
                            hovered_element = hovered_element.parentNode;
                        }
                        else if(hovered_element.id !== "location_name_div") {
                            return;
                        }
                        
                        const tooltip_width = hovered_element.children[0].scrollWidth;
                        
                        const body = document.getElementsByTagName("body")[0];
                        const scrollbar_Y_visible = (body.scrollHeight - body.clientHeight) > 0;

                        const right_edge_position = 
                            window.innerWidth - tooltip_width - 23 - 40 + window.scrollX - (scrollbar_Y_visible?10:0);

                        if(event.pageX > right_edge_position) {
                            document.documentElement.style.setProperty('--location_desc_tooltip_left', `${right_edge_position - 420}px`);
                        } else {
                            document.documentElement.style.setProperty('--location_desc_tooltip_left', `${event.pageX - 420}px`);
                        }

                        document.documentElement.style.setProperty('--location_desc_tooltip_top', `${event.pageY - 40}px`);
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }

                //bestiary entry tooltips
                const bestiary_box_div = document.getElementById("bestiary_box_div");
                bestiary_box_div.addEventListener('mousemove', move_bestiary_entry_tooltip, false);
                function move_bestiary_entry_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        let hovered_element = retarget_clicked_to_class(event.target,["bestiary_entry_div"],[]);
                        if(!hovered_element) {
                            return;
                        }
                        
                        const tooltip_height = hovered_element.children[0].scrollHeight;
                        
                        const body = document.getElementsByTagName("body")[0];
                        const scrollbar_X_visible = (body.scrollWidth - body.clientWidth) > 0;

                        const bottom_edge_position = 
                            window.innerHeight - tooltip_height + window.scrollY - 33 - (scrollbar_X_visible?10:0);
                        
                        document.documentElement.style.setProperty('--bestiary_entry_tooltip_left', `${event.pageX - 1250}px`);

                        if(event.pageY > bottom_edge_position) {
                            document.documentElement.style.setProperty('--bestiary_entry_tooltip_top', `${bottom_edge_position}px`);
                        } else {
                            document.documentElement.style.setProperty('--bestiary_entry_tooltip_top', `${event.pageY}px`);
                        }
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }

                //active effects tooltip
                const active_effects_div = document.getElementById("effects_div");
                const effects_tooltip = document.getElementById("effects_tooltip");
                active_effects_div.addEventListener('mousemove', move_effects_tooltip, false);
                function move_effects_tooltip(event) {
                    if(Date.now() >= tooltip_wait) {
                        const hovered_element = event.target;
                        if(hovered_element.id === "effects_div" || hovered_element.parentNode.id === "effects_div") {
                        
                            const elems = document.querySelectorAll("#effects_tooltip .active_effect_tooltip");
                            
                            const body = document.getElementsByTagName("body")[0];
                            const scrollbar_X_visible = (body.scrollWidth - body.clientWidth) > 0;
                            
                            const bottom_edge_position = 
                                window.innerHeight + window.scrollY - 33 - (scrollbar_X_visible?10:0);

                            const max_height = bottom_edge_position - event.clientY;

                            effects_tooltip.style.left = event.pageX - 100 + "px";
                            effects_tooltip.style.top = event.pageY - 300 + "px";
                            effects_tooltip.style.maxHeight = Math.max(20,max_height) + "px";

                            const gap = 5; //4px of gap + 1px of margin top
                            let total_height = 0;
                            for(let i = 0 ; i < elems.length; i++) {
                                total_height += elems[i].offsetHeight+gap;
                            }

                            const columns = Math.min(elems.length, Math.ceil(total_height / (max_height+4)));
                            effects_tooltip.style.width = (columns * 210 || 120)+ "px";
                        } 
                        tooltip_wait = Date.now() + 1000 / tooltip_move_ticks;
                    }
                }

                //move clicked items to proper list
                inventory_div.addEventListener('click', (event)=>move_trade_item(event, "character"), false);
                trader_inventory_div.addEventListener('click', (event)=>move_trade_item(event, "trader"), false);
                function move_trade_item(event, target) {
                    if(!in_trade) {
                        return;
                    }

                    let clicked_element = event.target;

                    if(clicked_element.isEqualNode(trader_inventory_div) || clicked_element.isEqualNode(inventory_div)) {
                        return;
                    }

                    if(clicked_element.classList.contains("equip_item_button") || clicked_element.classList.contains("unequip_item_button")) {
                        return;
                    }

                    let number_to_move = 1;

                    if(clicked_element.classList.contains("trade_ammount_button")){
                        number_to_move = Number(clicked_element.getAttribute("data-trade_ammount"));
                    }

                    clicked_element = retarget_clicked_to_class(clicked_element, ["inventory_item_control"], ["global_content"]);
                    if(!clicked_element) {
                        return;
                    }

                    if(clicked_element.classList.contains("equipped_item_control")) {
                        console.warn("Can't sell equipped items");
                        return;
                    }

                    if(target==="character") {
                        const selected_item = clicked_element.getAttribute("data-character_item");
                        if(clicked_element.classList.contains("item_to_trade")) {
                            //remove from to buy
                            total_price += remove_from_buying_list({item_key: selected_item, count: number_to_move});
                        }
                        else {
                            //add to to sell
                            total_price += add_to_selling_list({item_key: selected_item, count: number_to_move})
                        }
                    } 
                    else if(target==="trader") {
                        const selected_item = clicked_element.getAttribute("data-trader_item");
                        if(clicked_element.classList.contains("item_to_trade")) {
                            //remove from to_sell
                            total_price += remove_from_selling_list({item_key: selected_item, count: number_to_move});
                        }
                        else {
                            //add to to_buy
                            total_price += add_to_buying_list({item_key: selected_item, count: number_to_move})
                        }
                    }

                    update_displayed_trader_inventory();
                    update_displayed_character_inventory();

                    trade_price_value.innerHTML = format_money(total_price);
                    check_trade_cost();
                }

                inventory_div.addEventListener('click', (event)=>move_storage_item(event, "character"), false);
                storage_div.addEventListener('click', (event)=>move_storage_item(event, "storage"), false);
                function move_storage_item(event, target) {
                    if(!in_storage || !is_storage_open()) {
                        return;
                    }

                    let clicked_element = event.target;

                    if(clicked_element.isEqualNode(storage_div) || clicked_element.isEqualNode(inventory_div)) {
                        return;
                    }

                    if(clicked_element.classList.contains("equip_item_button") || clicked_element.classList.contains("unequip_item_button")) {
                        return;
                    }

                    let number_to_move = 1;

                    if(clicked_element.classList.contains("trade_ammount_button")){
                        number_to_move = Number(clicked_element.getAttribute("data-trade_ammount"));
                    }

                    clicked_element = retarget_clicked_to_class(clicked_element, ["inventory_item_control"], ["global_content"]);
                    if(!clicked_element) {
                        return;
                    }

                    if(clicked_element.classList.contains("equipped_item_control")) {
                        console.warn("Can't move equipped items");
                        return;
                    }


                    if(target==="character") {
                        const selected_item = clicked_element.getAttribute("data-character_item");
                        move_item_to_storage({item_key: selected_item, count: number_to_move});
                    }  else if(target==="storage") {
                        const selected_item = clicked_element.getAttribute("data-storage_item");
                        remove_item_from_storage({item_key: selected_item, count: number_to_move});
                    }

                    update_displayed_storage_inventory();
                    update_displayed_character_inventory();
                }

                //set colors for active selection buttons
                //for stuff where only 1 can be active
                Array.from(document.getElementsByClassName("activable_buttons")).forEach(element => element.addEventListener("click", set_active_button));
                function set_active_button(event) {
                    //based on assumption none of them has child elements
                    //alternatively just give all control buttons some attribute that could be then checked for?
                    var clicked_element = event.target;
                    if(clicked_element.children.length == 0) {
                        for(let i = 0; i < clicked_element.parentNode.children.length; i++) {
                            clicked_element.parentNode.children[i].classList.remove("active_selection_button");
                        }
                        clicked_element.classList.add("active_selection_button");
                    }
                }

                //set colors for active selection buttons
                //for stuff where any number can be active
                document.getElementById("message_controls").addEventListener("click", manage_active_buttons);
                function manage_active_buttons(event) {
                    var clicked_element = event.target;
                    if(clicked_element.children.length == 0) {
                        if(clicked_element.classList.contains("active_selection_button")) {
                            clicked_element.classList.remove("active_selection_button");
                        } else {
                            clicked_element.classList.add("active_selection_button");
                        }
                    }
                }

                document.getElementById("stance_list").addEventListener("click", event => {
                    if(event.target.classList.contains("stances_button_radio")) {
                        event.target.children[0].click();
                    } else if(event.target.classList.contains("stances_name")) {
                        event.target.parentNode.children[1].children[0].click();
                    } else if(event.target.classList.contains("stances_button_checkbox")) {
                        event.target.children[0].click();
                    }
                });
            }
        </script> 
    </body>
</HTML>