cs4241 - fp - team 4

.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+package-lock.json
+.env
+/public/.DS_Store

README.md

@@ -1,56 +1,34 @@
-# cs4241-FinalProject
+# Pictochat V2: Electric Boogaloo
 
-For your final project, you'll implement a course project that exhibits your mastery of the course materials. 
-This project should provide an opportunity to be creative and to pursue individual research and learning.
+**Jordan Gold, Chris Lee, Jacob Tutlis, William Yang**
 
-## General description
+Link to website: https://cs4241-fp.herokuapp.com/  
 
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
+Project Video Link: https://youtu.be/XSkTXzIL88o 
 
-- Static Web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
-- Dynamic behavior implemented with JavaScript (TypeScript is also allowed if your group wants to explore it).
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data, authentication, and possibly server-side computation. Ideally it will also include support for realtime commmunication as discussed below.
-- Groups are *highly encouraged* to consider including some type of realtime communication technology in their projects (chat, networked multiplayer games, collaborative coding/editing, video/audio via WebRTC etc.) We'll be discussing many of these technologies in class next week. 
-- A video (less than five minutes) where each group member explains some aspect of the project. An easy way to produce this video is for you all the groups members to join a Zoom call that is recorded; each member can share their screen when they discuss the project or one member can "drive" the interface while other members narrate (this second option will probably work better.) The video should be posted on YouTube or some other accessible video hosting service. 
+## Project Description
 
-## Project ideation
+This website may just be the greatest technological achievement in our generation besides of course the original Pictochat. We were able to implement a chat room that allows users to send and create both text and drawings. The main purpose of the chatroom is to be able to chat with other users and send drawn images as an additional form of communication. Users must log in and then join one of four different chat rooms to chat and draw with other users.  
 
-Excellent projects serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity. Consider creating something useful for a cause or hobby you care about.
+## Additional Instructions
 
-## Logistics
+When a user first joins the website they will have to log in with Github then they will be directed to the homescreen. When on the homescreen they are able to join four different chat rooms. Once in a chat room they can use the canvas to draw pictures and send text to other users in the room. When a user leaves the page or disconnects they will automatically be removed from the chat room. If a user’s internet cuts out they may disconnect from the chat and will have to refresh the page to rejoin.  
 
-### Team size
-Students are will work in teams of 3-5 students for the project; teams of two can be approved with the permission of the instructor. Working in teams will allow you to build a good project in a limited amount of time.
+## Technology Outline
 
-### Deliverables
+- **Socket.io**: Used for real time communication. Sending and receiving messages in a chatroom is all done with the Socket.io
+- **Paper.js**: Used to make a nice drawable canvas with different functionality such as changing brush color and size.
+- **Github oauth**: Used to authenticate users for logging in and to set every user's ID.
+- **JavaScript**: Used for all basic scripting and communication.
+- **Jquery**: Used to simplify the workflow for certain tasks such as adding new items to the list when receiving a message.
+
+## Challenges
 
-__Proposal:__ 
-Provide an outline of your project direction and the names of the team members. 
-The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline.
-This file must be named proposal.md so we can find it.
-Submit a PR to turn it in by Monday, 11:59 PM
+The CSS was the biggest challenge of the website. It was very hard to have all elements of the page fit correctly on the page while also looking nice and being functional. Things seemed to have a mind of their own and there were a lot of problems designing it.  
 
-There are no other scheduled checkpoints for your project. 
+## Group Member Responsibilities
 
