Skip to content

Commit 5308298

Browse files
Suave101Suave101
committed
Initial commit
0 parents  commit 5308298

File tree

6 files changed

+194
-0
lines changed

6 files changed

+194
-0
lines changed

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎.vscode/launch.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "chrome",
9+
"request": "launch",
10+
"name": "Launch Chrome against localhost",
11+
"url": "http://localhost:8080",
12+
"webRoot": "${workspaceFolder}"
13+
}
14+
]
15+
}

‎V2.code-workspace

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"folders": [
3+
{
4+
"path": "."
5+
}
6+
],
7+
"settings": {}
8+
}

‎main.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
body {
2+
display: flex;
3+
flex-wrap: wrap;
4+
}
5+
canvas {
6+
border-radius: 0.5em;
7+
}
8+
#infoPanel {
9+
background-color: aqua;
10+
border-radius: 1em;
11+
width: 90%;
12+
padding: 0.5em;
13+
margin: 0.5em;
14+
}

‎main.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width" />
6+
<script defer src="main.js"></script>
7+
<link rel="stylesheet" href="main.css">
8+
<title>First Stepoff</title>
9+
</head>
10+
<body>
11+
<canvas id="main"></canvas>
12+
<div id="infoPanel">
13+
<div id="steps">
14+
<h3>Cursor Cordinates</h3>
15+
<p id="cursorCordinateX"></p>
16+
<p id="cursorCordinateY"></p>
17+
</div>
18+
</div>
19+
</body>
20+
</html>

