Skip to content

Brought a sense of order and justice to server.js or game.js and commented broken image #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Brought a sense of order and justice to server.js or game.js and commented broken image #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2bddca0
Commented out assets/img/profilePig.svg because there is no such image
amirsaranBIH Nov 3, 2018
916bac1
Refactored code in game.js and server.js
amirsaranBIH Nov 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Kanit:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kanit:800" rel="stylesheet">
<title>Multiplayer - Hangman</title>
</head>

<body>
<h1 id="logo">
<span class="part-1">MULTI</span><span class="part-2">PLAYER</span><span class="part-3"><br />HANGMAN</span><br>
</h1>

<div id="game-view-container">
<div id="hangman-container">
<!-- SVG Image, haven't added in a templating language that can handle includes and make this pretty yet -->
Expand All @@ -25,13 +25,13 @@ <h1 id="logo">
<!-- clouds/sky -->
<svg id="clouds-background" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1692.96 472.53"><defs><style>.cls-1{fill:#9d1d54;}.cls-1,.cls-2,.cls-3,.cls-6,.cls-7{stroke:#000;stroke-miterlimit:10;}.cls-2{fill:#f8bdd1;}.cls-3,.cls-5{fill:none;}.cls-4,.cls-7{fill:#ffcf86;}.cls-6{fill:#fff;}</style></defs><title>clouds-sky</title><g id="SUN"><ellipse class="cls-1" cx="201.12" cy="232.56" rx="147" ry="129"/><g id="Layer_8" data-name="Layer 8"><ellipse class="cls-2" cx="286.5" cy="268.5" rx="32" ry="15" transform="translate(-155.35 -42.39) rotate(-4.92)"/><ellipse class="cls-2" cx="409.5" cy="257.5" rx="32" ry="15" transform="translate(-153.95 -31.88) rotate(-4.92)"/><path class="cls-1" d="M369.5,264.5s40,47,36,52c0,0,24,42-23,32s-59-6-48-17" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M276.5,364.5s150,49,174-27" transform="translate(-133.38 -67.94)"/><path class="cls-1" d="M444.5,328.5s16,19,15,22" transform="translate(-133.38 -67.94)"/><path class="cls-1" d="M276.5,374.5s-5,7,0-24" transform="translate(-133.38 -67.94)"/></g><g id="Beams_1" data-name="Beams 1"><polygon class="cls-3" points="213.32 390.93 200.99 472.02 214.59 471.95 213.32 390.93"/><polygon class="cls-3" points="235.87 390.58 247.22 471.82 260.23 467.86 235.87 390.58"/><polygon class="cls-3" points="263.28 385.59 289.94 463.16 301.95 456.79 263.28 385.59"/><polygon class="cls-3" points="283.61 369.1 325.42 439.67 335.9 431 283.61 369.1"/><polygon class="cls-3" points="309.61 360.26 361.85 423.5 370.85 413.31 309.61 360.26"/></g><g id="Beams_2" data-name="Beams 2"><polygon class="cls-3" points="338.12 328.56 396.12 386.56 404.12 375.56 338.12 328.56"/><polygon class="cls-3" points="351.21 310.19 423.36 349.21 427.88 336.39 351.21 310.19"/><polygon class="cls-3" points="363.44 285.15 441.71 309.68 443.7 296.22 363.44 285.15"/><polygon class="cls-3" points="362.21 259.01 443.83 267.18 443.06 253.6 362.21 259.01"/><polygon class="cls-3" points="370.5 232.83 452.4 228.26 449.53 214.96 370.5 232.83"/></g><g id="Beams_3" data-name="Beams 3"><polygon class="cls-3" points="362.46 200.31 444.21 193.65 441.01 180.43 362.46 200.31"/><polygon class="cls-3" points="356.94 178.44 433.38 148.71 426.53 136.95 356.94 178.44"/><polygon class="cls-3" points="345.76 152.91 415.12 109.13 406.15 98.9 345.76 152.91"/><polygon class="cls-3" points="325.04 136.92 384.1 80 373.25 71.8 325.04 136.92"/><polygon class="cls-3" points="310.45 113.66 359.98 48.27 347.99 41.85 310.45 113.66"/></g><g id="Beams_4" data-name="Beams 4"><polygon class="cls-3" points="72.85 317.07 0.75 356.2 9.03 366.99 72.85 317.07"/><polygon class="cls-3" points="86.73 334.85 28.82 392.93 39.83 400.91 86.73 334.85"/><polygon class="cls-3" points="107.27 353.69 61.51 421.76 73.84 427.5 107.27 353.69"/><polygon class="cls-3" points="132.68 359.94 101.65 435.87 114.89 438.99 132.68 359.94"/><polygon class="cls-3" points="155.43 375.33 136.53 455.15 150.09 456.18 155.43 375.33"/></g></g><g id="Cloud_5" data-name="Cloud 5"><path class="cls-4" d="M1064.5,136.5s35,23,19,42-95,12-95,12c-16,32-71,18-71,18-37,25-86,0-86,0-73,43-106-30-106-30-24-42,21-58,21-58,3-27,75-49,75-49,49-15,105,30,105,30,70-26,74,12,74,12C1046.5,94.5,1064.5,136.5,1064.5,136.5Z" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M725.5,178.5s33,73,106,30c0,0,49,25,86,0,0,0,55,14,71-18,0,0,79,7,95-12s-19-42-19-42-18-42-64-23c0,0-4-38-74-12,0,0-56-45-105-30,0,0-72,22-75,49C746.5,120.5,701.5,136.5,725.5,178.5Z" transform="translate(-133.38 -67.94)"/><path class="cls-5" d="M1068.5,177.5s-43,16-59,9-37,10-37,10-31,18-38,10-67,2-67,2-36-13-47-6-39,13-42,6-47-40-38-48,23-48,23-48l50-14,138,14Z" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M756.5,140.5s30,44,64,0" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M880.5,140.5s44,27,62,10" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M828.5,174.5s22,14,45,0" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M897.5,119.5s19-16,37,0" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M772.5,119.5s15-16,32,0" transform="translate(-133.38 -67.94)"/><path class="cls-6" d="M988.5,166.5" transform="translate(-133.38 -67.94)"/><path class="cls-6" d="M934.5,199.5" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M957.5,199.5c-5,0-7,6-11,0" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M787.5,199.5s2,7,14,0" transform="translate(-133.38 -67.94)"/><path class="cls-6" d="M988.5,190.5s4-3,7-24" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M1017.5,178.5s34,9,34-4" transform="translate(-133.38 -67.94)"/></g><g id="Cloud_2" data-name="Cloud 2"><path class="cls-4" d="M228.26,235.68c6.12,5.62,15.55,9.06,29.87,4.1,33.35-11.56,57-11.1,57.74-11.08h0a41.93,41.93,0,0,0,9.8,1.07c14.57.09,32.1-4.67,32.1-4.67s73.33-46.41,54.5-90.34c-10.92-25.49-29.69-23.91-43.54-18.1l-.3-.78c-16.85-20.82-34.7-6.8-42.24,1.05-11.93-22.49-47.43,13-47.43,13-60.82-26.78-65.26,35-65.26,35C162.38,176.19,200,211.2,200,211.2l-9.72,8.88s-.48,38.85,37.26,16.07Z" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M326.48,117.4a4.53,4.53,0,0,0-.26-.47c-11.93-22.49-47.43,13-47.43,13-60.82-26.78-65.26,35-65.26,35C162.38,176.19,200,211.2,200,211.2l-9.72,8.88s-.48,38.85,37.26,16.07" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M245.15,181.15c-45.94,5.36-27.45,35.09-27.45,35.09A41.79,41.79,0,0,0,222.8,229a31.36,31.36,0,0,0,5.46,6.72c6.12,5.62,15.55,9.06,29.87,4.1,33.35-11.56,57-11.1,57.74-11.08" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M322.52,121.24a47.2,47.2,0,0,1,3.7-4.3c7.54-7.85,25.39-21.88,42.24-1.05" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M351.31,127.3a73.2,73.2,0,0,1,17.45-10.64c13.85-5.82,32.61-7.39,43.54,18.1,18.82,43.93-54.5,90.34-54.5,90.34s-17.53,4.76-32.1,4.67a41.93,41.93,0,0,1-9.8-1.07h0c-5.68-1.45-9.55-4.52-9.42-10.27" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M283,187.17s13.58-40.27,65.61-36.47" transform="translate(-133.38 -67.94)"/></g><g id="Cloud_3" data-name="Cloud 3"><path class="cls-4" d="M1733.5,263.5c91-31,90,28,90,28,12,40-25,58-46,75s-108,5-108,5c-31.29,16.74-57.82-.42-69.94-11-47.94,20-64.29-19.42-64.29-19.42-.87.15-1.76.27-2.67.37-23.16,2.57-56.48-7.89-58.1-24.95-2-21,18.8-31.63,18.8-31.63-1.94-7.6-3.24-25.35,22.2-35.37,33-13,77,14,77,14,21-25,69,3,69,3C1713.5,236.5,1733.5,263.5,1733.5,263.5Z" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M1592.5,353.5a68.18,68.18,0,0,0,7.06,7c12.12,10.58,38.65,27.74,69.94,11,0,0,87,12,108-5s58-35,46-75c0,0,1-59-90-28,0,0-26,11-24,21" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M1733.5,263.5s-20-27-72,3c0,0-48-28-69-3,0,0-11,10-10,18" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M1592.5,263.5s-44-27-77-14c-25.44,10-24.14,27.77-22.2,35.37a22.53,22.53,0,0,0,1.2,3.63" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M1493.3,284.87s-20.8,10.63-18.8,31.63c1.62,17.06,34.94,27.52,58.1,24.95.91-.1,1.8-.22,2.67-.37a35.05,35.05,0,0,0,11.23-3.58" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M1535.27,341.08s16.35,39.42,64.29,19.42" transform="translate(-133.38 -67.94)"/><path class="cls-7" d="M1562.5,322.5s19-28,55-4" transform="translate(-133.38 -67.94)"/><path class="cls-7" d="M1629.5,290.5s9-11,26,0" transform="translate(-133.38 -67.94)"/><path class="cls-7" d="M1540.5,290.5s5-9,14-5" transform="translate(-133.38 -67.94)"/></g><g id="Cloud_4" data-name="Cloud 4"><path class="cls-4" d="M669.92,447.39c-62.58,2.9-17.55-66-17.55-66,2.62-12.72,8.8-31.69,23.13-42.91,23-18,75.29-.37,75.29-.37,5.29-4.08,12.63-9.19,22.71-15.63,36-23,52.29,15.63,52.29,15.63,6.82-7.13,16.91-15.45,31.71-23.63,38-21,82,17.11,82,17.11,13.71-7.68,31,14.66,31,14.66,5.83-4.84,13.06-10.69,22-17.77,62-49,135.36,45.86,135.36,45.86h0c15.24-.28,35,3.27,48.64,20.13,25,31-3.73,58.89-3.73,58.89,5.72,7.13,11,20.62,2.73,44.11-13.91,39.73-98.4,20.37-99.52,20.11h0c-61.12,28.21-183.16-21.57-184.65-22.17C799.44,523.21,697.8,465.07,669.92,447.39Z" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M662.5,442.5s2.61,1.84,7.42,4.89c27.88,17.68,129.52,75.82,221.4,48.05,1.5-.45,3-.93,4.49-1.43l2.84-1A158.08,158.08,0,0,0,930.5,477.5" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M1076,517.61a64.69,64.69,0,0,0,6.84-3.65,56.18,56.18,0,0,0,10.68-8.46" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M891.31,495.43h0c1.49.6,123.53,50.38,184.65,22.17" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M1076,517.61h0c1.12.26,85.61,19.62,99.52-20.11,8.22-23.49,3-37-2.73-44.11a24.54,24.54,0,0,0-8.27-6.89" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M1172.77,453.39s28.73-27.89,3.73-58.89c-13.6-16.86-33.4-20.41-48.64-20.13a90.24,90.24,0,0,0-22.36,3.13" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M1127.86,374.36S1054.5,279.5,992.5,328.5c-9,7.08-16.19,12.93-22,17.77-34.51,28.61-20.14,21.66-27,24.23" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M970.48,346.27s-17.25-22.34-31-14.66a17.77,17.77,0,0,0-6,5.89" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M939.52,331.61s-44-38.11-82-17.11c-14.8,8.18-24.89,16.5-31.71,23.63C815.11,349.3,812.5,357.5,812.5,357.5" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M825.79,338.13S809.5,299.5,773.5,322.5c-10.08,6.44-17.42,11.55-22.71,15.63-13.61,10.5-13.73,14.21-12.29,16.37" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M750.79,338.13s-52.29-17.63-75.29.37c-14.33,11.22-20.51,30.19-23.13,42.91a96.26,96.26,0,0,0-1.87,13.09" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M652.37,381.41s-45,68.88,17.55,66" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M713.5,442.5s17,34,50,9" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M861.5,431.5s41,48,78,26" transform="translate(-133.38 -67.94)"/><path class="cls-3" d="M861.5,397.5s19-34,48-6" transform="translate(-133.38 -67.94)"/><path class="cls-7" d="M1008.5,430.5s44-24,52,0" transform="translate(-133.38 -67.94)"/><path class="cls-7" d="M713.5,388.5s17-30,46,6" transform="translate(-133.38 -67.94)"/><path class="cls-7" d="M796.5,472.5s28-7,42,0" transform="translate(-133.38 -67.94)"/></g></svg>
<!-- end clouds/sky -->

