Initial Commit

tokgozkerem · Mar 17, 2024 · b74b94e · b74b94e
commit b74b94e
Show file tree

Hide file tree

Showing 39 changed files with 450 additions and 0 deletions.
diff --git a/draw.js b/draw.js
@@ -0,0 +1,232 @@
+const pots = {
+  "POT 1": [
+    "Man City",
+    "Sevilla",
+    "Barcelona",
+    "Napoli",
+    "Bayern",
+    "Paris",
+    "Benfica",
+    "Feyenoord",
+    "Liverpool",
+  ],
+  "POT 2": [
+    "Real Madrid",
+    "Man United",
+    "Internazionale",
+    "Dortmund",
+    "Atletico",
+    "Leipzig",
+    "Porto",
+    "Arsenal",
+    "Atalanta",
+  ],
+  "POT 3": [
+    "Shakhtar",
+    "Salzburg",
+    "Milan",
+    "Braga",
+    "PSV",
+    "Lazio",
+    "Crvena zvezda",
+    "Copenhagen",
+    "Marseille",
+  ],
+  "POT 4": [
+    "Young Boys",
+    "Real Sociedad",
+    "Galatasaray",
+    "Celtic",
+    "Newcastle",
+    "Union Berlin",
+    "Antwerp",
+    "Lens",
+    "Molde",
+  ],
+};
+
+// HTML içine tablo oluşturma fonksiyonu
+function createTable(potName, teams) {
+  const table = document.createElement("table");
+  const tableHead = document.createElement("thead");
+  const tableBody = document.createElement("tbody");
+
+  const headRow = document.createElement("tr");
+  const headCell = document.createElement("td");
+  const headSpan = document.createElement("span");
+  headSpan.textContent = potName;
+  headSpan.id = `${potName.replace(/\s+/g, "-").toLowerCase()}-heading`; // id ekleyelim
+  headCell.appendChild(headSpan);
+  headRow.appendChild(headCell);
+  tableHead.appendChild(headRow);
+
+  teams.forEach((teamName) => {
+    const bodyRow = document.createElement("tr");
+    const bodyCell = document.createElement("td");
+
+    // Create div container for logo and team name
+    const teamContainer = document.createElement("div");
+    teamContainer.classList.add("team-container");
+
+    // Create image element for logo
+    const img = document.createElement("img");
+    img.onload = function () {
+      // Adjust size after image loads
+      this.width = 25;
+      this.height = 25; // Set height to 50 pixels
+    };
+    img.src = `images/${teamName.replace(/\s+/g, "_").toLowerCase()}_logo.png`;
+    img.alt = `${teamName} Logo`;
+    img.classList.add("team-logo");
+
+    // Create span element for team name
+    const teamNameSpan = document.createElement("span");
+    teamNameSpan.textContent = teamName.toUpperCase();
+    teamNameSpan.classList.add("team-name");
+
+    // Append image and team name to team container
+    teamContainer.appendChild(img);
+    teamContainer.appendChild(teamNameSpan);
+
+    // Append team container to body cell
+    bodyCell.appendChild(teamContainer);
+
+    // Append body cell to body row
+    bodyRow.appendChild(bodyCell);
+
+    // Append body row to table body
+    tableBody.appendChild(bodyRow);
+  });
+
+  table.appendChild(tableHead);
+  table.appendChild(tableBody);
+  return table;
+}
+
+// Tabloları HTML'e ekleme
+const drawContainer = document.getElementById("drawContainer");
+for (const [potName, teams] of Object.entries(pots)) {
+  drawContainer.appendChild(createTable(potName, teams));
+}
+
+// Yeni tablo oluşturma fonksiyonu
+function createLeftPanelTable(teams) {
+  const table = document.createElement("table");
+  const tableBody = document.createElement("tbody");
+
+  teams.forEach((teamName) => {
+    const bodyRow = document.createElement("tr");
+    const bodyCell = document.createElement("td");
+
+    // Create div container for logo and team name
+    const teamContainer = document.createElement("div");
+    teamContainer.classList.add("team-container");
+
+    // Create image element for logo
+    const img = document.createElement("img");
+    img.src = `images/${teamName.replace(/\s+/g, "_").toLowerCase()}_logo.png`;
+    img.alt = `${teamName} Logo`;
+    img.classList.add("team-logo");
+    img.width = 25;
+    img.height = 25;
+
+    // Create span element for team name
+    const teamNameSpan = document.createElement("span");
+    teamNameSpan.textContent = teamName.toUpperCase();
+    teamNameSpan.classList.add("team-name");
+
+    // Append image and team name to team container
+    teamContainer.appendChild(img);
+    teamContainer.appendChild(teamNameSpan);
+
+    // Append team container to body cell
+    bodyCell.appendChild(teamContainer);
+
+    // Append body cell to body row
+    bodyRow.appendChild(bodyCell);
+
+    // Append body row to table body
+    tableBody.appendChild(bodyRow);
+  });
+
+  table.appendChild(tableBody);
+  return table;
+}
+const groups = [[], [], [], []];
+
+// Grup seçimlerini tanımla
+const selections = [
+  [
+    { pot: "POT 1", count: 3 },
+    { pot: "POT 2", count: 2 },
+    { pot: "POT 3", count: 2 },
+    { pot: "POT 4", count: 2 },
+  ],
+  [
+    { pot: "POT 1", count: 2 },
+    { pot: "POT 2", count: 3 },
+    { pot: "POT 3", count: 2 },
+    { pot: "POT 4", count: 2 },
+  ],
+  [
+    { pot: "POT 1", count: 2 },
+    { pot: "POT 2", count: 2 },
+    { pot: "POT 3", count: 3 },
+    { pot: "POT 4", count: 2 },
+  ],
+  [
+    { pot: "POT 1", count: 2 },
+    { pot: "POT 2", count: 2 },
+    { pot: "POT 3", count: 2 },
+    { pot: "POT 4", count: 3 },
+  ],
+];
+
+// Grup seçimlerini gerçekleştir
+for (let i = 0; i < selections.length; i++) {
+  selectTeams(groups[i], selections[i]);
+}
+
+console.log(groups);
+
+function selectTeams(group, selections) {
+  for (const selection of selections) {
+    selectUniqueTeamsFromPot(pots[selection.pot], selection.count, group);
+  }
+}
+
+function selectUniqueTeamsFromPot(pot, count, selectedTeams) {
+  for (let i = 0; i < count; i++) {
+    if (pot.length === 0) {
+      console.error("Hata: Pot boş.");
+      return;
+    }
+    const teamIndex = Math.floor(Math.random() * pot.length);
+    selectedTeams.push(pot[teamIndex]);
+    pot.splice(teamIndex, 1); // Seçilen takımı listeden çıkar
+  }
+}
+
+// Draw butonunu seç
+const drawButton = document.getElementById("drawButton");
+
+// Draw butonuna click olayı ekle
+drawButton.addEventListener("click", drawTeams);
+
+// Takımları gruplara ayır ve ekrana ekle
+function drawTeams() {
+  displayGroups(); // Grupları ekrana göster
+}
+
+// Grupları ekranda göster
+function displayGroups() {
+  // Grup container'ını seç
+  const groupContainer = document.getElementById("groupContainer");
+  groupContainer.innerHTML = ""; // Grup container'ını temizle
+
+  // Grupları ekrana ekle
+  for (let i = 0; i < groups.length; i++) {
+    const groupName = `GROUP ${i + 1}`;
+    groupContainer.appendChild(createTable(groupName, groups[i]));
+  }
+}
diff --git a/images/antwerp_logo.png b/images/antwerp_logo.png
diff --git a/images/arsenal_logo.png b/images/arsenal_logo.png
diff --git a/images/atalanta_logo.png b/images/atalanta_logo.png
diff --git a/images/atletico_logo.png b/images/atletico_logo.png
diff --git a/images/barcelona_logo.png b/images/barcelona_logo.png
diff --git a/images/bayern_logo.png b/images/bayern_logo.png
diff --git a/images/benfica_logo.png b/images/benfica_logo.png
diff --git a/images/braga_logo.png b/images/braga_logo.png
diff --git a/images/celtic_logo.png b/images/celtic_logo.png
diff --git a/images/copenhagen_logo.png b/images/copenhagen_logo.png
diff --git a/images/crvena_zvezda_logo.png b/images/crvena_zvezda_logo.png
diff --git a/images/dortmund_logo.png b/images/dortmund_logo.png
diff --git a/images/feyenoord_logo.png b/images/feyenoord_logo.png
diff --git a/images/galatasaray_logo.png b/images/galatasaray_logo.png
diff --git a/images/internazionale_logo.png b/images/internazionale_logo.png
diff --git a/images/lazio_logo.png b/images/lazio_logo.png
diff --git a/images/leipzig_logo.png b/images/leipzig_logo.png
diff --git a/images/lens_logo.png b/images/lens_logo.png
diff --git a/images/liverpool_logo.png b/images/liverpool_logo.png
diff --git a/images/man_city_logo.png b/images/man_city_logo.png
diff --git a/images/man_united_logo.png b/images/man_united_logo.png
diff --git a/images/marseille_logo.png b/images/marseille_logo.png
diff --git a/images/milan_logo.png b/images/milan_logo.png
diff --git a/images/molde_logo.png b/images/molde_logo.png
diff --git a/images/napoli_logo.png b/images/napoli_logo.png
diff --git a/images/newcastle_logo.png b/images/newcastle_logo.png
diff --git a/images/paris_logo.png b/images/paris_logo.png
diff --git a/images/porto_logo.png b/images/porto_logo.png
diff --git a/images/psv_logo.png b/images/psv_logo.png
diff --git a/images/real_madrid_logo.png b/images/real_madrid_logo.png
diff --git a/images/real_sociedad_logo.png b/images/real_sociedad_logo.png
diff --git a/images/salzburg_logo.png b/images/salzburg_logo.png
diff --git a/images/sevilla_logo.png b/images/sevilla_logo.png
diff --git a/images/shakhtar_logo.png b/images/shakhtar_logo.png
diff --git a/images/union_berlin_logo.png b/images/union_berlin_logo.png
diff --git a/images/young_boys_logo.png b/images/young_boys_logo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Champions League</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div id="drawContainer"></div>
+    <!-- Pot tablolarının yerleştirileceği div -->
+    <div id="buttonContainer">
+      <button id="drawButton">Draw!</button>
+    </div>
+    <!-- Draw butonu -->
+    <div id="groupContainer"></div>
+    <script src="draw.js"></script>
+  </body>
+</html>