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

color indicators on ducks, layout improvements, styling, results fix

parent 329edaf0
Pipeline #13457 passed with stages
in 4 minutes and 42 seconds
......@@ -28,6 +28,31 @@
display: flex;
align-items: flex-start;
}
#display {
outline: 1px solid #b8b8b8;
border: 20px solid #f8f8f8;
}
.avatarStatName {
color: black;
position: static;
border-bottom: 1px solid #b8b8b8;
}
.avatarStatHealth {
height: 25px !important;
position: static;
margin-bottom: 10px;
}
.players-container {
position: fixed;
height: 800px;
right: 0;
border: 3px double #b8b8b8;
border-right: 0;
width: 200px;
}
body {
background-color: #e8e8e8;
}
</style>
</head>
<body>
......
......@@ -34,14 +34,16 @@
{call .messages /}
<div class="container-fluid">
<div class="d-flex justify-content-center w-100">
<div class="game-wrapper ">
<h1 id="title" class="text-center">
<div>
<h1 id="title" class="text-center my-3">
POND CHALLENGE
</h1>
{call Pond.soy.visualization /}
<div class="game-wrapper d-flex">
{call Pond.soy.visualization /}
</div>
</div>
</div>
<div class="row justify-content-center mt-4">
<div class="row justify-content-center mt-3">
<div style="width: 800px;">
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-secondary mr-3" data-toggle="modal" data-target="#statsModal">
......@@ -57,10 +59,10 @@
{{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}
{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}
{msg meaning="Games.resetProgram" desc="IBID"}Reset{/msg}
</button>
</div>
</div>
......@@ -159,14 +161,14 @@
</button>
</div>
<div class="modal-body">
<div id="stats" class="w-100">
<div id="stats" class="w-100 mt-2">
<h2>Bot stats</h2>
<table id="stats-table" class="w-100">
</table>
</div>
<div id="result" class="w-100">
<div id="result" class="w-100 mt-5 mb-4">
<h2>Results</h2>
<table id="result-table" class="w-100">
<table id="result-table" class="w-100 mb-4">
</table>
</div>
</div>
......
......@@ -52,13 +52,20 @@ Pond.endBattle = function(survivors) {
// Update Results table
var round = Pond.Battle.RANK;
var resultRow = "<tr><td>" + (Pond.Battle.ROUND_RANKS.length) + "</td><td>" + round[0].name + "</td><td>" + round[1].name + "</td><td>" + round[2].name + "</td><td>" + round[3].name + "</td></tr>";
//var resultRow = "<tr><td>" + (Pond.Battle.ROUND_RANKS.length) + "</td><td>" + round[0].name + "</td><td>" + round[1].name + "</td><td>" + round[2].name + "</td><td>" + round[3].name + "</td></tr>";
var resultRow = "<tr><td>" + (Pond.Battle.ROUND_RANKS.length) + "</td>";
for (var i = 0; i < round.length; i++) {
resultRow += "<td>" + round[i].name + "</td>";
}
resultRow += "</tr>";
$("#result-table").append(resultRow);
if (Pond.Battle.ROUND_RANKS.length < Pond.Battle.ROUND_COUNT) {
Pond.execute();
} else {
// completed last round
$("#statsModal").modal("show");
}
};
......@@ -155,11 +162,6 @@ Pond.runButtonClick = function(e) {
resetButton.style.display = 'inline';
Pond.Battle.ROUND_RANKS = [];
// Init bot results and stats
for (var i=0; i < Pond.Battle.AVATARS.length; i++) {
Pond.Battle.BOT_STATS[Pond.Battle.AVATARS[i].name] = 0;
}
$("#result-table").html("<tr><th>Round</th><th>#1</th><th>#2</th><th>#3</th><th>#4</th></tr>");
var config_fields = $(".game-config");
$.each(config_fields, function() {
......@@ -246,6 +248,17 @@ Pond.runButtonClick = function(e) {
}
}
// Init bot results and stats
for (var i=0; i < Pond.Battle.AVATARS.length; i++) {
Pond.Battle.BOT_STATS[Pond.Battle.AVATARS[i].name] = 0;
}
var resultFirstRow = "<tr><td>Round</td>";
for (var i = 0; i < Pond.Battle.AVATARS.length; i++) {
resultFirstRow += "<td>#" + i + "</td>";
}
resultFirstRow += "</tr>";
$("#result-table").html(resultFirstRow);
var duckCodesAjax = [];
for (var i = 0; i < Pond.Battle.AVATARS.length; i++) {
duckCodesAjax.push(Pond.Battle.AVATARS[i].code_());
......
......@@ -45,7 +45,7 @@ Pond.Visualization.EXPLOSIONS = [];
Pond.Visualization.SPRITES = new Image();
Pond.Visualization.SPRITES.src = 'pond/sprites.png';
Pond.Visualization.COLOURS = ['#ffde00', '#c90015', '#166c0b', '#11162a', '#0000ff', '#00ffde', '#8a00ff', '#ff7200'];
Pond.Visualization.COLOURS = ['#f6ba00', '#c90015', '#166c0b', '#0000ff', '#00ffde', '#8a00ff', '#ff7200', '#11162a'];
Pond.Visualization.pid = 0;
......@@ -107,24 +107,22 @@ Pond.Visualization.reset = function() {
// <div class="avatarStatName">Rabbit</div>
// <div>&nbsp;</div>
// </td>
var td = document.createElement('td');
td.style.borderColor = hexColour;
var div = document.createElement('div');
div.className = 'avatarStatHealth';
div.style.background = hexColour;
avatar.visualizationHealth = div;
healthDivs[i] = div;
td.appendChild(div);
var td = document.createElement('div');
// NAME
var div = document.createElement('div');
div.className = 'avatarStatName';
var text = document.createTextNode(avatar.name);
div.appendChild(text);
nameDivs[i] = div;
td.appendChild(div);
// HEALT
var div = document.createElement('div');
var text = document.createTextNode('\u00a0');
div.appendChild(text);
div.className = 'avatarStatHealth';
div.style.background = hexColour;
avatar.visualizationHealth = div;
healthDivs[i] = div;
td.appendChild(div);
// ADD TO PLAYER
row.appendChild(td);
}
for (var i = 0, div; div = nameDivs[i]; i++) {
......@@ -238,6 +236,13 @@ Pond.Visualization.display_ = function() {
-Pond.Visualization.AVATAR_HALF_SIZE,
Pond.Visualization.AVATAR_SIZE,
Pond.Visualization.AVATAR_SIZE);
// Player color
ctx.beginPath();
ctx.fillStyle = Pond.Visualization.COLOURS[avatar.visualizationIndex];
ctx.arc(0, 0, 10, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
// Draw avatar head.
// Offset the head from the middle.
......@@ -302,6 +307,7 @@ Pond.Visualization.display_ = function() {
ctx.arc(missileX, missileY, Pond.Visualization.MISSILE_RADIUS,
0, Math.PI * 2, true);
ctx.closePath();
console.log(missile.avatar)
ctx.fillStyle = Pond.Visualization.COLOURS[
missile.avatar.visualizationIndex % Pond.Visualization.COLOURS.length];
ctx.fill();
......
......@@ -36,13 +36,12 @@
<canvas id="display" width="800" height="800"></canvas>
</div>
<table id="avatarStatTable">
<tbody>
<tr id="avatarStatRow"></tr>
</tbody>
</table>
<div class="p-3 bg-light players-container">
<h3 class="mb-3">Players</h3>
<div id="avatarStatRow" class="d-flex flex-column w-100"></div>
</div>
<div id="dialogDocs">
<div id="dialogDocs" class="d-none">
<img src="common/1x1.gif" class="close icon21" id="closeDocs">
<iframe id="frameDocs"></iframe>
</div>
......
Supports Markdown
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