JSFiddle - React, Tailwind, and code Playground

by replicateur

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="table">

</div>

CSS

* {
  margin: 0;
  padding: 0;
}

#table {
  display: flex;
  width: 100%;
  display: -webkit-flex;
  -webkit-justify-content: center;

  display: flex;
  justify-content: center;
}

.row {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: thin solid #777;
  -webkit-flex: 1;
}

.cell {
  display: flex;
}

.day {
  display: flex;
  justify-content: center;
  font-weight: bold;
  border-bottom: 1px solid black;
}

JavaScript

var ItemList = function() {
  this.usedItemIds = [];
  this.items = [];

  this._createItemId = function() {
    let newId = 0;
    for (let i = 0; i < this.items.length; i++) {
      const itemId = this.items[i].id;
      if (itemId > newId) newId = itemId;
    }
    return newId + 1;
  }

  this.setUsedItemId = function(itemId) {
    this.usedItemIds.push(itemId)
  }

  this.setItem = function(name, type) {
    let item = {};
    item.id = this._createItemId();
    item.name = name;
    item.type = type;
    this.items.push(item);
  }

  this.setItems = function(items) {
    for (let i = 0; i < items.length; i++) {
      this.setItem(items[i].name, items[i].type);
    }
  }

  this.pickRandomItem = function(items) {
    const item = items[Math.floor(Math.random() * items.length)];
    this.setUsedItemId(item.id);
    return item;

  }

  this.getAvailableItems = function() {
    const self = this;
    return this.items.filter(function(el) {
      return !self.usedItemIds.includes(el.id);
    });
  }

  this.getMultipleItems = function(number) {
    let res = [];
    for (let i = 0; i < number; i++) {
      let availableItems = this.getAvailableItems();
      if (availableItems.length) {
        let randomItem = this.pickRandomItem(availableItems);
        res.push(randomItem);
      } else {
        break;
      }
    }
    return res;
  }
}

var types = {
  fruit: {
    name: "Fruit",
    "antagonist": [],
    "affinity": []
  },
  feculent: {
    name: "Féculent",
    "antagonist": [],
    "affinity": []
  },
  viande: {
    name: "Viande",
    "antagonist": [],
    "affinity": []
  },
  legume: {
    name: "Légume",
    "antagonist": [],
    "affinity": []
  },
  poisson: {
    name: "Poisson",
    "antagonist": [],
    "affinity": []
  },
  plat: {
    name: "Plat",
    "antagonist": [],
    "affinity": []
  },
};

// create simple item list for a day
var defaultItemList = [{
    id: 1,
    name: "Pomme",
    type: "fruit"
  },
  {
    id: 2,
    name:...