‎main.js

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
2+
function resizeCanvas() {
3+
canvas.width = Number(window.innerWidth * 0.98);
4+
canvas.height = canvas.width * (4/9);
5+
}
6+
7+
const canvas = document.getElementById("main");
8+
const xCordinateLabel = document.getElementById("cursorCordinateX");
9+
const yCordinateLabel = document.getElementById("cursorCordinateY");
10+
resizeCanvas();
11+
window.addEventListener("resize", resizeCanvas)
12+
const ctx = canvas.getContext("2d", { alpha: false });
13+
var running = true;
14+
var loopRate = 10;
15+
var fieldColor = "#008507";
16+
var yardlineColor = "#FFFFFF";
17+
var hashColor = "#FFFFFF";
18+
var numbersColor = "#FFFFFF";
19+
var fieldCursorColor = "#5000a1";
20+
var canvasMouseX = new Number(0);
21+
var canvasMouseY = new Number(0);
22+
var stepsPer5Yards = 8; // If Change Reset yardLineArrayinSteps Var
23+
var yardLineArrayinSteps = [yardsToSteps(10), yardsToSteps(15), yardsToSteps(20), yardsToSteps(25), yardsToSteps(30), yardsToSteps(35), yardsToSteps(40), yardsToSteps(45), yardsToSteps(50), yardsToSteps(55), yardsToSteps(60), yardsToSteps(65), yardsToSteps(70), yardsToSteps(75), yardsToSteps(80), yardsToSteps(85), yardsToSteps(90)];
24+
25+
function stepsToHumanReadableCordsX(steps) {
26+
let yardline = yardLineArrayinSteps.reduce(function(prev, curr) {return (Math.abs(curr - steps) < Math.abs(prev - steps) ? curr : prev);});
27+
if (yardline > 50) {
28+
if (steps > yardline) {
29+
return String(steps - yardline) + " steps outside the " + String(50 - ((stepToYard(yardline) - 10) - 50)) + " yardline";
30+
} else if (steps < yardline) {
31+
return String(yardline - steps) + " steps inside the " + String(50 - ((stepToYard(yardline) - 10) - 50)) + " yardline";
32+
} else {
33+
return "On the " + String(50 - ((stepToYard(yardline) - 10) - 50));
34+
}
35+
}
36+
if (steps > yardline) {
37+
return String(steps - yardline) + " steps inside the " + String(stepToYard(yardline) - 10) + " yardline";
38+
} else if (steps < yardline) {
39+
return String(yardline - steps) + " steps outside the " + String(stepToYard(yardline) - 10) + " yardline";
40+
} else {
41+
return "On the " + String(stepToYard(yardline) - 10);
42+
}
43+
}
44+
45+
function yardsToPixles(number) {
46+
return number * canvas.width/120;
47+
}
48+
49+
function stepsToPixles(steps) {
50+
return steps * canvas.width/(24*stepsPer5Yards);
51+
}
52+
53+
function pixleToClosestStep(y) {
54+
return Math.round(y/(canvas.width/(24*stepsPer5Yards)));
55+
}
56+
57+
function stepToYard(steps) {
58+
return steps * (5/stepsPer5Yards)
59+
}
60+
61+
function yardsToSteps(yards) {
62+
return yards/(5/stepsPer5Yards);
63+
}
64+
65+
function drawYardlines() {
66+
ctx.strokeStyle = yardlineColor;
67+
for (let i = 10; i < 111; i = i + 5) {
68+
ctx.beginPath();
69+
ctx.moveTo(yardsToPixles(i), 0);
70+
ctx.lineTo(yardsToPixles(i), canvas.height);
71+
ctx.stroke();
72+
}
73+
}
74+
75+
function drawHashes() {
76+
ctx.strokeStyle = hashColor;
77+
for (let i = 10; i < 111; i++) {
78+
ctx.beginPath();
79+
ctx.moveTo(yardsToPixles(i), yardsToPixles(160/9));
80+
ctx.lineTo(yardsToPixles(i), yardsToPixles(166/9));
81+
ctx.stroke();
82+
}
83+
for (let i = 10; i < 111; i++) {
84+
ctx.beginPath();
85+
ctx.moveTo(yardsToPixles(i), yardsToPixles(320/9));
86+
ctx.lineTo(yardsToPixles(i), yardsToPixles(314/9));
87+
ctx.stroke();
88+
}
89+
}
90+
91+
function drawNumbers() {
92+
ctx.fillStyle = numbersColor;
93+
for (let i = 20; i < 110; i = i + 10) {
94+
if (i-10 > 50) {
95+
ctx.fillText(String(50-((i-10)-50)), yardsToPixles(i-(2/3)), yardsToPixles(133/3), yardsToPixles(4/3));
96+
} else {
97+
ctx.fillText(String(i-10), yardsToPixles(i-(2/3)), yardsToPixles(133/3), yardsToPixles(4/3));
98+
}
99+
}
100+
for (let i = 20; i < 110; i = i + 10) {
101+
if (i-10 > 50) {
102+
ctx.fillText(String(50-((i-10)-50)), yardsToPixles(i-(2/3)), yardsToPixles(9), yardsToPixles(4/3));
103+
} else {
104+
ctx.fillText(String(i-10), yardsToPixles(i-(2/3)), yardsToPixles(9), yardsToPixles(4/3));
105+
}
106+
}
107+
}
108+
109+
canvas.addEventListener("mousemove", function(e) {
110+
var cRect = canvas.getBoundingClientRect();
111+
canvasMouseX = Math.round(e.clientX - cRect.left);
112+
canvasMouseY = Math.round(e.clientY - cRect.top);
113+
});
114+
115+
function drawMouse() {
116+
ctx.fillStyle = fieldCursorColor;
117+
ctx.beginPath();
118+
ctx.arc(stepsToPixles(pixleToClosestStep(canvasMouseX)), stepsToPixles(pixleToClosestStep(canvasMouseY)), yardsToPixles(0.5), 0, 2*Math.PI);
119+
ctx.fill();
120+
xCordinateLabel.innerText = "X Cordinate: " + stepsToHumanReadableCordsX(pixleToClosestStep(canvasMouseX));
121+
yCordinateLabel.innerText = "Y Cordinate: " + String(pixleToClosestStep(canvasMouseY));
122+
}
123+
124+
function drawLoop() {
125+
ctx.clearRect(0, 0, canvas.width, canvas.height);
126+
ctx.fillStyle = fieldColor;
127+
ctx.rect(0, 0, canvas.width, canvas.height);
128+
ctx.fill();
129+
drawYardlines();
130+
drawHashes();
131+
drawNumbers();
132+
drawMouse();
133+
}
134+
135+
setInterval(drawLoop, loopRate);

0 commit comments

Comments
 (0)