-
Notifications
You must be signed in to change notification settings - Fork 0
/
tactics_board.html
102 lines (102 loc) · 3.86 KB
/
tactics_board.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
<title>Tactics Board</title>
<style>
.controls {
margin: 20px 0;
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.control-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.control-group label {
font-weight: bold;
color: #333;
}
.formation-controls {
display: flex;
gap: 10px;
}
button {
margin: 0 5px;
padding: 8px 16px;
border: none;
border-radius: 4px;
background: #2c3e50;
color: white;
cursor: pointer;
}
button:hover {
background: #34495e;
}
select {
border-radius: 4px;
border: 1px solid #ccc;
}
canvas {
border: 1px solid #ccc;
border-radius: 4px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
</head>
<body style="text-align: center;">
<h1>TACTICS BOARD</h1>
<h2>by spyderkam</h2>
<div style="margin: 10px 0;">
<a href="https://twitter.com/spyderkam" target="_blank" style="margin: 0 10px; text-decoration: none;">
<img src="https://img.icons8.com/ios-glyphs/30/000000/twitter.png" alt="Twitter" style="width: 24px; height: 24px;">
</a>
<a href="https://github.com/spyderkam/Tactics-Board" target="_blank" style="margin: 0 10px; text-decoration: none;">
<img src="https://img.icons8.com/ios-glyphs/30/000000/github.png" alt="GitHub" style="width: 24px; height: 24px;">
</a>
</div>
<div class="controls">
<div class="control-group">
<label>Teams & Formations</label>
<div class="formation-controls">
<select id="redFormationSelect" onchange="changeFormation('red')" style="padding: 8px; margin-right: 10px; background-color: #cc0000; color: white;">
<!-- From static/script.js -->
</select>
<select id="blueFormationSelect" onchange="changeFormation('blue')" style="padding: 8px; margin-right: 10px; background-color: #0066cc; color: white;">
<!-- From static/script.js
function changeFormation(team) {
const select = document.getElementById(team + 'FormationSelect');
const formation = select.options[select.selectedIndex].text;
if (formation !== team + ' Team:') {
socket.emit('change_formation', { formation: formation, team: team });
}
}
-->
</select>
<select id="toolsSelect" onchange="handleToolSelect(this.value)" style="padding: 8px; margin-right: 10px; background-color: black; color: white;">
<option value="" style="text-align: center;">Tools:</option>
<option value="numbers">Toggle Numbers</option> <!--(N)-->
<option value="triangle">Toggle Triangle 1</option> <!--(T)-->
<option value="triangle2">Toggle Triangle 2</option> <!--(G)-->
<option value="lines">Toggle Lines</option> <!--(L)-->
<option value="reset">Reset Tool</option> <!--(Y)-->
</select>
<select id="objectsSelect" onchange="handleObjectSelect(this.value)" style="padding: 8px; margin-right: 10px; background-color: black; color: white;">
<option value="" style="text-align: center;">Toggle Objects:</option>
<option value="blueTeam">Blue Team</option>
<option value="redTeam">Red Team</option>
<option value="ball">Ball</option>
</select>
<button onclick="stopTool()">Stop Tool</button> <!--(S)-->
<button onclick="toggleShapes()">Toggle Shapes</button> <!--(U)-->
<button onclick="resetBoard()">Reset</button> <!--(R)-->
</div>
<div style="margin: 0 auto; padding: 10px;">
<canvas id="board" width="1920" height="1080" style="max-width: 100%; height: auto; display: block; margin: 0 auto;"></canvas>
</div>
<script src="static/script.js"></script>
</body>
</html>