Commit 9001ade0 authored by Raphaël Bastide's avatar Raphaël Bastide

git add img/square.png New inventory

parent 6f337eb2
......@@ -62,22 +62,31 @@ aside .inner{
#infobox{
background: #d0c2ae;
}
#infobox summary[data-nbr]::after {
content: ' ('attr(data-nbr)')';
}
#infobox p, .credits{
.credits{
border-top: 2px solid black;
}
#infobox p.visible{
display: block;
#infobox .infoline{
display: none;
}
#infobox .infoline.visible{
display: inline-block;
}
#inventory{
position: absolute;
top:30px;
left: 10px;
width:15%;
background: yellow;
}
#inventory p:first-child{
margin: 0 0 5px 0
}
#inventory p.locked{
opacity: .5;
text-decoration: line-through;
position: relative;
}
#inventory p.locked .name{
display: none;
}
#help{
background: #35f531;
......
......@@ -26,19 +26,19 @@
<aside>
<div class="inner">
<h1>burl</h1>
<details id="inventory" class="box button"></details>
<details id="infobox" class="box button">
<summary>Info</summary>
</details>
<div id="infobox" class="box">
<span>Info</span>
</div>
<details id="help" class="box button">
<summary>Help</summary>
<p>To make a track for the ball, add some characters after a “#” in this url, just like that: <a href="#dff">#dff</a>.</p><p>Available characters are listed in the inventory.</p>
<p>To make a track for the ball, add characters after a “#” in this url, just like that: <a href="#dff">#dff</a>.</p><p>Available characters are listed in the inventory.</p>
<p>Some characters need to be unlocked by making the ball touch bonuses.</p>
<p class="credits">Burl is an experiment by <a target="_blank" href="https://raphaelbastide.com/">Raphaël Bastide</a>.<br><a target="_blank" href="https://gitlab.com/raphaelbastide/burl">Sources on Gitlab</a> <br>→ Post your track on <a target="_blank" href="http://reddit.com/r/burl">Reddit</a><br><a href="https://niu.moe/@burl">Burl on Mastodon</a></p>
</details>
</div>
</aside>
<main>
<div id="inventory"></div>
<span class="pause-btn button">
<span class="play-icon"></span>
<span class="pause-icon"></span>
......
......@@ -25,16 +25,13 @@ function checkLock(unit){
return false
}
}
function promptInfo(message, open=false){
function promptInfo(message){
var infoLine = d.createElement('p')
infoLine.innerHTML = message
infoLine.innerHTML = ": "+message
infobox.appendChild(infoLine)
if (open) {
infobox.setAttribute('open', 'true')
}
infoLine.classList.add('visible')
setTimeout(function(){infoLine.classList.remove('visible')},3000)
infoLine.classList.add('infoline')
getInfoNumber()
}
function findObjectsByKey(array, key, value) {
......@@ -65,21 +62,16 @@ function getAvailableChar(data, role=false){
}
return availableChar
}
function getInfoNumber(){
var infoItem = d.querySelectorAll('.infoline')
if (infoItem.length) {
d.querySelectorAll('#infobox summary')[0].setAttribute('data-nbr',infoItem.length)
}
}
function makeInventory(data){
var availableChar = getAvailableChar(data,'platform')
inventory.innerHTML = "<summary>Inventory</summary>" // first, empty (almost all) existing content
inventory.innerHTML = "<p>Inventory</p>" // first, empty (almost all) existing content
for (var i = 0; i < availableChar.length; i++) {
var p = d.createElement('p')
var char = availableChar[i]
var unit = findObjectsByKey(data.units, 'char', char)[0]
p.innerHTML = "<span class='char'>"+char+"</span> "+unit.name
p.innerHTML = "<span class='char'>"+char+"</span> <span class='name'>"+unit.name+"</span>"
p.setAttribute('data-char',char)
if (unit.isLocked) {
p.classList.add('locked')
......@@ -108,13 +100,13 @@ function testHash(data){
var hash = window.location.hash.substr(1)
// Extracting URL characters to build the hash
if(hash == "#" || hash == "") {
promptInfo("No terrain yet. Try adding <a href='#dff'>#dff</a> at the end of this URL", true)
promptInfo("No terrain yet. Try adding <a href='#dff'>#dff</a> at the end of this URL")
return false
}else{
hashChar = hash.split('')
for (var i = 0; i < hashChar.length; i++) {
if (availableChar.indexOf(hashChar[i]) <= -1) { // incompatible character
promptInfo("<span class='char'>"+hashChar[i]+"</span> is not a valid character", false)
promptInfo("<span class='char'>"+hashChar[i]+"</span> is not a valid character")
}else {
cleanHash.push(hashChar[i])
}
......
......@@ -6,8 +6,6 @@ function launch(units, isRefresh){
Composite = Matter.Composite,
Composites = Matter.Composites,
Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World,
Bodies = Matter.Bodies,
Body = Matter.Body,
......@@ -194,13 +192,6 @@ function launch(units, isRefresh){
promptInfo(message)
}
// add mouse control
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {mouse: mouse});
World.add(world, mouseConstraint);
render.mouse = mouse;
// Render after each Tick
Events.on(engine, 'afterTick', (e)=> {
var ballCenter = ball.position
......
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