Commit b27e7eb4 authored by Dominik Wittwer's avatar Dominik Wittwer
Browse files

ui improvements

parent 3f41c139
Pipeline #12892 passed with stages
in 4 minutes and 34 seconds
......@@ -5,10 +5,12 @@
<meta name="google" value="notranslate">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, user-scalable=no">
<title>Blockly Games : Pond</title>
<link rel="stylesheet" href="common/common.css">
<link rel="stylesheet" href="pond/style.css">
<link rel="stylesheet" href="pond/duck/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="third-party/ace/ace.js"></script>
<script src="common/boot.js"></script>
<style>
......
......@@ -28,30 +28,175 @@
*/
{template .start}
{call .messages /}
<div class="main-wrapper">
<div class="game-wrapper">
<h1>
{call BlocklyGames.soy.titleSpan}
{param appName}
{msg meaning="Games.pond" desc="IBID"}Pond{/msg}
{/param}
{/call}
</h1>
{call Pond.soy.visualization /}
<div class="container-fluid">
<div class="d-flex justify-content-center w-100">
<div class="game-wrapper ">
<h1 id="title" class="text-center">
POND CHALLENGE
</h1>
{call Pond.soy.visualization /}
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col-md-8 col-lg-6 col-xl-4">
<div class="config-table">
<h4>Players</h4>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Player 1</label>
<input type="text" class="form-control" id="player1" value="BOT"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Player 2</label>
<input type="text" class="form-control" id="player2" value="BOT"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Player 3</label>
<input type="text" class="form-control" id="player3" value="BOT"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Player 4</label>
<input type="text" class="form-control" id="player4" value="BOT"/>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-secondary mr-3" data-toggle="modal" data-target="#configModal">
Configuration
</button>
<button type="button" class="btn btn-secondary mr-3" data-toggle="modal" data-target="#statsModal">
Stats
</button>
<button class="d-none" id="docsButton" title="{msg meaning="Pond.docsTooltip" desc="Tooltip for the button that opens the language reference documentation."}Display the language documentation.{/msg}">
{{msg meaning="Pond.documentation" desc="Text on the button that opens the language reference documentation.\n{lb}{lb}Identical|Documentation{rb}{rb}"}}Documentation{{/msg}}
</button>
<button id="runButton" class="btn btn-primary" title="{msg meaning="Games.runTooltip" desc="IBID"}Run the program you wrote.{/msg}">
<img src="common/1x1.gif" class="run icon21"> {msg meaning="Games.runProgram" desc="IBID"}Run Program{/msg}
</button>
<button id="resetButton" class="btn btn-danger" style="display: none" title="{msg meaning="Games.resetTooltip" desc="IBID"}Stop the program and reset the level.{/msg}">
<img src="common/1x1.gif" class="stop icon21"> {msg meaning="Games.resetProgram" desc="IBID"}Reset{/msg}
</button>
</div>
</div>
</div>
</div>
</div>
<div id="stats" style="padding: 20px;">
<h2>Bot stats</h2>
<table id="stats-table">
</table>
</div>
<div class="modal fade" id="configModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Configuration</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Speed</label>
<input class="game-config form-control" type="number" step="1" min="1" id="GAME_FPS" value="50"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Rounds</label>
<input class="game-config form-control" type="number" step="1" min="1" id="ROUND_COUNT" value="5"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Canon reload time</label>
<input class="game-config form-control" type="number" step=".1" min="0.1" id="RELOAD_TIME" value="0.5"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Player speed</label>
<input class="game-config form-control" type="number" step=".1" min="0.1" id="AVATAR_SPEED" value="1"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Missile speed</label>
<input class="game-config form-control" type="number" step=".1" min="0.1" id="MISSILE_SPEED" value="3"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Acceleration</label>
<input class="game-config form-control" type="number" step=".1" min="0.1" id="ACCELERATION" value="5"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Collision radius</label>
<input class="game-config form-control" type="number" step="1" min="1" id="COLLISION_RADIUS" value="5"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Collision damage</label>
<input class="game-config form-control" type="number" step="1" min="1" id="COLLISION_DAMAGE" value="3"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Max round length [ms]</label>
<input class="game-config form-control" type="number" step="5000" min="30000" id="TIME_LIMIT" value="300000"/>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="result" style="padding: 20px;">
<h2>Results</h2>
<table id="result-table">
</table>
</div>
<div class="modal fade" id="statsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Stats</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="stats" class="w-100">
<h2>Bot stats</h2>
<table id="stats-table" class="w-100">
</table>
</div>
<div id="result" class="w-100">
<h2>Results</h2>
<table id="result-table" class="w-100">
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{/template}
......@@ -43,7 +43,7 @@ Pond.endBattle = function(survivors) {
// Update Bot Stats table - winner takes it all for now
Pond.Battle.BOT_STATS[Pond.Battle.RANK[0].name] += 1;
var statsTable = "<table>\n<tr><th>Bot</th><th>Points</th></tr>";
var statsTable = "<table>\n<tr><th>Bot</th><th align='right'>Points</th></tr>";
for (var name in Pond.Battle.BOT_STATS) {
statsTable += "<tr></tr><td>" + name + "</td><td align='right'>" + Pond.Battle.BOT_STATS[name] + "</td></tr>\n";
}
......
......@@ -42,106 +42,6 @@
</tbody>
</table>
<table class="config-table" width="400">
<tr>
<td width="50%">
<h4>Players</h4>
<td>
<td width="50%">
<td>
</tr>
<tr>
<td width="50%">
<label>Player 1</label>
<input type="text" id="player1" value="BOT"/>
<td>
<td width="50%">
<label>Player 2</label>
<input type="text" id="player2" value="BOT"/>
<td>
</tr>
<tr>
<td width="50%">
<label>Player 3</label>
<input type="text" id="player3" value="BOT"/>
<td>
<td width="50%">
<label>Player 4</label>
<input type="text" id="player4" value="BOT"/>
<td>
</tr>
<tr>
<td width="50%">
<h4>Configuration</h4>
<td>
<td width="50%">
<td>
</tr>
<tr>
<td width="50%">
<label>Speed</label>
<input class="game-config" type="number" step="1" min="1" id="GAME_FPS" value="50"/>
<td>
<td width="50%">
<label>Rounds</label>
<input class="game-config" type="number" step="1" min="1" id="ROUND_COUNT" value="5"/>
<td>
</tr>
<tr>
<td width="50%">
<label>Canon reload time</label>
<input class="game-config" type="number" step=".1" min="0.1" id="RELOAD_TIME" value="0.5"/>
<td>
<td width="50%">
<label>Player speed</label>
<input class="game-config" type="number" step=".1" min="0.1" id="AVATAR_SPEED" value="1"/>
<td>
</tr>
<tr>
<td width="50%">
<label>Missile speed</label>
<input class="game-config" type="number" step=".1" min="0.1" id="MISSILE_SPEED" value="3"/>
<td>
<td width="50%">
<label>Acceleration</label>
<input class="game-config" type="number" step=".1" min="0.1" id="ACCELERATION" value="5"/>
<td>
</tr>
<tr>
<td width="50%">
<label>Collision radius</label>
<input class="game-config" type="number" step="1" min="1" id="COLLISION_RADIUS" value="5"/>
<td>
<td width="50%">
<label>Collision damage</label>
<input class="game-config" type="number" step="1" min="1" id="COLLISION_DAMAGE" value="3"/>
<td>
</tr>
<tr>
<td width="50%">
<label>Max round length [ms]</label>
<input class="game-config" type="number" step="5000" min="30000" id="TIME_LIMIT" value="300000"/>
<td>
</tr>
</table>
<table width="400">
<tr>
<td style="width: 190px; text-align: center; vertical-align: top;">
<button id="docsButton" title="{msg meaning="Pond.docsTooltip" desc="Tooltip for the button that opens the language reference documentation."}Display the language documentation.{/msg}">
{{msg meaning="Pond.documentation" desc="Text on the button that opens the language reference documentation.\n{lb}{lb}Identical|Documentation{rb}{rb}"}}Documentation{{/msg}}
</button>
</td>
<td>
<button id="runButton" class="primary" title="{msg meaning="Games.runTooltip" desc="IBID"}Run the program you wrote.{/msg}">
<img src="common/1x1.gif" class="run icon21"> {msg meaning="Games.runProgram" desc="IBID"}Run Program{/msg}
</button>
<button id="resetButton" class="primary" style="display: none" title="{msg meaning="Games.resetTooltip" desc="IBID"}Stop the program and reset the level.{/msg}">
<img src="common/1x1.gif" class="stop icon21"> {msg meaning="Games.resetProgram" desc="IBID"}Reset{/msg}
</button>
</td>
</tr>
</table>
<div id="dialogDocs">
<img src="common/1x1.gif" class="close icon21" id="closeDocs">
<iframe id="frameDocs"></iframe>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment