A php killer game implementation
1{% extends "base.html" %}
2
3{% block title %}Spel{% endblock title %}
4
5{% block head %}
6 {{ parent() }}
7 <script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.min.js"></script>
8 <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
9{% endblock %}
10
11{% block content %}
12 <div class="row">
13 <div class="col-md-6">
14 <div class="jumbotron bg-dark">
15 {% if player.target_name %}
16 <h3 class="display-4">Ditt mål</h3>
17 Förnamn: {{ player.target_name|split(' ', 2)[0] }}<br>
18 Efternamn: {{ player.target_name|split(' ', 2)[1] }}<br>
19 Klass:
20 {% if not event.show_class %}
21 <span class="blurred">Te00XX</span><br>
22 {% else %}
23 <span>{{ player.target_class }}</span><br>
24 {% endif %}
25 <hr class="my-4 bg-white">
26 <div id="auto" hidden>
27 <video class="embed-responsive" id="preview"></video>
28 <p>
29 Om kameran är opraktiskt eller om skannern inte fungerar kan du inavaktivera kameran.
30 </p>
31 </div>
32 <div id="manual" hidden>
33 <p>
34 Din webbläsare har inte stöd för att skanna QR-koder. Vänligen ange koden manuellt istället.
35 </p>
36 <div class="row">
37 <div class="col">
38 <input class="form-control" type="text" id="code" placeholder="Ange kod" required autocomplete="off" autofocus>
39 </div>
40 <button class="btn btn-secondary" onclick="submitCode()">Tagga</button>
41 </div>
42 </div>
43 {% else %}
44 <p>
45 Du har inte tilldelats ett mål eftersom du gick med efter att QRTag började. Du kommer att automatiskt tilldelas ett mål när någon annan går ur spelet.
46 </p>
47 {% endif %}
48 </div>
49 </div>
50 <div class="col-md-6">
51 <div class="jumbotron bg-dark">
52 <h3 class="display-4">Din information</h3>
53 Förnamn: {{ session.qr.name|split(' ', 2)[0] }}<br>
54 Efternamn: {{ session.qr.name|split(' ', 2)[1] }}<br>
55 Klass: {{ session.qr.class }}<br>
56 Poäng: {{ victims|length }}<br>
57 Kod: <span id="secret">{{ player.secret }}</span>
58 <hr class="my-4 bg-white">
59 <div class="row">
60 <div class="col"></div>
61 <div class="col-auto pt-4 pb-4 pr-5 pl-5 bg-light">
62 <div id="qrcode" class="row d-flex justify-content-center"></div>
63 </div>
64 <div class="col"></div>
65 </div>
66 {% if victims %}
67 <hr class="my-4 bg-white">
68 Dina tidigare mål:
69 <table class="table table-dark">
70 <tbody>
71 {% for victim in victims %}
72 <tr>
73 <td>{{ victim.name }}</td>
74 <td>{{ victim.class }}</td>
75 <td>{{ victim.created_date|date('m/d H:i') }}</td>
76 </tr>
77 {% endfor %}
78 </tbody>
79 </table>
80 {% endif %}
81 </div>
82 </div>
83 </div>
84<style>
85.blurred
86{
87 color: transparent;
88 text-shadow: 0 0 10px #FFF;
89 -webkit-touch-callout: none; /* iOS Safari */
90 -webkit-user-select: none; /* Safari */
91 -khtml-user-select: none; /* Konqueror HTML */
92 -moz-user-select: none; /* Firefox */
93 -ms-user-select: none; /* Internet Explorer/Edge */
94 user-select: none; /* Non-prefixed version, currently
95 supported by Chrome and Opera */
96}
97</style>
98 <div class="modal text-dark" id="qrtag-modal" tabindex="-1" role="dialog">
99 <div class="modal-dialog" role="document">
100 <div class="modal-content">
101 <div class="modal-header">
102 <h5 id="modal-title" class="modal-title"></h5>
103 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
104 <span aria-hidden="true">×</span>
105 </button>
106 </div>
107 <div id="modal-message" class="modal-body">
108 </div>
109 <div class="modal-footer">
110 <button onClick="window.location.reload();" type="button" class="btn btn-secondary" data-dismiss="modal">Stäng</button>
111 </div>
112 </div>
113 </div>
114 </div>
115
116 <script src="static/main.js"></script>
117{% endblock %}