MEDLab
/
MonopolyLedger


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
							<!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>