commit frontend rewrite initial project
This commit is contained in:
Janek
24
webradar/.gitignore
vendored
Normal file
24
webradar/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
3
webradar/.vscode/extensions.json
vendored
Normal file
3
webradar/.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
9
webradar/README.md
Normal file
9
webradar/README.md
Normal file
@@ -0,0 +1,9 @@
|
||||
# Vue 3 + TypeScript + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Recommended Setup
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
|
||||
|
||||
- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 212 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 156 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"pos_x": -2647.0,
|
||||
"pos_y": 2592.0,
|
||||
"scale": 4.6,
|
||||
"rotate": 1,
|
||||
"zoom": 1.5
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"pos_x": -1838.0,
|
||||
"pos_y": 1858.0,
|
||||
"scale": 4.1,
|
||||
"rotate": 0,
|
||||
"zoom": 0.0
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"pos_x": -2953.0,
|
||||
"pos_y": 2164.0,
|
||||
"scale": 5.0,
|
||||
"rotate": 0,
|
||||
"zoom": 0.0
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"pos_x": -2796.0,
|
||||
"pos_y": 3328.0,
|
||||
"scale": 5.22,
|
||||
"rotate": 0,
|
||||
"zoom": 0.0
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"pos_x": -2476.0,
|
||||
"pos_y": 3239.0,
|
||||
"scale": 4.400000095367432,
|
||||
"rotate": 1,
|
||||
"zoom": 1.100000023841858
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"pos_x": -2087.0,
|
||||
"pos_y": 3870.0,
|
||||
"scale": 4.9,
|
||||
"rotate": 0,
|
||||
"zoom": 0.0
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"pos_x": -3230.0,
|
||||
"pos_y": 1713.0,
|
||||
"scale": 5.0,
|
||||
"rotate": 0,
|
||||
"zoom": 0.0
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"pos_x": -3453.0,
|
||||
"pos_y": 2887.0,
|
||||
"scale": 7.0,
|
||||
"rotate": 0,
|
||||
"zoom": 0.0
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"pos_x": -4831.0,
|
||||
"pos_y": 1781.0,
|
||||
"scale": 5.2,
|
||||
"rotate": 0,
|
||||
"zoom": 0.0
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"pos_x": -3168.0,
|
||||
"pos_y": 1762.0,
|
||||
"scale": 4.0,
|
||||
"rotate": 0,
|
||||
"zoom": 0.0
|
||||
}
|
||||
32
webradar/index.html
Executable file → Normal file
32
webradar/index.html
Executable file → Normal file
@@ -1,21 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>radarflow</title>
|
||||
<link href="styles.css" rel="stylesheet" type="text/css"/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="canvasContainer">
|
||||
<div id="settingsHolder">
|
||||
<div class="settings">
|
||||
<button onclick="toggleZoom()">Toggle Zoom</button>
|
||||
<button onclick="toggleStats()">Toggle Stats</button>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>radarflow2</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1146
webradar/package-lock.json
generated
Normal file
1146
webradar/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
webradar/package.json
Normal file
20
webradar/package.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "webradar",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.4.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.2.0",
|
||||
"vue-tsc": "^2.0.6"
|
||||
}
|
||||
}
|
||||
1
webradar/public/vite.svg
Normal file
1
webradar/public/vite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -1,539 +0,0 @@
|
||||
// Colors
|
||||
const localColor = "#109856"
|
||||
const teamColor = "#68a3e5"
|
||||
const enemyColor = "#ec040b"
|
||||
const bombColor = "#eda338"
|
||||
const textColor = "#d1d1d1"
|
||||
|
||||
// Settings
|
||||
shouldZoom = true
|
||||
drawStats = true
|
||||
|
||||
// Common
|
||||
canvas = null
|
||||
ctx = null
|
||||
|
||||
// radarflow specific
|
||||
radarData = null
|
||||
freq = 0
|
||||
image = null
|
||||
map = null
|
||||
mapName = null
|
||||
loaded = false
|
||||
entityData = null
|
||||
update = false
|
||||
|
||||
/// Radarflow zoom in
|
||||
zoomSet = false
|
||||
safetyBound = 50
|
||||
boundingRect = null
|
||||
|
||||
// networking
|
||||
websocket = null
|
||||
if (location.protocol == 'https:') {
|
||||
websocketAddr = `wss://${window.location.host}/ws`
|
||||
} else {
|
||||
websocketAddr = `ws://${window.location.host}/ws`
|
||||
}
|
||||
//websocketAddr = "ws://192.168.0.235:8000/ws"
|
||||
|
||||
// Util functions
|
||||
const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
|
||||
const degreesToRadians = (degrees) => degrees * (Math.PI/180);
|
||||
function makeBoundingRect(x1, y1, x2, y2, aspectRatio) {
|
||||
const topLeftX = x1;
|
||||
const topLeftY = y1;
|
||||
const bottomRightX = x2;
|
||||
const bottomRightY = y2;
|
||||
|
||||
const width = bottomRightX - topLeftX;
|
||||
const height = bottomRightY - topLeftY;
|
||||
|
||||
let newWidth, newHeight;
|
||||
if (width / height > aspectRatio) {
|
||||
// Wider rectangle
|
||||
newHeight = width / aspectRatio;
|
||||
newWidth = width;
|
||||
} else {
|
||||
// Taller rectangle
|
||||
newWidth = height * aspectRatio;
|
||||
newHeight = height;
|
||||
}
|
||||
|
||||
const centerX = (topLeftX + bottomRightX) / 2;
|
||||
const centerY = (topLeftY + bottomRightY) / 2;
|
||||
|
||||
const rectMinX = centerX - newWidth / 2;
|
||||
const rectMaxX = centerX + newWidth / 2;
|
||||
const rectMinY = centerY - newHeight / 2;
|
||||
const rectMaxY = centerY + newHeight / 2;
|
||||
|
||||
const boundingRectangle = {
|
||||
x: rectMinX,
|
||||
y: rectMinY,
|
||||
width: rectMaxX - rectMinX,
|
||||
height: rectMaxY - rectMinY,
|
||||
}
|
||||
|
||||
const boundingRectangle2 = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: image.width / 1.2,
|
||||
height: image.width / 1.2,
|
||||
}
|
||||
|
||||
return boundingRectangle;
|
||||
}
|
||||
|
||||
function boundingCoordinates(coordinates, boundingRect) {
|
||||
const xScale = boundingRect.width / image.width;
|
||||
const yScale = boundingRect.height / image.height;
|
||||
|
||||
const newX = (coordinates.x - boundingRect.x) / xScale;
|
||||
const newY = (coordinates.y - boundingRect.y) / yScale;
|
||||
|
||||
return {x: newX, y: newY};
|
||||
}
|
||||
|
||||
function boundingScale(value, boundingRect) {
|
||||
const scale = image.width / boundingRect.width;
|
||||
return value * scale
|
||||
}
|
||||
|
||||
function mapCoordinates(coordinates) {
|
||||
let offset_x = coordinates.x - map.pos_x;
|
||||
let offset_y = coordinates.y - map.pos_y;
|
||||
|
||||
offset_x /= map.scale;
|
||||
offset_y /= -map.scale;
|
||||
|
||||
return {x: offset_x, y: offset_y}
|
||||
}
|
||||
|
||||
function render() {
|
||||
if (update) {
|
||||
fillCanvas()
|
||||
if (loaded) {
|
||||
update = false
|
||||
|
||||
// Iterate through the array and update the min/max values
|
||||
if (entityData != null && map != null && image != null && shouldZoom) {
|
||||
|
||||
let minX = Infinity
|
||||
let minY = Infinity
|
||||
let maxX = -Infinity
|
||||
let maxY = -Infinity
|
||||
|
||||
entityData.forEach((data) => {
|
||||
let mapCords = null
|
||||
|
||||
if (data.Bomb !== undefined) {
|
||||
mapCords = mapCoordinates(data.Bomb.pos)
|
||||
} else {
|
||||
mapCords = mapCoordinates(data.Player.pos)
|
||||
}
|
||||
|
||||
minX = Math.min(minX, mapCords.x);
|
||||
minY = Math.min(minY, mapCords.y);
|
||||
maxX = Math.max(maxX, mapCords.x);
|
||||
maxY = Math.max(maxY, mapCords.y);
|
||||
});
|
||||
|
||||
|
||||
boundingRect = makeBoundingRect(minX-safetyBound, minY-safetyBound, maxX+safetyBound, maxY+safetyBound, image.width/image.height)
|
||||
|
||||
zoomSet = true
|
||||
} else if (zoomSet) {
|
||||
zoomSet = false
|
||||
}
|
||||
|
||||
drawImage()
|
||||
|
||||
if (entityData != null) {
|
||||
entityData.forEach((data) => {
|
||||
if (data.Bomb !== undefined) {
|
||||
drawBomb(data.Bomb.pos, data.Bomb.isPlanted)
|
||||
} else {
|
||||
let fillStyle = localColor
|
||||
|
||||
switch (data.Player.playerType) {
|
||||
case "Team":
|
||||
fillStyle = teamColor
|
||||
break;
|
||||
|
||||
case "Enemy":
|
||||
fillStyle = enemyColor
|
||||
break;
|
||||
}
|
||||
|
||||
drawEntity(
|
||||
data.Player.pos,
|
||||
fillStyle,
|
||||
data.Player.isDormant,
|
||||
data.Player.hasBomb,
|
||||
data.Player.yaw,
|
||||
data.Player.hasAwp,
|
||||
data.Player.playerType,
|
||||
data.Player.isScoped
|
||||
)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (radarData != null) {
|
||||
if (radarData.bombPlanted && !radarData.bombExploded && radarData.bombDefuseTimeleft >= 0) {
|
||||
|
||||
let maxWidth = 1024-128-128;
|
||||
let timeleft = radarData.bombDefuseTimeleft;
|
||||
|
||||
// Base bar
|
||||
ctx.fillStyle = "black"
|
||||
ctx.fillRect(128, 16, maxWidth, 16)
|
||||
|
||||
// Bomb timer
|
||||
if (radarData.bombBeingDefused) {
|
||||
if (radarData.bombCanDefuse) {
|
||||
ctx.fillStyle = teamColor
|
||||
} else {
|
||||
ctx.fillStyle = enemyColor
|
||||
}
|
||||
} else {
|
||||
ctx.fillStyle = bombColor
|
||||
}
|
||||
|
||||
ctx.fillRect(130, 18, (maxWidth-2) * (timeleft / 40), 12)
|
||||
|
||||
ctx.font = "24px Arial";
|
||||
ctx.textAlign = "center"
|
||||
ctx.textBaseline = "middle"
|
||||
ctx.fillStyle = textColor
|
||||
ctx.fillText(`${timeleft.toFixed(1)}s`, 1024/2, 28+24);
|
||||
|
||||
// Defuse time lines
|
||||
ctx.strokeStyle = "black"
|
||||
ctx.lineWidth = 2
|
||||
|
||||
// Kit defuse
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(128 + (maxWidth * (5 / 40)), 16)
|
||||
ctx.lineTo(128 + (maxWidth * (5 / 40)), 32)
|
||||
ctx.stroke()
|
||||
|
||||
// Normal defuse
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(130 + (maxWidth-2) * (10 / 40), 16)
|
||||
ctx.lineTo(130 + (maxWidth-2) * (10 / 40), 32)
|
||||
ctx.stroke()
|
||||
|
||||
// Defuse stamp line
|
||||
if (radarData.bombCanDefuse) {
|
||||
console.log(radarData.bombDefuseEnd)
|
||||
ctx.strokeStyle = "green"
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(130 + (maxWidth-2) * (radarData.bombDefuseEnd / 40), 16)
|
||||
ctx.lineTo(130 + (maxWidth-2) * (radarData.bombDefuseEnd / 40), 32)
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
if (websocket != null) {
|
||||
ctx.font = "100px Arial";
|
||||
ctx.textAlign = "center"
|
||||
ctx.textBaseline = "middle"
|
||||
ctx.fillStyle = textColor
|
||||
ctx.fillText("Not on a server", 1024/2, 1024/2);
|
||||
} else {
|
||||
ctx.font = "100px Arial";
|
||||
ctx.textAlign = "center"
|
||||
ctx.fillStyle = textColor
|
||||
ctx.fillText("Disconnected", 1024/2, 1024/2);
|
||||
}
|
||||
}
|
||||
|
||||
if (drawStats) {
|
||||
ctx.font = "16px Arial";
|
||||
ctx.textAlign = "left"
|
||||
ctx.fillStyle = textColor
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = "black"
|
||||
ctx.strokeText(`${freq} Hz`, 2, 18)
|
||||
ctx.fillText(`${freq} Hz`, 2, 18)
|
||||
}
|
||||
}
|
||||
|
||||
if (websocket != null) {
|
||||
websocket.send("requestInfo");
|
||||
}
|
||||
}
|
||||
|
||||
function fillCanvas() {
|
||||
ctx.fillStyle = "#0f0f0f";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
function drawImage() {
|
||||
if (image == null || canvas == null)
|
||||
return
|
||||
|
||||
if (zoomSet != false && boundingRect.x != null) {
|
||||
ctx.drawImage(image, boundingRect.x, boundingRect.y, boundingRect.width, boundingRect.height, 0, 0, canvas.width, canvas.height)
|
||||
} else {
|
||||
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height)
|
||||
}
|
||||
}
|
||||
|
||||
function drawBomb(pos, planted) {
|
||||
if (map == null)
|
||||
return
|
||||
|
||||
if (zoomSet) {
|
||||
pos = boundingCoordinates(mapCoordinates(pos), boundingRect)
|
||||
size = boundingScale(5, boundingRect);
|
||||
} else {
|
||||
pos = mapCoordinates(pos)
|
||||
size = 5
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(pos.x, pos.y, size, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = bombColor;
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
|
||||
if (planted && ((new Date().getTime() / 1000) % 1) > 0.5) {
|
||||
ctx.strokeStyle = enemyColor
|
||||
ctx.lineWidth = 1;
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
|
||||
function drawEntity(pos, fillStyle, dormant, hasBomb, yaw, hasAwp, playerType, isScoped) {
|
||||
if (map == null)
|
||||
return
|
||||
|
||||
if (zoomSet) {
|
||||
pos = boundingCoordinates(mapCoordinates(pos), boundingRect)
|
||||
circleRadius = boundingScale(7, boundingRect);
|
||||
distance = circleRadius + boundingScale(2, boundingRect);
|
||||
radius = distance + boundingScale(2, boundingRect)
|
||||
arrowWidth = 35
|
||||
} else {
|
||||
pos = mapCoordinates(pos)
|
||||
circleRadius = 7
|
||||
distance = circleRadius + 2
|
||||
radius = distance + 5;
|
||||
arrowWidth = 35;
|
||||
}
|
||||
|
||||
if (dormant) {
|
||||
ctx.font = "20px Arial";
|
||||
ctx.textAlign = "center"
|
||||
ctx.fillStyle = fillStyle
|
||||
ctx.fillText("?", pos.x, pos.y);
|
||||
} else {
|
||||
|
||||
if (hasAwp) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(pos.x, pos.y, circleRadius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = "orange";
|
||||
ctx.fill();
|
||||
circleRadius -= 2;
|
||||
}
|
||||
|
||||
// Draw circle
|
||||
ctx.beginPath();
|
||||
ctx.arc(pos.x, pos.y, circleRadius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
|
||||
if (hasAwp && false) {
|
||||
|
||||
let style = "yellow"
|
||||
|
||||
if (playerType == "Enemy") {
|
||||
style = "orange"
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(pos.x, pos.y, circleRadius / 1.5, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = style;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
if (hasBomb) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(pos.x, pos.y, circleRadius / 2, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = bombColor;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
|
||||
ctx.closePath();
|
||||
|
||||
// Calculate arrowhead points
|
||||
|
||||
|
||||
const arrowHeadX = pos.x + radius * Math.cos(yaw * (Math.PI / 180))
|
||||
const arrowHeadY = pos.y - radius * Math.sin(yaw * (Math.PI / 180))
|
||||
|
||||
const arrowCornerX1 = pos.x + distance * Math.cos((yaw - arrowWidth) * (Math.PI / 180))
|
||||
const arrowCornerY1 = pos.y - distance * Math.sin((yaw - arrowWidth) * (Math.PI / 180))
|
||||
|
||||
const arrowCornerX2 = pos.x + distance * Math.cos((yaw + arrowWidth) * (Math.PI / 180))
|
||||
const arrowCornerY2 = pos.y - distance * Math.sin((yaw + arrowWidth) * (Math.PI / 180))
|
||||
|
||||
|
||||
const cicleYaw = 90-yaw
|
||||
const startAngle = degreesToRadians(cicleYaw-arrowWidth)-Math.PI/2
|
||||
const endAngle = degreesToRadians(cicleYaw+arrowWidth)-Math.PI/2
|
||||
|
||||
// Draw arrow
|
||||
|
||||
/// Backside of the arrow
|
||||
ctx.beginPath();
|
||||
ctx.arc(pos.x, pos.y, distance, startAngle, endAngle)
|
||||
|
||||
/// Draw from corners to arrowhead
|
||||
ctx.lineTo(arrowCornerX1, arrowCornerY1);
|
||||
ctx.lineTo(arrowHeadX, arrowHeadY);
|
||||
ctx.lineTo(arrowCornerX2, arrowCornerY2);
|
||||
ctx.closePath()
|
||||
|
||||
ctx.fillStyle = 'white'
|
||||
ctx.fill();
|
||||
|
||||
if (isScoped) {
|
||||
const lineOfSightX = arrowHeadX + 1024 * Math.cos(yaw * (Math.PI / 180))
|
||||
const lineOfSightY = arrowHeadY - 1024 * Math.sin(yaw * (Math.PI / 180))
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(arrowHeadX, arrowHeadY);
|
||||
ctx.lineTo(lineOfSightX, lineOfSightY);
|
||||
|
||||
if (playerType == "Enemy")
|
||||
ctx.strokeStyle = enemyColor
|
||||
else
|
||||
ctx.strokeStyle = teamColor
|
||||
|
||||
ctx.strokeWidth = 1;
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function loadMap(mapName) {
|
||||
console.log(`[radarflow] loading map ${mapName}`)
|
||||
loaded = true;
|
||||
const map_img = new Image();
|
||||
map_img.src = `assets/image/${mapName}_radar_psd.png`;
|
||||
|
||||
fetch(`assets/json/${mapName}.json`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
map = data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading JSON file:', error);
|
||||
});
|
||||
|
||||
map_img.onload = () => {
|
||||
image = map_img;
|
||||
update = true;
|
||||
};
|
||||
}
|
||||
|
||||
function unloadMap() {
|
||||
console.log("[radarflow] unloading map")
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
map = null
|
||||
mapName = null
|
||||
loaded = false,
|
||||
update = true
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
function connect() {
|
||||
if (websocket == null) {
|
||||
let socket = new WebSocket(websocketAddr)
|
||||
|
||||
socket.onopen = () => {
|
||||
console.log("[radarflow] Connection established")
|
||||
websocket.send("requestInfo");
|
||||
};
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
if (event.data == "error") {
|
||||
console.log("[radarflow] Server had an unknown error")
|
||||
} else {
|
||||
let data = JSON.parse(event.data);
|
||||
radarData = data;
|
||||
freq = data.freq;
|
||||
|
||||
if (data.ingame == false) {
|
||||
mapName = null
|
||||
entityData = null
|
||||
|
||||
if (loaded)
|
||||
unloadMap()
|
||||
} else {
|
||||
if (!loaded) {
|
||||
mapName = data.mapName
|
||||
entityData = data.entityData
|
||||
loadMap(mapName)
|
||||
} else {
|
||||
entityData = data.entityData
|
||||
}
|
||||
}
|
||||
|
||||
update = true
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
};
|
||||
|
||||
socket.onclose = (event) => {
|
||||
if (event.wasClean) {
|
||||
console.log("[radarflow] connection closed");
|
||||
} else {
|
||||
console.log("[radarflow] connection died");
|
||||
}
|
||||
|
||||
playerData = null
|
||||
websocket = null
|
||||
unloadMap()
|
||||
|
||||
setTimeout(function() {
|
||||
connect();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
socket.onerror = (error) => {
|
||||
console.log(`[radarflow] websocket error: ${error}`);
|
||||
};
|
||||
|
||||
websocket = socket;
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
connect();
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener("DOMContentLoaded", (e) => {
|
||||
canvas = document.getElementById('canvas');
|
||||
canvas.width = 1024;
|
||||
canvas.height = 1024;
|
||||
canvasAspectRatio = canvas.width / canvas.height
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
console.log(`[radarflow] connecting to ${websocketAddr}`)
|
||||
connect()
|
||||
});
|
||||
|
||||
function toggleZoom() {
|
||||
shouldZoom = !shouldZoom
|
||||
}
|
||||
|
||||
function toggleStats() {
|
||||
drawStats = !drawStats
|
||||
}
|
||||
13
webradar/src/App.vue
Normal file
13
webradar/src/App.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import Radar from './components/Radar.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Radar/>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
1
webradar/src/assets/vue.svg
Normal file
1
webradar/src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
42
webradar/src/components/Radar.vue
Normal file
42
webradar/src/components/Radar.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<script setup lang = "ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { radardata } from '../main';
|
||||
|
||||
const canvas = ref(null);
|
||||
const localColor = "#109856"
|
||||
const teamColor = "#68a3e5"
|
||||
const enemyColor = "#ec040b"
|
||||
const bombColor = "#eda338"
|
||||
const textColor = "#d1d1d1"
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
console.log(radardata)
|
||||
|
||||
const ctx = canvas.value.getContext('2d');
|
||||
|
||||
ctx.fillStyle = "#0f0f0f";
|
||||
ctx.fillRect(0, 0, 1024, 1024);
|
||||
|
||||
if (radardata.ingame) {
|
||||
|
||||
} else {
|
||||
ctx.font = "100px Arial";
|
||||
ctx.textAlign = "center"
|
||||
ctx.fillStyle = textColor
|
||||
ctx.fillText("Disconnected", 1024/2, 1024/2);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<canvas id="canvas" ref="canvas" width="1024" height="1024"></canvas>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
canvas {
|
||||
aspect-ratio: 1 / 1;
|
||||
width: clamp(100vw, 100%, 100vh)
|
||||
}
|
||||
</style>
|
||||
50
webradar/src/main.ts
Normal file
50
webradar/src/main.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { createApp, reactive } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
//const socket = new WebSocket('ws://localhost:3000');
|
||||
|
||||
type BombData = {
|
||||
pos: { x: number, y: number, z: number },
|
||||
isPlanted: boolean,
|
||||
}
|
||||
|
||||
enum PlayerType {
|
||||
Unknown,
|
||||
Spectator,
|
||||
Local,
|
||||
Enemy,
|
||||
Team
|
||||
}
|
||||
|
||||
type PlayerData = {
|
||||
pos: { x: number, y: number, z: number },
|
||||
yaw: number,
|
||||
playerType: PlayerType,
|
||||
hasBomb: boolean,
|
||||
hasAwp: boolean,
|
||||
isScoped: boolean
|
||||
}
|
||||
|
||||
type Radardata = {
|
||||
freq: number,
|
||||
ingame: boolean,
|
||||
|
||||
bombPlanted: boolean,
|
||||
bombExploded: boolean,
|
||||
bombBeingDefused: boolean,
|
||||
bombCanDefuse: boolean,
|
||||
bombDefuseLength: number,
|
||||
bombDefuseTimeleft: number,
|
||||
bombDefuseEnd: number,
|
||||
|
||||
mapName: string
|
||||
playerData: [BombData | PlayerData]
|
||||
}
|
||||
|
||||
export const radardata = reactive({
|
||||
freq: 144,
|
||||
ingame: false
|
||||
})
|
||||
|
||||
createApp(App).mount('#app')
|
||||
79
webradar/src/style.css
Normal file
79
webradar/src/style.css
Normal file
@@ -0,0 +1,79 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
1
webradar/src/vite-env.d.ts
vendored
Normal file
1
webradar/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -1,45 +0,0 @@
|
||||
body {
|
||||
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;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: width 0.5s ease; /* Smooth transition */
|
||||
float: left;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#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 */
|
||||
}
|
||||
25
webradar/tsconfig.json
Normal file
25
webradar/tsconfig.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
11
webradar/tsconfig.node.json
Normal file
11
webradar/tsconfig.node.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
7
webradar/vite.config.ts
Normal file
7
webradar/vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
})
|
||||
Reference in New Issue
Block a user