RalphKocken / connecting-people-realtime-web-app

Ontwerp en maak voor een opdrachtgever een realtime omgeving waar gebruikers kunnen samenwerken.

Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md

SamenTunineren

Een realtime omgeving waar gebruikers kunnen samen iets doen in Tuin.

Inhoudsopgave

• Beschrijving
• Gebruik
• Kenmerken
• Installatie
• Bronnen
• Licentie

Beschrijving

SamenTuin is een real-time applicatie waarbij spelers direct met elkaar in verbinding staan om samen te genieten van de rustgevende wereld van tuinieren. In dit spel is het doel om verschillende items naar de juiste plek te verplaatsen en zo de tuin te transformeren. Wanneer spelers erin slagen om de items op de juiste plek te leggen, heeft dit direct effect op de tuin. Prachtige bloemen bloeien op, grassen groeien en er ontstaat een betoverende omgeving. Wat dit spel uniek maakt, is dat spelers het samen kunnen spelen met meerdere mensen tegelijk, waarbij ze nauw samenwerken om de perfecte tuin te creëren. SamenTuin biedt een gezamenlijke en interactieve ervaring, waarbij spelers hun tuiniersvaardigheden combineren en een bloeiende tuin tot leven brengen.

Gebruik

Wij hebben gewerkt aan de volgende user story:

"Als gebruiker wil ik interactief met anderen kunnen tuinieren en spelen in het park."

Binnen de tuinieren pagina kan je als gebruiker interactief en real time verschillende activiteiten uitvoeren met andere gebruikers. Je kan met het slepen van verschillende navigatie elementen interacties uitvoeren met zoals een bot, grasmaaier of een zaad.

Schetsen

De volgende schetsen zijn gemaakt om de website flow beter te tonen:

Wireflow:

breakdown schetsen:

Kenmerken

Nodejs-v:v18.14.0
Npm-v:9.4.1
gsap

Installatie

1. Om in de repository te werken en aanpassingen te maken moet je node.js downloaden versie: .
2. Clone of download deze respository.
3. Open hem in je code-editor.
4. open de terminal en type npm install.
5. Daarna door gerbruik van npm start krijg je een localhost link waar je de code live ziet.
6. Check even de .env-exmpel bestnadje voor de Api.
7. In de package-lock.json bestandje zie je alle modules die ik gebruik voor deze project.
8. Live zetten van je project kan met behulp van cyclic

Bronnen

https://greensock.com/draggable/
https://socket.io/docs/v4/

Licentie

This project is licensed under the terms of the MIT license.