Scribd
Upload
8 views20 pages

Script

The document is an HTML file for a cricket run counter application, featuring a user interface that allows users to input runs, wickets, and overs. It includes various buttons for scoring actions, modals for score management, and a scoreboard display. The application utilizes Bootstrap for styling and includes JavaScript for functionality, such as changing scores and sharing match codes.

Uploaded by

tcs502520
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views20 pages

Script

The document is an HTML file for a cricket run counter application, featuring a user interface that allows users to input runs, wickets, and overs. It includes various buttons for scoring actions, modals for score management, and a scoreboard display. The application utilizes Bootstrap for styling and includes JavaScript for functionality, such as changing scores and sharing match codes.

Uploaded by

tcs502520
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 20

index.

html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Cricket run counter</title>
<!-- <link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5/css/bootstrap.min.css"

integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"> -->
<!-- CSS only -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js"
type="text/javascript"></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<link rel="stylesheet" href="main.css">

<!-- Copy icon -->


<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?
family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
</head>

<body style="background-color:#e5f3ff;">
<div class="container">

<!-- This is the scores on the topmost part of the screen -->
<div class="col-left-custom">
<h6 style="text-align:center;">
<!-- <span style="vertical-align:0.7em; font-size: small;">Score: </span>
-->
<span contentEditable="false" id="run" style="font-size:30vw; line-height:
80%;">0</span>
<span contentEditable="false" style="font-size:25vw; line-height:
80%;">/</span>
<span contentEditable="false" id="wickets" style="font-size:30vw; line-
height: 80%;">0</span>
<span id="over-ball" style="font-size: 10vw; line-height: 200%">0</span>
<center><h6 style="color: red; display: none;" id="no-ball-warning">No
ball: Tap the runs scored in no ball.</h6></center>
</h6>
</div>
<!-- END: This is the scores on the topmost part of the screen -->
<!-- These are the action buttons and runboard -->
<div class="col-right-custom">
<div class="position-relative m-4">
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 0%;"></div>
</div>
<button type="button"
class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-
primary rounded-pill over-ball-style"
id="ball_no_1"></button>
<button type="button"
class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-
light rounded-pill over-ball-style"
id="ball_no_2"></button>
<button type="button"
class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-
light rounded-pill over-ball-style"
id="ball_no_3"></button>
</div>
<div class="position-relative m-4 my-5">
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 0%;"></div>
</div>
<button type="button"
class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-
light rounded-pill over-ball-style"
id="ball_no_4"></button>
<button type="button"
class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-
light rounded-pill over-ball-style"
id="ball_no_5"></button>
<button type="button"
class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-
light rounded-pill over-ball-style"
id="ball_no_6"></button>
</div>

<div class="alert alert-primary text-center" role="alert" id="targetBoard"


style="display: none; transition: height 1400ms;">
<span id="targetBody">Require
<h5 style="display: inline;"><span class="badge bg-secondary"
id="targetRunsRequired">-</span></h5>
runs in
<h5 style="display: inline;"><span class="badge bg-secondary"
id="targetOversLeft">-</span></h5>
balls
</span>
&nbsp;&nbsp;<button type="button" class="btn-close"
onClick="setTarget(false)"></button>
</div>

<div class="row no-gutters">


<div class="col-4 my-auto zoom mb-2 px-1 run-btn">
<button class="btn btn-outline-primary btn-lg btn-custom btn-custom-lg"
id="run_dot">Dot</button>
</div>
<div class="col-4 my-auto zoom mb-2 px-1 run-btn">
<button class="btn btn-outline-primary btn-lg btn-custom btn-custom-lg"
id="run_wide">Wide</button>
</div>
<div class="col-4 my-auto zoom mb-2 px-1 run-btn">
<button class="btn btn-outline-primary btn-lg btn-custom btn-custom-lg"
id="run_no_ball">No ball</button>
</div>

<div class="col-4 my-auto zoom mb-2 px-1 run-btn">


