arne/lingo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
Arne van Iterson 2019-11-27 22:39:50 +01:00
commit 79b5a7fc44
14 changed files with 274 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/alle letters goed.wav Normal file
View File

Binary file not shown.

BIN
assets/foute letter.wav Normal file
View File

Binary file not shown.

BIN
assets/goede letter foute plek.wav Normal file
View File

Binary file not shown.

BIN
assets/goede letter goede plek.wav Normal file
View File

Binary file not shown.

BIN
assets/keyboard delete letter.wav Normal file
View File

Binary file not shown.

BIN
assets/send word keyboard.wav Normal file
View File

Binary file not shown.

BIN
assets/woord niet geraden.wav Normal file
View File

Binary file not shown.

38
css/index.css Normal file
View File

@ -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 */

9
css/index.css.map Normal file
View File

@ -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"
}

37
css/index.scss Normal file
View File

@ -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 );
}
}

37
index.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=Lingo, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/index.css">
<title>Lingo</title>
</head>
<body>
<div>
<form id="submitForm">
<input type="text" id="wordInput" autocomplete="off" placeholder="Submit word">
<button type="submit">Versturen</button>
</form>
<form id="guessForm" style="display: none;">
<input type="text" id="wordInput" autocomplete="off" placeholder="Guess word">
<button type="submit">Versturen</button>
</form>
<button id="restart">Opnieuw beginnen</button>
<button id="giveUp">Opgeven</button>
</div>
<span id="letterCount"></span><br>
<span id="word"></span><br>
<div>
<span id="guesses"></span><br>
</div>
<span id="result"></span>
<script src="./js/index.js"></script>
</body>
</html>

132
js/index.js Normal file
View File

@ -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 += `<span class="letter blue">${wordArray[index]}</span>`;
} else {
wordElement.innerHTML += `<span class="letter grey">-</span>`;
}
}
}
} 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 += '<br>';
}
let index = 0;
function showLetter() {
const color = result[index];
guessesList.innerHTML += `<span class="letter ${color}">${guessArray[index]}</span>`;
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();
});

5
package-lock.json generated Normal file
View File

@ -0,0 +1,5 @@
{
"name": "lingo",
"version": "1.0.0",
"lockfileVersion": 1
}

16
package.json Normal file
View File

@ -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": {}
}