-#### Turning in Your Outline / Project
-
-**NOTE: code is due before the project presentation day due to the end of term / grading schedule constraints**
-Submit a second PR on the final project repo to turn in your app and code.
-
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service.
-Folks on the same team do not need to post the same webpage, but must instead clearly state who is on the team in their proposal.
-
-The README for your second pull request doesn’t need to be a formal report, but it should contain:
-
-1. A brief description of what you created, and a link to the project itself.
-2. Any additional instructions that might be needed to fully use your project (login information etc.)
-3. An outline of the technologies you used and how you used them.
-4. What challenges you faced in completing the project.
-5. What each group member was responsible for designing / developing.
-6. A link to your project video.
-
-Think of 1,3, and 4 in particular in a similar vein to the design / tech achievements for A1—A4… make a case for why what you did was challenging and why your implementation deserves a grade of 100%.
-
-## FAQs
-
-- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use node.js. Your client-side language should be either JavaScript or TypeScript.
+- **Jordan Gold**: Implemented drawable Paper.js canvas used to send images. Implemented all drawing tools related to creating your image on the Paper.js canvas. Extended the chatroom to incorporate image sending and receiving.
+- **Chris Lee**: Helped create the CSS for the website and set up basic buttons.
+- **Jacob Tutlis**: Setup server and socket.io for the client and server. Created the chatroom functionality.
+- **William Yang**: Setup Github Oath and login authentication. Helped create the CSS for the website.

package.json

@@ -0,0 +1,17 @@
+{
+    "name": "pictochat",
+    "version": "0.0.1",
+    "description": "Pictochat knock off",
+    "author": "Final Project Team",
+    "scripts": {
+        "start": "node server.js"
+    },
+    "dependencies": {
+        "body-parser": "^1.19.0",
+        "cookie-session": "^1.4.0",
+        "dotenv": "^8.2.0",
+        "express": "^4.17.1",
+        "node-fetch": "^2.6.1",
+        "socket.io": "^2.3.0"
+    }
+}

proposal.md

