Skip to content
Snippets Groups Projects
Commit aa295edf authored by Commander-lol's avatar Commander-lol
Browse files

Interface now pure SVG (Scales better)

parent 8f7d0030
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 69 additions and 92 deletions
public/index.html
+ 69
− 92
View file @ aa295edf
...@@ -5,6 +5,12 @@ ...@@ -5,6 +5,12 @@
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<title>Pompey Plays...</title> <title>Pompey Plays...</title>
<style> <style>
html, body {
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.button .box { .button .box {
fill: #c3c5c4; fill: #c3c5c4;
stroke: #555a5d; stroke: #555a5d;
...@@ -12,6 +18,16 @@ ...@@ -12,6 +18,16 @@
.button .arrow { .button .arrow {
fill: #555a5d; fill: #555a5d;
} }
.hitbox {
fill: black;
opacity: 0;
transition: opacity 0.1s linear;
}
.hitbox:hover {
opacity: 0.3;
}
.button text { .button text {
font-family: sans-serif; font-family: sans-serif;
font-size: 150%; font-size: 150%;
...@@ -25,22 +41,6 @@ ...@@ -25,22 +41,6 @@
.commands .button text { .commands .button text {
font-size: 125%; 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 { #a .box {
fill: #c92313; fill: #c92313;
} }
...@@ -56,94 +56,71 @@ ...@@ -56,94 +56,71 @@
.hitbox:hover { .hitbox:hover {
opacity: 0.3; opacity: 0.3;
} }
svg {
.content, html, body { position: absolute;
margin: 0; left: 0;
padding: 0; right: 0;
width: 100%;
max-width: 500px;
height: 100%; height: 100%;
max-height: 500px; width: 100%;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="content"> <svg viewbox="0, 0, 500, 350">
<div class="group arrows"> <g class="group arrows" transform="translate(10,0)">
<!-- LEFT ARROW --> <g class="button" id="left" transform="translate(0,60)">
<div id="cont-left" style="position:absolute;left:0px;top:125px;height:200px;width:200px;"> <path class="box" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
<svg viewbox="0, 0, 100, 100" class="button" id="left"> <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="box" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" /> <path class="hitbox" 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" /> </g>
<path class="hitbox" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
</svg>
</div>
<!-- RIGHT ARROW --> <g class="button" id="right" transform="translate(120,60)">
<div id="cont-right" style="position:absolute;left:250px;top:125px;height:200px;width:200px;"> <path class="box" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
<svg viewbox="0, 0, 100, 100" class="button" id="right"> <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="box" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" /> <path class="hitbox" 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" /> </g>
<path class="hitbox" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
</svg>
</div>
<!-- UP ARROW --> <g class="button" id="up" transform="translate(60,0)">
<div id="cont-up" style="position:absolute;left:125px;top:0px;height:200px;width:200px;"> <path class="box" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
<svg viewbox="0, 0, 100, 100" class="button" id="up"> <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="box" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" /> <path class="hitbox" 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" /> </g>
<path class="hitbox" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
</svg>
</div>
<!-- DOWN ARROW --> <g class="button" id="down" transform="translate(60,120)">
<div id="cont-down" style="position:absolute;left:125px;top:250px;height:200px;width:200px;"> <path class="box" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" />
<svg viewbox="0, 0, 100, 100" class="button" id="down"> <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="box" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" /> <path class="hitbox" 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" /> </g>
<path class="hitbox" d="M 50,0 L 0,50 L 50,100 L 100,50 Z" /> </g>
</svg>
</div>
</div>
<div class="group letters"> <g class="group letters" transform="translate(260,0)">
<div style="position:absolute;left:125px;top:0px;width:200px;height:200px;"> <g class="button" id="a" transform="translate(60,120)">
<svg viewbox="0, 0, 100, 100" class="button" id="a"> <circle class="box" r="35" cx="50" cy="50"/>
<circle class="box" r="35" cx="50" cy="50"/> <text x="50" y="50" dy="7">A</text>
<text x="50" y="50" dy="7">A</text> <circle class="hitbox" r="35" cx="50" cy="50"/>
<circle class="hitbox" r="35" cx="50" cy="50"/> </g>
</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>
<div class="group commands"> <g class="button" id="b" transform="translate(120,60)">
<div style="position:absolute;left:0px;top:0px;width:200px;height:200px;"> <circle class="box" r="35" cx="50" cy="50"/>
<svg viewbox="0, 0, 100, 100" class="button" id="select"> <text x="50" y="50" dy="7">B</text>
<rect class="box" x="1" y="30" width="98" height="40" rx="25" ry="25"/> <circle class="hitbox" r="35" cx="50" cy="50"/>
<text x="50" y="50" dy="7">SELECT</text> </g>
<rect class="hitbox" x="0" y="30" width="100" height="40" rx="25" ry="25"/> </g>
</svg>
</div>
<div style="position:absolute;left:225px;top:0px;width:200px;height:200px;"> <g class="group commands" transform="translate(135,250)">
<svg viewbox="0, 0, 100, 100" class="button" id="start"> <g class="button" id="select" transform="translate(0,0)">
<rect class="box" x="1" y="30" width="98" height="40" rx="25" ry="25"/> <rect class="box" x="1" y="30" width="98" height="40" rx="25" ry="25"/>
<text x="50" y="50" dy="7">START</text> <text x="50" y="50" dy="7">SELECT</text>
<rect class="hitbox" x="0" y="30" width="100" height="40" rx="25" ry="25"/> <rect class="hitbox" x="0" y="30" width="100" height="40" rx="25" ry="25"/>
</svg> </g>
</div>
</div>
</div>
<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 src="/ws.lib" type="application/javascript"></script>
<script> <script>
var socket = new CombiSocket(), var socket = new CombiSocket(),
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment