-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbrowser-source.html
More file actions
142 lines (124 loc) · 6.65 KB
/
browser-source.html
File metadata and controls
142 lines (124 loc) · 6.65 KB
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
<!doctype html>
<!--
g4BallTracker
Simple tool to keep track of which balls are still in play during a pool game
Copyright 2022-2025 Norman Gholson IV
-->
<html>
<head>
<script src="config.js"></script>
<style>
.noShow {
display: none;
}
.hide {
visibility: hidden;
}
.imgSize {
width: var(--bSize);
}
:root {
--bSize: 35px;
}
.fadeInElm {
visibility: visible;
opacity: 1;
transition: opacity 1s linear;
}
.fadeOutElm {
visibility: hidden;
opacity: 0;
transition: visibility 0s 1s, opacity 1s linear;
}
.left {
position: absolute;
bottom: 10px;
}
.right {
right: 0px;
position: absolute;
bottom: 10px;
}
</style>
</head>
<body>
<span id="mainDisplay" class="bottom"></span>
<script>
var game = "eight"; // default game for initial load. do not change. must be eight at startup.
const bc = new BroadcastChannel('g4-balls');
const bcb = new BroadcastChannel('g4-main'); // catch broadcasts from g4ScoreBoard if installed
const bcr = new BroadcastChannel('g4-rxballs');
if (localStorage.getItem("bmSize") != null) {
document.querySelector(':root').style.setProperty('--bSize', localStorage.getItem("bmSize") + "px");
}
if (localStorage.getItem("bmGame") != null) {
game = localStorage.getItem("bmGame");
}
if (position == "vertical") {
document.getElementById("mainDisplay").classList.add(leftRight);
document.getElementById("mainDisplay").innerHTML = "<table class='noShow' id='eightBallList'> <tr> <td id='eightb1'> </td> </tr> <tr> <td id='eightb2'> </td> </tr> <tr> <td id='eightb3'> </td> </tr> <tr> <td id='eightb4'> </td> </tr> <tr> <td id='eightb5'> </td> </tr> <tr> <td id='eightb6'> </td> </tr> <tr> <td id='eightb7'> </td> </tr> <tr> <td id='eightb8'> </td> </tr> <tr> <td id='eightb9'> </td> </tr> <tr> <td id='eightb10'> </td> </tr> <tr> <td id='eightb11'> </td> </tr> <tr> <td id='eightb12'> </td> </tr> <tr> <td id='eightb13'> </td> </tr> <tr> <td id='eightb14'> </td> </tr> <tr> <td id='eightb15'> </td> </tr> </table> <table class='noShow' id='nineBallList'> <tr> <td id='nineb1'> </td> </tr> <tr> <td id='nineb2'> </td> </tr> <tr> <td id='nineb3'> </td> </tr> <tr> <td id='nineb4'> </td> </tr> <tr> <td id='nineb5'> </td> </tr> <tr> <td id='nineb6'> </td> </tr> <tr> <td id='nineb7'> </td> </tr> <tr> <td id='nineb8'> </td> </tr> <tr> <td id='nineb9'> </td> </tr> </table> <table class='noShow' id='tenBallList'> <tr> <td id='tenb1'> </td> </tr> <tr> <td id='tenb2'> </td> </tr> <tr> <td id='tenb3'> </td> </tr> <tr> <td id='tenb4'> </td> </tr> <tr> <td id='tenb5'> </td> </tr> <tr> <td id='tenb6'> </td> </tr> <tr> <td id='tenb7'> </td> </tr> <tr> <td id='tenb8'> </td> </tr> <tr> <td id='tenb9'> </td> </tr> <tr> <td id='tenb10'> </td> </tr> </table>";
} else {
document.getElementById("mainDisplay").innerHTML = "<center> <table class='noShow' id='eightBallList'> <tr> <td id='eightb1'> </td> <td id='eightb2'> </td> <td id='eightb3'> </td> <td id='eightb4'> </td> <td id='eightb5'> </td> <td id='eightb6'> </td> <td id='eightb7'> </td> <td id='eightb8'> </td> <td id='eightb9'> </td> <td id='eightb10'> </td> <td id='eightb11'> </td> <td id='eightb12'> </td> <td id='eightb13'> </td> <td id='eightb14'> </td> <td id='eightb15'> </td> </tr> </table> <table class='noShow' id='nineBallList'> <tr> <td id='nineb1'> </td> <td id='nineb2'> </td> <td id='nineb3'> </td> <td id='nineb4'> </td> <td id='nineb5'> </td> <td id='nineb6'> </td> <td id='nineb7'> </td> <td id='nineb8'> </td> <td id='nineb9'> </td> </tr> </table> <table class='noShow' id='tenBallList'> <tr> <td id='tenb1'> </td> <td id='tenb2'> </td> <td id='tenb3'> </td> <td id='tenb4'> </td> <td id='tenb5'> </td> <td id='tenb6'> </td> <td id='tenb7'> </td> <td id='tenb8'> </td> <td id='tenb9'> </td> <td id='tenb10'> </td> </tr> </table> </center>";
}
// catch broadcasts from g4ScoreBoard if installed
bcb.onmessage = (event) => {
if (event.data.opacity != null) {
document.getElementById(game + "BallList").classList.remove("noShow");
document.getElementById(game + "BallList").style.opacity = event.data.opacity;
bcr.postMessage({ showhide: event.data.opacity });
}
}
// end of g4ScoreBoard broadcast messages
//start of bc messages
bc.onmessage = (event) => {
if (event.data.ball != null) {
if (staticImages == true) {
document.getElementById(game + "b" + event.data.ball).classList.toggle("hide");
} else {
document.getElementById(game + "b" + event.data.ball).classList.toggle("noShow");
}
}
if (event.data.gameType != null) {
showBalls(event.data.gameType);
game = event.data.gameType;
}
if (event.data.ballSize != null) {
document.querySelector(':root').style.setProperty('--bSize', event.data.ballSize + "px");
}
if (event.data.reset != null) {
window.location.reload();
}
if (event.data.hide != null) {
if (event.data.hide == true) {
document.getElementById(game + "BallList").style.removeProperty('opacity');
document.getElementById(game + "BallList").classList.add("fadeOutElm");
} else {
document.getElementById(game + "BallList").style.removeProperty('opacity');
document.getElementById(game + "BallList").classList.replace("fadeOutElm", "fadeInElm");
}
}
}
//end of bc.messages.
function showBalls(g) {
document.getElementById("eightBallList").classList.add("noShow");
document.getElementById("nineBallList").classList.add("noShow");
document.getElementById("tenBallList").classList.add("noShow");
document.getElementById(g + "BallList").classList.replace("noShow", "fadeInElm");
if (g == "eight") { var gamebcount = 15; game = "eight"; }
if (g == "nine") { var gamebcount = 9; game = "nine"; }
if (g == "ten") { var gamebcount = 10; game = "ten"; }
let ballImg = "";
for (let i = 0; i < gamebcount; i++) { document.getElementById(g + "b" + balls[i]).innerHTML = "<img class='imgSize' src='./images/" + ballColor + "/" + balls[i] + ".png'>"; }
}
// auto start processes.
document.getElementById(game + "BallList").classList.remove("noShow");
var balls = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"];
if (game == "eight") { var gamebcount = 15; }
if (game == "nine") { var gamebcount = 9; }
if (game == "ten") { var gamebcount = 10; }
let ballImg = "";
for (let i = 0; i < gamebcount; i++) { document.getElementById(game + "b" + balls[i]).innerHTML = "<img class='imgSize' src='./images/" + ballColor + "/" + balls[i] + ".png'>"; }
// end of startup processing.
</script>
</body>
</html>