battleship/client/index.html

98 lines
4.2 KiB
HTML
Raw Permalink Normal View History

2017-04-03 20:44:36 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
2017-04-06 10:13:45 +00:00
<meta name="about" content="A Diamond* WebGame game">
2017-04-03 20:44:36 +00:00
<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>
<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">
2017-04-06 10:13:45 +00:00
<title>HTML5 Battleship</title>
2017-04-03 20:44:36 +00:00
</head>
<body>
2017-04-05 21:33:35 +00:00
<dialog id="alertModal">
<span class="message" id="am_text"></span>
<button id="close">Close this</button>
</dialog>
2017-04-03 20:44:36 +00:00
<div class="wrapper">
<div class="screen" id="start">
<div class="dialog">
2017-04-05 20:28:24 +00:00
<h1>Battleship</h1>
2017-04-03 20:44:36 +00:00
<p id="warning_message"></p>
2017-04-05 20:28:24 +00:00
<input type="text" id="player_name" placeholder="Your name here">
2017-04-03 20:44:36 +00:00
<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>
2017-04-06 16:03:41 +00:00
<span class="stat">Players online: <span id="stats_players_online"></span></span>
2017-04-08 14:57:12 +00:00
<span class="stat">Games in progress: <span id="stats_players"></span></span>
2017-04-03 20:44:36 +00:00
<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>
2017-04-08 14:57:12 +00:00
<p>This is a web version of <a href="https://en.wikipedia.org/wiki/Battleship_(game)" target="_blank">Battleship</a> with a few differences.</p>
2017-04-03 20:44:36 +00:00
<ul>
<li>You start off by placing your ships onto the board.</li>
<li>Once you and your opponent finish placing the ships, the game begins.</li>
<li>When it's your turn, you click on a square to attempt to bomb an opposing ship.</li>
<li>If you miss, it's your opponents turn. If you strike, you can bomb more until you miss again.</li>
<li>You must destroy most of the opponents's ship to sink it.</li>
<li>You win the game by sinking all of the opponent's ships!</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="513" height="513"></canvas>
<div class="sidebar">
<span class="stat">You have <span id="g_s_num">0</span> ships left.</span>
<span class="stat">Your opponent has <span id="o_s_num">0</span> ships left.</span>
<span class="stat" id="g_s_stat">Your turn.</span>
2017-04-04 16:35:17 +00:00
<div class="chatbox">
<div class="letterbox" id="messages"></div>
<input type="text" id="message_send" placeholder="Send message..">
</div>
2017-04-08 14:57:12 +00:00
<button id="mob_rotate" style="display: none;">Rotate Ship</button>
2017-04-04 16:35:17 +00:00
</div>
</div>
<div class="screen endresult" style="display: none;" id="endresult">
<div class="bigstat">
You <span id="wonlost">Lost</span>!
<button id="lobby">Back to the lobby</button>
</div>
<div class="boxlarge canvasbox result">
<h1>Opponent's ships</h1>
<canvas id="opponent_result_canvas" width="513" height="513"></canvas>
</div>
<div class="boxlarge canvasbox result">
<h1>Your ships</h1>
<canvas id="my_result_canvas" width="513" height="513"></canvas>
2017-04-03 20:44:36 +00:00
</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>