commit 79b5a7fc446dd9aaf8261d83257e3657050883da Author: Arne van Iterson Date: Wed Nov 27 22:39:50 2019 +0100 First commit diff --git a/assets/alle letters goed.wav b/assets/alle letters goed.wav new file mode 100644 index 0000000..060e1f9 Binary files /dev/null and b/assets/alle letters goed.wav differ diff --git a/assets/foute letter.wav b/assets/foute letter.wav new file mode 100644 index 0000000..0d0f8d4 Binary files /dev/null and b/assets/foute letter.wav differ diff --git a/assets/goede letter foute plek.wav b/assets/goede letter foute plek.wav new file mode 100644 index 0000000..394b96c Binary files /dev/null and b/assets/goede letter foute plek.wav differ diff --git a/assets/goede letter goede plek.wav b/assets/goede letter goede plek.wav new file mode 100644 index 0000000..4077286 Binary files /dev/null and b/assets/goede letter goede plek.wav differ diff --git a/assets/keyboard delete letter.wav b/assets/keyboard delete letter.wav new file mode 100644 index 0000000..c44517b Binary files /dev/null and b/assets/keyboard delete letter.wav differ diff --git a/assets/send word keyboard.wav b/assets/send word keyboard.wav new file mode 100644 index 0000000..90330b1 Binary files /dev/null and b/assets/send word keyboard.wav differ diff --git a/assets/woord niet geraden.wav b/assets/woord niet geraden.wav new file mode 100644 index 0000000..5cce16d Binary files /dev/null and b/assets/woord niet geraden.wav differ diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..9ad88e4 --- /dev/null +++ b/css/index.css @@ -0,0 +1,38 @@ +span.letter { + font-family: 'Ubuntu', sans-serif; + height: 30px; + width: 30px; + display: inline-block; + text-align: center; + font-size: 25px; + color: white; +} + +span.letter.red { + background: #ed3746; + background: -webkit-gradient(linear, left top, left bottom, from(#ed3746), to(#ed1a2d)); + background: linear-gradient(to bottom, #ed3746 0%, #ed1a2d 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed3746', endColorstr='#ed1a2d',GradientType=0 ); +} + +span.letter.orange { + background: #d6b855; + background: -webkit-gradient(linear, left top, left bottom, from(#d6b855), to(#d6a400)); + background: linear-gradient(to bottom, #d6b855 0%, #d6a400 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6b855', endColorstr='#d6a400',GradientType=0 ); +} + +span.letter.blue { + background: #4094dc; + background: -webkit-gradient(linear, left top, left bottom, from(#4094dc), to(#0466c7)); + background: linear-gradient(to bottom, #4094dc 0%, #0466c7 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4094dc', endColorstr='#0466c7',GradientType=0 ); +} + +span.letter.grey { + background: #838383; + background: -webkit-gradient(linear, left top, left bottom, from(#838383), to(#545454)); + background: linear-gradient(to bottom, #838383 0%, #545454 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#838383', endColorstr='#545454',GradientType=0 ); +} +/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/css/index.css.map b/css/index.css.map new file mode 100644 index 0000000..0b85537 --- /dev/null +++ b/css/index.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAAA,AAAA,IAAI,AAAA,OAAO,CAAC;EACR,WAAW,EAAE,oBAAoB;EACjC,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,KAAK;CA6Bf;;AApCD,AAQI,IARA,AAAA,OAAO,AAQN,IAAI,CAAC;EACF,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,mDAAoD;EAChE,UAAU,EAAE,sDAAsD;EAClE,UAAU,EAAE,oDAAoD;EAChE,MAAM,EAAE,2GAA2G;CACtH;;AAdL,AAeI,IAfA,AAAA,OAAO,AAeN,OAAO,CAAC;EACL,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,mDAAoD;EAChE,UAAU,EAAE,sDAAsD;EAClE,UAAU,EAAE,oDAAoD;EAChE,MAAM,EAAE,2GAA2G;CACtH;;AArBL,AAsBI,IAtBA,AAAA,OAAO,AAsBN,KAAK,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,mDAAoD;EAChE,UAAU,EAAE,sDAAsD;EAClE,UAAU,EAAE,oDAAoD;EAChE,MAAM,EAAE,2GAA2G;CACtH;;AA5BL,AA6BI,IA7BA,AAAA,OAAO,AA6BN,KAAK,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,UAAU,EAAE,mDAAoD;EAChE,UAAU,EAAE,sDAAsD;EAClE,UAAU,EAAE,oDAAoD;EAChE,MAAM,EAAE,2GAA2G;CACtH", + "sources": [ + "index.scss" + ], + "names": [], + "file": "index.css" +} \ No newline at end of file diff --git a/css/index.scss b/css/index.scss new file mode 100644 index 0000000..40f2e98 --- /dev/null +++ b/css/index.scss @@ -0,0 +1,37 @@ +span.letter { + font-family: 'Ubuntu', sans-serif; + height: 30px; + width: 30px; + display: inline-block; + text-align: center; + font-size: 25px; + color: white; + &.red { + background: #ed3746; + background: -moz-linear-gradient(top, #ed3746 0%, #ed1a2d 100%); + background: -webkit-linear-gradient(top, #ed3746 0%,#ed1a2d 100%); + background: linear-gradient(to bottom, #ed3746 0%,#ed1a2d 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed3746', endColorstr='#ed1a2d',GradientType=0 ); + } + &.orange { + background: #d6b855; + background: -moz-linear-gradient(top, #d6b855 0%, #d6a400 100%); + background: -webkit-linear-gradient(top, #d6b855 0%,#d6a400 100%); + background: linear-gradient(to bottom, #d6b855 0%,#d6a400 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6b855', endColorstr='#d6a400',GradientType=0 ); + } + &.blue { + background: #4094dc; + background: -moz-linear-gradient(top, #4094dc 0%, #0466c7 100%); + background: -webkit-linear-gradient(top, #4094dc 0%,#0466c7 100%); + background: linear-gradient(to bottom, #4094dc 0%,#0466c7 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4094dc', endColorstr='#0466c7',GradientType=0 ); + } + &.grey { + background: #838383; + background: -moz-linear-gradient(top, #838383 0%, #545454 100%); + background: -webkit-linear-gradient(top, #838383 0%,#545454 100%); + background: linear-gradient(to bottom, #838383 0%,#545454 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#838383', endColorstr='#545454',GradientType=0 ); + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..16bd740 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + + + Lingo + + +
+
+ + +
+ + + + +
+ +
+
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..a3dfdea --- /dev/null +++ b/js/index.js @@ -0,0 +1,132 @@ +const submitForm = document.getElementById('submitForm'); +const guessForm = document.getElementById('guessForm'); +const guessesList = document.getElementById('guesses'); +const wordElement = document.getElementById('word'); +const resultElement = document.getElementById('result'); + +var word; +var wordArray; +var audio = { + correctPlace: new Audio('../assets/goede letter goede plek.wav'), + correctLetter: new Audio('../assets/goede letter foute plek.wav'), + incorrect: new Audio('../assets/foute letter.wav'), + allCorrect: new Audio('../assets/alle letters goed.wav'), + submitWord: new Audio('../assets/send word keyboard.wav'), + giveUp: new Audio('../assets/woord niet geraden.wav'), + error: new Audio('../assets/keyboard delete letter.wav') +} + +function countInstances(array, value) { + var instances = 0; + for (let index = 0; index < array.length; index++) { + if (array[index] == value) { + instances = instances + 1; + } + } + return instances; +} + +function checkWord(guessArray, wordArray) { + var processedLetters = []; + var result = []; + for (let index = 0; index < wordArray.length; index++) { + if (countInstances(processedLetters, guessArray[index]) < countInstances(wordArray, guessArray[index])) { + if (wordArray[index] == guessArray[index]) { + result.push('blue'); + } else if (wordArray.indexOf(guessArray[index]) != -1) { + result.push('orange'); + } else { + result.push('red'); + } + } else { + result.push('red'); + } + processedLetters.push(guessArray[index]); + } + return result; +} + +submitForm.addEventListener('submit', function(event) { + event.preventDefault(); + word = submitForm.children[0].value; + if (word.split('').length > 0) { + word = word.toUpperCase(); + wordArray = word.split(''); + resultElement.innerHTML = ''; + + if (wordArray.includes(' ')) { + audio.error.play(); + resultElement.innerHTML = "JP: Er mogen geen spaties in een Lingowoord."; + } else { + audio.submitWord.play(); + submitForm.style.display = 'none'; + guessForm.style.display = 'block'; + document.getElementById('letterCount').innerHTML = wordArray.length + " letter Lingo"; + for (let index = 0; index < wordArray.length; index++) { + if (index == 0) { + wordElement.innerHTML += `${wordArray[index]}`; + } else { + wordElement.innerHTML += `-`; + } + } + } + } else { + audio.error.play(); + resultElement.innerHTML = "JP: Dat woord is wel erg kort."; + } +}); + +guessForm.addEventListener('submit', function(event) { + event.preventDefault(); + var guess = guessForm.children[0].value; + guess = guess.toUpperCase(); + var guessArray = guess.split(''); + guessForm.children[0].value = ''; + resultElement.innerHTML = ''; + + if (wordArray != undefined) { + if (guess.length == word.length) { + var result = checkWord(guessArray, wordArray); + if (guessesList.innerHTML != '') { + guessesList.innerHTML += '
'; + } + let index = 0; + function showLetter() { + const color = result[index]; + guessesList.innerHTML += `${guessArray[index]}`; + if (color == 'blue') { + audio.correctPlace.currentTime = 0; + audio.correctPlace.play(); + } + else if (color == 'orange') { + audio.correctLetter.currentTime = 0; + audio.correctLetter.play(); + } + else if (color == 'red') { + audio.incorrect.currentTime = 0; + audio.incorrect.play(); + } + index++; + if(index < guessArray.length){ + setTimeout(showLetter, 200); + } else if (guess == word) { + audio.allCorrect.play(); + resultElement.innerHTML = "JP: Gefeliciteerd, u heeft gewonnen"; + guessForm.style.display = 'none'; + } + } + showLetter(); + } else { + audio.error.play(); + resultElement.innerHTML = "JP: Dit woord is niet de goede lengte."; + } + } +}); + +document.getElementById('giveUp').addEventListener('click', function () { + audio.giveUp.play(); +}); + +document.getElementById('restart').addEventListener('click', function () { + location.reload(); +}); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..c098ef4 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,5 @@ +{ + "name": "lingo", + "version": "1.0.0", + "lockfileVersion": 1 +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..7a71842 --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "name": "lingo", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "lingo" + }, + "author": "McArn", + "license": "ISC", + "dependencies": {} +}