Created
December 2, 2014 15:01
-
-
Save nikoladimitroff/4ecf20dacad0c1e5705e to your computer and use it in GitHub Desktop.
Coherent UI GT nameplates demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@font-face { | |
font-family: 'Roboto'; | |
font-style: normal; | |
font-weight: 700; | |
src: local('Roboto Bold'), local('Roboto-Bold'), url(Roboto-Bold.ttf) format('ttf'); | |
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; | |
} | |
html, body { | |
margin: 0; | |
padding: 0; | |
font-family: 'Roboto', sans-serif; | |
color: white; | |
font-weight: bold; | |
overflow: hidden; | |
} | |
/* Dynamic UI */ | |
.nameplate { | |
position: absolute; | |
text-align: center; | |
width: 200px; | |
z-index: -1; | |
} | |
.progress-bar { | |
border: 1px solid #606060; | |
background-color: rgba(255, 255, 255, 0.2); | |
position: relative; | |
height: 50px; | |
width: 200px; | |
} | |
.progress-bar .progress-bar-filler { | |
position: relative; | |
overflow: hidden; | |
height: 100%; | |
top: 0; | |
left: 0; | |
background-color: #F00; | |
width: 20%; | |
} | |
.nameplate.character-name { | |
font-size: 21; | |
} | |
.nameplate .character-health { | |
font-size: 41; | |
} | |
/* Static UI */ | |
li { | |
list-style-type: none; | |
} | |
.raiding-party { | |
margin: 0; | |
float: right; | |
margin-top: 50px; | |
margin-right: 50px; | |
} | |
.raiding-party li { | |
max-width: 200px; | |
max-height: 150px; | |
margin-bottom: 15%; | |
} | |
.raiding-party li img{ | |
width: 200px; | |
height: 150px; | |
border: 2px solid black; | |
background-color: rgba(0, 0, 68, 0.3); | |
margin: 0; | |
padding: 0; | |
} | |
.raiding-party li h3{ | |
text-align: center; | |
font-family: Segoe UI; | |
margin: 0; | |
padding: 0; | |
} | |
#chat { | |
max-width: 450px; | |
background-color: rgba(102, 170, 102, 0.6); | |
position: absolute; | |
left: 20px; | |
bottom: 50px; | |
line-height: 1; | |
} | |
#chat:hover { | |
background-color: #88aa88; | |
} | |
#chat li { | |
font-family: Arial; | |
padding: 5px; | |
} | |
#chat li .timestamp { | |
color: #aaff00; | |
} | |
#chat li .author { | |
color: #5500cc; | |
} | |
#inventory { | |
background-color: #cc4400; | |
empty-cells: show; | |
border-spacing: 10px; | |
border-collapse: separate; | |
cursor: default; | |
margin-top: 50px; | |
margin-left: 100px; | |
} | |
#inventory caption { | |
color: black; | |
font-size: 25px; | |
font-family: Arial; | |
font-weight: bold; | |
background-color: #cc4400; | |
} | |
#inventory td { | |
padding: 15px; | |
width: 64px; | |
height: 64px; | |
background-color: brown; | |
border: 5px solid black; | |
} | |
#inventory td:hover { | |
border: 5px solid green; | |
} | |
#inventory td img { | |
width: 100%; | |
height: 100%; | |
} | |
#inventory td.total-coins { | |
text-align: right; | |
font-family: Segoe UI; | |
font-size: 20px; | |
} | |
#inventory td.total-coins img{ | |
width: 32px; | |
height: 32px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>Coherent UI GT Demo - nameplates</title> | |
<!-- css --> | |
<link rel="stylesheet" href="nameplates.css" type="text/css" media="screen" /> | |
<!-- js --> | |
<script type="text/javascript" src="../coherent.js"></script> | |
</head> | |
<body> | |
<ul class="raiding-party"> | |
<li> | |
<img src="animals/elephant.png"/> | |
<div ></div> | |
<h3>Elephant</h3> | |
</li> | |
<li> | |
<img src="animals/rabbit.png"/> | |
<h3>Rabbit</h3> | |
</li> | |
<li> | |
<img src="animals/deer.png"/> | |
<h3>Deer</h3> | |
</li> | |
<li> | |
<img src="animals/dog.png"/> | |
<h3>Dog</h3> | |
</li> | |
</ul> | |
<div id="chat"> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Elephant:</span> Lorem ipsum dolor sit amet,</li> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Deer:</span> consectetur adipiscing elit,</li> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Rabbit:</span> sed do eiusmod tempor incididunt</li> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Dog:</span> ut labore et dolore magna aliqua.</li> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Dog:</span> Ut enim ad minim veniam, quis nostrud</li> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Dog:</span> exercitation ullamco laboris nisi</li> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Elephant:</span> ut aliquip ex ea commodo consequat.</li> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Rabbit:</span> Duis aute irure dolor in reprehenderit</li> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Elephant:</span> in voluptate velit esse cillum dolore</li> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Elephant:</span> eu fugiat nulla pariatur. Excepteur</li> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Deer:</span> sint occaecat cupidatat non proident,</li> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Deer:</span> sunt in culpa qui officia deserunt</li> | |
<li><span class="timestamp">[12:34:56]</span><span class="author"> Elephant:</span> mollit anim id est laborum.</li> | |
</div> | |
<table id="inventory" class="unselectable"> | |
<caption>Inventory</caption> | |
<tbody> | |
<tr> | |
<td><img src="items/yam.png"/></td> | |
<td><img src="items/yam.png"/></td> | |
<td><img src="items/yam.png"/></td> | |
<td><img src="items/loaf.png"/></td> | |
<td><img src="items/loaf.png"/></td> | |
</tr> | |
<tr> | |
<td><img src="items/loaf.png"/></td> | |
<td><img src="items/ham.png"/></td> | |
<td><img src="items/ham.png"/></td> | |
<td><img src="items/ham.png"/></td> | |
<td><img src="items/turkey.png"/></td> | |
</tr> | |
<tr> | |
<td><img src="items/turkey.png"/></td> | |
<td><img src="items/turkey.png"/></td> | |
<td><img src="items/mushroom.png"/></td> | |
<td><img src="items/mushroom.png"/></td> | |
<td><img src="items/mushroom.png"/></td> | |
</tr> | |
<tr> | |
<td colspan="5" class="total-coins"> | |
<span>Coins: 123 456 789</span> | |
<img src="items/coins.png"/> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
</body> | |
<!-- Nameplate template --> | |
<script id="unit-template" type="text/html"> | |
<span class="character-name">My awesome character</span> | |
<div class="progress-bar"> | |
<div class="progress-bar-filler"></div> | |
</div> | |
<span class="character-health">Health</span> | |
</script> | |
<script src="nameplates.js"></script> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var VIEWPORT = { | |
x: 1000, | |
y: 800 | |
}; | |
engine.on("MoveNameplates", function() | |
{ | |
var count = nameplates.length; | |
for(var i = 0; i < count; ++i) | |
{ | |
var nameplate = nameplates[i]; | |
nameplate.state.x += nameplate.direction.x; | |
nameplate.state.y += nameplate.direction.y; | |
nameplate.state.hp += nameplate.direction.hp; | |
if (nameplate.state.x < 0 || nameplate.state.x > VIEWPORT.x) | |
nameplate.direction.x = -nameplate.direction.x; | |
if (nameplate.state.y < 0 || nameplate.state.y > VIEWPORT.y) | |
nameplate.direction.y = -nameplate.direction.y; | |
if (nameplate.state.hp < 0 || nameplate.state.hp > 1) | |
nameplate.direction.hp = -nameplate.direction.hp; | |
nameplate.style.left = nameplate.state.x; | |
nameplate.style.top = nameplate.state.y; | |
nameplate.barFiller.style.width = nameplate.state.hp * 100 + "%"; | |
} | |
}); | |
var body = document.getElementsByTagName('body')[0]; | |
var htmlContent = document.getElementById("unit-template").innerHTML; | |
function createNameplate(i) { | |
var nameplate = document.createElement('div'); | |
nameplate.className = 'nameplate'; | |
nameplate.innerHTML = htmlContent; | |
nameplate.getElementsByClassName("character-name")[0].textContent = "Player Name #" + i; | |
nameplate.state = { | |
x: Math.random() * VIEWPORT.x, | |
y: Math.random() * VIEWPORT.y, | |
hp: Math.random() | |
}; | |
nameplate.direction = { | |
x: Math.random() * 6 - 3, | |
y: Math.random() * 6 - 3, | |
hp: Math.random() * 0.1 - 0.05 | |
}; | |
body.appendChild(nameplate); | |
nameplate.barFiller = nameplate.querySelector(".progress-bar-filler"); | |
return nameplate; | |
} | |
var nameplates = []; | |
var COUNT = 500; | |
engine.on("CreateNameplates", function() { | |
for(var i = 0; i < COUNT; ++i) { | |
nameplates.push(createNameplate(i)); | |
} | |
}); | |
engine.trigger("Start"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment