Browse Source

Update pages for mobile use

testing
Rogier Neeleman 4 years ago
parent
commit
3bd6bda6e1
  1. 0
      app/static/css/default.css
  2. 44
      app/templates/_game_player_info.html
  3. 5
      app/templates/base.html
  4. 25
      app/templates/game_bunny_dashboard.html
  5. 48
      app/templates/game_hunter_dashboard.html
  6. 24
      app/templates/index.html

0
app/static/css/default.css

44
app/templates/_game_player_info.html

@ -1,21 +1,29 @@
<h2>Game Info</h2> <h2>Game Info</h2>
<div class="table-responsive"> <div class="table">
<table class="table"> <table class="table">
<tr> <tr>
<th>My Role</th> <th>My Game</th>
<td>{{ current_user.role_in_game(game).name }}</td> <td>{{ game.name.title() }}</td>
</tr> </tr>
<tr> <tr>
<th>Game State</th> <th>My Name</th>
<td>{{ game.state.name }}</td> <td>{{ current_user.name.title() }}</td>
</tr> </tr>
<tr> <tr>
<th>Start Time</th> <th>My Role</th>
<td>{% if game.start_time %}{{ moment(game.start_time).format('DD-MM-YYYY, hh:mm')}}{% else %}-{% endif %}</td> <td>{{ current_user.role_in_game(game).name.title() }}</td>
</tr> </tr>
<tr> <tr>
<th>End Time</th> <th>Game State</th>
<td>{% if game.end_time %}{{ moment(game.end_time).format('DD-MM-YYYY, hh:mm')}}{% else %}-{% endif %}</td> <td>{{ game.state.name.title() }}</td>
</tr> </tr>
<tr>
<th>Start Time</th>
<td>{% if game.start_time %}{{ moment(game.start_time).format('DD-MM-YYYY, hh:mm')}}{% else %}-{% endif %}</td>
</tr>
<tr>
<th>End Time</th>
<td>{% if game.end_time %}{{ moment(game.end_time).format('DD-MM-YYYY, hh:mm')}}{% else %}-{% endif %}</td>
</tr>
</table> </table>
</div> </div>

5
app/templates/base.html

@ -1,5 +1,10 @@
{% extends 'bootstrap/base.html' %} {% extends 'bootstrap/base.html' %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/default.css') }}">
{% endblock %}
{% block title %} {% block title %}
{% if title %}{{ title }} - The Hunt{% else %}Welcome to The Hunt{% endif %} {% if title %}{{ title }} - The Hunt{% else %}Welcome to The Hunt{% endif %}
{% endblock %} {% endblock %}

25
app/templates/game_bunny_dashboard.html

@ -8,11 +8,14 @@
{% endblock %} {% endblock %}
{% block player_app_content %} {% block player_app_content %}
<h1>{{ game.name }}: {{ current_user.name }}</h1> <div class="row">
{% include '_game_player_info.html' %} <div class="col-xs-0 col-md-1"></div>
<div class="col-xs-12 col-md-7">
<h2>Objective Locations:</h2> <h2>Objective Locations:</h2>
{% if game.objectives %} {% if game.objectives %}
<div class="table-responsive"> <div class="table">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -34,9 +37,21 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div id="map" style=" height: 500px; border-radius: 10px; " class="col-md-6 col-xs-12"></div>
{% endif %} {% endif %}
</div>
<div class="col-xs-12 col-md-3">
{% include '_game_player_info.html' %}
</div>
</div>
{% if game.objectives %}
<div class="row">
<div class="col-xs-1 col-md-1"></div>
<div id="map" style=" height: 500px; border-radius: 10px; " class="col-xs-10 col-md-10"></div>
<div class="col-xs-1 col-md-1"></div>
</div>
{% endif %}
{% endblock %} {% endblock %}
@ -70,4 +85,4 @@
} }
</script> </script>
{% endblock %} {% endblock %}

48
app/templates/game_hunter_dashboard.html

