From dbcd5caef661506d127aaa56540ed2dea50a3e06 Mon Sep 17 00:00:00 2001 From: athammana Date: Mon, 14 Sep 2020 01:43:35 -0400 Subject: [PATCH 01/11] Almost working game, must fix underlines and score system --- public/css/style.css | 62 ++++++++++++++++++++++++++++- public/index.html | 52 ++++++++++--------------- public/js/scripts.js | 64 +++++++++++++++++++++++++++++- server.improved.js | 92 +++++++++++++++++++++++++------------------- 4 files changed, 196 insertions(+), 74 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index d5f842ab..fffa8164 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -1 +1,61 @@ -/*Style your own assignment! This is fun! */ \ No newline at end of file +/*Style your own assignment! This is fun! */ + +body { + font-family: 'Roboto', sans-serif; + font-size: 3ch; +} + +.container { + display: flex; +} + +#left-block { + float: left; + height: 100vh; + width: 20vw; + justify-content: center; + align-items: center; +} + +#center-block { + flex-flow: wrap column; + justify-content: center; + align-items: center; + height: 100vh; +} + +#scores {} + +#scrambled { + text-align: center; +} + +#scrambledWord { + font-size: 4ch; +} + + +#answer { + display: block; + margin: 2em auto; + border: none; + padding: 0; + width: 10.5ch; + /*background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100% / 10ch 2px no-repeat;*/ + letter-spacing: 0.5ch; + font: 5ch monospace; +} + +.incorrect { + color: red; +} + +.incorrect: focus { + color: red; +} + +#answer:focus { + outline: none; + color: plum; +} + diff --git a/public/index.html b/public/index.html index c56d620e..d550286b 100755 --- a/public/index.html +++ b/public/index.html @@ -3,39 +3,27 @@ CS4241 Assignment 2 + + + -
- - -
+
+
+ Current: 60
+ High: 69 +
+
+
+
+

Unscramble the Words!

+
+
+
+
+ +
+
+
- diff --git a/public/js/scripts.js b/public/js/scripts.js index de052eae..65b8256a 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,3 +1,63 @@ -// Add some Javascript code here, to run on the front end. + const start = () => { + newScrambled(); + let inp = document.querySelector('#answer'); + inp.addEventListener('keyup', (e) => { + event.preventDefault(); + if (e.code === 'Enter') { + guessWord(inp.value); + } + }); + }; -console.log("Welcome to assignment 2!") \ No newline at end of file + const changeInputUnderlines = () => { + let length = document.querySelector('#scrambledWord').innerText.length, + input = document.querySelector('#answer'), + charWidth = 1, + gap = 0.5 * charWidth, + totalWidth = length * (charWidth + gap); + input.maxLength = length; + input.style.width = totalWidth; + input.style.letterSpacing = `${gap}ch`; + console.log(totalWidth, length, document.querySelector('#scrambledWord').innerHTML); + input.style.background = `repeating-linear-gradient(to right, black 0, black ${charWidth}ch, transparent 0, transparent ${charWidth + gap}ch) 0 100% / ${totalWidth - gap}ch 2px no-repeat`; + // input.style.background = `repeating-linear-gradient(90deg, dimgrey 0, dimgrey ${charWidth}ch, transparent 0, transparent ${charWidth}ch + ${gap}ch) 0 100%/ ${totalWidth}ch - ${gap}ch 2px no-repeat;`; + // input.style.background = + console.log('l', input.style.background, $('#answer').css('color', 'green')); + } + + const newScrambled = () => { + fetch('/currentWord', { + method: 'GET' + }).then((res) => { + res.text().then((newWord) => { + document.querySelector('#scrambledWord').innerHTML = newWord; + changeInputUnderlines(); + }); + }); + }; + + const guessWord = (guess) => { + data = JSON.stringify({'guess': guess}); + fetch('/guess', { + method: 'POST', + body: data + }).then((res) => { + res.text().then((correct) => { // is either true or false to see if that was the correct word + if (correct === 'false') { + document.querySelector('#scrambledWord').classList.add('incorrect'); + console.log(document.querySelector('#scrambledWord').classList); + setTimeout(() => document.querySelector('#scrambledWord').classList.remove('incorrect'), 2500) + } else { + let score = document.querySelector('#currScore'); + score.innerHTML = parseInt(score.innerHTML) + 1; + document.querySelector('#answer').value = ''; + newScrambled(); + } + }); + }); + }; + + + window.onload = function() { + start(); + }; \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 26673fc0..5975e1cf 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,72 +1,86 @@ const http = require( 'http' ), fs = require( 'fs' ), - // IMPORTANT: you must run `npm install` in the directory for this assignment - // to install the mime library used in the following line of code mime = require( 'mime' ), dir = 'public/', - port = 3000 - -const appdata = [ - { 'model': 'toyota', 'year': 1999, 'mpg': 23 }, - { 'model': 'honda', 'year': 2004, 'mpg': 30 }, - { 'model': 'ford', 'year': 1987, 'mpg': 14} -] - -const server = http.createServer( function( request,response ) { - if( request.method === 'GET' ) { - handleGet( request, response ) - }else if( request.method === 'POST' ){ - handlePost( request, response ) + port = 3000; + +const randomwords = ['size','pipe','show','toy','zipper','throne','baby','seat','river','ocean','spade', +'pump','cakes','skate','cat','vegetable','nut','furniture','tendency','car','sleet','truck','basket','writer', +'fish','rock','ants','border','experience','kitty','flesh','servant','hydrant','planes','week','office', +'dog','art','yak','distance','stocking','snails','playground','knot','curtain','wrench','daughter','seashore', +'side','channel','cow','surprise','team','partner','paper','leg','arch','produce','bell','language','hope', +'women','angle','cream','jar','respect','pigs','loaf','fly','time','uncle','move','earth','pies','flame', +'door','place','wing','fact','cherries','need','knee','ground','key','farm','direction','crayon','authority', +'idea','cake','winter','copper','son','cactus','caption','road','slope','trouble','finger','comparison']; + +let scores = [], + currentWord = ''; + +const server = http.createServer(function( request,response ) { + if (request.method === 'GET') { + handleGet(request, response); + } else if (request.method === 'POST'){ + handlePost(request, response); } }) -const handleGet = function( request, response ) { - const filename = dir + request.url.slice( 1 ) +const handleGet = function(request, response) { + const filename = dir + request.url.slice(1); - if( request.url === '/' ) { - sendFile( response, 'public/index.html' ) - }else{ - sendFile( response, filename ) + if (request.url === '/') { + sendFile(response, 'public/index.html') + } else if (request.url === '/currentWord'){ + + currentWord = randomwords[Math.floor(Math.random() * randomwords.length)]; + + response.writeHead(200, {'Content-Type': 'text/plain' }); + response.end(currentWord); + + } else { + sendFile(response, filename); } } const handlePost = function( request, response ) { - let dataString = '' + let dataString = ''; request.on( 'data', function( data ) { - dataString += data + dataString += data; }) - request.on( 'end', function() { - console.log( JSON.parse( dataString ) ) + if (request.url === '/guess'){ + request.on( 'end', function() { + let guess = JSON.parse(dataString).guess; - // ... do something with the data here!!! - - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }) - response.end() - }) + response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }); + response.end((guess === currentWord).toString()); // sends the boolean in string format + }) + } else { + response.writeHead(200); + response.end(); + } } -const sendFile = function( response, filename ) { - const type = mime.getType( filename ) +const sendFile = function(response, filename) { + const type = mime.getType(filename); - fs.readFile( filename, function( err, content ) { + fs.readFile(filename, function(err, content) { // if the error = null, then we've loaded the file successfully - if( err === null ) { + if (err === null) { // status code: https://httpstatuses.com - response.writeHeader( 200, { 'Content-Type': type }) - response.end( content ) + response.writeHeader(200, {'Content-Type': type}); + response.end(content); - }else{ + } else { // file not found, error code 404 - response.writeHeader( 404 ) + response.writeHeader(404) response.end( '404 Error: File Not Found' ) } }) } -server.listen( process.env.PORT || port ) +server.listen(process.env.PORT || port, () => console.log('Listening on Port:', port)); From c0e338be1664446b98bc7f6298b238245c8b7ba1 Mon Sep 17 00:00:00 2001 From: athammana Date: Mon, 14 Sep 2020 17:25:36 -0400 Subject: [PATCH 02/11] Everything thing works, just fit and finish features --- public/css/style.css | 35 ++++++++-------- public/index.html | 19 ++++++--- public/js/scripts.js | 95 ++++++++++++++++++++++++++++++++++++++------ server.improved.js | 70 +++++++++++++++++++++++++++----- 4 files changed, 173 insertions(+), 46 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index fffa8164..6a6498b5 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -3,26 +3,24 @@ body { font-family: 'Roboto', sans-serif; font-size: 3ch; + text-align: center; } .container { display: flex; + flex-flow: wrap column; + justify-content: center; + align-items: center; + height: 100vh; } #left-block { float: left; - height: 100vh; width: 20vw; - justify-content: center; - align-items: center; + justify-content: flex-start; } -#center-block { - flex-flow: wrap column; - justify-content: center; - align-items: center; - height: 100vh; -} +#center-block {} #scores {} @@ -34,14 +32,17 @@ body { font-size: 4ch; } +.block { + display: block; +} -#answer { +.underlines { display: block; margin: 2em auto; border: none; padding: 0; - width: 10.5ch; - /*background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100% / 10ch 2px no-repeat;*/ + width: 4.5ch; + background: repeating-linear-gradient(to right, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100% / 4ch 2px no-repeat; letter-spacing: 0.5ch; font: 5ch monospace; } @@ -50,12 +51,12 @@ body { color: red; } -.incorrect: focus { - color: red; -} - -#answer:focus { +.underlines:focus { outline: none; color: plum; } +.scoreNick { + margin-top: 1em; + font: 3ch monospace; +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index d550286b..563e7b3e 100755 --- a/public/index.html +++ b/public/index.html @@ -9,9 +9,18 @@
-
- Current: 60
- High: 69 +
+

