{% load i18n %}<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>{% trans 'Saboteur: HK Universal Suffrage Edition.' %}</title> <link rel="stylesheet" href="{{ STATIC_URL }}jquery/ui/css/smoothness/jquery-ui-1.10.3.custom.min.css"> <link rel="stylesheet" href="{{ STATIC_URL }}jquery/mobile/jquery.mobile-1.3.1.min.css"> <link rel="stylesheet" href="{{ STATIC_URL }}global/css/base.css"> <meta name="viewport" content="width=480, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <script type="text/javascript"> window.CARDS = {{ cards|safe }}; window.INIT_MAP = {{ maps|safe }}; window.CHARS = {{ characters|safe }}; window.CSRF = '{{ csrf_token }}'; window.ROOM = '{{ room.id_hash }}'; window.ERRORS = { 'blocked': '{% trans "You are being blocked" %}', 'not_in_turn': '{% trans "It is not your turn" %}' }; </script> </head> <body> {% if not room.started %} <div data-role="page" id="waitingForGamePage"> <div data-role="header"> <h3>{% blocktrans %}Room #{{ room }}{% endblocktrans %}</h3> <a href="#" data-role="button" data-icon="delete" data-iconpos="left" class="quitRoomBtn">{% trans "Quit Room" %}</a> <a href="{{ qrcode }}" target="_blank" data-role="button" data-icon="arrow-r" data-iconpos="right">{% trans "QR code" %}</a> </div> <div data-role="content"> <div style="width:320px;margin: 0 auto; text-align:center; padding: 0"> <p>{% trans "The game is not yet start.<br>Tell your friends to join!!" %}</p> <p><a href="mailto:?subject=Saboteur HK Edition&body={{ room_url }}" data-role="button" target="_blank">{% trans "Email!" %}</a></p> <p>{% trans '<span class="gameRoomMemberNumber">0</span> player(s) in this room.' %}</p> {% if request.player.position == 1 %} <button data-role="button" class="startGameBtn" disabled="disabled" data-theme="b">{% trans "Start Game" %}</button> {% endif %} </div> </div> </div> {% endif %} <div data-role="page" id="mainActionPage"> <div data-role="header"> <h3>{% blocktrans %}Room #{{ room }}{% endblocktrans %} - {{ request.player.name }}</h3> </div> <div data-role="content" id="mainActionContent"> <div class="mobile-row"> <div id="myRoleCover"><img src="{{ STATIC_URL }}games/images/characters/back.jpg"></div> <div id="myRole"></div> <div id="actionsAreaWrapper"> <div id="actionsArea"> <div class="action-area" id="playCardAction">{% trans "Play card" %}</div> <div class="action-area" id="discardAction">{% trans "Discard" %}</div> <div class="action-area" id="drawCardAction"><div style="margin-top: 40px; line-height: 20px;"> {% trans "Cards Deck" %}<br> {% trans 'left #<span class="cards-deck-left">0</span>' %} </div></div> </div> </div> </div> <div class="mobile-row"> <ul id="myCards"></ul> <button data-role="button" class="passBtn" data-theme="b">{% trans "Pass" %}</button> </div> </div> </div> <div data-role="page" id="gameMapPage"> <div data-role="header"> <h3>{% trans "Game Map" %}</h3> <a data-role="button" data-direction="reverse" href="#" class="backToMainBtn" data-icon="arrow-l" data-iconpos="left">{% trans "Back" %}</a></div> <div data-role="content" style="padding: 0 50px;"> {% include "games/map.html" %} </div> </div> </div> <div data-role="page" id="playersPage"> <div data-role="header"> <h3>{% trans "Players" %}</h3> <a data-role="button" data-direction="reverse" href="#" class="backToMainBtn" data-icon="arrow-l" data-iconpos="left">{% trans "Back" %}</a> </div> <div data-role="content"> <ul id="playerList" class="unstyled"> <li class="player-div" data-position="1"></li> <li class="player-div" data-position="2"></li> <li class="player-div" data-position="3"></li> <li class="player-div" data-position="4"></li> <li class="player-div" data-position="5"></li> <li class="player-div" data-position="6"></li> </ul> </div> </div> <div data-role="dialog" id="badGuyWinPage"> <div data-role="header"> <h3>{% trans "Bad Guys Win" %}</h3> </div> <div data-role="content"> <p class="game-result"></p> {% if request.player.position == 1 %} <button data-role="button" class="startGameBtn" disabled="disabled" data-theme="b">{% trans "Start again" %}</button> {% endif %} <button data-role="button" class="quitRoomBtn" data-theme="b">{% trans "Quit Room" %}</button> </div> </div> <div data-role="dialog" id="goodGuyWinPage"> <div data-role="header"> <h3>{% trans "Good Guys Win" %}</h3> </div> <div data-role="content"> <p class="game-result"></p> {% if request.player.position == 1 %} <button data-role="button" class="startGameBtn" disabled="disabled" data-theme="b">{% trans "Start again" %}</button> {% endif %} <button data-role="button" class="quitRoomBtn" data-theme="b">{% trans "Quit Room" %}</button> </div> </div> <div data-role="page" id="pickGoldPage"> <div data-role="header"> <a href="#" data-role="button" data-icon="delete" data-iconpos="left" class="quitRoomBtn">{% trans "Quit Room" %}</a> <h3>{% trans "Pick Gold" %}</h3> </div> <div data-role="content"> <ul id="goldsArea" class="unstyled"></ul> </div> </div> <div id="disableTouchDiv"></div> {# <div data-role="page" id="toolsImageDialog"> #} {# <div data-role="header"></div> #} {# <div data-role="content"> #} {# <div style="width:100%;"> #} {# <img src="" alt=""> #} {# </div> #} {# </div> #} {# </div> #} {% include 'games/elements/player_div_template.html' %} {% include 'games/elements/room_summary_template.html' %} <script type="text/javascript" src="{{ STATIC_URL }}jquery/ui/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}jquery/mobile/jquery.mobile-1.3.1.min.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}jquery/ui/js/jquery-ui-1.10.3.custom.min.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}jquery/jquery.ui.touch-punch.min.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}underscore/underscore.min.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}global/js/base.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}games/js/render.js"></script> <script type="text/javascript"> function changePage(url) { $.mobile.changePage(url, {changeHash: false}); } $(window).on('beforeunload unload', function(){ return "{% trans 'Are you sure to reload / close the game?' %}"; }); </script> {% include 'games/elements/js/periodic.html' %} <script type="text/javascript" src="{{ STATIC_URL }}games/js/ui.js"></script> </body></html>