<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>IntroQuiz2018</title>
<script type="text/javascript" src="intro.js" charset="utf-8"></script>
<style type="text/css">
<!--
body {background: limegreen;}
p#info {padding: 1ex; margin: 0; border: 3px ; background: white;
font-size: 100%;}
p#warn {color: red;}
button#push {font-size: 1000%; width: 60vw;}
button.win {background: linear-gradient(#f8eb22, #878013);}
.c {text-align: center;}
-->
</style>
<script type="text/javascript">
function intro() {
var team = document.getElementById("tm"),
button = document.getElementById("push"),
warn = document.getElementById("warn"),
info = document.getElementById("info");
var conn, PORT=4946, server = 0.0.0.0;
function initConn() {
try {
conn = new WebSocket('ws://' + server + ':' + PORT + '/');
conn.onopen = function() {}; // Nothing special
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) {
alert("Socket Creation Error\n\
Firefoxですか? URLウィンドウに about:config と入れて\n\
Search: 窓に websocket と入れて、\n\
network..websocket.allowInsecureFromHTTP\n\
の行をダブルクリックして true に変えてください。\n" + 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>
<!-- <li><a href="./index.html">ちゃっと</a></li> -->
<p>Team(1〜):<select name="team" id="tm" maxlength="1">
<option value="">Please choose a your team.</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>