Leaderboard name:

+ +
+
+ Current: 0
+
Previous Scores
+
+
+
+ +
@@ -20,8 +29,8 @@

Unscramble the Words!

-
- + +
diff --git a/public/js/scripts.js b/public/js/scripts.js index 65b8256a..acf0ffd7 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,31 +1,86 @@ - const start = () => { + const start = () => { // runs a lot of the functions necessary for the first time (scrambled word, enter in the input) newScrambled(); + updateScores(); + updateCurrentScore(); let inp = document.querySelector('#answer'); + inp.addEventListener('keyup', (e) => { event.preventDefault(); + if (e.code === 'Enter') { guessWord(inp.value); } }); }; - const changeInputUnderlines = () => { + + const updateCurrentScore = () => { + fetch('/getCurrScore', { + method: 'GET' + }).then((res) => { + res.text().then(score => { + document.querySelector('#currScore').innerHTML = score; + }); + }) + }; + + + const updateScores = () => { + fetch('/getScores', { + method: 'GET' + }).then((res) => { + res.text().then((scores) => { + let insertDiv = document.querySelector('#serverscores'); + + scores = JSON.parse(scores); + scores = scores.sort((a, b) => parseInt(b.score) - parseInt(a.score)); + insertDiv.innerHTML = ''; + + scores.forEach((score, i) => { + if (i < 5){ + let ele = document.createElement('div'); + + ele.innerHTML = `${score.name}: ${score.score}`; + insertDiv.appendChild(ele); + } + }); + }); + }); + }; + + + const endGame = () => { // ends the game and sends score to the server + let name = document.querySelector('#boardName').value; + let date = new Date(); + let scorejson = JSON.stringify({"date": date, "name": name, "score": 0}); + + fetch('/newScore', { + method: 'POST', + body: scorejson + }).then((res) => { + updateScores(); + newScrambled(); + updateCurrentScore(); + }); + }; + + + const changeInputUnderlines = () => { // Change all the css styling needed for the dynamic character underlines let length = document.querySelector('#scrambledWord').innerText.length, input = document.querySelector('#answer'), charWidth = 1, gap = 0.5 * charWidth, totalWidth = length * (charWidth + gap); + input.maxLength = length; - input.style.width = totalWidth; + input.style.width = `${totalWidth}ch`; input.style.letterSpacing = `${gap}ch`; - console.log(totalWidth, length, document.querySelector('#scrambledWord').innerHTML); input.style.background = `repeating-linear-gradient(to right, black 0, black ${charWidth}ch, transparent 0, transparent ${charWidth + gap}ch) 0 100% / ${totalWidth - gap}ch 2px no-repeat`; - // input.style.background = `repeating-linear-gradient(90deg, dimgrey 0, dimgrey ${charWidth}ch, transparent 0, transparent ${charWidth}ch + ${gap}ch) 0 100%/ ${totalWidth}ch - ${gap}ch 2px no-repeat;`; - // input.style.background = - console.log('l', input.style.background, $('#answer').css('color', 'green')); - } + }; - const newScrambled = () => { + + const newScrambled = () => { // Changes the scrambled word to a new one from the server + document.querySelector('#scrambledWord').innerHTML = 'Loading...'; fetch('/currentWord', { method: 'GET' }).then((res) => { @@ -36,7 +91,8 @@ }); }; - const guessWord = (guess) => { + + const guessWord = (guess) => { // takes in a value and sends it to the server to see if its correct data = JSON.stringify({'guess': guess}); fetch('/guess', { method: 'POST', @@ -44,13 +100,14 @@ }).then((res) => { res.text().then((correct) => { // is either true or false to see if that was the correct word if (correct === 'false') { + document.querySelector('#scrambledWord').classList.add('incorrect'); console.log(document.querySelector('#scrambledWord').classList); setTimeout(() => document.querySelector('#scrambledWord').classList.remove('incorrect'), 2500) } else { - let score = document.querySelector('#currScore'); - score.innerHTML = parseInt(score.innerHTML) + 1; document.querySelector('#answer').value = ''; + document.querySelector('#scrambledWord').classList.remove('incorrect') + updateCurrentScore(); newScrambled(); } }); @@ -58,6 +115,18 @@ }; - window.onload = function() { + const answerkey = () => { // prints the answer key + let randomwords = ['size','pipe','show','toy','zipper','throne','baby','seat','river','ocean','spade', + 'pump','cakes','skate','cat','vegetable','nut','furniture','tendency','car','sleet','truck','basket','writer', + 'fish','rock','ants','border','experience','kitty','flesh','servant','hydrant','planes','week','office', + 'dog','art','yak','distance','stocking','snails','playground','knot','curtain','wrench','daughter','seashore', + 'side','channel','cow','surprise','team','partner','paper','leg','arch','produce','bell','language','hope', + 'women','angle','cream','jar','respect','pigs','loaf','fly','time','uncle','move','earth','pies','flame', + 'door','place','wing','fact','cherries','need','knee','ground','key','farm','direction','crayon','authority', + 'idea','cake','winter','copper','son','cactus','caption','road','slope','trouble','finger','comparison']; + console.log(randomwords); + } + + window.onload = function() { // just runs start when page opens start(); }; \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 5975e1cf..b2a8165d 100644 --- a/server.improved.js +++ b/server.improved.js @@ -4,6 +4,10 @@ const http = require( 'http' ), dir = 'public/', port = 3000; +/* + * Game Logic Code Here + */ + const randomwords = ['size','pipe','show','toy','zipper','throne','baby','seat','river','ocean','spade', 'pump','cakes','skate','cat','vegetable','nut','furniture','tendency','car','sleet','truck','basket','writer', 'fish','rock','ants','border','experience','kitty','flesh','servant','hydrant','planes','week','office', @@ -13,53 +17,97 @@ const randomwords = ['size','pipe','show','toy','zipper','throne','baby','seat', 'door','place','wing','fact','cherries','need','knee','ground','key','farm','direction','crayon','authority', 'idea','cake','winter','copper','son','cactus','caption','road','slope','trouble','finger','comparison']; -let scores = [], +let scores = [{date: "2020-09-14T19:09:02.410Z", name: "mom", score: 250}, // filler scores + {date: "2020-09-14T19:09:45.849Z", name: "dad", score: 2}, + {date: "2020-09-14T19:09:52.299Z", name: "lov", score: 4}, + {date: "2020-09-14T19:09:55.471Z", name: "xxx", score: 420}], + currentScore = 0, currentWord = ''; + +const scramble = (word) => { + scrambled = word.split(''); + for (let i = scrambled.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * i) + const temp = scrambled[i] + scrambled[i] = scrambled[j] + scrambled[j] = temp + } + return scrambled.join(''); +}; + + + +/* + * Server Code Below Here + */ + const server = http.createServer(function( request,response ) { if (request.method === 'GET') { handleGet(request, response); } else if (request.method === 'POST'){ handlePost(request, response); } -}) +}); const handleGet = function(request, response) { const filename = dir + request.url.slice(1); if (request.url === '/') { - sendFile(response, 'public/index.html') - } else if (request.url === '/currentWord'){ + sendFile(response, 'public/index.html'); + } else if (request.url === '/currentWord') { currentWord = randomwords[Math.floor(Math.random() * randomwords.length)]; response.writeHead(200, {'Content-Type': 'text/plain' }); - response.end(currentWord); + response.end((currentWord)); + + } else if (request.url === '/getCurrScore') { + response.writeHead(200, {'Content-Type': 'text/plain'}); + response.end(currentScore.toString()); + + } else if (request.url === '/getScores') { + response.writeHead(200, {'Content-Type': 'text/plain'}); + response.end(JSON.stringify(scores)); } else { sendFile(response, filename); } -} +}; -const handlePost = function( request, response ) { +const handlePost = function(request, response) { let dataString = ''; - request.on( 'data', function( data ) { + request.on('data', function(data) { dataString += data; }) if (request.url === '/guess'){ request.on( 'end', function() { let guess = JSON.parse(dataString).guess; + currentScore = guess === currentWord ? currentScore + 1 : currentScore; response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }); response.end((guess === currentWord).toString()); // sends the boolean in string format - }) + }); + + } else if(request.url === '/newScore'){ + request.on('end', () => { + let scoreJSON = JSON.parse(dataString); + scoreJSON.score = currentScore; + scores.push(scoreJSON); + currentScore = 0; + + response.writeHead(200); + response.end(); + }); + } else { response.writeHead(200); response.end(); + } -} +}; const sendFile = function(response, filename) { const type = mime.getType(filename); @@ -81,6 +129,6 @@ const sendFile = function(response, filename) { } }) -} +}; server.listen(process.env.PORT || port, () => console.log('Listening on Port:', port)); From f4d8df43e4648331e82bddd2ad1f27b400f9838e Mon Sep 17 00:00:00 2001 From: athammana Date: Mon, 14 Sep 2020 18:48:53 -0400 Subject: [PATCH 03/11] Everything is working, fextra features added, just need to do final tests --- public/css/style.css | 122 ++++++++++++++++++++++++++++++++++++++++++- public/index.html | 9 ++-- public/js/scripts.js | 50 ++++++++++++------ server.improved.js | 24 ++++++--- 4 files changed, 177 insertions(+), 28 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 6a6498b5..49f2e68b 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -4,6 +4,21 @@ body { font-family: 'Roboto', sans-serif; font-size: 3ch; text-align: center; + +/* // Background + background-position: + top 0px left 0px, + top 10px right 10px, + bottom 10px right 10px, + bottom 10px left 10px;*/ + + background-size: 100vw; + + background-image: + url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFD6E8' d='M50.4,-52.4C62.9,-37.9,69.1,-18.9,67.8,-1.2C66.6,16.5,58,32.9,45.5,46.9C32.9,60.9,16.5,72.5,-1.5,74C-19.6,75.6,-39.1,67.1,-52.4,53.1C-65.7,39.1,-72.7,19.6,-70.2,2.6C-67.6,-14.5,-55.5,-28.9,-42.2,-43.4C-28.9,-57.9,-14.5,-72.5,2.2,-74.7C18.9,-77,37.9,-66.9,50.4,-52.4Z' transform='translate(350 90)' /%3E%3C/svg%3E"), + url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23D0E2FF' d='M50.4,-52.4C62.9,-37.9,69.1,-18.9,67.8,-1.2C66.6,16.5,58,32.9,45.5,46.9C32.9,60.9,16.5,72.5,-1.5,74C-19.6,75.6,-39.1,67.1,-52.4,53.1C-65.7,39.1,-72.7,19.6,-70.2,2.6C-67.6,-14.5,-55.5,-28.9,-42.2,-43.4C-28.9,-57.9,-14.5,-72.5,2.2,-74.7C18.9,-77,37.9,-66.9,50.4,-52.4Z' transform='translate(195 0)' /%3E%3C/svg%3E"), + url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E8DAFF' d='M50.4,-52.4C62.9,-37.9,69.1,-18.9,67.8,-1.2C66.6,16.5,58,32.9,45.5,46.9C32.9,60.9,16.5,72.5,-1.5,74C-19.6,75.6,-39.1,67.1,-52.4,53.1C-65.7,39.1,-72.7,19.6,-70.2,2.6C-67.6,-14.5,-55.5,-28.9,-42.2,-43.4C-28.9,-57.9,-14.5,-72.5,2.2,-74.7C18.9,-77,37.9,-66.9,50.4,-52.4Z' transform='translate(150 200)' /%3E%3C/svg%3E"), + url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239EF0F0' d='M68.5,-21C76.5,2.3,62.2,34.1,39.7,49.2C17.1,64.3,-13.6,62.7,-32.3,48.3C-50.9,33.8,-57.5,6.5,-50.1,-16C-42.7,-38.5,-21.3,-56.3,4.5,-57.7C30.3,-59.2,60.5,-44.3,68.5,-21Z' transform='translate(30 30)' /%3E%3C/svg%3E"); } .container { @@ -14,6 +29,7 @@ body { height: 100vh; } + #left-block { float: left; width: 20vw; @@ -36,7 +52,8 @@ body { display: block; } -.underlines { +/* To get each character to be underlined, I borrowed the background line from https://codepen.io/thebabydino/pen/mRrPwB */ +.underlines { display: block; margin: 2em auto; border: none; @@ -59,4 +76,107 @@ body { .scoreNick { margin-top: 1em; font: 3ch monospace; +} + +.butt { + position: relative; + display: inline-block; + box-sizing: border-box; + border: none; + border-radius: 4px; + margin: 10px; + padding: 0 16px; + min-width: 64px; + height: 36px; + vertical-align: middle; + text-align: center; + text-overflow: ellipsis; + text-transform: uppercase; + /*color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));*/ + background-color: #F2F4F8; + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system); + line-height: 36px; + overflow: hidden; + outline: none; + cursor: pointer; + transition: box-shadow 0.2s; +} + +.butt::-moz-focus-inner { + border: none; +} + +/* Overlay */ +.butt::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255)); + opacity: 0; + transition: opacity 0.2s; +} + +/* Ripple */ +.butt::after { + content: ""; + position: absolute; + left: 50%; + top: 50%; + border-radius: 50%; + padding: 50%; + width: 32px; /* Safari */ + height: 32px; /* Safari */ + background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255)); + opacity: 0; + transform: translate(-50%, -50%) scale(1); + transition: opacity 1s, transform 0.5s; +} + +/* Hover, Focus */ +.butt:hover, +.butt:focus { + box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); +} + +.butt:hover::before { + opacity: 0.08; +} + +.butt:focus::before { + opacity: 0.24; +} + +.butt:hover:focus::before { + opacity: 0.3; +} + +/* Active */ +.butt:active { + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); +} + +.butt:active::after { + opacity: 0.32; + transform: translate(-50%, -50%) scale(0); + transition: transform 0s; +} + +/* Disabled */ +.butt:disabled { + color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38); + background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.12); + box-shadow: none; + cursor: initial; +} + +.butt:disabled::before { + opacity: 0; +} + +.butt:disabled::after { + opacity: 0; } \ No newline at end of file diff --git a/public/index.html b/public/index.html index 563e7b3e..cc7578b4 100755 --- a/public/index.html +++ b/public/index.html @@ -11,7 +11,7 @@

Leaderboard name:

- +
Current: 0
@@ -19,8 +19,9 @@
Previous Scores
- - + +
+
@@ -30,7 +31,7 @@

Unscramble the Words!

- +
diff --git a/public/js/scripts.js b/public/js/scripts.js index acf0ffd7..e4bf4f10 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,4 +1,4 @@ - const start = () => { // runs a lot of the functions necessary for the first time (scrambled word, enter in the input) + function start() { // runs a lot of the functions necessary for the first time (scrambled word, enter in the input) newScrambled(); updateScores(); updateCurrentScore(); @@ -14,7 +14,22 @@ }; - const updateCurrentScore = () => { + function hint() { + let inp = document.querySelector('#answer'); + + fetch('/hint', { + method: 'POST', + body: inp.dataset.hint.length + }).then((res) => { + res.text().then(char => { + inp.dataset.hint = inp.dataset.hint ? inp.dataset.hint + char : char; + inp.value = inp.dataset.hint; + }); + }); + } + + + function updateCurrentScore() { fetch('/getCurrScore', { method: 'GET' }).then((res) => { @@ -25,7 +40,7 @@ }; - const updateScores = () => { + function updateScores() { fetch('/getScores', { method: 'GET' }).then((res) => { @@ -49,10 +64,10 @@ }; - const endGame = () => { // ends the game and sends score to the server - let name = document.querySelector('#boardName').value; + function endGame() { // ends the game and sends score to the server + let name = document.querySelector('#boardName').value ? document.querySelector('#boardName').value : '???'; let date = new Date(); - let scorejson = JSON.stringify({"date": date, "name": name, "score": 0}); + let scorejson = JSON.stringify({"date": date, "name": name.toUpperCase(), "score": 0}); fetch('/newScore', { method: 'POST', @@ -65,13 +80,15 @@ }; - const changeInputUnderlines = () => { // Change all the css styling needed for the dynamic character underlines + function changeInputUnderlines() { // Change all the css styling needed for the dynamic character underlines let length = document.querySelector('#scrambledWord').innerText.length, input = document.querySelector('#answer'), charWidth = 1, gap = 0.5 * charWidth, totalWidth = length * (charWidth + gap); + input.value = ''; + input.dataset.hint = ''; input.maxLength = length; input.style.width = `${totalWidth}ch`; input.style.letterSpacing = `${gap}ch`; @@ -79,7 +96,7 @@ }; - const newScrambled = () => { // Changes the scrambled word to a new one from the server + function newScrambled() { // Changes the scrambled word to a new one from the server document.querySelector('#scrambledWord').innerHTML = 'Loading...'; fetch('/currentWord', { method: 'GET' @@ -92,21 +109,22 @@ }; - const guessWord = (guess) => { // takes in a value and sends it to the server to see if its correct + function guessWord(guess) { // takes in a value and sends it to the server to see if its correct data = JSON.stringify({'guess': guess}); fetch('/guess', { method: 'POST', body: data }).then((res) => { res.text().then((correct) => { // is either true or false to see if that was the correct word + let scrambled = document.querySelector('#scrambledWord') + let inp = document.querySelector('#answer'); + if (correct === 'false') { - document.querySelector('#scrambledWord').classList.add('incorrect'); - console.log(document.querySelector('#scrambledWord').classList); - setTimeout(() => document.querySelector('#scrambledWord').classList.remove('incorrect'), 2500) + scrambled.classList.add('incorrect'); + setTimeout(() => scrambled.classList.remove('incorrect'), 2500); } else { - document.querySelector('#answer').value = ''; - document.querySelector('#scrambledWord').classList.remove('incorrect') + scrambled.classList.remove('incorrect') updateCurrentScore(); newScrambled(); } @@ -115,7 +133,7 @@ }; - const answerkey = () => { // prints the answer key + function answerkey() { // prints the answer key let randomwords = ['size','pipe','show','toy','zipper','throne','baby','seat','river','ocean','spade', 'pump','cakes','skate','cat','vegetable','nut','furniture','tendency','car','sleet','truck','basket','writer', 'fish','rock','ants','border','experience','kitty','flesh','servant','hydrant','planes','week','office', @@ -127,6 +145,6 @@ console.log(randomwords); } - window.onload = function() { // just runs start when page opens + window.onload = () => { // just runs start when page opens start(); }; \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index b2a8165d..bb7824be 100644 --- a/server.improved.js +++ b/server.improved.js @@ -17,10 +17,10 @@ const randomwords = ['size','pipe','show','toy','zipper','throne','baby','seat', 'door','place','wing','fact','cherries','need','knee','ground','key','farm','direction','crayon','authority', 'idea','cake','winter','copper','son','cactus','caption','road','slope','trouble','finger','comparison']; -let scores = [{date: "2020-09-14T19:09:02.410Z", name: "mom", score: 250}, // filler scores - {date: "2020-09-14T19:09:45.849Z", name: "dad", score: 2}, - {date: "2020-09-14T19:09:52.299Z", name: "lov", score: 4}, - {date: "2020-09-14T19:09:55.471Z", name: "xxx", score: 420}], +let scores = [{date: "2020-09-14T19:09:02.410Z", name: "MOM", score: 250}, // filler scores + {date: "2020-09-14T19:09:45.849Z", name: "DAD", score: 2}, + {date: "2020-09-14T19:09:52.299Z", name: "LOV", score: 4}, + {date: "2020-09-14T19:09:55.471Z", name: "XXX", score: 420}], currentScore = 0, currentWord = ''; @@ -60,7 +60,7 @@ const handleGet = function(request, response) { currentWord = randomwords[Math.floor(Math.random() * randomwords.length)]; response.writeHead(200, {'Content-Type': 'text/plain' }); - response.end((currentWord)); + response.end(scramble(currentWord)); } else if (request.url === '/getCurrScore') { response.writeHead(200, {'Content-Type': 'text/plain'}); @@ -91,17 +91,27 @@ const handlePost = function(request, response) { response.end((guess === currentWord).toString()); // sends the boolean in string format }); - } else if(request.url === '/newScore'){ + } else if (request.url === '/newScore'){ request.on('end', () => { let scoreJSON = JSON.parse(dataString); + scoreJSON.score = currentScore; scores.push(scoreJSON); currentScore = 0; - response.writeHead(200); + response.writeHead(200, "OK"); response.end(); }); + } else if (request.url === '/hint'){ + request.on('end', () => { + let hint = parseInt(dataString); + let ret = hint < currentWord.length ? currentWord[hint] : ''; + + response.writeHead(200, "OK", {'Content-Type': 'text/plain' }); + response.end(ret.toString()); + + }); } else { response.writeHead(200); response.end(); From 9525be1277aeeae2c41f39cd0b3329de91daec4d Mon Sep 17 00:00:00 2001 From: athammana Date: Mon, 14 Sep 2020 18:50:28 -0400 Subject: [PATCH 04/11] Minor Citations --- public/css/style.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/css/style.css b/public/css/style.css index 49f2e68b..a59f5225 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -52,7 +52,7 @@ body { display: block; } -/* To get each character to be underlined, I borrowed the background line from https://codepen.io/thebabydino/pen/mRrPwB */ +/* Character By Character Underlines Possible From: ; https://codepen.io/thebabydino/pen/mRrPwB */ .underlines { display: block; margin: 2em auto; @@ -78,6 +78,8 @@ body { font: 3ch monospace; } +/* All Material Button CSS Code was possible from this link: https://codepen.io/finnhvman/pen/MQyJxV */ + .butt { position: relative; display: inline-block; From 6c982fc47966913230e04c3695b47546f1e54a4c Mon Sep 17 00:00:00 2001 From: athammana Date: Mon, 14 Sep 2020 19:47:11 -0400 Subject: [PATCH 05/11] Added Readme requirements --- public/css/style.css | 13 ++----------- public/index.html | 4 ++-- public/js/scripts.js | 14 +++++++++++++- server.improved.js | 24 +++++++++++++++++------- 4 files changed, 34 insertions(+), 21 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index a59f5225..2b7f98fa 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,17 +1,8 @@ -/*Style your own assignment! This is fun! */ - body { font-family: 'Roboto', sans-serif; font-size: 3ch; text-align: center; -/* // Background - background-position: - top 0px left 0px, - top 10px right 10px, - bottom 10px right 10px, - bottom 10px left 10px;*/ - background-size: 100vw; background-image: @@ -21,6 +12,7 @@ body { url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239EF0F0' d='M68.5,-21C76.5,2.3,62.2,34.1,39.7,49.2C17.1,64.3,-13.6,62.7,-32.3,48.3C-50.9,33.8,-57.5,6.5,-50.1,-16C-42.7,-38.5,-21.3,-56.3,4.5,-57.7C30.3,-59.2,60.5,-44.3,68.5,-21Z' transform='translate(30 30)' /%3E%3C/svg%3E"); } + .container { display: flex; flex-flow: wrap column; @@ -74,7 +66,7 @@ body { } .scoreNick { - margin-top: 1em; + margin: 0.5em auto; font: 3ch monospace; } @@ -94,7 +86,6 @@ body { text-align: center; text-overflow: ellipsis; text-transform: uppercase; - /*color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));*/ background-color: #F2F4F8; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system); diff --git a/public/index.html b/public/index.html index cc7578b4..b766d7ac 100755 --- a/public/index.html +++ b/public/index.html @@ -16,12 +16,12 @@
Current: 0
Previous Scores
-
+
-
+
diff --git a/public/js/scripts.js b/public/js/scripts.js index e4bf4f10..501ea55a 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -14,6 +14,18 @@ }; + function deleteEverything() { + endGame(); + fetch('/deleteEverything', { + method: 'GET' + }).then((res) => { + document.querySelector('#currScore').innerHTML = 0; + updateScores(); + newScrambled(); + }); + } + + function hint() { let inp = document.querySelector('#answer'); @@ -53,7 +65,7 @@ scores.forEach((score, i) => { if (i < 5){ - let ele = document.createElement('div'); + let ele = document.createElement('tr'); ele.innerHTML = `${score.name}: ${score.score}`; insertDiv.appendChild(ele); diff --git a/server.improved.js b/server.improved.js index bb7824be..8389549f 100644 --- a/server.improved.js +++ b/server.improved.js @@ -17,10 +17,10 @@ const randomwords = ['size','pipe','show','toy','zipper','throne','baby','seat', 'door','place','wing','fact','cherries','need','knee','ground','key','farm','direction','crayon','authority', 'idea','cake','winter','copper','son','cactus','caption','road','slope','trouble','finger','comparison']; -let scores = [{date: "2020-09-14T19:09:02.410Z", name: "MOM", score: 250}, // filler scores - {date: "2020-09-14T19:09:45.849Z", name: "DAD", score: 2}, - {date: "2020-09-14T19:09:52.299Z", name: "LOV", score: 4}, - {date: "2020-09-14T19:09:55.471Z", name: "XXX", score: 420}], +let scores = [{date: "2020-09-14T19:09:02.410Z", name: "MOM", score: 50, rating: 500}, // filler scores + {date: "2020-09-14T19:09:45.849Z", name: "DAD", score: 12, rating: 120}, + {date: "2020-09-14T19:09:52.299Z", name: "MAD", score: 9, rating: 90}, + {date: "2020-09-14T19:09:55.471Z", name: "DOG", score: 8, rating: 80}], currentScore = 0, currentWord = ''; @@ -59,7 +59,7 @@ const handleGet = function(request, response) { } else if (request.url === '/currentWord') { currentWord = randomwords[Math.floor(Math.random() * randomwords.length)]; - response.writeHead(200, {'Content-Type': 'text/plain' }); + response.writeHead(200, {'Content-Type': 'text/plain'}); response.end(scramble(currentWord)); } else if (request.url === '/getCurrScore') { @@ -70,6 +70,14 @@ const handleGet = function(request, response) { response.writeHead(200, {'Content-Type': 'text/plain'}); response.end(JSON.stringify(scores)); + } else if (request.url === '/deleteEverything') { + scores = []; + currentScore = 0; + currentWord = ''; + + response.writeHead(200, "OK"); + response.end(); + } else { sendFile(response, filename); } @@ -87,7 +95,7 @@ const handlePost = function(request, response) { let guess = JSON.parse(dataString).guess; currentScore = guess === currentWord ? currentScore + 1 : currentScore; - response.writeHead( 200, "OK", {'Content-Type': 'text/plain' }); + response.writeHead( 200, "OK", {'Content-Type': 'text/plain'}); response.end((guess === currentWord).toString()); // sends the boolean in string format }); @@ -96,6 +104,8 @@ const handlePost = function(request, response) { let scoreJSON = JSON.parse(dataString); scoreJSON.score = currentScore; + scoreJSON.rating = scoreJSON.score * 10; + scores.push(scoreJSON); currentScore = 0; @@ -108,7 +118,7 @@ const handlePost = function(request, response) { let hint = parseInt(dataString); let ret = hint < currentWord.length ? currentWord[hint] : ''; - response.writeHead(200, "OK", {'Content-Type': 'text/plain' }); + response.writeHead(200, "OK", {'Content-Type': 'text/plain'}); response.end(ret.toString()); }); From 96d2c32111c1fb73d46e386bfc908c6fcddb863c Mon Sep 17 00:00:00 2001 From: athammana Date: Tue, 15 Sep 2020 00:23:38 -0400 Subject: [PATCH 06/11] Readme and jslints --- README.md | 72 +----------- public/css/style.css | 6 +- public/index.html | 14 ++- public/js/scripts.js | 263 ++++++++++++++++++++++--------------------- server.improved.js | 199 ++++++++++++++++---------------- 5 files changed, 251 insertions(+), 303 deletions(-) diff --git a/README.md b/README.md index 3945c152..0a3d30d3 100755 --- a/README.md +++ b/README.md @@ -1,68 +1,8 @@ Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js === -Due: September 16th, by 11:59 PM. - -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. 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. - -Baseline Requirements ---- - -Note that there is a very large range of application areas and possibilities that meet these baseline requirements. Make your application do something useful! A todo list, storing / retrieving high scores for a very simple game, have a little fun with it. - -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 `todo` dataset with `task`, `priority`, and `creation_date` may generate a new field `deadline` by looking at `creation_date` and `priority` - -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 -- A results page displaying all data currently available on the server. You will most likely use a `` tag for this, but `
    ` could also work and might be simpler to work with. -- All pages should [validate](https://validator.w3.org) - -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 styling of the primary visual elements in the application: - - Use of either a CSS grid or flexbox for layout - - Rules defining fonts for all text used; no default fonts! Be sure to use a web safe font or a font from a web service like [Google Fonts](http://fonts.google.com/) - -- 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 and acheive a base grade of 85%: - -1. Fork the starting project code (make sure to fork the 2020 repo!). 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 - -Acheivements ---- - -Below are suggested technical and design achievements. You can use these to help boost your grade up to an A and customize the assignment to your personal interests. These are recommended acheivements, but feel free to create/implement your own... just make sure you thoroughly describe what you did in your README and why it was challenging. ALL ACHIEVEMENTS MUST BE DESCRIBED IN YOUR README IN ORDER TO GET CREDIT FOR THEM. - -*Technical* -- (10 points) Create a single-page app that both provides a form for users to submit data and always shows the current state of the server-side data. To put it another way, when the user submits data, the server should respond sending back the updated data (including the derived field calculated on the server) and the client should then update its data display. +Abhijay Thammana 9/15/20 +athammana *Design/UX* - (5 points per person, with a max of 10 points) Test your user interface with other students in the class. Define a specific task for them to complete (ideally something short that takes <10 minutes), and then use the [think-aloud protocol](https://en.wikipedia.org/wiki/Think_aloud_protocol) to obtain feedback on your design (talk-aloud is also find). Important considerations when designing your study: @@ -79,15 +19,13 @@ You'll need to use sometype of collaborative software that will enable you both 4. What would you change about the interface based on their feedback? *You do not need to actually make changes based on their feedback*. This acheivement is designed to help gain experience testing user interfaces. If you run two user studies, you should answer two sets of questions. - -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. Be sure to include the CSS positioning technique you used, and any required instructions to use your application. +## Unscrmbl +So I kind of went overboard with this project, because I was bored this week, so sorry to whoever has to go through all the code. Basically the game is to just unscramble the word in large font and type the correct one in the input box below. With each wrong answer, nothing happens. Which each correct answer the score (stored in the server) increments and the word to scramble is pulled from the server. If the player is stuck they can use the Cheats button to get each letter starting from the first one. Once the player is satisfied with their score, they can type their name for the leaderboard in the top right (or not) and then click end game. The score will then be stored in the server, and then the game updates the top 5 scores from the leaderboard and places them sorted. There is also a delete everything button to delete all entries. For the basic CSS positioning, there is a left block and a center block that both have the display flex property. Essentially almost everything inside of them are centered with justify-content and align-content. The flex wrap and flex direction column are also applied to each of the blocks. ## Technical Achievements -- **Tech Achievement 1**: Using a combination of... +- **Tech Achievement 1**: For the Technical Achievement, the project manipulates the server data in multiple ways. There are a variety of post and get urls on the server that have different purposes in the application. First the Get urls: '/currentWord' returns the scrambled version of the current server word as a response; '/getCurrScore' returns the current score that is being kept track of by the server; '/getScores' returns all the current scores in a JSON array format; and lastly, '/deleteEverything' resets the current word, current score, and list of scores on the server to empty. The Post urls: '/guess' takes in a string as data from the request and compares it to the current word on the server and returns in plaintext true or false whether its correct or not and increments the current score if correct; '/newScore' takes in a json from the request data, adds the derived field of a rating, and adds it to the server's score list; '/hint' takes in a number from the request data field, and then responds with the corresponding character from the server's current word. All of these together complete the achievement of changing the database in the three different ways (Add, Modify, Delete). ### Design/Evaluation Achievements - **Design Achievement 1**: diff --git a/public/css/style.css b/public/css/style.css index 2b7f98fa..4d75d5aa 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -30,7 +30,9 @@ body { #center-block {} -#scores {} +#serverscores { + margin: auto; +} #scrambled { text-align: center; @@ -78,7 +80,7 @@ body { box-sizing: border-box; border: none; border-radius: 4px; - margin: 10px; + margin: 15px 10px 10px 10px; padding: 0 16px; min-width: 64px; height: 36px; diff --git a/public/index.html b/public/index.html index b766d7ac..bdb2aad4 100755 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,6 @@ CS4241 Assignment 2 - @@ -14,19 +13,22 @@
    - Current: 0
    -
    Previous Scores
    -
+ Current: 0 +
+
+ Previous Scores +
+
- +
-

Unscramble the Words!

+

Unscramble!

diff --git a/public/js/scripts.js b/public/js/scripts.js index 501ea55a..4025fceb 100755 --- a/public/js/scripts.js +++ b/public/js/scripts.js @@ -1,162 +1,163 @@ - function start() { // runs a lot of the functions necessary for the first time (scrambled word, enter in the input) - newScrambled(); - updateScores(); - updateCurrentScore(); - let inp = document.querySelector('#answer'); - - inp.addEventListener('keyup', (e) => { - event.preventDefault(); - - if (e.code === 'Enter') { - guessWord(inp.value); - } - }); - }; - - - function deleteEverything() { - endGame(); - fetch('/deleteEverything', { - method: 'GET' - }).then((res) => { +'use strict'; + +function start() { // runs a lot of the functions necessary for the first time (scrambled word, enter in the input) + newScrambled(); + updateScores(); + updateCurrentScore(); + let inp = document.querySelector('#answer'); + + inp.addEventListener('keyup', (e) => { + event.preventDefault(); + + if (e.code === 'Enter') { + guessWord(inp.value); + } + }); +} + + +function deleteEverything() { + endGame(); + fetch('/deleteEverything', { + method: 'GET' + }).then(() => { document.querySelector('#currScore').innerHTML = 0; updateScores(); newScrambled(); - }); - } + }); +} - function hint() { - let inp = document.querySelector('#answer'); +function hint() { + let inp = document.querySelector('#answer'); - fetch('/hint', { + fetch('/hint', { method: 'POST', body: inp.dataset.hint.length - }).then((res) => { + }).then((res) => { res.text().then(char => { inp.dataset.hint = inp.dataset.hint ? inp.dataset.hint + char : char; inp.value = inp.dataset.hint; }); - }); - } + }); +} - function updateCurrentScore() { - fetch('/getCurrScore', { - method: 'GET' - }).then((res) => { - res.text().then(score => { - document.querySelector('#currScore').innerHTML = score; - }); - }) - }; +function updateCurrentScore() { + fetch('/getCurrScore', { + method: 'GET' + }).then((res) => { + res.text().then(score => { + document.querySelector('#currScore').innerHTML = score; + }); + }); +} - function updateScores() { +function updateScores() { fetch('/getScores', { - method: 'GET' - }).then((res) => { - res.text().then((scores) => { - let insertDiv = document.querySelector('#serverscores'); + method: 'GET' + }).then((res) => { + res.text().then((scores) => { + let insertDiv = document.querySelector('#serverscores'); - scores = JSON.parse(scores); - scores = scores.sort((a, b) => parseInt(b.score) - parseInt(a.score)); - insertDiv.innerHTML = ''; + scores = JSON.parse(scores); + scores = scores.sort((a, b) => parseInt(b.score) - parseInt(a.score)); + insertDiv.innerHTML = ''; - scores.forEach((score, i) => { - if (i < 5){ + scores.forEach((score, i) => { + if (i < 5){ let ele = document.createElement('tr'); ele.innerHTML = `${score.name}: ${score.score}`; insertDiv.appendChild(ele); - } - }); - }); - }); - }; - + } + }); + }); + }); +} + + +function endGame() { // ends the game and sends score to the server + let name = document.querySelector('#boardName').value ? document.querySelector('#boardName').value : '???'; + let date = new Date(); + let scorejson = JSON.stringify({"date": date, "name": name.toUpperCase(), "score": 0}); + + fetch('/newScore', { + method: 'POST', + body: scorejson + }).then(() => { + updateScores(); + newScrambled(); + updateCurrentScore(); + }); +} - function endGame() { // ends the game and sends score to the server - let name = document.querySelector('#boardName').value ? document.querySelector('#boardName').value : '???'; - let date = new Date(); - let scorejson = JSON.stringify({"date": date, "name": name.toUpperCase(), "score": 0}); - fetch('/newScore', { - method: 'POST', - body: scorejson - }).then((res) => { - updateScores(); - newScrambled(); - updateCurrentScore(); - }); - }; - - - function changeInputUnderlines() { // Change all the css styling needed for the dynamic character underlines - let length = document.querySelector('#scrambledWord').innerText.length, - input = document.querySelector('#answer'), - charWidth = 1, - gap = 0.5 * charWidth, - totalWidth = length * (charWidth + gap); +function changeInputUnderlines() { // Change all the css styling needed for the dynamic character underlines + let length = document.querySelector('#scrambledWord').innerText.length, + input = document.querySelector('#answer'), + charWidth = 1, + gap = 0.5 * charWidth, + totalWidth = length * (charWidth + gap); input.value = ''; input.dataset.hint = ''; - input.maxLength = length; - input.style.width = `${totalWidth}ch`; - input.style.letterSpacing = `${gap}ch`; - input.style.background = `repeating-linear-gradient(to right, black 0, black ${charWidth}ch, transparent 0, transparent ${charWidth + gap}ch) 0 100% / ${totalWidth - gap}ch 2px no-repeat`; - }; - - - function newScrambled() { // Changes the scrambled word to a new one from the server - document.querySelector('#scrambledWord').innerHTML = 'Loading...'; - fetch('/currentWord', { - method: 'GET' - }).then((res) => { - res.text().then((newWord) => { - document.querySelector('#scrambledWord').innerHTML = newWord; - changeInputUnderlines(); - }); - }); - }; - - - function guessWord(guess) { // takes in a value and sends it to the server to see if its correct - data = JSON.stringify({'guess': guess}); - fetch('/guess', { - method: 'POST', - body: data - }).then((res) => { - res.text().then((correct) => { // is either true or false to see if that was the correct word - let scrambled = document.querySelector('#scrambledWord') - let inp = document.querySelector('#answer'); - - if (correct === 'false') { - - scrambled.classList.add('incorrect'); - setTimeout(() => scrambled.classList.remove('incorrect'), 2500); - } else { - scrambled.classList.remove('incorrect') + input.maxLength = length; + input.style.width = `${totalWidth}ch`; + input.style.letterSpacing = `${gap}ch`; + input.style.background = `repeating-linear-gradient(to right, black 0, black ${charWidth}ch, transparent 0, transparent ${charWidth + gap}ch) 0 100% / ${totalWidth - gap}ch 2px no-repeat`; +} + + +function newScrambled() { // Changes the scrambled word to a new one from the server + document.querySelector('#scrambledWord').innerHTML = 'Loading...'; + fetch('/currentWord', { + method: 'GET' + }).then((res) => { + res.text().then((newWord) => { + document.querySelector('#scrambledWord').innerHTML = newWord; + changeInputUnderlines(); + }); + }); +} + + +function guessWord(guess) { // takes in a value and sends it to the server to see if its correct + let data = JSON.stringify({'guess': guess}); + fetch('/guess', { + method: 'POST', + body: data + }).then((res) => { + res.text().then((correct) => { // is either true or false to see if that was the correct word + let scrambled = document.querySelector('#scrambledWord'); + + if (correct === 'false') { + + scrambled.classList.add('incorrect'); + setTimeout(() => scrambled.classList.remove('incorrect'), 2500); + } else { + scrambled.classList.remove('incorrect'); updateCurrentScore(); newScrambled(); - } - }); - }); - }; - - - function answerkey() { // prints the answer key - let randomwords = ['size','pipe','show','toy','zipper','throne','baby','seat','river','ocean','spade', - 'pump','cakes','skate','cat','vegetable','nut','furniture','tendency','car','sleet','truck','basket','writer', - 'fish','rock','ants','border','experience','kitty','flesh','servant','hydrant','planes','week','office', - 'dog','art','yak','distance','stocking','snails','playground','knot','curtain','wrench','daughter','seashore', - 'side','channel','cow','surprise','team','partner','paper','leg','arch','produce','bell','language','hope', - 'women','angle','cream','jar','respect','pigs','loaf','fly','time','uncle','move','earth','pies','flame', - 'door','place','wing','fact','cherries','need','knee','ground','key','farm','direction','crayon','authority', - 'idea','cake','winter','copper','son','cactus','caption','road','slope','trouble','finger','comparison']; - console.log(randomwords); - } - - window.onload = () => { // just runs start when page opens + } + }); + }); +} + + +function answerkey() { // prints the answer key + let randomwords = ['size', 'pipe', 'show', 'toy', 'zipper', 'throne', 'baby', 'seat', 'river', 'ocean', 'spade', + 'pump', 'cakes', 'skate', 'cat', 'vegetable', 'nut', 'furniture', 'tendency', 'car', 'sleet', 'truck', 'basket', 'writer', + 'fish', 'rock', 'ants', 'border', 'experience', 'kitty', 'flesh', 'servant', 'hydrant', 'planes', 'week', 'office', + 'dog', 'art', 'yak', 'distance', 'stocking', 'snails', 'playground', 'knot', 'curtain', 'wrench', 'daughter', 'seashore', + 'side', 'channel', 'cow', 'surprise', 'team', 'partner', 'paper', 'leg', 'arch', 'produce', 'bell', 'language', 'hope', + 'women', 'angle', 'cream', 'jar', 'respect', 'pigs', 'loaf', 'fly', 'time', 'uncle', 'move', 'earth', 'pies', 'flame', + 'door', 'place', 'wing', 'fact', 'cherries', 'need', 'knee', 'ground', 'key', 'farm', 'direction', 'crayon', 'authority', + 'idea', 'cake', 'winter', 'copper', 'son', 'cactus', 'caption', 'road', 'slope', 'trouble', 'finger', 'comparison']; + console.log(randomwords); +} + + window.onload = () => { // just runs start when page opens start(); - }; \ No newline at end of file + }; \ No newline at end of file diff --git a/server.improved.js b/server.improved.js index 8389549f..6a66da77 100644 --- a/server.improved.js +++ b/server.improved.js @@ -1,39 +1,43 @@ +'use strict'; + const http = require( 'http' ), - fs = require( 'fs' ), - mime = require( 'mime' ), - dir = 'public/', - port = 3000; + fs = require( 'fs' ), + mime = require( 'mime' ), + dir = 'public/', + port = 3000; /* * Game Logic Code Here */ const randomwords = ['size','pipe','show','toy','zipper','throne','baby','seat','river','ocean','spade', -'pump','cakes','skate','cat','vegetable','nut','furniture','tendency','car','sleet','truck','basket','writer', -'fish','rock','ants','border','experience','kitty','flesh','servant','hydrant','planes','week','office', -'dog','art','yak','distance','stocking','snails','playground','knot','curtain','wrench','daughter','seashore', -'side','channel','cow','surprise','team','partner','paper','leg','arch','produce','bell','language','hope', -'women','angle','cream','jar','respect','pigs','loaf','fly','time','uncle','move','earth','pies','flame', -'door','place','wing','fact','cherries','need','knee','ground','key','farm','direction','crayon','authority', -'idea','cake','winter','copper','son','cactus','caption','road','slope','trouble','finger','comparison']; + 'pump','cakes','skate','cat','vegetable','nut','furniture','tendency','car','sleet','truck','basket','writer', + 'fish','rock','ants','border','experience','kitty','flesh','servant','hydrant','planes','week','office', + 'dog','art','yak','distance','stocking','snails','playground','knot','curtain','wrench','daughter','seashore', + 'side','channel','cow','surprise','team','partner','paper','leg','arch','produce','bell','language','hope', + 'women','angle','cream','jar','respect','pigs','loaf','fly','time','uncle','move','earth','pies','flame', + 'door','place','wing','fact','cherries','need','knee','ground','key','farm','direction','crayon','authority', + 'idea','cake','winter','copper','son','cactus','caption','road','slope','trouble','finger','comparison']; let scores = [{date: "2020-09-14T19:09:02.410Z", name: "MOM", score: 50, rating: 500}, // filler scores - {date: "2020-09-14T19:09:45.849Z", name: "DAD", score: 12, rating: 120}, - {date: "2020-09-14T19:09:52.299Z", name: "MAD", score: 9, rating: 90}, - {date: "2020-09-14T19:09:55.471Z", name: "DOG", score: 8, rating: 80}], - currentScore = 0, - currentWord = ''; + {date: "2020-09-14T19:09:45.849Z", name: "DAD", score: 12, rating: 120}, + {date: "2020-09-14T19:09:52.299Z", name: "MAD", score: 9, rating: 90}, + {date: "2020-09-14T19:09:55.471Z", name: "DOG", score: 8, rating: 80}], + currentScore = 0, + currentWord = ''; const scramble = (word) => { - scrambled = word.split(''); - for (let i = scrambled.length - 1; i > 0; i--) { - const j = Math.floor(Math.random() * i) - const temp = scrambled[i] - scrambled[i] = scrambled[j] - scrambled[j] = temp - } - return scrambled.join(''); + let scrambled = word.split(''); + + for (let i = scrambled.length - 1; i > 0; i--) { + let j = Math.floor(Math.random() * i); + let temp = scrambled[i]; + + scrambled[i] = scrambled[j]; + scrambled[j] = temp; + } + return scrambled.join(''); }; @@ -43,112 +47,113 @@ const scramble = (word) => { */ const server = http.createServer(function( request,response ) { - if (request.method === 'GET') { - handleGet(request, response); - } else if (request.method === 'POST'){ - handlePost(request, response); - } + if (request.method === 'GET') { + handleGet(request, response); + + } else if (request.method === 'POST'){ + handlePost(request, response); + + } }); const handleGet = function(request, response) { - const filename = dir + request.url.slice(1); + const filename = dir + request.url.slice(1); - if (request.url === '/') { - sendFile(response, 'public/index.html'); + if (request.url === '/') { + sendFile(response, 'public/index.html'); - } else if (request.url === '/currentWord') { - currentWord = randomwords[Math.floor(Math.random() * randomwords.length)]; + } else if (request.url === '/currentWord') { + currentWord = randomwords[Math.floor(Math.random() * randomwords.length)]; - response.writeHead(200, {'Content-Type': 'text/plain'}); - response.end(scramble(currentWord)); + response.writeHead(200, {'Content-Type': 'text/plain'}); + response.end(scramble(currentWord)); - } else if (request.url === '/getCurrScore') { - response.writeHead(200, {'Content-Type': 'text/plain'}); - response.end(currentScore.toString()); + } else if (request.url === '/getCurrScore') { + response.writeHead(200, {'Content-Type': 'text/plain'}); + response.end(currentScore.toString()); - } else if (request.url === '/getScores') { - response.writeHead(200, {'Content-Type': 'text/plain'}); - response.end(JSON.stringify(scores)); + } else if (request.url === '/getScores') { + response.writeHead(200, {'Content-Type': 'text/plain'}); + response.end(JSON.stringify(scores)); - } else if (request.url === '/deleteEverything') { - scores = []; - currentScore = 0; - currentWord = ''; + } else if (request.url === '/deleteEverything') { + scores = []; + currentScore = 0; + currentWord = ''; - response.writeHead(200, "OK"); - response.end(); + response.writeHead(200, "OK"); + response.end(); - } else { - sendFile(response, filename); - } + } else { + sendFile(response, filename); + } }; const handlePost = function(request, response) { - let dataString = ''; + let dataString = ''; - request.on('data', function(data) { - dataString += data; - }) + request.on('data', function(data) { + dataString += data; + }); - if (request.url === '/guess'){ - request.on( 'end', function() { - let guess = JSON.parse(dataString).guess; - currentScore = guess === currentWord ? currentScore + 1 : currentScore; + if (request.url === '/guess'){ + request.on( 'end', function() { + let guess = JSON.parse(dataString).guess; + currentScore = guess === currentWord ? currentScore + 1 : currentScore; - response.writeHead( 200, "OK", {'Content-Type': 'text/plain'}); - response.end((guess === currentWord).toString()); // sends the boolean in string format - }); + response.writeHead( 200, "OK", {'Content-Type': 'text/plain'}); + response.end((guess === currentWord).toString()); // sends the boolean in string format + }); - } else if (request.url === '/newScore'){ - request.on('end', () => { - let scoreJSON = JSON.parse(dataString); + } else if (request.url === '/newScore'){ + request.on('end', () => { + let scoreJSON = JSON.parse(dataString); - scoreJSON.score = currentScore; - scoreJSON.rating = scoreJSON.score * 10; + scoreJSON.score = currentScore; + scoreJSON.rating = scoreJSON.score * 10; - scores.push(scoreJSON); - currentScore = 0; + scores.push(scoreJSON); + currentScore = 0; - response.writeHead(200, "OK"); - response.end(); - }); + response.writeHead(200, "OK"); + response.end(); + }); - } else if (request.url === '/hint'){ - request.on('end', () => { - let hint = parseInt(dataString); - let ret = hint < currentWord.length ? currentWord[hint] : ''; + } else if (request.url === '/hint'){ + request.on('end', () => { + let hint = parseInt(dataString); + let ret = hint < currentWord.length ? currentWord[hint] : ''; - response.writeHead(200, "OK", {'Content-Type': 'text/plain'}); - response.end(ret.toString()); + response.writeHead(200, "OK", {'Content-Type': 'text/plain'}); + response.end(ret.toString()); - }); - } else { - response.writeHead(200); - response.end(); + }); + } else { + response.writeHead(200); + response.end(); - } + } }; const sendFile = function(response, filename) { - const type = mime.getType(filename); - - fs.readFile(filename, function(err, content) { + const type = mime.getType(filename); - // if the error = null, then we've loaded the file successfully - if (err === null) { + fs.readFile(filename, function(err, content) { - // status code: https://httpstatuses.com - response.writeHeader(200, {'Content-Type': type}); - response.end(content); + // if the error = null, then we've loaded the file successfully + if (err === null) { - } else { + // status code: https://httpstatuses.com + response.writeHeader(200, {'Content-Type': type}); + response.end(content); - // file not found, error code 404 - response.writeHeader(404) - response.end( '404 Error: File Not Found' ) + } else { + // file not found, error code 404 + response.writeHeader(404); + response.end('404 Error: File Not Found'); - } - }) + } + }); }; server.listen(process.env.PORT || port, () => console.log('Listening on Port:', port)); From 93b2df0f2a091ac4f794050fb335bd7bfa77f80c Mon Sep 17 00:00:00 2001 From: athammana Date: Tue, 15 Sep 2020 00:29:08 -0400 Subject: [PATCH 07/11] readme change --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0a3d30d3..e78a9c7c 100755 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ You'll need to use sometype of collaborative software that will enable you both --- ## Unscrmbl -So I kind of went overboard with this project, because I was bored this week, so sorry to whoever has to go through all the code. Basically the game is to just unscramble the word in large font and type the correct one in the input box below. With each wrong answer, nothing happens. Which each correct answer the score (stored in the server) increments and the word to scramble is pulled from the server. If the player is stuck they can use the Cheats button to get each letter starting from the first one. Once the player is satisfied with their score, they can type their name for the leaderboard in the top right (or not) and then click end game. The score will then be stored in the server, and then the game updates the top 5 scores from the leaderboard and places them sorted. There is also a delete everything button to delete all entries. For the basic CSS positioning, there is a left block and a center block that both have the display flex property. Essentially almost everything inside of them are centered with justify-content and align-content. The flex wrap and flex direction column are also applied to each of the blocks. +So I kind of went overboard with this project, because I was bored this week, so sorry to whoever has to go through all the code. Basically the game is to just unscramble the word in large font and type the correct one in the input box below. With each wrong answer, nothing happens. Which each correct answer the score (stored in the server) increments and the word to scramble is pulled from the server. If the player is stuck they can use the Cheats button to get each letter starting from the first one. Or the 'answerkey()' function in the console. Once the player is satisfied with their score, they can type their name for the leaderboard in the top right (or not) and then click end game. The score will then be stored in the server, and then the game updates the top 5 scores from the leaderboard and places them sorted. There is also a delete everything button to delete all entries. For the basic CSS positioning, there is a left block and a center block that both have the display flex property. Essentially almost everything inside of them are centered with justify-content and align-content. The flex wrap and flex direction column are also applied to each of the blocks. ## Technical Achievements - **Tech Achievement 1**: For the Technical Achievement, the project manipulates the server data in multiple ways. There are a variety of post and get urls on the server that have different purposes in the application. First the Get urls: '/currentWord' returns the scrambled version of the current server word as a response; '/getCurrScore' returns the current score that is being kept track of by the server; '/getScores' returns all the current scores in a JSON array format; and lastly, '/deleteEverything' resets the current word, current score, and list of scores on the server to empty. The Post urls: '/guess' takes in a string as data from the request and compares it to the current word on the server and returns in plaintext true or false whether its correct or not and increments the current score if correct; '/newScore' takes in a json from the request data, adds the derived field of a rating, and adds it to the server's score list; '/hint' takes in a number from the request data field, and then responds with the corresponding character from the server's current word. All of these together complete the achievement of changing the database in the three different ways (Add, Modify, Delete). From ba7e1f74e6b62f076dc6f40e0a5d132fc5632669 Mon Sep 17 00:00:00 2001 From: athammana Date: Tue, 15 Sep 2020 00:29:31 -0400 Subject: [PATCH 08/11] Glitch website added --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e78a9c7c..123b9a63 100755 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and === Abhijay Thammana 9/15/20 -athammana +https://athammana-a2-athammana-1.glitch.me/ *Design/UX* - (5 points per person, with a max of 10 points) Test your user interface with other students in the class. Define a specific task for them to complete (ideally something short that takes <10 minutes), and then use the [think-aloud protocol](https://en.wikipedia.org/wiki/Think_aloud_protocol) to obtain feedback on your design (talk-aloud is also find). Important considerations when designing your study: From d7191b898fadc43a5f608cd0451ab4535593ea1d Mon Sep 17 00:00:00 2001 From: athammana Date: Wed, 16 Sep 2020 22:27:33 -0400 Subject: [PATCH 09/11] Last Design Achievements --- README.md | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 123b9a63..16ec1ab5 100755 --- a/README.md +++ b/README.md @@ -4,22 +4,7 @@ Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Abhijay Thammana 9/15/20 https://athammana-a2-athammana-1.glitch.me/ -*Design/UX* -- (5 points per person, with a max of 10 points) Test your user interface with other students in the class. Define a specific task for them to complete (ideally something short that takes <10 minutes), and then use the [think-aloud protocol](https://en.wikipedia.org/wiki/Think_aloud_protocol) to obtain feedback on your design (talk-aloud is also find). Important considerations when designing your study: - -1. Make sure you start the study by clearly stating the task that you expect your user to accomplish. -2. You shouldn't provide any verbal instructions on how to use your interface / accomplish the task you give them. Make sure that your interface is clear enough that users can figure it out without any instruction, or provide text instructions from within the interface itself. -3. If users get stuck to the point where they give up, you can then provde instruction so that the study can continue, but make sure to discuss this in your README. You won't lose any points for this... all feedback is good feedback! - -You'll need to use sometype of collaborative software that will enable you both to see the test subject's screen and listen to their voice as they describe their thoughts. After completing each study, briefly (one to two sentences for each question) address the following in your README: - -1. Provide the last name of each student you conduct the evaluation with. -2. What problems did the user have with your design? -3. What comments did they make that surprised you? -4. What would you change about the interface based on their feedback? - -*You do not need to actually make changes based on their feedback*. This acheivement is designed to help gain experience testing user interfaces. If you run two user studies, you should answer two sets of questions. ---- +-------------------------------------------------------------------------------------------------------------------------- ## Unscrmbl So I kind of went overboard with this project, because I was bored this week, so sorry to whoever has to go through all the code. Basically the game is to just unscramble the word in large font and type the correct one in the input box below. With each wrong answer, nothing happens. Which each correct answer the score (stored in the server) increments and the word to scramble is pulled from the server. If the player is stuck they can use the Cheats button to get each letter starting from the first one. Or the 'answerkey()' function in the console. Once the player is satisfied with their score, they can type their name for the leaderboard in the top right (or not) and then click end game. The score will then be stored in the server, and then the game updates the top 5 scores from the leaderboard and places them sorted. There is also a delete everything button to delete all entries. For the basic CSS positioning, there is a left block and a center block that both have the display flex property. Essentially almost everything inside of them are centered with justify-content and align-content. The flex wrap and flex direction column are also applied to each of the blocks. @@ -29,3 +14,14 @@ So I kind of went overboard with this project, because I was bored this week, so ### Design/Evaluation Achievements - **Design Achievement 1**: + +1. Patel +2. Just didn't notice the leaderboard name right away since it was tucked in the corner, but other than everything was clear +3. The background could be distracting and said there was a decent amount of whitespace +4. Make the leaderboard side a bit bigger, and maybe move the background blobs to be smaller and more central + +1. Abouaf +2. The buttons should be under the text field because they have to do with the text while the delete everything does not, also delete everything should be a different color or pop out more +3. The button placement, because I didn't even consider putting anything else under the text field to keep it minimalistic but it makes so much more sense +4. Definitely move the cheat and end game button to the center while changing the color of the delete everything + From d19d3f2a68c2dcd663b02c6b850a827d59fb9d04 Mon Sep 17 00:00:00 2001 From: Abhijay Thammana Date: Wed, 16 Sep 2020 22:28:17 -0400 Subject: [PATCH 10/11] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 16ec1ab5..764695fc 100755 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ Assignment 2 - Short Stack: Basic Two-tier Web Application using HTML/CSS/JS and Node.js === -Abhijay Thammana 9/15/20 +Abhijay Thammana 9/16/20 https://athammana-a2-athammana-1.glitch.me/ -------------------------------------------------------------------------------------------------------------------------- @@ -20,6 +20,8 @@ So I kind of went overboard with this project, because I was bored this week, so 3. The background could be distracting and said there was a decent amount of whitespace 4. Make the leaderboard side a bit bigger, and maybe move the background blobs to be smaller and more central +- **Design Achievement 2**: + 1. Abouaf 2. The buttons should be under the text field because they have to do with the text while the delete everything does not, also delete everything should be a different color or pop out more 3. The button placement, because I didn't even consider putting anything else under the text field to keep it minimalistic but it makes so much more sense From d46da841360ffc6659b7b35e0117c80f56353344 Mon Sep 17 00:00:00 2001 From: Abhijay Thammana Date: Wed, 16 Sep 2020 22:28:46 -0400 Subject: [PATCH 11/11] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 764695fc..fcc25b48 100755 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ So I kind of went overboard with this project, because I was bored this week, so ## Technical Achievements - **Tech Achievement 1**: For the Technical Achievement, the project manipulates the server data in multiple ways. There are a variety of post and get urls on the server that have different purposes in the application. First the Get urls: '/currentWord' returns the scrambled version of the current server word as a response; '/getCurrScore' returns the current score that is being kept track of by the server; '/getScores' returns all the current scores in a JSON array format; and lastly, '/deleteEverything' resets the current word, current score, and list of scores on the server to empty. The Post urls: '/guess' takes in a string as data from the request and compares it to the current word on the server and returns in plaintext true or false whether its correct or not and increments the current score if correct; '/newScore' takes in a json from the request data, adds the derived field of a rating, and adds it to the server's score list; '/hint' takes in a number from the request data field, and then responds with the corresponding character from the server's current word. All of these together complete the achievement of changing the database in the three different ways (Add, Modify, Delete). -### Design/Evaluation Achievements +## Design/Evaluation Achievements - **Design Achievement 1**: 1. Patel