ROG Overlay

index.html

<div class="layer1">
  <div class="layer1Content">
    <div class="layer1Header">
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1061292/header.png' alt=''>
    </div>
    <div class="layer1Body">
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1061292/background_copy.png' alt=''>
      <div class="layer1Text">
        <div class="layer1TextHeader">BIT WINNERS</div>
        <div class="layer1Bits">
          <div class="layer1HeigthAdjust">
            <div class="layer1NumberOfBits">20.000</div>
            <div class="layer1BitsText">BITS</div>
          </div>
        </div>
        <div class="layer1AwardedTo">AWARDED TO...</div>
        <div class="layer1WinningPlayers">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="layer2">
  <div class="layer2Content">
    <div class="layer2WebcamFrame">
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1061292/frame.png' alt=''>
    </div>
  </div>
</div>
<div class="layer3">
  <div class="layer3Content">
    <div class="layer3FTCBox">
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1061292/FTCBox.png' alt=''>
    </div>
  </div>
</div>
<div class="layer4">
  <div class="layer4Content">
    <div class="layer4WaitingScreen">
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1061292/waitingscreen.jpg' alt=''>
    </div>
    <div class="layer4Countdown">05:19</div>
  </div>
</div>
<div class="layer5">
  <div class="layer5Content">
    <div class="layer5Header">
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1061292/header.png' alt=''>
    </div>
    <div class="layer5Body">
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1061292/background_copy.png' alt=''>
      <div class="layer5Text">
        <div class="layer5TextHeader">BOUNTIES</div>
        <div class="layer5WinningPlayers">
        </div>
      </div>
    </div>
  </div>
</div>

rog-overlay.markdown

ROG Overlay

A Pen by Bilgehan Zeki ÖZAYTAÇ on CodePen.

License.

script.js

//Config

//Layer 1 Bits Winner

//Bits winner box position

setPosition(`layer1`, 200, 0);
setOpacity(`layer1`, 0);

//Layer 2 Webcam Frame

//Webcam Frame position

setPosition(`layer2`, 200, 1000);

//Layer 3 FTC Box

//FTC Box position

setPosition(`layer3`, 50, 50);

//Layer 4 Fullscreen Countdown

//Fullscreen opacity

setOpacity(`layer4`, 0);

//Global functions

//Convert 10000 to 10.000

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

function setPosition(elem, top, left){
  
  $(`.${elem}Content`).css(`top`, top + `px`);
  $(`.${elem}Content`).css(`left`, left + `px`);
  
}

function setOpacity(elem, opacity){
  
  $(`.${elem}Content`).css(`opacity`, opacity);
  
}

//Layer 1 Bit Winners

//Example object

var updateBitWinnersObject = {
  "numberOfBits": 10000,
  "winners": [`Player 1`, `Player 2`, `Player 3`, `Player 4`, `Player 5`, `Player 6`, `Player 7`]
}

//Update function

function updateBitWinners(updateObject){
  $(`.layer1NumberOfBits`).html(numberWithCommas(updateObject.numberOfBits));
  $(`.layer1WinningPlayers`).html("");
  for(i = 0; i < updateObject.winners.length; i++){
    var div = document.createElement("div");
    div.innerHTML = updateObject.winners[i];
    $(`.layer1WinningPlayers`).append(div);
  }
  $(`.layer1Header`).css(`transform`,`translateX(0%)`);
  setTimeout(function(){
    $(`.layer1Body`).css(`height`,`85%`);
  }, 1000);
  
}

//Animate out after update

function animateOutLayer1(){
  $(`.layer1Body`).css(`height`,`0%`);
  setTimeout(function(){
    $(`.layer1Header`).css(`transform`,`translateX(-100%)`);
  }, 1000);
}

//Layer 5 Bounties

//Example objects

var updateBountiesObject = {
  "bounties": [
    {
      "Text": "MAKE 20 HEADSHOTS",
      "Completed": false,
      "id": 2
    },
    {
      "Text": "MAKE 10 HEADSHOTS",
      "Completed": true,
      "id": 4
    }
  ]
}

var updateBountiesObject2 = {
  "bounties": [
    {
      "Text": "MAKE 20 HEADSHOTS",
      "Completed": true,
      "id": 2
    },
    {
      "Text": "MAKE 10 HEADSHOTS",
      "Completed": true,
      "id": 4
    }
  ]
}

//Update function

function updateBounties(updateObject){
  for(i = 0; i < updateObject.bounties.length; i++){
    if($(`[data-id='${updateObject.bounties[i].id}']`)[0] == undefined){
      var div = $("<div></div>").text(updateObject.bounties[i]["Text"]);
      $(div).attr("data-id",updateObject.bounties[i].id);
      if(updateObject.bounties[i]["Completed"]){
        div.addClass("layer5Finished");
      }
      else{
        div.addClass("layer5Unfinished");
      }
      var flash = $("<div></div>");
      flash.addClass("layer5Flash");
      div.append(flash);
      $(`.layer5WinningPlayers`).append(div);
    }
    if(updateObject.bounties[i]["Completed"]){
      $(`[data-id='${updateObject.bounties[i].id}']`).attr("class", "layer5Finished");
    }
    else{
      $(`[data-id='${updateObject.bounties[i].id}']`).attr("class", "layer5Unfinished");
    }
  }
  $(`.layer5Header`).css(`transform`,`translateX(0%)`);
  setTimeout(function(){
    $(`.layer5Body`).css(`height`,`85%`);
  }, 1000);
  
}