<button class="btn btn-outline-primary btn-lg btn-custom btn-custom-lg"
id="run_1">1</button>
</div>
<div class="col-4 my-auto zoom mb-2 px-1 run-btn">
<button class="btn btn-outline-primary btn-lg btn-custom btn-custom-lg"
id="run_2">2</button>
</div>
<div class="col-4 my-auto zoom mb-2 px-1 run-btn">
<button class="btn btn-outline-primary btn-lg btn-custom btn-custom-lg"
id="run_3">3</button>
</div>
<div class="col-4 my-auto zoom pb-1 px-1 run-btn">
<button class="btn btn-outline-primary btn-custom btn-custom-sm"
id="run_4">4</button>
</div>
<div class="col-4 my-auto zoom pb-1 px-1 run-btn">
<button class="btn btn-outline-primary btn-custom btn-custom-sm"
id="run_6">6</button>
</div>
<div class="col-4 my-auto zoom pb-1 px-1 run-btn">
<button class="btn btn-outline-primary btn-custom btn-custom-sm"
id="run_W">Wicket</button>
</div>

<div class="col-5 my-auto zoom py-4 px-1 run-btn">


<button type="button" class="btn btn-info btn-custom btn-custom-sm" data-
toggle="modal" data-target="#myModal"
id="scoreboard-btn">Scoreboard</button>
</div>
<div class="col-2 my-auto zoom py-4 px-1 run-btn"></div>
<div class="col-5 my-auto zoom py-4 px-1 run-btn">
<button type="button" class="btn btn-danger btn-custom btn-custom-sm"
data-toggle="modal"
data-target="#myModal2">Undo</button>
</div>
</div>
<button type="button" class="btn btn-link btn-custom btn-custom-sm" data-
toggle="modal" data-target="#TargetModal"
id="targetModeButton">Target mode</button>
<button type="button" class="btn btn-link btn-custom btn-custom-sm" data-
toggle="modal" data-target="#shareModal"
id="targetModeButton">Share match Code</button>
</div>
<!-- These are the action buttons -->

<!-- Modal -->


<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->


<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Scoreboard</h4>
<button type="button" class="btn close"
data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<table class="table table-striped table-success" id="scoreboard">
</table>
<!-- <div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="change-over">Over</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="change-over">Ball</span>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="change-over">Score</span>
<input type="text" class="form-control">
</div> -->
<div class="input-group">
<!-- <span class="input-group-text">First and last name</span> -->
<input type="text" placeholder="Over" class="form-control"
id="change_over">
<input type="text" placeholder="Ball" class="form-control"
id="change_ball">
<input type="text" placeholder="Runs" class="form-control"
id="change_run">
<button class="btn btn-sm btn-primary"
onclick="change_score()">Change score</button>
</div>
<div id="edited-scores"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>

</div>
</div>

<!-- Modal 2 -->


<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->


<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Undo last action?</h4>
<button type="button" class="btn close"
data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
Extras (Wide and No ball) cannot be undone.
<button class="btn btn-danger btn-custom btn-custom-sm"
onclick="back_button()"
data-dismiss="modal">Undo</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!-- TargetModal: Modal 3: For target mode -->


<div class="modal fade" id="TargetModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->


<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Enter target</h4>
<button type="button" class="btn close"
data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">

<div class="row g-2">


<div class="col-md">
<div class="form-floating">
<input type="number" class="form-control" id="targetRuns"
placeholder="250">
<label for="targetRuns">Target Runs</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<input type="number" class="form-control" id="targetOvers"
placeholder="20">
<label for="targetOvers">Overs</label>
</div>
</div>
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary " onclick="setTarget()"
data-dismiss="modal">Set
Target</button>
</div>
</div>
</div>
</div>

<!-- shareModal: Modal 4: For match sharing -->


<div class="modal fade" id="shareModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->


<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Share match code (Beta)</h4>
<button type="button" class="btn close"
data-dismiss="modal">&times;</button>
</div>
<div class="modal-body" id="shareModalBody">
<button type="button" class="btn btn-default"
onclick="shareModeStart()"><u>Turn on share mode?</u></button>

</div>
<div class="modal-footer" id="shareModalFooter">
</div>
</div>
</div>
</div>

</div>

<div id="messages"></div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script src="main_mqtt.js"></script>
<script src="main.js"></script>
</body>

