redmarkets-negotiation/templates/negotiation.html

{% extends "base.html" %}

{% block header %}
<header id="negotiation-header">
  <div class="inner">
    <nav id="navigation">
      <span id="home-button" class="nav-button">
        <a class="home-button"><i class="ic ic-settings"></i>Settings</a>
      </span>
      <h1 class="post-title">Red Markets Negotiations: {{ negotiation.name }}</h1>
      <span id="menu-button" class="nav-button">
        <a class="menu-button"><i class="ic ic-menu"></i> Menu</a>
      </span>
    </nav>
  </div>
</header>
{% endblock header %}

{% block content %}
<div id="negotiation" class="negotiation-wrapper">
  <div class="negotiation-sidebar">{% include 'partials/negotiation-sidebar.html' %}</div>
  <div class="negotiation-panel">{% include 'partials/negotiation-panel.html' %}</div>
</div>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/socket.io.js"></script>
<script type="text/javascript" charset="utf-8">
  // const negotiation = new Negotiation("{{negotiation.name}}")
  var socket = io();
  var room = "{{negotiation.name}}";
  
  socket.on('connect', function() {
      console.log("Trying to join room " + room);
      socket.emit('join negotiation', {"room": room}, function(e) {
          update_from_data(e);
      });
  });
  window.addEventListener('beforeunload', function(e) {
      console.log("Trying to leave room " + room);
      socket.emit('leave negotiation', {"room": room});
      socket.disconnect();
      return true;
  });
  socket.on('participants changed', (data) => {
      console.log(data);
      $("#negotiation .participants .count").html(data['participants'].length);
      $("#negotiation .participant-list li").each(function() {
          if (!data['participants'].includes($(this).attr('participant-id'))) {
              console.log("Removing element for participant id " + $(this).attr('participant-id'));
              console.log($(this));
              $(this).remove();
          }
      });
      var num_p;
      var listed = $('#negotiation .participant-list li');
      for (num_p = 0; num_p < data['participants'].length ; num_p++) {
          var p = data['participants'][num_p];
          console.log('Checking to see if ' + p + ' is in the participant list');
          console.log($('#negotiation .participant-list li[participant-id="' + p + '"]'));
          if ($('#negotiation .participant-list li[participant-id="' + p + '"]').length < 1) {
              $("#negotiation .participant-list").append(
                  '<li participant-id="' + p + '">' + p + '</li>'
              );
          }
      }
  });
  socket.on('negotiation updated', function(e) {
      update_from_data(e);
  });

  function update_from_data(e) {
      console.log(e);
      if ('taker_sway' in e) {
          // Update taker way
          var current_taker_sway = $('.swaytracker .taker-position .active').attr('id');
          change_swayslot(current_taker_sway, 't' + e.taker_sway);
      }
      if ('market_sway' in e) {
          var current_market_sway = $('.swaytracker .market-position .active').attr('id');
          change_swayslot(current_market_sway, 'm' + e.market_sway);
      }
  }
  function swayslot_on_dragstart(event) {
          var ev = event.originalEvent;
          ev.dataTransfer.setData("text/plain", ev.target.id);
          let img = new Image();
          img.src = '/static/images/drag.png';
          ev.dataTransfer.setDragImage(img, 0, 0);
          ev.dataTransfer.dropEffect = "move";
  }
  function swayslot_on_dragover(event) {
      event.preventDefault();
      event.originalEvent.dataTransfer.dropEffect = "move";
  }
  function swayslot_on_drop(event) {
      event.preventDefault();
      var source = event.originalEvent.dataTransfer.getData('text/plain');
      // Check to see if this is in the same track (id starts with same letter)
      var this_id = $(this).attr('id');
      if (this_id[0] == source[0] && this_id != source) {
          var key = (this_id[0] == 't' ? 'taker_sway' : 'market_sway');
          var value = this_id[1];
          var data = {
              "room": room,
          };
          data[key] = value;
          socket.emit('update negotiation', data, function (confirmation) {
              if (confirmation) {
                  change_swayslot(source, this_id);
              }
          });
      }
  }
  function change_swayslot(from, to) {
      $("#" + from).removeClass('active').unbind('dragstart').attr('draggable', false);
      $('#' + to).addClass('active').on('dragstart', swayslot_on_dragstart).attr('draggable', true);
  }
  // Drag/drog for the swaytracker
  window.addEventListener('DOMContentLoaded', () => {
      $('.swaytracker .active').on('dragstart', swayslot_on_dragstart);
      $('.swaytracker .active').attr('draggable', true);
      $('.swaytracker .market-position .slot').on('dragover', swayslot_on_dragover);
      $('.swaytracker .taker-position .slot').on('dragover', swayslot_on_dragover);
      $('.swaytracker .market-position .slot').on('drop', swayslot_on_drop);
      $('.swaytracker .taker-position .slot').on('drop', swayslot_on_drop);
  });
</script>
{% endblock content %}