a2-XBC30EP450-Javier-Marcos

.config/configstore/update-notifier-pnpm.json

@@ -0,0 +1,4 @@
+{
+	"optOut": false,
+	"lastUpdateCheck": 1567913417343
+}

.config/glitch-package-manager

@@ -0,0 +1 @@
+pnpm

README.md

@@ -1,89 +1,24 @@
-Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js  
-===
+Mastermind
 
-Due: September 9th, by 11:59 AM.
+An HTML implementation of the board of the same name.
+The player must guess the correct combination of colored balls in order to win.
+Each time the player guesses, the server will respond by telling the player how many balls are of the
+right color and the right position, as well how many are of the right color but in the wrong position.
+This information then allows the player to make increasingly educated guesses until the answer is found.
 
-This assignment aims to introduce you to the concepts and practice involved in creating a prototype (i.e. not deployment ready) two-tiered web application. 
+Although the webpage deosn't seem to do anything in response, they can actually be found in the incoming packets.
+On Chrome, these can be found in the developer tools, on the 'Network' tab.
 
-The baseline aims of this assignment involve creating an application that demonstrates the use of several specific pieces of HTML, CSS, JavaScript, and Node.js functionality.
-Another aim of this assignment is to establish creative boundaries in which you and your partner can explore designing, implementing, and evaluating usable, useful, novel, and technically efficient web applications.
+On winning the game, the server will respond by dumping the data stored in the server, including the player's name,
+the number of moves in which they won, and the medal awarded to their score.
 
-Baseline Requirements
----
+Every time the page is entered, a new board will be generated. This allows the player to start a new game by refreshing the page,
+but also means only one person can play at any given time.
 
-Note that there is a very large range of application areas and possibilities that meet these baseline requirements.
-Games, internet of things, organizational tools, commerce, media - all are possibilities with a two-tiered form-focused web application.
-
-Do not limit yourselves to any of the examples given below. 
-Examples like the upcoming `efficiency_ratio` idea for the `cars` dataset are meant to be illustrative and easy to understand.
-They are not intended to be sensible or useful ideas.
-
-Your application is required to implement the following functionalities:
-
-- a `Server` which not only serves files, but also maintains a tabular dataset with 3 or more fields related to your application
-- a `Results` functionality which shows the entire dataset residing in the server's memory
-- a `Form/Entry` functionality which allows a user to add, modify, or delete data items residing in the server's memory
-- a `Server Logic` which, upon receiving new or modified "incoming" data, includes and uses a function that adds at least one additional derived field to this incoming data before integrating it with the existing dataset
-    - the `Derived field` for a new row of data must be computed based on fields already existing in the row. For example, a `cars` dataset with `year`, `horsepower`, and `fuel_efficiency` may create a new field `efficiency_ratio` by dividing `fuel_efficiency` by `horsepower`
-
-Your application is required to demonstrate the use of the following concepts:
-
-HTML:
-- One or more [HTML Forms](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), with any combination of form tags appropriate for the user input portion of the application
-    - Clarification: the results page can be implemented in any way. `<div>`s, `table`s, and `list`s are common choices
-
-CSS:
-- CSS styling of the primary visual elements in the application
-- Various CSS Selector functionality must be demonstrated:
-    - Element selectors
-    - ID selectors
-    - Class selectors
-- CSS positioning and sizing of the primary visual elements in the application:
-    - CSS to cause at least one element to be horizontally centered on the page
-    - CSS to cause at least one pair of elements to appear side-by-side
-    - CSS defined in a maintainable, readable form, in external stylesheets 
-
-JavaScript:
-- At minimum, a small amount of front-end JavaScript to get / fetch data from the server; a sample is provided in this repository.
-
-Node.js:
-- An HTTP Server that delivers all necessary files and data for the application. A starting point is provided in this repository.
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Fork the starting project code. This repo contains some starter code that may be used or discarded as needed.
-2. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page, it displays correctly.
-4. Deploy your project to Glitch, and fill in the appropriate fields in your package.json file.
-5. Ensure that your project has the proper naming scheme `a2-yourname` so we can find it.
-6. Modify the Readme to the specifications below.
-7. Create and submit a Pull Request to the original repo. Label the pull request as follows: a2-gitusername-firstname-lastname
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-## Your Web Application Title
-Include a very brief summary of your project here.
-Images are encouraged, along with concise, high-level text.
-
-Here is a sample formula for summarizing your activities, talk about:
-- the domain area the project pertains to
-- the main challenges or problems the application addresses
-- the key innovations that make it possible to address the problem
-- the main results of the implementation, does it really address the problem?
-- any additional implications of the resulting application, or possibly areas for future work that have been discovered as part of the design and implementation activities
-
-(Note that when I use the above formula, I aim to have only one sentence per thought in order to remain concise.)
-
-http://a2-charlieroberts.glitch.me
+Glitch App: https://a2-javiermarcos.glitch.me
 
 ## Technical Achievements
