Create frontend interface for a marches world

4 years ago · cf0598b094
7 changed files with 62 additions and 2 deletions
--- a/app/routes.py
+++ b/app/routes.py
@ -61,14 +61,20 @@ def search():
 def marches():
    return render_template('marches.html', worlds=get_worlds())

+@app.route("/marches/maps/<world>")
+def marchMap(world):
+    image_map = [("Temple of Constant Explosions",10,20,35),("Deep Gnome Workshop",50,40,20)] #(place,x,y,r)
+    return render_template("marchMap.html",worldname=world,imap=image_map)
+
+
@app.route("/marches/worlds/<world>")
 def marchWorld(world):
    worldDir = "../Worlds/"+world
    #copy <worldname>.png from world.png into static
    player_list = ["INVALID1","INVALID2","INVALID3"]
-    image_map = [(10,20,35),(50,40,20)] #(x,y,r)
+    #image_map = [("Temple of Constant Explosions",10,20,35),("Deep Gnome Workshop",50,40,20)] #(place,x,y,r)
    log_list = [("5/3/19",[("Josh Gordon","bottom text"),("Anthony Rinaldo","lorem ipsum")])] # :: [(Date,[(CharacterName,String)])]
-    return render_template("marchWorld.html",worldname=world,players=player_list,imap=image_map,logs=log_list)
+    return render_template("marchWorld.html",worldname=world,players=player_list,logs=log_list)

 def bucket_route(uri, dir, sing=None):
    if sing is None:
--- a/app/static/Test1.png
+++ b/app/static/Test1.png
--- a/app/static/Test2.png
+++ b/app/static/Test2.png
--- a/app/static/marchStyle.css
+++ b/app/static/marchStyle.css
@ -0,0 +1,22 @@
+section.info {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+img.map {
+    display: block;
+    width: 30%;
+    padding: 10px;
+}
+
+img.bigmap {
+    display: block;
+    width: auto;
+    height: auto;
+}
+
+.characters {
+    display: flex;
+    flex-direction: column;
+}
--- a/app/templates/base.html
+++ b/app/templates/base.html
@ -2,8 +2,10 @@
 <html>
    <head>
        <meta charset='utf-8'>
+        {% block style %}
        <link rel="stylesheet" type="text/css" href="/static/style.css">
        <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans|IBM+Plex+Sans+Condensed" rel="stylesheet">
+        {% endblock %}
 		<title>{% block title %}COSI D&D Archive{% endblock %}</title>
    </head>
    <body class="content">
--- a/app/templates/marchMap.html
+++ b/app/templates/marchMap.html
@ -0,0 +1,11 @@
+{% extends "base.html" %}
+{% block content %}
+
+<img class="bigmap" src="/static/{{worldname}}.png" alt="themap" usemap="#worldmap">
+
+<map name="worldmap">
+    {% for (name,x,y,r) in imap %}
+    <area shape="circle" coords="{{x}},{{y}},{{r}}" href="/places#{{name}}">
+    {% endfor %}
+</map>
+{% endblock %}
--- a/app/templates/marchWorld.html
+++ b/app/templates/marchWorld.html
@ -1,4 +1,23 @@
 {% extends "base.html" %}
+{% block style %}
+{{super()}}
+<link rel="stylesheet" type="text/css" href="/static/marchStyle.css"> 
+{% endblock %}
 {% block content %}
 <p>{{worldname}}</p>
+<section class="info">
+    <a href="/marches/maps/{{worldname}}">
+        <img class="map" src="/static/{{worldname}}.png" alt="themap">
+    </a>
+    <div class="characters">
+        <ul>
+            {% for name in players %}
+            <li><a href="/characters#{{name}}">{{name}}</a></li>
+            {% endfor %}
+        </ul>
+    </div>
+</section>
+<section class="logs">
+
+</section>
 {% endblock %}