</html>
main.css
html,
body,
.container {
margin: 0px;
max-width: 100%;
}

.col-left-custom,
.col-left-custom {
width: 100%;
}
.over-ball-style {
width: 2rem;
height: 2rem;
}

@media only screen and (orientation: landscape) {


/* For desktops: */
.col-left-custom {
width: 70%;
float: left;
padding: 15px;
}
.col-right-custom {
width: 30%;
height: 100vh;
float: left;
padding: 15px;
}
/* .over-ball-style {
width: 2em;
height: 2em;
font-size: 2em;
}
.runboard-row-1{
margin-bottom: 2em;
} */
}

.center {
margin: auto;
width: 100%;
border: 3px solid green;
padding: 10px;
}

.btn-custom {
display: inline-block;
width: 100%;
}

.btn-custom-lg {
height: 4.5em;
}
.btn-custom-sm {
height: 3em;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}

.material-symbols-outlined {
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 200, "opsz" 24;
}
main.js
var scoreboard = [[], [0]]; //scoreboard[<over_no>][0] counts wide runs
var ball_no = 1; // Ball number will start from 1
var over_no = 1; // Over number will start from 1
var runs = 0;
var edited = [];
var isNoBall = false;
var isTargetMode = false;
var targetRuns = -1; // total runs scored by other team
var targetOvers = -1; //total overs
var isShareMode = false;

$(document).ready(function () {
$("#run_dot").on("click", function (event) {
play_ball("D", 0);
});
$("#run_1").on("click", function (event) {
play_ball(1);
});
$("#run_2").on("click", function (event) {
play_ball(2);
});
$("#run_3").on("click", function (event) {
play_ball(3);
});
$("#run_wide").on("click", function (event) {
play_ball("+", 0);
});
$("#run_no_ball").on("click", function (event) {
play_ball("NB", 0);
});
$("#run_4").on("click", function (event) {
play_ball(4);
});
$("#run_6").on("click", function (event) {
play_ball(6);
});
$("#run_W").on("click", function (event) {
play_ball("W", 0);
});
$("#scoreboard-btn").on("click", function (event) {
update_scoreboard();
});
init();
});

function init() {
const urlParams = new URLSearchParams(window.location.search);
console.log("urlParams.get()");
console.log(urlParams.get("debug"));
if (urlParams.get("debug") == null || urlParams.get("debug") != "true")
$("#messages").hide();
// const queryString = window.location.search;
// const urlParams = new URLSearchParams(queryString);
// console.log(urlParams.get("matchCode"));
// console.log(document.location.origin);
}

function shareModeStart() {
isShareMode = true;
startConnect();
}

function play_ball(run, score = 1) {


if (run == "+") {
//Wide ball
runs++;
scoreboard[over_no][0] += 1;
update_score();
return;
}
if (run == "NB") {
// isNoBall = true;
noBall(true);
//No ball
runs++;
scoreboard[over_no][0] += 1;
update_score();
return;
}
if (score == 1) {
runs += run;
}
// console.log("over_no=", over_no, "| ball_no=", ball_no," |Runs=",runs);

if (isNoBall) {
scoreboard[over_no][0] += run == "D" ? 0 : run;
// isNoBall = false;
noBall(false);
} else {
scoreboard[over_no][ball_no] = run;
// console.log(scoreboard[over_no]);
// console.log(scoreboard);
update_runboard();
ball_no++;
if (ball_no >= 7) {
ball_no = 1;
over_no++;
scoreboard[over_no] = [];
scoreboard[over_no][0] = 0; //Wide bowls counter
}
}
update_score();
update_scoreboard();
}

function update_runboard() {
// Updates the runboard when the function is called
for (i = 1; i < 7; i++) {
let score_und = (_score_und) => (_score_und == undefined ? "" :
_score_und);
updateHtml("#ball_no_" + i.toString(), score_und(scoreboard[over_no]
[i]));
}
if (ball_no != 1) {
$("#ball_no_" + ball_no.toString()).removeClass("btn-light");
$("#ball_no_" + ball_no.toString()).addClass("btn-primary");
} else {
for (i = 2; i <= 6; i++) {
$("#ball_no_" + i.toString()).removeClass("btn-primary");
$("#ball_no_" + i.toString()).addClass("btn-light");
}
}
updateHtml(
"#over-ball",
(ball_no == 6 ? over_no : over_no - 1).toString() +
"." +
(ball_no == 6 ? 0 : ball_no).toString()
);
}

