Browse Source

Create frontend interface for a marches world

marches
Josh Gordon 4 years ago
parent
commit
cf0598b094
  1. 10
      app/routes.py
  2. BIN
      app/static/Test1.png
  3. BIN
      app/static/Test2.png
  4. 22
      app/static/marchStyle.css
  5. 2
      app/templates/base.html
  6. 11
      app/templates/marchMap.html
  7. 19
      app/templates/marchWorld.html

10
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:

BIN
app/static/Test1.png

After

Width: 1920  |  Height: 1080  |  Size: 25 KiB

BIN
app/static/Test2.png

After

Width: 1920  |  Height: 1080  |  Size: 26 KiB

22
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;
}

2
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">

11
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 %}

19
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 %}
Loading…
Cancel
Save