//Animate out after update

function animateOutLayer5(){
  $(`.layer5Body`).css(`height`,`0%`);
  setTimeout(function(){
    $(`.layer5Header`).css(`transform`,`translateX(-100%)`);
  }, 1000);
}

//RUN LAYERS

//Layer 1

updateBitWinners(updateBitWinnersObject);

//Layer 5
updateBounties(updateBountiesObject);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.sass

//Global values

@font-face
  font-family: XoloniumBold
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1061292/Xolonium-Bold.otf)

@font-face
  font-family: RobotoMedium
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1061292/Roboto-Medium.ttf)

*
  margin: 0
  font-family: XoloniumBold
  transition-duration: 1s

img
  clear: both
  float: left
  width: -webkit-fill-available

//Local Values  

//Layer 1 Bit Winners

.layer1,.layer5
  position: absolute
  width: 1280px
  height: 720px
  
.layer1Content,.layer5Content
  position: relative
  width: 26%
  height: 78%
  top: 200px
  
.layer1Header,.layer5Header
  width: 100%
  height: 14%
  transform: translateX(-100%)
  
.layer1Body,.layer5Body
  width: 100%
  height: 0%
  position: relative
  overflow: hidden
  
.layer1Text,.layer5Text
  width: 100%
  height: 100%
  position: absolute
  top: 0
  left: 0
  
.layer1TextHeader,.layer5TextHeader
  color: white
  display: flex
  justify-content: center
  align-items: center
  width: 100%
  height: 57px
  font-size: 1.5vw
  
.layer1Bits
  color: white
  display: flex
  justify-content: center
  align-items: center
  height: 43px
  position: relative
  
.layer1NumberOfBits
  color: white
  display: flex
  justify-content: center
  align-items: center
  height: 100%
  font-size: 1.5vw
  font-family: RobotoMedium
  
.layer1BitsText
  color: white
  display: flex
  justify-content: center
  align-items: flex-end
  height: auto
  margin-left: 0.3vw
  font-family: RobotoMedium
  
.layer1AwardedTo
  color: white
  display: flex
  justify-content: center
  align-items: flex-end
  height: auto
  margin-left: 0.3vw
  font-family: RobotoMedium
  width: 50%
  height: 25px
  
.layer1WinningPlayers
  color: white
  display: flex
  justify-content: center
  align-items: center
  height: 75%
  font-family: RobotoMedium
  width: 100%
  flex-wrap: wrap
  
.layer1WinningPlayers>div
  width: 100%
  display: flex
  justify-content: center
  
.layer1HeigthAdjust
  display: flex
  
//Layer 2 Webcam Frame
  
.layer2
  position: absolute
  width: 1280px
  height: 720px
  
.layer2Content
  position: relative
  width: 36%
  height: 35%
  top: 200px
  left: 1000px
  
//Layer 3 FTC Box
  
.layer3
  position: absolute
  width: 1280px
  height: 720px
  
.layer3Content
  position: relative
  width: 9%
  height: 35%
  top: 50px
  left: 50px
  
//Layer 4 Waiting Screen
  
.layer4
  position: absolute
  width: 1280px
  height: 720px
  
.layer4Content
  position: relative
  width: 100%
  height: 100%
  top: 0px
  left: 0px
  
.layer4Countdown
  position: absolute
  color: white
  top: 79%
  left: 38%
  font-size: 2vw
  width: 24.7%
  height: 10%
  display: flex
  justify-content: center
  align-items: center
  //background-color: rgba(255,255,255,0.5)
  
//Layer 5 Bounties
  
.layer5WinningPlayers
  color: white
  display: flex
  justify-content: center
  align-items: center
  height: 88%
  font-family: RobotoMedium
  width: 100%
  flex-wrap: wrap
  
.layer5WinningPlayers>div
  height: 10%
  justify-content: left
  align-items: center
  position: relative
  display: flex
  font-size: 13px
  
.layer5Finished
  width: 100%
  background-color: rgba(0,0,0,0.6)
  opacity: 0.6
  
.layer5Unfinished
  width: 80%
  background-color: rgba(255,255,255,0.3)
  
.layer5Unfinished::before
  content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1061292/tickbox.png)
  margin-right: 11px
  margin-left: 11px
  margin-top: 2px
  
.layer5Finished::before
  content: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1061292/ticked.png)
  margin-right: 11px
  margin-left: 11px
  margin-top: 2px
  
.layer5Finished>div
  animation: flash
  animation-duration: 1s
  
.layer5Flash
  height: 100%
  width: 100%
  position: absolute
  background-color: white
  opacity: 0

  
@keyframes flash
  0%
    opacity: 1
  50%
    opacity: 1
  100%
    opacity: 0
  
.layer5HeigthAdjust
  display: flex