FakeArtist/client/src/App.js

import * as PIXI from 'pixi.js';
import {io} from 'socket.io-client';

import {DrawingApp, Layer} from './DrawingApp';

const socket = io();

var id = "";
var drawing_app = null;

var game_info = document.getElementById('game_state_info');
var pixi_wrapper = document.getElementById('pixi-wrapper');

function setGameInfo(info) {
  game_info.innerHTML = info;
}

socket.on('connect', () => {
  console.log("\n*** CONNECTED TO SOCKET *** ", socket.id);

  id = socket.id;

  console.log("\n*** Startup! ***");
});

document.getElementById('join_room_btn').addEventListener("click", (e) => {
  var room_code = document.getElementById('room_code').value;
  var username = document.getElementById('username').value;

  socket.emit('join_room', room_code, username);
});

socket.on('room', (room_id) => {
  // join the room
  console.log(room_id);
  document.getElementById('game_room_code').innerHTML = room_id;

  document.getElementById('game_setup').style.display = "none";
  document.getElementById('game_info').style.display = "initial";
});

socket.on('room_error', (error_msg) => {
  alert(error_msg);
});

document.getElementById('create_room_btn').addEventListener("click", (e) => {   
  // Tell the server we want a new room
  var username = document.getElementById('username').value;
  socket.emit("create_room", username);
});

socket.on('player_data', (player_arr) => {
  var count = player_arr.length;
  document.getElementById('current_player_count').innerHTML = count;

  var player_list = document.getElementById('player_list');

  player_list.innerHTML = "";
  
  player_arr.forEach((player) => {
      player_list.innerHTML += "<li>" + player.player_name + "</li>";
  })

  document.getElementById('start_game_btn').disabled = (count < 5);
});

document.getElementById('start_game_btn').addEventListener('click', (e) => {
  socket.emit('start_game');
});

socket.on('game_started', () => {
  // game_data.game_leader = 
  console.log("yooo");
  document.getElementById('pre_game_player_list').style.display = "none";
});

socket.on('leader_selected', (leader) => {
  console.log(leader);
  console.log(id);
  setGameInfo(`Please wait while the leader ${leader.player_name} is selecting a topic to be painted`);
  if(leader.id == id) {
    setGameInfo("You are the game leader! Please choose a topic and a category that the topic fits in.");
    document.getElementById('game_leader_input').style.display = "initial";

    document.getElementById('submit_topic').addEventListener('click', (e) => {
      var topic = document.getElementById('game_topic').value;
      var category = document.getElementById('game_category').value;

      socket.emit('topic_selected', topic, category);
    })
  }
});

socket.on('topic_selected', (topic, category) => {
  console.log(topic, category);
  document.getElementById('game_leader_input').style.display = "none";
  setGameInfo(`Topic: ${topic}<br />Category: ${category}`);
});

socket.on('game_finished', (leader, player_list) => {
  var pl = document.getElementById("endgame_player_list");
  
  pl.innerHTML = "";
  
  player_list.forEach((player) => {
    if (player.id == leader.id) {
      pl.innerHTML += `<li style="font-weight: bold; color: black;">${player.player_name} (Leader)</li>`;
    }
    else {
      pl.innerHTML += `<li style="color: ${player.player_color};">${player.player_name}</li>`;
    }
  })

  pl.style.display = "initial";

  var ink_bar = document.getElementById('myBar');
  ink_bar.style.display = "none";

  document.getElementById('current_user_text').style.display = "none";
});

socket.on('actually_start_game', (player_data) => {
  // Get player with our id to get the correct color
  drawing_app = new DrawingApp(pixi_wrapper, player_data);
  window.drawing_app = drawing_app;
});

socket.on('draw_data', (round_num, data) => {
  console.log("Draw Data: ", round_num);
  var cur_layer = drawing_app.layers[round_num];

  cur_layer.drawPointLine(data[0], data[1], true);
});

socket.on('advance_round', (round_num, current_player) => {
  var ink_bar = document.getElementById('myBar');
  ink_bar.style.width = "100%";

  var current_user_text = `It's&nbsp;<span style="white-space:pre; font-weight: bold; color: ${current_player.player_color}">${current_player.player_name}</span>'s turn to draw!`

  document.getElementById('current_user_text').innerHTML = current_user_text;

  if(id == current_player.id) {
    ink_bar.style.backgroundColor = current_player.player_color;
    ink_bar.style.visibility = "visible";

    const cur_layer = drawing_app.layers[round_num];

    cur_layer.enable();

    cur_layer.setLivePaintProgressCallback((old_pos, new_pos) => {
      var ink_pct = cur_layer.getPaintPercentage();  

      ink_bar.style.width = ((1.0 - ink_pct) * 100) + "%";

      console.log(ink_pct);
    
      socket.emit("draw_data", [old_pos, new_pos]);
    });

    cur_layer.setFinishedPaintingCallback(() => {
      cur_layer.disable();
      socket.emit("round_finished");
    });

    /*player_data.forEach((p) => {
      if(p.id == id) {
        ink_bar.style.backgroundColor = p.player_color;
        // can probably get the color from current_player
        // since we only show this if we are the current player
        // yeah...
      }
    });*/
  }
  else {
    ink_bar.style.visibility = "hidden";
  }

  // TODO: Set current drawing layer, activate if WE are drawing
  // If we are not drawing, still hook drawing data from server into
  // drawing app

  // TODO: Figure out how to best "unhook" these afterwards
});

/*function display_colors() {
  var color_selection = document.getElementById('color_selection');
  color_selection.innerHTML = "";

  available_colors.forEach((element) => {
    let newDiv = document.createElement('div');
    newDiv.classList.add('color');
    newDiv.style.backgroundColor = element;

    color_selection.appendChild(newDiv);
  });
};*/



/*const drawing_app = new DrawingApp(pixi_wrapper, {
  'players': [
    {'player_id': 'A', 'color': '#c35a00'},
    {'player_id': 'B', 'color': '#290097'}
  ]
});*/

/*drawing_app.layers[0].setLivePaintProgressCallback((old_pos, new_pos) => {
  console.log(old_pos);
  socket.emit("draw_data", [old_pos, new_pos]);
})*/

// Test