<!DOCTYPE HTML>

<!--
Extend the main webclient template with this file to get communication
with evennia set up automatically and get the Evennia JS lib and
JQuery available.
-->

{% load static %}
<html dir="ltr" lang="en">
  <head>
    <title> {{game_name}} </title>
    <meta http-equiv="content-type", content="application/xhtml+xml; charset=UTF-8" />
    <meta name="author" content="Evennia" />
    <meta name="generator" content="Evennia" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link rel='stylesheet' type="text/css" media="screen" href={% static "webclient/css/webclient.css" %}>

    {% comment %}
    Allows for loading custom styles without overriding the base site stylesheet
    {% endcomment %}
    <!-- Custom CSS -->
    <link rel='stylesheet' type="text/css" media="screen" href={% static "webclient/css/custom.css" %}>

    <link rel="icon" type="image/x-icon" href="/static/website/images/evennia_logo.png" />

    <!-- Import JQuery and warn if there is a problem -->
    {% block jquery_import %}
      <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    {% endblock %}

    <script type="text/javascript" charset="utf-8">
        if(!window.jQuery) {
            document.write("<div class='err'>jQuery library not found or the online version could not be reached. Check so Javascript is not blocked in your browser.</div>");
        }
    </script>

    <!-- This is will only fire if javascript is actually active -->
    <script language="javascript" type="text/javascript">
      $(document).ready(function() {
        $('#noscript').remove();
        $('#clientwrapper').removeClass('d-none');
      })
    </script>

    <!-- Generate a low-quality UID to uniquely identify client tabs -->
    <script language="javascript" type="text/javascript">
        function generateUID() {
            return Math.random().toString(36).substring(2, 15) +
                Math.random().toString(36).substring(2, 15);
        }
        var cuid = generateUID();
    </script>

    <!-- Set up Websocket url and load the evennia.js library-->
    <script language="javascript" type="text/javascript">
        {% if websocket_enabled %}
            var wsactive = true;
        {% else %}
            var wsactive = false;
        {% endif %}

        {% if browser_sessid %}
           var csessid = "{{browser_sessid}}";
        {% else %}
           var csessid = false;
        {% endif %}

        {% if websocket_url %}
            var wsurl = "{{websocket_url}}";
        {% else %}
            var wsurl = "ws://" + this.location.hostname + ":{{websocket_port}}";
        {% endif %}
    </script>
    <script src={% static "webclient/js/evennia.js" %} language="javascript" type="text/javascript" charset="utf-8"/></script>

    <!-- set up splits before loading the GUI -->
<!--
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
-->
    <script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
    <link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-base.css" />
    <link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" />
    <link type="text/css" rel="stylesheet" href={% static "webclient/css/goldenlayout.css" %} />

    <!-- Load gui library -->
    {% block guilib_import %}
        <script src={% static "webclient/js/webclient_gui.js" %} language="javascript" type="text/javascript" charset="utf-8"></script>
        <script src={% static "webclient/js/plugins/goldenlayout_default_config.js" %} type="text/javascript"></script>
        <script src={% static "webclient/js/plugins/clienthelp.js" %} language="javascript" type="text/javascript" charset="utf-8"></script>
        <script src={% static "webclient/js/plugins/popups.js" %} language="javascript" type="text/javascript"></script>
<!--
	<script src={% static "webclient/js/plugins/options.js" %} language="javascript" type="text/javascript"></script>
-->
        <script src={% static "webclient/js/plugins/options2.js" %} language="javascript" type="text/javascript"></script>
        <script src={% static "webclient/js/plugins/iframe.js" %} language="javascript" type="text/javascript"></script>
        <script src={% static "webclient/js/plugins/message_routing.js" %} language="javascript" type="text/javascript"></script>
        <script src={% static "webclient/js/plugins/history.js" %} language="javascript" type="text/javascript"></script>
        <script src={% static "webclient/js/plugins/font.js" %} language="javascript" type="text/javascript" charset="utf-8"></script>
<!--
        <script src={% static "webclient/js/plugins/splithandler.js" %} language="javascript" type="text/javascript"></script>
-->
        <script src={% static "webclient/js/plugins/oob.js" %} language="javascript" type="text/javascript"></script>
        <script src={% static "webclient/js/plugins/notifications.js" %} language="javascript" type="text/javascript"></script>
<!--
        <script src={% static "webclient/js/plugins/hotbuttons.js" %} language="javascript" type="text/javascript"></script>
-->
        <script src={% static "webclient/js/plugins/goldenlayout.js" %} language="javascript" type="text/javascript"></script>
<!--
        <script src={% static "webclient/js/plugins/dual_input.js" %} language="javascript" type="text/javascript"></script>
-->
        <script src={% static "webclient/js/plugins/default_in.js" %} language="javascript" type="text/javascript"></script>
        <script src={% static "webclient/js/plugins/default_out.js" %} language="javascript" type="text/javascript"></script>
        <script src={% static "webclient/js/plugins/multimedia.js" %} language="javascript" type="text/javascript"></script>
        <script src={% static "webclient/js/plugins/html.js" %} language="javascript" type="text/javascript"></script>
        <script src={% static "webclient/js/plugins/text2html.js" %} language="javascript" type="text/javascript"></script>
    {% endblock %}

    <script src="https://cdn.rawgit.com/ejci/favico.js/master/favico-0.3.10.min.js" language="javascript" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        if(!window.Favico) {
            document.write("<div class='err'>Favico.js library not found or the online version could not be reached. Check so Javascript is not blocked in your browser.</div>");
        }
    </script>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    {% block scripts %}
    {% endblock %}
  </head>
  <body>

    <div id="connecting">
        {% block connecting %}
        {% endblock %}
    </div>

    <div id="noscript" class="err">
        <h3>Javascript Error: The Evennia MUD client requires that you
            have Javascript activated.</h3>
            <p>Turn off eventual script blockers and/or switch to a
            web browser supporting javascript. <p>
            This error could also be due to not being able to access
            the online jQuery javascript library.</p>
        <!-- This is will only fire if javascript is actually active -->
        <script language="javascript" type="text/javascript">
            $('#noscript').remove();
        </script>
    </div>

    <!-- main client -->
    <div id=clientwrapper class="d-none">
        {% block client %}
        {% endblock %}
    </div>
  </body>
</html>
