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 @@
<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(),
......
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