-
Notifications
You must be signed in to change notification settings - Fork 0
/
gamePage.js
92 lines (92 loc) · 4.01 KB
/
gamePage.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
const gamePage = {
startGame: function (wordsList) {
return `<!DOCTYPE html>
<html>
<head>
<title>Secret Word Game</title>
<meta charset="utf-8">
<link rel="stylesheet" href="game.css">
</head>
<body>
<h1>Guess the <span class="secretWordHighlighter"> Secret Word</span></h1>
<div class="pageBorder">
<p class="gameInstructionsSection">A secret word is in the list below, guess the word to win the game.</p>
${gamePage.gameWords(wordsList)} <br>
<form action="/sendGuess" method="POST">
<input type="text" name="userguess" placeholder="Your guess">
<button class="button" type="submit" name="button">Submit</button> <br>
</form>
</div>
</body>
</html>
`;
},
updateGame: function (wordsList, guessedWordsList, messageToUser, noOfTries) {
return `<!DOCTYPE html>
<html>
<head>
<title>Secret Word Game</title>
<meta charset="utf-8">
<link rel="stylesheet" href="game.css">
</head>
<body>
<h1>Guess the <span class="secretWordHighlighter"> Secret Word</span></h1>
<div class="pageBorder">
<p class="gameInstructionsSection">A secret word is in the list below, guess the word to win the game.</p>
${gamePage.gameWords(wordsList)} <br>
<form action="/sendGuess" method="POST">
<input type="text" name="userguess" placeholder="Your guess">
<button class="button" type="submit" name="button">Submit</button> <br>
</form>
<p class="messageToUserSecion">${messageToUser}</p>
<h3>Attempts taken</h3>
<div class="previousGussedWordsListSection">
<p class="matchingLettersCountHighlighter">${noOfTries}</p>
</div>
${gamePage.guessedWords(guessedWordsList)}
</div>
</body>
</html>
`;
},
endGame: function (wordsList, guessedWordsList, messageToUser) {
return `<!DOCTYPE html>
<html>
<head>
<title>Secret Word Game</title>
<meta charset="utf-8">
<link rel="stylesheet" href="game.css">
</head>
<body>
<h1>Guess the <span class="secretWordHighlighter"> Secret Word</span></h1>
<div class="pageBorder">
<p>A secret word is in the list below, guess the word to win the game!</p>
${gamePage.gameWords(wordsList)} <br>
<form action="/newGame" method="POST">
${messageToUser} <button class="button" type="submit" name="button">New Game</button>
</form> <br>
${gamePage.guessedWords(guessedWordsList)}
</div>
</body>
</html>
`;
},
gameWords: function (wordsList) {
return `<div class="wordsListSection"><p>[` +
Object.keys(wordsList).map(word => {
return `${wordsList[word]}`;
}).join(', ') + `] </p> </div>`;
},
guessedWords: function (guessedWordsList) {
if (guessedWordsList.length === 0) {
return ``;
}
return `<h3>Previous guesses</h3>`+
`<div class="previousGussedWordsListSection">` +
`<p class="matchingLettersCountHighlighter">` +
Object.keys(guessedWordsList).map(guessedWord => {
return `${guessedWordsList[guessedWord].userguess} (${guessedWordsList[guessedWord].matchingLettersCount + " letters in common"})`;
}).join('<br>') + `</p>` + `</div>`;
},
}
module.exports = gamePage;