chat + camera changes

- Added support for chat (closes #1)
- Player color names used instead of ids
- Doubled camera speed
- Aliased wasd to camera movements
- Change Large hotkey from w to e

src/index.html

@@ -13,6 +13,8 @@
             <div id="energy"></div>
         </div>
         <div id="scores"></div>
+        <div id="chat-log"></div>
+        <input id="chat-input" maxLength="250"></input>
     </div>
     <script type="module" src="index.js"></script>
 </body>

src/pathing/PathingMap.js

@@ -971,7 +971,7 @@ export default class Tilemap {
 		const host = this.elem || ( this.elem = ( () => {
 
 			const elem = document.createElement( "div" );
-			document.body.appendChild( elem );
+			document.getElementById( "arena" ).appendChild( elem );
 
 			return elem;
 

src/players/camera.js

@@ -3,14 +3,21 @@ import game from "../index.js";
 import { WORLD_TO_GRAPHICS_RATIO } from "../constants.js";
 import tweenPoints from "../util/tweenPoints.js";
 
-const CAMERA_SPEED = 300;
+const CAMERA_SPEED = 600;
 
 const arena = document.getElementById( "arena" );
 let keyboard;
 let knownRound;
 let requestedAnimationFrame;
 let pan;
 
+const wasdMap = {
+	w: "ArrowUp",
+	a: "ArrowLeft",
+	s: "ArrowDown",
+	d: "ArrowRight",
+};
+
 window.addEventListener( "keydown", e => {
 
 	if ( ! game.round ) return;
@@ -23,10 +30,11 @@ window.addEventListener( "keydown", e => {
 	}
 	knownRound = game.round;
 
-	if ( e.key.startsWith( "Arrow" ) && ! keyboard[ e.key ] ) {
+	const key = wasdMap[ e.key ] || e.key;
+	if ( key.startsWith( "Arrow" ) && ! keyboard[ e.key ] ) {
 
 		if ( pan ) pan = undefined;
-		keyboard[ e.key ] = true;
+		keyboard[ key ] = true;
 		if ( ! requestedAnimationFrame ) renderCamera();
 
 	}
@@ -37,8 +45,9 @@ window.addEventListener( "keyup", e => {
 
 	if ( ! game.round || ! keyboard ) return;
 
-	if ( e.key.startsWith( "Arrow" ) )
-		keyboard[ e.key ] = false;
+	const key = wasdMap[ e.key ] || e.key;
+	if ( key.startsWith( "Arrow" ) )
+		keyboard[ key ] = false;
 
 } );
 

src/players/chat.js

@@ -0,0 +1,72 @@
+
+import network from "../network.js";
+import game from "../index.js";
+
+const chatLog = document.getElementById( "chat-log" );
+const chatInput = document.getElementById( "chat-input" );
+
+class Chat {
+
+	activate() {
+
+		chatInput.style.visibility = "visible";
+		chatInput.focus();
+
+	}
+
+	onEnter() {
+
+		chatInput.style.visibility = "hidden";
+		network.send( { type: "chat", message: chatInput.value } );
+		chatInput.value = "";
+
+	}
+
+}
+
+const chat = new Chat();
+
+window.addEventListener( "keydown", e => {
+
+	if ( ! chat.active && e.key === "Enter" ) chat.activate();
+
+} );
+
+chatInput.addEventListener( "keydown", e => {
+
+	e.stopPropagation();
+	if ( e.key === "Enter" ) chat.onEnter();
+
+} );
+
+const maxLength = 250;
+network.addEventListener( "chat", ( { connection, message } ) => {
+
+	message = message.slice( 0, maxLength );
+
+	const player = game.players.find( p => p.id === connection );
+	if ( ! player ) return;
+
+	const entry = document.createElement( "div" );
+
+	const playerName = document.createElement( "span" );
+	playerName.textContent = player.color.name;
+	playerName.style.color = player.color.hex;
+	entry.appendChild( playerName );
+
+	const rest = document.createTextNode( `: ${message}` );
+	entry.append( rest );
+
+	chatLog.appendChild( entry );
+
+	setTimeout( () => {
+
+		entry.style.opacity = "0";
+		setTimeout( () => entry.remove(), maxLength * 50 );
+
+	}, 5000 + message.length * 50 );
+
+} );
+
+export default chat;
+

src/players/elo.js

@@ -46,7 +46,7 @@ export const updateDisplay = () => {
 	game.players.forEach( player => {
 
 		const playerName = document.createElement( "span" );
-		playerName.textContent = player.id;
+		playerName.textContent = player.color.name;
 		playerName.style.color = player.color.hex;
 		playerName.classList.add( "player" );
 		container.appendChild( playerName );

src/players/playerLogic.js

@@ -9,6 +9,7 @@ import {
 } from "./colors.js";
 import { updateDisplay } from "./elo.js";
 import Random from "../lib/alea.js";
+import "./chat.js";
 
 const newPlayer = data => {
 

src/sprites/Crosser.js

@@ -7,7 +7,7 @@ import game from "../index.js";
 import { stop as stopPlacement, active as activePlacement } from "./obstructionPlacement.js";
 import Blueprint from "./obstructions/Blueprint.js";
 
-const BUILD_DISTANCE = 1.75;
+const BUILD_DISTANCE = 2;
 
 export default class Crosser extends Unit {
 
@@ -61,23 +61,29 @@ export default class Crosser extends Unit {
 							owner: this.owner,
 						} );
 
-						pathingMap.removeEntity( this );
+						pathingMap.withoutEntity( this, () => {
 
-						if ( pathingMap.pathable( obstruction, target.x, target.y ) ) {
+							if ( pathingMap.pathable( obstruction, target.x, target.y ) ) {
 
-							pathingMap.addEntity( obstruction );
-							this.obstructions.push( obstruction );
+								pathingMap.addEntity( obstruction );
+								this.obstructions.push( obstruction );
 
-						} else
-							obstruction.kill( { removeImmediately: true } );
+							} else
+								obstruction.kill( { removeImmediately: true } );
 
-						const position = pathingMap.nearestSpiralPathing( x, y, this );
-						Object.assign( this, position );
-						pathingMap.addEntity( this );
+							const position = pathingMap.nearestSpiralPathing( x, y, this );
+							Object.assign( this, position );
+
+						} );
 
 						// Otherwise assign final coordinates
 
-					} else Object.assign( this, { x, y } );
+					} else {
+
+						Object.assign( this, { x, y } );
+						pathingMap.updateEntity( this );
+
+					}
 
 				} else {
 

src/sprites/spriteLogic.js

@@ -33,7 +33,7 @@ const hotkeys = {
 		type: "build",
 		obstruction: Tiny,
 	},
-	w: {
+	e: {
 		type: "build",
 		obstruction: Large,
 	},

src/style.css

@@ -4,7 +4,9 @@ body {
 	background-color: #333;
 	max-width: 100vw;
 	max-height: 100vh;
-	overflow: hidden;
+    overflow: hidden;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    text-shadow: black 1px 1px 0.125em;
 }
 
 #arena {
@@ -109,9 +111,46 @@ body {
     border-radius: 0.25em;
     box-shadow: 0 0 1em 0.125em rgba(70, 145, 246, 0.9);
     padding: 0.25em 0.5em;
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
-    text-shadow: black 1px 1px 0.125em;
 }
 
 #scores span { padding: 0.25em; }
-#scores .score { text-align: right; }
+#scores .score { text-align: right; }
+
+#chat-log {
+    position: absolute;
+    bottom: 8em;
+    left: 1em;
+    color: white;
+    font-weight: bold;
+    max-width: 20em;
+    word-break: break-word;
+    text-indent: -1em;
+    margin-left: 1em;
+    font-size: 90%;
+}
+
+#chat-log div {
+    opacity: 1;
+    transition: 1s;
+}
+
+#chat-input {
+    visibility: hidden;
+    position: absolute;
+    bottom: 4em;
+    width: 90%;
+    max-width: 30em;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0.5em;
+    background: rgba(70, 145, 246, 0.5);
+    color: white;
+    font-size: 100%;
+    font-weight: bold;
+    border: none;
+    box-shadow: 0 0 0.125em 0.125em rgba(70, 145, 246, 0.9);
+    outline: none;
+    font-family: inherit;
+    text-shadow: inherit;
+}
+