581 lines
20 KiB
HTML
581 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Monopoly Ledger</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<h1>Monopoly Ledger</h1>
|
|
|
|
<div id="setup" class="section">
|
|
<h2>Setup</h2>
|
|
<div class="wrap">
|
|
<label for="numPlayers">Number of Players:</label>
|
|
<input type="number" id="numPlayers" value="2">
|
|
<br>
|
|
<label for="startingValue">Starting Balance:</label>
|
|
<input type="number" id="startingValue" value="1500">
|
|
<br>
|
|
<button onclick="initialize()">Begin</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="rules" class="section">
|
|
<h2>Rules</h2>
|
|
|
|
<div class="wrap">
|
|
<select id="ruleSelect">
|
|
<option value="">Preset rules</option>
|
|
<option>Change rules by consensus</option>
|
|
<option>Change rules by majority vote</option>
|
|
<option>Pay rents to pot</option>
|
|
<option>Pay rents to all other players</option>
|
|
<option>Pay levies to the pot</option>
|
|
<option>Pot distributed to player who rolls doubles</option>
|
|
<option>Property levy on passing Go</option>
|
|
<option>Wealth levy on passing Go</option>
|
|
<option>Inflation levy on money every full round of turns</option>
|
|
<option>Distribute basic income every full round</option>
|
|
<option>Ban on trades or gifts of assets</option>
|
|
<option>Ban improvements by a player on more than one color on each side of board</option>
|
|
<option>Allow fractional ownership and revenues</option>
|
|
<option>Goal: Every player builds first hotel</option>
|
|
<option>Goal: Hotel on every buildable space</option>
|
|
<option>Goal: Use the pot as the bank and bankrupt the pot</option>
|
|
</select>
|
|
<br>
|
|
<input type="text" id="customRuleInput" placeholder="Enter custom rule">
|
|
<button onclick="addCustomRule()">Add Custom Rule</button>
|
|
</div>
|
|
|
|
<div>
|
|
<ul id="chosenRulesList"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="section" class="section">
|
|
<h2>Balances</h2>
|
|
<div id="output"></div>
|
|
</div>
|
|
|
|
|
|
<div id="transactions" class="section">
|
|
|
|
<h2>Transactions</h2>
|
|
|
|
<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" class="section">
|
|
<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" class="section">
|
|
<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;
|
|
}
|
|
});
|
|
|
|
return propertyValue;
|
|
}
|
|
|
|
function calculateImprovementsValue(playerName) {
|
|
var improvementsValue = 0;
|
|
|
|
properties.forEach(function(property) {
|
|
if (property.owner === playerName) {
|
|
improvementsValue += property.improvements;
|
|
}
|
|
});
|
|
|
|
return improvementsValue;
|
|
}
|
|
|
|
|
|
async 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();
|
|
|
|
// Rules
|
|
resetRuleDropdown();
|
|
}
|
|
|
|
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
|
|
}
|
|
});
|
|
}
|
|
|
|
// TRANSACTIONS
|
|
|
|
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();
|
|
}
|
|
|
|
// RULES
|
|
|
|
// Helper function to add a rule to the chosen rules list
|
|
function addRuleToList(ruleText) {
|
|
var ruleList = document.getElementById("chosenRulesList");
|
|
var ruleItem = document.createElement("li");
|
|
ruleItem.classList.add("ruleItem");
|
|
|
|
var ruleTextElement = document.createElement("span");
|
|
ruleTextElement.classList.add("ruleText");
|
|
ruleTextElement.textContent = ruleText;
|
|
ruleItem.appendChild(ruleTextElement);
|
|
|
|
var deleteButton = document.createElement("button");
|
|
deleteButton.classList.add("deleteButton");
|
|
deleteButton.textContent = "Delete";
|
|
deleteButton.onclick = function() {
|
|
ruleItem.remove(); // Remove the rule item when the delete button is clicked
|
|
};
|
|
ruleItem.appendChild(deleteButton);
|
|
|
|
ruleList.appendChild(ruleItem);
|
|
}
|
|
|
|
|
|
// Add an event listener to the dropdown
|
|
var dropdown = document.getElementById("ruleSelect");
|
|
dropdown.addEventListener("change", addRule);
|
|
|
|
|
|
function addRule() {
|
|
var selectedOption = dropdown.options[dropdown.selectedIndex];
|
|
// Get the text content of the selected option
|
|
var ruleText = selectedOption.textContent;
|
|
addRuleToList(ruleText);
|
|
resetRuleDropdown();
|
|
}
|
|
|
|
// Function to handle adding a custom rule to the chosen rules list
|
|
function addCustomRule() {
|
|
var customRuleInput = document.getElementById("customRuleInput");
|
|
var customRule = customRuleInput.value.trim();
|
|
|
|
if (customRule !== "") {
|
|
addRuleToList(customRule);
|
|
customRuleInput.value = ""; // Clear the input field after adding the rule
|
|
}
|
|
}
|
|
|
|
function resetRuleDropdown() {
|
|
var dropdown = document.getElementById("ruleSelect");
|
|
dropdown.selectedIndex = 0; // Reset to the first option ("Choose a rule")
|
|
}
|
|
|
|
// Call the initialize function to set up the game on page load
|
|
initialize();
|
|
|
|
|
|
</script>
|
|
|
|
<div id="footer">
|
|
<p>Need help? <a href="https://git.medlab.host/MEDLab/MonopolyLedger/src/main/README.md">See the README</a></p>
|
|
<p>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</p>
|
|
<p><a href="https://git.medlab.host/MEDLab/MonopolyLedger/">Code</a> is free and open-source on an MIT license</p>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|