first commit

assets/css/styles.css

@@ -0,0 +1,153 @@
+html, body {
+    margin: 0;
+    height: 100%;
+    overflow: hidden;
+}
+
+@font-face{
+    font-family: 'FRITZQUAD';
+    src: url('../fonts/FRIZQUAD.TTF');
+}
+
+#background {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    min-width: 100%;
+    min-height: 100%;
+    transform: translateX(calc((100% - 100vw) / 2));
+    z-index: -1;
+}
+
+#logo {
+    z-index: 1;
+    top: 20px;
+    left: 20px;
+    position: absolute;
+}
+
+#quitButtonContainer {
+    bottom: 10px;
+    right: 10px;
+    position: absolute;
+}
+
+#queueBox {
+    position: fixed;
+    width: 720px;
+}
+
+#queueTextContainer {
+    position: fixed;
+    margin-bottom: 50px;
+    background-color: transparent;
+    width: 650px;
+    height: 110px;
+    line-height: 70%;
+    z-index: 2;
+}
+
+#realmListButton{
+    margin-top: 120px;
+}
+
+#copyrightText {
+    font-family: 'FRITZQUAD';
+    font-size: 15px;
+    text-align: left;
+    color: #ffc700;
+    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 3px #000;
+}
+
+#buildDate {
+    position: fixed;
+    font-family: 'FRITZQUAD';
+    font-size: 15px;
+    text-align: left;
+    color: #ffc700;
+    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 3px #000;
+
+    bottom: -8px;
+    left: 10px;
+}
+
+#buildVersion {
+    position: fixed;
+    font-family: 'FRITZQUAD';
+    font-size: 15px;
+    text-align: left;
+    color: #ffc700;
+    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 3px #000;
+
+    bottom: 10px;
+    left: 10px;
+}
+
+.queueText {
+    font-family: 'FRITZQUAD';
+    font-size: 22px;
+    text-align: center;
+    color: #ffc700;
+    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 3px #000;
+}
+
+.button {
+    font-family: 'FRITZQUAD';
+    font-size: 23px;
+    text-align: center;
+    color: #ffc700;
+    text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000;
+
+    background: url('../img/ui/buttons/button_idle.png') no-repeat top;
+    width: 270px;
+    height: 71px;
+    border: none;
+    outline: none;
+    display: inline-block;
+    transform: scale(0.8);
+    z-index: 2;
+}
+
+.button:hover {
+    font-family: 'FRITZQUAD';
+    text-align: center;
+    color: #ffffff;
+    text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000;
+
+    background: url('../img/ui/buttons/button_hover.png') no-repeat top;
+}
+
+.button:active {
+    font-family: 'FRITZQUAD';
+    font-size: 22px;
+    text-align: center;
+    color: #ffffff;
+    text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000;
+
+    background: url('../img/ui/buttons/button_pressed.png') no-repeat top;
+}
+
+.centered {
+    min-height: 100vh;
+    display:flex;
+    flex-direction: column;
+    justify-content:center;
+    align-items:center;
+}
+
+.fullWidth
+{
+    display: flex;
+    align-items:center;
+    justify-content:center;
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: 40px;
+    z-index: 2;
+}
+
+.foreground {
+    z-index: 1;
+}

assets/js/audiohandler.js

@@ -0,0 +1,83 @@
+var bgSelection = 0;
+var audioSelect = {
+    'Shadowlands' : './assets/audio/Shadowlands.ogg'
+}
+var audio;
+var audioInitialPlayback = false;
+var queuePos = null;
+var disconnected = false;
+
+function init()
+{
+    audio = new Audio(audioSelect.Shadowlands);
+    window.addEventListener('click', waitForInteractionToPlayAudio);
+
+    getPositionInQueue();
+    setInterval( ()=>
+    {    
+        determineIfDisconnect();
+    }, 5000);
+}
+
+function waitForInteractionToPlayAudio()
+{
+    if(!audioInitialPlayback)
+    {
+        audio.play();
+        audioInitialPlayback = true;
+    }
+}
+
+function determineIfDisconnect()
+{
+    if(!disconnected)
+    {
+        var rand = Math.random();
+
+        if(rand > 0.2)
+        {
+            if(rand < 0.75)
+                getPositionInQueue();
+        }
+        else
+        {
+            doDisconnect();
+        }
+    }
+}
+
+function getPositionInQueue()
+{
+    var number;
+    if(queuePos === null)
+    {    
+        number = Math.floor(Math.random() * Math.floor(10000));
+        queuePos = number;
+    }
+    else
+    {
+        number = Math.floor(queuePos - (Math.random() * Math.floor(15)));
+        queuePos = number;
+
+        if(queuePos < 1)
+        {
+            number = 0;
+            queuePos = 0;
+        }
+    }
+
+    document.getElementById('queuePosition').innerHTML = 'Position in Queue: ' + number;
+    getEstimatedTime(number)
+}
+
+function getEstimatedTime(qPos)
+{
+    var time = Math.floor(Math.floor(qPos*2*3*2 + ((qPos*2*3*3) - (qPos*2*3*2)) * Math.random()) * 0.01);
+    document.getElementById('queueTime').innerHTML = 'Estimated time: ' + time + ' min';
+}
+
+function doDisconnect()
+{
+    // disconnected = true;
+    // console.log("DC'd")
+}

index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset=utf-8 />
+        <title>Another Dumb Meme</title>
+        <link rel="stylesheet" href="assets/css/styles.css">
+        <script src="assets/js/audiohandler.js" type="text/javascript"></script>
+    </head>
+    <body onload="init();">
+        
+        <!-- LOGO -->
+        <img src="assets/img/ui/logos/Shadowlands.png" style="width: 400px;" id="logo">
+        
+        <!--QUIT BUTTON-->
+        <div id="quitButtonContainer" class="foreground">
+            <button class="button"> Quit </button>
+        </div>
+        
+        <!--QUEUE BOX-->
+        <div class="centered">
+            <img src="assets/img/ui/queuebox.png" id="queueBox">
+            
+            <div id="queueTextContainer">
+                <p class="queueText">Realm is Full</p>
+                <p class="queueText" id="queuePosition">Position in Queue: 0000</p>
+                <p class="queueText" id="queueTime">Estimated time: 999 min</p>
+            </div>
+            
+            <button class="button" id="realmListButton"> Change Realm </button>
+        </div>
+        
+        <!--COPYRIGHT TEXT-->
+        <div class="fullWidth">
+            <p id="copyrightText">Copyright 2004-2020 Blizzard Entertainment. All Right Reserved.</p>
+        </div>
+
+        <!--BUILD VER-->
+        <p id="buildVersion">Version 9.0.1 (35944) (Release x64)</p>
+
+        <!--BUILD DATE-->
+        <p id="buildDate">Oct 13 2020</p>
+
+        <!-- BACKGROUND -->
+        <video autoplay muted loop id="background">
+            <source src="assets/img/bg/Shadowlands.webm" type="video/webm">
+        </video>
+
+    </body>
+</html>