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,27 @@ 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=>{
 			// TODO reveal the word in the chat
 		},{onlyWhen:this.connected});
 	}
 }
+
 /**
  * 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 +106,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}`;