templates/base.html.twig line 1

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>{% block title %}Tiny Knight Games{% endblock %}</title>
  8.         {% block stylesheets %}
  9. {#            {{ encore_entry_link_tags('main') }}#}
  10.             {{ encore_entry_link_tags('app') }}
  11.         {% endblock %}
  12.         {% block javascripts %}
  14. {#            {{ encore_entry_script_tags('main') }}#}
  15.             {{ encore_entry_script_tags('app') }}
  16. {#            {{ encore_entry_script_tags('theta-wallet-connect') }}#}
  17.             <script type="application/javascript" src="//unpkg.com/@thetalabs/theta-wallet-connect@0.0.16/dist/theta-wallet-connect.umd.js"></script>
  18.             <script>var GlobalUnityInstance = null;</script>
  19.         {% endblock %}
  20.     </head>
  21.     <body data-turbo="false">
  23.     <div class="top-bar-container" style="z-index: 999;" data-sticky-container>
  24.         <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
  25.             <div class="grid-container fluid full-width" style="padding: 0;">
  26.                 <div class="grid-x" style="margin: 0 auto;">
  27.                     <div class="small-12 cell">
  28.                         <div id="top-bar-main-color" class="top-bar">
  29.                             <div class="top-bar-left">
  30.                                 <ul class="dropdown menu" data-dropdown-menu>
  31. {#                                    <li class="menu-text"><span style="letter-spacing: .05em;">TINY KNIGHT GAMES</span></li>#}
  32.                                     <li><img height="40" width="40" src="{{ asset('/build/images/web/tkg_knight_only.png') }}" /></li>
  33.                                     <li id="menu-home" class="menu-link"><a href="{{ path('default', { domain: app_domain }) }}">Home</a></li>
  34.                                     <li id="menu-game" class="is-dropdown-submenu-parent">
  35.                                         <a href="#">Games</a>
  36.                                         <ul class="menu vertical submenu is-dropdown-submenu" style="background: #222b38; width: 250px;">
  37.                                             <li class="menu-link"><a href="{{ url('fishers_quest_default', { subdomain: 'fishersquest', domain: app_domain }) }}"><span style="padding: 0 0 0 7px; vertical-align: middle;">Fisher's Quest</span></a></li>
  38. {#                                            <li class="menu-link"><a href="{{ url('occult_of_the_oculi_default', { subdomain: 'occultoftheoculi', domain: app_domain }) }}"><span style="padding: 0 0 0 7px; vertical-align: middle;">Occult of the Oculi</span></a></li>#}
  39.                                         </ul>
  40.                                     </li>
  41.                                     <li id="menu-explorer" class="menu-link"><a href="{{ path('explorer', { domain: app_domain }) }}">Explorer</a></li>
  42.                                     <li id="menu-marketplace" class="menu-link"><a href="{{ path('marketplace', { state: 1, domain: app_domain }) }}">Marketplace</a></li>
  43.                                     <li id="menu-leaderboard" class="is-dropdown-submenu-parent">
  44.                                         <a href="#">Leaderboards</a>
  45.                                         <ul class="menu vertical submenu is-dropdown-submenu" style="background: #222b38;">
  46.                                             <li class="menu-link"><a href="{{ url('leaderboard_catchable_season_four', { domain: app_domain }) }}"><span style="padding: 0 0 0 7px; vertical-align: middle;">Fisher's Quest</span></a></li>
  47. {#                                            <li class="menu-link"><a href="#"><span style="padding: 0 0 0 7px; vertical-align: middle;">Mystical Maze</span></a></li>#}
  48.                                         </ul>
  49.                                     </li>
  50.                                     <li id="menu-support" class="menu-link"><a href="{{ path('support', { domain: app_domain }) }}">Support</a></li>
  51.                                     {% if app.user is not null and 'ROLE_ADMIN' in app.user.getroles() %}
  52.                                         <li id="menu-admin" class="menu-link"><a href="{{ path('app_admin_dashboard', { domain: app_domain }) }}"><strong><span style="color: goldenrod;">ADMIN</span></strong></a></li>
  53.                                     {% endif %}
  54.                                 </ul>
  55.                             </div>
  56.                             <div class="top-bar-right">
  57.                                 {% if is_granted('IS_AUTHENTICATED_FULLY') %}
  58.                                     <ul id="user-info" class="dropdown menu" data-dropdown-menu>
  59.                                         <li class="is-dropdown-submenu-parent" style="cursor: pointer; margin-right: 8px;">
  60.                                             <img id="notification-bell" height="40" width="40" src="{{ asset('build/images/web/notification.svg') }}" />
  61.                                             <ul id="notifications" class="menu vertical submenu is-dropdown-submenu" style="width: 500px; background: #222b38; font-size: .9em;">
  62.                                                 <li id="no-unread" style="padding: 5px; font-size: .9em;">You have no unread notifications.</li>
  63.                                                 <li id="clear-notifications" style="padding: 5px; display: none; text-align: right; font-size: .9em;"><a href="#">Mark all as read</a></li>
  64.                                             </ul>
  65.                                         </li>
  66.                                         <li class="is-dropdown-submenu-parent" style="cursor: pointer; margin-right: 8px;">
  67.                                             <img height="40" width="40" style="border-radius: 20px; border: 3px solid #fff; display: inline-block;" src="{{ asset('build/images/web/icon-profile-otter.png') }}" />
  68.                     {#                        <div style="height: 40px; width: 40px; background: blue; border: 3px solid #fff; border-radius: 25px; display: inline-block;"></div>#}
  69.                     {#                        Hello,#}
  70.                     {#                        {% if app.user.email != app.user.username %}#}
  71.                     {#                            {{ app.user.username }}!#}
  72.                     {#                        {% else %}#}
  73.                     {#                            {{ app.user.email }}#}
  74.                     {#                        {% endif %}#}
  75.                                             <ul class="menu vertical submenu is-dropdown-submenu" style="background: #222b38;">
  76.                                                 <li class="menu-link"><a href="{{ url('user_profile', { userId: app.user.id, domain: app_domain }) }}"><img height="20" width="20" src="{{ asset('build/images/web/icon-profile.svg') }}" /> <span style="padding: 0 0 0 7px; vertical-align: middle;">My Profile</span></a></li>
  77.                                                 <li class="menu-link"><a href="{{ url('user_records', { domain: app_domain }) }}"><img height="20" width="20" src="{{ asset('build/images/web/icon-records.svg') }}" /> <span style="padding: 0 0 0 7px; vertical-align: middle;">My Records</span></a></li>
  78.                                                 <li class="menu-link"><a href="{{ url('user_profile_settings', { domain: app_domain }) }}"><img height="20" width="20" src="{{ asset('build/images/web/settings.svg') }}" /> <span style="padding: 0 0 0 7px; vertical-align: middle;">Settings</span></a></li>
  79.                                                 <li class="menu-link"><a href="{{ url('app_logout') }}"><img height="20" width="20" src="{{ asset('build/images/web/icon-logout.svg') }}" /> <span style="padding: 0 0 0 7px; vertical-align: middle;">Logout</span></a></li>
  80.                                             </ul>
  81.                                         </li>
  82.                                         <li id="market-contract-balance" class="is-dropdown-submenu-parent" style="cursor: pointer; margin-right: 8px; {% if not app.user.activeWallet %}display: none;{% endif %}">
  83.                                             <div class="contract-tfuel" style="margin-top: 5px;">
  84.                                                 <span style="font-size: .8em; padding: 0 5px 0 3px; display: inline-block; vertical-align: top; font-weight: bold">Market</span>
  85.                                                 <img height="20" width="20" src="{{ asset('build/images/web/tfuel-logo.svg') }}" style="vertical-align: top;" />
  86.                                                 <span class="contract-tfuel-balance">-</span>
  87.                                             </div>
  88.                                             <ul class="menu vertical submenu is-dropdown-submenu" style="background: #222b38; width: 250px;">
  89.                                                 <li class="menu-link"><a id="withdraw-balance" class="ext-{{ app.user.walletExtension == 1 ? 1 : 2 }}" href="#">Withdraw Balance</a></li>
  90.                                             </ul>
  92.                                         </li>
  93.                     {#                    <li {% if not app.user.activeWallet %}style="display: none;"{% endif %} class="wallet-address is-dropdown-submenu-parent">#}
  94.                                         <li id="user-wallet-info" {% if not app.user.activeWallet %}style="display: none;"{% endif %}>
  95. {#                                                <div class="wallet-sdlr">#}
  96. {#                                                    <img height="20" width="20" src="{{ asset('build/images/web/sdlr-logo-new.svg') }}" style="vertical-align: top;" />#}
  97. {#                                                    <span class="wallet-sdlr-balance">-</span>#}
  98. {#                                                </div>#}
  99.                                                 <div class="wallet-tfuel" style="margin-top: 5px;">
  100.                                                     {% if app.user.activeWallet.address is defined %}
  101.                                                         <span style="font-size: .8em; padding: 0 5px 0 3px; display: inline-block; vertical-align: top; font-weight: bold; color: #fff;">
  102.                                                         <a id="user-wallet-address" href="https://explorer.thetatoken.org/account/{{ app.user.activeWallet.address }}" style="display: inline-block; padding: 0; color: #fff;" target="_blank">{{ app.user.activeWallet.address|slice(0,6) }}...{{ app.user.activeWallet.address|slice(38,42) }}</a>
  103.                                                         </span>
  104.                                                     {% endif %}
  105.                                                     <img height="20" width="20" src="{{ asset('build/images/web/tfuel-logo.svg') }}" style="vertical-align: top;" />
  106.                                                     <span class="wallet-tfuel-balance">-</span>
  107.                                                 </div>
  108. {#                                                <div class="wallet">#}
  109. {#                                                    <span class="wallet-address">#}
  110. {#                                                        {% if app.user.activeWallet.address is defined %}#}
  111. {#                                                        <a id="user-wallet-address" href="https://explorer.thetatoken.org/account/{{ app.user.activeWallet.address }}" style="display: inline-block; padding: 0; color: #333;" target="_blank">{{ app.user.activeWallet.address|slice(0,6) }}...{{ app.user.activeWallet.address|slice(38,42) }}</a>#}
  112. {#                                                        {% endif %}#}
  113. {#                                                    </span>#}
  114. {#                                                </div>#}
  115.                     {#                            <img height="25" width="25" src="{{ asset('build/images/web/icon-thetawallet-01.svg') }}" style="vertical-align: middle;"/>#}
  117.                     {#                        <ul class="menu vertical">#}
  118.                     {#                            <li><a data-open="connect-wallet-modal">Connect New Wallet</a></li>#}
  119.                     {#                        </ul>#}
  120.                                         </li>
  122.                     {#                    <li><img height="25" width="25" src="{{ asset('build/images/web/icon-thetawallet-01.svg') }}" /></li>#}
  123.                     {#                    <li><img height="25" width="25" src="{{ asset('build/images/web/metamask-fox.svg') }}" /></li>#}
  126.                                         <li id="connect-wallet"{% if app.user.activeWallet %} style="display: none;" {% endif %}><button class="button" data-open="connect-wallet-modal">Connect Theta Wallet</button></li>
  127.                                         <li><div id="metamask-info"></div></li>
  128.                     {#                    <li><a href="/support#howtopurchasenft" class="button" style="color: #fff;">Get Sand Dollars</a></li>#}
  129.                     {#                    <li><button class="button" id="buy-sdlr">Buy Sand Dollars</button></li>#}
  130.                     {#                    <li><button class="button" id="nft-equipment-create">NFT Equipment Create</button></li>#}
  131.                                     </ul>
  132.                                 {% else %}
  133.                                     <a class="button" style="font-size: 1em; color: #fff; font-weight: bold; margin: 0;" href="{{ path('app_register') }}">Register</a>
  134.                                     <a class="button" style="font-size: 1em; color: #fff; font-weight: bold; margin: 0 10px 0 0;" href="{{ url('app_login') }}">Login</a>
  135.                                 {% endif %}
  137.                             </div>
  138.                         </div>
  139.                     </div>
  140.                 </div>
  141.             </div>
  142.         </div>
  143.     </div>
  144.     <div id="loading" style="display: none;">
  145.         <div id="loading-info">
  146.             <img style="width: 200px; height: 200px;" src="{{ asset('build/images/web/icon-thetawallet-01.svg') }}" />
  147.             <p style="color: #fff; font-size: 2em; font-weight: bold;">Theta Network transaction pending...</p>
  148.             <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
  149.         </div>
  150.     </div>
  152.     {% block body %}{% endblock %}
  154.     <div class="reveal" id="connect-wallet-modal" style="background: #333; border: none; border-radius: 5px; padding: 50px;" data-reveal>
  155.         <h1 style="text-align: center;">Connect a Wallet</h1>
  156.         <div class="connect-prompt" style="text-align: center;">
  157.             <p>Please choose an option below to connect a wallet.</p>
  158.             <button class="button" id="connect-thetawallet" style="background: #29cad2; border-radius: 15px; width: 300px; margin: 8px auto; border: 2px solid #f2f2f2; font-weight: bold; font-size: 1.1em; vertical-align: middle;">
  159.                 <img height="30" width="30" style="background: #ffffff; border-radius: 15px; border: 5px solid #fff;"  src="{{ asset('build/images/web/icon-thetawallet-01.svg') }}" />
  160.                 Theta Wallet Extension
  161.             </button>
  162.             <button class="button" id="connect-metamask" style="background: #f18800; border-radius: 15px;width: 300px; margin: 8px auto; border: 2px solid #f2f2f2; font-weight: bold; font-size: 1.1em; vertical-align: middle;">
  163.                 <img height="30" width="30" style="background: #ffffff; border-radius: 15px; border: 5px solid #fff;" src="{{ asset('build/images/web/metamask-fox.svg') }}" />
  164.                 MetaMask Extension
  165.             </button>
  166.         </div>
  167.         <div class="connect-success-container" style="display: none; text-align: center;">
  168.             <h2 style="text-align: center;">Success!</h2>
  169.             <span class="connect-success"></span>
  170.         </div>
  171.         <button id="connect-wallet-modal-close" class="close-button" data-close aria-label="Close modal" type="button">
  172.             <span aria-hidden="true">&times;</span>
  173.         </button>
  174.     </div>
  176.     <div class="grid-container full">
  177.         <div class="grid-x">
  178.         <div class="small-12 cell" style="background-color: #17171f; min-height:400px;">
  179.             <div class="grid-x grid-padding-x" style="padding-top: 50px;">
  180.                 <div class="small-12 medium-3 medium-offset-2 cell">
  181.                     <p style="padding: 20px 20px 10px 20px;">Tiny Knight Games is powered by</p>
  182.                     <p><img style="height: 50px;" src="{{ asset('/build/images/web/unity.png') }}" /> <a target="_blank" href="https://www.thetatoken.org/"><img style="width: 50px; height: 50px;" src="{{ asset('/build/images/web/theta.png') }}" /></a> <a target="_blank" href="https://www.thetatoken.org/"><img style="width: 50px; height: 50px;" src="{{ asset('/build/images/web/tfuel.png') }}" /></a></p>
  183.                 </div>
  184.                 <div class="small-12 medium-2 cell" style="padding: 20px 0 0 0; border-left: 1px solid #444;">
  185.                     <ul style="list-style-type: none; margin-top: 0; padding-top: 0; font-size: .9em;">
  186.                         <li>In the News
  187.                             <ul style="list-style-type: none;"><li><a style="font-size: .9em;" href="{{ path('patch_notes', { domain: app_domain }) }}">Patch Notes</a></li></ul>
  188.                         </li>
  189.                         <li style="padding-top: 10px;">Support
  190.                             <ul style="list-style-type: none;">
  191.                                 <li><a style="font-size: .9em;" href="{{ path('support', { domain: app_domain }) }}">Support</a></li>
  192.                                 <li><a style="font-size: .9em;" href="{{ path('privacy', { domain: app_domain }) }}">Privacy Notice</a></li>
  193.                             </ul>
  195.                         </li>
  196.                         <li style="padding-top: 10px;">Contact
  197.                             <ul style="list-style-type: none;"><li><a style="font-size: .9em;" href="https://discord.gg/HeSe9rPxjc">Discord</a></li></ul>
  198.                         </li>
  199.                     </ul>
  200.                 </div>
  201.                 <div class="small-12 medium-3 end cell">
  202.                     <p style="padding: 0px 20px 0 20px;"><img style="width: 50px; height: 50px;" src="{{ asset('/build/images/web/discord.png') }}" /> <a class="button" style="background: #6a89d6; color: #fff; border-radius: 5px; margin-top: 15px;" target="_blank" href="https://discord.gg/HeSe9rPxjc">Join us on Discord!</a></p>
  203.                 </div>
  204.             </div>
  205.         </div>
  206.         </div>
  207.     </div>
  208.     <script type="application/javascript">
  209.         document.addEventListener("DOMContentLoaded", async function() {
  210.             await window.ThetaWalletConnect.connect();
  211.         });
  212.     </script>
  215.     </body>
  216. </html>