Commit cdaa1b17 authored by Raphaël Bastide's avatar Raphaël Bastide

Cursor, play / pause, layout more robust, more units to unlock

parent d0968963
......@@ -14,7 +14,6 @@ h1{
body.debug{
background:gray;
}
body {
font:24px/1.4em 'version 4';
background: #7ceb9f;
......@@ -22,24 +21,31 @@ body {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
main{
display: flex;
}
canvas{
position: relative;
border-radius: 20px;
margin:90px 20px 20px 20px;
margin-top: 30px;
}
aside, main{
position: relative;
max-width: 1500px;
width:95%;
}
aside{
aside .inner{
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 200;
justify-content: space-between;
display: flex;
top:10px;
max-width: 1500px;
padding: 0 0px;
margin: 0 20px;
width:100%;
z-index: 200;
}
.box{
border-radius: 10px;
......@@ -72,3 +78,19 @@ aside{
background: #35f531;
}
a{color: inherit;}
.pause-btn{
position: absolute;
right:10px;
bottom:10px;
width:44px;
text-align: center;
padding: 5px 10px;
border-radius: 20px;
}
.pause-btn:hover{background: white;}
.paused .pause-icon, .play-icon{display: none;}
.pause-icon, .paused .play-icon{display: block;}
.button{
cursor: url(../img/pointer.png) 0 0, auto;
}
......@@ -26,10 +26,10 @@
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="80.265692"
inkscape:cy="108.4616"
inkscape:cx="68.737903"
inkscape:cy="115.48647"
inkscape:document-units="mm"
inkscape:current-layer="g516"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
......@@ -119,8 +119,9 @@
<path
inkscape:connector-curvature="0"
id="path31"
d="m -11.2514,-266.29039 c -2.413819,-2.50218 -6.374377,-3.37828 -9.559538,-2.10414"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.8061564;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke" />
d="m -11.503888,-266.25672 c -2.413819,-2.50218 -6.121889,-3.41195 -9.30705,-2.13781"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.8061564;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
sodipodi:nodetypes="cc" />
<path
inkscape:connector-curvature="0"
id="path33"
......@@ -130,8 +131,8 @@
<path
inkscape:connector-curvature="0"
id="path39"
d="m -10.980213,-245.44452 c -10.09866,-3.40301 -18.838284,-0.92348 -19.589671,-2.3965"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615636;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -10.980213,-245.44452 c -10.09866,-3.40301 -18.905614,-0.68781 -19.657001,-2.16083"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
sodipodi:nodetypes="cc" />
<path
inkscape:connector-curvature="0"
......@@ -267,8 +268,9 @@
<path
inkscape:connector-curvature="0"
id="path346"
d="m -33.182562,-266.12452 c 1.386611,-1.811 3.942093,-0.48743 5.521065,-1.75066"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke" />
d="m -33.051636,-266.32687 c 1.386611,-1.811 4.174861,-1.08019 5.420566,-1.58163"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
sodipodi:nodetypes="cc" />
<path
inkscape:connector-curvature="0"
id="path348"
......@@ -352,10 +354,11 @@
d="m -14.520301,-241.15937 c 0.931361,-0.32736 1.94142,-0.42321 2.808962,-0.857"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615636;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -10.559662,-247.00193 c 0.09276,1.03551 -1.207439,2.83249 -0.403978,3.63599"
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -9.9873566,-247.94459 c -0.3785504,0.73251 -1.6787494,3.60682 -0.8752884,4.41032"
id="path864"
inkscape:connector-curvature="0" />
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -30.69135,-269.62584 c 2.174327,-1.1273 4.331997,-1.21919 6.463686,0.202 0.416733,0.27783 0.697104,0.62898 1.144611,0.808"
......@@ -363,9 +366,10 @@
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -27.998148,-267.60585 c 0.891917,-0.0661 1.673715,-0.29332 2.423883,0.26933"
d="m -27.998148,-267.60585 c 0.171761,-0.54623 1.533531,-0.38678 2.423883,0.26933"
id="path878"
inkscape:connector-curvature="0" />
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -13.252863,-267.94251 c 1.331862,-2.45166 5.7951949,-0.23086 6.9349968,-1.75066"
......@@ -382,8 +386,8 @@
id="path892"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -23.285043,-249.22392 c 1.062432,2.61138 4.329454,2.40683 5.319075,-0.0673"
style="opacity:1;vector-effect:none;fill:#ec82be;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -23.332653,-248.47847 c 1.062432,2.61138 4.329454,2.40683 5.319075,-0.0673"
id="path898"
inkscape:connector-curvature="0" />
<path
......@@ -416,6 +420,39 @@
d="m -13.791505,-264.97986 c 2.170348,0.93224 3.892047,2.77376 5.9923771,0.67333"
id="path914"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -36.818386,-268.00985 c 1.508933,-0.35031 2.708058,0.84088 3.972474,1.34666"
id="path916"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -5.0385962,-265.85519 c 1.5554548,1.06885 2.7276822,2.08733 4.64577399,2.08733"
id="path918"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -29.210089,-270.09717 c 1.508232,0.0502 2.790728,1.85939 3.838515,2.90722"
id="path928"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.80615634;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -11.350789,-267.26918 c 1.30615,-0.82505 1.6107925,-1.95266 3.215011,-1.95266"
id="path930"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
</g>
<path
style="opacity:1;vector-effect:none;fill:#ec82be;fill-opacity:1;stroke:#000000;stroke-width:0.80000001;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -26.900452,-267.72305 c -0.100712,0.32429 -0.0167,1.03227 -0.0167,1.33634"
id="path948"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:#ec82be;fill-opacity:1;stroke:#000000;stroke-width:0.80000001;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -10.580307,-267.32215 c -0.06681,0.52203 -0.04189,1.06959 -0.167045,1.57021"
id="path950"
inkscape:connector-curvature="0" />
</g>
</svg>
......@@ -25,9 +25,9 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="21.068821"
inkscape:cy="67.920754"
inkscape:zoom="7.9195959"
inkscape:cx="-401.61635"
inkscape:cy="-45.867897"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
......@@ -35,10 +35,10 @@
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-width="1920"
inkscape:window-height="1024"
inkscape:window-x="0"
inkscape:window-y="868"
inkscape:window-maximized="1"
units="px"
inkscape:snap-bbox="true"
......@@ -146,5 +146,59 @@
inkscape:connector-curvature="0"
inkscape:export-xdpi="7.7399998"
inkscape:export-ydpi="7.7399998" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -157.37268,-249.2038 c -5.41605,-0.7028 -3.54275,-4.22118 -4.06919,-6.96284 -0.83584,-4.35301 -1.58492,-8.83887 1.36014,-10.3114 1.05894,-0.52947 4.45412,0.35009 5.10267,1.32292 0.35066,0.52598 4.5932,5.65342 -0.14679,9.32605 m 2.20785,-3.99467 c 1.50145,3.26743 4.36454,8.35095 4.36454,9.03171"
id="path825"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csscccc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -151.76626,-250.41405 c 5.27896,-1.34036 11.64153,-1.29461 16.81994,0 2.81721,0.87724 4.85338,4.14728 5.88748,7.52563 0.94348,3.08231 0.0606,4.97912 -2.76918,5.3728"
id="path827"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccsc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -160.96936,-249.91587 c -2.19097,3.7944 3.53346,9.31658 3.53346,14.80985"
id="path833"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -161.02667,-244.9334 c -8.31205,9.69228 5.85252,23.70912 12.86298,25.94215 0.77221,5.86536 10.64474,1.78584 14.12157,1.29771 2.30925,-0.32421 3.9011,-1.85673 4.31827,-3.66317 0.22143,-0.95887 0.15981,-2.85761 -0.0824,-3.47033"
id="path835"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccssc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -129.84364,-223.95572 c 2.02174,-5.27369 2.07887,-9.92202 0.70871,-15.30804"
id="path837"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -142.3475,-225.48195 c -0.62835,-0.95479 -2.95208,-2.15642 -4.98976,-2.39392"
id="path841"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -148.59373,-223.37719 c 0.162,2.09238 0.0995,5.03702 2.30144,5.79297"
id="path843"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -142.76738,-220.48851 c 1.50135,-0.89831 5.13085,-1.46466 6.18936,-1.46466"
id="path845"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -136.33565,-223.40363 c 1.50013,-2.74181 4.3615,-2.67362 6.01164,-2.27097"
id="path847"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
</g>
</svg>
<?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="137.86919"
height="198.01996"
viewBox="0 0 36.47789 52.392782"
version="1.1"
id="svg8"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="pointer.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-190.77746"
inkscape:cy="-63.436134"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1078"
inkscape:window-height="931"
inkscape:window-x="1920"
inkscape:window-y="960"
inkscape:window-maximized="0"
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="false" />
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(163.43963,267.89194)">
<path
style="opacity:1;vector-effect:none;fill:#ffff00;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -159.23514,-266.25819 c -0.32931,0.009 -0.61018,0.0589 -0.80873,0.15813 -2.94506,1.47254 -2.19597,5.95851 -1.36013,10.31152 0.46168,2.4044 -0.28773,5.84047 3.01791,7.01663 l -1.31724,-0.0103 c -1.10109,1.90692 0.0839,5.08615 1.53479,8.4739 l -0.31626,0.47749 c -2.20725,2.57377 -3.24817,5.2582 -2.759,7.7587 0.43126,2.20442 8.53611,13.23605 13.68495,14.87609 2.00063,2.93605 10.0779,0.36876 13.55473,-0.11937 2.30925,-0.32421 3.90092,-1.8569 4.31808,-3.66334 0.18101,-0.78381 0.17024,-2.18558 0.0289,-3.00963 1.86918,-5.10486 1.89451,-9.6521 0.56018,-14.89729 l -0.005,-0.003 c 0.34017,-1.26388 0.40545,-2.56194 0.0811,-3.62148 -1.03412,-3.37836 -3.07031,-6.64841 -5.88751,-7.52565 -4.18025,-1.04507 -9.13159,-1.2754 -13.66221,-0.62063 -0.38539,-1.22226 -2.924,-5.77447 -4.3093,-8.78913 l -0.03,0.24081 c -0.0162,-2.61046 -1.84633,-5.29466 -2.0314,-5.57227 -0.52695,-0.79042 -2.86678,-1.51951 -4.2938,-1.48105 z"
id="path859"
inkscape:connector-curvature="0" />
<g
id="g839"
transform="matrix(0.99238553,0,0,0.9923411,-0.15116588,-1.9830296)"
style="stroke-width:1.00769544"
inkscape:export-xdpi="7.7399998"
inkscape:export-ydpi="7.7399998">
<circle
inkscape:export-ydpi="57.439999"
inkscape:export-xdpi="57.439999"
r="25.796873"
cy="-258.91852"
cx="-19.85257"
style="opacity:1;vector-effect:none;fill:#ec82be;fill-opacity:1;stroke:#000000;stroke-width:1.3330971;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
id="path817" />
</g>
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -23.821319,-276.49441 c -8.691206,-0.16604 -14.174107,8.91828 -14.174107,16.81994"
id="path73"
inkscape:connector-curvature="0"
inkscape:export-xdpi="7.7399998"
inkscape:export-ydpi="7.7399998" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -28.546021,-244.74441 c 4.528188,5.95666 15.867539,5.85171 19.5077337,0.37387"
id="path75"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc"
inkscape:export-xdpi="7.7399998"
inkscape:export-ydpi="7.7399998" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -5.8674498,-250.22506 c 4.3845195,-7.10364 7.2251894,-17.62717 -2.834822,-22.48958"
id="path77"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc"
inkscape:export-xdpi="7.7399998"
inkscape:export-ydpi="7.7399998" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -22.876379,-262.13131 c -3.185146,0.10429 -6.908,6.83592 -4.91369,9.82738 0.929543,1.39432 3.321585,0.90101 4.346726,2.26786"
id="path79"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc"
inkscape:export-xdpi="7.7399998"
inkscape:export-ydpi="7.7399998" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -11.537094,-264.21018 c -2.581545,-3.38225 -6.902014,-8.24164 -11.339284,-4.91369"
id="path81"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc"
inkscape:export-xdpi="7.7399998"
inkscape:export-ydpi="7.7399998" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -37.7539,-255.72027 c 0.610557,2.81962 2.812531,4.7459 3.987307,7.02025"
id="path83"
inkscape:connector-curvature="0"
inkscape:transform-center-x="-3.6463205"
inkscape:transform-center-y="3.4362163"
inkscape:export-xdpi="7.7399998"
inkscape:export-ydpi="7.7399998" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -17.017747,-249.46911 c 5.5631,-1.53936 6.236607,-5.31816 6.236607,-10.39435"
id="path85"
inkscape:connector-curvature="0"
inkscape:export-xdpi="7.7399998"
inkscape:export-ydpi="7.7399998" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#333333;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -20.041558,-278.38429 c 2.490497,0.13379 5.470427,1.37227 6.99256,3.40178"
id="path87"
inkscape:connector-curvature="0"
inkscape:export-xdpi="7.7399998"
inkscape:export-ydpi="7.7399998" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -158.42376,-249.14998 c -3.30564,-1.17616 -2.55643,-4.61226 -3.01811,-7.01666 -0.83584,-4.35301 -1.58492,-8.83887 1.36014,-10.3114 1.05894,-0.52947 4.45412,0.35009 5.10267,1.32292 0.21631,0.32446 2.68195,3.93666 1.8693,6.87596 m 0.19176,-1.54458 c 1.50145,3.26743 4.36454,8.35095 4.36454,9.03171"
id="path825"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csscccc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -151.76626,-250.41405 c 5.27896,-1.34036 11.64153,-1.29461 16.81994,0 2.81721,0.87724 4.85338,4.14728 5.88748,7.52563 0.52901,1.72826 0.0217,4.09213 -1.02495,5.90489"
id="path827"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccsc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -159.74094,-249.15992 c -2.19097,3.7944 4.66739,12.62387 4.66739,18.11714"
id="path833"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -158.52258,-240.2087 c -2.20725,2.57377 -3.24814,5.25824 -2.75897,7.75874 0.43126,2.20442 7.30756,12.38562 12.4564,14.02567 2.00063,2.93604 11.3062,1.21888 14.78303,0.73075 2.30925,-0.32421 3.9011,-1.85673 4.31827,-3.66317 0.22143,-0.95887 0.15981,-2.85761 -0.0824,-3.47033"
id="path835"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cscssc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -129.84364,-223.95572 c 2.02174,-5.27369 2.07887,-9.92202 0.70871,-15.30804"
id="path837"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.70000005;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -143.47764,-220.50323 c 1.22142,-0.79154 2.8115,-1.6843 4.1807,-1.79796"
id="path841"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.79999995;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -149.74719,-223.73202 c -0.46261,2.2067 0.31834,4.48287 1.29331,5.22305"
id="path843"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.79999995;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -132.28291,-227.41854 c 0.88313,0.78327 1.74896,1.85597 2.10983,2.83935"
id="path845"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
style="opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.70000005;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98431373;paint-order:fill markers stroke"
d="m -140.93246,-224.65297 c 0.001,0.57481 0.27665,0.99546 0.61422,1.41741 1.19096,1.48871 1.79712,1.22842 3.63802,1.22842"
id="path855"
inkscape:connector-curvature="0" />
<g
id="g886"
style="fill:#ffff00"
transform="translate(-38.931548,44.60119)" />
</g>
</svg>
......@@ -12,18 +12,26 @@
</head>
<body>
<aside>
<h1>burl</h1>
<details id="inventory" class="box"></details>
<details id="infobox" class="box">
<summary>Info</summary>
</details>
<details id="help" class="box">
<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>Some characters need to be unlocked by making the ball touch bonuses.</p>
<p class="credits">Burl is an experiment by <a href="https://raphaelbastide.com/">Raphaël Bastide</a>.<br><a href="https://gitlab.com/raphaelbastide/burl">Sources on Gitlab</a> <br>→ Dedicated <a href="http://reddit.com/r/burl">subReddit</a><br><a href="https://niu.moe/@burl">Burl on Mastodon</a></p>
</details>
<div class="inner">
<h1>burl</h1>
<details id="inventory" class="box button"></details>
<details id="infobox" class="box button">
<summary>Info</summary>
</details>
<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>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>→ Dedicated <a target="_blank" href="http://reddit.com/r/burl">subReddit</a><br><a href="https://niu.moe/@burl">Burl on Mastodon</a></p>
</details>
</div>
</aside>
<main>
<span class="pause-btn button">
<span class="play-icon"></span>
<span class="pause-icon"></span>
</span>
</main>
<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>
......
var d = document,
infobox = d.getElementById("infobox"),
inventory = d.getElementById('inventory')
inventory = d.getElementById('inventory'),
body = d.getElementsByTagName("body")[0]
function preloadImgs() {
var images = ['img/burl-ball.svg','img/burl-bonus.svg'];
for (var i = 0; i < arguments.length; i++) {
images[i] = new Image();
images[i].src = preload.arguments[i];
}
}
preloadImgs()
function getDistances(unit){
var realW = unit.bounds.max.x - unit.bounds.min.x
......
......@@ -123,6 +123,27 @@
"posX": 3300,
"posY": 200,
"unlocks":"jump"
},
{
"name": "bonus4",
"role": "bonus",
"posX": 4800,
"posY": 100,
"unlocks":"invertedGravity"
},
{
"name": "bonus5",
"role": "bonus",
"posX": 8800,
"posY": 100,
"unlocks":"bulletTime"
},
{
"name": "bonus6",
"role": "bonus",
"posX": 12800,
"posY": 700,
"unlocks":"teleport"
}
]
}
......@@ -13,7 +13,8 @@ function launch(units, isRefresh){
Body = Matter.Body,
Events = Matter.Events;
var debug = false,
body = document.getElementsByTagName('body')[0],
main = d.getElementsByTagName('main')[0],
pauseBtn = d.querySelectorAll(".pause-btn")[0],
startX = 100,
startY = 300,
nextPos = 0,
......@@ -42,7 +43,6 @@ function launch(units, isRefresh){
c.parentElement.removeChild(c)
resetInfo()
}
// Listen to the URL hash change
window.onhashchange = locationHashChanged;
function locationHashChanged() {
......@@ -55,13 +55,12 @@ function launch(units, isRefresh){
// create engine
var engine = Engine.create(),
world = engine.world;
engine.world.gravity.y = 1;
// create renderer
engine.world.gravity.y = 1,
engine.enableSleeping = true
var render = Render.create({
element: document.body,
element: main,
engine:engine,
options: {
options: {
wireframes:false,
width: canvasW,
height: canvasH,
......@@ -69,6 +68,13 @@ function launch(units, isRefresh){
}
});
Render.run(render);
var runner = Runner.create();
runner.isFixed = true
Runner.run(runner, engine);
// Engine.run(engine);
// create renderer
var hash = testHash(data)
if (hash) {
for (var i = 0; i < hash.length; i++) {
......@@ -101,58 +107,57 @@ 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") {
console.log('t');
nextPos.x += 0
nextPos.y += unit.verticalShift
}else{
if (unit.verticalShift == 1) {
var posX = nextPos.x
var posY = nextPos.y + (unit.angle * 550)
}else if (unit.verticalShift == 0) {
var posX = nextPos.x + 35
var posY = nextPos.y + (unit.angle * 550)
}else if (unit.verticalShift == -1) {
var posX = nextPos.x
var posY = nextPos.y + (unit.angle * 550)
}
buildW += buildW * Math.round(Math.abs(unit.angle))
var toBuild = Bodies.rectangle(posX, posY, buildW - strokeWidth*2, buildH - strokeWidth*2, {isStatic:unit.isStatic,angle: Math.PI * unit.angle})
if (debug) {
toBuild.isLocked = false
}else {
toBuild.isLocked = unit.isLocked
}
toBuild.name = unit.name
if (checkLock(unit) === false || debug) { // if unlocked
toBuild.isSensor = unit.isSensor
toBuild.render.fillStyle = unit.color
toBuild.render.lineWidth = strokeWidth
}else{ // if locked
toBuild.isSensor = true
toBuild.render.lineWidth = 1
toBuild.render.fillStyle = "#ffffff00"
}
if (toBuild.name === "gap") {
toBuild.render.strokeStyle = "#ffffff00"
}else {
toBuild.render.strokeStyle = "black"
}
getDistances(toBuild)
if (toBuild != null) {
World.add(world,toBuild);
}
if (unit.verticalShift == 1) {
nextPos.x += Math.round(toBuild.distances.w)
nextPos.y -= Math.round(toBuild.distances.h) - realBuildH / 2
}else if (unit.verticalShift == 0) {
nextPos.x += Math.round(toBuild.distances.w)
nextPos.y += Math.round(toBuild.distances.h) - realBuildH / 2
}else {
nextPos.x += Math.round(toBuild.distances.w)
nextPos.y += Math.round(toBuild.distances.h) - realBuildH / 2 + 10
}
if (unit.role === "buildPlace") {
nextPos.x += 0
nextPos.y += unit.verticalShift
}else{
if (unit.verticalShift == 1) {
var posX = nextPos.x
var posY = nextPos.y + (unit.angle * 550)
}else if (unit.verticalShift == 0) {
var posX = nextPos.x + 35
var posY = nextPos.y + (unit.angle * 550)
}else if (unit.verticalShift == -1) {
var posX = nextPos.x
var posY = nextPos.y + (unit.angle * 550)
}
buildW += buildW * Math.round(Math.abs(unit.angle))
var toBuild = Bodies.rectangle(posX, posY, buildW - strokeWidth*2, buildH - strokeWidth*2, {isStatic:unit.isStatic,angle: Math.PI * unit.angle})
if (debug) {
toBuild.isLocked = false
}else {
toBuild.isLocked = unit.isLocked
}
toBuild.name = unit.name
if (checkLock(unit) === false || debug) { // if unlocked
toBuild.isSensor = unit.isSensor
toBuild.render.fillStyle = unit.color
toBuild.render.lineWidth = strokeWidth
}else{ // if locked
toBuild.isSensor = true
toBuild.render.lineWidth = 1
toBuild.render.fillStyle = "#ffffff00"
}
if (toBuild.name === "gap") {
toBuild.render.strokeStyle = "#ffffff00"
}else {
toBuild.render.strokeStyle = "black"
}
getDistances(toBuild)
if (toBuild != null) {
World.add(world,toBuild);
}
if (unit.verticalShift == 1) {
nextPos.x += Math.round(toBuild.distances.w)
nextPos.y -= Math.round(toBuild.distances.h) - realBuildH / 2
}else if (unit.verticalShift == 0) {
nextPos.x += Math.round(toBuild.distances.w)
nextPos.y += Math.round(toBuild.distances.h) - realBuildH / 2
}else {
nextPos.x += Math.round(toBuild.distances.w)
nextPos.y += Math.round(toBuild.distances.h) - realBuildH / 2 + 10
}
}