Improve layout and compass indicator.

parent 5e6917a1
......@@ -74,6 +74,7 @@ instance ToJSON MonsterHealth where
"absolute-health" .= creature_absolute_health health,
"absolute-damage" .= creature_absolute_damage health,
"fraction-health" .= (fromRational $ creature_health health :: Double),
"percent-health" .= (round $ creature_health health * 100 :: Integer),
"max-health" .= creature_max_health health ]
-- | The seven aptitudes.
......
......@@ -17,7 +17,11 @@
<div id="controls" class="roguebox">
<div id="status-block" class="webgl-container">
<div id="status-block" class="controlbox"
{{#statsblock}}
title="Your compass reads {{compass}}.&#10;{{#health}}You have {{absolute-health}} health point(s) out of {{max-health}} ({{percent-health}}%){{/health}}."
{{/statsblock}}>
<div class="webgl-container">
{{#statsblock}}
<pre>
Health: {{#health}}{{absolute-health}}/{{max-health}}{{/health}}
......@@ -25,23 +29,26 @@ Compass: {{compass}}
</pre>
<script class="webgl-payload" type="application/json">
{
"aspect-ratio" : 3.2,
"compass" : "{{compass}}"
{{#health}}
, "health" : {
"absolute-health" : {{absolute-health}},
"max-health" : {{max-health}}
"max-health" : {{max-health}},
"fraction-health" : {{fraction-health}}
}
{{/health}}
}
</script>
{{/statsblock}}
</div>
</div>
{{#controls}}
<form action="/play/move" method="post">
<div id="movement-controls">
<div id="movement-modes">
<div id="movement-modes" class="controlbox">
<input type="radio" name="mode" id="modeNormal" value="normal" checked="checked"/><label for="modeNormal" title="Use the direction pad to move one square at a time. Bumping into a creature attacks. Bumping into blocked terrain digs through that terrain. Bumping into the central point of the stargate activates it.">Normal</label>
{{#teleport}}
<input type="radio" name="mode" id="modeJump" value="jump"/><label for="modeJump" title="Use the direction pad to instantly move 5-7 squares. Exact point of landing is very random. Small chance of failure, leaving you vulnerable.">Teleport</label>
......@@ -55,7 +62,7 @@ Compass: {{compass}}
</div>
<div id="directional-controls">
<div id="directional-controls" class="controlbox">
<div class="buttonrow">
<button type="submit" name="direction" class="diagonal-direction-button" value="nw" class="up-left"><img src="/static/themes/glass/button-up-left.svg"/></button>
<button type="submit" name="direction" value="n" class="up"><img src="/static/themes/glass/button-up.svg"/></button>
......
......@@ -75,11 +75,11 @@
background: #000000;
}
#controls > div {
margin: 1cm;
#controls > div.controlbox {
margin: 1em;
}
#movement-controls > div {
#movement-controls > div.controlbox {
vertical-align: top;
display: inline-block;
margin: 1em;
......
......@@ -23,7 +23,7 @@ $('document').ready(function() {
//Set up user interface elements.
$('.roguestar-accordion').accordion( { heightStyle: "content", collapsible:true } );
$('.roguestar-tabs').tabs();
$("label, button, input, a").tooltip( {
$("label, button, input, a, div").tooltip( {
position: { my: "right center", at: "left-2 center", collision: "flipfit" },
hide: 0.25,
tooltipClass: "tooltip-box"
......
......@@ -49,12 +49,8 @@
}
.tooltip-corners {
border-radius: @corner-roundness*2;
-moz-border-radius: @corner-roundness*2;
border-top-left-radius: @corner-roundness;
border-top-right-radius: @corner-roundness;
-moz-border-radius-topleft: @corner-roundness;
-moz-border-radius-topright: @corner-roundness;
border-radius: @corner-roundness;
-moz-border-radius: @corner-roundness;
}
.rounded-corners {
......@@ -350,10 +346,7 @@ h1, h2, h3, h4, h5, h6 {
.tooltip-box {
width: 4.5in;
padding: 1em;
border-style: solid;
border-width: 2px;
color: @white;
border-color: @orange;
background-color: @darkblue;
.half-shiny;
.tooltip-corners;
......
......@@ -152,30 +152,41 @@ RSGL.createFilledRectangle = function( width, height ) {
return new THREE.ShapeGeometry( shape );
}
RSGL.createHealthBar = function( health_bar_description, fraction_filled ) {
RSGL.createHealthBar = function( health_bar_description ) {
var width = health_bar_description.width;
var height = health_bar_description.height;
var color = health_bar_description.color;
var line_width = health_bar_description.line_width;
var outline = RSGL.createOutlineRectangle( width, height );
var fill = RSGL.createFilledRectangle( width, height );
var outline_mesh = new THREE.Line( outline, new THREE.LineDashedMaterial( { color : color, linewidth : line_width, dashSize : 0.5, gapSize : 0.5 } ) );
var fill_mesh = new THREE.Mesh( fill, new THREE.MeshBasicMaterial( { color : color } ) );
var outline = RSGL.createOutlineRectangle( width+1, height+RSGL.GOLDEN_RATIO );
var outline_mesh = new THREE.Line( outline, new THREE.LineBasicMaterial( { color : color, linewidth : line_width } ) );
var scene = new THREE.Object3D();
scene.add( outline_mesh );
scene.add( fill_mesh );
var fill_rectangle = RSGL.createFilledRectangle( 1, height );
var fill_material = new THREE.MeshBasicMaterial( { color : color } );
var createFillMesh = function() {
return new THREE.Mesh( fill_rectangle, fill_material );
}
return function( environment ) {
var percent_health = environment.payload.health["absolute-health"] / environment.payload.health["max-health"];
var health_box_count = environment.payload.health["absolute-health"];
var health_box_size = width / environment.payload.health["max-health"];
var composite = new THREE.Object3D();
fill_mesh.position.x = width / 2 * (1.0-percent_health);
fill_mesh.scale.x = percent_health;
fill_mesh.updateMatrix();
composite.add(outline_mesh);
for( var i = 0; i < health_box_count; i++ ) {
var fill_mesh = createFillMesh();
fill_mesh.position.x = width / 2 - health_box_size*(i + 0.5);
fill_mesh.scale.x = health_box_size-0.5;
fill_mesh.updateMatrix();
console.log(fill_mesh.position.x);
console.log(fill_mesh.scale.x);
composite.add(fill_mesh);
}
return scene;
return composite;
}
}
......@@ -235,15 +246,20 @@ RSGL.createLighting = function() {
}
RSGL.initialize = function(container) {
var width = container.width();
var height = container.height();
if( height < width / 2 )
height = width / 2;
var environment = {
payload : JSON.parse(container.find('.webgl-payload').html() )};
console.log( "Payload is: " + JSON.stringify(environment) );
var aspect_ratio = RSGL.GOLDEN_RATIO;
if( environment.payload["aspect-ratio"] != undefined )
aspect_ratio = environment.payload["aspect-ratio"];
console.log("using aspect ratio of " + aspect_ratio);
var width = container.width();
var height = container.height();
if( height < width / aspect_ratio )
height = width / aspect_ratio;
var renderer = new THREE.WebGLRenderer();
var scene = new THREE.Scene();
......
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