PageRenderTime 50ms CodeModel.GetById 23ms RepoModel.GetById 1ms app.codeStats 0ms

/apps/saboteur/templates/games/mobile.html

https://bitbucket.org/adi-li/csci-4140
HTML | 161 lines | 153 code | 8 blank | 0 comment | 0 complexity | ccf2438d345f143bfc34f67de5ee7205 MD5 | raw file
  1. {% load i18n %}<!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>{% trans 'Saboteur: HK Universal Suffrage Edition.' %}</title>
  6. <link rel="stylesheet" href="{{ STATIC_URL }}jquery/ui/css/smoothness/jquery-ui-1.10.3.custom.min.css">
  7. <link rel="stylesheet" href="{{ STATIC_URL }}jquery/mobile/jquery.mobile-1.3.1.min.css">
  8. <link rel="stylesheet" href="{{ STATIC_URL }}global/css/base.css">
  9. <meta name="viewport" content="width=480, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  10. <script type="text/javascript">
  11. window.CARDS = {{ cards|safe }};
  12. window.INIT_MAP = {{ maps|safe }};
  13. window.CHARS = {{ characters|safe }};
  14. window.CSRF = '{{ csrf_token }}';
  15. window.ROOM = '{{ room.id_hash }}';
  16. window.ERRORS = {
  17. 'blocked': '{% trans "You are being blocked" %}',
  18. 'not_in_turn': '{% trans "It is not your turn" %}'
  19. };
  20. </script>
  21. </head>
  22. <body>
  23. {% if not room.started %}
  24. <div data-role="page" id="waitingForGamePage">
  25. <div data-role="header">
  26. <h3>{% blocktrans %}Room #{{ room }}{% endblocktrans %}</h3>
  27. <a href="#" data-role="button" data-icon="delete" data-iconpos="left" class="quitRoomBtn">{% trans "Quit Room" %}</a>
  28. <a href="{{ qrcode }}" target="_blank" data-role="button" data-icon="arrow-r" data-iconpos="right">{% trans "QR code" %}</a>
  29. </div>
  30. <div data-role="content">
  31. <div style="width:320px;margin: 0 auto; text-align:center; padding: 0">
  32. <p>{% trans "The game is not yet start.<br>Tell your friends to join!!" %}</p>
  33. <p><a href="mailto:?subject=Saboteur HK Edition&amp;body={{ room_url }}" data-role="button" target="_blank">{% trans "Email!" %}</a></p>
  34. <p>{% trans '<span class="gameRoomMemberNumber">0</span> player(s) in this room.' %}</p>
  35. {% if request.player.position == 1 %}
  36. <button data-role="button" class="startGameBtn" disabled="disabled" data-theme="b">{% trans "Start Game" %}</button>
  37. {% endif %}
  38. </div>
  39. </div>
  40. </div>
  41. {% endif %}
  42. <div data-role="page" id="mainActionPage">
  43. <div data-role="header">
  44. <h3>{% blocktrans %}Room #{{ room }}{% endblocktrans %} - {{ request.player.name }}</h3>
  45. </div>
  46. <div data-role="content" id="mainActionContent">
  47. <div class="mobile-row">
  48. <div id="myRoleCover"><img src="{{ STATIC_URL }}games/images/characters/back.jpg"></div>
  49. <div id="myRole"></div>
  50. <div id="actionsAreaWrapper">
  51. <div id="actionsArea">
  52. <div class="action-area" id="playCardAction">{% trans "Play card" %}</div>
  53. <div class="action-area" id="discardAction">{% trans "Discard" %}</div>
  54. <div class="action-area" id="drawCardAction"><div style="margin-top: 40px; line-height: 20px;">
  55. {% trans "Cards Deck" %}<br>
  56. {% trans 'left #<span class="cards-deck-left">0</span>' %}
  57. </div></div>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="mobile-row">
  62. <ul id="myCards"></ul>
  63. <button data-role="button" class="passBtn" data-theme="b">{% trans "Pass" %}</button>
  64. </div>
  65. </div>
  66. </div>
  67. <div data-role="page" id="gameMapPage">
  68. <div data-role="header">
  69. <h3>{% trans "Game Map" %}</h3>
  70. <a data-role="button" data-direction="reverse" href="#" class="backToMainBtn" data-icon="arrow-l" data-iconpos="left">{% trans "Back" %}</a></div>
  71. <div data-role="content" style="padding: 0 50px;">
  72. {% include "games/map.html" %}
  73. </div>
  74. </div>
  75. </div>
  76. <div data-role="page" id="playersPage">
  77. <div data-role="header">
  78. <h3>{% trans "Players" %}</h3>
  79. <a data-role="button" data-direction="reverse" href="#" class="backToMainBtn" data-icon="arrow-l" data-iconpos="left">{% trans "Back" %}</a>
  80. </div>
  81. <div data-role="content">
  82. <ul id="playerList" class="unstyled">
  83. <li class="player-div" data-position="1"></li>
  84. <li class="player-div" data-position="2"></li>
  85. <li class="player-div" data-position="3"></li>
  86. <li class="player-div" data-position="4"></li>
  87. <li class="player-div" data-position="5"></li>
  88. <li class="player-div" data-position="6"></li>
  89. </ul>
  90. </div>
  91. </div>
  92. <div data-role="dialog" id="badGuyWinPage">
  93. <div data-role="header">
  94. <h3>{% trans "Bad Guys Win" %}</h3>
  95. </div>
  96. <div data-role="content">
  97. <p class="game-result"></p>
  98. {% if request.player.position == 1 %}
  99. <button data-role="button" class="startGameBtn" disabled="disabled" data-theme="b">{% trans "Start again" %}</button>
  100. {% endif %}
  101. <button data-role="button" class="quitRoomBtn" data-theme="b">{% trans "Quit Room" %}</button>
  102. </div>
  103. </div>
  104. <div data-role="dialog" id="goodGuyWinPage">
  105. <div data-role="header">
  106. <h3>{% trans "Good Guys Win" %}</h3>
  107. </div>
  108. <div data-role="content">
  109. <p class="game-result"></p>
  110. {% if request.player.position == 1 %}
  111. <button data-role="button" class="startGameBtn" disabled="disabled" data-theme="b">{% trans "Start again" %}</button>
  112. {% endif %}
  113. <button data-role="button" class="quitRoomBtn" data-theme="b">{% trans "Quit Room" %}</button>
  114. </div>
  115. </div>
  116. <div data-role="page" id="pickGoldPage">
  117. <div data-role="header">
  118. <a href="#" data-role="button" data-icon="delete" data-iconpos="left" class="quitRoomBtn">{% trans "Quit Room" %}</a>
  119. <h3>{% trans "Pick Gold" %}</h3>
  120. </div>
  121. <div data-role="content">
  122. <ul id="goldsArea" class="unstyled"></ul>
  123. </div>
  124. </div>
  125. <div id="disableTouchDiv"></div>
  126. {# <div data-role="page" id="toolsImageDialog"> #}
  127. {# <div data-role="header"></div> #}
  128. {# <div data-role="content"> #}
  129. {# <div style="width:100%;"> #}
  130. {# <img src="" alt=""> #}
  131. {# </div> #}
  132. {# </div> #}
  133. {# </div> #}
  134. {% include 'games/elements/player_div_template.html' %}
  135. {% include 'games/elements/room_summary_template.html' %}
  136. <script type="text/javascript" src="{{ STATIC_URL }}jquery/ui/js/jquery-1.9.1.min.js"></script>
  137. <script type="text/javascript" src="{{ STATIC_URL }}jquery/mobile/jquery.mobile-1.3.1.min.js"></script>
  138. <script type="text/javascript" src="{{ STATIC_URL }}jquery/ui/js/jquery-ui-1.10.3.custom.min.js"></script>
  139. <script type="text/javascript" src="{{ STATIC_URL }}jquery/jquery.ui.touch-punch.min.js"></script>
  140. <script type="text/javascript" src="{{ STATIC_URL }}underscore/underscore.min.js"></script>
  141. <script type="text/javascript" src="{{ STATIC_URL }}global/js/base.js"></script>
  142. <script type="text/javascript" src="{{ STATIC_URL }}games/js/render.js"></script>
  143. <script type="text/javascript">
  144. function changePage(url) {
  145. $.mobile.changePage(url, {changeHash: false});
  146. }
  147. $(window).on('beforeunload unload', function(){
  148. return "{% trans 'Are you sure to reload / close the game?' %}";
  149. });
  150. </script>
  151. {% include 'games/elements/js/periodic.html' %}
  152. <script type="text/javascript" src="{{ STATIC_URL }}games/js/ui.js"></script>
  153. </body></html>