Separate the MC packet into music and area change

Historically, MC packet ended up in a ridiculous spot. It had this
single structure:

MC#something#cid#%

It used to change music track to `something`, and the character ID `cid`
was used in clientside muting (blindly trusted, by the way). Then,
this packet was expanded to mean area change as well, so the same
generic structure carried two completely different meanings.

How does one differentiate the two? Whether the client tried to move to
an area `something`, or played a music track called `something`?

The solution was to assume that having ".extension" at the end magically
implied that it was a name of a music file, check the string `something`
within the MC packet, and pray that you guessed correctly. So,
understanding the protocol message required penetrating into one of its
data fields and ambiguously inferring what the whole message even meant.

Modern AO gives us a more logical solution. Not as good as having two
separate packets for two unrelated actions, but we can at least discern
the area and music change directly from the framing.

Area change uses the same two-field structure: MC#area#cid#%

Music change, however, has acquired two additional fields:
MC#music#cid#showname#flags#%

We consider four-field MC to be music change, and two-field MC to be
area change, resolving the ambiguity and eliminating odd constraints
on area and music names.

WebAO still uses the old logic and sends two-field MC packets for both
cases. CSDWASASH server, as a result, thinks that web users try to
change areas when they play music. This commit fixes this behavior and
adds special sendAreaChange instead of using sendMusicChange for both.
The flags are hardcoded to 0 because WebAO can't set fade-in, fade-out,
or position sync, and it ignores the server flags.

4 files changed, 17 insertions, 2 deletions

diff --git a/webAO/client/sender/index.ts b/webAO/client/sender/index.ts
index b9e2b4f..1e10e99 100644
--- a/webAO/client/sender/index.ts
+++ b/webAO/client/sender/index.ts
@@ -6,6 +6,7 @@ import { sendOOC } from "./sendOOC";
 import { sendCharacter } from "./sendCharacter";
 import { sendRT } from "./sendRT";
 import { sendMusicChange } from "./sendMusicChange";
+import { sendAreaChange } from "./sendAreaChange";
 import { sendZZ } from "./sendZZ";
 import { sendEE } from "./sendEE";
 import { sendDE } from "./sendDE";
@@ -47,6 +48,7 @@ export interface ISender {
   sendCharacter: (character: number) => void;
   sendRT: (testimony: string) => void;
   sendMusicChange: (track: string) => void;
+  sendAreaChange: (area: string) => void;
   sendZZ: (msg: string, target: number) => void;
   sendEE: (id: number, name: string, desc: string, img: string) => void;
   sendDE: (id: number) => void;
@@ -62,6 +64,7 @@ export const sender = {
   sendCharacter,
   sendRT,
   sendMusicChange,
+  sendAreaChange,
   sendZZ,
   sendEE,
   sendDE,
diff --git a/webAO/client/sender/sendAreaChange.ts b/webAO/client/sender/sendAreaChange.ts
new file mode 100644
index 0000000..76b97b7
--- /dev/null
+++ b/webAO/client/sender/sendAreaChange.ts
@@ -0,0 +1,9 @@
+import { client } from "../../client";
+
+/**
+ * Requests to change the area.
+ * @param {string} area the area name
+ */
+export const sendAreaChange = (area: string) => {
+  client.sender.sendServer(`MC#${area}#${client.charID}#%`);
+};
diff --git a/webAO/client/sender/sendMusicChange.ts b/webAO/client/sender/sendMusicChange.ts
index 69cba58..328e997 100644
--- a/webAO/client/sender/sendMusicChange.ts
+++ b/webAO/client/sender/sendMusicChange.ts
@@ -1,9 +1,12 @@
 import { client } from "../../client";
+import { escapeChat } from "../../encoding";
 
 /**
  * Requests to change the music to the specified track.
  * @param {string} track the track ID
  */
 export const sendMusicChange = (track: string) => {
-  client.sender.sendServer(`MC#${track}#${client.charID}#%`);
+  const showname = escapeChat((<HTMLInputElement>document.getElementById("ic_chat_name")).value);
+  const flags = 0;
+  client.sender.sendServer(`MC#${track}#${client.charID}#${showname}#${flags}#%`);
 };
diff --git a/webAO/dom/areaClick.ts b/webAO/dom/areaClick.ts
index 27682c7..ae03726 100644
--- a/webAO/dom/areaClick.ts
+++ b/webAO/dom/areaClick.ts
@@ -6,7 +6,7 @@ import { renderPlayerList } from "./renderPlayerList";
  */
 export function area_click(el: HTMLElement) {
   const area = client.areas[el.id.substring(4)].name;
-  client.sender.sendMusicChange(area);
+  client.sender.sendAreaChange(area);
 
   const areaHr = document.createElement("div");
   areaHr.className = "hrtext";