:: StoryTitle
Yggdrasil TwineClient


:: StoryData
{ "ifid": "E707D714-6543-4DC0-B8FF-A1394A788C89" }


:: StoryInit
<!-- Reset to Start passage on page reload. -->
<<goto Start>>


:: Start

-*<<print self.location.protocol >>*-
-*<<print self.location.host >>*-
-*<<print self.location.pathname >>*-
-*<<print self.location.search >>*-

<<timed 1s>><<goto Connect>><</timed>>


:: Connect

<<include StdMiddleLayout>>


:: StdMiddleLayout

<div style="display: flex; flex-direction:column; justify-content:space-between; height: 100%">

	<div id="viewArea">
		<h2>Yggdrasil TwineClient v<<print TwineClient.version>></h2>
	</div>
	
	<div id="actionArea" style="flex-grow: 1; overflow-y: auto;"></div>
	
	<div id="inputArea">
		<input spellcheck="false" id="cmdbar" type="text" style="width: 98.3%" />
		<<repeat 100ms>>
			<<run $('#cmdbar').focus(); >>
		<</repeat>>
	</div>
	
</div>

<<timed 2s>>
<<script>>
	if( !TwineClient.socket )
	{
		$('#actionArea').append( "Connecting to "+TwineClient.host+":"+TwineClient.port+"...<br/>" );
		const socket = new WebSocket( "ws://"+TwineClient.host+":"+TwineClient.port );
		TwineClient.socket = socket;
		socket.binaryType = "arraybuffer";
		socket.addEventListener( 'open', (event) =>
				{
					$('#actionArea').append( "Connected.<br/><br/>" );
				});
		socket.addEventListener('message', (event) =>
				{
					var s = new TextDecoder("utf-8").decode(new Uint8Array(event.data));
					console.log( s );
	    			$('#actionArea').append( s.replace(/\n/g, '<br />')+"<br/>" );
	    		});
		socket.addEventListener('error', (event) =>
				{
	    			$('#actionArea').append( "Error: "+event.data+"<br/>" );
	    		});
		socket.addEventListener('close', (event) =>
				{
	    			$('#actionArea').append( "Closed: "+event.data+"<br/>" );
	    		});
    }
<</script>>
<</timed>>

<<repeat 2s>>
	<<script>>
		//if( TwineClient.socket )
		//{
			//TwineClient.socket.send( 'Lee\n' );
			//$('#actionArea').append( '*' );
		//}
	<</script>>
<</repeat>>