function change_score() {
let over = parseInt($("#change_over").val());
let ball = parseInt($("#change_ball").val());
let run = parseInt($("#change_run").val());
edited.push([over, ball, scoreboard[over][ball], run]);
scoreboard[over][ball] = run;
update_score();
update_scoreboard();
updateHtml("#run", runs);
let edited_scores = "Edited scores:<br>";
for (i = 0; i < edited.length; i++) {
edited_scores +=
"(" +
edited[i][0].toString() +
"." +
edited[i][1].toString() +
") = " +
edited[i][2].toString() +
" -> " +
edited[i][3].toString();
edited_scores += "<br>";
}
// }
updateHtml("#edited-scores", edited_scores);
}

function update_scoreboard() {
// Updates the table in the modal which appears when the scoreboard button is
pressed.
var table = "";
for (i = 1; i <= over_no; i++) {
table = table + "<tr>";
table += "<td>" + i.toString() + "</td>";
table +=
"<td>" +
scoreboard[i].slice(1, 7).join(" - ") +
" (" +
scoreboard[i][0].toString() +
")" +
"</td>";
table = table + "</tr>";
}
updateHtml(
"#scoreboard",
"<tr><th>Over</th><th>Score (Extras)</th></tr>" + table
);
}
function update_score() {
let score = 0;
let wickets = 0;

for (i = 1; i <= over_no; i++) {


let numOr0 = (n) => (n == "+" ? 1 : isNaN(n) ? 0 : n);
score += scoreboard[i].reduce((a, b) => numOr0(a) + numOr0(b));
scoreboard[i].forEach((element) => {
if (element == "W") wickets++;
});
}
// console.log(wickets);
runs = score;
updateTarget();
updateHtml("#run", runs);
updateHtml("#wickets", wickets);
}

function back_button() {
if (over_no == 1 && ball_no == 1) return;
ball_no--;
if (ball_no == 0) {
ball_no = 6;
over_no--;
}
scoreboard[over_no][ball_no] = undefined;
update_score();
update_scoreboard();
update_runboard();
updateHtml(
"#over-ball",
(over_no - 1).toString() + "." + (ball_no - 1).toString()
);
}

function noBall(is_NoBall) {
isNoBall = is_NoBall;
var run_no_ball = $("#run_no_ball");
if (is_NoBall) {
$("#no-ball-warning").show();
$("#run_wide").prop("disabled", true);
$("#run_no_ball").prop("disabled", true);
$("#run_W").prop("disabled", true);

run_no_ball.css("backgroundColor", "#0D6EFD");
run_no_ball.css("color", "#ffffff");
} else {
$("#no-ball-warning").hide();
$("#run_wide").prop("disabled", false);
$("#run_no_ball").prop("disabled", false);
$("#run_W").prop("disabled", false);

run_no_ball.css("backgroundColor", "#e5f3ff");
run_no_ball.css("color", "#0D6EFD");
}
}

function setTarget(isTargetModeOn = true) {


isTargetMode = isTargetModeOn;
if (!isTargetModeOn) {
$("#targetBoard").hide();
$("#targetModeButton").show();
} else {
targetRuns = parseInt($("#targetRuns").val());
targetOvers = parseInt($("#targetOvers").val());
updateTarget();
$("#targetBoard").show(2500);
$("#targetModeButton").hide();
}
publishMessage(
JSON.stringify({
isTargetMode: isTargetMode,
})
);
}

