Mööööörge

This implements the functionality of avatar selector in the menu. However, the pictures (inc. Arrows) need to be remade by hand and the displacement when a user wants to change the avatar needs to be tuned to proper values.

This is a merge to have local changes in the master branch. There is still work to be done, as the design is not the best and I'm unsure about how to save the avatar and display them in other areas like the actual game

client/SkribblMenu.js

@@ -13,9 +13,24 @@ export default class SkribblMenu extends HTMLElement {
 					border-radius: 10px;
 					padding: 15px;
 				}
+				.characterSelector {
+					color: red;
+					margin: auto;
+					text-align: center
+					display:inline-block;
+				}
+				#ColorButtons{
+					text-align: center
+				}
 			</style>
-			<input type="text">
+			<div class="w3-container" id="ColorButtons"> 
+			<button class="characterSelector">&#8592</button>
+			<img alt="CharacterLook">
+			<button class="characterSelector">&#8594</button>
+			</div>
+			<input type="text" placeholder="Your Name">
 			<button>Play</button>
+
 		`;
 		this._nameInput = this.shadowRoot.querySelector("input");
 		this._playButton = this.shadowRoot.querySelector("button");