-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
323 lines (296 loc) · 17.7 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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Jan Schneider">
<meta name="description" content="sense-chess is a project by Marcus Schoch and Jan Schneider with Prof. Michael Schuster and Benjamin Thomsen at HfG Schwäbisch Gmünd.">
<!-- start App Icons -->
<link rel="apple-touch-icon" sizes="57x57" href="img/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon-16x16.png">
<link rel="manifest" href="img/icons/manifest.json">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="img/icons/ms-icon-144x144.png">
<meta name="theme-color" content="#000000">
<!-- end App Icons -->
<link rel="shortcut icon" href="img/icon.png">
<link rel="icon" type="image/png" href="img/icon.svg">
<link rel="image_src" href="img/icon.svg" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>sense-chess</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/grayscale.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">sense-chess</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">Über</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#projects">Features</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#signup">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="masthead">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#about" class="btn btn-primary js-scroll-trigger">start</a>
</div>
</div>
</header>
<!-- About Section -->
<section id="about" class="about-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">Konzept</h2>
<h4 class="text-white-50">Ein Schachsystem zum verbesserten Spielerlebnis von Anfängern<br> und zur intelligenten Analyse und Training. <br/><br/>
Ein Projekt von <br/><a class="text-white" href="https://jan-patrick.de" target="_blank">Jan Schneider</a> & <a class="text-white" href="https://marcus-schoch.de" target="_blank">Marcus Schoch</a></h4>
<br><br><br>
</div>
</div>
</div>
</section>
<!-- Projects Section -->
<section id="projects" class="projects-section bg-light">
<div class="container">
<!-- Featured Project Row -->
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7">
<img class="img-fluid mb-3 mb-lg-0" src="img/touch.jpg" alt="Konzept">
</div>
<div class="col-xl-4 col-lg-5">
<div class="featured-text text-left text-lg-left">
<h4>Ziel</h4>
<p class="text-black-50 mb-0">sense-chess greift das Problem auf, dass Schach nur mit Spielern des selben Niveaus eine gewisse Herausforderung beinhaltet und somit erst Vergnügen bereitet. Denn beim konventionellen Schachspiel eines Fortgeschrittenen mit einem Anfänger fühlt sich der Fortgeschrittene unterfordert, und wenn dieser sein Können zeigt führt das zur Frustration des Anfängers.
<br><br>
Ein weiteres Problem ist, dass kein System auf dem Markt ist, welches dem Schachspieler erlaubt, sein Spiel oder auch seine Spielhistorie übersichtlich im Nachhinein darzustellen, dieses auszuwerten und auch zusätzliche Informationen zu erlangen.
<br><br>
Diese Probleme sollen durch sense-chess gelöst werden, indem der Spieler nach längerer Berührung einer Spielfigur Hilfestellung bekommt, diese aber nicht in Anspruch nehmen muss oder das Lernen des Spiels vernachlässigt wird. Gleichzeitig werden alle Spielzüge erkannt, ausgewertet und gespeichert, um eine möglichst gute Lernplattform zu kreieren, langfristig Aufschluss über den Fortschritt zu geben und dem Spieler ein möglichst gutes Feedback zu geben. </p>
</div>
</div>
</div>
<!-- Project One Row -->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-lg-6">
<img class="img-fluid" src="img/black.jpg" alt="Interaktion">
</div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-left text-lg-left">
<h4 class="text-white">Interaktion</h4>
<p class="mb-0 text-white-50">Die Kerninteraktion des Projekts findet direkt am Schachbrett, zwischen dem Spieler, der berührten Figur und dem
Schachbrett statt. Da es der Anspruch ist den Eindruck
eines normales Schachbretts entstehen zu lassen, zumindest wenn man es ohne seine Zusatzfunktionalitä-
ten nutzt, muss schon allein der produktgestalterische
Ansatz dieser Funktionalität entsprechen. Die Größe des
Prototypen ist deshalb so kompakt wie möglich gehalten,
um dem einfachen Spielen nichts entgegenzusetzen. <br><br>Im
ausgeschalteten, strom- oder internetlosen Zustand ist
das Schachbrett so als ganz normales Schachbrett verwendbar. Die Funktionalität des Spielaufzeichnens funktioniert auch bei rein durchgeführten Zügen, ohne vorheriges längeres Berühren der Figuren. Erst bei längerer
Berührung einer Figur wird die Konnektivität und Intelligenz des scheinbar rein physischen Schachbretts sichtbar, durch das Aufleuchten der Felder (Feldanzeige in Reihenfolge: valide Züge der berührten Figur, bester Zug der
Figur, Figur mit besserer Zugoption, bester aktueller Zug).
Die rein physikalische Funktionalität ist also durch die produktgestalterische Lösung gegeben, und ein gutes und
altbekanntes Schachspielerlebnis ist dadurch möglich.</p>
<hr class="d-none d-lg-block mb-0 ml-0">
</div>
</div>
</div>
</div>
</div>
<!-- Project Two Row -->
<div class="row justify-content-center no-gutters">
<div class="col-lg-6">
<img class="img-fluid" src="img/board.jpg" alt="Gestaltung">
</div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-left text-lg-right">
<h4 class="text-white">Gestaltung</h4>
<p class="mb-0 text-white-50">Das Erscheinungsbild von sense-chess ist in allen Ebenen der Gestaltung und den Berührungspunkten mit
einem Benutzer bewusst umgesetzt. Zu diesem gehö-
ren das Schriftbild, umgangssprachlich auch Logo, das
Layout von Magazinen, Icons der Schachfguren und die
physischen Figuren, sowie eine online Repräsentation.<br><br>
Die Repräsentation nach Außen folgt einem Konzept
von klaren Linien und einfacher, minimalisitscher Gestaltung. Angelehnt an das Schachbrett, dessen einfacher
Aufbau und Klarheit auch die Auffassung von Schach
widergespiegelt durch die schwarz-weiße Farbgebung
und der Assoziation von Logik mit dem Spiel. Durch diese Attribute sollen Anfänger, aber auch fortgeschrittene
Spieler zu gleichen Teilen angesprochen werden. Es soll
suggeriert werden, dass diese Anwendung so einfach zu
verstehen ist wie sie gestaltet ist. </p>
<hr class="d-none d-lg-block mb-0 mr-0">
</div>
</div>
</div>
</div>
</div>
<!-- Project Three Row -->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-lg-6">
<img class="img-fluid" src="img/matrix.jpg" alt="Aufbau">
</div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-left text-lg-left">
<h4 class="text-white">Aufbau</h4>
<p class="mb-0 text-white-50">Grundlage des Ganzen ist die Erkennung des Feldes der Spielfgur bei Berührung. Da unser Anspruch, das Spielfeld wie ein herkömmliches Brett zu
gestalten in dieser Hinsicht eine gestalterische und technische Herausforderung ist, haben wir uns für die Verwendung von kapazitiven Sensoren entschieden, da wir
so durch die Brettoberfläche hindurch die Berührung der Figuren erkennen können. <br><br>
Dieses Prinzip basiert darauf, dass ein Arduino mittels zweier Pins einen Stromkreis bilden und die Zeit messen kann, die die vorgegebene Menge an Ladung benötigt um den anderen Pin zu erreichen.
Diese Zeit wird verlängert, wenn sich eine größere Masse dem Sensor nähert, in unserem Fall der Körper des Spielers. Somit wird die Berührung messbar und nachverfolgbar. Da das Spiel immer mit derselben Startposition der
Figuren beginnt können wir so, wenn die Figur hochgehoben und, wenn die Figur gesetzt wird, ganze Spielzüge erkennen und über die Dauer der veränderten Werte auch die Berührdauer feststellen. Für diese Technik spricht auch unser Anspruch keine 64 Sensoren, sondern eine Sensormatrix zu verbauen.</p>
<hr class="d-none d-lg-block mb-0 ml-0">
</div>
</div>
</div>
</div>
</div>
<!-- Project Four Row -->
<div class="row justify-content-center no-gutters">
<div class="col-lg-6">
<img class="img-fluid" src="img/lightfields.jpg" alt="Gestaltung">
</div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-left text-lg-right">
<h4 class="text-white">Datenverarbeitung</h4>
<p class="mb-0 text-white-50">Die Verarbeitung der Daten fndet komplett auf unserem Server statt. Dort liegt die Datenbank, die JavaScript Bibliotheken (das Schachbrett samt Figuren, die Schachregeln und die
Schachintelligenz) und die Zusammenführung aus allen Teilen, ebenfalls in JavaScript. Wird ein neues Feld in die „boardinput“ Datenbank gespeichert wird dies vom Code
erkannt und in Zusammenhang mit den vorherigen Eingaben geprüft. Wird aus dem vorher erkannten Feld ein valider Zug erkannt, wird dieser gefahren, um den digitalen
Zwilling des Bretts aktuell zu halten und der Zug in die Datenbank gespeichert, um das Spiel später nachverfolgen zu können. Wird kein valider Zug erkannt wird geprüft, ob
das eingegangene Feld eine valide Eingabe ist, oder zum Beispiel eine Berührung der falschen Farbe. Wenn hier
eine Figur der richtigen Farbe berührt wird, wird der aktuelle Status der Figur erhöht und je nachdem wie hoch der
Status ist, eine Unterstützung in Form von zu beleuchtenden Feldern berechnet. Dabei wird bei einem neu erhaltenen Feld einmal alles berechnet (valide Züge, bester
Zug der berührten Figur, beste Figur für einen Zug, bester aktuell möglicher Zug), gespeichert und anschließend nur noch abgefragt.
<hr class="d-none d-lg-block mb-0 mr-0">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Signup Section -->
<section id="signup" class="signup-section">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<a href="/play" class="btn btn-primary js-scroll-trigger">online spielen</a>
<div class="mx-auto text-center">
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact-section bg-black">
<div class="container">
<div class="row">
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-link text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Jan Schneider</h4>
<hr class="my-4">
<div class="small text-black-50">
<a href="https://jan-patrick.de" target="_blank">Website</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-book text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Dokumentation</h4>
<hr class="my-4">
<div class="small text-black-50">
<a href="./download/Dokumentation_sense-chess.pdf" download="Dokumentation_sense-chess">ansehen und herunterladen</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-link text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Marcus Schoch</h4>
<hr class="my-4">
<a href="https://marcus-schoch.de" target="_blank">Website</a>
</div>
</div>
</div>
</div>
<div class="social d-flex justify-content-center">
<a href="https://github.com/sense-chess" target="_blank" class="mx-2">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black small text-center text-white-50">
<div class="container">
<p>Copyright © <a href="https://jan-patrick.de" target="_blank">Jan Schneider</a> | <a href="https://marcus-schoch.de" target="_blank">Marcus Schoch</a> 2018<br>
<a href="./imprint/">imprint & data protection</a></p>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/font-awesome/js/all.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/grayscale.min.js"></script>
<script type="text/javascript">
//This is the "Offline copy of pages" service worker
//Add this below content to your HTML page, or add the js file to your page at the very top to register service worker
if (navigator.serviceWorker.controller) {
console.log('[PWA Builder] active service worker found, no need to register')
} else {
//Register the ServiceWorker
navigator.serviceWorker.register('pwabuilder-sw.js', {
scope: './'
}).then(function(reg) {
console.log('Service worker has been registered for scope:'+ reg.scope);
});
}
</script>
</body>
</html>