add logo

script.js

@@ -50,12 +50,14 @@ let fields = [
 
 ];
 
+const FREE_FIELD_TEXT = "Freies Parken"
+
 let shuffled = fields
   .map(value => ({ value, sort: Math.random() }))
   .sort((a, b) => a.sort - b.sort)
   .map(({ value }) => value)
 
-shuffled.splice(12, 0, "Freies Parken");
+shuffled.splice(12, 0, FREE_FIELD_TEXT);
 
 function generateTable() {
   let table = document.querySelector("table");
@@ -68,12 +70,19 @@ function generateTable() {
     let cell = row.insertCell();
 
     let text = document.createTextNode(field);
+    if (field == FREE_FIELD_TEXT) {
+        cell.id = 'center-field';
+    }
     cell.appendChild(text);
   });
-
   table.addEventListener('click', (ev) => {
-    if (ev.target.tagName.toLowerCase() == "td" ) {
+    let cell;
+    let target_type = ev.target.tagName.toLowerCase();
+    if (target_type === "td"  || target_type === "img") {
         let cell = ev.target;
+        if (target_type === "img") {
+          cell = ev.target.parentNode;
+        }
         if (cell.style.borderColor == "green") {
           cell.style.borderColor = "black";
           cell.style.backgroundColor = "white";
@@ -86,4 +95,6 @@ function generateTable() {
 }
 
 generateTable();
+const center_field = document.querySelector('#center-field');
+center_field.innerHTML = '<img src="img/7-vs-wild-logo.svg" alt="7 vs. Wild Logo"></img>'
 

style.css

@@ -13,6 +13,11 @@ td {
   font-size: 200%;
   font-family: Arial, Helvetica, sans-serif;
 }
+
+img {
+  width: 100%;
+}
+
 h1 {
   font-family: Arial, Helvetica, sans-serif;
   text-align: center;