function updateTarget() {
if (!isTargetMode) return;
updateHtml("#targetRunsRequired", targetRuns - runs);
let ballsLeft = targetOvers * 6 - ((over_no - 1) * 6 + ball_no - 1);
updateHtml("#targetOversLeft", ballsLeft);

let closeButton =
'&nbsp;&nbsp;<button type="button" class="btn-close"
onClick="setTarget(false)"></button>';
if (ballsLeft == 0) {
if (targetRuns < runs) {
updateHtml(
"#targetBody",
"Hurray! The batting team has Won!!" + closeButton
);
} else if (targetRuns - 1 == runs) {
updateHtml("#targetBody", "Match Over! It's a tie." +
closeButton);
} else {
updateHtml(
"#targetBody",
"Hurray! The bowling team has Won!!" + closeButton
);
}
$("#targetModeButton").show();
}
if (targetRuns <= runs) {
updateHtml(
"#targetBody",
"Hurray! The batting team has Won!!" + closeButton
);
$("#targetModeButton").show();
}
}

function updateHtml(eleId, newHtml) {


/// eleId is in the form of "#overs"
let isSame = $(eleId).html() == newHtml;
$(eleId).html(newHtml);

if (isShareMode && !isSame)


publishMessage(
JSON.stringify({
update: { eleId: eleId, newHtml: newHtml },
})
);
// publishMessage(
// JSON.stringify({
// scoreboard: scoreboard,
// ball_no: ball_no,
// over_no: over_no,
// runs: runs,
// edited: edited,
// isNoBall: isNoBall,
// isTargetMode: isTargetMode,
// targetRuns: targetRuns,
// targetOvers: targetOvers,
// })
// );
}

function sendInitVariables() {
let vars = {
"#ball_no_1": $("#ball_no_1").html(),
"#ball_no_2": $("#ball_no_2").html(),
"#ball_no_3": $("#ball_no_3").html(),
"#ball_no_4": $("#ball_no_4").html(),
"#ball_no_5": $("#ball_no_5").html(),
"#ball_no_6": $("#ball_no_6").html(),
"#over-ball": $("#over-ball").html(),
"#run": $("#run").html(),
"#edited-scores": $("#edited-scores").html(),
"#scoreboard": $("#scoreboard").html(),
"#wickets": $("#wickets").html(),
"#targetRunsRequired": $("#targetRunsRequired").html(),
"#targetBody": $("#targetBody").html(),
};
publishMessage(
JSON.stringify({
init: vars,
isTargetMode: isTargetMode,
})
);
}
main_mqtt.js
var topic = -1;
let isStartConnectDone = false;

function startConnect(_topic) {
clientID = "clientID - " + parseInt(Math.random() * 100);

host = "test.mosquitto.org";
port = 8080;
topic = _topic ?? "" + parseInt(Math.random() * 1000000);

let seralizedLink =
document.location.origin + "/watch.html?matchCode=" + topic;
seralizedLink = encodeURI(seralizedLink);
document.getElementById("shareModalBody").innerHTML =
"<h4>Share this code:" +
'&nbsp;<span class="badge bg-secondary">' +
topic +
"</span>&nbsp;" +
'<button class="btn btn-primary"
onclick="navigator.clipboard.writeText(\'' +
topic +
'\')" data-dismiss="modal">' +
'<span class="material-symbols-outlined">content_copy</span>';
("</span></h4>");

document.getElementById("shareModalFooter").innerHTML =
'<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>' +
'<button type="button" class="btn btn-default"
onclick="navigator.clipboard.writeText(\'' +
seralizedLink +
'\')" data-dismiss="modal">Copy link</button>' +
'<a href="whatsapp://send?text=Follow the match score at: ' +
document.location.origin +
"/watch.html?matchCode=" +
topic +
'" data-action="share/whatsapp/share">Share via Whatsapp</a>';

document.getElementById("messages").innerHTML +=
"<span> Connecting to " + host + "on port " + port + "</span><br>";
document.getElementById("messages").innerHTML +=
"<span> Using the client Id " + clientID + " </span><br>";

client = new Paho.MQTT.Client(host, Number(port), clientID);

client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;

client.connect({
onSuccess: onConnect,
// userName: userId,
// passwordId: passwordId
});
isStartConnectDone = true;
}

function onConnect() {
document.getElementById("messages").innerHTML +=
"<span> Subscribing to topic " + topic + "</span><br>";

client.subscribe("matchCodeWatch" + topic + "origin");


}

