Главная Обзор Помощь
Войти
lu
/
lp
зеркало из git://github.com/heyLu/lp
Следить 1
В избранное 0
Ответвить 0
Код Обсуждения 0 Коммиты 65 Релизы 1 Вики
Просмотр исходного кода

display online status and support switching it on/off.

Lucas Stadler лет назад: 12
Родитель
7902bd834b
Сommit
4fea6ca7ce
1 измененных файлов с 31 добавлено и 5 удалено
Единый вид Показать статистику Diff
  1. 31 5
      js/pixl/public/index.html

+ 31 - 5
js/pixl/public/index.html
Просмотреть файл

17 
			bottom: 0;
 17 
			bottom: 0;
18 
			right: 0;
 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 
	</style>
 28 
	</style>
21 
</head>
 29 
</head>
22
30
23 
<body>
 31 
<body>
24 
	<canvas id="stage"></canvas>
 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 
	<script>
 37 
	<script>
27 
		window.polyfill = {};
 38 
		window.polyfill = {};
28
39
36 
		window.pixl = {};
 47 
		window.pixl = {};
37 
		pixl.stage = document.querySelector("#stage");
 48 
		pixl.stage = document.querySelector("#stage");
38 
		pixl.ctx = stage.getContext("2d");
 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 
		pixl.window = {w: window.innerWidth, h: window.innerHeight};
 52 
		pixl.window = {w: window.innerWidth, h: window.innerHeight};
41 
		pixl.world = {};
 53 
		pixl.world = {};
42 
		pixl.pos = {x: 0, y: 0};
 54 
		pixl.pos = {x: 0, y: 0};
111 
			pixl.redraw();
 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 
		pixl.drag = {start: undefined, current: undefined};
 134 
		pixl.drag = {start: undefined, current: undefined};
115 
		pixl.stage.addEventListener("mousedown", function(ev) {
 135 
		pixl.stage.addEventListener("mousedown", function(ev) {
116 
			/*if (document.mozPointerLockElement === null) {
 136 
			/*if (document.mozPointerLockElement === null) {
128 
			}
 148 
			}
129
149
130 
			var hovered = pixl.to_world({x: ev.clientX, y: ev.clientY});
 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 
		pixl.stage.addEventListener("mouseup", function(ev) {
 154 
		pixl.stage.addEventListener("mouseup", function(ev) {
165 
		pixl.online = false;
 185 
		pixl.online = false;
166 
		pixl.connect = function() {
 186 
		pixl.connect = function() {
167 
			pixl.ws = new WebSocket('ws://' + (location.host || 'localhost:8001'));
 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 
			pixl.ws.onmessage = function(msg) {
 196 
			pixl.ws.onmessage = function(msg) {
171 
				var obj = JSON.parse(msg.data);
 197 
				var obj = JSON.parse(msg.data);
172 
				if (obj.length !== undefined) {
 198 
				if (obj.length !== undefined) {