add help page 1
This commit is contained in:
ajuvercr
parent
3257639c48
commit
93542e4e90
11 changed files with 430 additions and 2 deletions
28
backend/src/info.rs
Normal file
28
backend/src/info.rs
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
use rocket::{Route};
|
||||
use rocket::response::Redirect;
|
||||
|
||||
use rocket_contrib::templates::Template;
|
||||
|
||||
use crate::util::*;
|
||||
|
||||
const MAX: usize = 3;
|
||||
|
||||
#[get("/info")]
|
||||
fn help_base() -> Redirect {
|
||||
Redirect::to("/info/1")
|
||||
}
|
||||
|
||||
#[get("/info/<page>")]
|
||||
async fn help(page: usize) -> Template {
|
||||
let context = Context::new_with("info", json!({
|
||||
"page": page,
|
||||
"next": if page + 1 <= MAX { Some(page + 1) } else { None },
|
||||
"prev": if page - 1 > 0 { Some(page - 1) } else { None }
|
||||
}));
|
||||
|
||||
Template::render(format!("help/help_{}", page), &context)
|
||||
}
|
||||
|
||||
pub fn fuel(routes: &mut Vec<Route>) {
|
||||
routes.extend(routes![help_base, help]);
|
||||
}
|
||||
|
|
@ -33,6 +33,7 @@ use futures::future::FutureExt;
|
|||
use mozaic::graph;
|
||||
use mozaic::modules::*;
|
||||
|
||||
mod info;
|
||||
mod planetwars;
|
||||
mod routes;
|
||||
mod util;
|
||||
|
|
@ -80,6 +81,7 @@ async fn main() {
|
|||
|
||||
let mut routes = Vec::new();
|
||||
routes::fuel(&mut routes);
|
||||
info::fuel(&mut routes);
|
||||
|
||||
let tera = Template::custom(|engines: &mut Engines| {
|
||||
engines.tera.register_filter("calc_viewbox", calc_viewbox);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
use async_std::fs;
|
||||
use async_std::prelude::*;
|
||||
|
||||
static NAV: [(&'static str, &'static str); 5] = [
|
||||
static NAV: [(&'static str, &'static str); 6] = [
|
||||
("/", "Home"),
|
||||
("/mapbuilder", "Map Builder"),
|
||||
("/lobby", "Lobby"),
|
||||
("/visualizer", "Visualizer"),
|
||||
("/debug", "Debug Station"),
|
||||
("/info", "Info"),
|
||||
];
|
||||
|
||||
pub static COLOURS: [&'static str; 9] = [
|
||||
|
|
|
|||
91
backend/static/style/arrow.svg
Normal file
91
backend/static/style/arrow.svg
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="99.386711"
|
||||
height="29.601236"
|
||||
viewBox="0 0 26.296067 7.8319937"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14"
|
||||
sodipodi:docname="arrow.svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="7.9195959"
|
||||
inkscape:cx="38.048027"
|
||||
inkscape:cy="-5.4412711"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1416"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="0"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-0.16851637,-270.66042)">
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m -577.5476,85.333334 c 3.02379,0 214.69045,0 214.69045,0"
|
||||
id="path815"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
style="fill:none;stroke:#a35200;stroke-width:1.22894311;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 1.3395437,273.25939 c 9.2763513,7.0714 18.6847893,5.66215 24.6456783,-1.77066"
|
||||
id="path817"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cc" />
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="opacity:1;fill:#a35200;fill-opacity:1;stroke:none;stroke-width:0.63892895;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path819"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="1.583602"
|
||||
sodipodi:cy="272.64246"
|
||||
sodipodi:r1="3.3099983"
|
||||
sodipodi:r2="1.6549991"
|
||||
sodipodi:arg1="1.3695767"
|
||||
sodipodi:arg2="2.4167742"
|
||||
inkscape:flatsided="false"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="m 2.2451531,275.88567 -1.90051627,-2.14595 -1.90051633,-2.14595 2.8087058,-0.57292 2.808706,-0.57292 -0.9081896,2.71887 z"
|
||||
inkscape:transform-center-x="-0.65182533"
|
||||
inkscape:transform-center-y="0.19612064"
|
||||
transform="rotate(34.723149,0.79899229,273.88485)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
122
backend/static/style/help.css
Normal file
122
backend/static/style/help.css
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
.content {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 10%;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.p_left {
|
||||
margin: 5px;
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
clip-path: polygon(100% 0%, 50% 48%, 100% 100%, 50% 100%, 0% 50%, 50% 0);
|
||||
background-color: #ff7f00;
|
||||
}
|
||||
|
||||
.p_right {
|
||||
margin: 5px;
|
||||
height: 70%;
|
||||
width: 100%;
|
||||
background-color: #ff7f00;
|
||||
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 100%, 50% 50%, 0% 0%);
|
||||
}
|
||||
|
||||
.content_wrapper {
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 2em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.help_content_1 {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
justify-content: space-evenly;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.help_content_1_sub {
|
||||
margin: 10px auto;
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
background-image: url(arrow.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.help_content_1_sub>div {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -120%);
|
||||
color: #eee;
|
||||
font-size: 1.5em;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.boxed {
|
||||
border: 3px #A35200 solid;
|
||||
border-radius: 50px;
|
||||
position: relative;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.boxed:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
.boxed>div {
|
||||
margin: 0;
|
||||
font-size: 1.7em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.centering {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.centering>div {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.help_content_1 {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.help_content_1>div {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 20%;
|
||||
background-color: #A35200;
|
||||
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
|
||||
font-weight: bolder;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.arrow>div {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<title>Planetwars</title>
|
||||
<link rel="stylesheet" href="/style/base.css">
|
||||
<link rel="stylesheet" href="/style/style.css">
|
||||
<link rel="shortcut icon" type="image/png" href="favicon.ico">
|
||||
<link rel="shortcut icon" type="image/png" href="/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav">
|
||||
|
|
|
|||
37
backend/templates/help/base.html.tera
Normal file
37
backend/templates/help/base.html.tera
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
{% extends "base" %}
|
||||
|
||||
{% block content %}
|
||||
<link rel="stylesheet" href="/style/help.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
{% if prev %}
|
||||
<a class="pointer" href="/info/{{prev}}">
|
||||
<div class="p_left"></div>
|
||||
<div class="p_left"></div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="pointer"></div>
|
||||
{% endif %}
|
||||
|
||||
<div class="content_wrapper">
|
||||
<div class="header">
|
||||
<p>{% block header %}{% endblock header %}</p>
|
||||
<p>Planetwars 2020</p>
|
||||
</div>
|
||||
<hr style="width:100%">
|
||||
<div class="help_content">
|
||||
{% block help %}{% endblock help %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% if next %}
|
||||
<a class="pointer" href="/info/{{next}}">
|
||||
<div class="p_right"></div>
|
||||
<div class="p_right"></div>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="pointer"></div>
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
42
backend/templates/help/help_1.html.tera
Normal file
42
backend/templates/help/help_1.html.tera
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
{% extends "help/base" %}
|
||||
|
||||
{% block header %}
|
||||
|
||||
How does it work?
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block help %}
|
||||
|
||||
<div class="help_content_1">
|
||||
<div class="boxed centering">
|
||||
<div>
|
||||
Game State
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow centering">
|
||||
<div>
|
||||
stdin
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxed centering">
|
||||
<div>
|
||||
Bot (you!)
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrow centering">
|
||||
<div>
|
||||
stdout
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxed centering">
|
||||
<div>
|
||||
Actions
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=help_content_1_sub>
|
||||
<div>Turn</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
14
backend/templates/help/help_2.html.tera
Normal file
14
backend/templates/help/help_2.html.tera
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{% extends "help/base" %}
|
||||
|
||||
{% block header %}
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block help %}
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
14
backend/templates/help/help_3.html.tera
Normal file
14
backend/templates/help/help_3.html.tera
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{% extends "help/base" %}
|
||||
|
||||
{% block header %}
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block help %}
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
77
backend/templates/index2.html.tera
Normal file
77
backend/templates/index2.html.tera
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
{% extends "base" %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="info">
|
||||
<div>
|
||||
<h1>
|
||||
Planetwars
|
||||
</h1>
|
||||
<p>
|
||||
Welcome to Planetwars. Finally <a target="_blank" href="https://github.com/ZeusWPI/MOZAICP">MOZAICP</a> is ready to be used.
|
||||
</p>
|
||||
<p>
|
||||
Feel free to create games, watch games, join games and build maps.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Lobby</h3>
|
||||
<p>
|
||||
The lobby is the central hub, here you can find active and finished games. When a game is active you can find a key to enter, more on this later.
|
||||
</p>
|
||||
<p>
|
||||
In the lobby you can also create games, you should specify the name of your game, so you can later view it in the Visualizer. Specify a map, maximum number of turns and the number of players.
|
||||
</p>
|
||||
<p>
|
||||
Yes the lobby is ugly, yes, part of the html is refreshed every second. It's opensource, <a target="_blank" href="https://github.com/ZeusWPI/Planetwars">please fix</a> <span class="heart"></span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Visualizer</h3>
|
||||
<p>
|
||||
The visualizer is an interesting peace of software. With Webassembly and WebGL, it is pretty cool. Here you can view played games. When your hardware is too weak the voronoi diagram will disappear for the ultimate performance.
|
||||
</p>
|
||||
<p>
|
||||
Why have an ugly scrollbar on the bottom on of the page? Instead of a scroll bar on the right side? Exellent question, it's opensource, <a target="_blank" href="https://github.com/ZeusWPI/Planetwars">please fix</a> <span class="heart"></span>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Map builder</h3>
|
||||
<p>The mapbuilder is probably the best looking page you will find here, thanks <a target="_blank" href="https://github.com/Arnhoudt">Arnhoudt</a>!</p>
|
||||
<p>Feel free to create as many dick maps as you want. There are a few caveats, first don't forget to name your map in your map name field... Secondly, watch your players, the grey hexagons are neutral planets, they have no owner. Next if you create a map for 2 players, only use the first two colours, that blue and that cyan. If you mix in red, shit will break, I don't know where though.</p>
|
||||
<p>Ever built a map, and not have it show in up the lobby? Well probably something broke, too bad you have no confirmation that something broke, or if your upload was succesful. It's opensource, <a target="_blank" href="https://github.com/ZeusWPI/Planetwars">please fix</a> <span class="heart"></span>.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Debut Station</h3>
|
||||
<p>The debug station is nothing special, it just shows the current state of the underlying MOZAICP infrastructure.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>How to play?</h3>
|
||||
<p>Build a bot! All information about the planetwars game, <a target="_blank" href="https://docs.google.com/presentation/d/1YXr7IsmEiBpRwgAoFPqsjFoKoyXOv9LAhPbsambGX70/edit?usp=sharing">please visit</a> for input output format etc. You can find an example bot <a href="bot/simple.py">here</a>.</p>
|
||||
<p>Optionally, you can create your own custom with the mapbuilder</p>
|
||||
<p>Start a game instance in the lobby, don't forget to name it, watching the visualization afterwars is the only way to know who won atm.</p>
|
||||
<p>Start up your bot and connect to the game instance. In the lobby you will see keys corresponding to players in the game. You can use <a href="bot/runner.py">the botrunner</a> to run your bot, with the command <span style="font-style: italic;">python runner.py --host mozaic.zeus.gent -n {your name} -i {your key} {The command to start you bot}</span>.
|
||||
<p>Invite friends!</p>
|
||||
<p>Bash your friends because you have the superior bot, according to the visualizer</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Contribute!</h3>
|
||||
<p>There is a lot that can still be done. Difficulty ranging from easy, like creating favicon, to very challenging, like add blockly client back from BottleBats.</p>
|
||||
<p>This project ranges from shitty frontend code, to exotic shader language, and back to beautiful* rust. If you would like to help, but are confused due to the lack of documentation, or anything else, hit me up @silvius on <a href="mattermost.zeus.gent">mattermost</a> or anywhere else.</p>
|
||||
<h3><a href="https://github.com/ZeusWPI/Planetwars">Planetwars</a> is made with <span class="heart"></span>.</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
body {
|
||||
height: unset;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
Loading…
Reference in a new issue