okaq/doka.html

## doka.html

<!DOCTYPE html>
<html lang="en">
    <head id="zeta">
        <title>okaq</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=1920,height=1080,initial-scale=1" />
        <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAMklEQVR4nGLhfLGBgZaAiaamj1owasGoBaMWjFowasGoBaMWjFowasGoBVQEgAAAAP//cfIB5JfeIs4AAAAASUVORK5CYII=" />
        <style type="text/css">
            html,body{width:1920px;height:1080px;background-color:rgba(4,16,16,1.0);}
        </style>
        <script type="text/javascript">
            // ok
        console.log("hello vobu doka!");
        // async load
        (function() {
         var async_load = function() {
            g.init();
            }
            window.addEventListener("load", async_load, false);
            })();
// game
var g = {
    "init": function() {
        console.log("g init");
        c.init();
        d.init();
        g.start = 0.0;
        g.id = window.requestAnimationFrame(r.loop);
        w.init();
    }
}
// webrtc
var w = {
    "init": function() {
        w.ice = [];

        w.word = w.msg();
        console.log(w.word);

        w.pc = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
        // console.log(w.pc);
        for (obj in w.pc.prototype) {
            // console.log(obj);
        }
        w.servers = null;
        w.opt = {"optional": [{"RtpDataChannels": true}]};
        w.peer = new w.pc(w.servers, w.opt);
        w.crown = new w.pc(w.servers, w.opt);
        /*
        console.log(w.peer);
        for (obj in w.peer) {
            console.log(obj);
            }
            */
        w.wa = w.peer.createDataChannel("wa", {"reliable":false});
        /*
        console.log(w.wa);
        for (obj in w.wa) {
            console.log(obj);
            }
            */
        console.log(w.wa.protocol);
        console.log(w.wa.readyState);

        w.ba = {};
        w.ba.onclose = function(){return;};
        w.peer.onicecandidate = w.onicep;
        w.wa.onopen = w.onopen;
        // w.wa.onclose = w.onopen;
        w.crown.onicecandidate = w.onicec;
        w.crown.ondatachannel = w.ondata;
        // w.peer.createOffer(w.desc);
        w.start();
        // ice candidates
        w.send();
        // w.end();
    },
    "msg": function(n0) {
        var n1 = n0 || (((Math.random() * 16) + 16) >>> 0);
        return uni.word(97, 123, n1);
    },
    "start": function() {
        w.peer.createOffer(w.desc); // define and send desc to answerer
    },
    "send": function() {
        w.word = w.msg();
        console.log("sending: " + w.word);
        if (w.wa.readyState != "open") {
            console.log("readyState: " + w.wa.readyState + " " + w.ba.readyState);
            return;
        }
        // w.word = w.msg();
        // console.log("sending: " + w.word);
        w.wa.send(w.word);
    },
    "end": function() {
        w.wa.close();
        w.ba.close();
        w.peer.close();
        w.crown.close();
    },
    "desc": function(e) {
        console.log(e);
        w.peer.setLocalDescription(e);
        w.crown.setRemoteDescription(e);
        w.crown.createAnswer(w.command);
    },
    "command": function(e) {
        console.log(e);
        w.crown.setLocalDescription(e);
        w.peer.setRemoteDescription(e);
    },
    "onicep": function(e) {
        // w.peer.dispatchEvent(e);
        console.log("onicep: " + e.candidate);
        if (e.candidate) {
            w.crown.addIceCandidate(e.candidate);
        }
    },
    "onicec": function(e) {
        console.log("onicec: " + e.candidate);
        if (e.candidate) {
            w.peer.addIceCandidate(e.candidate);
        }
    },
    "onopen": function(e) {
        console.log(e);
    },
    "ondata": function(e) {
        console.log("ondata: " + e.channel);
        w.ba = e.channel;
        w.ba.onmessage = function(e) {console.log(e)};
    }
}
// dom
var d = {
    "init": function() {
        d.alpha = document.getElementById("alpha");

        d.beta = {};
        d.beta.can = document.createElement("canvas");
        d.beta.con = d.beta.can.getContext("2d");
        d.beta.can.width = 786;
        d.beta.can.height = 786;
        d.beta.can.style.position = "absolute";
        d.beta.can.style.top = "64px";
        d.beta.can.style.left = "64px";
        d.alpha.appendChild(d.beta.can);

        console.log(d.beta.can, d.beta.con);

        r.clear();
    }
}
// render
var r = {
    "loop": function(timestamp) {
        // console.log(timestamp);
        var delta = timestamp - g.start;
        // console.log(delta);
        if (delta >= 2000) {
            r.clear();
            c.rand();
            d.beta.con.fillStyle = c.css();
            d.beta.con.fillRect(0,0,d.beta.can.width,d.beta.can.height);
            g.start = timestamp;
            // console.log(delta);
            w.send();
        }
        g.id = window.requestAnimationFrame(r.loop);
    },
    "clear": function() {
        c.rand();
        d.beta.con.fillStyle = c.css();
        d.beta.con.fillRect(0,0,d.beta.can.width,d.beta.can.height);

    }
}
// color
var c = {
    "init": function() {
        c.data = new Uint8Array(4);
        c.rand();
    },
    "rand": function() {
        for (var i = 0; i < c.data.length; i++) {
            c.data[i] = c.rb();
        }
        // console.log(c.data);
    },
    "rb": function() {
        return ((Math.random() * 255) >>> 0);
    },
    "css": function() {
        s0 = "rgba(";
        for (var i = 0; i < 3; i++) {
            s0 += c.data[i].toString();
            s0 += ",";
        }
        s0 += (c.data[3] / 255.0).toString();
        s0 += ")";

        return s0;
    }
}
// unicode
var uni = {
    "rand": function(lo, hi) {
        var d0 = (hi - lo) >>> 0;
        var d1 = ((Math.random() * d0) + lo) >>> 0;
        return String.fromCharCode(d1);
    },
    "word": function(lo, hi, n0) {
        var r0 = [];
        for (var i = 0; i < n0; i++) {
            r0.push(uni.rand(lo, hi));
        }
        return r0.join("");
    }
}
        </script>
    </head>
    <body id="alpha">
    </body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head id="zeta">
	<title>okaq</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta name="viewport" content="width=1920,height=1080,initial-scale=1" />
	<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAMklEQVR4nGLhfLGBgZaAiaamj1owasGoBaMWjFowasGoBaMWjFowasGoBVQEgAAAAP//cfIB5JfeIs4AAAAASUVORK5CYII=" />
	<style type="text/css">
	html,body{width:1920px;height:1080px;background-color:rgba(4,16,16,1.0);}
	</style>
	<script type="text/javascript">
	// ok
	console.log("hello vobu doka!");
	// async load
	(function() {
	var async_load = function() {
	g.init();
	}
	window.addEventListener("load", async_load, false);
	})();
	// game
	var g = {
	"init": function() {
	console.log("g init");
	c.init();
	d.init();
	g.start = 0.0;
	g.id = window.requestAnimationFrame(r.loop);
	w.init();
	}
	}
	// webrtc
	var w = {
	"init": function() {
	w.ice = [];

	w.word = w.msg();
	console.log(w.word);

	w.pc = window.mozRTCPeerConnection \|\| window.webkitRTCPeerConnection;
	// console.log(w.pc);
	for (obj in w.pc.prototype) {
	// console.log(obj);
	}
	w.servers = null;
	w.opt = {"optional": [{"RtpDataChannels": true}]};
	w.peer = new w.pc(w.servers, w.opt);
	w.crown = new w.pc(w.servers, w.opt);
	/*
	console.log(w.peer);
	for (obj in w.peer) {
	console.log(obj);
	}
	*/
	w.wa = w.peer.createDataChannel("wa", {"reliable":false});
	/*
	console.log(w.wa);
	for (obj in w.wa) {
	console.log(obj);
	}
	*/
	console.log(w.wa.protocol);
	console.log(w.wa.readyState);

	w.ba = {};
	w.ba.onclose = function(){return;};
	w.peer.onicecandidate = w.onicep;
	w.wa.onopen = w.onopen;
	// w.wa.onclose = w.onopen;
	w.crown.onicecandidate = w.onicec;
	w.crown.ondatachannel = w.ondata;
	// w.peer.createOffer(w.desc);
	w.start();
	// ice candidates
	w.send();
	// w.end();
	},
	"msg": function(n0) {
	var n1 = n0 \|\| (((Math.random() * 16) + 16) >>> 0);
	return uni.word(97, 123, n1);
	},
	"start": function() {
	w.peer.createOffer(w.desc); // define and send desc to answerer
	},
	"send": function() {
	w.word = w.msg();
	console.log("sending: " + w.word);
	if (w.wa.readyState != "open") {
	console.log("readyState: " + w.wa.readyState + " " + w.ba.readyState);
	return;
	}
	// w.word = w.msg();
	// console.log("sending: " + w.word);
	w.wa.send(w.word);
	},
	"end": function() {
	w.wa.close();
	w.ba.close();
	w.peer.close();
	w.crown.close();
	},
	"desc": function(e) {
	console.log(e);
	w.peer.setLocalDescription(e);
	w.crown.setRemoteDescription(e);
	w.crown.createAnswer(w.command);
	},
	"command": function(e) {
	console.log(e);
	w.crown.setLocalDescription(e);
	w.peer.setRemoteDescription(e);
	},
	"onicep": function(e) {
	// w.peer.dispatchEvent(e);
	console.log("onicep: " + e.candidate);
	if (e.candidate) {
	w.crown.addIceCandidate(e.candidate);
	}
	},
	"onicec": function(e) {
	console.log("onicec: " + e.candidate);
	if (e.candidate) {
	w.peer.addIceCandidate(e.candidate);
	}
	},
	"onopen": function(e) {
	console.log(e);
	},
	"ondata": function(e) {
	console.log("ondata: " + e.channel);
	w.ba = e.channel;
	w.ba.onmessage = function(e) {console.log(e)};
	}
	}
	// dom
	var d = {
	"init": function() {
	d.alpha = document.getElementById("alpha");

	d.beta = {};
	d.beta.can = document.createElement("canvas");
	d.beta.con = d.beta.can.getContext("2d");
	d.beta.can.width = 786;
	d.beta.can.height = 786;
	d.beta.can.style.position = "absolute";
	d.beta.can.style.top = "64px";
	d.beta.can.style.left = "64px";
	d.alpha.appendChild(d.beta.can);

	console.log(d.beta.can, d.beta.con);

	r.clear();
	}
	}
	// render
	var r = {
	"loop": function(timestamp) {
	// console.log(timestamp);
	var delta = timestamp - g.start;
	// console.log(delta);
	if (delta >= 2000) {
	r.clear();
	c.rand();
	d.beta.con.fillStyle = c.css();
	d.beta.con.fillRect(0,0,d.beta.can.width,d.beta.can.height);
	g.start = timestamp;
	// console.log(delta);
	w.send();
	}
	g.id = window.requestAnimationFrame(r.loop);
	},
	"clear": function() {
	c.rand();
	d.beta.con.fillStyle = c.css();
	d.beta.con.fillRect(0,0,d.beta.can.width,d.beta.can.height);

	}
	}
	// color
	var c = {
	"init": function() {
	c.data = new Uint8Array(4);
	c.rand();
	},
	"rand": function() {
	for (var i = 0; i < c.data.length; i++) {
	c.data[i] = c.rb();
	}
	// console.log(c.data);
	},
	"rb": function() {
	return ((Math.random() * 255) >>> 0);
	},
	"css": function() {
	s0 = "rgba(";
	for (var i = 0; i < 3; i++) {
	s0 += c.data[i].toString();
	s0 += ",";
	}
	s0 += (c.data[3] / 255.0).toString();
	s0 += ")";

	return s0;
	}
	}
	// unicode
	var uni = {
	"rand": function(lo, hi) {
	var d0 = (hi - lo) >>> 0;
	var d1 = ((Math.random() * d0) + lo) >>> 0;
	return String.fromCharCode(d1);
	},
	"word": function(lo, hi, n0) {
	var r0 = [];
	for (var i = 0; i < n0; i++) {
	r0.push(uni.rand(lo, hi));
	}
	return r0.join("");
	}
	}
	</script>
	</head>
	<body id="alpha">
	</body>
	</html>