https://thawing-fjord-86821.herokuapp.com/whiteboard

README.md

@@ -1,65 +1,113 @@
-# Your Project Name
+# QUIKDRAW
 
-This is the starter code for WDI projects. Please update this README file with information specific to your project. Replace this paragraph for instance, with a short description of your project. Then update the sections below. Refer to your project specificaion for instructions on how to submit your projects.
 
-## Getting Started
 
-Provide instructions here about how to get your project running on our local machine. Do we just need to clone and open a certain file or do we need to install anything first.
+## About
 
-### Prerequisites
+Quikdraw is an easy-to-play game where you would take turns with your matched partner to guess what the other is drawing. The more answers you get right, the more points you get!
 
-What is needed to install and run the project, how do we install them
+### Socket.io
 
-```
-Code example
-```
-
-### How to Use
-
-A step by step guide on how to install and use the project, for example if this is a game, how do we play it.
-
-
-```
-Code example
-```
-
-More steps...
-
-```
-until finished
-```
-
-
-## Tests
-
-Did you write automated tests? If so, how do we run them.
+Socket.io was used in this project to allow a multiplayer interface on QUIKDRAW. Socket.io was crucial in allowing me to enable a simultaneous connection between the client and server.
 
 
 ```
-Code example
+var rooms = []
+var roomNum = 1
+
+io.on('connection', function(socket){
+  // console.log(socket.id, "user connected")
+  // socket.on('adduser', function (username) {
+    users.push(socket.id)
+    // console.log(rooms.length)
+
+    if(rooms.length === 0 ) {
+    rooms.push(socket.id)
+    socket.room = "room" + roomNum
+    socket.turn = true
+    console.log(socket.id + " " + socket.turn)
+    socket.join("room" + roomNum)
+    io.of('/').adapter.clients([socket.room], (err, clients) => {
+
+  } else if (rooms.length % 2 === 1) {
+    rooms.push(socket.id)
+
+    socket.room = "room" + roomNum
+    socket.join("room" + roomNum)
+
+    io.of('/').adapter.clients([socket.room], (err, clients) => {
+      console.log(clients.length)
+      if (clients.length === 2) {
+        socket.turn = false
+        console.log(socket.id + " " + socket.turn + "line 57")
+      } else if(clients.length === 1) {
+        socket.turn = true
+        console.log(socket.id + " " + socket.turn + " line 61")
+        rooms.pop()
+
+      }
+
+    })
+  } else if (rooms.length % 2 === 0) {
+    socket.turn = true
+
+    roomNum ++
+    socket.room = "room" + roomNum
+    rooms.push(socket.id)
+    socket.join("room" + roomNum)
+    io.of('/').adapter.clients([socket.room], (err, clients) => {
+    })
+  }
 ```
 
-## Live Version
-
-Where is this deployed online (github pages, heroku etc), give us the link and any access details we need.
+Each player who establishes a connection with the server would have his unique socket ID pushed into the rooms array. Each odd player would be the person who draws first while each even player would be the matching partner who would get to guess.
 
-## Built With
+If a person establishes a connection and realizes that he is an even player but at the same time in a room with only one person, I would then ensure that his turn is turned back to true while at the same time reducing the length of the rooms arrayby one to return the room matching algorithm back to normal.
 
-What did you use to build it, list the technologies, plugins, gems, packages etc.
+Furthermore, when the browser is refreshed, a player loses connection and would then have to connect to the server again losing his current game.
 