function onConnectionLost(responseObject) {
document.getElementById("messages").innerHTML +=
"<span> ERROR: Connection is lost.</span><br>";
if (responseObject != 0) {
document.getElementById("messages").innerHTML +=
"<span> ERROR:" + responseObject.errorMessage + "</span><br>";
}
}

function onMessageArrived(message) {
console.log("OnMessageArrived: " + message.payloadString);
document.getElementById("messages").innerHTML +=
"<span> Topic:" +
message.destinationName +
"| Message : " +
message.payloadString +
"</span><br>";
payload = JSON.parse(message.payloadString);
if (payload.init != undefined && payload.init == "true") {
sendInitVariables();
}
}

// function startDisconnect() {
// client.disconnect();
// document.getElementById("messages").innerHTML +=
// "<span> Disconnected. </span><br>";
// }

function publishMessage(msg) {
if (!isStartConnectDone) return;

// msg = document.getElementById("Message").value;
// topic = document.getElementById("topic_p").value;

Message = new Paho.MQTT.Message(msg);


Message.destinationName = "matchCodeWatch" + topic;

client.send(Message);
document.getElementById("messages").innerHTML +=
"<span> Message to topic " + topic + " is sent </span><br>";
}
watch.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Cricket run counter</title>
<!-- <link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5/css/bootstrap.min.css"

integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"> -->
<!-- CSS only -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js"
type="text/javascript"></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body style="background-color:#e5f3ff;">
<div class="container">
<div class="alert alert-primary text-center" role="alert" style="display: none;
transition: height 1400ms;" id="alert">
</div>

<!-- This is the scores on the topmost part of the screen -->
<div class="col-left-custom">
<h6 style="text-align:center;">
<!-- <span style="vertical-align:0.7em; font-size: small;">Score: </span>
-->
<span contentEditable="false" id="run" style="font-size:30vw; line-height:
80%;">0</span>
<span contentEditable="false" style="font-size:25vw; line-height:
80%;">/</span>
<span contentEditable="false" id="wickets" style="font-size:30vw; line-
height: 80%;">0</span>
<span id="over-ball" style="font-size: 10vw; line-height: 200%">0</span>
</h6>
</div>
<!-- END: This is the scores on the topmost part of the screen -->

<!-- These are the action buttons and runboard -->


<div class="col-right-custom">
<div class="position-relative m-4">
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 0%;"></div>
</div>
<button type="button"
class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-
light rounded-pill over-ball-style"
id="ball_no_1"></button>
<button type="button"
class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-
light rounded-pill over-ball-style"
id="ball_no_2"></button>
<button type="button"
class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-
light rounded-pill over-ball-style"
id="ball_no_3"></button>
</div>
<div class="position-relative m-4 my-5">
<div class="progress" style="height: 1px;">
<div class="progress-bar" role="progressbar" style="width: 0%;"></div>
</div>
<button type="button"
class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-
light rounded-pill over-ball-style"
id="ball_no_4"></button>
<button type="button"
class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-
light rounded-pill over-ball-style"
id="ball_no_5"></button>
<button type="button"
class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-
light rounded-pill over-ball-style"
id="ball_no_6"></button>
</div>
<div class="alert alert-primary text-center" role="alert" id="targetBody"
style="display: none; transition: height 1400ms;">
</div>

<div class="row no-gutters">


<div class="col-12 my-auto zoom py-4 px-1 run-btn">
<table class="table table-striped table-success" id="scoreboard">
</table>
<div id="edited-scores"></div>
</div>
</div>
</div>

<!-- shareModal: Modal 1: For match sharing -->


<div class="modal fade" id="shareModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->


<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Enter match code (Beta)</h4>
<button type="button" class="btn close"
data-dismiss="modal">&times;</button>
</div>
<div class="modal-body" id="shareModalBody">
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="number" class="form-control" id="matchCodeInput"
placeholder="123456">
<label for="matchCodeInput">Match code</label>
</div>
</div>
</div>

</div>
<div class="modal-footer" id="shareModalFooter">
<button type="button" class="btn btn-default" data-
dismiss="modal"onclick="getMatchCodeNConnect()">Go</button>
</div>
</div>
</div>
</div>
</div>

