77 lines
3.1 KiB
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> 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>
|