<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Player Assignment</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
display: flex;
justify-content: space-between;
background-image: url('');
background-size: cover;
background-repeat: no-repeat;
}
.player-card,
.team-names {
border: 1px solid #ccc;
padding: 10px;
width: 45%;
background-color: rgba(255, 255, 255, 0.2); /* Use rgba for a semi-transparent background */
}
img {
max-width: 100%;
height: auto;
}
table {
margin-top: 10px;
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
select {
margin-top: 10px;
}
.budget {
text-align: left;
font-weight: bold;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="player-card">
<img id="playerImage" src="https://static.cricbuzz.com/a/img/v1/152x152/i1/c254899/smriti-mandhana.jpg" alt="Player Photo" width="200">
<h2 id="playerName">Player Name</h2>
<table id="playerStatsTable">
<tr>
<th>Stat</th>
<th>Value</th>
</tr>
</table>
<p id="basePrice">Base Price: $100</p> <!-- Display the base price for the player -->
<label for="teamSelect">Assign to Team:</label>
<select id="teamSelect" onchange="assignTeam()">
<option value="">Select Team</option>
<option value="team1">Team 1</option>
<option value="team2">Team 2</option>
<option value="team3">Team 3</option>
<option value="team4">Team 4</option>
<option value="team5">Team 5</option>
<option value="team6">Team 6</option>
<option value="team7">Team 7</option>
<option value="team8">Team 8</option>
</select>
<p id="assignmentStatus">Player not assigned to any team.</p>
</div>
<div class="team-names">
<h2>Team Names</h2>
<p id="team1Name"><span class="budget"></span></p>
<p id="team2Name"><span class="budget"></span></p>
<p id="team3Name"><span class="budget"></span></p>
<p id="team4Name"><span class="budget"></span></p>
<p id="team5Name"><span class="budget"></span></p>
<p id="team6Name"><span class="budget"></span></p>
<p id="team7Name"><span class="budget"></span></p>
<p id="team8Name"><span class="budget"></span></p>
</div>
<script>
var playerIndex = 0;
var players = [
{ name: "Smriti Mandhana", image: "https://static.cricbuzz.com/a/img/v1/152x152/i1/c254899/smriti-mandhana.jpg", stats: { Match: 82, Innings: 82, Runs: 3242, High_Score: 135, Average: 42.65, SR: 83.47, '100s': 5, '50s': 26, '4s': 387, '6s': 36, Catches: 26, Stumps: 0 }, team: "", basePrice: 100,lastTradedPrice:0 },
{ name: "Shafali Verma", image: "https://static.cricbuzz.com/a/img/v1/152x152/i1/c254978/shafali-verma.jpg", stats: { Match: 2, Innings: 2, Runs: 42, High_Score: 35, Average: 4.65, SR: 83.47, '100s': 5, '50s': 26, '4s': 387, '6s': 36, Catches: 26, Stumps: 0 }, team: "", basePrice: 200,lastTradedPrice:0 },
{ name: "Jemimah Rodrigues", image: "https://static.cricbuzz.com/a/img/v1/152x152/i1/c254964/jemimah-rodrigues.jpg", stats: { Match: 82, Innings: 82, Runs: 3242, High_Score: 135, Average: 42.65, SR: 83.47, '100s': 5, '50s': 26, '4s': 387, '6s': 36, Catches: 26, Stumps: 0 }, team: "", basePrice: 50,lastTradedPrice:0 }
];
var teamBudget = [1000,2000,3000,1000,2000,3000,1000,2000];
populateBudgetSection();
document.addEventListener("keydown", function(event) {
if (event.key === "ArrowRight") {
changePlayer(1);
} else if (event.key === "ArrowLeft") {
changePlayer(-1);
}
});
function changePlayer(direction) {
playerIndex = Math.min(Math.max(playerIndex + direction, 0), players.length - 1);
updatePlayerInfo();
}
function updatePlayerInfo() {
var playerImage = document.getElementById("playerImage");
var playerName = document.getElementById("playerName");
var playerStatsTable = document.getElementById("playerStatsTable");
var basePriceElement = document.getElementById("basePrice"); // Added base price element
var teamSelect = document.getElementById("teamSelect");
playerImage.src = players[playerIndex].image;
playerName.textContent = players[playerIndex].name;
// Clear existing rows in the table
playerStatsTable.innerHTML = "<tr><th>Stat</th><th>Value</th></tr>";
// Populate the table with player stats
for (var stat in players[playerIndex].stats) {
if (stat === '4s' || stat === '6s') {
var row = playerStatsTable.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.textContent = '4s/6s'; // Display "4s/6s" for the combined row
cell2.textContent = players[playerIndex].stats['4s'] + '/' + players[playerIndex].stats['6s'];
break; // Skip the next row
} else {
var row = playerStatsTable.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.textContent = stat.replace('_', ' ');
cell2.textContent = players[playerIndex].stats[stat];
}
}
// Display the base price for the player
basePriceElement.innerHTML = "<strong>Base Price:</strong> $" + players[playerIndex].basePrice;
if (players[playerIndex].team !== "") {
teamSelect.value = players[playerIndex].team;
assignmentStatus.textContent = players[playerIndex].name + " assigned to " + teamSelect.value + " team.";
} else {
teamSelect.value = "";
assignmentStatus.textContent = "Player not assigned to any team.";
}
}
function assignTeam() {
var teamSelect = document.getElementById("teamSelect");
var assignmentStatus = document.getElementById("assignmentStatus");
var previousTeam = players[playerIndex].team;
var selectedTeam = teamSelect.value;
updatePlayerStatus(selectedTeam);
updateTeamName(previousTeam,selectedTeam,teamIndex[previousTeam]!= undefined? teamIndex[previousTeam]:null,teamIndex[teamSelect.value]);
populateBudgetSection();
teamSelect.blur();
}
const teamIndex = Object.freeze({
"team1": 0,
"team2": 1,
"team3": 2,
"team4": 3,
"team5": 4,
"team6": 5,
"team7": 6,
"team8": 7,
});
function populateBudgetSection() {
for (var i = 0; i < teamBudget.length; i++) {
var assignedPlayers = players.filter(player => player.team === "team".concat(i + 1));
var playerNames = assignedPlayers.map(player => player.name);
document.getElementById("team".concat(i + 1, "Name")).textContent = "Budget: $" + teamBudget[i] + " Team " + (i + 1) + ": -" + playerNames.join(",");
}
}
function updatePlayerStatus(selectedTeam){
players[playerIndex].team = selectedTeam;
if (selectedTeam !== "") {
assignmentStatus.textContent = players[playerIndex].name + " assigned to " + selectedTeam + " team.";
} else {
resetAssignment();
}
}
function updateTeamName(previousTeam,selectedTeam, previousTeamIndex, currentTeamIndex) {
var assignedPlayers = players.filter(player => player.team === selectedTeam);
var playerNames = assignedPlayers.map(player => player.name);
if(selectedTeam!="")
{
var subtractValue = parseFloat(prompt("Enter the value to subtract from the team budget for " + players[playerIndex].name, players[playerIndex].basePrice));
if (!isNaN(subtractValue) && subtractValue >= 0) {
if(teamBudget[currentTeamIndex] - subtractValue<0)
{
var oldTeam = Object.keys(teamIndex)[previousTeamIndex];
teamSelect.value = oldTeam;
updatePlayerStatus(oldTeam)
alert("Team out of budget");
}
else{
if (previousTeamIndex != null) teamBudget[previousTeamIndex] += players[playerIndex].lastTradedPrice;
teamBudget[currentTeamIndex] -= subtractValue;
players[playerIndex].lastTradedPrice = subtractValue;
populateBudgetSection();
}
} else {
// Handle invalid input or cancel
alert("Invalid input. Please enter a valid number.");
// You may want to handle this differently based on your use case
}
} else
{
teamBudget[previousTeamIndex] += players[playerIndex].lastTradedPrice
players[playerIndex].lastTradedPrice = 0;
}
}
function resetAssignment() {
var assignmentStatus = document.getElementById("assignmentStatus");
assignmentStatus.textContent = "Player not assigned to any team.";
}
updatePlayerInfo();
</script>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter