WebHost: Move module into WebHostLib to prevent shadowing WebHost.py

WebHostLib/templates/host_room.html

@@ -0,0 +1,43 @@
+{% extends 'layout.html' %}
+{% block head %}
+    <title>Multiworld {{ room.id }}</title>
+{% endblock %}
+{% block body %}
+    {% if room.owner == session["_id"] %}
+        Room created from <a href="{{ url_for("view_seed", seed=room.seed.id) }}">Seed #{{ room.seed.id }}</a><br>
+    {% endif %}
+    {% if room.tracker %}
+        This room has a <a href="{{ url_for("get_tracker", tracker=room.tracker) }}">Multiworld Tracker</a> enabled.<br>
+    {% endif %}
+    This room will be closed after {{ room.timeout//60//60 }} hours of inactivity. Should you wish to continue later,
+    you can simply refresh this page and the server will be started again.<br>
+    {% if room.owner == session["_id"] %}
+        <form method=post>
+            <div class="form-group">
+                <label for="cmd"></label>
+                <input class="form-control" type="text" id="cmd" name="cmd"
+                       placeholder="Server Command. /help to list them, list gets appended to log.">
+            </div>
+        </form>
+    {% endif %}
+    Log:
+    <div id="logger"></div>
+    <script>
+        var xmlhttp = new XMLHttpRequest();
+        var url = '{{ url_for('display_log', room = room.id) }}';
+
+        xmlhttp.onreadystatechange = function () {
+            if (this.readyState == 4 && this.status == 200) {
+                document.getElementById("logger").innerText = this.responseText;
+            }
+        };
+
+        function request_new() {
+            xmlhttp.open("GET", url, true);
+            xmlhttp.send();
+        }
+
+        window.setTimeout(request_new, 1000);
+        window.setInterval(request_new, 3000);
+    </script>
+{% endblock %}

WebHostLib/templates/landing.html

@@ -0,0 +1,56 @@
+{% extends 'layout.html' %}
+{% block head %}
+    <title>Berserker's Multiworld</title>
+{% endblock %}
+{% block body %}
+    <nav class="navbar navbar-dark bg-dark navbar-expand-sm">
+        <ul class="navbar-nav">
+            <li class="nav-item">
+                <a class="nav-link" href="{{ url_for("uploads") }}">Start a Group</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="{{ url_for("uploads") }}">Upload a Multiworld</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="{{ url_for("uploads") }}">Your Content</a>
+            </li>
+        </ul>
+    </nav>
+    <br>
+
+    <div class="container container-fluid d-flex">
+        <div class="jumbotron jumbotron-fluid">
+            <div class="container">
+                <div class="col-md-5 p-lg-2 mx-auto my-2">
+                    <h1 class="text-center display-4 font-weight-normal">Berserker's Multiworld</h1>
+                    <p class="text-center lead font-weight-normal"><a
+                            href="https://github.com/Berserker66/MultiWorld-Utilities">Source Code</a>
+                        - <a href="https://github.com/Berserker66/MultiWorld-Utilities/wiki">Wiki</a>
+                        -
+                        <a href="https://github.com/Berserker66/MultiWorld-Utilities/graphs/contributors">Contributors</a>
+                    </p>
+                </div>
+                <div>
+                    <p class="lead">This webpage is still under heavy construction. Database may be wiped as I see fit
+                        and some stuff may be broken.</p>
+                    <p class="lead">This is a randomizer for The Legend of Zelda: A Link to the Past.</p>
+                    <p class="lead">It is a multiworld, meaning items get shuffled across multiple players' worlds
+                        which get exchanged on pickup through the internet.</p>
+                    <p class="lead">This website allows hosting such a Multiworld and comes with an item and location
+                        tracker.</p>
+                    <p class="lead">Currently you still require a locally installed client to play, that handles
+                        connecting to the server and patching a vanilla game to the randomized one. Get started on the
+                        <a href="https://github.com/Berserker66/MultiWorld-Utilities/wiki">Wiki</a>.</p>
+
+                </div>
+            </div>
+        </div>
+        <div>
+            <iframe src="https://discordapp.com/widget?id=731205301247803413&theme=light" width="300" height="500"
+                    allowtransparency="true" frameborder="0"></iframe>
+
+        </div>
+    </div>
+
+
+{% endblock %}

WebHostLib/templates/layout.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+    {% block head %}<title>Berserker's Multiworld</title>
+    {% endblock %}
+</head>
+<body>
+
+{% with messages = get_flashed_messages() %}
+    {% if messages %}
+        <div class=".container-fluid">
+            {% for message in messages %}
+                <div class="alert alert-danger" role="alert">{{ message }}</div>
+            {% endfor %}
+        </div>
+    {% endif %}
+{% endwith %}
+
+{% block body %}{% endblock %}
+
+<br> {# spacing for notice #}
+<footer class="page-footer" style="position: fixed; left: 0; bottom: 0; width: 100%; text-align: center">
+    <div class="container">
+        <span class="text-muted">This site uses a cookie to track your session in order to give you ownership over uploaded files and created instances.</span>
+        {#  <button type="button" class="btn btn-secondary btn-sm" onclick="document.getElementById('cookiefooter').remove()">X</button> #}
+    </div>
+</footer>
+</body>

WebHostLib/templates/macros.html

@@ -0,0 +1,10 @@
+{% macro list_rooms(rooms) -%}
+    Rooms:
+    <ul class="list-group">
+        {% for room in rooms %}
+            <li class="list-group-item"><a href="{{ url_for("host_room", room=room.id) }}">Room #{{ room.id }}</a></li>
+        {% endfor %}
+        {{ caller() }}
+
+    </ul>
+{%- endmacro %}

WebHostLib/templates/tracker.html

@@ -0,0 +1,172 @@
+{% extends 'layout.html' %}
+{% block head %}
+    <title>Multiworld Tracker for Room {{ room.id }}</title>
+
+    <link rel="stylesheet" type="text/css"
+          href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.21/fh-3.1.7/datatables.min.css"/>
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("static.css") }}"/>
+    <script type="text/javascript"
+            src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.21/fh-3.1.7/datatables.min.js"></script>
+    <script src="{{ static_autoversion("jquery.scrollsync.js") }}"></script>
+
+    <script>
+
+        $(document).ready(function () {
+            var tables = $(".table").DataTable({
+                "paging": false,
+                "ordering": true,
+                "info": false,
+                "dom": "t",
+                "scrollY": "39vh",
+                "scrollCollapse": true,
+            });
+
+            $('#searchbox').keyup(function () {
+                tables.search($(this).val()).draw();
+            });
+
+            function update() {
+                var target = $("<div></div>");
+                target.load("/tracker/{{ room.tracker }}", function (response, status) {
+                    if (status === "success") {
+                        target.find(".table").each(function (i, new_table) {
+                            var new_trs = $(new_table).find("tbody>tr");
+                            var old_table = tables.eq(i);
+                            var topscroll = $(old_table.settings()[0].nScrollBody).scrollTop();
+                            var leftscroll = $(old_table.settings()[0].nScrollBody).scrollLeft();
+                            old_table.clear();
+                            old_table.rows.add(new_trs).draw();
+                            $(old_table.settings()[0].nScrollBody).scrollTop(topscroll);
+                            $(old_table.settings()[0].nScrollBody).scrollLeft(leftscroll);
+                        });
+                    } else {
+                        console.log("Failed to connect to Server, in order to update Table Data.");
+                        console.log(response);
+                    }
+                })
+            }
+
+            setInterval(update, 30000);
+
+            $(".dataTables_scrollBody").scrollsync({
+                y_sync: true,
+                x_sync: true
+            })
+            $(window).resize(function () {
+                tables.draw();
+            });
+            setTimeout(
+                tables.draw, {# this fixes the top header misalignment, for some reason #}
+                500
+            );
+        })
+    </script>
+
+{% endblock %}
+{% block body %}
+    <input id="searchbox" class="form-control" type="text" placeholder="Search">
+    <div>
+        {% for team, players in inventory.items() %}
+            <table class="table table-striped table-bordered table-hover table-sm">
+                <thead class="thead-dark">
+            <tr>
+                <th>#</th>
+                <th>Name</th>
+                {% for name in tracking_names %}
+                    {% if name in icons %}
+                        <th style="text-align: center"><img class="alttp-sprite"
+                                                            src="{{ icons[name] }}"
+                                                            alt="{{ name|e }}"></th>
+                    {% else %}
+                        <th>{{ name|e }}</th>
+                    {% endif %}
+                {% endfor %}
+            </tr>
+            </thead>
+            <tbody>
+            {% for player, items in players.items() %}
+                <tr>
+                    <td class="table-info">{{ loop.index }}</td>
+                    {% if (team, loop.index) in video %}
+                        <td class="table-info">
+                            <a target="_blank" href="https://www.twitch.tv/{{ video[(team, loop.index)][1] }}">
+                                {{ player_names[(team, loop.index)] }}
+                                ▶️</a></td>
+                    {% else %}
+                        <td class="table-info">{{ player_names[(team, loop.index)] }}</td>{% endif %}
+                    {% for id in tracking_ids %}
+
+                        {% if items[id] %}
+                            <td style="text-align: center" class="table-success">
+                                {% if id in multi_items %}{{ items[id] }}{% else %}✔️{% endif %}</td>
+                        {% else %}
+                            <td></td>
+                        {% endif %}
+                    {% endfor %}
+                </tr>
+            {% endfor %}
+            </tbody>
+        </table>
+    {% endfor %}
+
+    {% for team, players in checks_done.items() %}
+        <table class="table table-striped table-bordered table-hover table-sm">
+            <thead class="thead-dark">
+            <tr>
+                <th rowspan="2">#</th>
+                <th rowspan="2">Name</th>
+                {% for area in ordered_areas %}
+                    {% set colspan = (3 if area in key_locations else 1) %}
+                    {% if area in icons %}
+                        <th colspan="{{ colspan }}" style="text-align: center"><img class="alttp-sprite"
+                                                                                    src="{{ icons[area] }}"
+                                                                                    alt="{{ area }}"></th>
+                    {% else %}
+                        <th colspan="{{ colspan }}">{{ area }}</th>
+                    {% endif %}
+                {% endfor %}
+                <th rowspan="2">Last Activity</th>
+            </tr>
+            <tr>
+                {% for area in ordered_areas %}
+                    <th style="text-align: center"><img class="alttp-sprite" src="{{ icons["Chest"] }}" alt="Checks">
+                    </th>
+                    {% if area in key_locations %}
+                        <th style="text-align: center"><img class="alttp-sprite"
+                                                            src="{{ icons["Small Key"] }}" alt="Small Key"></th>
+                        <th style="text-align: center"><img class="alttp-sprite"
+                                                            src="{{ icons["Big Key"] }}" alt="Big Key"></th>
+                    {% endif %}
+                {% endfor %}
+            </tr>
+            </thead>
+            <tbody>
+            {% for player, checks in players.items() %}
+                <tr>
+                    <td class="table-info">{{ loop.index }}</td>
+                    <td class="table-info">{{ player_names[(team, loop.index)]|e }}</td>
+                    {% for area in ordered_areas %}
+                        {% set checks_done = checks[area] %}
+                        {% set checks_total = checks_in_area[area] %}
+                        {% if checks_done == checks_total %}
+                            <td style="text-align: center" class="table-success">
+                                {{ checks_done }}/{{ checks_total }}</td>
+                        {% else %}
+                            <td style="text-align: center">{{ checks_done }}/{{ checks_total }}</td>
+                        {% endif %}
+                        {% if area in key_locations %}
+                            <td>{{ inventory[team][player][small_key_ids[area]] }}</td>
+                            <td>{% if inventory[team][player][big_key_ids[area]] %}✔️{% endif %}</td>
+                        {% endif %}
+                    {% endfor %}
+                    {% if activity_timers[(team, player)] %}
+                        <td class="table-info">{{ activity_timers[(team, player)] | render_timedelta }}</td>
+                    {% else %}
+                        <td class="table-warning">None</td>{% endif %}
+                </tr>
+            {% endfor %}
+            </tbody>
+        </table>
+    {% endfor %}
+    </div>
+{% endblock %}

WebHostLib/templates/uploads.html

@@ -0,0 +1,24 @@
+{% extends 'layout.html' %}
+{% block head %}
+    <title>Upload Multidata</title>
+{% endblock %}
+{% block body %}
+    <h1>Upload Multidata or Multiworld Zip</h1>
+    <form method=post enctype=multipart/form-data>
+        <input type=file name=file>
+        <input type=submit value=Upload>
+    </form>
+    <br>
+    {% if rooms %}
+        <h1>Your Rooms:</h1>
+        <ul class="list-group">
+            {% for room in rooms %}
+                <li class="list-group-item"><a href="{{ url_for("host_room", room=room.id) }}">Room #{{ room.id }}</a>
+                    based on <a href="{{ url_for("view_seed", seed=room.seed.id) }}">Seed #{{ room.seed.id }}</a></li>
+            {% endfor %}
+        </ul>
+    {% else %}
+        <h3>No rooms owned by you were found. Upload a Multiworld to get started.</h3>
+    {% endif %}
+
+{% endblock %}

WebHostLib/templates/view_seed.html

@@ -0,0 +1,25 @@
+{% extends 'layout.html' %}
+{% import "macros.html" as macros %}
+{% block head %}
+    <title>Multiworld Seed {{ seed.id }}</title>
+{% endblock %}
+{% block body %}
+    Seed #{{ seed.id }}<br>
+    Created: {{ seed.creation_time }} UTC <br>
+    Players:
+    <ul class="list-group">
+        {% for team in seed.multidata["names"] %}
+            <li class="list-group-item">Team #{{ loop.index }} - {{ team | length }}
+                <ul class="list-group">
+                    {% for player in team %}
+                        <li class="list-group-item">{{ player }}</li>
+                    {% endfor %}
+                </ul>
+            </li>
+        {% endfor %}
+    </ul>
+    {% call macros.list_rooms(rooms) %}
+        <li class="list-group-item list-group-item-action"><a href="{{ url_for("new_room", seed=seed.id) }}">new
+            room</a></li>
+    {% endcall %}
+{% endblock %}