0% found this document useful (0 votes)

10 views29 pages

Cricket Tournament Scorer Tool

Uploaded by

nikhil sharma

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

0% found this document useful (0 votes)

10 views29 pages

Cricket Tournament Scorer Tool

Uploaded by

nikhil sharma

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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cricket Scorer</title>
<script src="[Link]
<link href="[Link]
family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.hidden {
display: none;
}
.ball {
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 2px;
font-weight: bold;
color: white;
}
.ball-0 { background-color: #4A5568; }
.ball-1 { background-color: #38A169; }
.ball-2 { background-color: #3182CE; }
.ball-3 { background-color: #805AD5; }
.ball-4 { background-color: #D69E2E; }
.ball-6 { background-color: #DD6B20; }
.ball-w { background-color: #E53E3E; }
.ball-wd, .ball-nb { background-color: #718096; }

.modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
overflow-y: auto;
}
.modal-content {
background-color: white;
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 90%;
width: 400px;
}

@media print {
body > #app > *:not(#scorecardModal) {
display: none !important;
}
#scorecardModal {
visibility: visible !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: auto !important;
background: white !important;
z-index: 9999 !important;
overflow: visible !important;
}
#scorecardModal .modal-content {
width: 100% !important;
max-width: 100% !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.no-print {
display: none !important;
}
}

</style>
</head>
<body class="bg-gray-100 text-gray-800">

<div id="app" class="max-w-7xl mx-auto p-4">

<div id="mainScreen">
<div class="text-center bg-white p-6 rounded-lg shadow-md">
<h1 class="text-3xl font-bold text-blue-700">Dyal Singh Public
School</h1>
<h2 class="text-xl font-semibold text-gray-600 mb-6">Inter-House
Cricket Tournament Scorer</h2>
</div>

<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">

<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-2xl font-bold mb-4 border-b pb-2">Start a New
Match</h3>
<div id="fixtures">

</div>
<button id="customMatchBtn" class="w-full bg-gray-500
hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg mt-4 transition
duration-300">
Start a Custom Match
</button>
<button id="recordsBtn" class="w-full bg-teal-600 hover:bg-
teal-700 text-white font-bold py-2 px-4 rounded-lg mt-4 transition duration-300">
Tournament Records
</button>
<button id="adminPanelBtn" class="w-full bg-indigo-600
hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-lg mt-4 transition
duration-300">
Admin Panel (Edit Squads)
</button>
</div>

<div class="bg-white p-6 rounded-lg shadow-md">

<h3 class="text-2xl font-bold mb-4 border-b pb-2">Points
Table</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-white">
<thead class="bg-gray-800 text-white">
<tr>
<th class="text-left py-3 px-4 uppercase font-
semibold text-sm">Team</th>
<th class="text-center py-3 px-4 uppercase
font-semibold text-sm">P</th>
<th class="text-center py-3 px-4 uppercase
font-semibold text-sm">W</th>
<th class="text-center py-3 px-4 uppercase
font-semibold text-sm">L</th>
<th class="text-center py-3 px-4 uppercase
font-semibold text-sm">Pts</th>
<th class="text-center py-3 px-4 uppercase
font-semibold text-sm">NRR</th>
</tr>
</thead>
<tbody id="pointsTableBody" class="text-gray-700">

</tbody>
</table>
</div>
</div>
</div>
</div>

<div id="recordsScreen" class="hidden bg-white p-6 rounded-lg shadow-md">
<h2 class="text-3xl font-bold mb-6 text-center">Tournament Records</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div id="mostRunsSection">
<h3 class="text-xl font-bold mb-2">Most Runs</h3>
<table class="min-w-full bg-white">
<thead class="bg-gray-200">
<tr>
<th class="py-2 px-3 text-left">Player</th>
<th class="py-2 px-3 text-right">Runs</th>
</tr>
</thead>
<tbody id="mostRunsBody"></tbody>
</table>
</div>
<div id="mostWicketsSection">
<h3 class="text-xl font-bold mb-2">Most Wickets</h3>
<table class="min-w-full bg-white">
<thead class="bg-gray-200">
<tr>
<th class="py-2 px-3 text-left">Player</th>
<th class="py-2 px-3 text-right">Wickets</th>
</tr>
</thead>
<tbody id="mostWicketsBody"></tbody>
</table>
</div>
<div id="bestStrikeRateSection">
<h3 class="text-xl font-bold mb-2">Best Strike Rate (min 20
runs)</h3>
<table class="min-w-full bg-white">
<thead class="bg-gray-200">
<tr>
<th class="py-2 px-3 text-left">Player</th>
<th class="py-2 px-3 text-right">SR</th>
</tr>
</thead>
<tbody id="bestStrikeRateBody"></tbody>
</table>
</div>
<div id="bestEconomySection">
<h3 class="text-xl font-bold mb-2">Best Economy (min 2
overs)</h3>
<table class="min-w-full bg-white">
<thead class="bg-gray-200">
<tr>
<th class="py-2 px-3 text-left">Player</th>
<th class="py-2 px-3 text-right">Econ</th>
</tr>
</thead>
<tbody id="bestEconomyBody"></tbody>
</table>
</div>
</div>
<div class="mt-8 text-center">
<button id="backToMainFromRecordsBtn" class="bg-gray-500 hover:bg-
gray-600 text-white font-bold py-3 px-8 rounded-lg transition duration-300">Back to
Main</button>
</div>
</div>

<div id="adminScreen" class="hidden bg-white p-6 rounded-lg shadow-md">
<h2 class="text-3xl font-bold mb-6 text-center">Administrator Panel -
Edit Squads</h2>
<div id="squadsEditor" class="grid grid-cols-1 md:grid-cols-2 gap-8">

</div>
<div class="mt-8 text-center">
<button id="saveSquadsBtn" class="bg-green-600 hover:bg-green-700
text-white font-bold py-3 px-8 rounded-lg transition duration-300 mr-4">Save
Squads</button>
<button id="backToMainFromAdminBtn" class="bg-gray-500 hover:bg-
gray-600 text-white font-bold py-3 px-8 rounded-lg transition duration-300">Back to
Main</button>
</div>
</div>

<div id="matchSetupScreen" class="hidden bg-white p-6 rounded-lg shadow-
md">
<h2 class="text-2xl font-bold mb-6 text-center">Match Setup</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="teamA" class="block text-sm font-medium text-gray-
700">Team A</label>
<select id="teamA" class="mt-1 block w-full pl-3 pr-10 py-2
text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-
indigo-500 sm:text-sm rounded-md">
</select>
</div>
<div>
<label for="teamB" class="block text-sm font-medium text-gray-
700">Team B</label>
<select id="teamB" class="mt-1 block w-full pl-3 pr-10 py-2
text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-
indigo-500 sm:text-sm rounded-md">
</select>
</div>
</div>
<div class="mt-6">
<label for="matchType" class="block text-sm font-medium text-gray-
700">Match Type</label>
<select id="matchType" class="mt-1 block w-full pl-3 pr-10 py-2
text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-
indigo-500 sm:text-sm rounded-md">
<option value="8">League Match (8 Overs)</option>
<option value="10">Final Match (10 Overs)</option>
</select>
</div>
<div class="mt-6 text-center">
<button id="tossBtn" class="bg-blue-600 hover:bg-blue-700 text-
white font-bold py-3 px-6 rounded-lg transition duration-300">
Proceed to Toss
</button>
</div>
</div>

<div id="scoringScreen" class="hidden">
<div class="grid grid-cols-1 lg:grid-cols-5 gap-6">

<div class="lg:col-span-3 space-y-4">

<div class="bg-gray-800 text-white p-4 rounded-lg shadow-xl
text-center">
<div class="flex justify-between items-center mb-2">
<div id="scoringTeamName" class="text-2xl font-
bold"></div>
<div class="text-4xl font-extrabold"><span
id="totalRuns">0</span>/<span id="totalWickets">0</span></div>
</div>
<div class="flex justify-between items-center text-lg">
<div>Overs: <span id="overs">0.0</span></div>
<div>CRR: <span id="crr">0.00</span></div>
</div>

<div id="targetContainer" class="hidden mt-2 pt-2 border-t
border-gray-600 text-base">
<div class="flex justify-between">
<span>Target: <strong id="target" class="text-
lg"></strong></span>
<span>Req RR: <strong id="rrr"
class="text-lg"></strong></span>
</div>
<div class="mt-1 text-xl font-bold">
Need <strong id="runsNeeded"></strong> runs in
<strong id="ballsRemaining"></strong> balls
</div>
</div>
</div>

<div class="bg-white p-4 rounded-lg shadow-md">
<div class="grid grid-cols-4 gap-2 mb-2">
<button data-run="0" class="run-btn bg-gray-200
hover:bg-gray-300 p-4 rounded font-bold">0</button>
<button data-run="1" class="run-btn bg-blue-500
hover:bg-blue-600 text-white p-4 rounded font-bold">1</button>
<button data-run="2" class="run-btn bg-blue-500
hover:bg-blue-600 text-white p-4 rounded font-bold">2</button>
<button data-run="3" class="run-btn bg-blue-500
hover:bg-blue-600 text-white p-4 rounded font-bold">3</button>
<button data-run="4" class="run-btn bg-yellow-500
hover:bg-yellow-600 text-white p-4 rounded font-bold">4</button>
<button data-run="6" class="run-btn bg-orange-500
hover:bg-orange-600 text-white p-4 rounded font-bold">6</button>
<button id="wicketBtn" class="bg-red-500 hover:bg-red-
600 text-white p-4 rounded font-bold col-span-2">Wicket</button>
</div>
<div class="grid grid-cols-3 gap-2">
<button id="wdBtn" class="extra-btn bg-indigo-500
hover:bg-indigo-600 text-white p-3 rounded">Wide</button>
<button id="nbBtn" class="extra-btn bg-indigo-500
hover:bg-indigo-600 text-white p-3 rounded">No Ball</button>
<button id="undoBtn" class="bg-gray-700 hover:bg-gray-
800 text-white p-3 rounded">Undo</button>
</div>
</div>

<div class="flex justify-end">

<button id="endInningsBtn" class="bg-green-600 hover:bg-
green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">End
Innings</button>
</div>
</div>

<div class="lg:col-span-2 bg-white p-4 rounded-lg shadow-md self-
start">
<h3 class="text-xl font-bold text-center mb-4 border-b pb-
2">Live Scorecard</h3>
<div id="liveScorecardPreview" class="space-y-4">

</div>
</div>
</div>
</div>

<div id="scorecardModal" class="modal-backdrop hidden">
<div class="modal-content !max-w-4xl">
<div id="printableScorecard">
<h2 class="text-2xl font-bold mb-4 text-center">Full
Scorecard</h2>
<div id="fullScorecardContent" class="space-y-6"></div>
</div>
<div class="mt-6 text-center space-x-4 no-print">
<button id="printScorecardBtn" class="bg-blue-600 hover:bg-
blue-700 text-white font-bold py-2 px-6 rounded">Print</button>
<button id="closeScorecardBtn" class="bg-gray-500 hover:bg-
gray-600 text-white font-bold py-2 px-6 rounded">Close</button>
</div>
</div>
</div>

<div id="tossWinnerModal" class="modal-backdrop hidden">

<div id="tossModal" class="modal-backdrop hidden">

<div class="modal-content text-center">
<h2 class="text-2xl font-bold mb-4">Toss Time!</h2>
<p id="tossResult" class="mb-4 text-lg"></p>
<div id="decisionMaking" class="hidden">
<p class="mb-2 font-semibold">elects to:</p>
<div class="flex justify-center gap-4">
<button id="batBtn" class="bg-green-500 hover:bg-green-600
text-white font-bold py-2 px-4 rounded">Bat</button>
<button id="bowlBtn" class="bg-blue-500 hover:bg-blue-600
text-white font-bold py-2 px-4 rounded">Bowl</button>
</div>
</div>
</div>
</div>

<div id="wideRunsModal" class="modal-backdrop hidden">

<div class="modal-content text-center">
<h2 class="text-2xl font-bold mb-6">Runs on Wide?</h2>
<p class="text-sm text-gray-500 mb-4">(In addition to the 1 run for
the wide)</p>
<div class="grid grid-cols-5 gap-2">
<button class="wide-run-btn p-3 bg-gray-200 hover:bg-gray-300
rounded" data-runs="0">0</button>
<button class="wide-run-btn p-3 bg-gray-200 hover:bg-gray-300
rounded" data-runs="1">1</button>
<button class="wide-run-btn p-3 bg-gray-200 hover:bg-gray-300
rounded" data-runs="2">2</button>
<button class="wide-run-btn p-3 bg-gray-200 hover:bg-gray-300
rounded" data-runs="3">3</button>
<button class="wide-run-btn p-3 bg-gray-200 hover:bg-gray-300
rounded" data-runs="4">4</button>
</div>
<div class="mt-4 flex justify-end">
<button id="cancelWideBtn" class="bg-gray-500 hover:bg-gray-600
text-white font-bold py-2 px-4 rounded">Cancel</button>
</div>
</div>
</div>

<div id="playingXIModal" class="modal-backdrop hidden">

<div class="modal-content !max-w-3xl"> 
<h2 class="text-2xl font-bold mb-4 text-center">Select Playing
XI</h2>
<p class="text-center text-gray-600 mb-6">Please select exactly 11
players for each team.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div id="teamA_XI_Selection">

</div>
<div id="teamB_XI_Selection">

</div>
</div>
<div class="mt-8 text-center">
<button id="proceedToMatchBtn" class="bg-green-600 hover:bg-
green-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300
disabled:bg-gray-400" disabled>
Proceed to Match
</button>
</div>
</div>
</div>

<div id="playerSelectionModal" class="modal-backdrop hidden">

<div class="modal-content">
<h2 class="text-2xl font-bold mb-4 text-center">Select Opening
Players</h2>
<div class="mb-4">
<label class="block font-bold mb-1"
id="strikerLabel">Striker:</label>
<select id="strikerSelect" class="w-full p-2 border
rounded"></select>
</div>
<div class="mb-4">
<label class="block font-bold mb-1" id="nonStrikerLabel">Non-
Striker:</label>
<select id="nonStrikerSelect" class="w-full p-2 border
rounded"></select>
</div>
<div class="mb-6">
<label class="block font-bold mb-1"
id="bowlerLabel">Bowler:</label>
<select id="bowlerSelect" class="w-full p-2 border
rounded"></select>
</div>
<button id="startPlayBtn" class="w-full bg-green-600 hover:bg-
green-700 text-white font-bold py-2 px-4 rounded">Start Play</button>
</div>
</div>

<div id="nextPlayerModal" class="modal-backdrop hidden">

<div class="modal-content">
<h2 id="nextPlayerModalTitle" class="text-2xl font-bold mb-4 text-
center"></h2>
<div class="mb-4">
<label id="nextPlayerModalLabel" class="block font-bold mb-
1"></label>
<select id="nextPlayerSelect" class="w-full p-2 border
rounded"></select>
</div>
<button id="confirmNextPlayerBtn" class="w-full bg-green-600
hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Confirm</button>
</div>
</div>

<div id="wicketModal" class="modal-backdrop hidden">

<div class="modal-content">
<h2 class="text-2xl font-bold mb-4">How was the dismissal?</h2>
<div class="grid grid-cols-2 gap-2">
<button class="wicket-type-btn p-3 bg-gray-200 hover:bg-gray-
300 rounded" data-type="Bowled">Bowled</button>
<button class="wicket-type-btn p-3 bg-gray-200 hover:bg-gray-
300 rounded" data-type="Caught">Caught</button>
<button class="wicket-type-btn p-3 bg-gray-200 hover:bg-gray-
300 rounded" data-type="LBW">LBW</button>
<button class="wicket-type-btn p-3 bg-gray-200 hover:bg-gray-
300 rounded" data-type="Run Out">Run Out</button>
<button class="wicket-type-btn p-3 bg-gray-200 hover:bg-gray-
300 rounded" data-type="Stumped">Stumped</button>
<button class="wicket-type-btn p-3 bg-gray-200 hover:bg-gray-
300 rounded" data-type="Hit Wicket">Hit Wicket</button>
</div>
<div id="runOutOptions" class="mt-4 hidden">
<label class="block font-bold mb-1">Which batsman is
out?</label>
<select id="runOutBatsman" class="w-full p-2 border
rounded"></select>
</div>
<div class="mt-4 flex justify-end">
<button id="cancelWicketBtn" class="bg-gray-500 hover:bg-gray-
600 text-white font-bold py-2 px-4 rounded">Cancel</button>
</div>
</div>
</div>

<div id="matchSummaryModal" class="modal-backdrop hidden">

<div class="modal-content text-center">
<h2 class="text-2xl font-bold mb-4">Match Over</h2>
<p id="matchResultText" class="text-lg font-semibold mb-6"></p>
<div class="flex justify-center gap-4">
<button id="viewScorecardBtn" class="bg-teal-600 hover:bg-teal-
700 text-white font-bold py-2 px-4 rounded">View Full Scorecard</button>
<button id="backToHomeBtn" class="bg-blue-600 hover:bg-blue-700
text-white font-bold py-2 px-4 rounded">Back to Home</button>
</div>
</div>
</div>

</div>

const defaultSquads = {
'NILGIRI': { name: 'Nilgiri', players: [Link]({ length: 15 }, (_,
i) => `Player ${i + 1}`) },
'HIMALAYA': { name: 'Himalaya', players: [Link]({ length: 15 }, (_,
i) => `Player ${i + 1}`) },
'ARAVALI': { name: 'Aravali', players: [Link]({ length: 15 }, (_,
i) => `Player ${i + 1}`) },
'SHIWALIK': { name: 'Shiwalik', players: [Link]({ length: 15 }, (_,
i) => `Player ${i + 1}`) }
};

let squads = {};

const FIXTURES = [
{ teamA: 'NILGIRI', teamB: 'HIMALAYA' },
{ teamA: 'ARAVALI', teamB: 'SHIWALIK' },
{ teamA: 'NILGIRI', teamB: 'ARAVALI' },
{ teamA: 'HIMALAYA', teamB: 'SHIWALIK' },
{ teamA: 'NILGIRI', teamB: 'SHIWALIK' },
{ teamA: 'ARAVALI', teamB: 'HIMALAYA' }
];

const initialPointsTable = {
'NILGIRI': { p: 0, w: 0, l: 0, pts: 0, nrr: 0, runsScored: 0,
oversFaced: 0, runsConceded: 0, oversBowled: 0 },
'HIMALAYA': { p: 0, w: 0, l: 0, pts: 0, nrr: 0, runsScored: 0,
oversFaced: 0, oversBowled: 0, runsConceded: 0, },
'ARAVALI': { p: 0, w: 0, l: 0, pts: 0, nrr: 0, runsScored: 0,
oversFaced: 0, oversBowled: 0, runsConceded: 0, },
'SHIWALIK': { p: 0, w: 0, l: 0, pts: 0, nrr: 0, runsScored: 0,
oversFaced: 0, oversBowled: 0, runsConceded: 0, }
};

let pointsTable = [Link]([Link]('pointsTable')) ||

initialPointsTable;
let allMatchData = [Link]([Link]('allMatchData')) || [];
let history = [];

// UI Elements
const mainScreen = [Link]('mainScreen');
const adminScreen = [Link]('adminScreen');
const recordsScreen = [Link]('recordsScreen');
const matchSetupScreen = [Link]('matchSetupScreen');
const scoringScreen = [Link]('scoringScreen');

// Functions
function navigate(screen) {
[Link]('hidden');
[Link]('hidden');
[Link]('hidden');
[Link]('hidden');
[Link]('hidden');
[Link](screen).[Link]('hidden');
}

function loadSquads() {
const savedSquads = [Link]('cricketSquads');
squads = savedSquads ? [Link](savedSquads) :
[Link]([Link](defaultSquads));
}

function initializeApp() {
loadSquads();
populateFixtures();
updatePointsTableUI();

[Link]('customMatchBtn').addEventListener('click', ()
=> setupMatch());
[Link]('adminPanelBtn').addEventListener('click',
showAdminPanel);
[Link]('recordsBtn').addEventListener('click',
showRecordsScreen);
[Link]('saveSquadsBtn').addEventListener('click',
saveSquads);
[Link]('#backToMainFromAdminBtn,
#backToMainFromRecordsBtn').forEach(btn => [Link]('click', () =>
navigate('mainScreen')));

[Link]('tossBtn').addEventListener('click',
conductToss);

[Link]('.run-btn').forEach(btn =>
[Link]('click', (e) => addRuns(parseInt([Link]))));
[Link]('wdBtn').addEventListener('click',
openWideModal);
[Link]('.wide-run-btn').forEach(btn =>
[Link]('click', (e) => addWide(parseInt([Link]))));
[Link]('cancelWideBtn').addEventListener('click', ()
=> [Link]('wideRunsModal').[Link]('hidden'));

[Link]('nbBtn').addEventListener('click', addNoBall);
[Link]('wicketBtn').addEventListener('click',
openWicketModal);
[Link]('cancelWicketBtn').addEventListener('click', ()
=> [Link]('wicketModal').[Link]('hidden'));
[Link]('.wicket-type-btn').forEach(btn =>
[Link]('click', (e) => handleWicket([Link])));
[Link]('startPlayBtn').addEventListener('click',
startPlay);
[Link]('endInningsBtn').addEventListener('click',
endInnings);
[Link]('backToHomeBtn').addEventListener('click',
resetAndGoHome);
[Link]('viewScorecardBtn').addEventListener('click',
showFullScorecard);
[Link]('printScorecardBtn').addEventListener('click',
() => [Link]());
[Link]('closeScorecardBtn').addEventListener('click',
() => [Link]('scorecardModal').[Link]('hidden'));
[Link]('undoBtn').addEventListener('click',
undoLastAction);

[Link]('confirmNextPlayerBtn').addEventListener('click',
confirmNextPlayer);
navigate('mainScreen');
}

function saveSquads() {
[Link]('.squad-input').forEach(input => {
const { team, playerIndex } = [Link];
squads[team].players[playerIndex] = [Link];
});
[Link]('cricketSquads', [Link](squads));

const saveBtn = [Link]('saveSquadsBtn');

[Link] = 'Squads Saved!';
[Link]('bg-green-600', 'hover:bg-green-700');
[Link]('bg-blue-500');
setTimeout(() => {
[Link] = 'Save Squads';
[Link]('bg-blue-500');
[Link]('bg-green-600', 'hover:bg-green-700');
}, 2000);
}

function setupMatch(teamAKey, teamBKey) {

const teamASelect = [Link]('teamA');
const teamBSelect = [Link]('teamB');
[Link] = '';
[Link] = '';

[Link](squads).forEach(key => {
[Link] += `<option value="${key}">$
{squads[key].name}</option>`;
[Link] += `<option value="${key}">$
{squads[key].name}</option>`;
});

if (teamAKey && teamBKey) {

[Link] = teamAKey;
[Link] = teamBKey;
} else {
[Link] = [Link](squads)[0];
[Link] = [Link](squads)[1];
}

navigate('matchSetupScreen');
}

function conductToss() {
const teamA = [Link]('teamA').value;
const teamB = [Link]('teamB').value;
const maxOvers = parseInt([Link]('matchType').value);

if (teamA === teamB) {

const tossWinnerModal = [Link]('tossWinnerModal');

const tossWinnerSelection =
[Link]('tossWinnerSelection');
[Link] = `
<button data-team="${teamA}" class="toss-winner-btn w-full bg-blue-
600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded">$
{squads[teamA].name}</button>
<button data-team="${teamB}" class="toss-winner-btn w-full bg-blue-
600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded">$
{squads[teamB].name}</button>
`;

[Link]('.toss-winner-btn').forEach(btn => {
[Link] = () => selectTossWinner([Link]);
});

[Link]('hidden');
}

function selectTossWinner(winnerKey) {
[Link] = winnerKey;
[Link]('tossWinnerModal').[Link]('hidden');

const modal = [Link]('tossModal');

[Link]('tossResult').textContent = `$
{squads[[Link]].name} won the toss.`;
[Link]('decisionMaking').[Link]('hidden');
[Link]('hidden');

[Link]('batBtn').onclick = () => {
[Link] = [Link];
[Link] = [Link] === [Link] ?
[Link] : [Link];
[Link]('hidden');
openPlayingXIModal();
};
[Link]('bowlBtn').onclick = () => {
[Link] = [Link];
[Link] = [Link] === [Link] ?
[Link] : [Link];
[Link]('hidden');
openPlayingXIModal();
};
}
function openPlayingXIModal() {
const modal = [Link]('playingXIModal');
const teamA_Container = [Link]('teamA_XI_Selection');
const teamB_Container = [Link]('teamB_XI_Selection');

teamA_Container.innerHTML = `<h3 class="text-xl font-bold mb-4 text-

center">${[Link]}</h3><div class="space-y-2"><p id="teamACount"
class="font-semibold text-center mb-2">Selected: 0/11</p><div id="teamAPlayers"
class="space-y-1 max-h-64 overflow-y-auto pr-2"></div></div>`;
teamB_Container.innerHTML = `<h3 class="text-xl font-bold mb-4 text-
center">${[Link]}</h3><div class="space-y-2"><p id="teamBCount"
class="font-semibold text-center mb-2">Selected: 0/11</p><div id="teamBPlayers"
class="space-y-1 max-h-64 overflow-y-auto pr-2"></div></div>`;

const teamAPlayersDiv = [Link]('teamAPlayers');

[Link]((player) => {
[Link] += `
<label class="flex items-center p-2 rounded hover:bg-gray-100
cursor-pointer">
<input type="checkbox" class="h-4 w-4 rounded border-gray-
300 text-indigo-600 focus:ring-indigo-500 xi-checkbox" data-team="A">
<span class="ml-3 text-sm">${[Link]}</span>
</label>
`;
});

const teamBPlayersDiv = [Link]('teamBPlayers');

[Link]((player) => {
[Link] += `
<label class="flex items-center p-2 rounded hover:bg-gray-100
cursor-pointer">
<input type="checkbox" class="h-4 w-4 rounded border-gray-
300 text-indigo-600 focus:ring-indigo-500 xi-checkbox" data-team="B">
<span class="ml-3 text-sm">${[Link]}</span>
</label>
`;
});

[Link]('.xi-checkbox').forEach(cb =>
[Link]('change', handleXISelectionChange));
[Link]('proceedToMatchBtn').addEventListener('click',
proceedToMatch);

[Link]('hidden');
}

function handleXISelectionChange() {
const selectedA = [Link]('.xi-checkbox[data-
team="A"]:checked').length;
const selectedB = [Link]('.xi-checkbox[data-
team="B"]:checked').length;

[Link]('teamACount').textContent = `Selected: $
{selectedA}/11`;
[Link]('teamBCount').textContent = `Selected: $
{selectedB}/11`;

const proceedBtn = [Link]('proceedToMatchBtn');

[Link] = !(selectedA === 11 && selectedB === 11);
}

function proceedToMatch() {
// Set playing status instead of replacing the array
[Link](p => [Link] = false);
[Link](p => [Link] = false);

[Link]('.xi-checkbox[data-
team="A"]:checked').forEach(checkbox => {
const playerName = [Link];
const playerObj = [Link](p => [Link] ===
playerName);
if (playerObj) [Link] = true;
});

[Link]('.xi-checkbox[data-
team="B"]:checked').forEach(checkbox => {
const playerName = [Link];
const playerObj = [Link](p => [Link] ===
playerName);
if (playerObj) [Link] = true;
});

[Link]('playingXIModal').[Link]('hidden');
openPlayerSelectionModal();
}

function openPlayerSelectionModal() {
const modal = [Link]('playerSelectionModal');
const battingTeamKey = [Link] === 1 ?
[Link] : [Link];
const bowlingTeamKey = [Link] === 1 ?
[Link] : [Link];
const battingTeam = [Link] === battingTeamKey ? [Link] :
[Link];
const bowlingTeam = [Link] === bowlingTeamKey ? [Link] :
[Link];

const battingXI = [Link](p => [Link]);

const bowlingXI = [Link](p => [Link]);

[Link]('strikerLabel').textContent = `Striker ($
{[Link]}):`;
[Link]('nonStrikerLabel').textContent = `Non-Striker
(${[Link]}):`;
[Link]('bowlerLabel').textContent = `Bowler ($
{[Link]}):`;

populatePlayerDropdown('strikerSelect', battingXI, false);

populatePlayerDropdown('nonStrikerSelect', battingXI, false);
populatePlayerDropdown('bowlerSelect', bowlingXI, true);

[Link]('hidden');
}

function populatePlayerDropdown(selectId, players, isBowler, availableOnly

= true) {
const select = [Link](selectId);
[Link] = '';
[Link]((player) => {
if (!availableOnly || isBowler || ![Link]) {
const option = [Link]('option');
[Link] = [Link]; // Use unique ID for value
[Link] = [Link];
[Link](option);
}
});
}

function startPlay() {
const strikerId = [Link]('strikerSelect').value;
const nonStrikerId = [Link]('nonStrikerSelect').value;
const bowlerId = [Link]('bowlerSelect').value;

if (strikerId === nonStrikerId) {

const startBtn = [Link]('startPlayBtn');
[Link] = 'Striker and Non-striker must be
different.';
[Link]('bg-red-500');
setTimeout(() => {
[Link] = 'Start Play';
[Link]('bg-red-500');
}, 2000);
return;
}

const battingTeamKey = [Link] === 1 ?

[Link] : [Link];
const bowlingTeamKey = [Link] === 1 ?
[Link] : [Link];

const innings = {
battingTeam: battingTeamKey,
bowlingTeam: bowlingTeamKey,
score: 0,
wickets: 0,
overs: 0,
balls: 0,
extras: { wides: 0, noballs: 0 },
currentOver: [],
striker: strikerId,
nonStriker: nonStrikerId,
bowler: bowlerId,
bowlerStats: {} // Keyed by player ID
};

[Link][[Link] - 1] = innings;

[Link]('playerSelectionModal').[Link]('hidden');
navigate('scoringScreen');
updateScoreboard();
}

function getPlayerById(team, id) {

return [Link](p => [Link] === id);
}

function addRuns(runs) {
saveState();
const inn = [Link][[Link] - 1];
const battingTeam = [Link] === [Link] ? [Link] :
[Link];

[Link] += runs;
if ([Link][[Link]-1] !== 'Nb') {
[Link]++;
}

[Link](runs);

const striker = getPlayerById(battingTeam, [Link]);

[Link] += runs;
[Link]++;
if (runs === 4) [Link]++;
if (runs === 6) [Link]++;

if (![Link][[Link]]) [Link][[Link]] =
{ overs: 0, balls: 0, runs: 0, wickets: 0 };
[Link][[Link]].runs += runs;

if (runs % 2 !== 0) {
[[Link], [Link]] = [[Link], [Link]];
}

checkOverEnd();
updateScoreboard();
checkChaseEnd();
}

function openWideModal() {
[Link]('wideRunsModal').[Link]('hidden');
}

function addWide(extraRuns) {
saveState();
const inn = [Link][[Link] - 1];
const totalRunsFromWide = 1 + extraRuns;

[Link] += totalRunsFromWide;
[Link]++;
[Link](extraRuns > 0 ? `Wd+${extraRuns}` : 'Wd');

if (![Link][[Link]]) [Link][[Link]] =
{ overs: 0, balls: 0, runs: 0, wickets: 0 };
[Link][[Link]].runs += totalRunsFromWide;

if (extraRuns % 2 !== 0) {
[[Link], [Link]] = [[Link], [Link]];
}

[Link]('wideRunsModal').[Link]('hidden');
updateScoreboard();
checkChaseEnd();
}

function addNoBall() {
saveState();
const inn = [Link][[Link] - 1];
[Link]++;
[Link]++;
[Link]('Nb');
if (![Link][[Link]]) [Link][[Link]] =
{ overs: 0, balls: 0, runs: 0, wickets: 0 };
[Link][[Link]].runs++;
updateScoreboard();
checkChaseEnd();
}

function openWicketModal() {
const modal = [Link]('wicketModal');
const runOutBatsmanSelect = [Link]('runOutBatsman');
const inn = [Link][[Link] - 1];
const battingTeam = [Link] === [Link] ? [Link] :
[Link];

const striker = getPlayerById(battingTeam, [Link]);

const nonStriker = getPlayerById(battingTeam, [Link]);

[Link] = `
<option value="${[Link]}">${[Link]} (Striker)</option>
<option value="${[Link]}">${[Link]} (Non-
Striker)</option>
`;
[Link]('runOutOptions').[Link]('hidden');
[Link]('hidden');
}

function handleWicket(type) {
saveState();
const inn = [Link][[Link] - 1];
const battingTeam = [Link] === [Link] ? [Link] :
[Link];

[Link]++;
if (type !== 'Run Out' && type !== 'Caught') { // Caught is also a
valid delivery
[Link]++;
}
[Link]('W');
if (![Link][[Link]]) [Link][[Link]] =
{ overs: 0, balls: 0, runs: 0, wickets: 0 };
if(type !== 'Run Out') {
[Link][[Link]].wickets++;
}

let outBatsmanId;
if (type === 'Run Out') {
outBatsmanId = [Link]('runOutBatsman').value;
} else {
outBatsmanId = [Link];
}

const outBatsman = getPlayerById(battingTeam, outBatsmanId);

[Link] = true;
[Link] = type;
[Link]('wicketModal').[Link]('hidden');

if ([Link] < 10) {

const position = outBatsmanId === [Link] ? 'striker' :
'nonStriker';
openNextPlayerModal('batsman', { position, outBatsmanId });
} else {
endInnings();
}

checkOverEnd();
updateScoreboard();
}

function openNextPlayerModal(type, context = {}) {

nextPlayerContext = { type, ...context };
const modal = [Link]('nextPlayerModal');
const title = [Link]('nextPlayerModalTitle');
const label = [Link]('nextPlayerModalLabel');
const select = [Link]('nextPlayerSelect');

if (type === 'batsman') {

const inn = [Link][[Link] - 1];
const battingTeam = [Link] === [Link] ?
[Link] : [Link];
const battingXI = [Link](p => [Link]);
const outPlayer = getPlayerById(battingTeam, [Link]);

function confirmNextPlayer() {
const selectedId = [Link]('nextPlayerSelect').value;
const inn = [Link][[Link] - 1];

if(!selectedId) {

[Link]('nextPlayerModal').[Link]('hidden');
return;
}

[Link]('nextPlayerModal').[Link]('hidden');
updateScoreboard();
}

function checkOverEnd() {
const inn = [Link][[Link] - 1];
if ([Link] === 6) {
[Link]++;
[Link] = 0;
[Link] = [];
[[Link], [Link]] = [[Link], [Link]];

const bowlerStats = [Link][[Link]];

if(bowlerStats) {
[Link]++;
[Link] = 0;
}

if ([Link] < [Link]) {

openNextPlayerModal('bowler');
} else {
endInnings();
}
}
}

function endInnings() {
if ([Link] === 1) {
[Link] = 2;
openPlayerSelectionModal();
} else {
calculateResult();
}
}

function calculateResult() {
const inn1 = [Link][0];
const inn2 = [Link][1];
let resultText = '';

let winner, loser;

// Only update points table for league matches

if ([Link] === 8 && winner) {
pointsTable[winner].p += 1;
pointsTable[winner].w += 1;
pointsTable[winner].pts += 2;
pointsTable[loser].p += 1;
pointsTable[loser].l += 1;

const winnerInnings = [Link] === winner ? inn1 : inn2;

const loserInnings = [Link] === loser ? inn1 : inn2;
pointsTable[winner].runsScored += [Link];
pointsTable[winner].oversFaced += [Link] +
([Link] / 6);
pointsTable[winner].runsConceded += [Link];
pointsTable[winner].oversBowled += [Link] +
([Link] / 6);

pointsTable[loser].runsScored += [Link];
pointsTable[loser].oversFaced += [Link] +
([Link] / 6);
pointsTable[loser].runsConceded += [Link];
pointsTable[loser].oversBowled += [Link] +
([Link] / 6);

updateNRR();
[Link]('pointsTable', [Link](pointsTable));
}

lastCompletedMatchState = [Link]([Link](state));
[Link](lastCompletedMatchState);
[Link]('allMatchData', [Link](allMatchData));
updatePointsTableUI();

[Link]('matchResultText').textContent = resultText;

[Link]('matchSummaryModal').[Link]('hidden');
}

function showFullScorecard() {
const match = lastCompletedMatchState;
const content = [Link]('fullScorecardContent');
[Link] = '';

[[Link][0], [Link][1]].forEach((inn) => {

if ([Link](inn).length === 0) return; // Skip empty innings
object if match ends early
const battingTeam = [Link] === [Link] ?
[Link] : [Link];
const bowlingTeam = [Link] === [Link] ?
[Link] : [Link];

let battingRows = '';

const playingXI = [Link](p => [Link]);

[Link](p => {
const sr = [Link] > 0 ? (([Link] / [Link]) *
100).toFixed(2) : '0.00';
battingRows += `
<tr class="border-b">
<td class="py-1 px-2">${[Link]}</td>
<td class="py-1 px-2 text-sm text-gray-600">${[Link] ?
[Link] : 'not out'}</td>
<td class="py-1 px-2 text-right
font-bold">${[Link]}</td>
<td class="py-1 px-2 text-right">${[Link]}</td>
<td class="py-1 px-2 text-right">${[Link]}</td>
<td class="py-1 px-2 text-right">${[Link]}</td>
<td class="py-1 px-2 text-right">${sr}</td>
</tr>
`;
});

let bowlingRows = '';

[Link]([Link]).forEach(bowlerId => {
const stats = [Link][bowlerId];
const p = getPlayerById(bowlingTeam, bowlerId);

if (p && stats) {
const oversDecimal = [Link] + ([Link] / 6);
const econ = oversDecimal > 0 ? ([Link] /
oversDecimal).toFixed(2) : '0.00';
bowlingRows += `
<tr class="border-b">
<td class="py-1 px-2">${[Link]}</td>
<td class="py-1 px-2 text-right">${[Link]}.$
{[Link]}</td>
<td class="py-1 px-2 text-right">${[Link]}</td>
<td class="py-1 px-2 text-right">$
{[Link]}</td>
<td class="py-1 px-2 text-right">${econ}</td>
</tr>
`;
}
});

[Link]('scorecardModal').[Link]('hidden');
}

function showRecordsScreen() {
const playerStats = {};

[Link](match => {
[[Link], [Link]].forEach(team => {
[Link](p => [Link]).forEach(player => {
if (!playerStats[[Link]]) {
playerStats[[Link]] = { name: [Link], team:
[Link], totalRuns: 0, totalBalls: 0, totalWickets: 0, totalRunsConceded: 0,
totalBallsBowled: 0 };
}
playerStats[[Link]].totalRuns += [Link];
playerStats[[Link]].totalBalls += [Link];
});
});

[[Link][0], [Link][1]].forEach(inn => {

if ([Link](inn).length === 0) return;
const bowlingTeam = [Link] === [Link] ?
[Link] : [Link];
[Link]([Link]).forEach(bowlerId => {
const stats = [Link][bowlerId];
if (playerStats[bowlerId]) {
playerStats[bowlerId].totalWickets += [Link];
playerStats[bowlerId].totalRunsConceded += [Link];
playerStats[bowlerId].totalBallsBowled += ([Link]
* 6) + [Link];
}
});
});
});

const statsArray = [Link](playerStats);

// Most Runs
const sortedRuns = [...statsArray].sort((a, b) => [Link] -
[Link]);
[Link]('mostRunsBody').innerHTML = [Link](0,
5).map(p => `<tr><td class="py-1 px-2">${[Link]} <span class="text-xs text-gray-
500">${[Link]}</span></td><td class="py-1 px-2 text-right font-bold">$
{[Link]}</td></tr>`).join('');

// Most Wickets
const sortedWickets = [...statsArray].sort((a, b) => [Link] -
[Link]);
[Link]('mostWicketsBody').innerHTML =
[Link](0, 5).map(p => `<tr><td class="py-1 px-2">${[Link]} <span
class="text-xs text-gray-500">${[Link]}</span></td><td class="py-1 px-2 text-right
font-bold">${[Link]}</td></tr>`).join('');

// Best Strike Rate

// Best Economy
const sortedEcon = [...statsArray].filter(p => [Link] >=
12).sort((a, b) => ([Link] / ([Link] / 6)) -
([Link] / ([Link] / 6)));
[Link]('bestEconomyBody').innerHTML =
[Link](0, 5).map(p => {
const econ = [Link] > 0 ? ([Link] /
([Link]/6)).toFixed(2) : '0.00';
return `<tr><td class="py-1 px-2">${[Link]} <span class="text-xs
text-gray-500">${[Link]}</span></td><td class="py-1 px-2 text-right font-bold">$
{econ}</td></tr>`;
}).join('');

navigate('recordsScreen');
}

function resetAndGoHome() {
state = {};
history = [];
lastCompletedMatchState = {};
[Link]('matchSummaryModal').[Link]('hidden');
navigate('mainScreen');
}

function updateScoreboard() {
if (![Link] || ![Link][[Link] - 1] ||
[Link]([Link][[Link]-1]).length === 0) return;

const inn = [Link][[Link] - 1];

const battingTeam = [Link] === [Link] ? [Link] :
[Link];

[Link]('scoringTeamName').textContent =
[Link];
[Link]('totalRuns').textContent = [Link];
[Link]('totalWickets').textContent = [Link];
const oversCompleted = `${[Link]}.${[Link]}`;
[Link]('overs').textContent = oversCompleted;
const totalBalls = [Link] * 6 + [Link];
[Link]('crr').textContent = totalBalls > 0 ?
([Link] / totalBalls * 6).toFixed(2) : '0.00';

if ([Link] === 2) {

[Link]('targetContainer').[Link]('hidden');
const targetScore = [Link][0].score + 1;
[Link]('target').textContent = targetScore;

const ballsRemaining = ([Link] * 6) - totalBalls;

const runsNeeded = targetScore - [Link];

[Link]('runsNeeded').textContent = runsNeeded >

0 ? runsNeeded : 0;
[Link]('ballsRemaining').textContent =
ballsRemaining;

[Link]('rrr').textContent = (ballsRemaining > 0 &&

runsNeeded > 0) ? (runsNeeded / ballsRemaining * 6).toFixed(2) : '0.00';
} else {

[Link]('targetContainer').[Link]('hidden');
}

// This Over
[Link]('thisOver').innerHTML =
[Link](ball => {
let ballContent = ball;
let ballClass = '';
if (typeof ball === 'number') {
ballClass = `ball-${ball}`;
} else if (typeof ball === 'string') {
if ([Link]().startsWith('wd')) {
ballClass = 'ball-wd';
} else if ([Link]() === 'nb') {
ballClass = 'ball-nb';
} else if ([Link]() === 'w') {
ballClass = 'ball-w';
}
}
return `<div class="ball ${ballClass}">${ballContent}</div>`;
}).join('');

updateLiveScorecardPreview();
}

function updateLiveScorecardPreview() {
const previewContainer =
[Link]('liveScorecardPreview');
if (![Link] || ![Link][[Link] - 1] ||
[Link]([Link][[Link] - 1]).length === 0) {
[Link] = '';
return;
}

const inn = [Link][[Link] - 1];

const battingTeam = [Link] === [Link] ? [Link] :
[Link];
const bowlingTeam = [Link] === [Link] ? [Link] :
[Link];
const playingXI = [Link](p => [Link]);

let battingRows = '';

[Link]((p) => {
const isStriker = [Link] === [Link];
const isNonStriker = [Link] === [Link];
const indicator = isStriker ? '*' : '';
const rowClass = isStriker ? 'bg-blue-100 font-bold' :
(isNonStriker ? 'bg-blue-50' : '');

let dismissalInfo = [Link] ? `<td class="py-1 px-2 text-xs text-

gray-500">${[Link]}</td>` : `<td class="py-1 px-2 text-xs text-gray-500">not
out</td>`;

battingRows += `
<tr class="${rowClass}">
<td class="py-1 px-2">${[Link]} ${indicator}</td>
${dismissalInfo}
<td class="py-1 px-2 text-right">${[Link]}</td>
<td class="py-1 px-2 text-right">${[Link]}</td>
</tr>
`;
});

let bowlingRows = '';

[Link]([Link]).forEach(bowlerId => {
const p = getPlayerById(bowlingTeam, bowlerId);
const stats = [Link][bowlerId];
if (stats && p) {
const oversDecimal = [Link] + [Link]/6;
const econ = oversDecimal > 0 ? ([Link] /
oversDecimal).toFixed(2) : '0.00';
const isCurrentBowler = [Link] === [Link];
const rowClass = isCurrentBowler ? 'bg-green-100 font-bold' :
'';
bowlingRows += `
<tr class="${rowClass}">
<td class="py-1 px-2">${[Link]}</td>
<td class="py-1 px-2 text-right">${[Link]}.$
{[Link]}</td>
<td class="py-1 px-2 text-right">${[Link]}</td>
<td class="py-1 px-2 text-right">${[Link]}</td>
</tr>
`;
}
});

const previewHTML = `
<div>
<h4 class="font-bold text-lg mb-1">${[Link]}
Batting</h4>
<div class="overflow-x-auto">
<table class="min-w-full text-sm">
<thead class="bg-gray-100"><tr>
<th class="py-1 px-2 text-left">Batsman</th>
<th class="py-1 px-2 text-left"></th>
<th class="py-1 px-2 text-right">R</th>
<th class="py-1 px-2 text-right">B</th>
</tr></thead>
<tbody>${battingRows}</tbody>
</table>
</div>
</div>
<div>
<h4 class="font-semibold mt-4 mb-1">${[Link]}
Bowling</h4>
<div class="overflow-x-auto">
<table class="min-w-full text-sm">
<thead class="bg-gray-100"><tr>
<th class="py-1 px-2 text-left">Bowler</th>
<th class="py-1 px-2 text-right">O</th><th
class="py-1 px-2 text-right">R</th>
<th class="py-1 px-2 text-right">W</th>
</tr></thead>
<tbody>${bowlingRows}</tbody>
</table>
</div>
</div>
`;
[Link] = previewHTML;
}

function updatePointsTableUI() {
const tableBody = [Link]('pointsTableBody');
[Link] = '';
const sortedTeams = [Link](pointsTable).sort(([,a], [,b]) => {
if([Link] !== [Link]) return [Link] - [Link];
return [Link] - [Link];
});

[Link](([key, data]) => {

// Initialize the app

[Link]('DOMContentLoaded', initializeApp);

</script>
</body>
</html>

Mumbai Indians IPL Team Stats Dashboard
No ratings yet
Mumbai Indians IPL Team Stats Dashboard
5 pages
Cricket Run Counter Tool
No ratings yet
Cricket Run Counter Tool
20 pages
Cricket Stats Tracker Tool
No ratings yet
Cricket Stats Tracker Tool
7 pages
Cricket Stats Tracker Tool
No ratings yet
Cricket Stats Tracker Tool
14 pages
Cricket Scorecard Preview Component
No ratings yet
Cricket Scorecard Preview Component
2 pages
ISL Player Performance Dashboard
No ratings yet
ISL Player Performance Dashboard
14 pages
Prime Bet Ke
No ratings yet
Prime Bet Ke
26 pages
Code
No ratings yet
Code
107 pages
CricketX Scorecard Generator Tool
No ratings yet
CricketX Scorecard Generator Tool
7 pages
CIS Haxball Championship Overview
No ratings yet
CIS Haxball Championship Overview
52 pages
Code Web
No ratings yet
Code Web
16 pages
Ludo Game HTML Structure and Styles
No ratings yet
Ludo Game HTML Structure and Styles
6 pages
Rohit Sharma: Cricket Tribute Project
No ratings yet
Rohit Sharma: Cricket Tribute Project
14 pages
Multiplication Boss Activity Guide
No ratings yet
Multiplication Boss Activity Guide
21 pages
Logo Jersey Tim Tak Terkalahkan
No ratings yet
Logo Jersey Tim Tak Terkalahkan
4 pages
Snake Game 100 Levels
No ratings yet
Snake Game 100 Levels
62 pages
Complex Stifling Quintic Explorer - HTML
No ratings yet
Complex Stifling Quintic Explorer - HTML
11 pages
Athlete Dashboard
No ratings yet
Athlete Dashboard
14 pages
CSS Styles for Sports Website Design
No ratings yet
CSS Styles for Sports Website Design
2 pages
Khadim Hussain
No ratings yet
Khadim Hussain
15 pages
Indian Cricket Team Overview
No ratings yet
Indian Cricket Team Overview
7 pages
Goldbach Trifecta Tactical Manual
0% (2)
Goldbach Trifecta Tactical Manual
7 pages
Practical 15
No ratings yet
Practical 15
8 pages
Polymorphic Stifling Explorer - HTML
No ratings yet
Polymorphic Stifling Explorer - HTML
11 pages
IPL 2025: Top Batsman Insights
No ratings yet
IPL 2025: Top Batsman Insights
10 pages
T20 Cricket Over Counter App
No ratings yet
T20 Cricket Over Counter App
6 pages
Electrotherapy Project Cover Page
No ratings yet
Electrotherapy Project Cover Page
5 pages
CSS Styles for Web Layouts
No ratings yet
CSS Styles for Web Layouts
28 pages
Pooja
No ratings yet
Pooja
31 pages
DOCTYPE HTML
No ratings yet
DOCTYPE HTML
20 pages
Cricket Prediction Game Guide
No ratings yet
Cricket Prediction Game Guide
5 pages
Carrossel de Membros da Equipe
No ratings yet
Carrossel de Membros da Equipe
10 pages
Team Assignment Tracker Tool
No ratings yet
Team Assignment Tracker Tool
9 pages
2048 Game Mechanics and Styles
No ratings yet
2048 Game Mechanics and Styles
30 pages
!doctype HTML
No ratings yet
!doctype HTML
4 pages
HTML Layout with CSS Styling
No ratings yet
HTML Layout with CSS Styling
4 pages
Game Timer Interface for Players
No ratings yet
Game Timer Interface for Players
4 pages
Upholstery HTML
No ratings yet
Upholstery HTML
33 pages
Match Event Display and Styling
No ratings yet
Match Event Display and Styling
3 pages
Comprehensive HTML Learning Guide
No ratings yet
Comprehensive HTML Learning Guide
23 pages
HTML Layout with CSS Styling
No ratings yet
HTML Layout with CSS Styling
8 pages
It Project 4111
No ratings yet
It Project 4111
41 pages
Indian Football Team Overview 2023
No ratings yet
Indian Football Team Overview 2023
7 pages
جدول المباريات الرياضية العربية
No ratings yet
جدول المباريات الرياضية العربية
6 pages
HTML
No ratings yet
HTML
71 pages
Bitsler Bet Script Overview
40% (5)
Bitsler Bet Script Overview
58 pages
MLBB Group A Week 1 Match Stats
No ratings yet
MLBB Group A Week 1 Match Stats
2 pages
HTML5 Checkers Game Code
No ratings yet
HTML5 Checkers Game Code
6 pages
Login Attempt Records Overview
No ratings yet
Login Attempt Records Overview
6 pages
Event Dropdown and Filter Styles
No ratings yet
Event Dropdown and Filter Styles
5 pages
Recent Game Highlights and Updates
No ratings yet
Recent Game Highlights and Updates
4 pages
Cell Membrane Stroke It 2.0 PDF
No ratings yet
Cell Membrane Stroke It 2.0 PDF
18 pages
CSS Grid Layout: Key Concepts Explained
No ratings yet
CSS Grid Layout: Key Concepts Explained
6 pages
Ijkl
No ratings yet
Ijkl
57 pages
Experiment 04
No ratings yet
Experiment 04
10 pages
Paris Sportifs en Ligne - HK Bet
No ratings yet
Paris Sportifs en Ligne - HK Bet
31 pages
Tanay Mitra's Personal Webpage
No ratings yet
Tanay Mitra's Personal Webpage
3 pages
TNB Tariff Converter Fixed
No ratings yet
TNB Tariff Converter Fixed
28 pages
Flappy Bird Game HTML Code Guide
No ratings yet
Flappy Bird Game HTML Code Guide
11 pages
Python Looping Techniques Explained
No ratings yet
Python Looping Techniques Explained
27 pages
U5 Form Application Guidelines and Deadlines
No ratings yet
U5 Form Application Guidelines and Deadlines
10 pages
Teacher Absences and Substitutions Report
No ratings yet
Teacher Absences and Substitutions Report
6 pages
Teacher Absences and Substitutions Report
No ratings yet
Teacher Absences and Substitutions Report
5 pages
IIT Bombay Cricket Championship Rules
No ratings yet
IIT Bombay Cricket Championship Rules
4 pages
اجابة امتحان العمالقة 2023
No ratings yet
اجابة امتحان العمالقة 2023
3 pages
Loyola College Business Fest Agenda
No ratings yet
Loyola College Business Fest Agenda
14 pages
ODI Performance Analysis of Cricketers
No ratings yet
ODI Performance Analysis of Cricketers
17 pages
Cricket School-Based Assessment Report
No ratings yet
Cricket School-Based Assessment Report
19 pages
Class 9-10 General Knowledge Quiz 2023
No ratings yet
Class 9-10 General Knowledge Quiz 2023
85 pages
Fillers: Grammar and Vocabulary Exercises
No ratings yet
Fillers: Grammar and Vocabulary Exercises
42 pages
Short Report Recovery of Jump Performance After A Simulated Cricket Batting Innings PDF
No ratings yet
Short Report Recovery of Jump Performance After A Simulated Cricket Batting Innings PDF
5 pages
Monthly Cricket Development Report 2025
No ratings yet
Monthly Cricket Development Report 2025
6 pages
G.I.C. Assistant Manager Exam 2008 Solutions
No ratings yet
G.I.C. Assistant Manager Exam 2008 Solutions
5 pages
GK THB (Class 1 To 8) With Cover
No ratings yet
GK THB (Class 1 To 8) With Cover
44 pages
Chiru Cheetah Defeats Balayya Warriors
No ratings yet
Chiru Cheetah Defeats Balayya Warriors
2 pages
MVP Leaderboard 1783644
No ratings yet
MVP Leaderboard 1783644
3 pages
TITANS vs TUSKERS: T10 Match Report
No ratings yet
TITANS vs TUSKERS: T10 Match Report
4 pages
BCCI Domestic Tournaments 2025-26 Schedule
No ratings yet
BCCI Domestic Tournaments 2025-26 Schedule
3 pages
Legal Notice for Cricket Bat Replacement
No ratings yet
Legal Notice for Cricket Bat Replacement
3 pages
Recent English GK 2025 - Part 2
No ratings yet
Recent English GK 2025 - Part 2
6 pages
Zinda Rood by Javed Iqbal
67% (3)
Zinda Rood by Javed Iqbal
1,299 pages
Indoor Sports Rules and Regulations
No ratings yet
Indoor Sports Rules and Regulations
7 pages
IPL 2022 Player Auction Overview
No ratings yet
IPL 2022 Player Auction Overview
9 pages
ICC Cricket World Cup 2011 Warm-ups
No ratings yet
ICC Cricket World Cup 2011 Warm-ups
5 pages
Dinesh Karthik: Cricket Career Overview
No ratings yet
Dinesh Karthik: Cricket Career Overview
6 pages
G7 Summit 2025 Highlights and Rankings
No ratings yet
G7 Summit 2025 Highlights and Rankings
43 pages
18th Century Cricket: A National Game Emerges
No ratings yet
18th Century Cricket: A National Game Emerges
3 pages
GK Test for Std III Students
No ratings yet
GK Test for Std III Students
2 pages
Overview of Major Sports Trophies
No ratings yet
Overview of Major Sports Trophies
1 page
RKPL Player List and Pricing Details
No ratings yet
RKPL Player List and Pricing Details
7 pages
Milk Production Report 2023/24-2024/25
No ratings yet
Milk Production Report 2023/24-2024/25
2 pages

Cricket Tournament Scorer Tool

Uploaded by

Cricket Tournament Scorer Tool

Uploaded by

<!

<div id="app" class="max-w-7xl mx-auto p-4">

<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">

<div class="bg-white p-6 rounded-lg shadow-md">

<div class="flex justify-end">

<div id="tossWinnerModal" class="modal-backdrop hidden">

<div id="tossModal" class="modal-backdrop hidden">

<div id="wideRunsModal" class="modal-backdrop hidden">

<div id="playingXIModal" class="modal-backdrop hidden">

<div id="playerSelectionModal" class="modal-backdrop hidden">

<div id="nextPlayerModal" class="modal-backdrop hidden">

<div id="wicketModal" class="modal-backdrop hidden">

<div id="matchSummaryModal" class="modal-backdrop hidden">

let squads = {};

let pointsTable = [Link]([Link]('pointsTable')) ||

const saveBtn = [Link]('saveSquadsBtn');

function setupMatch(teamAKey, teamBKey) {

if (teamAKey && teamBKey) {

if (teamA === teamB) {

const tossWinnerModal = [Link]('tossWinnerModal');

const modal = [Link]('tossModal');

teamA_Container.innerHTML = `<h3 class="text-xl font-bold mb-4 text-

const teamAPlayersDiv = [Link]('teamAPlayers');

const teamBPlayersDiv = [Link]('teamBPlayers');

const proceedBtn = [Link]('proceedToMatchBtn');

const battingXI = [Link](p => [Link]);

populatePlayerDropdown('strikerSelect', battingXI, false);

function populatePlayerDropdown(selectId, players, isBowler, availableOnly

if (strikerId === nonStrikerId) {

const battingTeamKey = [Link] === 1 ?

function getPlayerById(team, id) {

const striker = getPlayerById(battingTeam, [Link]);

const striker = getPlayerById(battingTeam, [Link]);

const outBatsman = getPlayerById(battingTeam, outBatsmanId);

if ([Link] < 10) {

function openNextPlayerModal(type, context = {}) {

if (type === 'batsman') {

[Link] = 'Select New Batsman';

if ([Link] === 'batsman') {

const bowlerStats = [Link][[Link]];

if ([Link] < [Link]) {

let winner, loser;

if([Link] > [Link]) {

// Only update points table for league matches

const winnerInnings = [Link] === winner ? inn1 : inn2;

[[Link][0], [Link][1]].forEach((inn) => {

let battingRows = '';

let bowlingRows = '';

[[Link][0], [Link][1]].forEach(inn => {

const statsArray = [Link](playerStats);

// Best Strike Rate

const inn = [Link][[Link] - 1];

const ballsRemaining = ([Link] * 6) - totalBalls;

[Link]('runsNeeded').textContent = runsNeeded >

[Link]('rrr').textContent = (ballsRemaining > 0 &&

const inn = [Link][[Link] - 1];

let battingRows = '';

let dismissalInfo = [Link] ? `<td class="py-1 px-2 text-xs text-

let bowlingRows = '';

[Link](([key, data]) => {

// Initialize the app

You might also like