Code viewer [Ancient Brain]

Code viewer for World: Websocket chat

// ==== 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>

<pre>

</pre>

<h3>  Send JS   </h3> 
You can send JS to the other window! <br> 
e.g. Enter the following to force reload the other user's page:
<pre> &lt;script> window.location.reload(); &lt;/script> </pre>
Find out more crazy things you can do by injecting JS into their window!

<pre>

</pre>

` );



// 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.socketUserlist = function ( a ) 
{ 
    console.log ( "Got user list: " );
    console.log ( JSON.stringify ( a, null, ' ' ) );

    if ( a.length < 2 )  
    { 
        $("#themlist").html ( "<h3 style='color:red'> You are alone. Get someone else to run this World. </h3>"); 
        return; 
    }
    
    // else  
    var str = " <ol> ";
    for (var i = 0; i < a.length; i++) 
    {
        var userhtml = userlink ( a[i][0], a[i][1] );
        str = str + " <li> " + userhtml ;
    }
    $("#themlist").html ( str + " </ol> " );
};