-- **Tech Achievement 1**: Using a combination of...
-- **Tech Achievement 2**: ...
+- **Tech Achievement 1**: Made a back and forth between server and client and having the server react to the provided information
 
 ### Design/Evaluation Achievements
-- **Design Achievement 1**: Shown in `style.css`, the code...
-- **Design Achievement 2**: We tested the application with n=X users, finding that...
+- **Design Achievement 1**: Introduced a few new fonts and some minor styling of the page.

public/css/style.css

@@ -1 +1,23 @@
-/*Style your own assignment! This is fun! */
+@import url('https://fonts.googleapis.com/css?family=Noto+Serif|Righteous&display=swap');
+
+body {
+  font-family: 'Noto Serif', serif;
+  background-color: #DBE0C5;
+}
+
+h1 {
+  font-family: 'Righteous', cursive;
+  font-size: 68px;
+  text-align: center;
+}
+
+h2 {
+  font-family: 'Righteous', cursive;
+}
+
+#instructions {
+  font-size: 16px;
+}
+
+#guess {
+}

public/index.html

@@ -3,39 +3,117 @@
   <head>
     <title>CS4241 Assignment 2</title>
     <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
   <body>
-    <form action="">
-      <input type='text' id='yourname' value="your name here">
-      <button>submit</button>
-    </form>
+    <h1>Mastermind</h1>
+    <div id="instructions">
+      There is a secret code, made up of a random combination of 4 balls with 6 possible colors each.<br>
+      You must try to find the correct combination with as few guesses as you can.<br>
+      Each time you guess you will be told how many of the balls in your proposed soultion are:
+      <ul>
+        <li>Of the <b>correct color</b> and in the <b>correct position</b>.</li>
+        or...
+        <li>Of the <b>correct color</b> but in the <b>wrong position</b>.</li>
+      </ul>
+      Think carefully! If you fail to crack the code by your 15th guess, you lose!
+    </div>
+    <div id="pName">
+      <h2>Name:</h2>  
+      <input id="pname" type="text" value="Clippy">
+    </div>
+    <div id="guess">
+        <form>
+          <h2>Take a guess!</h2>
+          First Ball
+          <select id="firstball" action="">
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="yellow">Yellow</option>
+            <option value="green">Green</option>
+            <option value="purple">Purple</option>
+            <option value="orange">Orange</option>
+          </select>
+          <br>
+
+          Second Ball
+          <select id="secondball" action="">
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="yellow">Yellow</option>
+            <option value="green">Green</option>
+            <option value="purple">Purple</option>
+            <option value="orange">Orange</option>
+          </select>
+          <br>
+
+          Third Ball
+          <select id="thirdball" action="">
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="yellow">Yellow</option>
+            <option value="green">Green</option>
+            <option value="purple">Purple</option>
+            <option value="orange">Orange</option>
+          </select>
+          <br>
+
+          Fourth Ball
+          <select id="fourthball" action="">
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+            <option value="yellow">Yellow</option>
+            <option value="green">Green</option>
+            <option value="purple">Purple</option>
+            <option value="orange">Orange</option>
+          </select>
+          <br>
+
+          <button>Check answer</button>
+        </form>
+    </div>
   </body>
+
   <script>
+    var guessCount
+
+    const submit = function( e ) {
+
+      guessCount++
+      const firstBall = document.querySelector( '#firstball' ),
+            secondBall = document.querySelector( '#secondball'),
+            thirdBall = document.querySelector( '#thirdball'),
+            fourthBall = document.querySelector( '#fourthball' ),
+            playerName = document.querySelector( '#pname' ).value
+
+      json = { firstball: firstBall.value,
+              secondball: secondBall.value, 
+             thirdball: thirdBall.value,
+             fourthball: fourthBall.value,
+             guesscount: guessCount,
+             playername: playerName}
+
+      body = JSON.stringify( json )
+      console.log(json)
+      console.log(body)
+
+      fetch( '/submit', {
+        method:'POST',
+        body 
+      })
+      .then( function( response ) {
+        // do something with the reponse 
+        console.log( response )
+      })
+
+      return false
+    }
 
-  const submit = function( e ) {
-    // prevent default form action from being carried out
-    e.preventDefault()
-
-    const input = document.querySelector( '#yourname' ),
-          json = { yourname: input.value },
-          body = JSON.stringify( json )
-
-    fetch( '/submit', {
-      method:'POST',
-      body 
-    })
-    .then( function( response ) {
-      // do something with the reponse 
-      console.log( response )
-    })
-
-    return false
-  }
-
-  window.onload = function() {
-    const button = document.querySelector( 'button' )
-    button.onclick = submit
-  }
+    window.onload = function() {
+      guessCount = 0
+      const button = document.querySelector( 'button' )
+      button.onclick = submit
+    }
 
   </script>
 </html>