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{ ...@@ -62,22 +62,31 @@ aside .inner{
#infobox{ #infobox{
background: #d0c2ae; background: #d0c2ae;
} }
#infobox summary[data-nbr]::after { .credits{
content: ' ('attr(data-nbr)')';
}
#infobox p, .credits{
border-top: 2px solid black; border-top: 2px solid black;
} }
#infobox p.visible{ #infobox .infoline{
display: block; display: none;
}
#infobox .infoline.visible{
display: inline-block;
} }
#inventory{ #inventory{
position: absolute;
top:30px;
left: 10px;
width:15%; width:15%;
background: yellow;
} }
#inventory p:first-child{
margin: 0 0 5px 0
}
#inventory p.locked{ #inventory p.locked{
opacity: .5; opacity: .5;
text-decoration: line-through; position: relative;
}
#inventory p.locked .name{
display: none;
} }
#help{ #help{
background: #35f531; background: #35f531;
......
...@@ -26,19 +26,19 @@ ...@@ -26,19 +26,19 @@
<aside> <aside>
<div class="inner"> <div class="inner">
<h1>burl</h1> <h1>burl</h1>
<details id="inventory" class="box button"></details> <div id="infobox" class="box">
<details id="infobox" class="box button"> <span>Info</span>
<summary>Info</summary> </div>
</details>
<details id="help" class="box button"> <details id="help" class="box button">
<summary>Help</summary> <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>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> <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> </details>
</div> </div>
</aside> </aside>
<main> <main>
<div id="inventory"></div>
<span class="pause-btn button"> <span class="pause-btn button">
<span class="play-icon"></span> <span class="play-icon"></span>
<span class="pause-icon"></span> <span class="pause-icon"></span>
......
...@@ -25,16 +25,13 @@ function checkLock(unit){ ...@@ -25,16 +25,13 @@ function checkLock(unit){
return false return false
} }
} }
function promptInfo(message, open=false){ function promptInfo(message){
var infoLine = d.createElement('p') var infoLine = d.createElement('p')
infoLine.innerHTML = message infoLine.innerHTML = ": "+message
infobox.appendChild(infoLine) infobox.appendChild(infoLine)
if (open) {
infobox.setAttribute('open', 'true')
}
infoLine.classList.add('visible') infoLine.classList.add('visible')
setTimeout(function(){infoLine.classList.remove('visible')},3000)
infoLine.classList.add('infoline') infoLine.classList.add('infoline')
getInfoNumber()
} }
function findObjectsByKey(array, key, value) { function findObjectsByKey(array, key, value) {
...@@ -65,21 +62,16 @@ function getAvailableChar(data, role=false){ ...@@ -65,21 +62,16 @@ function getAvailableChar(data, role=false){
} }
return availableChar 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){ function makeInventory(data){
var availableChar = getAvailableChar(data,'platform') 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++) { for (var i = 0; i < availableChar.length; i++) {
var p = d.createElement('p') var p = d.createElement('p')
var char = availableChar[i] var char = availableChar[i]
var unit = findObjectsByKey(data.units, 'char', char)[0] 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) p.setAttribute('data-char',char)
if (unit.isLocked) { if (unit.isLocked) {
p.classList.add('locked') p.classList.add('locked')
...@@ -108,13 +100,13 @@ function testHash(data){ ...@@ -108,13 +100,13 @@ function testHash(data){
var hash = window.location.hash.substr(1) var hash = window.location.hash.substr(1)
// Extracting URL characters to build the hash // Extracting URL characters to build the hash
if(hash == "#" || 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 return false
}else{ }else{
hashChar = hash.split('') hashChar = hash.split('')
for (var i = 0; i < hashChar.length; i++) { for (var i = 0; i < hashChar.length; i++) {
if (availableChar.indexOf(hashChar[i]) <= -1) { // incompatible character 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 { }else {
cleanHash.push(hashChar[i]) cleanHash.push(hashChar[i])
} }
......
...@@ -6,8 +6,6 @@ function launch(units, isRefresh){ ...@@ -6,8 +6,6 @@ function launch(units, isRefresh){
Composite = Matter.Composite, Composite = Matter.Composite,
Composites = Matter.Composites, Composites = Matter.Composites,
Constraint = Matter.Constraint, Constraint = Matter.Constraint,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
World = Matter.World, World = Matter.World,
Bodies = Matter.Bodies, Bodies = Matter.Bodies,
Body = Matter.Body, Body = Matter.Body,
...@@ -194,13 +192,6 @@ function launch(units, isRefresh){ ...@@ -194,13 +192,6 @@ function launch(units, isRefresh){
promptInfo(message) 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 // Render after each Tick
Events.on(engine, 'afterTick', (e)=> { Events.on(engine, 'afterTick', (e)=> {
var ballCenter = ball.position 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