From aa295edfc3bbcbf19803db529c1ecc3fcd65fb24 Mon Sep 17 00:00:00 2001
From: Commander-lol <ljcapitanio@gmail.com>
Date: Thu, 17 Dec 2015 19:49:33 +0000
Subject: [PATCH] Interface now pure SVG (Scales better)
---
public/index.html | 161 ++++++++++++++++++++--------------------------
1 file changed, 69 insertions(+), 92 deletions(-)
diff --git a/public/index.html b/public/index.html
index cddecab..a3a0c60 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,12 @@
<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;
@@ -12,6 +18,16 @@
.button .arrow {
fill: #555a5d;
}
+
+ .hitbox {
+ fill: black;
+ opacity: 0;
+ transition: opacity 0.1s linear;
+ }
+ .hitbox:hover {
+ opacity: 0.3;
+ }
+
.button text {
font-family: sans-serif;
font-size: 150%;
@@ -25,22 +41,6 @@
.commands .button text {
font-size: 125%;
}
- .group {
- position: absolute;
- width: 50%;
- height: 50%;
- display: block;
- float: left;
- clear: both;
- }
- .group.letters {
- left: 50%;
- top: 15%;
- }
- .group.commands {
- left: 25%;
- top: 50%;
- }
#a .box {
fill: #c92313;
}
@@ -56,94 +56,71 @@
.hitbox:hover {
opacity: 0.3;
}
-
- .content, html, body {
- margin: 0;
- padding: 0;
- width: 100%;
- max-width: 500px;
+ svg {
+ position: absolute;
+ left: 0;
+ right: 0;
height: 100%;
- max-height: 500px;
+ width: 100%;
}
-
</style>
</head>
<body>
- <div class="content">
- <div class="group arrows">
- <!-- LEFT ARROW -->
- <div id="cont-left" style="position:absolute;left:0px;top:125px;height:200px;width:200px;">
- <svg viewbox="0, 0, 100, 100" class="button" id="left">
- <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" />
- </svg>
- </div>
+ <svg viewbox="0, 0, 500, 350">
+ <g class="group arrows" transform="translate(10,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>
- <!-- RIGHT ARROW -->
- <div id="cont-right" style="position:absolute;left:250px;top:125px;height:200px;width:200px;">
- <svg viewbox="0, 0, 100, 100" class="button" id="right">
- <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" />
- </svg>
- </div>
+ <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>
- <!-- UP ARROW -->
- <div id="cont-up" style="position:absolute;left:125px;top:0px;height:200px;width:200px;">
- <svg viewbox="0, 0, 100, 100" class="button" id="up">
- <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" />
- </svg>
- </div>
+ <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>
- <!-- DOWN ARROW -->
- <div id="cont-down" style="position:absolute;left:125px;top:250px;height:200px;width:200px;">
- <svg viewbox="0, 0, 100, 100" class="button" id="down">
- <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" />
- </svg>
- </div>
- </div>
+ <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>
- <div class="group letters">
- <div style="position:absolute;left:125px;top:0px;width:200px;height:200px;">
- <svg viewbox="0, 0, 100, 100" class="button" id="a">
- <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"/>
- </svg>
- </div>
- <div style="position:absolute;left:0px;top:125px;width:200px;height:200px;">
- <svg viewbox="0, 0, 100, 100" class="button" id="b">
- <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"/>
- </svg>
- </div>
- </div>
+ <g class="group letters" transform="translate(260,0)">
+ <g class="button" id="a" transform="translate(60,120)">
+ <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>
- <div class="group commands">
- <div style="position:absolute;left:0px;top:0px;width:200px;height:200px;">
- <svg viewbox="0, 0, 100, 100" class="button" id="select">
- <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"/>
- </svg>
- </div>
+ <g class="button" id="b" transform="translate(120,60)">
+ <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>
- <div style="position:absolute;left:225px;top:0px;width:200px;height:200px;">
- <svg viewbox="0, 0, 100, 100" class="button" id="start">
- <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"/>
- </svg>
- </div>
- </div>
- </div>
+ <g class="group commands" transform="translate(135,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(),
--
GitLab