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

 import SkribblClient from "../logic/SkribblClient.js";
 import {CustomElement} from "../util/Util.js";
-//TODO try and make SkribblMessage and SkribblGuess into one class
-//TODO cosmetics (make the chat look good)
 //TODO clean up code
+//TODO fix scrolling
 
 /**
  * Custom element `<skribbl-chat>` for the chat used to guess words and see others guesses.
  * @todo allow cycling through previous guesses using the arrow keys, like in a terminal
  * @todo write to the chat which player is drawing now
+ * @todo write to chat when players join/leave
  */
 export default class SkribblChat extends CustomElement {
 	/**
@@ -75,26 +75,34 @@ export default class SkribblChat extends CustomElement {
 		});
 		client.onGuess(guessData=>{
 			let playerName = this._client.players.value[guessData.player].name;
-			let skribblGuess = new SkribblGuess(playerName,guessData,client);
 			let shouldScroll = !(this._messageDiv.scrollHeight > this._messageDiv.scrollTop + this._messageDiv.clientHeight);
-			this._messageDiv.appendChild(skribblGuess);
+			console.log(this._messageDiv.scrollHeight + ";" + this._messageDiv.scrollTop + ";" + this._messageDiv.clientHeight);
+			if (guessData.correct==true) {
+				let isCorrectPlayer = guessData.player == client.state.value.playerIndex;
+				this._messageDiv.appendChild(SkribblMessage.createSkribblCorrect(playerName,isCorrectPlayer));
+			} else if (guessData.close==true) {
+				this._messageDiv.appendChild(SkribblMessage.createSkribblTextMessage(playerName,guessData.word));
+				this._messageDiv.appendChild(SkribblMessage.createSkribblClose(guessData.word));
+			} else {
+				this._messageDiv.appendChild(SkribblMessage.createSkribblTextMessage(playerName,guessData.word));
+			}
 			if (shouldScroll) {
 				this._messageDiv.scrollTop = this._messageDiv.scrollHeight - this._messageDiv.clientHeight;
 			}
 		},{onlyWhen:this.connected});
 		client.onWordReveal(message=>{
-			this._messageDiv.appendChild(new SkribblMessage(1,message.word));
+			this._messageDiv.appendChild(SkribblMessage.createSkribblReveal(message.word));
 		},{onlyWhen:this.connected});
-		//TODO Message which player is drawing now
+		//TODO Message which player is drawing now; onChange new Player, new drawer
 	}
 }
 
-export class SkribblMessage extends HTMLElement {
+class SkribblMessage extends HTMLElement {
 	/**
-	 * @param {number} type
-	 * @param {string} identifier
+	 * @param {string} innerHTML
+	 * @param {string} color
 	 */
-	constructor(type,identifier) {
+	constructor(innerHTML,color) {
 		super();
 		this.attachShadow({mode:"open"});
 		this.shadowRoot.innerHTML = `
@@ -103,75 +111,55 @@ export class SkribblMessage extends HTMLElement {
 					display: block;
 				}
 			</style>
-			<b id="player_name"></b><span id="message"></span><b id="word_reveal"></b>
+			<span></span>
 		`;
-		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";
-		} else if (type == 2) { //Type 2 is a new drawer
-			this.shadowRoot.querySelector("#player_name").textContent = "'" + identifier + "'";
-			this.shadowRoot.querySelector("#message").textContent = " is drawing now!";
-			this.style.color = "#00bf00";
-		}
+		this.shadowRoot.querySelector("span").innerHTML = innerHTML;
+		this.style.color = color;
 	}
-}
 
-/**
- * Custom element `<skribbl-guess>` that appears in the chat whenever someone tries to guess the word.
- */
-export class SkribblGuess extends HTMLElement {
 	/**
 	 * @param {string} playerName
-	 * @param {import("../logic/SkribblClient.js").GuessResponse} guess
-	 * @param {SkribblClient} client
+	 * @param {string} message
 	 */
-	constructor(playerName,guess,client){
-		super();
-		this.attachShadow({mode:"open"});
-		this.shadowRoot.innerHTML = `
-			<style>
-				:host {
-					display: block;
-				}
-			</style>
-			<b id="player_name"></b><span id="message"></span>
-			<br><b id="guess_word" style="color:#649E64"></b><span id="isClose" style="color:#649E64"></span>
-		`;
-		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){
-			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}`;
-		}
+	static createSkribblTextMessage(playerName,message) {
+		let innerHTML = "<b>" + playerName + ":</b> " + message;
+		let color =  "#000000";
+		let element = new SkribblMessage(innerHTML,color);
+		return element;
+	}
 
-		if ((guess.correct!=true) && (guess.close==true)) {
-			this.shadowRoot.querySelector("#guess_word").textContent = "'" + guess.word + "'";
-			this.shadowRoot.querySelector("#isClose").textContent = " is close!";
-		}
+	/**
+	 * @param {string} word
+	 */
+	static createSkribblReveal(word) {
+		let innerHTML = "The word was <b>'" + word + "'</b>";
+		let color =  "#00bf00";
+		let element = new SkribblMessage(innerHTML,color);
+		return element;
 	}
 
-	/** @readonly */
-	get playerName(){
-		return this._playerName;
+	/**
+	 * @param {string} guess
+	 */
+	static createSkribblClose(guess) {		
+		let innerHTML = "<b>'" + guess + "'</b> is close!";
+		let color =  "#649E64";
+		let element = new SkribblMessage(innerHTML,color);
+		return element;
 	}
 
-	/** @readonly */
-	get word(){
-		return this._guess.word;
+	/**
+	 * @param {string} playerName
+	 * @param {boolean} isCorrectPlayer
+	 */
+	static createSkribblCorrect(playerName,isCorrectPlayer) {
+		let name = (isCorrectPlayer) ? "You have" : "<b>" + playerName + "</b> has" ;
+		let innerHTML = name + " guessed the word!";
+		let color =  "#00bf00";
+		let element = new SkribblMessage(innerHTML,color);
+		return element;
 	}
 }
+
 customElements.define("skribbl-chat",SkribblChat);
-customElements.define("skribbl-guess",SkribblGuess);
-customElements.define("skribbl-message",SkribblMessage);
\ No newline at end of file
+customElements.define("skribbl-messaage",SkribblMessage);
\ No newline at end of file