app.kluk.fr/app/views/moods/index.html.erb

<main data-controller="mood">
  <div class="mode">
    <%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
  </div>
  <div class="tracker">
    <div class="title">
      <h1>Comment ça KLUK aujourd'hui ?</h1>
    </div>
    <div class="info-day" data-mood-target="info">Aujourd'hui</div>
    <div class="moods">
      <div class="log">
        <% @mood_log.each do |week| %>
          <div class="week">
            <% week.each do |d| %>
              <% if d[1] %>
                <div data-image="<%= asset_path(d[1] + ".jpg") %>" data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
              <% else %>
                <div class="day"></div>
              <% end %>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
    <div class="legend">
      <div class="legend-mood">
        <div class="bar-frigo"></div>
        <div class="bar-explain">Triste</div>
      </div>
      <div class="legend-mood">
        <div class="bar-en-charge"></div>
        <div class="bar-explain">En charge</div>
      </div>
      <div class="legend-mood">
        <div class="bar-croisiere"></div>
        <div class="bar-explain">Croisiere</div>
      </div>
      <div class="legend-mood">
        <div class="bar-creatif"></div>
        <div class="bar-explain">Créatif</div>
      </div>
      <div class="legend-afond">
        <div class="bar-afond"></div>
        <div class="bar-explain">A fond</div>
      </div>
    </div>
  </div>
</main>