connect-four/client/index.html

77 lines
3.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="about" content="A Diamond* WebGame game">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="./index.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./index.css">
<title>HTML5 Connect Four</title>
</head>
<body>
<dialog id="alertModal">
<span class="message" id="am_text"></span>
<button id="close">Close this</button>
</dialog>
<div class="wrapper">
<div class="screen" id="start">
<div class="dialog">
<h1>Connect Four</h1>
<p id="warning_message"></p>
<input type="text" id="player_name" placeholder="Your name here">
<button id="sock_player_init">Join server</button>
</div>
</div>
<div class="screen boxlayout" style="display: none;" id="selection">
<div class="box">
<h1>Statistics</h1>
<span class="stat">Players in game: <span id="stats_players"></span></span>
<span class="stat">Total games since server started: <span id="stats_games"></span></span>
<span class="stat">You've played in <span id="stats_clientgames"></span> matches this session.</span>
</div>
<div class="box">
<h1>Players waiting</h1>
<div id="waitlist">
<p><i class="fa fa-spinner fa-spin fa-fw"></i>&nbsp;Loading..</p>
</div>
<button id="waitlist_quit" style="display: none;">Cancel</button>
<div class="idbuttons">
<button id="waitlist_join">Join Wait List</button>
<button id="waitlist_join_random">Join Random Game</button>
<button id="waitlist_join_refresh">Refresh</button>
</div>
</div>
<div class="box">
<h1>How to play</h1>
<p>This is a HTML5 remake of <a href="https://en.wikipedia.org/wiki/Connect_Four" target="_blank">Connect Four</a></p>
<ul>
<li>Connect 4 tiles of your color to win.</li>
<li>Matches are detected horizontally, vertically and diagonally.</li>
</ul>
</div>
</div>
<div class="screen game gamelayout" style="display: none;" id="game">
<div class="header">You're playing against <span id="opponent_name">null</span> <button id="leave">Leave game</button></div>
<canvas id="game_canvas" width="640" height="640"></canvas>
<div class="sidebar">
<span class="stat" id="g_s_stat">Your turn.</span>
<div class="chatbox">
<div class="letterbox" id="messages"></div>
<input type="text" id="message_send" placeholder="Send message..">
</div>
</div>
</div>
</div>
<script type="text/mustache" id="waitlistInstance">
<div class="waitlistInstance">
<span class="name">{{name}}</span>
<a href="#" class="joinBtn" onclick="joinWaiting('{{gameId}}')">Join</a>
</div>
</script>
</body>
</html>