<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>IntroQuiz2018</title>
<style type="text/css">
<!--
body {background: limegreen;}
p#info {
padding: 1ex; margin: 0; border: 3px ; background: white;
font-size: 300%;
}p#warn {color: red;}
button#push {font-size: 1000%; width: 80vw;}
button.win {background: linear-gradient(#f8eb22, #878013);}
*.c {text-align: center;}
-->
</style>
<script>
function intro() {
var team = document.getElementById("tm"),
button = document.getElementById("push"),
warn = document.getElementById("warn"),
info = document.getElementById("info");
var conn, PORT=4946, server = location.hostname;
function initConn() {
try {
conn = new WebSocket('ws://' + server + ':' + PORT + '/');
conn.onopen = function() {};
conn.onerror = function(err) {
info.textContent = 'WebSocket failure: ' + err
};
warn.textContent = null;
conn.onmessage = function(ev) {
if (ev.data) {
var j = JSON.parse(ev.data);
info.textContent = j.info;
warn.textContent = j.warn;
if (j.rank == 1)
button.setAttribute("class", "win");
else
button.setAttribute("class", null);
}
};
conn.onclose = function(ev) {
info.textContent = "接続断: PUSHで参加";
conn = null;
};
info.textContent = "Ready...";
} catch (err) {
}
}
function push(ev) {
if (!conn) initConn();
conn.send(team.value);
}
button.addEventListener("mousedown", push, false);
initConn();
}
document.addEventListener("DOMContentLoaded", intro, false);
</script>
</head>
<body>
<h1>HAYA OSHI</h1>
<p>Team(1〜6):<select name="team" id="tm" maxlength="1">
<option value="">--- 選択してください ---</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</p>
<p id="info">Ready...</p>
<p id="warn"></p>
<p class="c">
<button id="push" type="button" value="PUSH">push</button></p>
<hr>
</body>
</html>
