Group 5 Final Project Submission

.gitignore

@@ -0,0 +1,3 @@
+node_modules/*
+.env
+package-lock.json

README.md

@@ -1,51 +1,32 @@
-# Final Project
-*Due before the start of class, October 11th (final day of the term)*
+## CS4241 Final Project
+Group 5: Paloma González Gálvez, Mark Forte, Ryan Stebe, Matt Johannesen
 
-For your final project, you'll implement a web application that exhibits understanding of the course materials. 
-This project should provide an opportunity to both be creative and to pursue individual research and learning goals.
+### Summary
+We created a 2-player web version of the game [Quoridor](https://en.wikipedia.org/wiki/Quoridor), in which players each move their pawn across a 9x9 board (from opposing sides) while placing walls to hinder their opponent's progress.
 
-## General description
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
+Given that this project involves multiple clients in a competitive setting, a large focus of our project was cheat protection. We have both the server and client validate the player's moves - that way even if the client code is modified, the server will refuse invalid inputs and will not change the game state.
 
-- 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 (database), authentication, and possibly server-side computation. 
-- 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. Make sure your video is less than five minutes, but long enough to successfully  explain your project and show it in action. There is no minimum video length.
+A large portion of our server code is dedicated to validating pawn and wall placements.  Because walls in Quoridor sit in between grid spaces, we had to come up with our own methods for checking blockages, calculating legal movements, and pathfinding (to satisfy Quoridor's rule that there must always be a path between each pawn and the side of the board they're trying to reach).
 
-## Project ideation
-Excellent projects typically 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. 
+Overview video of our project: https://www.youtube.com/watch?v=gbEOEv0PTZ4
 
-## Logistics
-### 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 should help enable you to build a good project in a limited amount of time.  Use the `#project-logistics` channel in Discord to pitch ideas for final projects and/or find fellow team members as needed.
+### Instructions
+Two players (or just two browser tabs) are needed to run the game.
+Go to http://final-project-group-5.glitch.me/ to load the first client.
+The first client will provide a "join" link - open it on another device/window to start the second client and begin playing.
+(If either of these steps doesn't work, close all Quoridor windows and try again.)
 
-Teams must be in place by end of day on Saturday, September 25th. If you have not identified a team at this point, you will be assigned a team. You will be given some class time on Monday to work on your proposal, but please plan on reserving additional time as needed.
+You only need your mouse to play.  On your turn, select what you want to do (move your pawn, place a horizontal wall, or place a vertical wall) above the board, then click on the board to make your move.  If you try to make an invalid move, a warning will be displayed under the board.
 
-### Deliverables
+### Libraries
+- Node.js
+    - Server code; manages game sessions and validates input from the client to prevent cheating
+- p5.js
+    - Board visuals
+- Websockets (ws)
+    - Simple communication between server and clients
+- Express
+    - Serving the game client page
 
-__Proposal:__ 
-Provide an outline of your project direction and the names of associated 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. Please include a general description of a project, and list of key technologies/libraries you plan on using (e.g. React, Three.js, Svelte, TypeScript etc.). Name the file proposal.md and submit a pull request.
-Submit a PR to turn it in by Monday, September 27th at11:59 PM. Only one pull request is required per team.
-
-There are no other scheduled checkpoints for your project. 
-
-#### Turning in Your Outline / Project
-Submit a second PR on the final project repo to turn in your app and code. Again, only one pull request per team.
-
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service; it is critical that the application functions correctly wherever you post it.
-
-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 (two paragraphs of text)
-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 scripting language should be either JavaScript or TypeScript.
+### Work Distribution
+We all met to discuss the game and agree on a set of message formats that the server and clients would use to communicate - once that was settled, Paloma and Mark focused on the client, while Ryan and Matt focused on the server.

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "quoridor",
+  "version": "1.0.0",
+  "description": "A 2-player networked version of the board game Quoridor.",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/m-d-jo/final_project.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/m-d-jo/final_project/issues"
+  },
+  "homepage": "https://github.com/m-d-jo/final_project#readme",
+  "dependencies": {
+    "express": "^4.17.1",
+    "nodemon": "^2.0.13",
+    "ws": "^8.2.3"
+  }
+}

proposal.md

@@ -0,0 +1,18 @@
+ ## CS4241 Final Project - Proposal
+Group 5: Paloma González Gálvez, Mark Forte, Ryan Stebe, Matt Johannesen
+
+### Concept
+A two-player implementation of the board game [Quoridor](https://en.wikipedia.org/wiki/Quoridor), played using two clients connected to a game server.
+
+Quoridor is a relatively straightforward game, in which players move their pawn across a 9x9 board while hindering their opponent's progress by placing walls.  Aside from the game logic and interface, the major technical challenge of this project will be having the server accept and validate requests from more than one client, in a way that minimizes the chance of one client breaking the game.
+
+### Libraries
+-  Node.js
+-  Express
+-  p5.js - Board visuals
+-  [Pathfinding](https://www.npmjs.com/package/pathfinding) (npm package) - Used by server to verify whether a player has a valid winning path (required by one of the game rules) 
+-   Middleware to track which client is sending info
+	-   Thinking of doing this with cookies
+-   Middleware for tracking timeouts
+-   Socket.IO?
+	-   Unsure of this one - seems to be commonly used by browser games for client-server communication

public/css/styles.css

@@ -0,0 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
+
+div {
+display: inline-block;
+}
+
+form {
+    margin-bottom : 20px;
+    margin-top: 0px;
+    font-size : 15px;
+    font-family: 'PT Sans', sans-serif;
+    color: #383838;
+}
+
+h3 {
+    margin-bottom: 0px;
+    font-size : 25px;
+    font-family: 'PT Sans', sans-serif;
+    color: #383838;
+}