Mitigate Unplanned Scale Issues with an iRule Waiting Room
Published Apr 14, 2020
Version 1.0Was this article helpful?
waitingroom.html:
<html>
<head>
<meta http-equiv="refresh" content="60">
<title>Online Waiting Room</title>
<style>
</style>
<script type="text/javascript" src="bb.js"></script>
</head>
<body onload="init();">
<center>
<h2>Online Waiting Room</h2>
<h3>Hey there...sorry about the wait!</h3>
<p>We currently have an exceptionally large number of visitors on the site and you are in the queue.</p>
<p>Please hold tight, it should only be a few minutes. Make sure you stay on this page and you will be automatically redirected shortly.</p>
<div>
<canvas id="canvas" width="800" height="600">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
<img src="bar.png" id="bar" style="display:none"/>
</center>
</body>
</html>
bb.js (found it on the web and updated it, it wasn't sited inline and I forgot to grab the URL so no citation. Sorry!)
var canvas;
var ctx;
var dx = 1;
var dy = 2;
var bar=new Bar(400,500);
var circle=new Circle(400,30,10);
var dxBar=6;
var timer;
var barImg;
function Bar(x,y){
this.x=x;
this.y=y;
}
function Circle(x,y,r){
this.x=x;
this.y=y;
this.r=r;
}
function drawBall(c) {
ctx.beginPath();
ctx.arc(c.x, c.y, c.r, 0, Math.PI*2, true);
ctx.fill();
}
function doKeyDown(e){
if(e.keyCode==37){
if(bar.x-dxBar>0)
bar.x-=dxBar;
}
else if(e.keyCode==39){
if(bar.x+dxBar<canvas.width)
bar.x+=dxBar;
}
}
function init() {
window.addEventListener("keydown",doKeyDown,false);
barImg=document.getElementById("bar");
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
timer=setInterval(draw, 3);
return timer;
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#FAF7F8";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = "#003300";
drawBall(circle);
if (circle.x +dx > canvas.width || circle.x +dx < 0)
dx=-dx;
if(circle.y+dy>bar.y && circle.x>bar.x && circle.x<bar.x+barImg.width)
dy=-dy;
if (circle.y +dy > canvas.height || circle.y +dy < 0)
dy=-dy;
circle.x += dx;
circle.y += dy;
ctx.drawImage(barImg,bar.x,bar.y);
if(circle.y>bar.y){
clearTimeout(timer);
ctx.clearRect(0, 0, canvas.width, canvas.height);
alert("Game Over");
}
}