Hello,
I have both an HTML and Java script for a random number generator, but the Java Script does not appear to be loading. Could someone with experience with this help identify the problem?
Here is the site with the script for ease if the following is too long:
https://codepen.io/YuriSales/pen/XWmPjYm
HTML Script:
Java Script:
const SLOTS_PER_REEL = 10;
// radius = Math.round( ( panelWidth / 2) / Math.tan( Math.PI / SLOTS_PER_REEL ) );
// current settings give a value of 149, rounded to 150
const REEL_RADIUS = 120;
const TYPE = '3'; // 0: random, 1: 3000, 2: 0030, 3: 3000-0030
var isMixing = false;
var currentType = '1';
function createSlots (ring) {
var slotAngle = 360 / SLOTS_PER_REEL;
var seed = 0;
for (var i = 0; i < SLOTS_PER_REEL; i ++) {
var slot = document.createElement('div');
slot.className = 'slot';
// compute and assign the transform for this slot
var transform = 'rotateX(' + (slotAngle * i) + 'deg) translateZ(' + REEL_RADIUS + 'px)';
slot.style.transform = transform;
// setup the number to show inside the slots
// the position is randomized to
var content = $(slot).append('
' + ((seed + i)%SLOTS_PER_REEL)+ '
');// add the poster to the row
ring.append(slot);
}
}
function getSeed(type = '0', id = 0) {
// generate random number smaller than 13 then floor it to settle between 0 and 12 inclusive
if (type == '1')
return id == 0 ? 3 : 0;
else if (type == '2')
return id == 2 ? 3 : 0;
return Math.floor(Math.random()*(SLOTS_PER_REEL));
}
function spin(timer) {
setTimeout(function () {
spin(isMixing ? 1 : 2);
}, isMixing ? 100 : 5000);
//var txt = 'seeds: ';
for(var i = 1; i < 5; i ++) {
var oldSeed = -1;
/*
checking that the old seed from the previous iteration is not the same as the current iteration;
if this happens then the reel will not spin at all
*/
var oldClass = $('#ring'+i).attr('class');
if(oldClass.length > 4) {
oldSeed = parseInt(oldClass.slice(10));
console.log(oldSeed);
}
var seed = getSeed();
while(oldSeed == seed) {
seed = getSeed();
}
if (TYPE != '0')
seed = isMixing ? '9' : getSeed(currentType, i - 1);
$('#ring'+i)
.css('animation','back-spin 1s, spin-' + seed + ' ' + (timer + i*0.5) + 's')
.attr('class','ring spin-' + seed);
}
isMixing = !isMixing;
if (!isMixing) {
if (TYPE == '3')
currentType = (currentType == '1' ? '2' : '1');
}
console.log('=====');
}
$(document).ready(function() {
// initiate slots
createSlots($('#ring1'));
createSlots($('#ring2'));
createSlots($('#ring3'));
createSlots($('#ring4'));
// hook start button
$('.go').on('click',function(){
var timer = 2;
spin(timer);
document.getElementById("go").style.display = "none";
})
// hook xray checkbox
$('#xray').on('click',function(){
//var isChecked = $('#xray:checked');
var tilt = 'tiltout';
if($(this).is(':checked')) {
tilt = 'tiltin';
$('.slot').addClass('backface-on');
$('#rotate').css('animation',tilt + ' 2s 1');
setTimeout(function(){
$('#rotate').toggleClass('tilted');
console.log('A');
},2000);
} else {
tilt = 'tiltout';
$('#rotate').css({'animation':tilt + ' 2s 1'});
setTimeout(function(){
$('#rotate').toggleClass('tilted');
$('.slot').removeClass('backface-on');
},1900);
}
})
// hook perspective
$('#perspective').on('click',function(){
$('#stage').toggleClass('perspective-on perspective-off');
})
});