semi lobby page
This commit is contained in:
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-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"] }
|
||||
|
|
|
@ -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
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 {
|
||||
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>
|
||||
<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
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">
|
||||
{% 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>
|
||||
|
|
Before Width: | Height: | Size: 458 B After Width: | Height: | Size: 451 B |
|
@ -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 %}
|
||||
|
|
Loading…
Reference in a new issue