🎉

client/src/App.js

@@ -0,0 +1,215 @@
+
+import * as PIXI from 'pixi.js';
+import {io} from 'socket.io-client';
+
+import {DrawingApp, Layer} from './DrawingApp';
+
+const socket = io('ws://192.168.0.155:7777');
+
+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
+