Commit 031b42cd authored by Piers Williams's avatar Piers Williams

Major works to the UI, and some functionality

parent 7018c9b7
Pipeline #862 passed with stages
in 22 seconds
/*-- Chart --*/
.c3 svg {
font: 10px sans-serif;
-webkit-tap-highlight-color: transparent; }
.c3 path, .c3 line {
fill: none;
stroke: #000; }
.c3 text {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
shape-rendering: crispEdges; }
.c3-chart-arc path {
stroke: #fff; }
.c3-chart-arc text {
fill: #fff;
font-size: 13px; }
/*-- Axis --*/
/*-- Grid --*/
.c3-grid line {
stroke: #aaa; }
.c3-grid text {
fill: #aaa; }
.c3-xgrid, .c3-ygrid {
stroke-dasharray: 3 3; }
/*-- Text on Chart --*/
.c3-text.c3-empty {
fill: #808080;
font-size: 2em; }
/*-- Line --*/
.c3-line {
stroke-width: 1px; }
/*-- Point --*/
.c3-circle._expanded_ {
stroke-width: 1px;
stroke: white; }
.c3-selected-circle {
fill: white;
stroke-width: 2px; }
/*-- Bar --*/
.c3-bar {
stroke-width: 0; }
.c3-bar._expanded_ {
fill-opacity: 0.75; }
/*-- Focus --*/
.c3-target.c3-focused {
opacity: 1; }
.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
stroke-width: 2px; }
.c3-target.c3-defocused {
opacity: 0.3 !important; }
/*-- Region --*/
.c3-region {
fill: steelblue;
fill-opacity: .1; }
/*-- Brush --*/
.c3-brush .extent {
fill-opacity: .1; }
/*-- Select - Drag --*/
/*-- Legend --*/
.c3-legend-item {
font-size: 12px; }
.c3-legend-item-hidden {
opacity: 0.15; }
.c3-legend-background {
opacity: 0.75;
fill: white;
stroke: lightgray;
stroke-width: 1; }
/*-- Title --*/
.c3-title {
font: 14px sans-serif; }
/*-- Tooltip --*/
.c3-tooltip-container {
z-index: 10; }
.c3-tooltip {
border-collapse: collapse;
border-spacing: 0;
background-color: #fff;
empty-cells: show;
-webkit-box-shadow: 7px 7px 12px -9px #777777;
-moz-box-shadow: 7px 7px 12px -9px #777777;
box-shadow: 7px 7px 12px -9px #777777;
opacity: 0.9; }
.c3-tooltip tr {
border: 1px solid #CCC; }
.c3-tooltip th {
background-color: #aaa;
font-size: 14px;
padding: 2px 5px;
text-align: left;
color: #FFF; }
.c3-tooltip td {
font-size: 13px;
padding: 3px 6px;
background-color: #fff;
border-left: 1px dotted #999; }
.c3-tooltip td > span {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 6px; }
.c3-tooltip td.value {
text-align: right; }
/*-- Area --*/
.c3-area {
stroke-width: 0;
opacity: 0.2; }
/*-- Arc --*/
.c3-chart-arcs-title {
dominant-baseline: middle;
font-size: 1.3em; }
.c3-chart-arcs .c3-chart-arcs-background {
fill: #e0e0e0;
stroke: none; }
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
fill: #000;
font-size: 16px; }
.c3-chart-arcs .c3-chart-arcs-gauge-max {
fill: #777; }
.c3-chart-arcs .c3-chart-arcs-gauge-min {
fill: #777; }
.c3-chart-arc .c3-gauge-value {
fill: #000;
/* font-size: 28px !important;*/ }
.c3 svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:grey;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-title{font:14px sans-serif}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #ccc}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#fff}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max{fill:#777}.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}
\ No newline at end of file
body { padding-top: 70px; }
.list-group {
border-style:solid;
border-width:2px;
border-color: #CCC;
border-radius:9px;
}
.agentSide ul.pull-right{
margin-top:20px;
}
.agentSide h2{
float:left;
}
ul li.list-group-item{
padding-left:30px;
text-align: left;
}
ul li.list-group-item button.btn-info{
margin-top:-8px;
}
i.fa-li{
position:inherit;
}
/*
Rule CSS
*/
.play {
background-color: #EEEEEC;
}
.discard{
background-color: #EEEEEC;
}
.tell{
background-color: #EEEEEC;
}
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
function setupDoc(){
$(".doc").on('click', function(e) {
var frame = $('#docFrame');
$.get($(this).data("src"), function(data){
console.log(data);
var helpText = $(data).find(".description .block");
console.log(helpText);
$("#docText").text(helpText);
});
frame.attr("width", 800);
frame.attr("height", 600);
frame.attr("src", $(this).attr('data-src'));
});
}
function makeRuleItem(list, index, value){
var type = "unknown";
var icon = null;
if(value.tags.indexOf("play") != -1){
type = "play";
icon = "play";
}else if(value.tags.indexOf("discard") != -1){
type = "discard";
icon = "trash";
}else if(value.tags.indexOf("tell") != -1){
type = "tell";
icon = "comment";
}
/*
font awesome provides:
random, info, lightbulb-o, recycle, times, trash, arrow-right
*/
var html = '<li class="list-group-item ' + type + '">';
html = html + '<i class="fa-li fa fa-' + icon + '"></i>';
html = html + value.name;
html = html + '<span style="display: none" class="ruleid">' + value.id + '</span>';
html = html + '<button type="button" class="btn btn-info pull-right doc" data-toggle="modal" data-target="#docModal" data-src="http://iggi.fosslab.uk/hanabi/apidocs/' + value.doc + '">Info</button>'
html = html + '</li>';
list.append(html);
}
function loadAndDisplay(){
$.getJSON("assets/js/rules.json", function(json){
json.sort(function(a, b){
if(a.name < b.name) return -1;
if(a.name > b.name) return 1;
return 0;
});
var list = $("#ruleset");
$.each(json, function(index, value){makeRuleItem(list, index, value);});
setupDoc();
});
}
function updateGraph(json){
var data = [["Your Agent"]];
$.each(data, function(index, value){
for(var i = 0; i < 26; i++) value.push(0);
});
$.each(json, function(index, value){
data[0][value.score + 1]+= 1;
});
chart.load({
columns: data
});
}
function doStuffGraph(){
if(chart == null){
chart = c3.generate({
bindto: '#graph',
data: {
columns: [],
type:"bar"
},
axis:{
y:{
label:{
text:"Frequency",
position: "outer-middle"
}
},
x:{
label:{
text:"Score",
position: "outer-center"
}
}
}
});
}
//$.getJSON("assets/js/blankGraphData.json", updateGraph);
}
var chart = null;
$(document).ready(function(){loadAndDisplay();doStuffGraph();});
[{"id":0,"name":"Discard Randomly","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/DiscardRandomly.html","tags":["discard","stochastic"]},{"id":1,"name":"Discard If Certain","doc":"com/fossgalaxy/games/fireworks/ai/rule/simple/DiscardIfCertain.html","tags":["discard"]},{"id":2,"name":"Discard Safe Card","doc":"com/fossgalaxy/games/fireworks/ai/rule/DiscardSafeCard.html","tags":["discard"]},{"id":3,"name":"Discard Oldest First","doc":"com/fossgalaxy/games/fireworks/ai/rule/DiscardOldestFirst.html","tags":["discard"]},{"id":4,"name":"Discard Useless Card","doc":"com/fossgalaxy/games/fireworks/ai/rule/DiscardUselessCard.html","tags":["discard"]},{"id":5,"name":"Osawa Discard","doc":"com/fossgalaxy/games/fireworks/ai/osawa/rules/OsawaDiscard.html","tags":["discard"]},{"id":6,"name":"Discard Least Likely To Be Necessary","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/DiscardLeastLikelyToBeNecessary.html","tags":["discard"]},{"id":7,"name":"Discard Probably Useless Card : 0.75","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/DiscardProbablyUselessCard.html","tags":["discard"]},{"id":8,"name":"Tell Playable Card","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/TellPlayableCard.html","tags":["tell"]},{"id":9,"name":"Tell Playable Card Outer","doc":"com/fossgalaxy/games/fireworks/ai/osawa/rules/TellPlayableCardOuter.html","tags":["tell"]},{"id":10,"name":"Tell Randomly","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/TellRandomly.html","tags":["tell","stochastic"]},{"id":11,"name":"Tell About Ones","doc":"com/fossgalaxy/games/fireworks/ai/rule/TellAboutOnes.html","tags":["tell"]},{"id":12,"name":"Tell Anyone About Useful Card","doc":"com/fossgalaxy/games/fireworks/ai/rule/TellAnyoneAboutUsefulCard.html","tags":["tell"]},{"id":13,"name":"Tell Unknown","doc":"com/fossgalaxy/games/fireworks/ai/rule/TellUnknown.html","tags":["tell"]},{"id":14,"name":"Tell Anyone About Useless Card","doc":"com/fossgalaxy/games/fireworks/ai/rule/TellAnyoneAboutUselessCard.html","tags":["tell"]},{"id":15,"name":"Tell Dispensable","doc":"com/fossgalaxy/games/fireworks/ai/rule/TellDispensable.html","tags":["tell"]},{"id":16,"name":"Tell Most Information in total","doc":"com/fossgalaxy/games/fireworks/ai/rule/TellMostInformation.html","tags":["tell"]},{"id":17,"name":"Play Safe Card","doc":"com/fossgalaxy/games/fireworks/ai/rule/PlaySafeCard.html","tags":["play"]},{"id":18,"name":"Play If Certain","doc":"com/fossgalaxy/games/fireworks/ai/rule/simple/PlayIfCertain.html","tags":["play"]},{"id":19,"name":"Play Probably Safe Card : 0.1","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/PlayProbablySafeCard.html","tags":["play"]},{"id":20,"name":"Play Probably Safe Card : 0.2","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/PlayProbablySafeCard.html","tags":["play"]},{"id":21,"name":"Play Probably Safe Card : 0.3","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/PlayProbablySafeCard.html","tags":["play"]},{"id":22,"name":"Play Probably Safe Card : 0.4","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/PlayProbablySafeCard.html","tags":["play"]},{"id":23,"name":"Play Probably Safe Card : 0.5","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/PlayProbablySafeCard.html","tags":["play"]},{"id":24,"name":"Play Probably Safe Card : 0.6","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/PlayProbablySafeCard.html","tags":["play"]},{"id":25,"name":"Play Probably Safe Card : 0.7","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/PlayProbablySafeCard.html","tags":["play"]},{"id":26,"name":"Play Probably Safe Card : 0.8","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/PlayProbablySafeCard.html","tags":["play"]},{"id":27,"name":"Play Probably Safe Card : 0.9","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/PlayProbablySafeCard.html","tags":["play"]},{"id":28,"name":"Tell Ill Informed","doc":"com/fossgalaxy/games/fireworks/ai/rule/TellIllInformed.html","tags":["tell"]},{"id":29,"name":"Tell Fives","doc":"com/fossgalaxy/games/fireworks/ai/rule/TellFives.html","tags":["tell"]},{"id":30,"name":"Complete Tell Useful Card","doc":"com/fossgalaxy/games/fireworks/ai/rule/CompleteTellUsefulCard.html","tags":["tell"]},{"id":31,"name":"Discard Randomly","doc":"com/fossgalaxy/games/fireworks/ai/rule/random/DiscardRandomly.html","tags":["discard","stochastic"]},{"id":32,"name":"Discard Oldest No Info First","doc":"com/fossgalaxy/games/fireworks/ai/rule/DiscardOldestNoInfoFirst.html","tags":["discard"]},{"id":33,"name":"Try To Un Block","doc":"com/fossgalaxy/games/fireworks/ai/rule/TryToUnBlock.html","tags":[]}]
......@@ -2,37 +2,68 @@
{% block title %}Description{% endblock %}
{% block head_extra %}
<script src="https://use.fontawesome.com/a1c76a49d8.js"></script>
<!-- Load c3.css -->
<link href="assets/css/c3.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="assets/js/d3.min.js"></script>
<script src="assets/js/c3.js"></script>
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-8">
<h2>My Agent</h2>
<div class="col-md-6">
<h2>My Agent</h2>
<ul class="list-inline pull-right">
<li><a href="#" onclick="buildAgent()" class="btn btn-default">Test</a></li>
<li><a href="#" class="btn btn-primary">Submit</a></li>
</ul>
</div>
<div class="col-md-6">
<h2>Available Rules</h2>
</div>
</div>
<div class="row">
<div class="col-md-6 agentSide">
<ul class="list-group connectedRules fa-ul" style="min-height: 200px" id="agent">
</ul>
<ul class="list-group connectedRules" style="min-height: 20px" id="agent">
</ul>
<div id="graph"></div>
</div>
<div class="col-md-4">
<h2>Available Rules</h2>
<ul class="list-group connectedRules" style="min-height: 20px" id="ruleset">
<li class="list-group-item">
<h2>Rule 1</h2>
<span style="display: none" class="ruleid">1</span>
</li>
<li class="list-group-item">Rule 2
<span style="display: none" class="ruleid">2</span>
</li>
<li class="list-group-item">Rule 3</li>
<li class="list-group-item">Rule 4</li>
<li class="list-group-item">Rule 5</li>
</ul>
<div class="col-md-6">
<ul class="list-group connectedRules fa-ul" style="min-height: 200px" id="ruleset">
</ul>
</div>
</div>
<ul class="list-inline pull-right">
<li><a href="#" onclick="buildAgent()" class="btn btn-default">Test</a></li>
<li><a href="#" class="btn btn-primary">Submit</a></li>
</ul>
<div class="modal fade" tabindex="-1" role="dialog" id="docModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Help Documentation</h4>
</div>
<div class="modal-body">
<p id="docText"> Loading Help Text ... </p>
<iframe style="zoom:0.60" width="99.6%" frameborder="0" src="http://iggi.fosslab.uk/hanabi/apidocs/" id="docFrame"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="assets/js/loadAndDisplayRules.js"></script>
<script type="text/javascript">
$( function() {
$( "#agent, #ruleset" ).sortable({
......@@ -51,4 +82,3 @@
</script>
{% endblock %}
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