-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
150 lines (128 loc) · 5.38 KB
/
index.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<html>
<head>
<script src='http://127.0.0.1:3000/socket.io/socket.io.js'></script>
</head>
<body>
<canvas id="bomb" width="1920" height="5" style="background-color:transparent"></canvas>
<canvas id="defuse" width="1920" height="5" style="background-color:transparent"></canvas>
<script>
var c_bomb = document.getElementById("bomb");
var ctx_bomb = c_bomb.getContext("2d");
var c_def = document.getElementById("defuse");
var ctx_def = c_def.getContext("2d");
// Things under your control
// Use your OBS canvas width for these, most likely 1920
c_bomb.width = 1920;
c_def.width = 1920;
// If 5 pixels is not enough, you can adjust heights here
c_bomb.height = 5;
c_def.height = 5;
var colorfade = 1; // Change this if you want the timer to be red only
// Lengths of actual timers, preferably lengths that won't cause any floats to maintain stable movement
var MAX_LENGTH_BOMB = 1600;
var MAX_LENGTH_DEF = 1600;
// Initiations
var socket = io('http://127.0.0.1:3000');
var bombTimerInterval;
var defuseFadeInterval;
var MAX_STARTINGPOINT_BOMB = Math.round((c_bomb.width - MAX_LENGTH_BOMB) / 2);
var MAX_GREEN = 255;
var length_bomb = MAX_LENGTH_BOMB;
var startingpoint_bomb = MAX_STARTINGPOINT_BOMB;
var rgb_green = MAX_GREEN;
var ticks_bomb = 40000 / 50; // Fuse is shortened every 50 milliseconds during 40000 milliseconds
var step_bomb = (MAX_LENGTH_BOMB / ticks_bomb) / 2; // How many pixels you remove from both ends of the fuse in every interval
// Initiations for defuse line
var defuseTimeleft = 0;
var MAX_STARTINGPOINT_DEF = Math.round((c_def.width - MAX_LENGTH_DEF) / 2);
var ticks_def = 10000 / 50; // Fuse is shortened every 50 milliseconds during (theoretically) 10000 milliseconds
var step_def = (MAX_LENGTH_DEF / ticks_def) / 2; // How many pixels you remove from both ends of the fuse in every interval
// Overwritten by timeleft value given by game state integration
var length_def = 1600;
var startingpoint_def = 160;
var smoothDefuseInterval;
var defusing = 0;
// This function is executed 20 times in a second, resulting in overall of 800 executions if bomb timer is 40 seconds
function bombTimer() {
ctx_bomb.globalAlpha = 1;
ctx_bomb.clearRect(0, 0, c_bomb.width, c_bomb.height);
startingpoint_bomb += step_bomb; // Move the starting point of drawing
length_bomb -= 2*step_bomb; // Shorten the fuse from both ends
if (colorfade == 1)
{
rgb_green -= 0.32;
ctx_bomb.fillStyle = 'rgb(255,' + Math.round(rgb_green) + ',0)'; // Start as yellow, slowly fades to red before the explosion
}
else
ctx_bomb.fillStyle = 'rgb(255,0,0)';
ctx_bomb.fillRect(startingpoint_bomb,0,length_bomb,c_bomb.height);
// Check if it's time for explosion, kill the interval and clear the canvas
if (length_bomb <= 0) {
clearInterval(bombTimerInterval);
ctx_bomb.clearRect(0, 0, c_bomb.width, c_bomb.height);
}
}
// Green fade effect that is used if the bomb is defused
// This function is executed 20 times in a second, fading the green out in about 2+ seconds
function defuseFade() {
ctx_bomb.globalAlpha -= 0.02; // fading speed
ctx_bomb.clearRect(0, 0, c_bomb.width, c_bomb.height);
ctx_bomb.fillStyle = 'green';
ctx_bomb.fillRect(0,0,c_bomb.width,c_bomb.height);
if (ctx_bomb.globalAlpha <= 0.02)
{
ctx_bomb.clearRect(0, 0, c_bomb.width, c_bomb.height);
clearInterval(defuseFadeInterval);
}
}
function smoothDefuse()
{
ctx_def.clearRect(0, 0, c_def.width, c_def.height);
startingpoint_def += step_def;
length_def -= 2* step_def;
ctx_def.fillRect(startingpoint_def,0,length_def,c_def.height);
if (length_def <= 0) {
clearInterval(smoothDefuseInterval);
ctx_def.clearRect(0, 0, c_def.width, c_def.height);
}
}
socket.on('bomb_planted', function(data){
clearInterval(defuseFadeInterval);
startingpoint_bomb = MAX_STARTINGPOINT_BOMB;
length_bomb = MAX_LENGTH_BOMB;
rgb_green = MAX_GREEN;
ctx_bomb.fillStyle = 'rgb(255,255,0)';
ctx_bomb.fillRect(startingpoint_bomb,0,length_bomb, c_bomb.height);
bombTimerInterval = setInterval(bombTimer,50);
});
// This occurs if the bomb has been planted but terrorists win the round before it explodes
socket.on('round_over', function(data){
clearInterval(bombTimerInterval);
ctx_bomb.clearRect(0, 0, c_bomb.width, c_bomb.height);
});
socket.on('defusing_started', function(data){
if (defusing) return;
defusing = 1;
ctx_def.clearRect(0, 0, c_def.width, c_def.height);
defuseTimeleft = Math.round(data * 1000); // I don't like floats
length_def = Math.round((defuseTimeleft / 10000) * MAX_LENGTH_DEF);
startingpoint_def = Math.round(MAX_STARTINGPOINT_DEF + Math.round(MAX_LENGTH_DEF / 2) - Math.round(length_def / 2));
ctx_def.fillStyle = 'deepskyblue';
ctx_def.fillRect(startingpoint_def,0,length_def,c_def.height);
smoothDefuseInterval = setInterval(smoothDefuse,50);
});
socket.on('defusing_stopped', function(data){
clearInterval(smoothDefuseInterval);
defusing = 0;
ctx_def.clearRect(0, 0, c_def.width, c_def.height);
});
socket.on('bomb_defused', function(data){
clearInterval(bombTimerInterval);
ctx_bomb.clearRect(0, 0, c_bomb.width, c_bomb.height);
ctx_bomb.fillStyle = 'green';
ctx_bomb.fillRect(0,0,c_bomb.width, c_bomb.height);
defuseFadeInterval = setInterval(defuseFade,50);
});
</script>
</body>
</html>