WebRTC-TicTacToe code snippets

01.html

<div id="tic-tac-box" style="float: left; width: 47%;"></div>
<div style="float: left; width: 50%;">
    <div id="video-chat" hidden="true">
		<div id="vid-box"></div>
		<button onclick="end()">End Call</button>
    </div>
    <form name="loginForm" id="login" action="#" onsubmit="return login(this);">
        	<input type="text" name="username" id="username" placeholder="Enter A Username"/>            
			<input type="submit" name="login_submit" value="Log In">
    </form>
	<form name="callForm" id="call" action="#" onsubmit="return makeCall(this);">
        <input type="text" name="number" id="call" placeholder="Enter User To Call!"/>
        <input type="submit" value="Call">
	</form>
</div>

02.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.pubnub.com/pubnub-3.7.23.min.js"></script>
<script src="http://kevingleason.me/WebRTC-TicTacToe/js/webrtc-2.0.0.js"></script>
<script src="http://kevingleason.me/WebRTC-TicTacToe/js/tictactoe.js"></script>

03.js

var video_hold = document.getElementById("video-chat");
var video_out  = document.getElementById("vid-box");

function login(form) {
	user_name = form.username.value || "Anonymous";
	var phone = window.phone = PHONE({
	    number        : user_name, // listen on username line else Anonymous
	    publish_key   : 'your_pub_key',
	    subscribe_key : 'your_sub_key',
	    datachannels  : true,  // Enable Data Channels
	});	
	phone.ready(function(){ form.username.style.background="#55ff5b"; form.login_submit.hidden="true"; });
	phone.receive(function(session){
	    session.connected(function(session) { video_hold.hidden=false; video_out.appendChild(session.video); });
	    session.ended(function(session) { video_out.innerHTML=''; });
	});
	... // Prepare Data Channel
	return false;
}

04.js

function makeCall(form){
    if (!window.phone) alert("Login First!");
    else phone.dial(form.number.value);
    return false;
}

05.js

function end(){
	if (!window.phone) return;
	window.phone.hangup();
	video_hold.hidden = true;
}

06.js

var game_board = document.getElementById("tic-tac-box");
var user_name = "";

07.js

var game_board = ticTacToe(game_board);

08.js

game_board.onSquareClicked(
	function(squareNum){  // Number of the box that was clicked
		if (!window.phone) return;
		var data = {square:squareNum, username:user_name};
		window.phone.sendData(data);
	}
)

09.js

function onDataReceived(msg){
	var sqr_num = msg.square;
	game_board.markBox(sqr_num);
}

10.js

function login(form) {
	// Setup phone
	// Ready and Receive Callbacks
	...
	phone.datachannel(onDataReceived);
	return false;
}