109 lines
4.5 KiB
Markdown
109 lines
4.5 KiB
Markdown
# Een tuin vol cadeautjes
|
||
|
||
Een klein cozy HTML5-spel voor Inez' verjaardag. Ze speelt zeven rustige tuintaken en opent na elk level een cadeau: de titel van een Steam-game met een persoonlijke zin, een link naar de winkel en optioneel een Steam-key die ze direct kan activeren.
|
||
|
||
Het spel is één zelfstandige map zonder build-stap. Het werkt lokaal (`file://`) en op elke statische hosting.
|
||
|
||
## Snel starten
|
||
|
||
Open `index.html` in een browser. Meer is niet nodig.
|
||
|
||
Voor een lokale server (handig bij testen):
|
||
|
||
```bash
|
||
python3 -m http.server 8000
|
||
```
|
||
|
||
Ga daarna naar <http://localhost:8000>.
|
||
|
||
## De cadeaus aanpassen
|
||
|
||
Open `js/config.js`. Bovenaan staan de namen en teksten:
|
||
|
||
- `herName` en `yourName`
|
||
- `welcomeText`
|
||
- `finalMessage` en `finaleSignature`
|
||
|
||
Daaronder staan precies zeven games in `games`. Elk cadeau heeft:
|
||
|
||
| Veld | Betekenis |
|
||
| --- | --- |
|
||
| `title` | Naam die in het spel verschijnt |
|
||
| `appId` | Steam-appnummer; staat in de winkel-URL, bijvoorbeeld `413150` in `store.steampowered.com/app/413150/` |
|
||
| `url` | Alternatief als je geen `appId` hebt |
|
||
| `key` | Optioneel; de Steam-key die na het level wordt getoond |
|
||
| `note` | Korte persoonlijke zin |
|
||
| `image` | Optioneel; laat leeg om de Steam-cover te gebruiken |
|
||
| `accent` | Kleur van de kaart als de cover niet laadt |
|
||
|
||
De volgorde in `games` hoort bij de levels: level 1 opent `games[0]`, level 2 opent `games[1]`, enzovoort.
|
||
|
||
De zeven tuintaken zijn: zaaien en water geven, vuurvliegjes vangen, sterrenbeelden verbinden, taart versieren, boeket schikken, tuinmemory en herfstblaadjes naar de mand slepen.
|
||
|
||
Zonder `key` opent de knop de Steam-winkel. Met een `key` wordt de knop "Activeer op Steam" en opent hij de activatiepagina van Steam met de key al ingevuld. Daarnaast staat de key in een vak met een kopieerknop.
|
||
|
||
## Een Steam-key toevoegen
|
||
|
||
Vul de key in bij de juiste game in `js/config.js`:
|
||
|
||
```js
|
||
{
|
||
title: "Stardew Valley",
|
||
appId: 413150,
|
||
url: "",
|
||
key: "ABCDE-FGHIJ-KLMNO",
|
||
note: "Een plek om te wortelen.",
|
||
image: "",
|
||
accent: "#f3c2a6"
|
||
}
|
||
```
|
||
|
||
Na het level ziet ze de key, kan ze hem kopiëren en via "Activeer op Steam" meteen naar de activatiepagina gaan. Na inloggen en activeren staat de game in haar Steam-bibliotheek.
|
||
|
||
Let op:
|
||
|
||
- Een key staat leesbaar in `config.js` en in de pagina. Zet keys alleen in een lokale versie en host die map niet openbaar.
|
||
- De activeerlink bevat de key in de URL, dus die kan in de browsergeschiedenis terechtkomen.
|
||
- Steam geeft geen keys uit voor games die je rechtstreeks via Steam cadeau doet. Gebruik alleen keys die je als key hebt gekocht bij een betrouwbare aanbieder.
|
||
|
||
## Op de Steam Deck
|
||
|
||
1. Zet de hele map op de Deck (bijvoorbeeld via USB, Syncthing of een gedeelde map).
|
||
2. Open Desktop Mode en start Firefox of Chrome.
|
||
3. Open `index.html` vanuit de bestandsbeheerder, of host de map en open de URL.
|
||
4. Optioneel: voeg de pagina als snelkoppeling toe aan Steam. In de browser kan dat via het menu; kies daarna in Steam "Toevoegen als niet-Steam-game".
|
||
|
||
Het spel is gemaakt voor 1280×800 en werkt met touchscreen, trackpad en toetsenbord. Er is geen tijdsdruk of faalstaat.
|
||
|
||
## Online zetten
|
||
|
||
Upload de map zoals hij is naar statische hosting, bijvoorbeeld GitHub Pages, Gitea Pages, Netlify of Cloudflare Pages. Er is geen servercode en er zijn geen externe scripts nodig.
|
||
|
||
Zet geen Steam-keys in een online gehoste versie: iedereen die de pagina opent kan ze uitlezen. Gebruik dan alleen titels en links, of houd de versie met keys lokaal.
|
||
|
||
De Steam-covers worden van de Steam-CDN geladen. Zonder internet werkt het spel volledig, maar dan zie je de gestileerde kaarten in plaats van de covers. Wil je echt alles offline, zet dan lokale afbeeldingen in de map en vul het pad in bij `image`.
|
||
|
||
## Voortgang
|
||
|
||
De voortgang wordt opgeslagen in `localStorage` van de browser. Dat betekent:
|
||
|
||
- sluiten en heropenen bewaart de tuin;
|
||
- een andere browser of privacymodus begint opnieuw;
|
||
- met "Opnieuw beginnen" onderaan het tuinpad wis je alles.
|
||
|
||
## Bestanden
|
||
|
||
```
|
||
index.html de schermen
|
||
css/styles.css alle vormgeving en animaties
|
||
js/config.js namen, teksten en de zeven games
|
||
js/storage.js voortgang bewaren
|
||
js/levels.js de zeven mini-games
|
||
js/ui.js schermen, onthullingen, finale en geluid
|
||
js/app.js spelverloop
|
||
```
|
||
|
||
## Cadeaus versturen
|
||
|
||
Het spel onthult de titel, de link en eventueel de key. Met een key kan ze de game zelf op haar account activeren. Zonder key verstuur je de game via Steam, bijvoorbeeld als cadeau of met een key die je buiten het spel om geeft.
|