<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Fight</title>
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
<link rel="icon" href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/microsoft/153/crossed-swords_2694.png"/>
<style>
html,body{
height:100%;
margin:0;
}
body{
-moz-user-select:none;
user-select:none;
background:#555;
background-repeat:repeat;
font-family:'Bungee',cursive;
// overflow:hidden;
}
#svg1{
width:100%;
height:100%;
}
#d1{
position:absolute;
width:50%;
height:100%;
top:0;
left:0;
text-align:center;
}
#d2{
position:absolute;
width:50%;
height:100%;
top:0;
right:0;
text-align:center;
}
table{
width:80%;
border-collapse:collapse;
}
table,th,td{
font-size:10px;
text-align:center;
border:1px solid black;
background:#aaa;
}
td{
width:20%;
margin:0;
}
input{
text-align:center;
width:100%;
border:none;
outline:none;
background:none;
}
input:focus{
border:none;
}
</style>
</head>
<body>
<svg id="svg1">
<rect x="0" y="90%" fill="#ea4335" height="10%" width="50%" id="lifebar1"/>
<text x="2%" y="95%" font-size="sans-serif" text-anchor="middle" alignment-baseline="central" font-size="120">100</text>
<rect x="50%" y="90%" fill="#ea4335" height="10%" width="50%" id="lifebar2"/>
<text x="98%" y="95%" font-size="sans-serif" text-anchor="middle" alignment-baseline="central" font-size="120">100</text>
<g transform="translate(0 0)" id="g1a">
<g transform="scale(-1 1)" id="g1b">
<image xlink:href="https://i.pinimg.com/originals/a2/85/73/a2857398516c9bf584674fb68bee1619.gif" width="122" height="190" x="-61" y="-95"/>
</g>
</g>
<g transform="translate(0 0)" id="g2a">
<g transform="scale(1 1)" id="g2b">
<image xlink:href="https://i.pinimg.com/originals/a2/85/73/a2857398516c9bf584674fb68bee1619.gif" width="122" height="190" x="-61" y="-95"/>
</g>
</g>
<circle cx="50%" cy="50%" r="5%" fill="#ea4335"/>
<text x="50%" y="50%" font-size="sans-serif" text-anchor="middle" alignment-baseline="central" font-size="120">START</text>
</svg>
<div id="d1">PLAYER 1
<br>
<center>
<table>
<tr><td>STRENGTH</td><td>CONSTITUTION</td><td>DEFENSE</td><td>DEXTERITY</td><td>LUCK</td></tr>
<tr><td><input value="1"/></td><td><input value="1"/></td><td><input value="1"/></td><td><input value="1"/></td><td><input value="1"/></td></tr>
</table>
</center>
</div>
<div id="d2">PLAYER 2
<br>
<center>
<table>
<tr><td>STRENGTH</td><td>CONSTITUTION</td><td>DEFENSE</td><td>DEXTERITY</td><td>LUCK</td></tr>
<tr><td><input value="1"/></td><td><input value="1"/></td><td><input value="1"/></td><td><input value="1"/></td><td><input value="1"/></td></tr>
</table>
</center>
</div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var g1a=document.getElementById("g1a");
var g2a=document.getElementById("g2a");
var attack1;attack2;
function resize(){
ww=window.innerWidth;
wh=window.innerHeight;
g1a.setAttribute("transform","translate("+ww/4+" "+wh/2+")");
g2a.setAttribute("transform","translate("+3*(ww/4)+" "+wh/2+")");
}
resize();
window.onresize=resize;
function battle(){
}
</script>
</body>
</html>
