initial commit. Moved from WBM repo.
This commit is contained in:
commit
1084267b69
3 changed files with 241 additions and 0 deletions
239
Elo.html
Normal file
239
Elo.html
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta
|
||||
http-equiv="Cache-Control"
|
||||
content="no-cache, no-store, must-revalidate"
|
||||
/>
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<style>
|
||||
:root {
|
||||
--width: 325px;
|
||||
--height: 100px;
|
||||
--border-radius: 15px;
|
||||
--bg: linear-gradient(90deg, #313131, #161616);
|
||||
--accent: rgb(88, 55, 236);
|
||||
--accent2: rgb(48, 29, 131);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Box Container */
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
position: relative;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--bg);
|
||||
transition: width 500ms ease, opacity 300ms, ease;
|
||||
}
|
||||
|
||||
/* Progress Line */
|
||||
|
||||
#line {
|
||||
box-shadow: 0px 5px 20px #000;
|
||||
z-index: -1;
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
position: absolute;
|
||||
border-radius: var(--border-radius);
|
||||
transform: translate(0px, 3px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#line::before,
|
||||
#line::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
z-index: -1;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: var(--border-radius);
|
||||
animation: slide 5s linear infinite alternate;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
/* Elo data */
|
||||
|
||||
#elo-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
border-radius: var(--border-radius);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-self: center;
|
||||
transition: top 500ms ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.killsElo,
|
||||
.gamesElo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
font-size: 44px;
|
||||
}
|
||||
|
||||
/* Data descriptor */
|
||||
|
||||
.descriptor {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Delta */
|
||||
|
||||
#delta-container {
|
||||
width: var(--width);
|
||||
height: var(--height);
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
font-size: 20px;
|
||||
top: -15px;
|
||||
z-index: 10;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#killsEloDelta,
|
||||
#gamesEloDelta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 25px;
|
||||
width: 50px;
|
||||
padding: 0 10px 0 10px;
|
||||
border-radius: 10px;
|
||||
transition: transform 200ms ease, opacity 300ms ease;
|
||||
}
|
||||
|
||||
#killsEloDelta {
|
||||
background: linear-gradient(to right, var(--accent), var(--accent2));
|
||||
box-shadow: 0 2px 5px var(--accent);
|
||||
}
|
||||
|
||||
#gamesEloDelta {
|
||||
background: linear-gradient(to right, gray, #313131);
|
||||
box-shadow: 0 2px 5px rgb(77, 77, 77);
|
||||
}
|
||||
|
||||
.positive::before {
|
||||
content: "+";
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div id="line"></div>
|
||||
|
||||
<div id="delta-container">
|
||||
<span class="positive" id="killsEloDelta">0</span>
|
||||
<span class="positive" id="gamesEloDelta">0</span>
|
||||
</div>
|
||||
|
||||
<div id="elo-container">
|
||||
<div class="killsElo">
|
||||
<span id="killsElo">0000</span>
|
||||
<p class="descriptor">kills Elo</p>
|
||||
</div>
|
||||
<div class="gamesElo">
|
||||
<span id="gamesElo">0000</span>
|
||||
<p class="descriptor">games Elo</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="lib/reconnecting-websocket.min.js"></script>
|
||||
<script type="module">
|
||||
import { CountUp } from "./lib/countUp.min.js";
|
||||
|
||||
let socket = new ReconnectingWebSocket("ws://127.0.0.1:24601/json");
|
||||
|
||||
socket.onopen = () => console.log("Socket Connected!");
|
||||
|
||||
let killsEloDelta = document.getElementById("killsEloDelta");
|
||||
let gamesEloDelta = document.getElementById("gamesEloDelta");
|
||||
|
||||
let killsEloCountUp = new CountUp("killsElo", 0, 0, 0, 0.5, {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: " ",
|
||||
decimal: ".",
|
||||
});
|
||||
let gamesEloCountUp = new CountUp("gamesElo", 0, 0, 0, 0.5, {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: " ",
|
||||
decimal: ".",
|
||||
});
|
||||
let killsEloDeltaCountUp = new CountUp("killsEloDelta", 0, 0, 0, 0.5, {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: " ",
|
||||
decimal: ".",
|
||||
});
|
||||
let gamesEloDeltaCountUp = new CountUp("gamesEloDelta", 0, 0, 0, 0.5, {
|
||||
useEasing: true,
|
||||
useGrouping: true,
|
||||
separator: " ",
|
||||
decimal: ".",
|
||||
});
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
let data = JSON.parse(event.data);
|
||||
|
||||
if (data.playerStatsArray[data.localPlayerIndex].killsEloDelta < 0) {
|
||||
killsEloDelta.classList.remove("positive");
|
||||
} else {
|
||||
killsEloDelta.classList.add("positive");
|
||||
}
|
||||
|
||||
if (data.playerStatsArray[data.localPlayerIndex].gamesEloDelta < 0) {
|
||||
gamesEloDelta.classList.remove("positive");
|
||||
} else {
|
||||
gamesEloDelta.classList.add("positive");
|
||||
}
|
||||
|
||||
killsEloCountUp.update(
|
||||
data.playerStatsArray[data.localPlayerIndex].killsElo
|
||||
);
|
||||
|
||||
killsEloDeltaCountUp.update(
|
||||
data.playerStatsArray[data.localPlayerIndex].killsEloDelta
|
||||
);
|
||||
|
||||
gamesEloCountUp.update(
|
||||
data.playerStatsArray[data.localPlayerIndex].gamesElo
|
||||
);
|
||||
|
||||
gamesEloDeltaCountUp.update(
|
||||
data.playerStatsArray[data.localPlayerIndex].gamesEloDelta
|
||||
);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1
lib/countUp.min.js
vendored
Normal file
1
lib/countUp.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(t){for(var i,a=1,s=arguments.length;a<s;a++)for(var n in i=arguments[a])Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n]);return t}).apply(this,arguments)},CountUp=function(){function t(t,i,a){var s=this;this.target=t,this.endVal=i,this.options=a,this.version="2.0.8",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(t){s.startTime||(s.startTime=t);var i=t-s.startTime;s.remaining=s.duration-i,s.useEasing?s.countDown?s.frameVal=s.startVal-s.easingFn(i,0,s.startVal-s.endVal,s.duration):s.frameVal=s.easingFn(i,s.startVal,s.endVal-s.startVal,s.duration):s.countDown?s.frameVal=s.startVal-(s.startVal-s.endVal)*(i/s.duration):s.frameVal=s.startVal+(s.endVal-s.startVal)*(i/s.duration),s.countDown?s.frameVal=s.frameVal<s.endVal?s.endVal:s.frameVal:s.frameVal=s.frameVal>s.endVal?s.endVal:s.frameVal,s.frameVal=Number(s.frameVal.toFixed(s.options.decimalPlaces)),s.printValue(s.frameVal),i<s.duration?s.rAF=requestAnimationFrame(s.count):null!==s.finalEndVal?s.update(s.finalEndVal):s.callback&&s.callback()},this.formatNumber=function(t){var i,a,n,e,r=t<0?"-":"";i=Math.abs(t).toFixed(s.options.decimalPlaces);var o=(i+="").split(".");if(a=o[0],n=o.length>1?s.options.decimal+o[1]:"",s.options.useGrouping){e="";for(var l=0,h=a.length;l<h;++l)0!==l&&l%3==0&&(e=s.options.separator+e),e=a[h-l-1]+e;a=e}return s.options.numerals&&s.options.numerals.length&&(a=a.replace(/[0-9]/g,function(t){return s.options.numerals[+t]}),n=n.replace(/[0-9]/g,function(t){return s.options.numerals[+t]})),r+s.options.prefix+a+n+s.options.suffix},this.easeOutExpo=function(t,i,a,s){return a*(1-Math.pow(2,-10*t/s))*1024/1023+i},this.options=__assign(__assign({},this.defaults),a),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(i),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.resetDuration(),this.options.separator=String(this.options.separator),this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof t?document.getElementById(t):t,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined"}return t.prototype.determineDirectionAndSmartEasing=function(){var t=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>t;var i=t-this.startVal;if(Math.abs(i)>this.options.smartEasingThreshold){this.finalEndVal=t;var a=this.countDown?1:-1;this.endVal=t+a*this.options.smartEasingAmount,this.duration=this.duration/2}else this.endVal=t,this.finalEndVal=null;this.finalEndVal?this.useEasing=!1:this.useEasing=this.options.useEasing},t.prototype.start=function(t){this.error||(this.callback=t,this.duration>0?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},t.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},t.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},t.prototype.update=function(t){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(t),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.finalEndVal=null,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},t.prototype.printValue=function(t){var i=this.formattingFn(t);"INPUT"===this.el.tagName?this.el.value=i:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=i:this.el.innerHTML=i},t.prototype.ensureNumber=function(t){return"number"==typeof t&&!isNaN(t)},t.prototype.validateValue=function(t){var i=Number(t);return this.ensureNumber(i)?i:(this.error="[CountUp] invalid start or end value: "+t,null)},t.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*Number(this.options.duration),this.remaining=this.duration},t}();export{CountUp};
|
||||
1
lib/reconnecting-websocket.min.js
vendored
Normal file
1
lib/reconnecting-websocket.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
!function(a,b){"function"==typeof define&&define.amd?define([],b):"undefined"!=typeof module&&module.exports?module.exports=b():a.ReconnectingWebSocket=b()}(this,function(){function a(b,c,d){function l(a,b){var c=document.createEvent("CustomEvent");return c.initCustomEvent(a,!1,!1,b),c}var e={debug:!1,automaticOpen:!0,reconnectInterval:1e3,maxReconnectInterval:3e4,reconnectDecay:1.5,timeoutInterval:2e3};d||(d={});for(var f in e)this[f]="undefined"!=typeof d[f]?d[f]:e[f];this.url=b,this.reconnectAttempts=0,this.readyState=WebSocket.CONNECTING,this.protocol=null;var h,g=this,i=!1,j=!1,k=document.createElement("div");k.addEventListener("open",function(a){g.onopen(a)}),k.addEventListener("close",function(a){g.onclose(a)}),k.addEventListener("connecting",function(a){g.onconnecting(a)}),k.addEventListener("message",function(a){g.onmessage(a)}),k.addEventListener("error",function(a){g.onerror(a)}),this.addEventListener=k.addEventListener.bind(k),this.removeEventListener=k.removeEventListener.bind(k),this.dispatchEvent=k.dispatchEvent.bind(k),this.open=function(b){h=new WebSocket(g.url,c||[]),b||k.dispatchEvent(l("connecting")),(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","attempt-connect",g.url);var d=h,e=setTimeout(function(){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","connection-timeout",g.url),j=!0,d.close(),j=!1},g.timeoutInterval);h.onopen=function(){clearTimeout(e),(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onopen",g.url),g.protocol=h.protocol,g.readyState=WebSocket.OPEN,g.reconnectAttempts=0;var d=l("open");d.isReconnect=b,b=!1,k.dispatchEvent(d)},h.onclose=function(c){if(clearTimeout(e),h=null,i)g.readyState=WebSocket.CLOSED,k.dispatchEvent(l("close"));else{g.readyState=WebSocket.CONNECTING;var d=l("connecting");d.code=c.code,d.reason=c.reason,d.wasClean=c.wasClean,k.dispatchEvent(d),b||j||((g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onclose",g.url),k.dispatchEvent(l("close")));var e=g.reconnectInterval*Math.pow(g.reconnectDecay,g.reconnectAttempts);setTimeout(function(){g.reconnectAttempts++,g.open(!0)},e>g.maxReconnectInterval?g.maxReconnectInterval:e)}},h.onmessage=function(b){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onmessage",g.url,b.data);var c=l("message");c.data=b.data,k.dispatchEvent(c)},h.onerror=function(b){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onerror",g.url,b),k.dispatchEvent(l("error"))}},1==this.automaticOpen&&this.open(!1),this.send=function(b){if(h)return(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","send",g.url,b),h.send(b);throw"INVALID_STATE_ERR : Pausing to reconnect websocket"},this.close=function(a,b){"undefined"==typeof a&&(a=1e3),i=!0,h&&h.close(a,b)},this.refresh=function(){h&&h.close()}}return a.prototype.onopen=function(){},a.prototype.onclose=function(){},a.prototype.onconnecting=function(){},a.prototype.onmessage=function(){},a.prototype.onerror=function(){},a.debugAll=!1,a.CONNECTING=WebSocket.CONNECTING,a.OPEN=WebSocket.OPEN,a.CLOSING=WebSocket.CLOSING,a.CLOSED=WebSocket.CLOSED,a});
|
||||
Loading…
Add table
Add a link
Reference in a new issue