</div>

<div id="messages"></div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- <script src="watch_mqtt.js"></script> -->
<script src="watch.js"></script>
</body>

</html>
watch.js
var scoreboard = [[], [0]]; //scoreboard[<over_no>][0] counts wide runs
var ball_no = 1; // Ball number will start from 1
var over_no = 1; // Over number will start from 1
var runs = 0;
var edited = [];
var isNoBall = false;
var isTargetMode = false;
var targetRuns = -1; // total runs scored by other team
var targetOvers = -1; //total overs

var topic = -1;

$(document).ready(function () {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get("matchCode") != null) {
console.log(urlParams.get("matchCode"));
startConnect(urlParams.get("matchCode")); //TODO
} else {
// $('#matchCodeInput').modal('show');
let myModal = new bootstrap.Modal(
document.getElementById("shareModal"),
{}
);
myModal.show();
}
console.log(document.location.origin);

if (urlParams.get("debug") == null || urlParams.get("debug") != "true")


$("#messages").hide();
});

function getMatchCodeNConnect() {
let matchCode = $("#matchCodeInput").val();
startConnect(matchCode);
}

let isStartConnectDone = false;

function startConnect(_topic) {
clientID = "clientID - " + parseInt(Math.random() * 100);

host = "test.mosquitto.org";
port = 8080;
topic = _topic ?? "" + parseInt(Math.random() * 1000000);

document.getElementById("messages").innerHTML +=
"<span> Connecting to " + host + "on port " + port + "</span><br>";
document.getElementById("messages").innerHTML +=
"<span> Using the client Id " + clientID + " </span><br>";

client = new Paho.MQTT.Client(host, Number(port), clientID);

client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;

client.connect({
onSuccess: onConnect,
// userName: userId,
// passwordId: passwordId
});
isStartConnectDone = true;
console.log("start connect done!");
}

function onConnect() {
document.getElementById("messages").innerHTML +=
"<span> Subscribing to topic " + topic + "</span><br>";

client.subscribe("matchCodeWatch" + topic);
publishMessage(JSON.stringify({ init: "true" }));
console.log("onConnect called");
}

function onConnectionLost(responseObject) {
document.getElementById("messages").innerHTML +=
"<span> ERROR: Connection is lost.</span><br>";
if (responseObject != 0) {
document.getElementById("messages").innerHTML +=
"<span> ERROR:" + responseObject.errorMessage + "</span><br>";
}
}

function onMessageArrived(message) {
console.log("OnMessageArrived: " + message.payloadString);
document.getElementById("messages").innerHTML +=
"<span> Topic:" +
message.destinationName +
"| Message : " +
message.payloadString +
"</span><br>";

let payload = JSON.parse(message.payloadString);


if (payload.update != undefined) {
updateHtml(payload.update.eleId, payload.update.newHtml);
} else if (payload.init != undefined) {
showConnected();
initHtml(payload);
} else if (payload.isTargetMode != undefined)
setTargetMode(payload.isTargetMode);
}
function publishMessage(msg) {
if (!isStartConnectDone) return;

// msg = document.getElementById("Message").value;
// topic = document.getElementById("topic_p").value;

Message = new Paho.MQTT.Message(msg);


Message.destinationName = "matchCodeWatch" + topic + "origin";

client.send(Message);
document.getElementById("messages").innerHTML +=
"<span> Message to topic " + topic + " is sent </span><br>";
}

function updateHtml(eleId, newHtml) {


$(eleId).html(newHtml);
}

function initHtml(payload) {
// console.log(JSON.parse(initVars));
for (let keys in payload.init) {
$(keys).html(payload.init[keys]);
}
setTargetMode(payload.isTargetMode);
}

function setTargetMode(isTargetMode) {
isTargetMode ??= false;
if (isTargetMode) $("#targetBody").show();
else $("#targetBody").hide();
}

function showConnected() {
console.log("Connected successfully!");
$("#alert").html("Connected successfully!");
$("#alert").show();
setTimeout(function () {
$("#alert").hide();
}, 4000);
}

You might also like