Skip to content
Snippets Groups Projects
Unverified Commit 6a25ea2c authored by Max Wehmeier's avatar Max Wehmeier
Browse files

Finished the Chat, fixed isClose 

-did some cleaning up to the code of SkribblChat and wrote comments,
that part should now be Finished
-fixed the problem with the _isClose-method
parent 55bc5f47
1 merge request!4Some changes
Hide whitespace changes
Inline Side-by-side
client/logic/SkribblWords.js
+ 4
− 5
View file @ 6a25ea2c
......@@ -51,7 +51,6 @@ export default class SkribblWords {
/**
* Checks whether a given guess is close to the given word. A guess counts as close, if one letter is wrong,
* two letters are swapped or the guess has one letter too much or too little.
* @todo fix it (short words seem cause trouble (sd is close to und))
* @param {string} guess
* @param {string} word
*/
......@@ -91,8 +90,8 @@ export default class SkribblWords {
//if one letter too much
if (guess.length - 1 == word.length) {
let errorCounter = 0; //also the offset
for (var i = 0; i < word.length; i++) {
if (word[i] != guess[i + errorCounter]) {
for (var i = 0; i < guess.length; i++) {
if (word[i - errorCounter] != guess[i]) {
errorCounter++;
if (errorCounter >= 2) {
return false;
......@@ -105,8 +104,8 @@ export default class SkribblWords {
//if one letter too little
if (guess.length + 1 == word.length) {
let errorCounter = 0; //also the offset
for (var i = 0; i < guess.length; i++) {
if (word[i + errorCounter] != guess[i]) {
for (var i = 0; i < word.length; i++) {
if (word[i] != guess[i - errorCounter]) {
errorCounter++;
if (errorCounter >= 2) {
return false;
......
client/ui/SkribblChat.js
+ 42
− 18
View file @ 6a25ea2c
import SkribblClient from "../logic/SkribblClient.js";
import {CustomElement} from "../util/Util.js";
//TODO fix scrolling??
//TODO clean up code
//TODO write comments
/**
* Custom element `<skribbl-chat>` for the chat used to guess words and see others guesses.
......@@ -13,11 +10,12 @@ export default class SkribblChat extends CustomElement {
*/
constructor(client){
super();
this._oldDrawer = -1;
this._oldPlayerCount = client.state.value.players.length;
/** @type {string[]} */
this._guesses = [];
this._guesses = []; //Guesses and the current Position in the GuessList are stored locally
this._guessListPosition = 0;
this._oldDrawer = -1;
this._oldPlayerCount = client.state.value.players.length;
this._client = client;
this.attachShadow({mode:"open"});
this.shadowRoot.innerHTML = `
<style>
......@@ -66,31 +64,36 @@ export default class SkribblChat extends CustomElement {
<input id="input" type="text" placeholder="your guess here!">
</div>
`;
this._client = client;
this._messageDiv = this.shadowRoot.getElementById("messages-inner-container");
/** @type {HTMLInputElement} */// @ts-ignore
this._input = this.shadowRoot.getElementById("input");
this._messageDiv = this.shadowRoot.getElementById("messages-inner-container");
//Player sends guess
this._input.addEventListener("keydown",e=>{
if (e.key=="Enter"&&this._input.value!==""){
this._client.sendGuess(this._input.value);
//add guess to the guesslist
this._guesses[this._guesses.length] = this._input.value;
this._guessListPosition = this._guesses.length;
//send guess to the server
this._client.sendGuess(this._input.value);
this._input.value = "";
} else if (e.key=="ArrowUp"&&this._guessListPosition>0){
} else if (e.key=="ArrowUp"&&this._guessListPosition>0){ //cycle through previous guesses
this._input.value = this._guesses[--this._guessListPosition];
} else if (e.key=="ArrowDown"&&this._guessListPosition<this._guesses.length){
this._input.value = this._guesses[++this._guessListPosition]||"";
}
});
//Player receives messages from other players
client.onGuess(guessData=>{
let playerName = this._client.players.value[guessData.player].name;
let shouldScroll = this._messageDiv.scrollHeight <= this._messageDiv.scrollTop + this._messageDiv.clientHeight + 10;
//The 10 is important because JS is sometimes shit (the scrolling doesnt work properly without it)
//The 10 is important because the scrolling doesnt work properly without it
if (guessData.correct==true) {
let isCorrectPlayer = guessData.player == client.state.value.playerIndex;
//isCorrectPlayer determines if the message will show "You guessed" or "PLAYERNAME guessed"
this._messageDiv.appendChild(_SkribblMessage.createSkribblCorrect(playerName,isCorrectPlayer));
} else if (guessData.close==true) {
} else if (guessData.close==true) { //when it is close, the word will be sent
this._messageDiv.appendChild(_SkribblMessage.createSkribblTextMessage(playerName,guessData.word));
//and only to the player that was close will get an additional message telling them they were close
this._messageDiv.appendChild(_SkribblMessage.createSkribblClose(guessData.word));
} else {
this._messageDiv.appendChild(_SkribblMessage.createSkribblTextMessage(playerName,guessData.word));
......@@ -99,16 +102,20 @@ export default class SkribblChat extends CustomElement {
this._messageDiv.scrollTop = this._messageDiv.scrollHeight - this._messageDiv.clientHeight;
}
},{onlyWhen:this.connected});
//Word is revealed
client.onWordReveal(message=>{
let shouldScroll = this._messageDiv.scrollHeight <= this._messageDiv.scrollTop + this._messageDiv.clientHeight + 10;
//The 10 is important because the scrolling doesnt work properly without it
this._messageDiv.appendChild(_SkribblMessage.createSkribblReveal(message.word));
if (shouldScroll) {
this._messageDiv.scrollTop = this._messageDiv.scrollHeight - this._messageDiv.clientHeight;
}
},{onlyWhen:this.connected});
//There is a new drawer
client._state.onChange(state=>{
let shouldScroll = this._messageDiv.scrollHeight <= this._messageDiv.scrollTop + this._messageDiv.clientHeight + 10;
if (state.hasGameStarted && typeof state.word=="string" && state.drawingPlayer != this._oldDrawer) {
//The 10 is important because the scrolling doesnt work properly without it
if (state.hasGameStarted&&typeof state.word=="string"&&state.drawingPlayer!=this._oldDrawer) {
this._oldDrawer = state.drawingPlayer;
this._messageDiv.appendChild(_SkribblMessage.createSkribblNewDrawer(state.players[state.drawingPlayer].name));
}
......@@ -116,15 +123,18 @@ export default class SkribblChat extends CustomElement {
this._messageDiv.scrollTop = this._messageDiv.scrollHeight - this._messageDiv.clientHeight;
}
},{onlyWhen:this.connected});
//A Player joint/left
client._state.onChange(state=>{
let shouldScroll = this._messageDiv.scrollHeight <= this._messageDiv.scrollTop + this._messageDiv.clientHeight + 10;
//The 10 is important because the scrolling doesnt work properly without it)
if (state.hasGameStarted) {
if (state.players.length > this._oldPlayerCount) {
if (state.players.length > this._oldPlayerCount) { //Player joined
this._messageDiv.appendChild(_SkribblMessage.createSkribblJoin(state.players[state.players.length - 1].name));
this._oldPlayerCount = state.players.length;
} else if (state.players.length < this._oldPlayerCount) {
} else if (state.players.length < this._oldPlayerCount) { //Player left
this._messageDiv.appendChild(_SkribblMessage.createSkribblLeave("WIP"));
this._oldPlayerCount = state.players.length;
//TODO this can only be implemented when players that leave are removed from state.players
}
}
if (shouldScroll) {
......@@ -134,8 +144,12 @@ export default class SkribblChat extends CustomElement {
}
}
/**
* Custom element that generates messages for the chat
*/
class _SkribblMessage extends HTMLElement {
/**
* The constructor is not supposed to be called by anything outside the methods of _SkribblMessage
* @param {string} innerHTML
* @param {string} color
* @param {string} backgroundColor
......@@ -157,6 +171,7 @@ class _SkribblMessage extends HTMLElement {
}
/**
* Creates a chat-message that will be displayed in the format "playerName: message"
* @param {string} playerName
* @param {string} message
*/
......@@ -167,9 +182,11 @@ class _SkribblMessage extends HTMLElement {
}
/**
* @param {string} playerName
* @param {string} message
*/
* Creates a ghost-message that will be displayed in the format "playerName: message"
* ghost-message means that only the drawer and the ones who already guessed correct can see it
* @param {string} playerName
* @param {string} message
*/
static createSkribblGhostMessage(playerName,message) {
let innerHTML = "<b>" + playerName + ":</b> " + message;
let color = "#908070";
......@@ -178,6 +195,7 @@ class _SkribblMessage extends HTMLElement {
}
/**
* Creates a chat-message that reveals the word
* @param {string} word
*/
static createSkribblReveal(word) {
......@@ -188,6 +206,7 @@ class _SkribblMessage extends HTMLElement {
}
/**
* Creates a chat-message that will be sent to only the player who was close and will tell them so
* @param {string} guess
*/
static createSkribblClose(guess) {
......@@ -199,6 +218,8 @@ class _SkribblMessage extends HTMLElement {
}
/**
* Creates a chat-message that will tell everyone when someone guessed the word
* isCorrectPlayer determines if the message will show "You guessed" or "PLAYERNAME guessed"
* @param {string} playerName
* @param {boolean} isCorrectPlayer
*/
......@@ -211,6 +232,7 @@ class _SkribblMessage extends HTMLElement {
}
/**
* Creates a chat-message that will tell everyone when there is a new drawer
* @param {string} playerName
*/
static createSkribblNewDrawer(playerName) {
......@@ -221,6 +243,7 @@ class _SkribblMessage extends HTMLElement {
}
/**
* Creates a chat-message that will tell everyone when someone joined
* @param {string} playerName
*/
static createSkribblJoin(playerName) {
......@@ -231,6 +254,7 @@ class _SkribblMessage extends HTMLElement {
}
/**
* Creates a chat-message that will tell everyone when someone left
* @param {string} playerName
*/
static createSkribblLeave(playerName) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment