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 >
< 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 >
2017-04-05 20:28:24 +00:00
< p > This is a guessing game inspired by < a href = "https://en.wikipedia.org/wiki/Battleship_(game)" target = "_blank" > Battleship< / a > , however this one works quite differently.< / 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 >
< / 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 >
