mPanasiewicz · April 17, 2025 08:41
diff --git a/Trailblazers codenames division tool b/Trailblazers codenames division tool
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Code Names Team Splitter</title>
    <link
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
      }
      .team {
        margin-top: 20px;
      }
      .team h2 {
        color: white;
        padding: 10px;
      }
      .red-team {
        background-color: red;
      }
      .blue-team {
        background-color: blue;
      }
      .remove-button {
        margin-right: 10px;
      }
      .spymaster {
        font-weight: bold;
        color: gold;
      }
      .split-teams-button {
        width: 100%;
        background-color: #28a745;
        color: white;
      }
    </style>
  </head>
  <body class="container">
    <h1 class="my-4">Code Names Team Splitter</h1>
    <div class="input-group mb-3">
      <input
        type="text"
        id="nameInput"
        class="form-control"
        placeholder="Enter name"
      />
      <div class="input-group-append">
        <button class="btn btn-primary" onclick="addName()">Add Name</button>
      </div>
    </div>
    <ul id="nameList" class="list-group mb-3"></ul>
    <button class="btn split-teams-button mb-3" onclick="splitTeams()">
      Split Teams
    </button>
    <div class="team red-team p-3">
      <h2>Red Team</h2>
      <ul id="redTeam" class="list-group"></ul>
    </div>
    <div class="team blue-team p-3 mt-3">
      <h2>Blue Team</h2>
      <ul id="blueTeam" class="list-group"></ul>
    </div>

    <script>
      let names = [
        "Beth",
        "Melissa",
        "Ava",
        "Paweł",
        "Steve",
        "Piotr",
        "Lucas",
        "Maciej",
        "Eduard",
      ];

      function initializeNames() {
        const nameList = document.getElementById("nameList");
        names.forEach((name) => {
          const li = document.createElement("li");
          li.className =
            "list-group-item d-flex justify-content-between align-items-center";
          li.textContent = name;
          li.appendChild(createRemoveButton(name));
          nameList.appendChild(li);
        });
      }

      function addName() {
        const nameInput = document.getElementById("nameInput");
        const name = nameInput.value.trim();
        if (name) {
          names.push(name);
          const li = document.createElement("li");
          li.className =
            "list-group-item d-flex justify-content-between align-items-center";
          li.textContent = name;
          li.appendChild(createRemoveButton(name));
          document.getElementById("nameList").appendChild(li);
          nameInput.value = "";
        }
      }

      function createRemoveButton(name) {
        const button = document.createElement("button");
        button.className = "btn btn-danger btn-sm remove-button";
        button.textContent = "-";
        button.onclick = () => removeName(name);
        return button;
      }

      function removeName(name) {
        names = names.filter((n) => n !== name);
        const nameList = document.getElementById("nameList");
        const items = nameList.getElementsByTagName("li");
        for (let i = 0; i < items.length; i++) {
          if (items[i].textContent.includes(name)) {
            nameList.removeChild(items[i]);
            break;
          }
        }
      }

      function splitTeams() {
        if (names.length < 4) {
          alert("Please add at least 4 names.");
          return;
        }

        const shuffledNames = names.sort(() => 0.5 - Math.random());
        const mid = Math.ceil(shuffledNames.length / 2);
        const redTeam = shuffledNames.slice(0, mid);
        const blueTeam = shuffledNames.slice(mid);

        displayTeam("redTeam", redTeam);
        displayTeam("blueTeam", blueTeam);
      }

      function displayTeam(teamId, team) {
        const teamElement = document.getElementById(teamId);
        teamElement.innerHTML = "";
        team.forEach((name, index) => {
          const li = document.createElement("li");
          li.className = "list-group-item";
          if (index === 0) {
            li.classList.add("spymaster");
            li.innerHTML = `🕵️‍♂️ ${name} - Spymaster`;
          } else {
            li.textContent = `${name} - Operative`;
          }
          teamElement.appendChild(li);
        });
      }

      // Initialize the default names on page load
      window.onload = initializeNames;
    </script>
  </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Code Names Team Splitter</title>
	<link
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
	rel="stylesheet"
	/>
	<style>
	body {
	font-family: Arial, sans-serif;
	margin: 20px;
	}
	.team {
	margin-top: 20px;
	}
	.team h2 {
	color: white;
	padding: 10px;
	}
	.red-team {
	background-color: red;
	}
	.blue-team {
	background-color: blue;
	}
	.remove-button {
	margin-right: 10px;
	}
	.spymaster {
	font-weight: bold;
	color: gold;
	}
	.split-teams-button {
	width: 100%;
	background-color: #28a745;
	color: white;
	}
	</style>
	</head>
	<body class="container">
	<h1 class="my-4">Code Names Team Splitter</h1>
	<div class="input-group mb-3">
	<input
	type="text"
	id="nameInput"
	class="form-control"
	placeholder="Enter name"
	/>
	<div class="input-group-append">
	<button class="btn btn-primary" onclick="addName()">Add Name</button>
	</div>
	</div>
	<ul id="nameList" class="list-group mb-3"></ul>
	<button class="btn split-teams-button mb-3" onclick="splitTeams()">
	Split Teams
	</button>
	<div class="team red-team p-3">
	<h2>Red Team</h2>
	<ul id="redTeam" class="list-group"></ul>
	</div>
	<div class="team blue-team p-3 mt-3">
	<h2>Blue Team</h2>
	<ul id="blueTeam" class="list-group"></ul>
	</div>

	<script>
	let names = [
	"Beth",
	"Melissa",
	"Ava",
	"Paweł",
	"Steve",
	"Piotr",
	"Lucas",
	"Maciej",
	"Eduard",
	];

	function initializeNames() {
	const nameList = document.getElementById("nameList");
	names.forEach((name) => {
	const li = document.createElement("li");
	li.className =
	"list-group-item d-flex justify-content-between align-items-center";
	li.textContent = name;
	li.appendChild(createRemoveButton(name));
	nameList.appendChild(li);
	});
	}

	function addName() {
	const nameInput = document.getElementById("nameInput");
	const name = nameInput.value.trim();
	if (name) {
	names.push(name);
	const li = document.createElement("li");
	li.className =
	"list-group-item d-flex justify-content-between align-items-center";
	li.textContent = name;
	li.appendChild(createRemoveButton(name));
	document.getElementById("nameList").appendChild(li);
	nameInput.value = "";
	}
	}

	function createRemoveButton(name) {
	const button = document.createElement("button");
	button.className = "btn btn-danger btn-sm remove-button";
	button.textContent = "-";
	button.onclick = () => removeName(name);
	return button;
	}

	function removeName(name) {
	names = names.filter((n) => n !== name);
	const nameList = document.getElementById("nameList");
	const items = nameList.getElementsByTagName("li");
	for (let i = 0; i < items.length; i++) {
	if (items[i].textContent.includes(name)) {
	nameList.removeChild(items[i]);
	break;
	}
	}
	}

	function splitTeams() {
	if (names.length < 4) {
	alert("Please add at least 4 names.");
	return;
	}

	const shuffledNames = names.sort(() => 0.5 - Math.random());
	const mid = Math.ceil(shuffledNames.length / 2);
	const redTeam = shuffledNames.slice(0, mid);
	const blueTeam = shuffledNames.slice(mid);

	displayTeam("redTeam", redTeam);
	displayTeam("blueTeam", blueTeam);
	}

	function displayTeam(teamId, team) {
	const teamElement = document.getElementById(teamId);
	teamElement.innerHTML = "";
	team.forEach((name, index) => {
	const li = document.createElement("li");
	li.className = "list-group-item";
	if (index === 0) {
	li.classList.add("spymaster");
	li.innerHTML = `🕵️‍♂️ ${name} - Spymaster`;
	} else {
	li.textContent = `${name} - Operative`;
	}
	teamElement.appendChild(li);
	});
	}

	// Initialize the default names on page load
	window.onload = initializeNames;
	</script>
	</body>
	</html>