// Cloned by Fionn Gallahar Hall on 5 Dec 2022 from World "Websocket chat" by Starter user 
// Please leave this clone trail here.
 


// ==== Starter World =================================================================================================
// This code is designed for use on the Ancient Brain site.
// This code may be freely copied and edited by anyone on the Ancient Brain site.
// To include a working run of this program on another site, see the "Embed code" links provided on Ancient Brain.
// ====================================================================================================================




// Demo of Ancient Brain Websockets functionality. 
// Enter a line of chat and it appears on all clients running this World.


// default body is margin 0 and padding 0 

  $('body').css( "margin", "20px" );
  $('body').css( "padding", "20px" );

 
document.write ( `

<h1> Websockets chat demo </h1>

Run this with multiple users on multiple devices.<br>
Enter a line of chat and it appears on all clients running this World.<br>
If you are logged in, chat is tagged with your name. 
<p>

<div style="width:60vw; background-color:white;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Me </h3>
<INPUT style="width:50vw;" id=me >
<button onclick="sendchat();"     class=ab-normbutton > Send </button> 
</div>

<div style="width:60vw; background-color:#ffffcc;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Them </h3>
<div id=them > </div>
</div>

<div style="width:60vw; background-color:#ffffcc;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Users online </h3>
<div id=themlist > </div>
</div>
 
<pre>

</pre>

<h3>  Send HTML and CSS   </h3> 
Top tip: There is no protection against HTML or CSS injection.
Send HTML and CSS in the chat and you can mess with the other person's page!
Enter this:
<pre> &lt;style> body { background-color:red !important; } &lt;/style> </pre>
Challenges:
<ol>
<li> Enter CSS to set the background image of the other user's page! 
<li> Enter CSS to hide the other user's entire page!
</ol>
<p>

` );



// Enter will also send chat:

	document.getElementById('me').onkeydown   = function(event) 	{ if (event.keyCode == 13)  sendchat(); };


// start socket for this World

AB.socketStart();



// --- Send my line of text to server ----------------------------------------------------------------

function sendchat()
{
  var theline = $("#me").val();
  
  var data = 
  {
    userid:     AB.myuserid,
    username:   AB.myusername,
    line:       theline
  };
  
  AB.socketOut ( data );        // server gets this, and sends the data to all clients running this World
}



// given AB userid, username, construct a link to that user 
// if not run logged in, userid = "none"

function userlink ( userid, username )
{
   if ( userid == "none" ) return ( "Anon user" );
   else                    return ( "<a target='_blank' href='https://ancientbrain.com/user.php?userid=" + userid + "'>" + username + "</a>" );
}


// --- re-define AB socket handler functions -------------------------------------
// re-define these handler functions from default (which is do nothing)

// When someone else enters text, server will trigger AB.socketIn.
// Here I define what to do for it.

AB.socketIn = function(data)
{
   var userhtml = userlink ( data.userid, data.username );
   $("#them").html ( userhtml + ": " + data.line );
};


// At startup, and when list of users changes, server will trigger AB.socketUserlist.  
// Here I define what to do for it.




AB.msg ( <hr> <p> Multiplayer game. Pick a Colour. Click buttons to change boxes on all users' machines. Drag the camera. <p>
  	        <button onclick='cat();'  class=ab-largenormbutton > Cat </button>  
            <button onclick='dog();'  class=ab-largenormbutton > Dog </button>
            <button onclick='lion();'  class=ab-largenormbutton > Lion </button>
            <button onclick='tiger();'  class=ab-largenormbutton > Tiger </button> 
            <br>"You have 10 seconds</font><br><font size=5>Timer: "  Math.round(timer.getElapsedTime()) + "</font>"
         <p> 
)