Strona główna Odkrywaj Pomoc
Zaloguj się
lu
/
lp
kopia lustrzana git://github.com/heyLu/lp
Obserwuj 1
Polub 0
Forkuj 0
Kod Problemy 0 Commity 65 Wydania 1 Wiki
Przeglądaj źródła

display online status and support switching it on/off.

Lucas Stadler 12 lat temu
rodzic
7902bd834b
commit
4fea6ca7ce
1 zmienionych plików z 31 dodań i 5 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 31 5
      js/pixl/public/index.html

+ 31 - 5
js/pixl/public/index.html
Wyświetl plik 

@ -17,12 +17,23 @@
17 17 
			bottom: 0;
18 18 
			right: 0;
19 19 
		}
20
21 
		#pos, #online { display: inline-block; vertical-align: bottom; }
22
23 
		#online {
24 
			width: 20px;
25 
			height: 20px;
26 
			background-color: green;
27 
		}
20 28 
	</style>
21 29 
</head>
22 30
23 31 
<body>
24 32 
	<canvas id="stage"></canvas>
25 
	<span id="status"></span>
33 
	<span id="status">
34 
		<span id="pos"></span>
35 
		<span id="online"></span>
36 
	</span>
26 37 
	<script>
27 38 
		window.polyfill = {};
28 39 
@ -36,7 +47,8 @@
36 47 
		window.pixl = {};
37 48 
		pixl.stage = document.querySelector("#stage");
38 49 
		pixl.ctx = stage.getContext("2d");
39 
		pixl.status = document.querySelector("#status");
50 
		pixl.status = { pos: document.querySelector("#pos"),
51 
		                online: document.querySelector("#online") };
40 52 
		pixl.window = {w: window.innerWidth, h: window.innerHeight};
41 53 
		pixl.world = {};
42 54 
		pixl.pos = {x: 0, y: 0};
 
@ -111,6 +123,14 @@
111 123 
			pixl.redraw();
112 124 
		});
113 125
126 
		pixl.status.online.addEventListener("click", function(ev) {
127 
			if (pixl.online) {
128 
				pixl.disconnect();
129 
			} else {
130 
				pixl.connect();
131 
			}
132 
		});
133
114 134 
		pixl.drag = {start: undefined, current: undefined};
115 135 
		pixl.stage.addEventListener("mousedown", function(ev) {
116 136 
			/*if (document.mozPointerLockElement === null) {
 
@ -128,7 +148,7 @@
128 148 
			}
129 149
130 150 
			var hovered = pixl.to_world({x: ev.clientX, y: ev.clientY});
131 
			pixl.status.textContent = hovered.x + "," + hovered.y;
151 
			pixl.status.pos.textContent = hovered.x + "," + hovered.y;
132 152 
		});
133 153
134 154 
		pixl.stage.addEventListener("mouseup", function(ev) {
 
@ -165,8 +185,14 @@
165 185 
		pixl.online = false;
166 186 
		pixl.connect = function() {
167 187 
			pixl.ws = new WebSocket('ws://' + (location.host || 'localhost:8001'));
168 
			pixl.ws.onopen = function() { pixl.online = true; };
169 
			pixl.ws.onclose = function() { pixl.online = false; };
188 
			pixl.ws.onopen = function() {
189 
				pixl.online = true;
190 
				pixl.status.online.style.backgroundColor = "green";
191 
			};
192 
			pixl.ws.onclose = function() {
193 
				pixl.online = false;
194 
				pixl.status.online.style.backgroundColor = "red";
195 
			};
170 196 
			pixl.ws.onmessage = function(msg) {
171 197 
				var obj = JSON.parse(msg.data);
172 198 
				if (obj.length !== undefined) {