Kelder/planet-wars
25
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

semi lobby page

Browse source
This commit is contained in:
ajuvercr 2020-03-26 20:25:33 +01:00
parent 5b2d873571
commit 486612cf88
10 changed files with 218 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/Cargo.toml
View file

@ -19,3 +19,5 @@ serde_json = "1.0"
tracing = "0.1.9"
tracing-futures = "0.1.0"
tracing-subscriber = "0.1.5"
rocket = { git = "https://github.com/SergioBenitez/Rocket", branch = "async" }
rocket_contrib = { git = "https://github.com/SergioBenitez/Rocket", branch = "async", features = ["handlebars_templates", "tera_templates"] }

2
backend/src/routes.rs
View file

@ -64,7 +64,7 @@ async fn maps_get() -> Result<Template, String> {
let maps = get_maps().await?;
let context = Context { name: "Arthur".into(), maps: Some(maps) };
Ok(Template::render("index", &context))
Ok(Template::render("lobby", &context))
}
#[get("/maps/<file>")]

14
backend/static/script/maps.js Normal file
View file

@ -0,0 +1,14 @@
const ids = {};
["map_holder"].forEach(id => ids[id] = document.getElementById(id));
var last_map;
async function handle_map_click(url, event) {
if (last_map) {
last_map.classList.remove("selected");
}
last_map = event.target;
event.target.classList.add("selected");
const c = await fetch(url);
ids["map_holder"].innerHTML = await c.text();
}

8
backend/static/script/script.js
View file

@ -1,8 +0,0 @@
const ids = {};
["map_holder"].forEach(id => ids[id] = document.getElementById(id));
async function handle_map_click(url) {
console.log(url);
const c = await fetch(url);
ids["map_holder"].innerHTML = await c.text();
}

103
backend/static/style/style.css
View file

@ -1,3 +1,104 @@
html,
body {
margin: 0;
padding: 0;
}
.small {
font-size: 2px;
}
}
.main {
display: flex;
width: 100%;
height: 100%;
overflow: hidden;
}
.lobby {
flex-grow: 1;
background-color: red;
}
.input_container {
display: flex;
margin: auto;
width: 90%;
padding: 10px;
}
.input_container label {
font-size: normal;
width: 30%;
}
.input_container input {
font-size: small;
width: 70%;
}
.number label {
width: 60%;
}
.number input {
width: 40%;
text-align: right;
}
.map_select {
overflow-y: scroll;
flex-shrink: 5;
width: 75%;
height: 100%;
}
.map {
padding: 5px;
background-color: lightgray;
color: black;
}
.selected {
background-color: #ff7f00;
}
.map:hover {
filter: brightness(80%);
}
.creator {
background-color: #333;
display: flex;
flex-direction: column;
height: 100vh;
min-width: 300px;
/* width: 25%; */
justify-content: space-between;
align-items: center;
color: #aaa;
}
.creator h1 {
text-align: center;
margin: 0;
}
.creator button {
margin-bottom: 10px;
width: 80%;
padding: 5px;
}
#map_holder {
width: 100%;
height: 300px;
background-color: #111;
}
svg {
left: 0;
top: 0;
width: 100%;
height: 100%;
}

60
backend/static/test.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main">
<div class="lobby"></div>
<div class="creator">
<h1>Start new game</h1>
<div class="input_container">
<label for="name">Name:</label>
<input id="name" type="text"></input>
</div>
<label>Select Map</label>
<div class="map_select">
<div class="map" onclick="handle_map_click('maps/map.json', event)"> map </div>
<div class="map" onclick="handle_map_click('maps/hex_up.json', event)"> hex_up </div>
<div class="map" onclick="handle_map_click('maps/spiral2.json', event)"> spiral2 </div>
<div class="map" onclick="handle_map_click('maps/spiral.json', event)"> spiral </div>
<div class="map" onclick="handle_map_click('maps/hungergames.json', event)"> hungergames </div>
<div class="map" onclick="handle_map_click('maps/hex.json', event)"> hex </div>
<div class="map" onclick="handle_map_click('maps/test_map.json', event)"> test_map </div>
<div class="map" onclick="handle_map_click('maps/pietmap.json', event)"> pietmap </div>
<div class="map" onclick="handle_map_click('maps/large.json', event)"> large </div>
</div>
<div class="input_container number">
<label for="turns">Max turns:</label>
<input id="turns" type="number" value=200></input>
</div>
<div class="input_container number">
<label for="nop">Number of players:</label>
<input id="nop" type="number" value=2></input>
</div>
<button>
Start
</button>
<div id="map_holder">
</div>
</div>
</div>
<script src="script/script.js"></script>
</body>
</html>

5
backend/templates/base.html.tera
View file

@ -7,10 +7,5 @@
</head>
<body>
{% block content %}{% endblock content %}
<div style="width: 50%" id="map_holder">
</div>
<script src="script/script.js"></script>
</body>
</html>

34
backend/templates/lobby.html.tera Normal file
View file

@ -0,0 +1,34 @@
{% extends "base" %}
{% block content %}
<div class="main">
<div class="lobby"></div>
<div class="creator">
<h1>Start new game</h1>
<div class="input_container">
<label for="name">Name:</label>
<input id="name" type="text"></input>
</div>
<label>Select Map</label>
<div class="map_select">
{% include "maps" %}
</div>
<div class="input_container number">
<label for="turns">Max turns:</label>
<input id="turns" type="number" value=200></input>
</div>
<div class="input_container number">
<label for="nop">Number of players:</label>
<input id="nop" type="number" value=2></input>
</div>
<button>
Start
</button>
<div id="map_holder">
</div>
</div>
</div>
<script src="script/maps.js"></script>
{% endblock %}

9
backend/templates/map_partial.html.tera
View file

@ -1,8 +1,7 @@
<p> Map rendering </p>
<svg preserveAspectRatio="none" viewBox="{{ planets | calc_viewbox}}" xmlns="http://www.w3.org/2000/svg" fill="grey">
{% for planet in planets %}
<circle cx="{{ planet.x }}" cy="{{ planet.y }}" r="0.5" fill="{% if planet.owner %}{{planet.owner | get_colour}}{% else %}grey{%endif%}"/>
<text x="{{planet.x}}" y="{{planet.y + 2}}" class="small" dominant-baseline="middle" text-anchor="middle">{{planet.name}}</text>
{% endfor %}
{% for planet in planets -%}
<circle cx="{{ planet.x }}" cy="{{ planet.y }}" r="0.5" fill="{% if planet.owner %}{{planet.owner | get_colour}}{% else %}grey{%endif%}"/>
{# <text x="{{planet.x}}" y="{{planet.y + 2}}" class="small" dominant-baseline="middle" text-anchor="middle">{{planet.name}}</text> #}
{% endfor -%}
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 458 B

After

Width:  |  Height:  |  Size: 451 B

2
backend/templates/maps.html.tera
View file

@ -1,3 +1,3 @@
{% for m in maps %}
<p class="map" onclick="handle_map_click('{{m.url | safe }}')"> {{ m.name }} </p>
<div class="map" onclick="handle_map_click('{{m.url | safe }}', event)"> {{ m.name }} </div>
{% endfor %}