Es ist Sonntagnachmittag, die Familie kommt zusammen und das gemeinsame Kartenspiel beginnt. Die erste Frage lautet dabei immer, wer schreibt die Punkte auf? Wie immer gibt es keine Freiwilligen und am Ende muss der Onkel wieder mit Stift und Papier ausgerüstet die Zahlen jonglieren. Einen Laptop mit Excel will auch Keiner beim gemeinsamen Spielen am Tisch haben und mit dem Smartphone macht das Tabellenprogramm auch keinen Spaß. Somit bleibt Stift und Papier und vielleicht noch der Taschenrechner, aber muss das so sein? Alles wird digitaler, warum sollte man sich nicht auch beim Kartenspielen ein wenig Luxus gönnen? Heute wollen wir allen geplagten Punkte-Zusammenzählern etwas Gutes tun und an dem Projekt “SCORECOUNT” arbeiten.
Neben dem Projekt gibt es eine Premiere auf dem ArtsBlog. Das ganze Unterfangen soll ein Community-Projekt werden. Hier seid ihr gefragt, mit euren Ideen, Vorschlägen, Erweiterungen und Lösungen. Schreibt mir via Mail (info@theartsblog.de) oder nutzt die Kommentarfunktion. Beiträge in der Kategorie “Community” sind freigeschaltet für Kommentare. Die Kommentarfunktion bleibt in den anderen Beiträgen weiter deaktiviert, aufgrund des Moderations-Aufwand.
Eure Arbeit soll gesehen werden! Vorschläge & Lösungen werden übernommen und in Beiträgen zum Thema vorgestellt. Dabei werdet ihr natürlich erwähnt, sofern ihr das wollt. Alles kann, Nichts muss. Community-Projekte sollen Spaß machen und euer Können unter Beweis stellen! Community-Projekte sind Open Source und werden niemals auf dem ArtsBlog zu Geld gemacht!
Kommentare, die Andere diskriminieren, Werbung oder Spam enthalten werden gelöscht! Der ArtsBlog setzt hierfür moderne Tools ein, aber eine hundertprozentige Lösung gibt es nicht. Sollte dir etwas auffallen, melde dich bitte via Mail (info@theartsblog.de). Alle Informationen zum Thema Datenschutz findest du in der Datenschutzerklärung.
01. Die Anforderungen
Ein Projekt beginnt immer mit einem Problem, das es zu lösen gilt. Unser Problem ist es, dass sich Spieler von Gemeinschaftsspielen weniger um Bürokratie kümmern sollen und das nervige Zusammenzählen von Punkten mit Stift und Papier entfallen soll.
Dafür ist es nötig, Spieler anlegen zu können und für jede Spielrunde Punkte eintragen zu können. Außerdem sollte der Name des jeweiligen Spielers eingetragen werden können, um einfach zuordnen zu können, wer die Punkte bekommt. Des Weiteren wollen wir die Runden des Spiels nicht limitiert und eine dynamische Rundenzahl ermöglichen. Datenschutz wird auf dem ArtsBlog großgeschrieben, daher wollen wir keine Daten speichern.
Damit kein Laptop am Tisch stehen muss, soll das Projekt für die Nutzung auf Smartphones oder Tablets ausgelegt sein. Als CSS Framework benutzen wir Bootstrap 5.2 und für die Funktion jQuery 3.6. Wir arbeiten mit Zahlen, damit kann man viel machen, wir wollen den Durchschnitt an Punkten errechnen, den jeder Spieler pro Runde erreicht.
Zusammengefasst:
- Mehrere Spieler
- Spielernamen
- Punkte eintragen je Runde
- Punkte zusammenzählen je Spieler
- Punkte durchschnitt errechnen
- Dynamische Rundenzahl
- Nutzung auf Smartphone oder Tablet
- Bootstrap 5.2 & jQuery 3.6
- Datenschutzfreundlich
02. Basis-Skript
All die vorher genannten Anforderungen erfüllt das Basis-Skript schon. Mit diesem wollen wir arbeiten und im nächsten Abschnitt möchte ich euch noch ein paar Ideen auf dem Weg geben, wie das Projekt erweitert werden könnte. Ich möchte auf die Funktionsweise des Skripts hier gar nicht groß eingehen, schaut euch den Code an und probiert aus, wie das Projekt arbeitet. Das Basis-Skript ist nicht perfekt und bietet noch viel Raum für Verbesserungen. Am Ende des Beitrags könnt ihr alle Daten herunterladen und euch selbst daran probieren.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SCORECOUNT</title>
<meta name="description" content="Einfach & kostenlos Spielergebnisse zusammenzählen">
<meta name="author" content="ArtsBlog">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/icons/all.css" rel="stylesheet">
<style>
.card-body {
max-height: 250px;
overflow-y: auto;
}
</style>
</head>
<body class="bg-light">
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">Über</h4>
<p class="text-muted">Keine Lust mehr auf Stift & Papier? Lass dir die Punkte deines Spiels einfach für jeden Spieler zusammenzählen. Die Spielernamen können geändert werden.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Menü</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Link 1</a></li>
<li><a href="#" class="text-white">Link 2</a></li>
<li><a href="https://theartsblog.de" class="text-white">ArtsBlog</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong class="ms-2"><i class="bi bi-journal-plus"></i><b> SCORE</b><span class="fw-light">COUNT<span></strong>
</a>
<span class="navbar-nav ms-auto me-3"><button type="button" id="restart" class="btn btn-outline-secondary"><i class="bi bi-arrow-clockwise"></i></button></span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<div id="notify"></div>
<div class="py-5 text-center container intro">
<div class="row py-lg-3">
<div class="col-lg-6 col-md-8 mx-auto">
<h1><i class="bi bi-journal-plus"></i><b> SCORE</b><span class="fw-light">COUNT<span></h1>
<p class="lead text-muted">Keine Lust mehr auf Stift & Papier? Lass dir die Punkte deines Spiels einfach für jeden Spieler zusammenzählen. Trage die Anzahl der Spieler ein und lege los!</p>
<div class="row mb-3 d-flex justify-content-center">
<div class="col-lg-7 col-8 mx-auto">
<div class="input-group">
<input type="number" class="form-control" id="players" placeholder="Anzahl der Spieler" aria-label="Anzahl der Spieler" aria-describedby="Anzahl der Spieler">
<button class="btn btn-outline-secondary" type="button" id="go"><i class="bi bi-controller"></i> Go!</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="album py-5 bg-light">
<div class="container">
<div id="player-cards" class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"></div>
</div>
</div>
<footer class="text-muted text-center container py-5">
<p>ArtsBlog</p>
<p>SCORECOUNT v 0.1.3</p>
</footer>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>$(document).ready(function(){
$(".album").hide();
$('#go').on('click', function () {
var players_sum = $("#players").val();
if (players_sum > 12){
var players_sum = 12;
}
for (i = 0; i < players_sum; i++) {
var player_num = i + 1;
$('#player-cards').append('<div class="col"><div class="card m-1" ><div class="card-header text-center bg-dark text-light py-5"><input type="text" class="form-control form-control-lg border border-0 text-center bg-dark text-light" placeholder="Spieler ' + player_num + '"><h6><span id="total" class="badge text-bg-primary me-1"><i class="bi bi-star-fill"></i></span><span id="average" class="badge text-bg-secondary"><i class="bi bi-circle-half"></i></span></h6></div><div class="card-body"><table class="table"><thead><tr><th scope="col">#</th><th scope="col"><i class="bi bi-star-fill"></i> Punkte</th></tr></thead><tbody><tr><td class="rounds">1</td><td><input type="number"class="form-control border border-0" placeholder="Runde"></td></tr><tr><td class="rounds">2</td><td><input type="number"class="form-control border border-0" placeholder="Runde"></td></tr><tr><td class="rounds">3</td><td><input type="number"class="form-control border border-0" placeholder="Runde"></td></tr></tbody></table></div></div></div>')
}
$(".intro").hide();
$(".album").show();
$('.card').on('input', function () {
// Counter
var scorecount = 0;
$('input', this).each(function () {
var get_input_value = $(this).val();
if ($.isNumeric(get_input_value)) {
scorecount += parseFloat(get_input_value);
}
});
var input_filled = $('table :input', this).filter((i, el) => el.value.trim() !== '').filter((i, el) => el.value.trim() !== '-').length;
var score_average = scorecount / input_filled;
var score_average = Math.round(score_average);
$('#total', this).html('<i class="bi bi-star-fill"></i> ' + scorecount);
$('#average', this).html('<i class="bi bi-circle-half"></i> ' + score_average);
// New round
if( $('table tr:last input' ,this).val().length !== 0 ) {
var nextround = parseFloat($('table tr:last td.rounds' ,this).text()) + 1;
$('table tr:last' ,this).after('<tr><td class="rounds">' + nextround + '</td><td><input type="number" class="form-control border border-0" placeholder="Runde"></td></tr>');
var rowpos = $('table tr:last' ,this).position();
$('.card-body' ,this).scrollTop(rowpos.top);
}
});
});
});
// Notification Modal
$(function () {
var modal_template_01 = '<div class="modal fade" tabindex="-1" role="dialog" id="modal"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content rounded-3 shadow"><div class="modal-body p-4 text-center"><h5 class="mb-0">';
var modal_template_02 = 'Titel';
var modal_template_03 = '</h5><p class="mb-0">';
var modal_template_04 = 'Text';
var modal_template_05 = '</p></div><div class="modal-footer flex-nowrap p-0">';
var modal_template_06 = '<button type="button" id="';
var modal_template_07 = 'Funktion';
var modal_template_08 = '" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-end">';
var modal_template_09 = 'Ja';
var modal_template_10 = '</button><button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0" data-bs-dismiss="modal">';
var modal_template_11 = 'Nein';
var modal_template_12 = '</button></div></div></div></div>';
// Clean input
$("#restart").on('click', function() {
var modal_template_02 = 'Achtung!';
var modal_template_04 = 'Möchten Sie die Eingaben wirklich Löschen?';
var modal_template_07 = 'clean-form';
$('#notify').html(modal_template_01 + modal_template_02 + modal_template_03 + modal_template_04 + modal_template_05 + modal_template_06 + modal_template_07 + modal_template_08 + modal_template_09 + modal_template_10 + modal_template_11 + modal_template_12);
$("#modal").modal("show");
$("#clean-form").on('click', function() {
location.reload(true);
});
});
});03. So könnte es weiter gehen
Community-Projekte leben von der Community, daher kann hier noch viel passieren und an Dinge gedacht werden, die am Anfang gar nicht auf der Agenda standen. Fühlt euch frei und schreibt mir eure Ideen oder vielleicht sogar schon fertige Lösungen. Ich möchte euch hier auch keine Vorgaben machen, sondern nur Gedanken liefern, was möglich wäre. Ich freue mich sehr, mit euch das Projekt zu gestalten und endlich mehr mit der Community in Kontakt treten zu können. Grüße euer Andreas
Mögliche Funktionen:
- Reihenfolge der Spieler je nach Punktestand
- Spieler markieren, der gerade am Gewinnen ist
- Export der Spielergebnisse oder Screenshot
- Spieler “Card” mit unterschiedlichen Farben
- Animationen
- freundlicheres Design
04. Download
Ich habe hier nochmal alle Files zusammengestellt, damit das Einrichten nochmal etwas schneller von der Hand geht. Ich hoffe, ihr habt genauso viel Spaß mit dem Projekt wie ich und jetzt wünsche ich euch gutes Gelingen.
