Description

Who's That Pokémon? is een vraag-en-antwoordsegment dat voorkomt in tal van afleveringen van de Pokémon. Ik heb geprobeerd dit na te maken en er een soort spel van te maken waar de eerste die de pokemon raad een punt krijgt.

Features

• Een chatroom waar berichten komen als iemand connect, disconnect, een goed antwoord raad, offline is en natuurlijk als iemand iets typt.
• Een userlist/scoreboard waar alle gebruikers te zien zijn die geconnect zijn. Deze wordt geupdate als iemand connect, disconnect en als er een goed antwoord wordt gegeven.
• Een spel element waar je raad welke pokemon het is. Hierbij wordt er steeds een nieuwe pokemon ingeladen en worden de punten bijgehouden.

API

Voor het raden van de pokemon heb ik afbeeldingen nodig. Hiervoor gebruik ik de officiele (PokeAPI).

Er zit heel erg veel in de api, maar ik gebruik alleen de naam en een afbeelding van de pokemon. Als ik een random pokemon ophaal zit de data als volgt in een object.

{
    "name": "pikachu",
    "sprites": {
        "other": {
            "dream_world": {
                "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/25.svg",
            }
        }
    },
}

Data Life Cycle

Wishlist

Features	Klaar?
Basic chat	✅
Usernames	✅
Bericht als iemand connect	✅
Bericht als iemand disconnect	✅
Bericht met username	✅
Verschillende berichten	✅
Aan het typen bericht	✅
Username met form en dialog	✅
Berichten history	✅
Data ophalen in de server	✅
Data render voor clients	✅
Bij goed antwoord iets doen	✅
Userlist	✅
Punt erbij voor goed antwoord	✅
Fetch voor goed antwoord	✅
Offline bericht	✅
Skip pokemon
Beperkte tijd voor raden
Hints
Eerste tot x aantal punten

Sources

(Socket introduction) (Offline) (Emit cheatsheet) (Barebonechat)

Deployment

https://whos-that-pokemon.up.railway.app

Installation

Installeer deze repository:

Git clone https://github.com/dennishva/real-time-web-2223

Om Node modules te installeren:

npm install

Om de applicatie te starten:

npm start

Om gebruik te maken van automatische updates tijdens development:

npm run dev

License

De MIT licentie wordt gebruikt