-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
352 lines (339 loc) · 19 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
<!DOCTYPE html>
<html lang="de-CH">
<head>
<title>Jassen by Michi</title>
<meta name="mobile-web-app-title" content="Jassen">
<meta name="apple-mobile-web-app-title" content="Jassen">
<link id="favicon" rel="icon" type="image/png" href="assets/logo/logo_128.png">
<link rel="shortcut icon" type="image/png" href="assets/logo/logo_128.png">
<link rel="apple-touch-icon" href="assets/logo/logo_128.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/logo/logo_128.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/logo/logo_128.png">
<link rel="apple-touch-icon" sizes="167x167" href="assets/logo/logo_128.png">
<link rel="canonical" href="https://jass.von-ah.me">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script src="game.js"></script>
<script src="https://unpkg.com/akar-icons-fonts"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/aos.css"/>
<meta charset="UTF-8">
<meta name="description" content="Jassen by Michi">
<meta name="keywords" content="Jassen, Michi, Michi von Ah, von Ah, von Ah Jassen, Jassen von Ah, Jassen by Michi, Jassen Michi">
<meta name="author" content="Michi von Ah">
<meta name="robots" content="index">
<meta http-equiv="expires" content="43200">
<meta property="og:title" content="Jassen by Michi">
<meta property="og:description" content="Jassen by Michi">
<meta property="og:image" content="assets/logo/logo_128.png">
<meta property="og:image:type" content="image/png">
<meta property="og:url" content="https://jass.von-ah.me">
<meta property="og:site_name" content="Jassen by Michi">
<meta property="twitter:title" content="Jassen by Michi">
<meta property="twitter:description" content="Jassen by Michi">
<meta property="twitter:image" content="assets/logo/logo_128.png">
<meta name="twitter:image:alt" content="Michi von Ah">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@michivonah">
<meta name="twitter:creator" content="@michivonah">
<meta name="theme-color" content="#5798db">
<meta name="mobile-web-app-status-bar-style" content="#79c857">
<meta name="apple-mobile-web-app-status-bar-style" content="#79c857">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="manifest" href="manifest.json">
<script defer src="https://data.mchvnh.ch/script.js" data-website-id="33c32adb-90af-4447-8ce8-66dfeb9b783b" data-auto-track="false"></script>
</head>
<body>
<div id="loadingScreen">
<img class="loader" src="assets/logo/loadingCard.svg" alt="Jasskarte Ladebildschirm">
<img class="loader" src="assets/logo/loadingCard.svg" alt="Jasskarte Ladebildschirm">
</div>
<div id="content">
<div id="home">
<div class="inner-width">
<h1>Jassen by Michi</h1>
<p class="notice">Dieses Spiel ist noch in Entwicklung.</p>
<div>
<button class="homeBtn" onclick="startGame()">Jetzt spielen!</button>
<button class="homeBtn" onclick="toggleSection('changelog', 'block')">Changelog</button>
<button class="homeBtn" onclick="toggleSection('tutorial', 'block')" style="display:none;">Anleitung/Regeln</button>
<button class="homeBtn" onclick="toggleSection('copyright', 'block')">Copyright</button>
<button class="homeBtn" onclick="toggleSection('legal', 'block')">Rechtliches</button>
<button class="homeBtn" onclick="toggleSection('settings', 'flex')">Einstellungen</button>
</div>
<p>Kontakt: <a href="mailto:[email protected]" alt="Kontakt per Mail" title="Kontakt per Mail">[email protected]</a> | 2023</p>
<div id="copyright" class="hiddenSection">
<h2>Copyright</h2>
<p>Die Karten sind von jassverzeichnis.ch. Im späteren Verlauf der Entwicklung werden diese durch eigene Karten ersetzt.</p>
<p>Der Hintergrund beim Jassteppich wurde mithilfe von projects.verou.me/css3patterns erstellt</p>
<p>Die Icons der verschiedenen Jassfarben sind von Wikipedia und wurden von Jensche gezeichnet.</p>
<p>Die Animation beim überfahren der Karten ist von https://codepen.io/william-goldsworthy/pen/JzVajj</p>
<p>Die Hintergrundmusik ist <a href="https://pixabay.com/de/users/comastudio-26079283/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=102685">ComaStudio</a> von <a href="https://pixabay.com/music//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=102685">Pixabay</a>.</p>
</div>
<div id="legal" class="hiddenSection">
<h2>Impressum</h2>
<p><i class="ai-person"></i> Michael von Ah</p>
<p><i class="ai-location"></i> Obwalden, Switzerland</p>
<p><i class="ai-envelope"></i> [email protected]</p>
<p><i class="ai-phone"></i> 078 247 15 16 (Nur Nachrichten, keine Anrufe!)</p>
<h2>Datenschutz</h2>
<p>Dieses Jass-Spiel erfasst beim Spielen keine personenbezogenen Daten. Die Seitenaufrufe werden jedoch mit einer Analytics-Software namens "Umami" erfasst. Wenn der Nutzer in den Einstellungen einer Option zustimmt, werden weitere Daten wie das Gerät, das für den Aufruf verwendet wird, erhoben. Diese Daten werden auf den Servern von "Cloudflare" gehostet und in einer PostgreSQL-Datenbank bei "Hetzner Cloud" gespeichert. Die Webserver können Log-Dateien erstellen, in denen die IP-Adressen der Nutzer ersichtlich sind.</p>
<p>Das Spiel verwendet ausserdem den Dienst "Google Web Fonts" zum Laden externer Schriftarten. Ein eingebettetes Google Forms-Formular kann eventuell weitere Daten erheben. Die Einstellungen, die vom Benutzer im Spiel getätigt werden, werden nur lokal auf dem jeweiligen Gerät in einem Cookie gespeichert.</p>
<p>Bitte beachten Sie auch die Datenschutzerklärungen von "Cloudflare", "Hetzner Cloud", "Google Web Fonts" und "Google Forms".</p>
<p>Quelle: ChatGPT</p>
</div>
<div id="tutorial" class="hiddenSection">
<h2>Anleitung/Regeln</h2>
<p>Schieber. Du spielst zu zusammen mit dem oberen Spieler.</p>
<p>Pro Runde wird bis 157 Punkte gespielt. Jeder Spieler erhäkt neun Karten.</p>
</div>
<div id="settings" class="hiddenSection">
<h2>Einstellungen</h2>
<p>Die Einstellungen werden automatisch gespeichert.</p>
<div class="container">
<label for="cardSet" style="display: none;">Kartendesign</label>
<select id="cardSet" name="cardSet" onchange="saveSettings()" style="display: none;">
<option value="jassverzeichnis" selected>jassverzeichnis.ch</option>
<option value="michivonah" disabled>jass.von-ah.me</option>
<option value="yourown" disabled>Custom</option>
</select>
<label for="playerNames">Namen der Mitspieler (durch Komma getrennt)</label>
<input id="playerNames" name="playerNames" type="text" inputmode="text" placeholder="Sepp, Kari, Heidi" value="Sepp, Kari, Heidi" onchange="saveSettings()">
<label for="playerSpeed">Geschwindigkeit der Gegner (in Millisekunden)</label>
<input id="playerSpeed" name="playerSpeed" type="number" inputmode="numeric" min="500" placeholder="1000" value="1000" onchange="saveSettings()">
<label for="trackingOptIn">Weitere Analysedaten erfassen (optional)</label>
<input id="trackingOptIn" name="trackingOptIn" type="checkbox" onchange="saveSettings()">
</div>
</div>
<div id="changelog" class="hiddenSection">
<h2>Changelog</h2>
<p>19. Februar 2023</p>
<ul>
<li>Änderungen an der PWA Funktion</li>
</ul>
<p>04. Februar 2023</p>
<ul>
<li>Funktion um das Spiel zu beenden begonnen</li>
</ul>
<p>31. Januar 2023</p>
<ul>
<li>Möglichkeit hinzugefügt die Wahl des Trumpfs zu schieben (an den Partner)</li>
<li>Algorithmus bei der Wahl des Trumpfs überarbeitet</li>
</ul>
<p>30. Januar 2023</p>
<ul>
<li>Datenschutzerklärung und erweitertes Tracking hinzugefügt</li>
<li>Anzeigefehler auf Apple′s Webengine behoben</li>
</ul>
<p>29. Januar 2023</p>
<ul>
<li>Namen der Mitspieler werden nun angezeigt</li>
<li>Die Punkte der vorherigen Runde werden nun zusammengezählt</li>
<li>Wenn man 157:0 gewinnt, erhält man nun 100 Punkte zusätzlich</li>
<li>Fehler behoben, durch welchen man keine Karten mehr hatte und die anderen Spieler endlos weiter gespielt haben</li>
</ul>
<p>28. Januar 2023</p>
<ul>
<li>Anpassungen an der Wertung der Karten</li>
<li>Position des Banner beim Ende einer Runde angepasst</li>
<li>Animation zum Smiley beim Banner hinzugefügt</li>
</ul>
<p>25. Januar 2023</p>
<ul>
<li>Die Punkte aus der letzten Runde werden nun separat zu den Punkten der aktuellen Runde angezeigt.</li>
<li>Fehler bei der Vergabe der letzten fünf Punkte angepasst</li>
</ul>
<p>24. Januar 2023</p>
<ul>
<li>Fehler beim Laden der Spieler Geschwindigkeit behoben</li>
<li>Ackee Analytics hinzugefügt</li>
</ul>
<p>23. Januar 2023</p>
<ul>
<li>Fehler beim Punktezählen nun behoben</li>
<li>Algorithmus der Gegner komplett überarbeitet</li>
<li>Einstellungen hinzugefügt</li>
<li>Gegner-Spielgeschwindigkeit kann nun angepasst werden</li>
<li>Anpassungen der Knöpfe auf dem Startbildschirm</li>
<li>Kleine Anpassungen</li>
</ul>
<p>22. Januar 2023</p>
<ul>
<li>Generelle Verbesserungen am Spiel (Bugs gefixt)</li>
<li>Reset-Funktion erweitert & Home-Button hinzugefügt</li>
<li>Kartengrösse auf Smartphones angepasst</li>
<li>Darstellungsfehler behoben</li>
<li>Hintergrundmusik hinzugefügt</li>
<li>Verbesserung der Sortierung der Karten</li>
<li>Verbesserung an den Gegnern</li>
<li>Verbesserung an der Punktezählung</li>
</ul>
<p>21. Januar 2023</p>
<ul>
<li>Animationen für iOS angepasst</li>
<li>Problem melden Funktion hinzugefügt</li>
<li>Steuerungsknöpfe hinzugefügt</li>
<li>Möglichkeit das Spiel zurückzusetzen hinzugefügt</li>
</ul>
<p>20. Januar 2023</p>
<ul>
<li>Karten werden nun sortiert angezeigt</li>
<li>Punktezähl-Algorithmus verbessert</li>
<li>Changelog hinzugefügt</li>
</ul>
<p>19. Januar 2023</p>
<ul>
<li>Homescreen angepasst</li>
<li>Ladebildschirm hinzugefügt</li>
</ul>
<p>18. Januar 2023</p>
<ul>
<li>Trumpf kann nun vom Benutzer gewält werden</li>
</ul>
<p>17. Januar 2023</p>
<ul>
<li>Algorithmus für die Computer-Spieler hinzugefügt</li>
<li>Punkteberechnung angepasst</li>
<li>Spieler welcher gestochen hat kann in der nächsten Runde als Erstes beginnen</li>
</ul>
<p>16. Januar 2023</p>
<ul>
<li>Arbeit an der generellen Funktionalität des Spiels</li>
<li>Manifest hinzugefügt</li>
<li>Animation wenn Karte gegeben wird</li>
<li>Funktion zum Punktezählen begonnen</li>
<li>Gameloop erstellt (Es können mehrere Runden gespielt werden</li>
</ul>
<p>15. Januar 2023</p>
<ul>
<li>Spielentwicklung begonnen</li>
</ul>
</div>
</div>
</div>
<div id="game">
<div id="jassteppich">
<div id="teppichContainer">
</div>
<div id="cpuPlayers">
<div class="cpuPlayer">
<p>Sepp</p>
</div>
<div class="cpuPlayer">
<p>Kari</p>
</div>
<div class="cpuPlayer">
<p>Heidi</p>
</div>
</div>
</div>
<div id="jasstafel">
<img id="currentTrump" src="assets/cards/unknown.svg" alt="Aktueller Trumpf">
<div id="pointCompareTable">
<div>
<p>Du</p>
<p id="yourPoints">0</p>
<p id="yourPointsOld">0</p>
</div>
<div>
<p>Gegner</p>
<p id="opponentPoints">0</p>
<p id="opponentPointsOld">0</p>
</div>
</div>
</div>
<div id="trumpChooser">
<p>Wähle den Trumpf!</p>
<div id="trumpContainer">
<button class="trumpButton" onclick="setTrump(0)">
<img src="assets/cards/eichel.svg" alt="Eichel Trumpf">
</button>
<button class="trumpButton" onclick="setTrump(1)">
<img src="assets/cards/rose.svg" alt="Rose Trumpf">
</button>
<button class="trumpButton" onclick="setTrump(2)">
<img src="assets/cards/schelle.svg" alt="Schelle Trumpf">
</button>
<button class="trumpButton" onclick="setTrump(3)">
<img src="assets/cards/schilte.svg" alt="Schilte Trumpf">
</button>
<button class="shiftTrumpButton" onclick="shiftTrump(player1)">Schieben <i class="ai-arrow-forward"></i></button>
</div>
</div>
<div class="cardContainer user"></div>
<div class="cardContainer cpu"></div>
<div class="cardContainer cpu"></div>
<div class="cardContainer cpu"></div>
<div id="hint">
<i id="hintIcon" class="ai-triangle-alert-fill"></i>
<p id="hintTxt"></p>
</div>
<div id="gameSummary">
<i id="summaryIcon" class="ai-victory-hand"></i>
<p>Spiel beendet</p>
<p id="summaryTxt"></p>
<div id="detailedSummary">
<p>Deine Punkte (Du + Kari): 0</p>
<p>Punkte Gegner (Sepp + Heidi): 0</p>
</div>
<button onclick="newGame()">Noch eine Runde!</button>
<button>Spiel beenden</button>
</div>
<div id="controlButtons">
<button onclick="closeGame()"><i class="ai-home-alt1"></i></button>
<button onclick="toggleSection('alertProblem', 'block')"><i class="ai-triangle-alert-fill"></i></button>
<button onclick="resetGame()"><i class="ai-arrow-counter-clockwise"></i></button>
<button onclick="toggleMusic()"><i class="ai-music-album"></i></button>
</div>
<div id="alertProblem">
<button onclick="toggleSection('alertProblem', 'block')">Fenster schliessen</button>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSe-Q_Jh-RQlw2gt2Rq2WKQ94mbMRUXAixDBVfcFU-6KJP1JeQ/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">Wird geladen…</iframe>
</div>
<div id="musicPlayer">
<audio id="backgroundMusic" src="assets/music/backgroundmusic.mp3" loop muted>
<source src="assets/music/backgroundmusic.mp3" type="audio/mpeg">
<source src="assets/music/backgroundmusic.ogg" type="audio/ogg">
<source src="assets/music/backgroundmusic.aac" type="audio/aac">
<source src="assets/music/backgroundmusic.wav" type="audio/wav">
</audio>
</div>
</div>
</div>
<script>
// Loading
window.addEventListener('load', () => {
loadSettings();
if(localStorage.getItem("enableDetailedTracking") == true || localStorage.getItem("enableDetailedTracking") == "true"){
var enableDetailedTracking = true;
}
else{
var enableDetailedTracking = false;
}
if (enableDetailedTracking) { umami.track(); }
setTimeout(function(){
document.getElementById('loadingScreen').style.display = "none";
}, 750);
});
window.addEventListener('blur', () =>{
if(document.getElementById('game').style.display == "block"){
setTimeout(function(){
document.title = "Spiel fortsetzen | Jassen by Michi";
}, 500);
}
});
window.addEventListener('focus', () =>{
document.title = "Jassen by Michi";
});
function toggleSection(sectionName, type){
var section = document.getElementById(sectionName);
if(section.style.display == "block" || section.style.display == "flex"){
section.style.display = "none";
}
else{
section.style.display = type;
}
}
</script>
</body>
</html>