// Cloned by Yiming Fu on 1 Dec 2022 from World "Websocket buttons" 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. 
// Click button and it changes colour in all clients. 

const yellow 	= "#ffffcc";
const grey		= "#eeeeee";


// default body is margin 0 and padding 0 

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

 
document.write ( `

<h1> Websockets test </h1>

Run this on two different devices.
<p>
Click button to  set background color  in all runs on all devices:
<p>

 <button onclick="setYellow();"   class=ab-largenormbutton > Yellow </button> 
 <button onclick="setGrey();"     class=ab-largenormbutton > Grey </button> 

` );




// start socket for this World

AB.socketStart();



// --- When I click, set the color and send info to server ----------------------------------------------------------------

function setYellow()
{
  document.body.style.background = yellow;
  sendtoServer(yellow);
}

function setGrey()
{
  document.body.style.background = grey;
  sendtoServer(grey);
}

function sendtoServer ( thecolor )
{  
  var data = 
  {
   color: thecolor
  };
  
  AB.socketOut ( data );        // server gets this, and sends the data to all clients running this World
}



// --- When someone else clicks, server will send me a message and I can set the color -------------------------------------
// define what to do when we get incoming data on the socket: 

AB.socketIn = function(data)
{
    document.body.style.background = data.color;
};