Added line kinds
This commit is contained in:
parent
62a37a55f2
commit
233623b872
2 changed files with 50 additions and 16 deletions
60
index.html
60
index.html
|
@ -7,18 +7,26 @@
|
|||
<title>WebSocket Test</title>
|
||||
<style type="text/css">
|
||||
body {
|
||||
color: #fff;
|
||||
color: #888;
|
||||
background: #000;
|
||||
font-size: 16pt;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
#ballscreen {
|
||||
a {
|
||||
color: #fff;
|
||||
text-shadow: 0px 1px 1px #f80;
|
||||
}
|
||||
#text {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
#ballscreen {
|
||||
position: absolute;
|
||||
background-color: rgba(0.0, 0.0, 0.0, 0.0);
|
||||
width: 320px;
|
||||
height: 480px;
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.ball {
|
||||
|
@ -36,11 +44,15 @@
|
|||
}
|
||||
#svgscreen {
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
height: 480px;
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
}
|
||||
#svgscreen line {
|
||||
stroke: rgb(255,0,0);
|
||||
#svgscreen line.guitar {
|
||||
stroke: rgb(255,127,0);
|
||||
stroke-width: 2;
|
||||
}
|
||||
#svgscreen line.solid {
|
||||
stroke: rgb(0,127,255);
|
||||
stroke-width: 2;
|
||||
}
|
||||
</style>
|
||||
|
@ -57,11 +69,11 @@
|
|||
var balls_online = new Array();
|
||||
var svglines_online = new Array();
|
||||
var speed = 100;
|
||||
var line_kind = 0;
|
||||
|
||||
function init() {
|
||||
var statusbar = document.getElementById('status');
|
||||
ballscreen = document.getElementById("ballscreen");
|
||||
document.getElementById("myName").innerHTML = myName;
|
||||
svgscreen = document.getElementById("svgscreen");
|
||||
|
||||
if ("WebSocket" in window){
|
||||
|
@ -116,7 +128,13 @@
|
|||
};
|
||||
svglines_online = new Array();
|
||||
for (var i = lines.length - 1; i >= 0; i--) {
|
||||
svglines_online.push(addLine(lines[i], svgscreen));
|
||||
var current = addLine(lines[i], svgscreen);
|
||||
if(lines[i].line_kind == 0){
|
||||
current.setAttribute('class', "guitar");
|
||||
} else {
|
||||
current.setAttribute('class', "solid");
|
||||
}
|
||||
svglines_online.push(current);
|
||||
};
|
||||
|
||||
|
||||
|
@ -127,6 +145,11 @@
|
|||
|
||||
function drawStart(line){
|
||||
current_svgline = addLine(line, svgscreen);
|
||||
if(line_kind == 0){
|
||||
current_svgline.setAttribute('class', "guitar");
|
||||
} else {
|
||||
current_svgline.setAttribute('class', "solid");
|
||||
}
|
||||
}
|
||||
|
||||
function drawMove(line){
|
||||
|
@ -135,7 +158,7 @@
|
|||
|
||||
function drawEnd(line){
|
||||
drawRemove(line);
|
||||
line.line_kind = 1;
|
||||
line.line_kind = line_kind;
|
||||
var packet = {
|
||||
command: 'add line',
|
||||
data: line
|
||||
|
@ -162,6 +185,14 @@
|
|||
websocket.send(JSON.stringify(packet));
|
||||
}
|
||||
|
||||
function changeKind() {
|
||||
line_kind = line_kind + 1;
|
||||
line_kind = line_kind % 2;
|
||||
var kind_str = "guitar";
|
||||
if(line_kind == 1) kind_str = "solid"
|
||||
document.getElementById("line_kind").innerHTML = kind_str;
|
||||
}
|
||||
|
||||
window.addEventListener("load", init, false);
|
||||
|
||||
setTimeout(function (){
|
||||
|
@ -174,10 +205,13 @@
|
|||
<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1">
|
||||
<rect width="100%" height="100%" style="fill:rgb(255, 255, 255); opacity:0.1; stroke-width:1; stroke:rgb(0,0,0)"/>
|
||||
</svg>
|
||||
|
||||
<div id="ballscreen"></div>
|
||||
|
||||
My name is: <span id="myName"></span><br/>
|
||||
Status: <span id="status">CONNECTING...</span>
|
||||
<div id="text">
|
||||
(<span id="status">connecting...</span>)
|
||||
<a onClick="changeKind();" href="#">Change line kind (to <span id="line_kind">guitar</span>)</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -2,11 +2,11 @@
|
|||
function init_websocket(statusbar, open, message){
|
||||
websocket = new WebSocket(wsURI);
|
||||
|
||||
websocket.onclose = function (evt) { statusbar.innerHTML = 'DISCONNECTED'; };
|
||||
websocket.onerror = function (evt) { statusbar.innerHTML = 'ERROR: ' + evt.data; };
|
||||
websocket.onclose = function (evt) { statusbar.innerHTML = 'disconnected'; };
|
||||
websocket.onerror = function (evt) { statusbar.innerHTML = 'error: ' + evt.data; };
|
||||
|
||||
websocket.onopen = function (evt) {
|
||||
statusbar.innerHTML = 'CONNECTED';
|
||||
statusbar.innerHTML = 'connected';
|
||||
open(evt);
|
||||
};
|
||||
websocket.onmessage = function (evt) {
|
||||
|
|
Reference in a new issue