Digitaler Spielberichtsbogen der Kölner Kickerliga
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
inc
public
resources
src
tests
.gitignore
.htaccess
.nvmrc
Gruntfile.js
LICENSE
OneSignalSDKUpdaterWorker.js
OneSignalSDKWorker.js
README.md
cache.manifest
clear.php
composer.json
index.php
live.php
manifest.json
overlay.php
overview.php
package-lock.json
package.json
privacy.php
quicklab.php
statistics.php
step1.php
step2.php
step3.php
step4.php

README.md

Digitaler Spielberichtsbogen

Die Kölner Kickerliga (KKL) ist eine „bunte Liga“, also selbstständig organisiert und unabhängig vom Spielbetrieb des Deutschen Tischfußballbunds DTFB. 2010 gegründet, lautet das Motto der Kölner Kickerliga: „Crack oder Einsteiger? Egal – Hauptsache Bock auf Zocken“.

Ein Spieltag besteht aus 10 Spiele á 2 Sätze. Die Losung für eine solche Begegnung ist dabei besonders: am Austragungsort werden vor der ersten Partie alle 10 Paarungen des gesamten Spieltags ausgelost werden. Das fördert den Mannschaftsgedanken als auch das faire Aufeinandertreffen zweier unterschiedlich starker Teams.

Der digitale Spielberichtsbogen soll dabei den Spielbetrieb am Spieltag unterstützen. Aufstellung, Losung, Berechnung und Mitteilung wird dabei komplett automatisiert.

Usage

Required:

config

Im Ordner /inc/ liegt die Datei config-example.php. Diese muss kopiert, bearbeitet und umbenannt werden in config.php. Hier werden globale Informationen (zB E-Mail Adresse, GoogleMapsId) definiert.

init

    $ npm install
    $ grunt 

develop

  $ grunt <command>

  Commands:

    default     compile all files to public/
    dev         compile all files to public/, create source-maps, start watcher

MongoLite & LocalStorage

Damit das Tool auch in Internetschwachen Kneipen funktioniert, werden die Spieldaten für ein laufendes Spiel in erster Linie auf dem verwendeten Device (localStorage) zwischengespeichert und von dort auch bezogen. Um eine schnelle Einsicht in das Spiel auch für alle anderen Besucher zu ermöglichen, werden die Daten aber kontinuierliche mit einer Datenbank synchronisiert (/resources/db/KKL_DB.sqlite).

icomoon

Um die Ladezeiten so gering wie möglich zu halten, werden zB nur Icons geladen, die auch wirklich nötig sind. Mit Hilfe von Icomoon können die Icons organisiert werden.

Dafür muss die Datei /resources/fonts/kkl-digitaler-spielberichtsbogen.json bei Icomoon importiert, bearbeitet und wieder runtergeladen werden. Zum updaten der Font-Dateien:

    $ npm run icomoon

cache.manifest

Dank HTML 5 ist es jetzt möglich ganze Websites lokal zu cachen. Welche Dateien genau gecachet werden soll, ist in der cache.manifest festgelegt, beim Erstellen von neuen Dateien wäre es also sinnvoll diese dort zu ergänzen. Falls man eine Datei verändert hat und will, dass diese von den Clients aktualisiert wird, reicht es einfach die rev Nummer in Zeile 2 der Datei zu verändern.

apache

Header set Access-Control-Allow-Origin "*"

RewriteEngine on
RewriteCond %{THE_REQUEST} ([^.]+)\.php [NC]
RewriteRule ^ /%1 [NC,L,R]
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*?)/?$ $1.php [NC,L]

nginx

server {
        listen 80;

        root /path/to/spielbericht/;
        index index.php index.html index.htm;

        server_name spiel.kickerligakoeln.de;

        location = / {
          root /path/to/spielbericht/;
        }

        location / {
          try_files $uri $uri.php;
          rewrite ^(.*)$ $uri.php;
        }

        location /public {
          root /path/to/spielbericht/;
        }

        location /resources {
          root /path/to/spielbericht/;
        }

        location ~ \.php$ {
                try_files $uri =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass 127.0.0.1:9000;
                fastcgi_index index.php;
                fastcgi_read_timeout 1200s;
                include fastcgi_params;
        }
}

Websocket (optional)

