Skip to content

Instantly share code, notes, and snippets.

@nikoladimitroff

nikoladimitroff/nameplates.css

Created December 2, 2014 15:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nikoladimitroff/4ecf20dacad0c1e5705e to your computer and use it in GitHub Desktop.
Save nikoladimitroff/4ecf20dacad0c1e5705e to your computer and use it in GitHub Desktop.
Download ZIP
Coherent UI GT nameplates demo
Raw
nameplates.css
@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;
}
Raw
nameplates.html
<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>
Raw
nameplates.js
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