I'm trying to draw an ESP dynamically with javascript. I'm going to tinker with this for a long time, but I wanted to get some ideas on it.
Our components will be:
What I have in mind will look something like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background: transparent;
}
.esp-box {
position: absolute;
border: 2px dotted rgb(255, 165, 0, .5);
border-left: none;
height: 300px;
width: 150px;
top: 30vh;
left: 30vh;
}
.esp-box .health-bar {
height: 100%;
background: rgb(60, 60, 60, 0.5);
width: 5px;
}
.esp-box .health-bar .plus{
height: 60%;
background: rgb(60, 179, 113, 0.5);
width: 5px;
}
.esp-box .health-bar .minus{
height: 40%;
background: rgb(255, 0, 0, 0.5);
width: 5px;
}
.line {
border-top: 1px dotted rgb(255, 165, 0, .5);
position: absolute;
top: 9%;
left: 23%;
width: 50vh;
transform: skewY(-40deg);
}
</style>
</head>
<body>
<div class="esp-box">
<div class="health-bar">
<div class="plus">
</div>
<div class="minus">
</div>
</div>
</div>
<div class="line">
</div>
</body>
</html>
https://jsfiddle.net/xgw4jheo/
Aim: Replacing the container and lines in a dynamic and coordinated way with messages passed to javascript.
The lifebar is really easy, but the container and lines make me think a bit. Do you think this can be done?