Compare multiple array items
by panamaprophet
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="window-wrapper">
<div class="window-frame">
<div class="window">
<center>
<table cellspacing="0" cellpadding="0" border="0" width="703" height="254">
<tr>
<td valign="middle" align="center" width="20%">
<div class="slot-1" data-value="2"></div>
</td>
<td valign="middle" align="center" width="20%">
<div class="slot-2" data-value="2"></div>
</td>
<td valign="middle" align="center" width="20%">
<div class="slot-3" data-value="2"></div>
</td>
<td valign="middle" align="center" width="20%">
<div class="slot-4" data-value="2"></div>
</td>
<td valign="middle" align="center" width="20%">
<div class="slot-5" data-value="2"></div>
</td>
</tr>
<tr>
<td valign="middle" align="center" width="20%">
<div class="slot-5" data-value="4"></div>
</td>
<td valign="middle" align="center" width="20%">
<div class="slot-4" data-value="4"></div>
</td>
<td valign="middle" align="center" width="20%">
<div class="slot-3" data-value="4"></div>
</td>
<td valign="middle" align="center" width="20%">
<div class="slot-2" data-value="4"></div>
</td>
<td valign="middle" align="center" width="20%">
<div class="slot-1" data-value="4"></div>
</td>
</tr>
<tr>
<td valign="middle" align="center" width="20%">
<div class="slot-3" data-value="8"></div>
</td>
<td valign="middle" align="center" width="20%">
<div class="slot-1" data-value="8"></div>
</td>
<td valign="middle" align="center" width="20%">
<div class="slot-4" data-value="8"></div>
</td>
...
CSS
/*= CORE
========================= */
body{
background-color: #0e0e0e;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
font-size: 9pt;
color: #8A8A8A;
}
@font-face{
font-family: 'Open Sans', sans-serif;
src: (http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700);
}
/*= Content
========================= */
#wrapper{
margin: 0 auto;
width: 903px;
height: 704px;
}
div.content{
background-image: url("./images/bg.png");
background-repeat: no-repeat;
width: 904px;
height: 704px;
margin: 125px 0 0 0;
padding: 30px;
position: relative;
}
div.content > div.stats{
position: absolute;
top: 50px;
left: 55px;
}
div.content > div.stats > div:first-child{
color: #ca660b;
cursor: pointer;
}
div.content > div.stats > div:first-child:hover{
color: #894507;
cursor: pointer;
}
div.window-wrapper{
margin: 0 auto;
margin-top: 100px;
width: calc(100% - 80px);
height: 314px;
}
div.window-frame{
background-image: url("http://i.epvpimg.com/xFG4c.png");
background-repeat: no-repeat;
position: absolute;
z-index: 12;
}
div.window{
background-color: rgba(0, 0, 0, 0.5);
width: 703px;
height: 254px;
overflow: hidden;
margin: 30px;
}
div.window table tr td{
height: 85px;
}
div.window table tr td > div{
opacity: 0.5;
cursor: pointer;
}
div.window table tr td:hover > div{
opacity: 1;
}
div.notice{
width: calc(100% - 61px);
text-align: center;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 9pt;
margin-top: 25px;
display: none;
}
div.notice.error{
color: #a92828;
}
div.notice.success{
color: #1b7123;
}
div.level{
margin: 25px;
position: absolute;
bottom: 80px;
}
div.stakes{
margin: 25px;
position: absolute;
bottom: 80px;
right: 86px;
}
div.main{
margin: 25px;
position: absolute;
bottom: 80px;
left: 324px;
}
div.total-bet-window{
margin: 25px;
position: absolute;
bottom: 155px;
right: 91px;
}
div.total-bet{
background-image:...
JavaScript
function win_filter(sourceArray, indexesArray, compareToValue){
for (let i = 0; i < indexesArray.length; i++){
let index = indexesArray[i]
if (sourceArray[index] !== compareToValue) {
return false
}
}
return true
}
$(".shoot").on('click', function(){
//var numbers_array = ["slot-1", "slot-1", "slot-1", "slot-1", "slot-1", "slot-2", "slot-2", "slot-2", "slot-2", "slot-3", "slot-3", "slot-3", "slot-4", "slot-4", "slot-5"];
var numbers_array = ["slot-1", "slot-2" ] //, "slot-3"]//, "slot-4", "slot-5"];
var final_score = []
var target = $("div.window table");
var slots = target.find("tr td > div")
let updateSlotPromises = []
slots.each(function(){
updateSlotPromises.push(new Promise((resolve)=>{
$(this).fadeOut(function(){
$(this).removeAttr('class');
$(this).addClass(numbers_array[Math.floor(Math.random() * numbers_array.length)]);
$(this).fadeIn();
final_score.push($(this).attr("class"));
resolve()
});
}))
});
Promise.all(updateSlotPromises).then(() => {
numbers_array.forEach((value, index) => {
if (index === 0) console.log(numbers_array, final_score, value)
if (win_filter(final_score, [0, 2, 6], value)) {
$(".notice")
.html("You have won.")
.addClass("success")
.show();
}
})
});
});