Tests

by Jérôme Sengel

HTML

<div id="left">
    <div class="centered">
      <button id="leftButton" onclick="choose(this.value)"></button>
    </div>
  </div>
  <div id="right">
    <div class="centered">
      <button id="rightButton" onclick="choose(this.value)"></button>
    </div>
  </div>
  
  <ol id="results">
  </ol>

CSS

#left,
#right {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  text-align: center;
}

#left {
  left: 0;
  background-color: pink;
}

#right {
  right: 0;
  background-color: lightblue;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* CSS */
button {
  align-items: center;
  background-color: rgba(240, 240, 240, 0.26);
  border: 1px solid #DFDFDF;
  border-radius: 16px;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: flex;
  font-family: Inter, sans-serif;
  font-size: 18px;
  justify-content: center;
  line-height: 28px;
  max-width: 100%;
  padding: 14px 22px;
  text-decoration: none;
  transition: all .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
}

button:active,
button:hover {
  outline: 0;
}

button:hover {
  background-color: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.19);
}

@media (min-width: 768px) {
  button {
    font-size: 20px;
    min-width: 200px;
    padding: 14px 16px;
  }
}

JavaScript

let recipes = [
  "Choucroute",
  "Baeckehoffe",
  "Coq au Riesling",
  "Tartes flambées",
  "Bouchées à la reine",
  "Ailes de poulet + pdt au four",
  "Tartiflette",
  "Raclette",
  "Pierrade",
  "Lapin à la provençale",
  "Croque-monsieurs",
  "Roulades",
  "Boeuf bourguignon",
  "Rosbif alsacien (de cheval)",
  "Grumbeere salat",
  "Lapin au vin d'Alsace",
  "Grumbeerekiechle"
]

let battles = [];
for (let i = 0; i < recipes.length; i++) {
  for (let j = recipes.length - 1; j > i; j--) {
    if (i != j) {
      battles.push([i, j]);
    }
  }
}
/* Randomize array in-place using Durstenfeld shuffle algorithm */
for (let i = battles.length - 1; i >= 0; i--) {
  const j = Math.floor(Math.random() * (i + 1));
  [battles[i], battles[j]] = [battles[j], battles[i]];
}

let leftButton = document.getElementById("leftButton");
let rightButton = document.getElementById("rightButton");
let battleNumber = 0;
initializeBattle(battleNumber);

function initializeBattle(battleNumber) {
  let leftChoice = battles[battleNumber][0];
  let rightChoice = battles[battleNumber][1];

  leftButton.value = leftChoice;
  leftButton.innerHTML = recipes[leftChoice];

  rightButton.value = rightChoice;
  rightButton.innerHTML = recipes[rightChoice];
}

let results = new Map();
function choose(choice) {
  results.set(choice, results.get(choice) ? results.get(choice) + 1 : 1);

  if (++battleNumber < battles.length) {
    initializeBattle(battleNumber);
  } else {
    displayResults();
  }
}

function displayResults() {
  leftButton.parentElement.parentElement.remove();
  rightButton.parentElement.parentElement.remove();

  let orderedList = document.getElementById("results");
  let sortedResults = new Map([...results.entries()].sort((a, b) => b[1] - a[1]));

  for (let [key, value] of sortedResults) {
    let listItem = document.createElement('li');
    listItem.appendChild(document.createTextNode(recipes[key] + " (" + value + " votes)"));
    orderedList.appendChild(listItem);
  }
}