fp-AndrewLevy395-dandaman2-Archduketim

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

README.md

@@ -1,60 +1,39 @@
 # cs4241-FinalProject
 
-For your final project, you'll implement a course project that exhibits your mastery of the course materials. 
-Similar to A4, this project gives you an opportunity to be creative and to pursue individual research and learning.
-
-## General description
-
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
-
-- 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.
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data, authentication, and possibly server-side computation.
-
-Additionally, you should incorporate features that you independently research, design, and implement for your project.
-
-## Project ideation
-
-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.
-
-## Logistics
-
-### Team size
-Students are encouraged to work in teams of 2-5 students for the project. This will allow you to build a good project without expending an excessive amount of effort. While I would expect a team of four or five students to produce a project with more features, I expect a every team's work to exhibit all of the required facets described above.
-
-### Deliverables
-
-__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, September 30th, before class
-
-There are no other scheduled checkpoints for your project. 
-You must be done in time to present before the final project demo day (October 10th). 
-
-#### 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.
-
-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%.
-
-## Final Presentation
-
-Presentations will occur during the final day of class in *Riley Commons*.
-
-## 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.
+## Team Members
+- Daniel Duff
+- Timothy Winters
+- Andrew Levy
+
+**Codenames**
+For our Final Project, we implemented a multiplayer game called "Codenames", an electronic version of a fun and collaborative card game.
+(rules can be found here: https://czechgames.com/files/rules/codenames-rules-en.pdf).
+
+Using JavaScript's Socket.io and Socket.io-client libraries we were able to create an application that communicates with a Node.js server, 
+and updates client real-time. This was mainly used for implementing a constant game state (and storing that information on the server), 
+as well as updating player's turn order. Maintaining game state, as well as ensuring it was consistent among multiple clients (as well as
+updating that information real-time) was very challenging, as it was something none of us had any prior experience with. Ensuring 
+all socket information was kept up-to-date in addition to random board setup generation was a task which we struggled with tackling at first,
+however we were able to overcome our difficulties!
+
+**How To Run**
+We were unable to place the game on a remote client due to socketing conflicts. In the future we're hoping to get this to work so that people can play our game online. The game can be run by running npm intall and then npm start in the app package.json directory. After running these commands the application can be accessed via localhost:3000 in a browser. Multiple tabs can count as multiple players (for testing purposes) as long as they are connected to localhost:3000 as well.
+
+
+## This project features:
+- A React.js front-end framework that dynamically renders DOM elements for players.
+- Modularization in the implementation of the React.js frontend. 
+- Useage of the Socket.io and Socket.io-client libraries to maintain game state and interact with React components. 
+- A simple Node.js database which maintains game state, as well as storing card, socket, and player information. 
+- CSS Stylesheets that are dynamically implemented into Javascript Components.
+- State manipulation and 'locking' of user input when it's not their turn (as well as 'unlocking' on the correct turn).
+- Codename's base logic ruleset.
+- Elements of the game which are meant to be hidden from players cannot be seen or accessed via the browser directly 
+(thus preventing cheating by inspecting the page's HTML).
+
+This project was a very collaborative effort, as multiple members did multiple tasks.
+- Creation and Manipulation of React.js framework: Andrew, Tim.
+- CSS Styling, images, and additional help menu: Andrew
+- Creation of Socket Communication: Daniel, Tim.
+- Creation of Backend Node.js and Socket.io setup: Daniel.
+- Refactoring and State Manipulation (as well as hiding game elements from browser's DOM lookup): Tim.

app/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

app/README.md

@@ -0,0 +1,68 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `npm run build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify