GRNDbrekers Rodeo Bull PWA - StuDAY 2025

Een geavanceerde Progressive Web App voor het bijhouden van mechanische stier rijtijden tijdens StuDAY 2025, ontwikkeld door/voor GRNDbrekers - de makerspace van JC Bouckenborgh.

"Think like an engineer, build like a lunatic" - GRNDbrekers motto

🆕 Nieuwste Functies (v2.0)

📸 Foto Functionaliteit

• Camera integratie met voorkeur voor achtercamera
• Automatische compressie naar 150x150px bij 70% kwaliteit voor minimale opslag
• Foto's bij rijders zichtbaar in alle schermen
• Bewerk functie voor foto's van rijders die nog niet gereden hebben

⏱️ Geavanceerde Tijdsinvoer

• Strikte validatie van natuurlijke getallen
• Real-time filtering voorkomt ongeldige invoer
• Maximumlimiet controle (seconden ≤ 59, honderdsten ≤ 99)
• Enter-toets ondersteuning voor snellere invoer

🏆 Verbeterd Leaderboard

• Unified lijst - geen apart podium, alle posities in één scrollbare lijst
• Medaille emoji's voor top 3 (🥇🥈🥉) in de lijst
• Groter logo dat even breed is als de lijst
• Live waitlist functie in aparte leaderboard pagina

🛠️ Bewerk Mogelijkheden

• Naam en foto wijzigen voor rijders zonder tijd
• Bescherming - rijders op leaderboard kunnen niet meer bewerkt worden
• Modal interface voor gebruiksvriendelijk bewerken

📱 App Structuur

Hoofdschermen:

1. Home - Welkomstscherm met logo
2. Rijders Toevoegen - Naam + foto invoer met bewerk opties
3. Tijden Toevoegen - Gevalideerde tijdsinvoer
4. Leaderboard - Unified ranglijst met foto's

Aparte Bestanden:

• index.html - Hoofdapplicatie met alle functionaliteit
• leaderboard.html - Standalone live leaderboard met waitlist toggle
• manifest.json - PWA configuratie
• sw.js - Service Worker voor offline functionaliteit

🛠️ Technische Specificaties

Foto Optimalisatie:

// Automatische compressie naar ~10-15KB per foto
compressImage(file, maxWidth = 150, maxHeight = 150, quality = 0.7)

Tijdvalidatie:

• Minuten: 0-999 (natuurlijke getallen)
• Seconden: 0-59 (automatisch begrensd)
• Honderdsten: 0-99 (automatisch begrensd)
• Real-time filtering van niet-numerieke karakters

Data Opslag:

// localStorage structuur
{
  riders: [
    {
      name: "Rijder Naam",
      photo: "data:image/jpeg;base64,/9j/4AAQ...", // Gecomprimeerde base64
      time: "01:23:45", // MM:SS:HH formaat
      timeValue: 8345,   // Voor sortering (minuten*6000 + seconden*100 + honderdsten)
      timestamp: "2025-09-19T..."
    }
  ],
  leaderboard: [...] // Gesorteerde resultaten
}

🖼️ Logo & Images Setup

Image Branch Setup

git checkout -b images

Upload naar images branch:

• grndbrekers-bull-logo-transparant.jpg - Hoofdlogo (transparante achtergrond)
• icon-192.png - App icoon 192x192px
• icon-512.png - App icoon 512x512px

Path Configuration

Vervang in alle bestanden:

SergeHanssens/grndbrekers-bull-studay2025

Door je eigen GitHub username/repository-name

🚀 Deployment op GitHub Pages

Stap 1: Repository Setup

1. Maak nieuwe public repository op GitHub
2. Upload alle bestanden naar main branch
3. Maak images branch en upload logo bestanden

Stap 2: GitHub Pages Activeren

1. Repository → Settings → Pages
2. Source: Deploy from a branch
3. Branch: main / / (root)
4. Save

Stap 3: App Testen

Na 5-10 minuten beschikbaar op:

https://jouwusername.github.io/jouw-repo-naam

📱 Gebruikersgids

Voor Event Organizers:

Setup & Voorbereiding:

1. Open app → "Start Leaderboard!"
2. Voeg rijders toe:
   • Klik "Foto Maken" → neem foto rijder
   • Voer naam in → "Voeg Rijder Toe"
   • Herhaal voor alle deelnemers

Tijdens Event:

1. Tijd toevoegen: "Naar Tijden" → selecteer rijder → voer tijd in
2. Live monitoring: "Bekijk Leaderboard" voor real-time standings
3. Correcties: Bewerk alleen rijders die nog niet gereden hebben

Aparte Leaderboard Display:

1. Open leaderboard.html op tweede scherm/tablet
2. "Waitlist" knop toont wachtende rijders
3. "Ranking" knop toont huidige standings
4. Auto-refresh elke 5 seconden

Voor Deelnemers:

1. Registratie: Zorg dat organizer je toevoegt met foto
2. Wachtrij: Check waitlist op leaderboard scherm
3. Resultaten: Bekijk je positie in live rankings

🔧 Geavanceerde Functies

Foto Compressie Settings:

