fp-nbloniarz-Natalie-Bloniarz-Anagha-Late

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,7 @@
+{
+  "ExpandedNodes": [
+    ""
+  ],
+  "SelectedNode": "\\game.js",
+  "PreviewInSolutionExplorer": false
+}

README.md

@@ -1,51 +1,22 @@
 # 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.
-(Staff will use the proposal to build the grading sheet.)
-
-## Final Presentation
-
-Presentations will occur during the final day of class.
-
-## 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.
+https://a6-final-project.glitch.me
+
+## Perlenspiel Garageband
+### Description
+It is a simple music recording website that allows users to record 5 second clips, and play them back. The current version allows for 4 seperate tracks for each instrument for a total of 8 tracks.
+Users that login/signup are able to save their songs for others to playback or remix.
+### Instructions
+The website is fully functional without having to log in, but if you want to save songs please log in (username, password) or signup.
+### Technology
+ - This page is heavily based the Perlenspiel game engine written by Professor Brian Moriarity [https://perlenspiel.net/] and uses the engine for its main functionalities.
+ - The database used for this assignment was Google Firebase
+ - The user authentication uses passport to validate credentials. The strategy used was a local strategy to avoid needing to query external credentials.
+### Challenges
+ - The Perlenspiel engine can cause regular html elements (for example select boxes) to stop responding, and that caused some major problems when trying to figure out how to let the user naviagte through the saved songs.
+ - We initally planned to use MongoDB, but for some reason the database was not loading properly so we switched to Firebase.
+### Authorship
+- Perlenspiel: Natalie
+- Server: Anagha
+- Design/Functionality: Natalie
+- Passport: Anagha
+- Database: Anagha & Natalie

Temp.css

@@ -0,0 +1,42 @@
+footer {
+    z-index: 1000;
+  position: fixed;
+  overflow: visible;
+  bottom: 0;
+  width: 100%;
+  justify-content: center;
+    flex-wrap: wrap;
+    text-align: center;
+}
+.DATABASE_BUTTONS {
+    flex-basis: 100%;
+}
+
+select{
+  overflow: visible;
+}
+
+option{
+  z-index: 100;  
+}
+
+#login {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+  flex-direction: column;
+}
+
+
+[type="text"],
+textarea {
+  width: 50%;
+  padding: 12px;
+  margin-top: 10px;
+  border-radius: 20px;
+  resize: vertical;
+  font-size: 18px;
+  font-size: 1.75vw;
+}

game.html

@@ -0,0 +1,112 @@
+<!--
+game.html for Perlenspiel 3.3.x
+Last revision: 2018-10-14 (BM)
+
+Perlenspiel is a scheme by Professor Moriarty (bmoriarty@wpi.edu).
+This version of Perlenspiel (3.3.x) is hosted at <https://ps3.perlenspiel.net>
+Perlenspiel is Copyright © 2009-19 Worcester Polytechnic Institute.
+This file is part of the standard Perlenspiel 3.3.x devkit distribution.
+
+Perlenspiel is free software: you can redistribute it and/or modify
+it under the terms of the GNU Lesser General Public License as published
+by the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Perlenspiel is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Lesser General Public License for more details.
+
+You may have received a copy of the GNU Lesser General Public License
+along with the Perlenspiel devkit. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Perlenspiel 3.3</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
+    <meta name="description" content="Perlenspiel 3.3" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <script src="https://www.gstatic.com/firebasejs/7.1.0/firebase-app.js"></script>
+<script
+        type="text/javascript"
+        src="js/scripts.js"></script>
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      sizes="any"
+      href="https://perlenspiel.net/ps3/engine/images/pslogo.svg"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://perlenspiel.net/ps3/engine/ps3.3.css"
+    />
+    <script
+      type="text/javascript"
+      src="https://perlenspiel.net/ps3/engine/ps3.3x.js"
+    ></script>
+    <link rel="stylesheet" type="text/css" href="Temp.css" />
+  </head>
+  <body onload="PS._sys( 0xFFFFFF, 0x000000, 'Touch image to begin' );">
+    <!--
+	The following OPTIONAL mods to this file are permitted:
+
+	The three arguments to the PS._sys() call in the <body> tag above control the appearance of the cover page
+	displayed before your application begins. The values supplied are the engine defaults.
+
+	The first argument specifies the cover page background color.
+	It should be a hexadecimal RGB triplet in the range 0x000000 to 0xFFFFFF inclusive.
+	Values outside this range are clamped. Default = 0xFFFFFF (pure white).
+
+	The second argument specifies the status line text color.
+	It should also be a hexadecimal RGB triplet in the range 0x000000 to 0xFFFFFF inclusive.
+	Values outside this range are clamped. Default = 0x000000 (pure black).
+
+	The third argument specifies the text initially displayed in the status line above the grid.
+	It should be specified as a BRIEF (< 24 characters) string, which must be enclosed in SINGLE quotes.
+	To suppress the status line text, specify an empty string: '' (an unspaced pair of SINGLE quotes).
+	Default = 'Touch image to begin'.
+
+	By default, the engine attempts to load a 24-bit RGB image file named "cover.png" located in the same directory as this .html file.
+	This image is displayed underneath the status line. Clicking or touching the image will start the application.
+	You can freely edit the appearance of the "cover.png" image file to suit your needs.
+	However, the original filename, location and dimensions (512 x 512 pixels) of the "cover.png" file must NOT be altered.
+	If no "cover.png" file is present in the same directory as this .html file when the engine is initialized,
+	or if that file fails to load for any reason, a tasteful image of the Perlenspiel logo will be displayed instead.
+
+	By default, the engine attempts to load a JavaScript file named "game.js" located in the same directory as this .html file.
+	That file is expected to respond to the event handlers documented in the game.js template file provided in the Perlenspiel devkit.
+	You can change the "game.js" file specifier in the <script> element below to specify a different .js file.
+	The file specifier may be expressed relative to the directory containing this .html file, or may be fully qualified.
+	You can also add additional <script> elements if needed. The specified .js files will be loaded in the order given.
+
+	IMPORTANT!
+
+	Altering this .html file, or its accompanying .png and .js files, IN ANY WAY other than the methods explicitly described
+	in the above comments can result in unpredictable engine behavior and/or breakage, and is a grievous violation of The Rules.
+	-->
+
+    <script type="text/javascript" src="game.js"></script>
+
+    <footer>
+      <section class="DATABASE_BUTTONS">
+        <!--POPULATE BASED ON DATABASE SHOW TRACKNAME VALUE = trackArray -->
+        <button onclick="loadTrack()">LOAD TRACK</button>
+        <button onclick="saveTrack()">SAVE TRACK</button>
+        <button onclick="logOut()">LOG OUT</button>        
+      </section>
+    </footer>
+
+    <script>
+      loadSongs()
+        </script>
+  </body>
+</html>