semi lobby page
This commit is contained in:
ajuvercr
parent
5b2d873571
commit
486612cf88
10 changed files with 218 additions and 21 deletions
|
|
@ -19,3 +19,5 @@ serde_json = "1.0"
|
||||||
tracing = "0.1.9"
|
tracing = "0.1.9"
|
||||||
tracing-futures = "0.1.0"
|
tracing-futures = "0.1.0"
|
||||||
tracing-subscriber = "0.1.5"
|
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"] }
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,7 @@ async fn maps_get() -> Result<Template, String> {
|
||||||
let maps = get_maps().await?;
|
let maps = get_maps().await?;
|
||||||
|
|
||||||
let context = Context { name: "Arthur".into(), maps: Some(maps) };
|
let context = Context { name: "Arthur".into(), maps: Some(maps) };
|
||||||
Ok(Template::render("index", &context))
|
Ok(Template::render("lobby", &context))
|
||||||
}
|
}
|
||||||
|
|
||||||
#[get("/maps/<file>")]
|
#[get("/maps/<file>")]
|
||||||
|
|
|
||||||
14
backend/static/script/maps.js
Normal file
14
backend/static/script/maps.js
Normal 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();
|
||||||
|
}
|
||||||
|
|
@ -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();
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +1,104 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.small {
|
.small {
|
||||||
font-size: 2px;
|
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
60
backend/static/test.html
Normal 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>
|
||||||
|
|
@ -7,10 +7,5 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% block content %}{% endblock content %}
|
{% block content %}{% endblock content %}
|
||||||
|
|
||||||
<div style="width: 50%" id="map_holder">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="script/script.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
34
backend/templates/lobby.html.tera
Normal file
34
backend/templates/lobby.html.tera
Normal 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 %}
|
||||||
|
|
@ -1,8 +1,7 @@
|
||||||
|
|
||||||
<p> Map rendering </p>
|
|
||||||
<svg preserveAspectRatio="none" viewBox="{{ planets | calc_viewbox}}" xmlns="http://www.w3.org/2000/svg" fill="grey">
|
<svg preserveAspectRatio="none" viewBox="{{ planets | calc_viewbox}}" xmlns="http://www.w3.org/2000/svg" fill="grey">
|
||||||
{% for planet in planets %}
|
{% 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%}"/>
|
<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>
|
{# <text x="{{planet.x}}" y="{{planet.y + 2}}" class="small" dominant-baseline="middle" text-anchor="middle">{{planet.name}}</text> #}
|
||||||
{% endfor %}
|
{% endfor -%}
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 458 B After Width: | Height: | Size: 451 B |
|
|
@ -1,3 +1,3 @@
|
||||||
{% for m in maps %}
|
{% 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 %}
|
{% endfor %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue