<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<title>Pompey Plays...</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.button .box {
fill: #c3c5c4;
stroke: #555a5d;
}
.button .arrow {
fill: #555a5d;
}
.hitbox {
fill: black;
opacity: 0;
transition: opacity 0.1s linear;
}
.hitbox:active {
opacity: 0.3;
}
.button text {
font-family: sans-serif;
font-size: 150%;
fill: #555a5d;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.commands .button text {
font-size: 125%;
}
#a .box {
fill: #c92313;
}
#b .box {
fill: #f0ba24;
}
#y .box {
fill: #11ff33;
}
#x .box {
fill: #1133ff;
}
svg {
position: absolute;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<svg viewbox="0, 0, 700, 350">
<g class="group arrows" transform="translate(110,0)">
<g class="button" id="left" transform="translate(0,60)">
<path class="box" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
<path class="arrow" d="M 50,10 L 60,20 L 30,50 L 60,80 L 50,90 L 10,50 Z" />
<path class="hitbox" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
</g>
<g class="button" id="right" transform="translate(120,60)">
<path class="box" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
<path class="arrow" d="M 50,10 L 40,20 L 70,50 L 40,80 L 50,90 L 90,50 Z" />
<path class="hitbox" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
</g>
<g class="button" id="up" transform="translate(60,0)">
<path class="box" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
<path class="arrow" d="M 10,50 L 20,60 L 50,30 L 80,60 L 90,50 L 50,10 Z" />
<path class="hitbox" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
</g>
<g class="button" id="down" transform="translate(60,120)">
<path class="box" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
<path class="arrow" d="M 10,50 L 20,40 L 50,70 L 80,40 L 90,50 L 50,90 Z" />
<path class="hitbox" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
</g>
</g>
<g class="group shoulders" transform="translate(100, 0)">
<g class="button" id="l" transform="translate(-100,0)">
<rect class="box" x="1" y="30" width="98" height="40" rx="15" ry="15"/>
<text x="50" y="50" dy="7">L</text>
<rect class="hitbox" x="1" y="30" width="98" height="40" rx="15" ry="15"/>
</g>
<g class="button" id="r" transform="translate(500,0)">
<rect class="box" x="1" y="30" width="98" height="40" rx="15" ry="15"/>
<text x="50" y="50" dy="7">R</text>
<rect class="hitbox" x="1" y="30" width="98" height="40" rx="15" ry="15"/>
</g>
</g>
<g class="group letters" transform="translate(360,0)">
<g class="button" id="a" transform="translate(120,60)">
<circle class="box" r="35" cx="50" cy="50"/>
<text x="50" y="50" dy="7">A</text>
<circle class="hitbox" r="35" cx="50" cy="50"/>
</g>
<g class="button" id="b" transform="translate(60,120)">
<circle class="box" r="35" cx="50" cy="50"/>
<text x="50" y="50" dy="7">B</text>
<circle class="hitbox" r="35" cx="50" cy="50"/>
</g>
<g class="button" id="y" transform="translate(0,60)">
<circle class="box" r="35" cx="50" cy="50"/>
<text x="50" y="50" dy="7">Y</text>
<circle class="hitbox" r="35" cx="50" cy="50"/>
</g>
<g class="button" id="x" transform="translate(60,0)">
<circle class="box" r="35" cx="50" cy="50"/>
<text x="50" y="50" dy="7">X</text>
<circle class="hitbox" r="35" cx="50" cy="50"/>
</g>
</g>
<g class="group commands" transform="translate(235,250)">
<g class="button" id="select" transform="translate(0,0)">
<rect class="box" x="1" y="30" width="98" height="40" rx="25" ry="25"/>
<text x="50" y="50" dy="7">SELECT</text>
<rect class="hitbox" x="0" y="30" width="100" height="40" rx="25" ry="25"/>
</g>
<g class="button" id="start" transform="translate(120,0)">
<rect class="box" x="1" y="30" width="98" height="40" rx="25" ry="25"/>
<text x="50" y="50" dy="7">START</text>
<rect class="hitbox" x="0" y="30" width="100" height="40" rx="25" ry="25"/>
</g>
</g>
</svg>
<script src="/ws.lib" type="application/javascript"></script>
<script>
var socket = new CombiSocket(),
keys = [
"a",
"b",
"y",
"x",
"l",
"r",
"left",
"right",
"up",
"down",
"select",
"start"
],
sendKey = function(key) {
socket.message("input", {key: key});
};
socket.on("input-response", function(data) {
console.log(data);
});
keys.map(function(e) {
document.querySelector("#" + e + " .hitbox").addEventListener("click", sendKey.bind(null, e));
})
</script>
</body>
</html>