// In compressImage() functie aanpassen voor andere kwaliteit:
maxWidth = 150,    // Kleinere waarde = minder opslag
maxHeight = 150,   // Kleinere waarde = minder opslag  
quality = 0.7      // 0.1 (laag) tot 1.0 (hoog)

Tijdformaat Aanpassen:

// In addTime() functie:
const timeString = `${minInt.toString().padStart(2, '0')}:${secInt.toString().padStart(2, '0')}:${hunInt.toString().padStart(2, '0')}`;
// Wijzig naar gewenst format

Sorteervolgorde Wijzigen:

// Huidige sortering: langste tijd eerst (wie bleef het langst op)
window.leaderboardData.sort((a, b) => b.timeValue - a.timeValue);

// Voor kortste tijd eerst: 
window.leaderboardData.sort((a, b) => a.timeValue - b.timeValue);

🎯 PWA Functies

Offline Werking:

• App werkt zonder internet na eerste load
• Data opgeslagen in browser localStorage
• Service Worker cached alle bestanden

Installatie op Mobiel:

iPhone (Safari):

1. Safari → Deel → "Voeg toe aan beginscherm"

Android (Chrome):

1. Chrome menu → "App installeren"

Cross-Platform:

• ✅ iOS Safari 12+
• ✅ Android Chrome 60+
• ✅ Desktop browsers
• ✅ Offline functionaliteit
• ✅ Touch-optimized interface

🔒 Privacy & Veiligheid

• Lokale opslag: Alle data blijft op apparaat
• Geen servers: Geen data upload naar externe servers
• Foto's gecomprimeerd: Minimale opslagruimte
• No-tracking: Geen analytics of externe scripts

🛠️ Development & Aanpassingen

Voor Andere Makerspaces:

Logo's & Branding:

<!-- In index.html en leaderboard.html -->
<img src="https://raw.githubusercontent.com/username/repo/images/jouw-logo.jpg">

Kleuren Aanpassen:

/* CSS variabelen aanpassen */
--primary-color: #4CAF50;     /* Hoofdkleur knoppen */
--accent-color: #FFD700;      /* Goud voor leaderboard */
--background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Titel & Teksten:

// In HTML sectie wijzigen:
<title>Jouw Makerspace - Bull Riding</title>

Database Integratie (Optioneel):

// Vervang localStorage calls door API calls:
function saveData() {
  // POST to your server
  fetch('/api/save', {
    method: 'POST',
    body: JSON.stringify(window.riders)
  });
}

📊 Monitoring & Analytics

Performance Metrics:

• Foto compressie: ~95% reductie (2MB → 15KB)
• App grootte: <100KB total
• Laadtijd: <2 seconden op 3G
• Offline capability: 100% na eerste load

Browser Support:

• Chrome 60+ ✅
• Safari 12+ ✅
• Firefox 60+ ✅
• Edge 79+ ✅

🐛 Troubleshooting

App laadt niet:

• Controleer GitHub Pages status
• Wacht 10 minuten na eerste deployment
• Test in incognito/privé modus

Camera werkt niet:

• Controleer HTTPS (vereist voor camera)
• Geef browser cameratoegang
• Test op fysiek apparaat (niet simulator)

Foto's te groot:

// Verlaag compressie in compressImage():
quality = 0.5  // Van 0.7 naar 0.5
maxWidth = 100 // Van 150 naar 100

Data verdwenen:

• Browser localStorage gewist
• Implementeer data export/import functie indien gewenst

Logo laadt niet:

1. Check images branch bestaat en gepushed is
2. Test URL direct: https://raw.githubusercontent.com/username/repo/images/logo.jpg
3. Zorg dat repository public is

🎪 Over GRNDbrekers

GRNDbrekers is een makerspace project dat in 2020 startte in JC Bouckenborgh (Merksem), waarbij een gezamenlijke werkruimte wordt uitgebouwd voor het maken, leren, verkennen en delen.

Locaties:

• JC Bouckenborgh - Bredabaan 559, 2170 Merksem
• CO Merksem Dok - Emiel Lemineurstraat 72, 2170 Merksem
• Bib Park - Bibliotheek Park
• Broedplaats Borrewater - Borrewaterstraat 1, 2170 Antwerpen

Equipment:

• 3D-printers, lasersnijders, snijplotters
• Arduino's en microcontrollers
• Soldeerbouten en electronica tools
• En veel meer hightech apparatuur!

Programma's:

• #openGRND - Open toegang (wo/vr/za)
• GRNDbrekers Workshops - 5 per trimester
• IJSbrekers - Voor kinderen (5de/6de leerjaar)
• GRNDrepair - Repair Café (1ste/3de woensdag)

📄 Licentie & Gebruik

MIT License - Open Source voor alle makerspaces wereldwijd:

• ✅ Gebruiken en aanpassen toegestaan
• ✅ Commercieel gebruik voor goede doelen
• ✅ Delen van verbeteringen wordt aangemoedigd
• ✅ Attribution vereist: Vermeld GRNDbrekers als originele makers

---

Ontwikkeld met ❤️ voor GRNDbrekers door Serge Hanssens
A.d.h.v. Python-code aangeleverd door Thomas Willems

Voor vragen: contact via JC Bouckenborgh of GitHub Issues