Some changes

added message, when guess is close; _isClose and _isCorrect now ignore accents (Umlauts have to be correct) and apostrophs and were moved to SkribblWords

client/ui/SkribblChat.js

@@ -3,7 +3,6 @@ import {CustomElement} from "../util/Util.js";
 
 /**
  * Custom element `<skribbl-chat>` for the chat used to guess words and see others guesses.
- * @todo better scroll functionality (stay stickied to bottom unless specifically scrolled up, subtle css effects where stuff is hidden from view)
  * @todo allow cycling through previous guesses using the arrow keys, like in a terminal
  * @todo write to the chat which player is drawing now
  */
@@ -73,24 +72,54 @@ export default class SkribblChat extends CustomElement {
 		});
 		client.onGuess(guessData=>{
 			let playerName = this._client.players.value[guessData.player].name;
-			this._messageDiv.appendChild(new SkribblGuess(playerName,guessData));
+			this._messageDiv.appendChild(new SkribblGuess(playerName,guessData,client));
+			if (!(this._messageDiv.scrollTop + this._messageDiv.clientHeight === this._messageDiv.scrollHeight)) {
+				this._messageDiv.scrollTop = this._messageDiv.scrollHeight;
+			}
 		},{onlyWhen:this.connected});
 		client.onWordReveal(message=>{
+			this._messageDiv.appendChild(new SkribblMessage(1,message.word));
 			// TODO reveal the word in the chat
 		},{onlyWhen:this.connected});
 	}
 }
+
+export class SkribblMessage extends HTMLElement {
+	/**
+	 * @param {number} type
+	 * @param {string} identifier
+	 */
+
+	constructor(type,identifier) {
+		super();
+		this.attachShadow({mode:"open"});
+		this.shadowRoot.innerHTML = `
+			<style>
+				:host {
+					display: block;
+				}
+			</style>
+			<b id="player_name"></b><span id="message"></span><b id="word_reveal"></b>
+		`;
+		if (type == 1) { //Type 1 is a word reveal
+			this.shadowRoot.querySelector("#message").textContent = "The word was ";
+			this.shadowRoot.querySelector("#word_reveal").textContent = "'" + identifier + "'";
+			this.style.color = "#00bf00";
+		} 
+
+	}
+}
+
 /**
  * Custom element `<skribbl-guess>` that appears in the chat whenever someone tries to guess the word.
- * @todo display message when the word was close
- * @todo refer to the player with "you" when he guesses the word, not using his name
  */
 export class SkribblGuess extends HTMLElement {
 	/**
 	 * @param {string} playerName
 	 * @param {import("../logic/SkribblClient.js").GuessResponse} guess
+	 * @param {SkribblClient} client
 	 */
-	constructor(playerName,guess){
+	constructor(playerName,guess,client){
 		super();
 		this.attachShadow({mode:"open"});
 		this.shadowRoot.innerHTML = `
@@ -104,10 +133,17 @@ export class SkribblGuess extends HTMLElement {
 		`;
 		this._playerName = playerName;
 		this._guess = guess;
+		this._client = client;
+
 		this.shadowRoot.querySelector("#player_name").textContent = playerName;
 		// seems unnecessary, I know. but for some reason IntelliSense won't correctly infer the type in the else block without the `==true`
 		if (guess.correct==true){
-			this.shadowRoot.querySelector("#message").textContent = " has guessed the word!";
+			if (this._guess.player == this._client.state.value.playerIndex) {
+				this.shadowRoot.querySelector("#player_name").textContent = "";
+				this.shadowRoot.querySelector("#message").textContent = "You have guessed the word!"
+			} else {
+				this.shadowRoot.querySelector("#message").textContent = " has guessed the word!";
+			}
 			this.style.color = "#00bf00";
 		}else{
 			this.shadowRoot.querySelector("#message").textContent = `: ${guess.word}`;
@@ -130,4 +166,5 @@ export class SkribblGuess extends HTMLElement {
 	}
 }
 customElements.define("skribbl-chat",SkribblChat);
-customElements.define("skribbl-guess",SkribblGuess);
\ No newline at end of file
+customElements.define("skribbl-guess",SkribblGuess);
+customElements.define("skribbl-message",SkribblMessage);
\ No newline at end of file