ntnsndr/MonopolyLedger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added css, font, levies, improvements

Browse Source
This commit is contained in:
Nathan Schneider
2023-07-06 11:21:24 -06:00
parent 0817c6faf8
commit fc23460c5e
5 changed files with 567 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

719
MonopolyLedger.html
View File

@@ -1,277 +1,482 @@
<!DOCTYPE html>
<html>
<head>
<title>Monopoly Ledger</title>
</head>
<body>
<h1>Monopoly Ledger</h1>
<head>
<title>Monopoly Ledger</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Monopoly Ledger</h1>
<div id="setup">
<h2>Setup</h2>
<label for="numPlayers">Number of Players:</label>
<input type="number" id="numPlayers">
<br>
<label for="startingValue">Starting Value:</label>
<input type="number" id="startingValue">
<br>
<button onclick="initialize()">Set</button>
</div>
<div id="setup">
<h2>Setup</h2>
<div class="wrap">
<label for="numPlayers">Number of Players:</label>
<input type="number" id="numPlayers">
<br>
<label for="startingValue">Starting Value:</label>
<input type="number" id="startingValue">
<br>
<button onclick="initialize()">Set</button>
</div>
</div>
<div id="balances">
<h2>Balances</h2>
<div id="output"></div>
</div>
<div id="transactions">
<div id="balances">
<h2>Balances</h2>
<div id="output"></div>
</div>
<h2>Transactions</h2>
<form id="transactions" onsubmit="event.preventDefault();">
<label for="fromAcc">From:</label>
<select id="fromAcc">
<option value="pot">Pot</option>
<option value="bank">Bank</option>
<!-- Generate player options dynamically -->
</select>
<br>
<label for="toAcc">To:</label>
<select id="toAcc">
<option value="pot">Pot</option>
<option value="bank">Bank</option>
<!-- Generate player options dynamically -->
<option value="all">All</option>
</select>
<br>
<label for="amount">Amount:</label>
<input type="number" id="amount">
<br>
<button onclick="sendMoney()">Send</button>
</form>
<div id="transactions">
</div>
<!-- Add property list -->
<div id="propertyList">
<h2>Properties</h2>
<ul id="propertyItems"></ul>
</div>
<script>
var numPlayers = 0;
var accounts = [];
// Property list data
var properties = [
// Brown Properties
{ name: "Mediterranean Avenue", owner: "none", improvements: false, price: 60 },
{ name: "Baltic Avenue", owner: "none", improvements: false, price: 60 },
// Light Blue Properties
{ name: "Oriental Avenue", owner: "none", improvements: false, price: 100 },
{ name: "Vermont Avenue", owner: "none", improvements: false, price: 100 },
{ name: "Connecticut Avenue", owner: "none", improvements: false, price: 120 },
// Pink Properties
{ name: "St. Charles Place", owner: "none", improvements: false, price: 140 },
{ name: "States Avenue", owner: "none", improvements: false, price: 140 },
{ name: "Virginia Avenue", owner: "none", improvements: false, price: 160 },
// Orange Properties
{ name: "St. James Place", owner: "none", improvements: false, price: 180 },
{ name: "Tennessee Avenue", owner: "none", improvements: false, price: 180 },
{ name: "New York Avenue", owner: "none", improvements: false, price: 200 },
// Red Properties
{ name: "Kentucky Avenue", owner: "none", improvements: false, price: 220 },
{ name: "Indiana Avenue", owner: "none", improvements: false, price: 220 },
{ name: "Illinois Avenue", owner: "none", improvements: false, price: 240 },
// Yellow Properties
{ name: "Atlantic Avenue", owner: "none", improvements: false, price: 260 },
{ name: "Ventnor Avenue", owner: "none", improvements: false, price: 260 },
{ name: "Marvin Gardens", owner: "none", improvements: false, price: 280 },
// Green Properties
{ name: "Pacific Avenue", owner: "none", improvements: false, price: 300 },
{ name: "North Carolina Avenue", owner: "none", improvements: false, price: 300 },
{ name: "Pennsylvania Avenue", owner: "none", improvements: false, price: 320 },
// Dark Blue Properties
{ name: "Park Place", owner: "none", improvements: false, price: 350 },
{ name: "Boardwalk", owner: "none", improvements: false, price: 400 },
// Railroads
{ name: "Reading Railroad", owner: "none", improvements: false, price: 200 },
{ name: "Pennsylvania Railroad", owner: "none", improvements: false, price: 200 },
{ name: "B. & O. Railroad", owner: "none", improvements: false, price: 200 },
{ name: "Short Line Railroad", owner: "none", improvements: false, price: 200 },
// Utilities
{ name: "Electric Company", owner: "none", improvements: false, price: 150 },
{ name: "Water Works", owner: "none", improvements: false, price: 150 }
// Add more properties as needed
];
function printBalances() {
var output = document.getElementById("output");
output.innerHTML = "";
accounts.forEach(function(account) {
output.innerHTML += account[0] + ": " + account[1] + "<br>";
});
}
function initialize() {
var numPlayersInput = document.getElementById("numPlayers");
var startingValueInput = document.getElementById("startingValue");
numPlayers = parseInt(numPlayersInput.value);
var startingValue = parseInt(startingValueInput.value);
if (numPlayers < 2 || isNaN(numPlayers) || isNaN(startingValue)) {
alert("Invalid input. Please enter a valid number of players and starting value.");
return;
}
accounts = [];
var initialProperties = [...properties]; // Copy the initial properties
accounts.push(["Pot", 0]);
for (var i = 1; i <= numPlayers; i++) {
accounts.push(["Player " + i, startingValue]);
}
properties = [...initialProperties]; // Restore the initial properties
resetPropertyOwners();
generatePropertyList();
printBalances();
generatePlayerOptions();
numPlayersInput.value = "";
startingValueInput.value = "";
}
function resetPropertyOwners() {
// Reset property owners to "none"
for (var i = 0; i < properties.length; i++) {
properties[i].owner = "none";
}
}
function generatePlayerOptions() {
var fromAccSelect = document.getElementById("fromAcc");
var toAccSelect = document.getElementById("toAcc");
// Clear existing options
fromAccSelect.innerHTML = "";
toAccSelect.innerHTML = "";
// Add options for Pot and Bank
var potOption = document.createElement("option");
potOption.value = "pot";
potOption.text = "Pot";
fromAccSelect.add(potOption.cloneNode(true));
toAccSelect.add(potOption.cloneNode(true));
var bankOption = document.createElement("option");
bankOption.value = "bank";
bankOption.text = "Bank";
fromAccSelect.add(bankOption.cloneNode(true));
toAccSelect.add(bankOption.cloneNode(true));
// Add player options
for (var i = 1; i <= numPlayers; i++) {
var playerOption = document.createElement("option");
playerOption.value = i.toString();
playerOption.text = "Player " + i;
fromAccSelect.add(playerOption.cloneNode(true));
toAccSelect.add(playerOption.cloneNode(true));
}
// Add option for "All" to the "To" dropdown
var allOption = document.createElement("option");
allOption.value = "all";
allOption.text = "All";
toAccSelect.add(allOption.cloneNode(true));
}
function generatePropertyList() {
var propertyItems = document.getElementById("propertyItems");
propertyItems.innerHTML = ""; // Clear existing property list
<h2>Transactions</h2>
properties.forEach(function(property) {
var listItem = document.createElement("li");
listItem.innerHTML = `
${property.name}
<select class="ownershipDropdown" onchange="updateOwnership(this.value, '${property.name}')">
<option value="none">None</option>
${generatePlayerOptionsHTML()}
</select>
`;
propertyItems.appendChild(listItem);
});
<form id="transactionsForm" onsubmit="event.preventDefault();">
<label for="fromAcc">From:</label>
<select id="fromAcc">
<option value="pot">Pot</option>
<option value="bank">Bank</option>
<!-- Generate player options dynamically -->
</select>
<br>
<label for="toAcc">To:</label>
<select id="toAcc">
<option value="pot">Pot</option>
<option value="bank">Bank</option>
<!-- Generate player options dynamically -->
<option value="all">All</option>
</select>
<br>
<label for="amount">Amount:</label>
<input type="number" id="amount">
<br>
<button onclick="sendMoney()">Send</button>
</form>
</div>
<div id="levies">
<h2>Levies</h2>
<div class="wrap">
<label for="levyAmount"></label>
<input type="number" id="levyAmount">
<label for="levyType"></label>
<select id="levyType">
<option value="money">Percentage of Money</option>
<option value="property">Percentage of Property Values</option>
<option value="wealth">Percentage of Wealth</option>
</select>
<br />
<label for="levyDestination"></label>
<select id="levyDestination">
<option value="bank">To the Bank</option>
<option value="pot">To the Pot</option>
</select>
<br />
<button onclick="applyLevy()">Submit</button>
</div>
</div>
<div id="propertyList">
<h2>Properties</h2>
<ul id="propertyItems"></ul>
</div>
<script>
var numPlayers = 0;
var accounts = [];
// Property list data
var properties = [
// Brown Properties
{ name: "Mediterranean Avenue", owner: "none", improvements: 0, price: 60 },
{ name: "Baltic Avenue", owner: "none", improvements: 0, price: 60 },
// Light Blue Properties
{ name: "Oriental Avenue", owner: "none", improvements: 0, price: 100 },
{ name: "Vermont Avenue", owner: "none", improvements: 0, price: 100 },
{ name: "Connecticut Avenue", owner: "none", improvements: 0, price: 120 },
// Pink Properties
{ name: "St. Charles Place", owner: "none", improvements: 0, price: 140 },
{ name: "States Avenue", owner: "none", improvements: 0, price: 140 },
{ name: "Virginia Avenue", owner: "none", improvements: 0, price: 160 },
// Orange Properties
{ name: "St. James Place", owner: "none", improvements: 0, price: 180 },
{ name: "Tennessee Avenue", owner: "none", improvements: 0, price: 180 },
{ name: "New York Avenue", owner: "none", improvements: 0, price: 200 },
// Red Properties
{ name: "Kentucky Avenue", owner: "none", improvements: 0, price: 220 },
{ name: "Indiana Avenue", owner: "none", improvements: 0, price: 220 },
{ name: "Illinois Avenue", owner: "none", improvements: 0, price: 240 },
// Yellow Properties
{ name: "Atlantic Avenue", owner: "none", improvements: 0, price: 260 },
{ name: "Ventnor Avenue", owner: "none", improvements: 0, price: 260 },
{ name: "Marvin Gardens", owner: "none", improvements: 0, price: 280 },
// Green Properties
{ name: "Pacific Avenue", owner: "none", improvements: 0, price: 300 },
{ name: "North Carolina Avenue", owner: "none", improvements: 0, price: 300 },
{ name: "Pennsylvania Avenue", owner: "none", improvements: 0, price: 320 },
// Dark Blue Properties
{ name: "Park Place", owner: "none", improvements: 0, price: 350 },
{ name: "Boardwalk", owner: "none", improvements: 0, price: 400 },
// Railroads
{ name: "Reading Railroad", owner: "none", improvements: 0, price: 200 },
{ name: "Pennsylvania Railroad", owner: "none", improvements: 0, price: 200 },
{ name: "B. & O. Railroad", owner: "none", improvements: 0, price: 200 },
{ name: "Short Line Railroad", owner: "none", improvements: 0, price: 200 },
// Utilities
{ name: "Electric Company", owner: "none", improvements: 0, price: 150 },
{ name: "Water Works", owner: "none", improvements: 0, price: 150 }
// Add more properties as needed
];
function printBalances() {
var output = document.getElementById("output");
output.innerHTML = "";
// Create the table element
var table = document.createElement("table");
table.classList.add("centered-table"); // Add CSS class for centering the table
// Create the table header row
var headerRow = document.createElement("tr");
var headers = ["Player", "Money", "Property"];
headers.forEach(function(headerText) {
var headerCell = document.createElement("th");
headerCell.textContent = headerText;
headerRow.appendChild(headerCell);
});
table.appendChild(headerRow);
// Create the table rows for each player
accounts.forEach(function(account) {
var playerName = account[0];
var money = account[1];
var combinedPropertyValue = (playerName !== "Pot") ? calculateCombinedPropertyValue(playerName) : "";
var row = document.createElement("tr");
var playerNameCell = document.createElement("td");
playerNameCell.textContent = playerName;
row.appendChild(playerNameCell);
var moneyCell = document.createElement("td");
moneyCell.textContent = money;
row.appendChild(moneyCell);
var combinedPropertyValueCell = document.createElement("td");
combinedPropertyValueCell.textContent = (playerName !== "Pot") ? combinedPropertyValue : "";
row.appendChild(combinedPropertyValueCell);
table.appendChild(row);
});
output.appendChild(table);
}
function calculateCombinedPropertyValue(playerName) {
var combinedValue = calculatePropertyValue(playerName) + calculateImprovementsValue(playerName);
return combinedValue;
}
function calculatePropertyValue(playerName) {
var propertyValue = 0;
properties.forEach(function(property) {
if (property.owner === playerName) {
propertyValue += property.price;
}
});
function generatePlayerOptionsHTML() {
var optionsHTML = "";
return propertyValue;
}
for (var i = 1; i <= numPlayers; i++) {
optionsHTML += `<option value="Player ${i}">Player ${i}</option>`;
}
function calculateImprovementsValue(playerName) {
var improvementsValue = 0;
return optionsHTML;
properties.forEach(function(property) {
if (property.owner === playerName) {
improvementsValue += property.improvements;
}
});
function updateOwnership(player, propertyName) {
properties.forEach(function(property) {
if (property.name === propertyName) {
property.owner = player;
return;
}
});
}
return improvementsValue;
}
function sendMoney() {
var fromAcc = document.getElementById("fromAcc").value;
var toAcc = document.getElementById("toAcc").value;
var amount = parseInt(document.getElementById("amount").value);
// DEBIT
if (fromAcc !== "bank") {
if (fromAcc === "pot") {
fromAcc = 0;
} else {
fromAcc = parseInt(fromAcc);
}
accounts[fromAcc][1] -= amount;
}
function initialize() {
var numPlayersInput = document.getElementById("numPlayers");
var startingValueInput = document.getElementById("startingValue");
// CREDIT
if (toAcc !== "bank") {
if (toAcc === "all") {
var remainder = amount;
var i = 1;
while (remainder > 0) {
if (i !== fromAcc) {
remainder -= 1;
accounts[i][1] += 1;
}
i = (i % numPlayers) + 1;
numPlayers = parseInt(numPlayersInput.value);
var startingValue = parseInt(startingValueInput.value);
if (numPlayers < 2 || isNaN(numPlayers) || isNaN(startingValue)) {
alert("Invalid input. Please enter a valid number of players and starting value.");
return;
}
} else {
if (toAcc === "pot") {
toAcc = 0;
} else {
toAcc = parseInt(toAcc);
}
accounts[toAcc][1] += amount;
}
}
printBalances();
}
</script>
</body>
accounts = [];
var initialProperties = [...properties]; // Copy the initial properties
accounts.push(["Pot", 0]);
for (var i = 1; i <= numPlayers; i++) {
accounts.push(["Player " + i, startingValue]);
}
properties = [...initialProperties]; // Restore the initial properties
resetPropertyOwners();
generatePropertyList();
printBalances();
generatePlayerOptions();
}
function resetPropertyOwners() {
// Reset property owners to "none"
for (var i = 0; i < properties.length; i++) {
properties[i].owner = "none";
}
}
function generatePlayerOptions() {
var fromAccSelect = document.getElementById("fromAcc");
var toAccSelect = document.getElementById("toAcc");
// Clear existing options
fromAccSelect.innerHTML = "";
toAccSelect.innerHTML = "";
// Add options for Pot and Bank
var potOption = document.createElement("option");
potOption.value = "pot";
potOption.text = "Pot";
fromAccSelect.add(potOption.cloneNode(true));
toAccSelect.add(potOption.cloneNode(true));
var bankOption = document.createElement("option");
bankOption.value = "bank";
bankOption.text = "Bank";
fromAccSelect.add(bankOption.cloneNode(true));
toAccSelect.add(bankOption.cloneNode(true));
// Add player options
for (var i = 1; i <= numPlayers; i++) {
var playerOption = document.createElement("option");
playerOption.value = i.toString();
playerOption.text = "Player " + i;
fromAccSelect.add(playerOption.cloneNode(true));
toAccSelect.add(playerOption.cloneNode(true));
}
// Add option for "All" to the "To" dropdown
var allOption = document.createElement("option");
allOption.value = "all";
allOption.text = "All";
toAccSelect.add(allOption.cloneNode(true));
}
function generatePropertyList() {
var propertyItems = document.getElementById("propertyItems");
propertyItems.innerHTML = ""; // Clear existing property list
properties.forEach(function(property) {
var listItem = document.createElement("li");
listItem.innerHTML = `
<select class="ownershipDropdown" onchange="updateOwnership(this.value, '${property.name}')">
<option value="none">None</option>
${generatePlayerOptionsHTML()}
</select>
${property.name} (${property.price})
<input type="number" class="improvementsInput" onchange="updateImprovements(this.value, '${property.name}')" value="${property.improvements}">
`;
propertyItems.appendChild(listItem);
});
}
function updateOwnership(player, propertyName) {
properties.forEach(function(property) {
if (property.name === propertyName) {
property.owner = player;
return;
}
});
printBalances();
}
function updateImprovements(value, propertyName) {
if (value == "") {
value = 0;
}
var newValue = parseInt(value);
properties.forEach(function(property) {
if (property.name === propertyName) {
property.improvements = newValue;
return;
}
});
printBalances();
}
function generatePlayerOptionsHTML() {
var optionsHTML = "";
for (var i = 1; i <= numPlayers; i++) {
optionsHTML += `<option value="Player ${i}">Player ${i}</option>`;
}
return optionsHTML;
}
function applyLevy() {
var levyAmountInput = document.getElementById("levyAmount");
var levyTypeSelect = document.getElementById("levyType");
var levyDestinationSelect = document.getElementById("levyDestination");
var levyAmount = parseFloat(levyAmountInput.value);
var levyType = levyTypeSelect.value;
var levyDestination = levyDestinationSelect.value;
if (isNaN(levyAmount) || levyAmount <= 0) {
alert("Invalid levy amount. Please enter a valid number greater than zero.");
return;
}
switch (levyType) {
case "money":
levyBasedOnMoney(levyAmount, levyDestination);
break;
case "property":
levyBasedOnPropertyValues(levyAmount, levyDestination);
break;
case "wealth":
levyBasedOnWealth(levyAmount, levyDestination);
break;
default:
alert("Invalid levy type. Please select a valid levy type.");
return;
}
printBalances();
}
function levyBasedOnMoney(levyAmount, levyDestination) {
accounts.forEach(function (account) {
var money = account[1];
var levy = Math.round(money * (levyAmount / 100));
if (levyDestination === "pot") {
account[1] -= levy;
accounts[0][1] += levy; // Add to the pot
} else {
account[1] -= levy; // Remove from account
}
});
}
function levyBasedOnPropertyValues(levyAmount, levyDestination) {
accounts.forEach(function (account) {
var playerPropertyValues = 0;
properties.forEach(function (property) {
if (property.owner === account[0]) {
playerPropertyValues += (property.price + property.improvements);
}
});
var levy = Math.round(playerPropertyValues * (levyAmount / 100));
if (levyDestination === "pot") {
account[1] -= levy;
accounts[0][1] += levy; // Add to the pot
} else {
account[1] -= levy; // Remove from account
}
});
}
function levyBasedOnWealth(levyAmount, levyDestination) {
accounts.forEach(function (account) {
var money = account[1];
var levy = Math.round(money * (levyAmount / 100));
properties.forEach(function (property) {
if (property.owner === account[0]) {
levy += Math.round((property.price + property.improvements) * (levyAmount / 100));
}
});
if (levyDestination === "pot") {
account[1] -= levy;
accounts[0][1] += levy; // Add to the pot
} else {
account[1] -= levy; // Remove from account
}
});
}
function sendMoney() {
var fromAcc = document.getElementById("fromAcc").value;
var toAcc = document.getElementById("toAcc").value;
var amount = parseInt(document.getElementById("amount").value);
// DEBIT
if (fromAcc !== "bank") {
if (fromAcc === "pot") {
fromAcc = 0;
} else {
fromAcc = parseInt(fromAcc);
}
accounts[fromAcc][1] -= amount;
}
// CREDIT
if (toAcc !== "bank") {
if (toAcc === "all") {
var remainder = amount;
var i = 1;
while (remainder > 0) {
if (i !== fromAcc) {
remainder -= 1;
accounts[i][1] += 1;
}
i = (i % numPlayers) + 1;
}
} else {
if (toAcc === "pot") {
toAcc = 0;
} else {
toAcc = parseInt(toAcc);
}
accounts[toAcc][1] += amount;
}
}
printBalances();
}
</script>
<div id="footer">
Monopoly Ledger is a project of the <a href="https://www.colorado.edu/lab/medlab/">Media Economies Design Lab</a> at the University of Colorado Boulder<br />
<a href="https://git.medlab.host/MEDLab/MonopolyLedger/">Code</a> is free and open-source on an MIT license
</div>
</body>
</html>