Um die Socketverbindung zu starten muss die Datei /bin/socket.php ausgeführt werden. In ihr wird auch der Port angegeben der verwendet werden soll. Am besten man macht sich eine eigene Subdomain die auf diesen Port zeigt. Die Clients können sich dann direkt über diese Subdomain damit verbinden. Zu jeder Socketverbindung gehört auch eine matchId, über die dann Updates gesendet und empfangen werden können. (z.B. ws://socket.kickerligakoeln.de?matchid=1716)

Overlays (optional)

Der Digitale Spielberichtsbogen stellt für jedes Match ein paar HTML-Schnipsel auf transparentem Hintergrund zur Verfügung die in Streaming-Software (OBS, XSplit, ...) genutzt werden kann um aktuelle Informationen zu einem Spiel über ein Video zu legen. Um die Positionierung der Elemente dem "Aufnahmeleiter" zu überlassen, sind die Schnipsel klein gehalten.

Aufruf

/overlay?match={MATCH_ID}&snippet={OPTION}

Die MATCH_ID findest du auf der Detailansicht oder in der URL einer Begegnung.

Options

title - Teams der aktuellen Begegnung, ("Bauchbinde", solid background)

score - Aktueller Spielstand ("Bauchbinde", solid background)

details - Details zum Spiel inkl. Einzelspielerstatistiken, translucent background

trend - Spielverlauf als Balkengrafik, translucent background

ranking - Aktuelle Tabelle der Liga, translucent background

sheet - Scoresheet der aktuellen Partie, translucent background

players - Aktuelle Spieler in der Partie, Heimspieler zuerst ("Bauchbinde", solid background)

players&swap=true - Aktuelle Spieler in der Partie, Auswärtsspieler zuerst ("Bauchbinde", solid background)

Testing (optional)

npm version

Der digitale Spielberichtsbogen kann mithilfe von CasperJS auf Funktionalität getestet werden. Dazu muss zunächst die inc/config-tests.js aus der Vorlagedatei angelegt und mit den erforderlichen Daten befüllt werden.

init

    $ npm install -g phantomjs
    $ npm install -g casperjs 

testing

    $ casperjs test <file>

Authentifizierung

Spielleiter

Ein Nutzer der ein neues Spiel startet, wird im Tool automatisch als Spielleiter angelegt. Dafür wird die Session beim Spielleiter als Cookie (EDITOR_AUTH) hinterlegt und in der Datenbank mit der MatchId abgespeichert. Beim zukünftigen Speichern wird nun immer zuerst geprüft ob es einen Cookie gibt und ob dieser auch in der Datenbank vorliegt.

Meldet sich ein zweiter Spielleiter über das Formular (/step3) an, wird ein weiterer Eintrag in der Datenbank angelegt.

Mit Beenden des Spiels werden die Daten automatisch aus der Datenbank gelöscht.

Admin

Über eine erfolgreiche Admin Authentifizierung können Spiele auch von einer zweiten Person (nachträglich) bearbeitet oder gelöscht werden. Dafür muss ein Cookie ADMIN_AUTH, mit dem im Projekt hinterlegten key übereinstimmen (siehe /inc/config-example.php). Zudem werden in der Übersicht alle Spiele (also auch unvollendete Spiele) angezeigt. Dieser Cookie muss per Hand angelegt werden.

Dokumentation

sassdoc

Über grunt lässt sich eine SASS Dokumentation über verwendete mixins generieren:

$ grunt sassdoc
oder
$ grunt dev

Pfad: /public/css/sassdoc/index.html

Changelog

10/2018

  • show live matches on index

07/2018

  • use kkl api-key to get user data (e-mail)
  • hide user data (e-mail) in console.logs
  • send score-data to kkl-ligatool (for "liveRanking")
  • refactor config.php
  • make it easier to update icons

05/2018

  • show cup in /overview.php
  • use Single-Score-Modus to edit single matches
  • remove captain e-mail address from scoresheet after sending mail
  • admin navigation: show all scoresheets
  • admin navigation: send scoresheet by email
  • add Overlays (siehe Anleitung)
  • authentification by cookie

04/2018

  • use MongoLite DB to store scoresheets. (See documentation above.)
  • add Database Interface
  • migrate & fix old json-files
  • admin authentication by cookie
  • admin navigation: edit/remove scoresheets in frontend

03/2018

  • redesign navigation

02/2018

  • use new "KKL JSON API"
  • refactor endpoints, rename methods
  • redesign matchDetails (/step3, /live)
  • new HTML e-mail template by Mail Developer

01/2018

  • tiny matchtitle while scrolling
  • season history in /overview and /statistics
  • redesign social sharing

12/2017

  • integrate casperJS for testing

11/2017

  • show location in google maps (live.php)
  • hide .php in URL ("RewriteRule")
  • update folder structure and resources

10/2017

  • show "player statistics", games, rate
  • check for localStorage and show error Message

09/2017

06/2017

  • show "game trend", highlight winner
  • init quicklab.php
  • ref html (no twitter bootstrap)
  • ref buttons
  • redesign overview.php
  • highlight running games (Live!)
  • overview.php -> use angular controller

05/2017

04/2017

02/2017

  • move to https
  • grunt composer:install
  • send data to kkl tool
  • push notification by www.onesignal.com

01/2017

  • new gametype: "Freundschaftsspiel"
  • use sudden death

09/2016

  • add google analytics
  • swipe in step3.php and live.php to see matchdetails or live table
  • bugfixes

08/2016

  • integrate websocket
  • add angularJS
  • HTML5 manifest

07/2016

04/2016

  • import digitaler spielberichtsbogen to github
  • config spiel.kickerligakoeln.de
  • First implementation of a remote result display
  • add grunt for css compiling and css / js minifying
  • refactor css/less