-* [jQuery](http://jquery.com/) - jQuery for example is something you likely used
 
-## Workflow
+## Canvas
 
-Did you write user stories, draw wireframes, use task tracking, produce ERDs? Did you use source control, with regular commits? Include links to them here.
+Canvas was key behind the whiteboard in QUIKDRAW.
 
-## Authors
+The function which draws lines on the canvas was Drawline.
 
-Did you collaborate with others on this project, list them here
+A key to take note was when emitting, we divide the coordinates by the local player's whiteboard width and height so that the remote player would receive the coordinates per unit of height and width. Before drawing on the whiteboard, the remote player would then have to mulitply the per unit coordinates by their own whiteboard's width and height. This ensures that varying screen size does not matter when drawing on the whiteboard.
 
-* **John McClain** - *Responsible for keeping vests white* - [GithubUserName](https://github.com/GithubUserName)
 
-## Acknowledgments
+```
+function drawLine(x0, y0, x1, y1, color, emit){
+  context.beginPath();
+  context.moveTo(x0, y0);
+  context.lineTo(x1, y1);
+  context.strokeStyle = color;
+  if (color === "white") {
+    context.lineWidth = 20
+  } else{
+    context.lineWidth = 2;
+  }
+  context.stroke();
+  context.closePath();
+
+  if (!emit) { return; }
+  var w = canvas.width;
+  var h = canvas.height;
+
+  socket.emit('drawing', {
+    x0: x0 / w,
+    y0: y0 / h,
+    x1: x1 / w,
+    y1: y1 / h,
+    color: color
+  });
+}
+```
 
-* Hat tip to anyone who's code was used, for example [this was a useful starting point for creating this template](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2).
+## Built with
 
+* Node.js
+* Express
+* Socket.io
+* Canvas
+* HTML, CSS & Javascript

home.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>QUIKDRAW</title>
+    <link rel="stylesheet" href="home.css">
+    <link href="https://fonts.googleapis.com/css?family=Pacifico|Quicksand:700" rel="stylesheet">
+  </head>
+  <body>
+    <div class="container">
+      <div class="quickdraw">
+        <h1>QUIKDRAW</h1>
+        <img class="pencilImg" src="pencil.png">
+      </div>
+      <!-- <img src="pencil.gif"> -->
+      <!-- <img src="_pencil.gif"> -->
+      <h3>Draw fast, Think fast</h3>
+      <div class="instructions">
+        <h5>Instructions:</h5>
+        <ol>
+          <li>Click on PLAY NOW!</li>
+          <li>Wait to be matched with a partner, waiting time depends on the volume of players in the game</li>
+          <li>Upon being matched with a partner, game would begin immediately</li>
+          <li>Take turns to guess what your partner is drawing</li>
+          <li>Each correctly guessed answer will grant a point to the both of you</li>
+          <li>Draw and think fast though, both of you only have a minute till the game ends!</li>
+        </ol>
+    </div>
+      <a href="/whiteboard">PLAY NOW!</a>
+    </div>
+    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
+    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
+    <script src="home.js"></script>
+  </body>
+</html>

index.js

@@ -0,0 +1,192 @@
+var express = require('express')
+var app = require('express')();
+var http = require('http').Server(app);
+var io = require('socket.io')(http);
+var port = process.env.PORT || 5000;
+
+users=[]
+rooms = []
+
+app.use(express.static('public'))
+
+app.get('/', function(req, res){
+  res.sendFile(__dirname + '/home.html');
+});
+
+app.get('/chat', function(req, res){
+  res.sendFile(__dirname + '/chat.html');
+});
+
+app.get('/whiteboard', function(req, res){
+  res.sendFile(__dirname + '/whiteboard.html');
+});
+
+var rooms = []
+var roomNum = 1
+
+io.on('connection', function(socket){
+  // console.log(socket.id, "user connected")
+  // socket.on('adduser', function (username) {
+    users.push(socket.id)
+    // console.log(rooms.length)
+
+    if(rooms.length === 0 ) {
+    rooms.push(socket.id)
+    socket.room = "room" + roomNum
+    socket.turn = true
+    console.log(socket.id + " " + socket.turn)
+    socket.join("room" + roomNum)
+    io.of('/').adapter.clients([socket.room], (err, clients) => {
+    //   if(clients.length === 2) {
+    //     socket.turn = false
+    //   }
+    // console.log(`joined ${socket.room} with ${clients.length} people including me, current roomNum is ${roomNum}`)
+    })
+    // console.log("no of people in rooms is " + rooms.length, "is it my turn? "+ socket.turn, 1)
+  } else if (rooms.length % 2 === 1) {
+    rooms.push(socket.id)
+    // socket.turn = false
+    // console.log(socket.id + " " + socket.turn + "line 49")
+    socket.room = "room" + roomNum
+    socket.join("room" + roomNum)
+    // console.log('this goes first')
+    io.of('/').adapter.clients([socket.room], (err, clients) => {
+      console.log(clients.length)
+      if (clients.length === 2) {
+        socket.turn = false
+        console.log(socket.id + " " + socket.turn + "line 57")
+      } else if(clients.length === 1) {
+        socket.turn = true
+        console.log(socket.id + " " + socket.turn + " line 61")
+        rooms.pop()
+        // console.log("this goes second")
+        // console.log("no of people in rooms is " + rooms.length, "is it my turn? "+ socket.turn, 2)
+      }
+    // console.log(`joined ${socket.room} with ${clients.length} people including me, current roomNum is ${roomNum}`)
+    })
+  } else if (rooms.length % 2 === 0) {
+    socket.turn = true
+    console.log(socket.id + " " + socket.turn)
+    roomNum ++
+    socket.room = "room" + roomNum
+    rooms.push(socket.id)
+    socket.join("room" + roomNum)
+    io.of('/').adapter.clients([socket.room], (err, clients) => {
+    //   if(clients.length === 2) {
+    //     socket.turn = false
+    //   }
+    // console.log(`joined ${socket.room} with ${clients.length} people including me, current roomNum is ${roomNum}`)
+    })
+    // console.log("no of people in rooms is " + rooms.length, "is it my turn? "+ socket.turn, 3)
+  }
+
+  setTimeout(function() {
+    io.of('/').adapter.clients([socket.room], (err, clients) => {
+    if(clients.length === 1) {
+      io.to(socket.id).emit('wait for player')
+    } else if (clients.length === 2) {
+      io.to(socket.room).emit('second player arrived')
+    }
+  })
+}, 50)
+
+  // console.log("turn " + socket.turn)
+
+  setTimeout(function () {io.to(socket.id).emit('turn', socket.turn)}, 50)
+
+  socket.on('username', function(username) {
+    io.of('/').adapter.clients([socket.room], (err, clients) => {
+
+      var index = clients.indexOf(socket.id)
+      clients.splice(index, 1)
+        io.to(clients[0]).emit('username', username);
+  })
+})
+
+  socket.on('clear canvas', function () {
+    io.of('/').adapter.clients([socket.room], (err, clients) => {
+
+      var index = clients.indexOf(socket.id)
+      clients.splice(index, 1)
+        io.to(clients[0]).emit('clear canvas');
+  })
+})
+
+  socket.on('change turn', function () {
+    // console.log(socket.turn)Fuser
+    socket.turn = !socket.turn // turning turn from true to false and vice versa
+    console.log(socket.id + " " + socket.turn + "from change turn")
+    // console.log(socket.turn)
+    io.to(socket.id).emit('turn', socket.turn)
+
+    io.of('/').adapter.clients([socket.room], (err, clients) => {
+
+      var index = clients.indexOf(socket.id)
+      clients.splice(index, 1)
+        io.to(clients[0]).emit('changeTurnProcess', 'dummy variable');
+
+});
+
+  })
+
+  socket.on('chat message', function(msg){
+    io.emit('chat message',  msg);
+  });
+
+  socket.on('changeTurnProcess', function () {
+    socket.turn = !socket.turn
+    console.log(socket.id + " " + socket.turn + "from change turn process")
+    io.to(socket.id).emit('turn', socket.turn)
+  })
+
+  socket.on('guessedAns', function(msg){
+    // console.log(msg)
+
+    io.of('/').adapter.clients([socket.room], (err, clients) => {
+      var idIndex = rooms.indexOf(socket.id)
+      // var oppPlayerId = rooms[idIndex - 1]
+
+      // if (clients.includes(oppPlayerId)) {
+      var index = clients.indexOf(socket.id)
+      clients.splice(index, 1)
+        io.to(clients[0]).emit('guessedAns',  msg);
+
+    });
+
+  });
+
+  io.emit('testconnection', users, socket.id)
+
+socket.on('drawing', (data) => io.to(socket.room).emit('drawing', data))
+
+socket.on('correct answer', function () {
+  io.of('/').adapter.clients([socket.room], (err, clients) => {
+    var idIndex = rooms.indexOf(socket.id)
+    var index = clients.indexOf(socket.id)
+    clients.splice(index, 1)
+    io.to(clients[0]).emit('correct answer');
+})
+})
+
+  socket.on('disconnect', function () {
+    userIndex = users.indexOf(socket.id)
+    users.splice(userIndex, 1)
+    // console.log(rooms)
+
+    // roomIndex = rooms.indexOf(socket.id)
+    // rooms.splice(roomIndex, 1)
+    // console.log("rooms", rooms)
+
+    io.of('/').adapter.clients([socket.room], (err, clients) => {
+      // var index = clients.indexOf(socket.id)
+      // console.log("clients", clients)
+      // clients.splice(index, 1)
+      io.to(clients[0]).emit('player disconnect');
+  })
+})
+
+});
+
+http.listen(port, function(){
+  // console.log('listening on *:' + port);
+});