@ -8,22 +8,17 @@
{% endblock %} {% endblock %}
{% block player_app_content %} {% block player_app_content %}
<h1>{{ game.name }}: {{ current_user.name }}</h1> <div class="row">
{% include '_game_player_info.html' %} <div class="col-xs-0 col-md-1"></div>
<h2>Bunnies:</h2>
<a href="{{ url_for('main.catch_bunny', game_name=game.name) }}"> <div class="col-xs-12 col-md-7">
<button class="btn btn-success">Catch Bunny</button> <h2>Bunnies</h2>
</a> <div class="table">
<div class="table-responsive"> <table class="table">
<table class="table">
<thead> <thead>
<tr> <tr>
<th scope="col">Player Name</th> <th scope="col">Player Name</th>
<th scope="col">Times Caught <th scope="col">Times Caught</th>
<span style="font-size: smaller;">
(<span style="color:green;">Accepted</span>/<span style="color:red;">Denied</span>/<span style="color:gray;">Not reviewed</span>)
</span>
</th>
<th scope="col">Last location</th> <th scope="col">Last location</th>
<th scope="col"></th> <th scope="col"></th>
</tr> </tr>
@ -33,7 +28,7 @@
{% for bunny in game.bunnies() %} {% for bunny in game.bunnies() %}
<tr> <tr>
<td>{{ bunny.user.name }}</td> <td>{{ bunny.user.name }}</td>
<td><span style="color:green;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'accepted') |list|length}}</span> / <td><span style="color:green;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'accepted') |list|length}}</span> /
<span style="color:red;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'denied') |list|length}}</span> / <span style="color:red;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'denied') |list|length}}</span> /
<span style="color:gray;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'none') |list|length}}</span> <span style="color:gray;">{{ bunny.player_caught_by_players | selectattr('catching_player', '==', player) | selectattr('review.name', '==', 'none') |list|length}}</span>
</td> </td>
@ -43,15 +38,28 @@
{% endwith %}</td> {% endwith %}</td>
<td> <td>
<a href="{{ url_for('main.catch_bunny', game_name=game.name, bunny_name=bunny.user.name) }}"> <a href="{{ url_for('main.catch_bunny', game_name=game.name, bunny_name=bunny.user.name) }}">
<button class="btn btn-success">Catch</button> <button class="btn btn-success btn-sm">Catch</button>
</a> </a>
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
<span style="font-size: smaller;">
(<span style="color:green;">Accepted</span>/<span style="color:red;">Denied</span>/<span style="color:gray;">Not reviewed</span>)
</span>
</div>
</div>
<div class="col-xs-12 col-md-3">
{% include '_game_player_info.html' %}
</div>
</div>
<div class="row">
<div class="col-xs-1 col-md-1"></div>
<div id="map" style=" height: 500px; border-radius: 10px; " class="col-xs-10 col-md-10"></div>
<div class="col-xs-1 col-md-1"></div>
</div> </div>
<div id="map" style=" height: 500px; border-radius: 10px; " class="col-md-6 col-xs-12"></div>
{% endblock %} {% endblock %}
@ -72,8 +80,8 @@
L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', { L.tileLayer( 'https://geodata.nationaalgeoregister.nl/tiles/service/wmts/brtachtergrondkaartpastel/EPSG:3857/{z}/{x}/{y}.png', {
attribution: 'Kaartgegevens &copy; <a href="https://kadaster.nl">Kadaster</a>' attribution: 'Kaartgegevens &copy; <a href="https://kadaster.nl">Kadaster</a>'
}).addTo( map ); }).addTo( map );
var bunnies = JSON.parse('{{ json.dumps(game.last_locations(game.bunnies()), cls=location_encoder)|safe }}') var bunnies = JSON.parse('{{ json.dumps(game.last_locations(game.bunnies()), cls=location_encoder)|safe }}')
for (var i = 0; i < bunnies.length; i++){ for (var i = 0; i < bunnies.length; i++){
addPlayerMarker(map, bunnies[i]) addPlayerMarker(map, bunnies[i])
} }
@ -84,4 +92,4 @@
} }
</script> </script>
{% endblock %} {% endblock %}

24
app/templates/index.html

@ -1,11 +1,19 @@
{% extends 'player_base.html' %} {% extends 'player_base.html' %}
{% block player_app_content %} {% block player_app_content %}
<h1>Hi, {{ current_user.name }}!</h1> <div class="row">
<div class="col-xs-0 col-md-1"></div>
<div class="col-xs-12 col-md-10">
<h2>My games:</h2> <h2>My games:</h2>
</div>
<div class="col-xs-0 col-md-1"></div>
</div>
{% if current_user.games %} {% if current_user.games %}
<div class="table-responsive"> <div class="row">
<div class="col-xs-0 col-md-1"></div>
<div class="col-xs-12 col-md-10">
<div class="table">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -20,12 +28,12 @@
{% for game in current_user.games %} {% for game in current_user.games %}
<tr> <tr>
<td><a href="{{ url_for('main.game_dashboard', game_name = game.name) }}">{{ game.name }}</a></td> <td><a href="{{ url_for('main.game_dashboard', game_name = game.name) }}">{{ game.name }}</a></td>
<td>{{ game.state.name}}</td> <td>{{ game.state.name.title() }}</td>
<td>{{ game.start_time }}</td> <td>{{ game.start_time }}</td>
<td>{{ game.end_time }}</td> <td>{{ game.end_time }}</td>
<td> <td>
{% for gameplayer in current_user.user_games if gameplayer.game == game %} {% for gameplayer in current_user.user_games if gameplayer.game == game %}
{{ gameplayer.role.name }} {{ gameplayer.role.name.title() }}
{% endfor %} {% endfor %}
</td> </td>
</tr> </tr>
@ -33,9 +41,13 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<div class="col-xs-0 col-md-1"></div>
</div>
{% else %} {% else %}
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
You don't participate in any game yet 😢 You don't participate in any game yet 😢
</div> </div>
{% endif %} {% endif %}
{% endblock %} {% endblock %}

Loading…
Cancel
Save