Wizzard/radarflow2-kvm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a settings bar

Browse Source 
- Toggle Zoom button: Allows to toggle map zoom in
This commit is contained in:
Janek 2024-01-02 01:06:30 +01:00
parent dc7ff86c38
commit 7cf75a03f5
4 changed files with 45 additions and 7 deletions

1
.gitignore vendored

@ -2,3 +2,4 @@
csflow/src/cs2dumper/offsets.rs
csflow/src/cs2dumper/engine2.rs
csflow/src/cs2dumper/client.rs
webradar_rewrite

9
webradar/index.html

@ -7,7 +7,14 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="canvas"></canvas>
<div id="canvasContainer">
<div id="settingsHolder">
<div class="settings">
<button onclick="toggleZoom()">Toggle Zoom</button>
</div>
</div>
<canvas id="canvas"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>

4
webradar/script.js

@ -414,3 +414,7 @@ addEventListener("DOMContentLoaded", (e) => {
console.log(`[radarflow] connecting to ${websocketAddr}`)
connect()
});
function toggleZoom() {
shouldZoom = !shouldZoom
}

38
webradar/styles.css

@ -1,17 +1,43 @@
body {
body, html {
height: 100%;
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000000; /* Change the background color as needed */
}
#canvasContainer {
aspect-ratio: 1 / 1;
width: 100vh; /* Initial half-screen size */
position: relative;
overflow: hidden;
transition: width 0.5s ease; /* Smooth transition */
float: left;
}
canvas {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
object-fit: contain;
}
#settingsHolder {
visibility: hidden;
position: absolute;
top: inherit;
left: inherit;
width: inherit;
height: 20%;
}
#settingsHolder:hover .settings {
opacity: 1;
}
.settings {
visibility: visible;
opacity: 0;
padding: 10px;
background-color: rgba(25, 25, 25, 0.7); /* Semi-transparent white background */
transition: opacity 0.3s ease; /* Smooth transition */
}