Commit 05b6e9a1 authored by Raphaël Bastide's avatar Raphaël Bastide

Inventory has now icons, CSS and minor details

parent 77053073
:root{
--icon-size: 30px;
--canvas-color:#ffa732;
}
* {
box-sizing: border-box;
}
......@@ -40,7 +44,7 @@ main{
color: white;
font-size: 10em;
top:50%;
z-index: 200;
z-index: 100;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
canvas{
......@@ -85,6 +89,8 @@ aside .inner{
}
#inventory{
position: absolute;
display: flex;
flex-direction: column;
top:30px;
left: 10px;
width:15%;
......@@ -103,15 +109,57 @@ aside .inner{
#help{
background: #35f531;
}
.box.updated{
background: white!important;
p[data-char]{
/* background: #ffffff77; */
border-radius: 1em 2px 2px 1em;
width:3.5em;
display: flex;
margin-bottom: 5px;
}
a{color: inherit;}
.char{
background: white;
border-radius:20px;
width:34px;
height: 34px;
text-align: center;
padding: 0 .4em;
background: white;
top:-2px;
position: relative;
}
.char:after{
content: "";
display: none;
height: 5px;
width: 5px;
background: white;
top: .60em;
right: -5px;
position: absolute;
}
.icon{
background: #ffffff url('../img/sprites.svg') no-repeat;
background-size: calc(var(--icon-size)*11);
width: var(--icon-size);
height: var(--icon-size);
flex: 0 1 auto;
border-radius: 2px;
margin-left: 5px;
}
.flat{background-position: calc(var(--icon-size) * -0) 0}
.down{background-position: calc(var(--icon-size) * -1) 0}
.gap{background-position: calc(var(--icon-size) * -2) 0}
.up{background-position: calc(var(--icon-size) * -3) 0}
.boost{background-position: calc(var(--icon-size) * -4) 0}
.teleport{background-position: calc(var(--icon-size) * -5) 0}
.invertedGravity{background-position: calc(var(--icon-size) * -6) 0}
.jump{background-position: calc(var(--icon-size) * -7) 0}
.bulletTime{background-position: calc(var(--icon-size) * -8) 0}
.buildUp{background-position: calc(var(--icon-size) * -9) 0}
.buildDown{background-position: calc(var(--icon-size) * -10)0}
.box.updated{
background: white!important;
}
.pause-btn.button{
position: absolute;
right:10px;
......@@ -128,3 +176,4 @@ a{color: inherit;}
.button{
cursor: url(../img/pointer.png) 0 0, auto;
}
a{color: inherit;}
This diff is collapsed.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="379.99997"
height="61.999996"
viewBox="0 0 100.54166 16.404167"
version="1.1"
id="svg8"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="url.svg"
inkscape:export-filename="/home/raphael/Documents/WORK/PERSO/burl/img/pointer.png"
inkscape:export-xdpi="24.239979"
inkscape:export-ydpi="24.239979">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="150.14668"
inkscape:cy="57.374574"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1080"
inkscape:window-height="1892"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
units="px"
inkscape:snap-bbox="true"
inkscape:bbox-paths="true"
inkscape:bbox-nodes="true"
inkscape:snap-bbox-edge-midpoints="true"
inkscape:snap-bbox-midpoints="true"
inkscape:snap-smooth-nodes="true"
inkscape:snap-object-midpoints="true"
inkscape:snap-page="true"
inkscape:object-paths="true"
inkscape:snap-intersection-paths="true"
inkscape:snap-global="true"
showguides="true"
inkscape:guide-bbox="true">
<inkscape:grid
type="xygrid"
id="grid824"
originx="5.8517439e-07"
originy="-87.047925" />
</sodipodi:namedview>
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(163.43963,318.95123)">
<rect
style="opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:#666666;stroke-width:0.5291667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke fill markers"
id="rect862"
width="105.30417"
height="15.875"
x="-163.17505"
y="-318.68665"
rx="2.6458385"
ry="2.6458323" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.79708195px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';text-align:center;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458335"
x="-129.52693"
y="-307.09512"
id="text866"><tspan
sodipodi:role="line"
id="tspan864"
x="-129.35628"
y="-307.09512"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Version_0.1_77_skeletor';-inkscape-font-specification:'Version_0.1_77_skeletor';letter-spacing:0.34131253px;stroke-width:0.26458335"><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Version_0.1_77_skeletor';-inkscape-font-specification:'Version_0.1_77_skeletor';letter-spacing:0.34131253px;fill:#808080;stroke-width:0.26458335"
id="tspan868">burl.link/</tspan><tspan
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Version_0.1_77_skeletor';-inkscape-font-specification:'Version_0.1_77_skeletor';letter-spacing:0.34131253px;fill:#0db109;fill-opacity:1;stroke-width:0.26458335"
id="tspan872">#dff</tspan></tspan></text>
</g>
</svg>
......@@ -31,8 +31,8 @@
</div>
<details id="help" class="box button">
<summary>Help</summary>
<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>To make a track for the ball, add the available inventory letters after a “#” in this url, just like that: <a href="#dff">#dff</a>. <a href="#dff"><img src="img/url.svg"></a></p>
<p>Unavailable characters will be unlocked when the ball touches the 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>
......@@ -47,7 +47,7 @@
<script type="text/javascript" src="lib/decomp.js"></script>
<script type="text/javascript" src="lib/pathseg.js"></script>
<script src="lib/matter.min.js"></script>
<script src="js/launch.js"></script>
<script src="js/start.js"></script>
<script src="js/functions.js"></script>
<script src="js/world.js"></script>
<!-- Matomo -->
......
......@@ -27,7 +27,7 @@ function checkLock(unit){
}
function promptInfo(message){
var infoLine = d.createElement('p')
infoLine.innerHTML = ": "+message
infoLine.innerHTML = " "+message
infobox.appendChild(infoLine)
infoLine.classList.add('visible')
setTimeout(function(){infoLine.classList.remove('visible')},5000)
......@@ -50,12 +50,10 @@ function getAvailableChar(data, role=false){
for (var i = 0; i < allUnits.length; i++) {
if (role) {
if (allUnits[i].role == role) {
// var c = allUnits[i].char+": "+allUnits[i].name
var c = allUnits[i].char
availableChar.push(c)
}
}else {
// var c = allUnits[i].char+": "+allUnits[i].name
var c = allUnits[i].char
availableChar.push(c)
}
......@@ -63,15 +61,18 @@ function getAvailableChar(data, role=false){
return availableChar
}
function makeInventory(data){
var availableChar = getAvailableChar(data,'platform')
var buildZones = getAvailableChar(data,'buildZone')
for (var i = 0; i < buildZones.length; i++) {
availableChar.push(buildZones[i]) // adds buildZone to the char list
}
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> <span class='name'>"+unit.name+"</span>"
p.innerHTML = "<span title='"+unit.name+"' class='char'>"+char+"</span> <span title='"+unit.name+"' class='icon "+unit.name+"'></span>"
p.setAttribute('data-char',char)
if (unit.isLocked) {
p.classList.add('locked')
......
......@@ -93,13 +93,13 @@
},
{
"name": "buildUp",
"role": "buildPlace",
"role": "buildZone",
"char": "1",
"verticalShift": -500
},
{
"name": "buildDown",
"role": "buildPlace",
"role": "buildZone",
"char": "0",
"verticalShift": 500
},
......
......@@ -114,7 +114,7 @@ function launch(units, isRefresh){
// Building terrain from the character array
function buildUnit(char, nextPos){
var unit = findObjectsByKey(data.units, 'char', char)[0];
if (unit.role === "buildPlace") {
if (unit.role === "buildZone") {
nextPos.x += 0
nextPos.y += unit.verticalShift
}else{
......@@ -184,7 +184,7 @@ function launch(units, isRefresh){
}
World.remove(world, bonus)
var message = '<span class="char">'+toUnLock.char+'</span> '+toUnLock.name+' unlocked!'
var message = '<span class="char">'+toUnLock.char+'</span> '+toUnLock.name+' unlocked!<br>'
updateInventory(toUnLock.char)
promptInfo(message)
}
......
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