Compare commits
No commits in common. "e1f1659cc1f8edf395b0af5489ed54a862b30bd9" and "bc81866dbfb16b13c1754bb148aa120b030c3eb4" have entirely different histories.
e1f1659cc1
...
bc81866dbf
7 changed files with 31 additions and 176 deletions
20
CLAUDE.md
20
CLAUDE.md
|
|
@ -109,23 +109,3 @@ open http://localhost:5000/editor.html
|
||||||
- Editor volledig functioneel
|
- Editor volledig functioneel
|
||||||
- Documentatie compleet in README.md
|
- Documentatie compleet in README.md
|
||||||
- Klaar voor workshop gebruik
|
- Klaar voor workshop gebruik
|
||||||
|
|
||||||
### 2025-11-07 - Startscherm Toegevoegd
|
|
||||||
**Nieuwe feature:**
|
|
||||||
- Startscherm met groene "Start IJsbreker" knop toegevoegd
|
|
||||||
- Timer begint nu pas na klik op startknop (voorheen automatisch)
|
|
||||||
- Gebruiker heeft volledige controle over startmoment presentatie
|
|
||||||
- Spatiebalk werkt op startscherm voor snelle start
|
|
||||||
|
|
||||||
**Gewijzigde bestanden:**
|
|
||||||
- `index.html` - Startscherm HTML toegevoegd, statementScreen krijgt .hidden class bij laden
|
|
||||||
- `style.css` - Styling voor start-screen en start-button (groene knop met hover effecten)
|
|
||||||
- `app.js` - Flow aangepast: nieuwe functies `showStartScreen()` en `startGame()`, event listeners voor startButton, spatiebalk werkt nu op startscherm EN overlay
|
|
||||||
- `config.json` - Kleine config aanpassingen
|
|
||||||
|
|
||||||
**Waarom:**
|
|
||||||
Voorheen begon de timer meteen bij het laden van de pagina, wat onhandig is bij voorbereiding van een workshop presentatie. Nu kan de facilitator in alle rust de browser op de beamer zetten voordat het spel daadwerkelijk start.
|
|
||||||
|
|
||||||
**Status:**
|
|
||||||
- Feature volledig werkend en getest
|
|
||||||
- Klaar voor workshop gebruik met betere controle over presentatie flow
|
|
||||||
|
|
|
||||||
22
agents.md
22
agents.md
|
|
@ -1,6 +1,6 @@
|
||||||
# agents.md
|
# agents.md
|
||||||
> Deze file wordt automatisch gesynchroniseerd met CLAUDE.md
|
> Deze file wordt automatisch gesynchroniseerd met CLAUDE.md
|
||||||
> Laatste sync: 2025-11-07 20:45
|
> Laatste sync: 2025-11-03 16:35
|
||||||
|
|
||||||
# IJsbreker Workshop Spel
|
# IJsbreker Workshop Spel
|
||||||
|
|
||||||
|
|
@ -113,23 +113,3 @@ open http://localhost:5000/editor.html
|
||||||
- Editor volledig functioneel
|
- Editor volledig functioneel
|
||||||
- Documentatie compleet in README.md
|
- Documentatie compleet in README.md
|
||||||
- Klaar voor workshop gebruik
|
- Klaar voor workshop gebruik
|
||||||
|
|
||||||
### 2025-11-07 - Startscherm Toegevoegd
|
|
||||||
**Nieuwe feature:**
|
|
||||||
- Startscherm met groene "Start IJsbreker" knop toegevoegd
|
|
||||||
- Timer begint nu pas na klik op startknop (voorheen automatisch)
|
|
||||||
- Gebruiker heeft volledige controle over startmoment presentatie
|
|
||||||
- Spatiebalk werkt op startscherm voor snelle start
|
|
||||||
|
|
||||||
**Gewijzigde bestanden:**
|
|
||||||
- `index.html` - Startscherm HTML toegevoegd, statementScreen krijgt .hidden class bij laden
|
|
||||||
- `style.css` - Styling voor start-screen en start-button (groene knop met hover effecten)
|
|
||||||
- `app.js` - Flow aangepast: nieuwe functies `showStartScreen()` en `startGame()`, event listeners voor startButton, spatiebalk werkt nu op startscherm EN overlay
|
|
||||||
- `config.json` - Kleine config aanpassingen
|
|
||||||
|
|
||||||
**Waarom:**
|
|
||||||
Voorheen begon de timer meteen bij het laden van de pagina, wat onhandig is bij voorbereiding van een workshop presentatie. Nu kan de facilitator in alle rust de browser op de beamer zetten voordat het spel daadwerkelijk start.
|
|
||||||
|
|
||||||
**Status:**
|
|
||||||
- Feature volledig werkend en getest
|
|
||||||
- Klaar voor workshop gebruik met betere controle over presentatie flow
|
|
||||||
|
|
|
||||||
51
app.js
51
app.js
|
|
@ -5,7 +5,6 @@ let audioContext = null;
|
||||||
|
|
||||||
// DOM elementen
|
// DOM elementen
|
||||||
const timerBorder = document.querySelector('.timer-border');
|
const timerBorder = document.querySelector('.timer-border');
|
||||||
const startScreen = document.getElementById('startScreen');
|
|
||||||
const statementScreen = document.getElementById('statementScreen');
|
const statementScreen = document.getElementById('statementScreen');
|
||||||
const overlay = document.getElementById('overlay');
|
const overlay = document.getElementById('overlay');
|
||||||
const finishScreen = document.getElementById('finishScreen');
|
const finishScreen = document.getElementById('finishScreen');
|
||||||
|
|
@ -13,10 +12,8 @@ const leftStatement = document.getElementById('leftStatement');
|
||||||
const rightStatement = document.getElementById('rightStatement');
|
const rightStatement = document.getElementById('rightStatement');
|
||||||
const leftText = document.getElementById('leftText');
|
const leftText = document.getElementById('leftText');
|
||||||
const rightText = document.getElementById('rightText');
|
const rightText = document.getElementById('rightText');
|
||||||
const startButton = document.getElementById('startButton');
|
|
||||||
const nextButton = document.getElementById('nextButton');
|
const nextButton = document.getElementById('nextButton');
|
||||||
const finishText = document.getElementById('finishText');
|
const finishText = document.getElementById('finishText');
|
||||||
const counterDisplay = document.getElementById('counterDisplay');
|
|
||||||
|
|
||||||
// Laad configuratie bij start
|
// Laad configuratie bij start
|
||||||
async function loadConfig() {
|
async function loadConfig() {
|
||||||
|
|
@ -49,22 +46,7 @@ function initializeApp() {
|
||||||
nextButton.textContent = config.buttonText;
|
nextButton.textContent = config.buttonText;
|
||||||
finishText.textContent = config.finishText;
|
finishText.textContent = config.finishText;
|
||||||
|
|
||||||
// Toon startscherm (niet direct beginnen)
|
// Start met eerste stelling
|
||||||
showStartScreen();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Toon startscherm
|
|
||||||
function showStartScreen() {
|
|
||||||
startScreen.classList.remove('hidden');
|
|
||||||
statementScreen.classList.add('hidden');
|
|
||||||
overlay.classList.add('hidden');
|
|
||||||
finishScreen.classList.add('hidden');
|
|
||||||
counterDisplay.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start het spel
|
|
||||||
function startGame() {
|
|
||||||
startScreen.classList.add('hidden');
|
|
||||||
showStatement(0);
|
showStatement(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -84,10 +66,6 @@ function showStatement(index) {
|
||||||
leftText.textContent = stelling.links;
|
leftText.textContent = stelling.links;
|
||||||
rightText.textContent = stelling.rechts;
|
rightText.textContent = stelling.rechts;
|
||||||
|
|
||||||
// Update counter (1-based index)
|
|
||||||
counterDisplay.textContent = `${index + 1}/${config.stellingen.length}`;
|
|
||||||
counterDisplay.classList.remove('hidden');
|
|
||||||
|
|
||||||
// Toon stellingen scherm, verberg overlay en finish
|
// Toon stellingen scherm, verberg overlay en finish
|
||||||
statementScreen.classList.remove('hidden');
|
statementScreen.classList.remove('hidden');
|
||||||
overlay.classList.add('hidden');
|
overlay.classList.add('hidden');
|
||||||
|
|
@ -109,7 +87,12 @@ function startTimer() {
|
||||||
// Wacht tot timer klaar is
|
// Wacht tot timer klaar is
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
playBeep();
|
playBeep();
|
||||||
|
// Bij laatste stelling: toon direct finish scherm
|
||||||
|
if (currentIndex === config.stellingen.length - 1) {
|
||||||
|
showFinish();
|
||||||
|
} else {
|
||||||
showOverlay();
|
showOverlay();
|
||||||
|
}
|
||||||
}, config.timer * 1000);
|
}, config.timer * 1000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -124,7 +107,6 @@ function showFinish() {
|
||||||
statementScreen.classList.add('hidden');
|
statementScreen.classList.add('hidden');
|
||||||
overlay.classList.add('hidden');
|
overlay.classList.add('hidden');
|
||||||
finishScreen.classList.remove('hidden');
|
finishScreen.classList.remove('hidden');
|
||||||
counterDisplay.classList.add('hidden');
|
|
||||||
timerBorder.classList.remove('timer-active');
|
timerBorder.classList.remove('timer-active');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -170,35 +152,18 @@ function playBeep() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Event listeners
|
// Event listeners
|
||||||
startButton.addEventListener('click', () => {
|
|
||||||
startGame();
|
|
||||||
});
|
|
||||||
|
|
||||||
nextButton.addEventListener('click', () => {
|
nextButton.addEventListener('click', () => {
|
||||||
if (currentIndex === config.stellingen.length - 1) {
|
|
||||||
showFinish();
|
|
||||||
} else {
|
|
||||||
showStatement(currentIndex + 1);
|
showStatement(currentIndex + 1);
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Spatiebalk voor volgende stelling EN startscherm
|
// Spatiebalk voor volgende stelling
|
||||||
document.addEventListener('keydown', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
if (e.code === 'Space') {
|
if (e.code === 'Space') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
// Start spel als we op startscherm zijn
|
if (!overlay.classList.contains('hidden')) {
|
||||||
if (!startScreen.classList.contains('hidden')) {
|
|
||||||
startGame();
|
|
||||||
}
|
|
||||||
// Volgende stelling als overlay zichtbaar is
|
|
||||||
else if (!overlay.classList.contains('hidden')) {
|
|
||||||
if (currentIndex === config.stellingen.length - 1) {
|
|
||||||
showFinish();
|
|
||||||
} else {
|
|
||||||
showStatement(currentIndex + 1);
|
showStatement(currentIndex + 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Start de app
|
// Start de app
|
||||||
|
|
|
||||||
26
config.json
26
config.json
|
|
@ -16,28 +16,32 @@
|
||||||
"rechts": "Patat"
|
"rechts": "Patat"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"links": "Ik gebruik meer sneltoetsen",
|
"links": "Liever email",
|
||||||
"rechts": "Ik ben van team muisgebruik"
|
"rechts": "Liever telefoon"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"links": "Ik vind eenvoudig mijn eigen informatie terug",
|
"links": "Sneltoetsen",
|
||||||
|
"rechts": "Muisgebruik"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"links": "Overzichtelijke mappen",
|
||||||
|
"rechts": "Zoeken werkt sneller"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"links": "Ik vind eenvoudig de juiste informatie terug",
|
||||||
"rechts": "Ik ben constant alles kwijt"
|
"rechts": "Ik ben constant alles kwijt"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"links": "We hebben duidelijke afspraken over naamgeving van bestanden",
|
"links": "Naamgeving van bestanden is een breinbreker",
|
||||||
"rechts": "Mijn naamgeving van bestanden is veel logischer"
|
"rechts": "Naamgeving is volslagen logisch"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"links": "Ik maak eigen notities op één plek",
|
"links": "Ik maak eigen notities op één plek",
|
||||||
"rechts": "Ik maak overal notities en zoek me suf"
|
"rechts": "Overal post-its en losse bestanden"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"links": "❤️ ❤️ ❤️ Notitie en memo templates ",
|
"links": "❤️ ❤️ ❤️ Meetingverslagen template ",
|
||||||
"rechts": "☠️☠️☠️ Wie bedenkt die templates?"
|
"rechts": "☠️☠️☠️ Wie bedenkt die templates?"
|
||||||
},
|
|
||||||
{
|
|
||||||
"links": "Zin in de dag!",
|
|
||||||
"rechts": "Wat gaan we doen?"
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"timer": 2
|
"timer": 2
|
||||||
|
|
|
||||||
22
gemini.md
22
gemini.md
|
|
@ -1,6 +1,6 @@
|
||||||
# gemini.md
|
# gemini.md
|
||||||
> Deze file wordt automatisch gesynchroniseerd met CLAUDE.md
|
> Deze file wordt automatisch gesynchroniseerd met CLAUDE.md
|
||||||
> Laatste sync: 2025-11-07 20:45
|
> Laatste sync: 2025-11-03 16:35
|
||||||
|
|
||||||
# IJsbreker Workshop Spel
|
# IJsbreker Workshop Spel
|
||||||
|
|
||||||
|
|
@ -113,23 +113,3 @@ open http://localhost:5000/editor.html
|
||||||
- Editor volledig functioneel
|
- Editor volledig functioneel
|
||||||
- Documentatie compleet in README.md
|
- Documentatie compleet in README.md
|
||||||
- Klaar voor workshop gebruik
|
- Klaar voor workshop gebruik
|
||||||
|
|
||||||
### 2025-11-07 - Startscherm Toegevoegd
|
|
||||||
**Nieuwe feature:**
|
|
||||||
- Startscherm met groene "Start IJsbreker" knop toegevoegd
|
|
||||||
- Timer begint nu pas na klik op startknop (voorheen automatisch)
|
|
||||||
- Gebruiker heeft volledige controle over startmoment presentatie
|
|
||||||
- Spatiebalk werkt op startscherm voor snelle start
|
|
||||||
|
|
||||||
**Gewijzigde bestanden:**
|
|
||||||
- `index.html` - Startscherm HTML toegevoegd, statementScreen krijgt .hidden class bij laden
|
|
||||||
- `style.css` - Styling voor start-screen en start-button (groene knop met hover effecten)
|
|
||||||
- `app.js` - Flow aangepast: nieuwe functies `showStartScreen()` en `startGame()`, event listeners voor startButton, spatiebalk werkt nu op startscherm EN overlay
|
|
||||||
- `config.json` - Kleine config aanpassingen
|
|
||||||
|
|
||||||
**Waarom:**
|
|
||||||
Voorheen begon de timer meteen bij het laden van de pagina, wat onhandig is bij voorbereiding van een workshop presentatie. Nu kan de facilitator in alle rust de browser op de beamer zetten voordat het spel daadwerkelijk start.
|
|
||||||
|
|
||||||
**Status:**
|
|
||||||
- Feature volledig werkend en getest
|
|
||||||
- Klaar voor workshop gebruik met betere controle over presentatie flow
|
|
||||||
|
|
|
||||||
10
index.html
10
index.html
|
|
@ -15,18 +15,10 @@
|
||||||
<div class="timer-bar timer-left"></div>
|
<div class="timer-bar timer-left"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Stelling counter rechtsonder -->
|
|
||||||
<div id="counterDisplay" class="counter-display hidden"></div>
|
|
||||||
|
|
||||||
<!-- Hoofdcontainer -->
|
<!-- Hoofdcontainer -->
|
||||||
<div id="app" class="container">
|
<div id="app" class="container">
|
||||||
<!-- Start scherm -->
|
|
||||||
<div id="startScreen" class="start-screen">
|
|
||||||
<button id="startButton" class="start-button">Start IJsbreker</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Stellingen scherm -->
|
<!-- Stellingen scherm -->
|
||||||
<div id="statementScreen" class="statement-screen hidden">
|
<div id="statementScreen" class="statement-screen">
|
||||||
<div id="leftStatement" class="statement left-statement">
|
<div id="leftStatement" class="statement left-statement">
|
||||||
<p id="leftText"></p>
|
<p id="leftText"></p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
50
style.css
50
style.css
|
|
@ -127,10 +127,9 @@ body {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-top: 15vh;
|
background: rgba(0, 0, 0, 0.7);
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
z-index: 500;
|
z-index: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -157,39 +156,6 @@ body {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Start scherm */
|
|
||||||
.start-screen {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #1a1a1a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-button {
|
|
||||||
padding: 2rem 4rem;
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: white;
|
|
||||||
background: #10b981;
|
|
||||||
border: none;
|
|
||||||
border-radius: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-button:hover {
|
|
||||||
background: #059669;
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-button:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Eind scherm */
|
/* Eind scherm */
|
||||||
.finish-screen {
|
.finish-screen {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -207,18 +173,6 @@ body {
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Stelling counter rechtsonder */
|
|
||||||
.counter-display {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 2rem;
|
|
||||||
right: 2rem;
|
|
||||||
color: white;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 1500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Helper classes */
|
/* Helper classes */
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue