Online JavaScript Compiler (Editor)
Tue Jan 09 2024 12:40:00 GMT+0000 (Coordinated Universal Time)
Saved by @shreshthkaushik
<!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>
</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>
</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 },
{ 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 },
{ 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 }
];
var teamBudget = [1000,2000,3000];
for(var i = 0; i<teamBudget.length;i++){
document.getElementById("team".concat(i+1,"Name")).textContent = "Budget: $".concat(teamBudget[i]," Team ",i+1,": -");
}
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 team1Name = document.getElementById("team1Name");
var team2Name = document.getElementById("team2Name");
var team3Name = document.getElementById("team3Name");
// Remove the player from the previous team if the team changed
var previousTeam = players[playerIndex].team;
var selectedTeam = teamSelect.value;
if (selectedTeam !== "") {
players[playerIndex].team = selectedTeam;
assignmentStatus.textContent = players[playerIndex].name + " assigned to " + selectedTeam + " team.";
} else {
resetAssignment();
}
if (previousTeam && previousTeam !== teamSelect.value) {
updateTeamName("team1", team1Name);
updateTeamName("team2", team2Name);
updateTeamName("team3", team3Name);
} else {
// Update the team name
switch (selectedTeam) {
case "team1":
updateTeamName("team1", team1Name);
break;
case "team2":
updateTeamName("team2", team2Name);
break;
case "team3":
updateTeamName("team3", team3Name);
break;
}
}
teamSelect.blur();
}
function updateTeamName(team, teamElement) {
var assignedPlayers = players.filter(player => player.team === team);
var playerNames = assignedPlayers.map(player => player.name);
console.log(parseInt(teamElement.textContent.split("$")[1])-players[playerIndex].basePrice);
if (teamElement) {
teamElement.textContent = teamElement.textContent.concat("Team ",team.charAt(4), ": ",playerNames.join(", "));
} else {
// Remove the player from the team by updating the text content to an empty string
teamElement.textContent = "Team " + team.charAt(4) + ": ";
}
}
function resetAssignment() {
var assignmentStatus = document.getElementById("assignmentStatus");
assignmentStatus.textContent = "Player not assigned to any team.";
}
updatePlayerInfo();
</script>
Comments