PageRenderTime 36ms CodeModel.GetById 15ms 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. 

  2. <html lang="en">

    3. 

  3. <head>

    4. 

  4. 	<meta charset="utf-8">

    5. 

  5. 	<title>{% trans 'Saboteur: HK Universal Suffrage Edition.' %}</title>

    6. 

  6. 	<link rel="stylesheet" href="{{ STATIC_URL }}jquery/ui/css/smoothness/jquery-ui-1.10.3.custom.min.css">

    7. 

  7. 	<link rel="stylesheet" href="{{ STATIC_URL }}jquery/mobile/jquery.mobile-1.3.1.min.css">

    8. 

  8. 	<link rel="stylesheet" href="{{ STATIC_URL }}global/css/base.css">

    9. 

  9. 	<meta name="viewport" content="width=480, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    10. 

  10. 	<script type="text/javascript">

    11. 

  11. 		window.CARDS = {{ cards|safe }};

    12. 

  12. 		window.INIT_MAP = {{ maps|safe }};

    13. 

  13. 		window.CHARS = {{ characters|safe }};

    14. 

  14. 		window.CSRF = '{{ csrf_token }}';

    15. 

  15. 		window.ROOM = '{{ room.id_hash }}';

    16. 

  16. 		window.ERRORS = {

    17. 

  17. 			'blocked': '{% trans "You are being blocked" %}',

    18. 

  18. 			'not_in_turn': '{% trans "It is not your turn" %}'

    19. 

  19. 		};

    20. 

  20. 	</script>

    21. 

  21. </head>

    22. 

  22. <body>

    23. 

  23. 	{% if not room.started %}

    24. 

  24. 	<div data-role="page" id="waitingForGamePage">

    25. 

  25. 		<div data-role="header">

    26. 

  26. 			<h3>{% blocktrans %}Room #{{ room }}{% endblocktrans %}</h3>

    27. 

  27. 			<a href="#" data-role="button" data-icon="delete" data-iconpos="left" class="quitRoomBtn">{% trans "Quit Room" %}</a>

    28. 

  28. 			<a href="{{ qrcode }}" target="_blank" data-role="button" data-icon="arrow-r" data-iconpos="right">{% trans "QR code" %}</a>

    29. 

  29. 		</div>

    30. 

  30. 		<div data-role="content">

    31. 

  31. 			<div style="width:320px;margin: 0 auto; text-align:center; padding: 0">

    32. 

  32. 				<p>{% trans "The game is not yet start.<br>Tell your friends to join!!" %}</p>

    33. 

  33. 				<p><a href="mailto:?subject=Saboteur HK Edition&amp;body={{ room_url }}" data-role="button" target="_blank">{% trans "Email!" %}</a></p>

    34. 

  34. 				<p>{% trans '<span class="gameRoomMemberNumber">0</span> player(s) in this room.' %}</p>

    35. 

  35. 				{% if request.player.position == 1 %}

    36. 

  36. 				<button data-role="button" class="startGameBtn" disabled="disabled" data-theme="b">{% trans "Start Game" %}</button>

    37. 

  37. 				{% endif %}

    38. 

  38. 			</div>

    39. 

  39. 		</div>

    40. 

  40. 	</div>

    41. 

  41. 	{% endif %}

    42. 

  42. 

    43. 

  43. 	<div data-role="page" id="mainActionPage">

    44. 

  44. 		<div data-role="header">

    45. 

  45. 			<h3>{% blocktrans %}Room #{{ room }}{% endblocktrans %} - {{ request.player.name }}</h3>

    46. 

  46. 		</div>

    47. 

  47. 		<div data-role="content" id="mainActionContent">

    48. 

  48. 			<div class="mobile-row">

    49. 

  49. 				<div id="myRoleCover"><img src="{{ STATIC_URL }}games/images/characters/back.jpg"></div>

    50. 

  50. 				<div id="myRole"></div>

    51. 

  51. 				<div id="actionsAreaWrapper">

    52. 

  52. 					<div id="actionsArea">

    53. 

  53. 						<div class="action-area" id="playCardAction">{% trans "Play card" %}</div>

    54. 

  54. 						<div class="action-area" id="discardAction">{% trans "Discard" %}</div>

    55. 

  55. 						<div class="action-area" id="drawCardAction"><div style="margin-top: 40px; line-height: 20px;">

    56. 

  56. 							{% trans "Cards Deck" %}<br>

    57. 

  57. 							{% trans 'left #<span class="cards-deck-left">0</span>' %}

    58. 

  58. 						</div></div>

    59. 

  59. 					</div>

    60. 

  60. 				</div>

    61. 

  61. 			</div>

    62. 

  62. 			<div class="mobile-row">

    63. 

  63. 				<ul id="myCards"></ul>

    64. 

  64. 				<button data-role="button" class="passBtn" data-theme="b">{% trans "Pass" %}</button>

    65. 

  65. 			</div>

    66. 

  66. 		</div>

    67. 

  67. 	</div>

    68. 

  68. 	<div data-role="page" id="gameMapPage">

    69. 

  69. 		<div data-role="header">

    70. 

  70. 			<h3>{% trans "Game Map" %}</h3>

    71. 

  71. 			<a data-role="button" data-direction="reverse" href="#" class="backToMainBtn" data-icon="arrow-l" data-iconpos="left">{% trans "Back" %}</a></div>

    72. 

  72. 			<div data-role="content" style="padding: 0 50px;">

    73. 

  73. 				{% include "games/map.html" %}

    74. 

  74. 			</div>

    75. 

  75. 		</div>

    76. 

  76. 	</div>

    77. 

  77. 	<div data-role="page" id="playersPage">

    78. 

  78. 		<div data-role="header">

    79. 

  79. 			<h3>{% trans "Players" %}</h3>

    80. 

  80. 			<a data-role="button" data-direction="reverse" href="#" class="backToMainBtn" data-icon="arrow-l" data-iconpos="left">{% trans "Back" %}</a>

    81. 

  81. 		</div>

    82. 

  82. 		<div data-role="content">

    83. 

  83. 			<ul id="playerList" class="unstyled">

    84. 

  84. 				<li class="player-div" data-position="1"></li>

    85. 

  85. 				<li class="player-div" data-position="2"></li>

    86. 

  86. 				<li class="player-div" data-position="3"></li>

    87. 

  87. 				<li class="player-div" data-position="4"></li>

    88. 

  88. 				<li class="player-div" data-position="5"></li>

    89. 

  89. 				<li class="player-div" data-position="6"></li>

    90. 

  90. 			</ul>

    91. 

  91. 		</div>

    92. 

  92. 	</div>

    93. 

  93. 

    94. 

  94. 	<div data-role="dialog" id="badGuyWinPage">

    95. 

  95. 		<div data-role="header">

    96. 

  96. 			<h3>{% trans "Bad Guys Win" %}</h3>

    97. 

  97. 		</div>

    98. 

  98. 		<div data-role="content">

    99. 

  99. 			<p class="game-result"></p>

    100. 

  100. 			{% if request.player.position == 1 %}

    101. 

  101. 			<button data-role="button" class="startGameBtn" disabled="disabled" data-theme="b">{% trans "Start again" %}</button>

    102. 

  102. 			{% endif %}

    103. 

  103. 			<button data-role="button" class="quitRoomBtn" data-theme="b">{% trans "Quit Room" %}</button>

    104. 

  104. 		</div>

    105. 

  105. 	</div>

    106. 

  106. 

    107. 

  107. 	<div data-role="dialog" id="goodGuyWinPage">

    108. 

  108. 		<div data-role="header">

    109. 

  109. 			<h3>{% trans "Good Guys Win" %}</h3>

    110. 

  110. 		</div>

    111. 

  111. 		<div data-role="content">

    112. 

  112. 			<p class="game-result"></p>

    113. 

  113. 			{% if request.player.position == 1 %}

    114. 

  114. 			<button data-role="button" class="startGameBtn" disabled="disabled" data-theme="b">{% trans "Start again" %}</button>

    115. 

  115. 			{% endif %}

    116. 

  116. 			<button data-role="button" class="quitRoomBtn" data-theme="b">{% trans "Quit Room" %}</button>

    117. 

  117. 		</div>

    118. 

  118. 	</div>

    119. 

  119. 

    120. 

  120. 	<div data-role="page" id="pickGoldPage">

    121. 

  121. 		<div data-role="header">

    122. 

  122. 			<a href="#" data-role="button" data-icon="delete" data-iconpos="left" class="quitRoomBtn">{% trans "Quit Room" %}</a>

    123. 

  123. 			<h3>{% trans "Pick Gold" %}</h3>

    124. 

  124. 		</div>

    125. 

  125. 		<div data-role="content">

    126. 

  126. 			<ul id="goldsArea" class="unstyled"></ul>

    127. 

  127. 		</div>

    128. 

  128. 	</div>

    129. 

  129. 

    130. 

  130. 	<div id="disableTouchDiv"></div>

    131. 

  131. 

    132. 

  132. 	{# <div data-role="page" id="toolsImageDialog"> #}

    133. 

  133. 		{# <div data-role="header"></div> #}

    134. 

  134. 		{# <div data-role="content"> #}

    135. 

  135. 			{# <div style="width:100%;"> #}

    136. 

  136. 				{# <img src="" alt=""> #}

    137. 

  137. 			{# </div> #}

    138. 

  138. 		{# </div> #}

    139. 

  139. 	{# </div> #}

    140. 

  140. 

    141. 

  141. 	{% include 'games/elements/player_div_template.html' %}

    142. 

  142. 	{% include 'games/elements/room_summary_template.html' %}

    143. 

  143. 

    144. 

  144. 	<script type="text/javascript" src="{{ STATIC_URL }}jquery/ui/js/jquery-1.9.1.min.js"></script>

    145. 

  145. 	<script type="text/javascript" src="{{ STATIC_URL }}jquery/mobile/jquery.mobile-1.3.1.min.js"></script>

    146. 

  146. 	<script type="text/javascript" src="{{ STATIC_URL }}jquery/ui/js/jquery-ui-1.10.3.custom.min.js"></script>

    147. 

  147. 	<script type="text/javascript" src="{{ STATIC_URL }}jquery/jquery.ui.touch-punch.min.js"></script>

    148. 

  148. 	<script type="text/javascript" src="{{ STATIC_URL }}underscore/underscore.min.js"></script>

    149. 

  149. 	<script type="text/javascript" src="{{ STATIC_URL }}global/js/base.js"></script>

    150. 

  150. 	<script type="text/javascript" src="{{ STATIC_URL }}games/js/render.js"></script>

    151. 

  151. 	<script type="text/javascript">

    152. 

  152. 		function changePage(url) {

    153. 

  153. 			$.mobile.changePage(url, {changeHash: false});

    154. 

  154. 		}

    155. 

  155. 		$(window).on('beforeunload unload', function(){

    156. 

  156. 			return "{% trans 'Are you sure to reload / close the game?' %}";

    157. 

  157. 		});

    158. 

  158. 	</script>

    159. 

  159. 	{% include 'games/elements/js/periodic.html' %}

    160. 

  160. 	<script type="text/javascript" src="{{ STATIC_URL }}games/js/ui.js"></script>

    161. 

  161. </body></html>
    162.