Custom div-element: Dialog box

Question

So...Here goes.

I've been using a div element, a dialog box, where I place all the dialog between characters and the player.

This is what I've been using:

Javascript:

$('<div id="dialogue-bar"></div>').appendTo(document.body);

CSS:

#dialogue-bar {
	position: fixed;
	z-index: 50;
  	background-color:white;
	border: #fff double 0.4em;
	height: 21%;
	right: 0.25em;
	left: 21%;
  	bottom: 0.25em;
  	margin-left:0.75%;	
	padding: 1.5em;
  	margin-top:auto;
  	margin-bottom:auto;
 }

 In the passage:

<<replace "#dialogue-bar">><<set document.getElementById("dialogue-bar").style.visibility = "visible">>
<<display "dialogue">><</replace>>

PassageReady:

<<set document.getElementById("dialogue-bar").style.visibility = "hidden">>

And this has been working perfectly.

At least so far, as I've had only conversations between the player and 1 npc. 

However, in my game, there are now more than 1 npcs interacting with each other and with the player. And this is where it starts getting complicated.

I've bee using things like these to style each character,

@@.player;«The player says something»@@
@@.npc;«The npc responds.»@@
@@.npc1;«And the other one intervenes»@@
@@.player;«so on and on...»@@

But it may get confusing after a while, and you loose track of who's saying what.

My idea, and my question is how to add an area inside the dialogue box (or appended) where I could put the name of the character who's speaking. 

I feel like this could get very complicated, specially because I already have so much code going on in the "dialogue" displayed passage, and I have close to no knowledge about javascript, but it seems I would have to link the character speaking, so for example, the class in question (@@.npc, or @@player or whatever...), and create some output in that appended area to show their name... 

And my brain just melted... I really have no idea how to make this happen, but it would be an incredible upgrade for my game, which is heavily based in dialog. 

If anyone has ANY idea how to make this happen, how to make even part of this happen, I would be very grateful! Thanks :)

Answer 1

Is simply prepending the name of the speaker to each line not palatable for some reason?  For example:

@@.player;Jane Doe: «The player says something»@@
@@.npc;Colt Seavers: «The npc responds.»@@
@@.npc1;Howie Munson: «And the other one intervenes»@@
@@.player;Jane Doe: «so on and on...»@@

If you have variables for the various characters, at least their names, that could be modified to something like:

@@.player;$player: «The player says something»@@
@@.npc;$npc: «The npc responds.»@@
@@.npc1;$npc1: «And the other one intervenes»@@
@@.player;$player: «so on and on...»@@

Which would free you from having to type each name out over and over, which is asking for fat-fingering errors.

Having mentioned fat-fingering.  Regardless of whether something like the above is palatable or not, you're getting to the point where you're probably better off wrapping the creation of these lines dialog in a widget or custom macro to make doing them both less of a hassle and error prone.