make page informative
This commit is contained in:
ajuvercr
parent
09711466ac
commit
56a4d806cb
4 changed files with 213 additions and 11 deletions
|
|
@ -56,3 +56,97 @@ body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
max-width: 80%;
|
||||||
|
width: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info a {
|
||||||
|
/* color: inherit; */
|
||||||
|
/* filter: saturate(100%); */
|
||||||
|
|
||||||
|
/* filter: invert(75%); */
|
||||||
|
color: #ff7f00;
|
||||||
|
filter: brightness(0.5);
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info div {
|
||||||
|
color: antiquewhite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info div h3, .info div h1 {
|
||||||
|
color: #ff7f00;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info div p {
|
||||||
|
/* color: #ff7f00; */
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes heartbeat
|
||||||
|
{
|
||||||
|
0%
|
||||||
|
{
|
||||||
|
transform: rotate(-45deg) scale( .75 );
|
||||||
|
}
|
||||||
|
20%
|
||||||
|
{
|
||||||
|
transform: rotate(-45deg) scale( 1 );
|
||||||
|
}
|
||||||
|
40%
|
||||||
|
{
|
||||||
|
transform: rotate(-45deg) scale( .75 );
|
||||||
|
}
|
||||||
|
60%
|
||||||
|
{
|
||||||
|
transform: rotate(-45deg) scale( 1 );
|
||||||
|
}
|
||||||
|
80%
|
||||||
|
{
|
||||||
|
transform: rotate(-45deg) scale( .75 );
|
||||||
|
}
|
||||||
|
100%
|
||||||
|
{
|
||||||
|
transform: rotate(-45deg) scale( .75 );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart {
|
||||||
|
background-color: rgb(196, 0, 0);
|
||||||
|
display: inline-block;
|
||||||
|
height: 20px;
|
||||||
|
margin: -7px 10px;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
width: 20px;
|
||||||
|
|
||||||
|
filter: none;
|
||||||
|
|
||||||
|
animation: heartbeat 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart:before,
|
||||||
|
.heart:after {
|
||||||
|
content: "";
|
||||||
|
background-color: rgb(196, 0, 0);
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 20px;
|
||||||
|
position: absolute;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart:before {
|
||||||
|
top: -10px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heart:after {
|
||||||
|
left: 10px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,60 @@
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<h1>Hello {{ name }}!</h1>
|
<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 Visaulizer. 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>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>
|
||||||
|
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
54
backend/templates/info.html
Normal file
54
backend/templates/info.html
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<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 Visaulizer. 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>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>
|
||||||
|
|
@ -4,9 +4,13 @@
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="style/mapbuilder.css">
|
<link rel="stylesheet" type="text/css" href="style/mapbuilder.css">
|
||||||
|
|
||||||
<div class="grid"></div>
|
<div class="grid_wrapper"><div class="grid"></div></div>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
{# <h2>Controls</h2> #}
|
<div class="boxed">
|
||||||
|
<label>Name for map</label>
|
||||||
|
<input id="mapName" type="text" placeholder="Map Name"></input>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="boxed">
|
<div class="boxed">
|
||||||
<label>How many squares</label>
|
<label>How many squares</label>
|
||||||
<input class="amountOfSquares" type="number" min="10" max="50" value="20"></input>
|
<input class="amountOfSquares" type="number" min="10" max="50" value="20"></input>
|
||||||
|
|
@ -17,7 +21,7 @@
|
||||||
<label for="currentName">Setting parameters</label>
|
<label for="currentName">Setting parameters</label>
|
||||||
<div class="input_container">
|
<div class="input_container">
|
||||||
<label for="currentName">Name:</label>
|
<label for="currentName">Name:</label>
|
||||||
<input id="currentName" type="text" placeholder="name"></input>
|
<input id="currentName" type="text" placeholder="Planet Name"></input>
|
||||||
</div>
|
</div>
|
||||||
<div class="input_container">
|
<div class="input_container">
|
||||||
<label for="currentShipCount">Ship count:</label>
|
<label for="currentShipCount">Ship count:</label>
|
||||||
|
|
@ -41,14 +45,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="boxed">
|
|
||||||
<label>Name for map</label>
|
|
||||||
<input id="mapName" type="text" placeholder="name"></input>
|
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<button class="confirm">Send Map</button>
|
<button class="confirm">Send Map</button>
|
||||||
<button class="clear">Clear Map</button>
|
<button class="clear">Clear Map</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<p id="error_field" class="hidden">
|
<p id="error_field" class="hidden">
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue