Slot Machine: How do I validate whether all the 3 images are same in Slotmachine Block Javascript

[akhilmukkamala]

Hey, I am developing a slot machine. Here is my Code. After Certain rotates they’ll stop so now I want to check if the three images in the block are equal than an alert should come.

 
.machineContainer{
	background-color: #000;
	padding: 5px 1px 5px 1px;
	overflow: hidden;
	height: 135px;
}



#casino .content:nth-child(1) {
    text-align: center;
    /*background: url('../img/machine.png') no-repeat 50% 80px;*/
    height: 580px;
}

#casino .content > div {
    clear:both;
    padding-top: 200px;
    width: 300px;
    margin: 0 auto;
}


.slotMachine{
	/*width: 32.333333%;*/
      width: 38.333333%;
	border: 5px solid #000;
	height: 100px;
	padding: 0px;
	overflow: hidden;
	display: inline-block;
	text-align: center;
    background-color: #ffffff;
    margin-top: 40px;
}

.btn-group-casino {
    margin-top: 150px;
    margin-left: -32px;
    border:none;
    background-color: yellow;
    color: red;
}


.machineResult{
	color:#fff;
	text-align:center;
	font-weight: 900;
}
.noBorder{
	border:none !important;
	background: transparent !important;
}
.slotMachine .slot{
	height:100px;
	background-position-x: 55%;
	background-repeat: no-repeat;
}

.slot1 {
	background-image: url("../img/slot1.png");
}

.slot2 {
	background-image: url("../img/slot2.png");
}

.slot3 {
	background-image: url("../img/slot3.png");
}

.slot4 {
	background-image: url("../img/slot4.png");
}

.slot5 {
	background-image: url("../img/slot5.png");
}

.slot6 {
	background-image: url("../img/slot6.png");
}


// HTML 

  <div class="container">
    <div class="row">
      <div id="casino" style="padding-top:50px;">
        <div class="content">
          <div>
            <div id="casino1" class="slotMachine" style="margin-left: -65px;">
              <div class="slot slot1"></div>
              <div class="slot slot2"></div>
              <div class="slot slot3"></div>
              <div class="slot slot4"></div>
              <div class="slot slot5"></div>
              <div class="slot slot6"></div>
            </div>

            <div id="casino2" class="slotMachine">
              <div class="slot slot1"></div>
              <div class="slot slot2"></div>
              <div class="slot slot3"></div>
              <div class="slot slot4"></div>
              <div class="slot slot5"></div>
              <div class="slot slot6"></div>
            </div>

            <div id="casino3" class="slotMachine">
              <div class="slot slot1"></div>
              <div class="slot slot2"></div>
              <div class="slot slot3"></div>
              <div class="slot slot4"></div>
              <div class="slot slot5"></div>
              <div class="slot slot6"></div>
            </div>

            <div id="randomButton" type="button" class="btn btn-group-justified btn-group-casino">Start!</div>

          </div>

        </div>

      </div>

    </div>
  </div>

[Mittineague]

@akhilmukkamala

After Certain rotates they’ll stop so now I want to check if the three images in the block are equal than an alert should come.

You forgot to post your JavaScript code that does the “rotate”. I’m guessing that would be the best place to do the conditional testing, but without seeing it, I don’t know.

[Paul_Wilkins]

Here’s an effective way. Get the images, and then create a set from them. Images that are the same will end up in the same set. A set with a size of 1 means that all of the images are the same.

const getStyle = (el, styleName) => window.getComputedStyle(el)[styleName];
const slotImage = (slot) => getStyle(slot, "backgroundImage");
const slotImages = (slots) => Array.from(slots).map(slotImage);
const createUniqueImageSet = (slots) => new Set(slotImages(slots))

const slots = document.querySelectorAll(".slotMachine .slot1");
const uniqueImages = createUniqueImageSet(slots);
if (uniqueImages.size === 1) {
  alert("You win!");
}