Game/www/pages/home.html

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<div class="page" data-name="home">
    <div class="page-content">
        <!-- Game map -->
        <div id="mapbox">
        </div>

        <!-- Player info (top-left) -->
        <div id="playerinfo">
            <div class="display-flex align-items-center">
                <div class="usericon">
                </div>
                <div class="username-healthbar">
                    <span class="username">
                        <span class="player-nickname"></span>
                        <span class="badge margin-left" id="player-level-badge"></span>
                    </span>
                    <span data-progress="0" class="progressbar healthbar" id="player-healthbar"></span>
                </div>
            </div>
        </div>

        <!-- Chat UI (bottom) -->
        <div class="toolbar messagebar" id="messagebar" style="position: absolute; bottom: 0; left: 0; right: 0;">
            <div class="margin messages-content display-none" id="messages-content">
                <div class="messages" id="messages">
                    <!-- Messages go here -->
                </div>
            </div>
            <div class="toolbar-inner">
                <a class="link toggle-messages">
                    <span>
                        <i class="fas fa-comments"></i>
                        <i class="fas fa-caret-up" id="chattoggle-closed"></i>
                        <i class="fas fa-caret-down display-none" id="chattoggle-opened"></i>
                    </span>
                </a>
                <div class="messagebar-area">
                    <textarea id="chatbox" placeholder="Chat"></textarea>
                </div>
                <a class="link" id="sendmsgbtn">Send</a>
            </div>
        </div>

    </div>

    <div class="fab fab-right-center">
        <a href="#" class="popup-open" data-popup="#menu-popup">
            <i class="fas fa-2x fa-bars"></i>
        </a>
        <a href="#" onclick="scanCode()" class="margin-top">
            <i class="fas fa-2x fa-qrcode"></i>
        </a>
    </div>

    <div class="popup display-flex justify-content-center align-items-center padding-horizontal dark-popup" id="menu-popup">
        <div class="row" id="mainmenu-items">
            <div class="col-50 mainmenu-item popup-close" onclick="router.navigate('/inventory');">
                <i class="game-icon game-icon-school-bag fa-4x"></i><br />
                Items
            </div>
            <div class="col-50 mainmenu-item">
                <i class="game-icon game-icon-shop fa-4x"></i><br />
                Shop
            </div>
            <div class="col-100">
                <div class="row">
                    <div class="col-50 mainmenu-item mainmenu-item-sm popup-close" onclick="router.navigate('/profile/' + playerProfile.id + '/' + playerProfile.name);">
                        <i class="fas fa-2x fa-user-circle"></i><br />
                        Profile
                    </div>
                    <div class="col-50 mainmenu-item mainmenu-item-sm popup-close" onclick="router.navigate('/settings');">
                        <i class="fas fa-2x fa-cog"></i><br />
                        Settings
                    </div>
                </div>
            </div>
        </div>
        <div class="fab fab-center-bottom">
            <a href="#" class="popup-close" data-popup="#menu-popup">
                <i class="fas fa-2x fa-times"></i>
            </a>
        </div>
    </div>

    <div class="popup dark-popup padding-horizontal" id="place-popup">
        <h1 id="place-title"></h1>

        <div id="place-info" class="display-none">
            <div class="row align-content-center">
                <div class="col-50">
                    <img src="img/place/white.png" id="place-image" />
                    <span class="progressbar" id="place-health-bar" data-progress="0"></span>
                </div>
                <div class="col-50">
                    <h3>Actions</h3>
                    <div class="bg-color-primary action-button margin-bottom" id="magic-action-button">
                        <i class="game-icon game-icon-magic-swirl fa-2x"></i>
                        <span id="magic-action-label">Magic</span>
                    </div>
                    <div class="bg-color-primary action-button margin-bottom" id="item-action-button">
                        <i class="game-icon game-icon-school-bag fa-2x"></i>
                        <span id="item-action-label">Item</span>
                    </div>
                    <h3>Artifacts</h3>
                    <div id="place-artifact-list">

                    </div>
                </div>
            </div>
        </div>

        <div class="text-center">
            <div class="preloader color-white" style="width: 44px; height: 44px"></div>
        </div>

        <div id="place-error-msg" class="display-none"></div>

        <div class="fab fab-center-bottom">
            <a href="#" class="popup-close" data-popup="#place-popup">
                <i class="fas fa-2x fa-times"></i>
            </a>
        </div>
    </div>

    <div class="popup dark-popup solid-popup" id="inventory-popup">
        <div class="block">
            <div class="row justify-content-center item-bin">
                <div class="col text-align-center padding-top bag-preloader">
                    <div class="preloader color-green"></div>
                    <br />
                    <h3>Opening bag...</h3>
                </div>
                <div class="col text-align-center padding-top bag-empty display-none">
                    <i class="game-icon game-icon-open-chest fa-3x"></i>
                    <br />
                    <h3>Your bag is empty.</h3>
                </div>
            </div>
        </div>
        <div class="fab fab-center-bottom">
            <a href="#" class="popup-close" data-popup="#inventory-popup">
                <i class="fas fa-2x fa-times"></i>
            </a>
        </div>
    </div>

    <div class="popup display-flex justify-content-center align-items-center dark-popup" id="founditem-popup">
        <div class="row">
            <div class="col-100 tablet-50 block text-align-center" id="founditem-block">
                <i class="fas fa-exclamation fa-4x"></i>
                <h1>Item Found!</h1>
                <h3>You found one <span id="founditem-name"></span></h3>
            </div>

            <div class="col-100 tablet-50 block text-align-center display-none" id="foundmunzee-block">
                <i class="fas fa-qrcode fa-4x"></i>
                <h1>Munzee Found!</h1>
                <h3>You found <span id="foundmunzee-name"></span></h3>
            </div>
        </div>

        <div class="fab fab-center-bottom">
            <a href="#" class="popup-close" data-popup="#founditem-popup">
                <i class="fas fa-2x fa-times"></i>
            </a>
        </div>
    </div>

    <script src="js/map.js"></script>
    <script src="js/chat.js"></script>
    <script src="js/home.js"></script>

</div>