2 web/css/style.css.map
View file

Large diffs are not rendered by default.

75 web/index.html
View file
@@ -125,32 +125,75 @@
</div>
</header>
<main role="main" style="padding: 20px 20px">

<style>
pre{
height: 20em;
font-family: monospace;
font-size: 1em;
padding: 2px 5px;
color: rgb(233, 225, 217);
background-color: #212121;
border: 1px solid #030;
border-radius: 4px;
overflow: auto;
}</style>
<output id="output" style="font-size: 18px; font-weight: 600; font-family: 'Ubuntu Mono', monospace;">0</output><br>
<button id="tickPlay">PLAY</button>
<button id="tickStop">STOP</button>
<button id="getValue">GET VALUE</button>
<!-- <button onclick="myFunction()">Click me to start the animation.</button> -->
<button id="rollMove">Push this shit</button>
<pre id="log">Event information log
=====================
</pre>
<script>
// var x = document.getElementById("roller-five");
var
anim = document.getElementById("rollerSeven"),
log = document.getElementById("log"),
pfx = ["webkit", "moz", "MS", "o", ""];

// button click event
//anim.addEventListener("click", ToggleAnimation, false);

// function myFunction() {
// x.style.WebkitAnimation = "spin 4s 2";
// x.style.animation = "spin 4s 2";
// }
// animation listener events
PrefixedEvent(anim, "AnimationStart", AnimationListener);
PrefixedEvent(anim, "AnimationIteration", AnimationListener);
PrefixedEvent(anim, "AnimationEnd", AnimationListener);


// apply prefixed event handlers
function PrefixedEvent(element, type, callback) {
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
element.addEventListener(pfx[p]+type, callback, false);
}
}

// handle animation events
function AnimationListener(e) {
LogEvent("Animation '"+e.animationName+"' type '"+e.type+"' at "+e.elapsedTime.toFixed(2)+" seconds");
if (e.type.toLowerCase().indexOf("animationend") >= 0) {
LogEvent("Stopping animation...");
ToggleAnimation();
}
}

// start/stop animation
function ToggleAnimation(e) {
var on = (anim.className != "");
LogEvent("Animation is " +(on ? "disabled.\n" : "enabled."));
//anim.textContent = "Click to "+(on ? "start" : "stop")+" animation";
anim.className = (on ? "" : "enable");
if (e) e.preventDefault();
};

// log event in the console
function LogEvent(msg) {
log.textContent += msg + "\n";
var ot = log.scrollHeight - log.clientHeight;
if (ot > 0) log.scrollTop = ot;
}

/*function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
console.log(y);
return y;
}*/
</script>

</main>
51 web/js/counter.js
View file
@@ -2,7 +2,7 @@
document.addEventListener("DOMContentLoaded", (ev) => {
(()=>{
let a = new JackPotCounter({
tickLength: 10000,
tickLength: 5000,
qtyPerTick: 10
});

@@ -20,12 +20,17 @@ document.addEventListener("DOMContentLoaded", (ev) => {
rollerSix = document.getElementById('rollerSix'),
rollerSeven = document.getElementById('rollerSeven');

var elemArr = [rollerSeven, rollerSix, rollerFive, rollerFour, rollerThree, rollerTwo, rollerOne];

play.onclick = (ev) => {
play.onclick= (ev) => {
ev.preventDefault();
a.tickPlay().echo(output);
a.tickPlay().echo(output);
// setInterval(() => {
// ev.preventDefault();
// a.pushRoll(elemArr);
// }, a.tickLength + 100);
};
stop.onclick = (ev) => {
stop.onclick= (ev) => {
ev.preventDefault();
a.tickStop().echoStop();
};
@@ -35,26 +40,16 @@ document.addEventListener("DOMContentLoaded", (ev) => {
alert(a.getCurrentValue());
}

var elemArr = [rollerSeven, rollerSix, rollerFive, rollerFour, rollerThree, rollerTwo, rollerOne];



move.onclick = (ev) => {
move.onclick= (ev) => {
ev.preventDefault();

elemArr.forEach(function(item, i, elemArr) {
var multi = Math.pow(10, i);
console.log(i + ": " + multi);
a.pushRoll(item, multi);
});
a.pushRoll(elemArr);
};

/*run = (ev) => {
ev.preventDefault();
a.tickPlay().echo(output);
}*/


})();
}, false);

@@ -98,7 +93,7 @@ function JackPotCounter(options){
this.echo = ($) => {
this.echoTicker[0] = setInterval(()=>{
$.innerHTML = that.currentValue;
},1000);
},this.tickLength);
return this;
};
this.echoStop = () => {
@@ -119,18 +114,22 @@ function JackPotCounter(options){
return this.data.diffBetweenLatests;
};

this.pushRoll = (el, multi) => {
console.log(el);
this.pushRoll = (elemArr) => {
elemArr.forEach(function(el, i, elemArr) {
var multi = Math.pow(10, i);
console.log(i + ": " + multi);console.log(el);

var s = this.currentValue;
var analog = (((s * 10)/ multi).toFixed(3)).slice(0, -2);
var s = that.currentValue * 10;
var analog = ((s / multi).toFixed(3)).slice(0, -2);
if(+analog <= 0) return this;
el.style.WebkitAnimationDuration = (analog/that.tickLength)*1000 + "ms";
el.style.animationDuration = (analog/that.tickLength)*1000 + "ms";
el.style.WebkitAnimationPlayState = "running";
el.style.animationPlayState = "running";
el.style.WebkitAnimationIterationCount = analog;
el.style.animationIterationCount = analog;
console.log(analog);

//el.style.WebkitAnimationIterationCount = analog;
//el.style.animationIterationCount = analog;
console.log((analog/that.tickLength)*1000 + "ms");
});
return this;
};