<!-- Contributors: please feel free to replace, update, or change these -->
</div>
<div id="sidebar-container">
<div id="players-online">
<div id="player-profile">
<a href="#" data-target="player-profile-dropdown"><img id="profile-pig-icon" src="assets/img/profilePig.svg" /></a>
<a href="#" data-target="player-profile-dropdown">profilePig<!--<img id="profile-pig-icon" src="assets/img/profilePig.svg" />--></a>
<div id="player-profile-dropdown">
<label for="usernameInput">Change Your Name</label>
<input id="usernameInput" type="text" maxlength="15">
Expand Down Expand Up @@ -59,4 +59,4 @@ <h1 id="logo">
<script src="bundle.js"></script>
</body>

</html>
</html>
98 changes: 48 additions & 50 deletions server/src/game.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
export class Game {
constructor() {
this.words = ['melon', 'car', 'airplane', 'pig', 'piano'];
this.word = this.words[Math.floor(Math.random() * this.words.length)].toLowerCase();
this.blankWord = this.word
.replace(/\w/g, '_')
.split('')
.join(' ');
this.word = this.pickRandomWord(this.words);
this.blankWord = this.toBlankWord(this.word);
this.guesses = [];
this.correct = 0;
this.incorrect = 0;
Expand All @@ -14,59 +11,56 @@ export class Game {
}

newGuess(letter) {
let prevBlank = this.blankWord;
let guessFound = this.guesses.find(guess => {
return guess === letter;
});

if (guessFound === letter) {
return 'repeatGuess';
} else if (/[^\w\.\-]/.test(letter)) {
return 'invalidCharacter';
} else if (guessFound === undefined) {
// Guess is false in the start
let guessedCorrectly = false;

// Checks if there are previous guesses
if (this.guesses.length > 0) {
let guessFound = this.guesses.findIndex(guess => {
return guess === letter;
});

if (guessFound !== -1) return 'repeatGuess';
if (/[^\w\.\-]/.test(letter)) return 'invalidCharacter';
} else {
this.guesses.push(letter);

let blankWordArray = this.blankWord.split(' ');
//Updates mystery/blank word based on guesses
for (let i = 0; i < this.word.split('').length; i++) {
const displayedLetter = this.word.split('')[i];
if (displayedLetter === letter) {
blankWordArray[i] = displayedLetter;
// Updates mystery/blank word based on guesses
for (let i = 0; i < this.word.length; i++) {
if (this.word.charAt(i) === letter) {
blankWordArray[i] = letter;
// Guess is correct
guessedCorrectly = true;
}
}

this.blankWord = blankWordArray.join(' ');

if (prevBlank === this.blankWord) {
return this.incorrectGuess();
// this.incorrect++;
// console.log(this.blankWord);
// return 'incorrectGuess';
} else {
return this.correctGuess();
// this.correct++;
// console.log(this.blankWord);
// return 'correctGuess';
}
return (guessedCorrectly) ? this.incorrectGuess() : this.correctGuess();
}
}

incorrectGuess() {
this.incorrect++;
if (this.incorrect >= 6) {
this.status = 'inactive';
return 'gameOver';
} else {

if (this.blankWord.split(' ').join('') !== this.word) {
return 'incorrectGuess';
}

this.status = 'inactive';
return 'victory';
}

correctGuess() {
this.correct++;
if (this.blankWord.split(' ').join('') === this.word) {
this.status = 'inactive';
return 'victory';
} else {

if (this.blankWord.split(' ').join('') !== this.word) {
return 'correctGuess';
}

this.status = 'inactive';
return 'victory';
}

getState(guesser) {
Expand All @@ -77,20 +71,24 @@ export class Game {
incorrect: this.incorrect,
status: this.status
};
if (guesser) {
gameState = {
blankword: this.blankWord,
guesses: this.guesses,
correct: this.correct,
incorrect: this.incorrect,
status: this.status,
guesser: guesser
};
}

if (guesser) gameState.guesser = guesser;

return gameState;
}

pickRandomWord(words) {
return words[Math.floor(Math.random() * words.length)].toLowerCase();
}

toBlankWord(word) {
return word
.replace(/\w/g, '_')
.split('')
.join(' ');
}

announceGame() {
console.log('New game started: ' + this.word + ' ' + this.blankWord);
console.log(`New game started: ${this.word} --> ${this.blankWord}`);
}
}
17 changes: 12 additions & 5 deletions server/src/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,34 @@ export class Server {

initGame() {
console.log('Initializing Game...');

var game = new Game();
var onlinePlayers = 0;

this.io.on('connection', function(socket) {
onlinePlayers++;
socket.username = 'User'; //Default username
socket.emit('gameInformation', game.getState());

var playerInfo = { count: onlinePlayers, players: ['bob', 'jim'] };
socket.emit('playersOnline', playerInfo);
socket.broadcast.emit('playersOnline', playerInfo);
var playerInfo = {
count: onlinePlayers,
players: ['bob', 'jim']
};

//Emit to socket that connected AND broadcast to all sockets on connection
//so all clients have accurate player count.
socket.emit('playersOnline', playerInfo);
socket.broadcast.emit('playersOnline', playerInfo);

socket.on('setUsername', function(username) {
socket.on('setUsername', function(username = 'User') {
socket.username = username;
});

socket.on('newGuess', function(letter) {
let guess = game.newGuess(letter.toLowerCase());

socket.emit(guess, game.getState(socket.username));
socket.broadcast.emit(guess, game.getState(socket.username));

if (guess === 'gameOver' || guess === 'victory') {
game = new Game();
socket.emit('newGame', game.getState());
Expand Down