diff --git a/.gitignore b/.gitignore
index 98bd010..4607e0a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
csflow/src/cs2dumper/offsets.rs
csflow/src/cs2dumper/engine2.rs
csflow/src/cs2dumper/client.rs
+webradar_rewrite
\ No newline at end of file
diff --git a/webradar/index.html b/webradar/index.html
index bb82358..85ef5d6 100644
--- a/webradar/index.html
+++ b/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>
\ No newline at end of file
diff --git a/webradar/script.js b/webradar/script.js
index a61ab3c..2812a2b 100644
--- a/webradar/script.js
+++ b/webradar/script.js
@@ -414,3 +414,7 @@ addEventListener("DOMContentLoaded", (e) => {
console.log(`[radarflow] connecting to ${websocketAddr}`)
connect()
});
+
+function toggleZoom() {
+ shouldZoom = !shouldZoom
+}
\ No newline at end of file
diff --git a/webradar/styles.css b/webradar/styles.css
index 8695ad3..eb9453d 100644
--- a/webradar/styles.css
+++ b/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 */
}
\ No newline at end of file