@@ -0,0 +1,20 @@
+# Proposal
+Jordan Gold, Jacob Tutlis, Chris Lee, Bill Yang
+
+## Pictochat 2: Electric Boogaloo
+
+Pictochat 2 will be an online chat room created in JavaScript that will allow users to log onto the site using an OAuth account, join one of the multiple chat rooms, and be able to draw/type messages to be sent to the chat room in real-time. 
+
+We are roughly trying to create a UI/Product similar to this image below where users may draw images using their mouse along with typing letters with their keyboards and then send those messages in real-time to their communal chat room where other users can view these messages and respond.
+
+Technologies:
+- We plan to use Socket.io for our real-time communication in the chat room. (Socket.io subject to change)
+- Node.JS for our backend server with Express to make things simpler
+- MongoDB for storing user info
+- Our front-end will be written in plain JavaScript and styled with a CSS library (Probably Bootstrap)
+- Other libraries will be implemented as needed
+
+Target users/Stakeholders
+This site will target nostalgic Nintendo DS users that want to relive their glory days (back in ‘04)
+
+![img1](https://gamespot1.cbsistatic.com/uploads/scale_medium/mig/3/2/0/8/2223208-pictochat_1.jpg)

public/chatroom.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Final Project</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
+    <script src="//cdn.muicss.com/mui-0.10.3/js/mui.min.js"></script>
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
+    <script src="js/logout.js"></script>
+    <script src="js/paper-full.js"></script>
+    <script defer src="js/script.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+
+    <script type="text/paperscript"
+            canvas="centralCanvas"
+            src="js/draw.js"></script>
+</head>
+
+    <body>
+        <audio id="sound1" src="/music/send.mp3"></audio>
+        <audio id="sound2" src="/music/clear.mp3"></audio>
+        <audio id="music" src="/music/pictochat.mp3" controls autoplay loop></audio>
+        <div id="background"></div>
+        <div class="wrapper">
+            <div class="left">
+                <div class="avatar center-block"> </div>
+                <h1 id="title">Pictochat 2</h1>
+                <h3 id="subtitle">Type or draw something!</h3>
+                <div>
+                    <button id="send" class="mui-btn mui-btn--primary">Send</button>
+                    <button id="clear" class="mui-btn mui-btn--danger">Clear</button>
+                </div>
+                <br>
+                <p>Brush Size Selection</p>
+                <div>
+                    <button id="5" class="selected brush mui-btn mui-btn--small mui-btn--primary">5px</button>
+                    <button id="10" class="brush mui-btn mui-btn--small mui-btn--primary">10px</button>
+                    <button id="15" class="brush mui-btn mui-btn--small mui-btn--primary">15px</button>
+                    <button id="20" class="brush mui-btn mui-btn--small mui-btn--primary">20px</button>
+                    <button id="30" class="brush mui-btn mui-btn--small mui-btn--primary">30px</button>
+                    <button id="40" class="brush mui-btn mui-btn--small mui-btn--primary">40px</button>
+                </div>
+                <br>
+                <p>Brush Color Selection</p>
+                <div>
+                    <button id="red" class="selected color mui-btn mui-btn--small mui-btn--primary">Red</button>
+                    <button id="blue" class="color mui-btn mui-btn--small mui-btn--primary">Blue</button>
+                    <button id="yellow" class="color mui-btn mui-btn--small mui-btn--primary">Yellow</button>
+                    <button id="orange" class="color mui-btn mui-btn--small mui-btn--primary">Orange</button>
+                    <button id="green" class="color mui-btn mui-btn--small mui-btn--primary">Green</button>
+                    <button id="violet" class="color mui-btn mui-btn--small mui-btn--primary">Violet</button>
+                    <button id="white" class="color mui-btn mui-btn--small mui-btn--primary">Eraser</button>
+                </div>
+                <canvas id="centralCanvas"
+                        width="650"
+                        height="300"
+                        style="border: 2px solid #000000"></canvas>
+                <div class="footer">
+                    <span id=usernamelabel><strong>Username: </strong></span>
+                    <input id="username" type="text" value="" readonly>
+                    <button id="logoutButton" class="mui-btn mui-btn--accent">Log Out</button>
+                    <button id="backButton" class="mui-btn mui-btn--danger" onclick="goBack()">Back</button>
+                </div>
+                <script>
+                    function goBack() {
+                        window.history.back();
+                    }
+
+                    function setWidth() {
+                        return window.setWidth / 6;
+                    }
+                </script>
+                <br>
+                <br>
+                <br>
+            </div>
+            <div class="right">
+                <ul id="messages"></ul>
+                <div clas=footer>
+                    <form id="no" action="">
+                        <button class="mui-btn mui-btn--primary">Send</button>
+                        <input id="userMessage" autocomplete="off" />
+                    </form>
+                </div>
+                <script src="/socket.io/socket.io.js"></script>
+                <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+                        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+                        crossorigin="anonymous"></script>
+            </div>
+        </div>
+    </body>
+</html>

public/css/login.css

@@ -0,0 +1,53 @@
+html, body {
+    background: url(../img/pc.jpg) no-repeat center center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+
+    height: 100%;
+    z-index: -1;
+
+    font-family: 'Montserrat', sans-serif;
+}
+
+button {
+    font-family: 'Montserrat', sans-serif;
+}
+
+/* #background{
+    background-color: palevioletred;
+    width: 100%;
+    height: 550px;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    background-image: url('/img/login.png');
+    background-position: center center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
+    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to (rbga(0,0,0,0)));
+    opacity: 0.7;
+    z-index: -1;
+} */
+
+.loginbtn {
+    font-size: 20px;
+    margin: 0;
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    width: auto;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+#ghlogin {
+    margin: 0;
+    position: absolute;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}

public/css/nav.css

@@ -0,0 +1,44 @@
+a {
+    box-sizing: border-box;
+    display: block;
+    margin: 10px 0;
+    padding: 10px;
+    width: 100%;
+    background-color: black;
+}
+
+.column {
+    float: left;
+    width: 20%;
+    padding: 2.5%
+}
+
+.row {
+    margin-top: 20%;
+    margin-right: 10%;
+    margin-left: 10%;
+}
+
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+#logoutButton {
+    margin: 0;
+    margin-top: 10%;
+    position: absolute;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.backgroundVid {
+    position:fixed;
+    right:0;
+    bottom:0;
+    min-width: 100%;
+    min-height: 100%;
+    z-index:-1;
+}