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

Added Rules functionality

Browse Source
This commit is contained in:
Nathan Schneider
2023-07-20 17:02:16 +01:00
parent cf0d8d2a86
commit 42952c42a5
3 changed files with 347 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

465
index.html
View File

@@ -7,27 +7,61 @@
<body>
<h1>Monopoly Ledger</h1>
<div id="setup">
<div id="setup" class="section">
<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>
<label for="numPlayers">Number of Players:</label>
<input type="number" id="numPlayers">
<br>
<label for="startingValue">Starting Balance:</label>
<input type="number" id="startingValue" value="1500">
<br>
<button onclick="initialize()">Begin</button>
</div>
</div>
<div id="balances">
<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>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">
<div id="transactions" class="section">
<h2>Transactions</h2>
<form id="transactionsForm" onsubmit="event.preventDefault();">
@@ -54,34 +88,34 @@
</div>
<div id="levies">
<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>
<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 />
<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>
<br />
<button onclick="applyLevy()">Submit</button>
</div>
</div>
<div id="propertyList">
<div id="propertyList" class="section">
<h2>Properties</h2>
<ul id="propertyItems"></ul>
</div>
@@ -142,84 +176,84 @@
// Add more properties as needed
];
function printBalances() {
var output = document.getElementById("output");
output.innerHTML = "";
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 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"];
// 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);
});
headers.forEach(function(headerText) {
var headerCell = document.createElement("th");
headerCell.textContent = headerText;
headerRow.appendChild(headerCell);
});
table.appendChild(headerRow);
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) : "";
// 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 row = document.createElement("tr");
var playerNameCell = document.createElement("td");
playerNameCell.textContent = playerName;
row.appendChild(playerNameCell);
var playerNameCell = document.createElement("td");
playerNameCell.textContent = playerName;
row.appendChild(playerNameCell);
var moneyCell = document.createElement("td");
moneyCell.textContent = money;
row.appendChild(moneyCell);
var moneyCell = document.createElement("td");
moneyCell.textContent = money;
row.appendChild(moneyCell);
var combinedPropertyValueCell = document.createElement("td");
combinedPropertyValueCell.textContent = (playerName !== "Pot") ? combinedPropertyValue : "";
row.appendChild(combinedPropertyValueCell);
var combinedPropertyValueCell = document.createElement("td");
combinedPropertyValueCell.textContent = (playerName !== "Pot") ? combinedPropertyValue : "";
row.appendChild(combinedPropertyValueCell);
table.appendChild(row);
});
table.appendChild(row);
});
output.appendChild(table);
}
output.appendChild(table);
}
function calculateCombinedPropertyValue(playerName) {
var combinedValue = calculatePropertyValue(playerName) + calculateImprovementsValue(playerName);
return combinedValue;
}
function calculateCombinedPropertyValue(playerName) {
var combinedValue = calculatePropertyValue(playerName) + calculateImprovementsValue(playerName);
return combinedValue;
}
function calculatePropertyValue(playerName) {
var propertyValue = 0;
function calculatePropertyValue(playerName) {
var propertyValue = 0;
properties.forEach(function(property) {
if (property.owner === playerName) {
propertyValue += property.price;
}
});
properties.forEach(function(property) {
if (property.owner === playerName) {
propertyValue += property.price;
}
});
return propertyValue;
}
return propertyValue;
}
function calculateImprovementsValue(playerName) {
var improvementsValue = 0;
function calculateImprovementsValue(playerName) {
var improvementsValue = 0;
properties.forEach(function(property) {
if (property.owner === playerName) {
improvementsValue += property.improvements;
}
});
properties.forEach(function(property) {
if (property.owner === playerName) {
improvementsValue += property.improvements;
}
});
return improvementsValue;
}
return improvementsValue;
}
function initialize() {
async function initialize() {
var numPlayersInput = document.getElementById("numPlayers");
var startingValueInput = document.getElementById("startingValue");
@@ -246,6 +280,9 @@ function calculateImprovementsValue(playerName) {
printBalances();
generatePlayerOptions();
// Rules
resetRuleDropdown();
}
function resetPropertyOwners() {
@@ -292,13 +329,13 @@ function calculateImprovementsValue(playerName) {
toAccSelect.add(allOption.cloneNode(true));
}
function generatePropertyList() {
var propertyItems = document.getElementById("propertyItems");
propertyItems.innerHTML = ""; // Clear existing property list
function generatePropertyList() {
var propertyItems = document.getElementById("propertyItems");
propertyItems.innerHTML = ""; // Clear existing property list
properties.forEach(function(property) {
var listItem = document.createElement("li");
listItem.innerHTML = `
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()}
@@ -306,9 +343,9 @@ function generatePropertyList() {
${property.name} (${property.price})
<input type="number" class="improvementsInput" onchange="updateImprovements(this.value, '${property.name}')" value="${property.improvements}">
`;
propertyItems.appendChild(listItem);
});
}
propertyItems.appendChild(listItem);
});
}
function updateOwnership(player, propertyName) {
properties.forEach(function(property) {
@@ -320,18 +357,18 @@ function generatePropertyList() {
printBalances();
}
function updateImprovements(value, propertyName) {
if (value == "") {
value = 0;
}
var newValue = parseInt(value);
properties.forEach(function(property) {
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();
printBalances();
}
function generatePlayerOptionsHTML() {
@@ -345,92 +382,93 @@ function generatePropertyList() {
}
function applyLevy() {
var levyAmountInput = document.getElementById("levyAmount");
var levyTypeSelect = document.getElementById("levyType");
var levyDestinationSelect = document.getElementById("levyDestination");
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;
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;
}
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;
}
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);
printBalances();
}
});
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));
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
}
});
}
});
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;
@@ -469,13 +507,72 @@ function levyBasedOnWealth(levyAmount, levyDestination) {
}
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">
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>
<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>