Projecte Qui és qui

Introducció

El joc del Qui és qui?

Farem el joc del qui es qui contra la màquina.

1. El servidor triará una carta d'entre un seguit d'opcions i nosaltres l'haurem d'endevinar fent preguntes
2. Cada carta tindrà una sèrie de característiques limitades i úniques.
3. Les preguntes ens permetrà descartar opcions, per exemple: Porta ulleres? -> si la resposta es SI, descartem totes aquelles cartes que NO porten ulleres
4. Guanyes el joc si totes les cartes menys 1 estan descartades i l'única que queda és la carta sel·leccionada pel servidor.
5. Perds el joc si l'única carta que queda NO coincideix amb la sel·leccionada pel servidor.

Product Backlog

1. Configurarem les característiques dels personatges a l'arxiu de configuració config.txt
2. Les característiques són finites i hi haurà una per línia a l'arxiu de conf. Per exemple:

   ulleres: si no
   cabell: ros moreno castany
   sexe: dona home

3. Disposarem d'un segon arxiu de configuració per a les imatges imatges.txt. Aquest etiquetarà les imatges disponibles amb les seves característiques adients. Per exemple:

   sofia.jpg : ulleres si , cabell castany , sexe dona
   pablo.jpg : ulleres no , cabell moreno , sexe home

4. Les característiques (ros, moreno, dona, ... ) i els noms d'arxiu no poden contenir espais (en tot cas, poseu un underscore "_").
5. El servidor ens haurà de donar error de configuració en aquests casos:
   1. Una mateixa imatge (nom d'arxiu) apareix dos cops a l'arxiu de configuració.
   2. Dues imatges diferents tenen les mateixes característiques.
   3. Una característica que apareix al fitxer imatges.txt no apareix al fitxer config.txt (al revés no importa)
6. El servidor haurà de triar una carta a l'atzar perquè l'endevini l'usuari.
7. El servidor barrejarà totes les cartes i col·locar-les sobre un taulell.
8. Totes les cartes excepte la seleccionada pel servidor han de poder descartar-se (girar-se cap per avall)
9. Quan es faci clic sobre una carta, aquesta s'haurà de girar amb efecte.
10. Un cop descartada un carta NO pot tornar a girar-se
11. S'ha de produir algún efecte, quan el ratolí passi per a sobre de una carta (sense clicar).Exemples: Es poden il.luminar, posar-se borroses, etc.
12. Crear un combo box per a cada propietat de les cartes (la pregunta ha de ser de SI o NO)
13. Crear un botó amb el text: "Fes la pregunta" que en clicar-lo detecti quin combo box té la pregunta a realitzar y consulti en els atributs de la carta seleccionada pel servidor la respota y la imprimeixi per pantalla
14. La forma del tauler ha de ser rectangular, en vista vertical.
15. Si en clicar el botó "Fes la pregunta" hi ha més d'un combo box "activat" ha de mostrar un missatge de error informant que només es pot realitzar una pregunta cada cop
16. En cas de que el botó "Fes la pregunta" generi un error per que hi ha més d'un combo box "activat" a més a més de mostrar el missatge d'error ha de "resetejar" tots el combo box
17. Crea un algorisme que controli el final del joc. Quan només quedi una carta s'haurà de girar la carta de seleccionada per l'ordinador, si la carta que queda es la mateixa que la seleccionada per l'ordinador el jugador guanya el joc. En cas contrari el jugador perd el joc.
18. Han de sortir focs artifials per tota la pantalla si es guanya el joc.
19. Quan acabo la partida, m'ha de demanar el meu nom, per incloure'm a la taula de rècords.
20. La pàgina haurà de adaptarse al tamany de les diferents pantalles de forma automàtica.
21. El jugador ha de poder optar entre enregistrar el rècord o no fer-ho.
22. Després de realitzar una pregunta al ordinador si el jugador intenta realitzar una altra pregunta sense descartar cap carta ha de sortir un missatge d'avís amb el text: "Segur que vols realitzar un altre pregunta sense girar cap carta?"
23. Crea un apartat per mostrar un comptador amb el número de preguntes que s'han realitzat al ordinador
24. Ha de permetre veure el rànking de les partides, amb nom d'usuari i rècord, ordenades de millor (amunt) a pitjor (més avall).
25. Si l'ordinador envia un si, ha de parpadejar una llumeta verda, si no vermella.
26. Crea un botó per activar el mode "EASY". Aquest botó només romandrà actiu i es podrà clicar si encara no hem realitzat cap pregunta
27. Implementa el mode "EASY", en aquest mode mode quan fem una pregunta al ordinador automaticament gira les cartes que no cumpleixen amb les condicions
28. Totes les cartes han de mostrarse a sobre d'un tauler.
29. Cada cop que es gira una carta s'ha d'escoltar un só (curt)
30. Si el joc finalitza y el jugador guanya s'ha d'escoltar un só de victoria
31. Si el joc finalitza y el jugador perd s'ha d'escoltar un só de fracàs
32. La carta seleccionada per l'ordinador ha de tenir un tamany superior que al de les altres.
33. Si premo per accident el botó de recàrrega (F5), la partida s'ha de mantenir, i no generar una de nova, fins que no acabi l'actual.
34. Substitueix els combos individuals de preguntes per un únic combo amb totes les preguntes
35. Quan es passi per a sobre de les cartes girades, han de fer un efecte diferent.
36. Modifica el botó per activar el mode "EASY" i fes un combo os es pugui seleccionar "EASY" i "VERY EASY"
37. Implementa el mode "VERY EASY" a més de fer el mateix que el mode "EASY" un cop que es realitza una pregunta aquesta pregunta s'elimina dels combos de preguntes
38. En començar el joc cada vegada que fas una pregunta tens 20 segons per girar les cartes. Una vegada passats els 20 segons no pots girar cap carta fins que es faci una altra pregunta
39. Crea un visualitzador que mostri un compte enrere amb els 20 segons de temps després de realitzar una pregunta
40. El botó de seleccionar, només es mostrarà actiu si hi ha una opció escollida.
41. Crea un temporitzador que mostri el temps de joc amb format: mm:ss
42. Implementa un Easter Egg

Especificacions funcionals

M6: programació client

• Totes les cartes excepte la seleccionada pel servidor han de poder descartar-se (girar-se cap per avall)
• Un cop descartada un carta NO pot tornar a girar-se
• Crear un combo box per a cada propietat de les cartes (la pregunta ha de ser de SI o NO)
• Crear un botó amb el text: "Fes la pregunta" que en clicar-lo detecti quin combo box té la pregunta a realitzar y consulti en els atributs de la carta seleccionada pel servidor la respota y la imprimeixi per pantalla
• Si en clicar el botó "Fes la pregunta" hi ha més d'un combo box "activat" ha de mostrar un missatge de error informant que només es pot realitzar una pregunta cada cop
• En cas de que el botó "Fes la pregunta" generi un error per que hi ha més d'un combo box "activat" a més a més de mostrar el missatge d'error ha de "resetejar" tots el combo box
• Crea un algorisme que controli el final del joc. Quan només quedi una carta s'haurà de girar la carta de seleccionada per l'ordinador, si la carta que queda es la mateixa que la seleccionada per l'ordinador el jugador guanya el joc. En cas contrari el jugador perd el joc.
• Després de realitzar una pregunta al ordinador si el jugador intenta realitzar una altra pregunta sense descartar cap carta ha de sortir un missatge d'avís amb el text: "Segur que vols realitzar un altre pregunta sense girar cap carta?"
• Crea un apartat per mostrar un comptador amb el número de preguntes que s'han realitzat al ordinador
• Crea un temporitzador que mostri el temps de joc amb format: mm:ss
• Crea un botó per activar el mode "EASY". Aquest botó només romandrà actiu i es podrà clicar si encara no hem realitzat cap pregunta
• Implementa el mode "EASY", en aquest mode mode quan fem una pregunta al ordinador automaticament gira les cartes que no cumpleixen amb les condicions
• Cada cop que es gira una carta s'ha d'escoltar un só (curt)
• Si el joc finalitza y el jugador guanya s'ha d'escoltar un só de victoria
• Si el joc finalitza y el jugador perd s'ha d'escoltar un só de fracàs
• Substitueix els combos individuals de preguntes per un únic combo amb totes les preguntes
• Modifica el botó per activar el mode "EASY" i fes un combo os es pugui seleccionar "EASY" i "VERY EASY"
• Implementa el mode "VERY EASY" a més de fer el mateix que el mode "EASY" un cop que es realitza una pregunta aquesta pregunta s'elimina dels combos de preguntes
• En començar el joc cada vegada que fas una pregunta tens 20 segons per girar les cartes. Una vegada passats els 20 segons no pots girar cap carta fins que es faci una altra pregunta
• Crea un visualitzador que mostri un compte enrere amb els 20 segons de temps després de realitzar una pregunta
• Implementa un Easter Egg

M7: programació servidor

Al servidor crearem el taulell bàsic de joc amb HTML i PHP, amb les imatges/cartes per a jugar. Tindrem 2 arxius de configuració: config.txt i imatges.txt

Càrrega d'imatges:

• Configurarem les característiques dels personatges a l'arxiu de configuració config.txt
• Les característiques són finites i hi haurà una per línia a l'arxiu de conf. Per exemple:

  ulleres: si no
  cabell: ros moreno castany
  sexe: dona home

• Disposarem d'un segon arxiu de configuració per a les imatges imatges.txt. Aquest etiquetarà les imatges disponibles amb les seves característiques adients. Per exemple:

  sofia.jpg : ulleres si , cabell castany , sexe dona
  pablo.jpg : ulleres no , cabell moreno , sexe home

• Les característiques (ros, moreno, dona, ... ) i els noms d'arxiu no poden contenir espais (en tot cas, poseu un underscore "_").
• El servidor ens haurà de donar error de configuració en aquests casos:
  • Una mateixa imatge (nom d'arxiu) apareix dos cops a l'arxiu de configuració.
  • Dues imatges diferents tenen les mateixes característiques.
  • Una característica que apareix al fitxer imatges.txt no apareix al fitxer config.txt (al revés no importa)

RECOMANACIÓ: El servidor importarà les imatges i les seves característiques (imatges.txt) i les introduirà en un array. Cada element de l'array contindrà un array associatiu amb les característiques, per exemple:

$imatges[0] = Array( "arxiu"=>"sofia.jpg", "ulleres"=>"si", "cabell"=>"castany", "sexe"=>"dona" )

Generació de HTML:

• El servidor haurà de triar una carta a l'atzar perquè l'endevini l'usuari.
• El servidor barrejarà totes les cartes i col·locar-les sobre un taulell.

Més característiques (2a reunió amb el stakeholder):

• Quan acabo la partida, m'ha de demanar el meu nom, per incloure'm a la taula de rècords.
• El jugador ha de poder optar entre enregistrar el rècord o no fer-ho.
• Ha de permetre veure el rànking de les partides, amb nom d'usuari i rècord, ordenades de millor (amunt) a pitjor (més avall).
• Si premo per accident el botó de recàrrega (F5), la partida s'ha de mantenir, i no generar una de nova, fins que no acabi l'actual.

3a reunió amb el stakeholder:

• Els menus o formularis s'han de crear a partir dels arxius de configuració.

M9: disseny d'interfície

• Quan es faci clic sobre una carta, aquesta s'haurà de girar amb efecte.

• La pàgina haurà de adaptarse al tamany de les diferents pantalles de forma automàtica.

• Han de sortir focs artifials per tota la pantalla si es guanya el joc.

• S'ha de produir algún efecte, quan el ratolí passi per a sobre de una carta (sense clicar)

Exemples: Es poden il.luminar, posar-se borroses, etc.

• Si l'ordinador envia un si, ha de parpadejar una llumeta verda, si no vermella.

• Totes les cartes han de mostrarse a sobre d'un tauler.

- Tots els cuadres d'opcions han d'estar a sobre d'aquest tauler. Y a fora del mateix.

• La carta seleccionada per l'ordinador ha de tenir un tamany superior que al de les altres.

• La forma del tauler ha de ser rectangular, en vista vertical.

• Quan es passi per a sobre de les cartes girades, han de fer un efecte diferent.

- Quan s'obri un cuadre desplegable, els altres han de veure's difuminats.

• El botó de seleccionar, només es mostrarà actiu si hi ha una opció escollida.

- La carta principal ha de tenir un marc a darrere.

- S'ha d'utilitzar més d'un tipus de lletra en el joc.

Especifiacions no funcionals

• Es treballarà amb Javascript pur, no es poden fer servir llibreries externes o frameworks
• Es traballarà amb PHP
• Cada carta tindrà 3 atributs: (ulleres -> SI o NO, barba -> SI o NO, Cabell -> ROS, CASTANY, BRU)
• Heu de trobar 12 cartes amb les combinacions dels 3 atributs únic.
  • Carta 1 => Ulleres, Barba, Ros,
  • Carta 2 => ulleres, barba, CASTANY
  • Carta 3 => ulleres, barba, BRU
  • Carta 4 => NO ulleres, barba, ROS
  • Carta 5 => NO ulleres, barba, CASTANY
  • Carta 6 => NO ulleres, barba, BRU
  • Carta 7 => ulleres, NO barba, ROS
  • Carta 8 => ulleres, NO barba, CASTANY
  • Carta 9 => ulleres, NO barba, BRU
  • Carta 10 => NO ulleres, NO barba, ROS
  • Carta 11 => NO ulleres, NO barba, CASTANY
  • Carta 12 => NO ulleres, NO barba, BRU

Definition of Done (DOF)

1. Tasca implementada
2. Tasca testejada (en al menys 2 navegadors, firefox i google Chrome)
3. Tasca comitejada
4. Tasca pujada a producció

Gestió de projecte

Sprint #1 (18 hores) 11/10/18 -- 18/10/18

1. Configurarem les característiques dels personatges a l'arxiu de configuració config.txt (1h)
2. Les característiques són finites i hi haurà una per línia a l'arxiu de conf. Per exemple:(1h)

   ulleres: si no
   cabell: ros moreno castany
   sexe: dona home

3. Disposarem d'un segon arxiu de configuració per a les imatges imatges.txt. Aquest etiquetarà les imatges disponibles amb les seves característiques adients. Per exemple:(1h)

   sofia.jpg : ulleres si , cabell castany , sexe dona
   pablo.jpg : ulleres no , cabell moreno , sexe home

4. Les característiques (ros, moreno, dona, ... ) i els noms d'arxiu no poden contenir espais (en tot cas, poseu un underscore "_"). (0h)
5. El servidor ens haurà de donar error de configuració en aquests casos:(3h)
   1. Una mateixa imatge (nom d'arxiu) apareix dos cops a l'arxiu de configuració.
   2. Dues imatges diferents tenen les mateixes característiques.
   3. Una característica que apareix al fitxer imatges.txt no apareix al fitxer config.txt (al revés no importa)
6. El servidor haurà de triar una carta a l'atzar perquè l'endevini l'usuari.(1h)
7. El servidor barrejarà totes les cartes i col·locar-les sobre un taulell.(2h)
8. Totes les cartes excepte la seleccionada pel servidor han de poder descartar-se (girar-se cap per avall)(2h)
9. Quan es faci clic sobre una carta, aquesta s'haurà de girar amb efecte.(1h)
10. Un cop descartada un carta NO pot tornar a girar-se(1h)
11. S'ha de produir algún efecte, quan el ratolí passi per a sobre de una carta (sense clicar).Exemples: Es poden il.luminar, posar-se borroses, etc.(1h)
12. Crear un combo box per a cada propietat de les cartes (la pregunta ha de ser de SI o NO)(3h)
15. Si en clicar el botó "Fes la pregunta" hi ha més d'un combo box "activat" ha de mostrar un missatge de error informant que només es pot realitzar una pregunta cada cop(1h)

Sprint #2 (27 hores) 18/10/18 -- 25/10/18

1. 3h extra para acabar el Sprint 1 (3h)
2. Crear un botó amb el text: "Fes la pregunta" que en clicar-lo detecti quin combo box té la pregunta a realitzar y consulti en els atributs de la carta seleccionada pel servidor la respota y la imprimeixi per pantalla (1h)
3. La forma del tauler ha de ser rectangular, en vista vertical. (1h)
4. Totes les cartes han de mostrarse a sobre d'un tauler. (1h)
5. En cas de que el botó "Fes la pregunta" generi un error per que hi ha més d'un combo box "activat" a més a més de mostrar el missatge d'error ha de "resetejar" tots el combo box (1h)
6. Crea un algorisme que controli el final del joc. Quan només quedi una carta s'haurà de girar la carta de seleccionada per l'ordinador, si la carta que queda es la mateixa que la seleccionada per l'ordinador el jugador guanya el joc. En cas contrari el jugador perd el joc. (2h)
7. Han de sortir focs artifials per tota la pantalla si es guanya el joc. (3h)
8. Quan acabo la partida, m'ha de demanar el meu nom, per incloure'm a la taula de rècords. (3h)
9. El jugador ha de poder optar entre enregistrar el rècord o no fer-ho. (1h)
10. Després de realitzar una pregunta al ordinador si el jugador intenta realitzar una altra pregunta sense descartar cap carta ha de sortir un missatge d'avís amb el text: "Segur que vols realitzar un altre pregunta sense girar cap carta?" (2h)
11. Crea un apartat per mostrar un comptador amb el número de preguntes que s'han realitzat al ordinador (1h)
12. Ha de permetre veure el rànking de les partides, amb nom d'usuari i rècord, ordenades de millor (amunt) a pitjor (més avall). (2h)
13. Si l'ordinador envia un si, ha de parpadejar una llumeta verda, si no vermella. (2h)
14. Crea un botó per activar el mode "EASY". Aquest botó només romandrà actiu i es podrà clicar si encara no hem realitzat cap pregunta (1h)
15. Cada cop que es gira una carta s'ha d'escoltar un só (curt) (1h)

Sprint #3 (27 hores) 25/10/18 -- 8/11/18

• 20.La pàgina haurà de adaptarse al tamany de les diferents pantalles de forma automàtica(4h)
• 27.Implementa el mode "EASY", en aquest mode mode quan fem una pregunta al ordinador automaticament gira les cartes que no cumpleixen amb les condicions(2h)
• 30.Si el joc finalitza y el jugador guanya s'ha d'escoltar un só de victoria(1h)
• 31.Si el joc finalitza y el jugador perd s'ha d'escoltar un só de fracàs(1h)
• 32.La carta seleccionada per l'ordinador ha de tenir un tamany superior que al de les altres.(1h)
• 33.Si premo per accident el botó de recàrrega (F5), la partida s'ha de mantenir, i no generar una de nova, fins que no acabi l'actual.(3h)
• A.Implementació fitxers de config-combos(4h)
• 34.Substitueix els combos individuals de preguntes per un únic combo amb totes les preguntes(1h)
• 35.Quan es passi per a sobre de les cartes girades, han de fer un efecte diferent.(1h)
• 36.Modifica el botó per activar el mode "EASY" i fes un combo os es pugui seleccionar "EASY" i "VERY EASY"(1h)
• 37.Implementa el mode "VERY EASY" a més de fer el mateix que el mode "EASY" un cop que es realitza una pregunta aquesta pregunta s'elimina dels combos de preguntes(2h)
• 38.En començar el joc cada vegada que fas una pregunta tens 20 segons per girar les cartes. Una vegada passats els 20 segons no pots girar cap carta fins que es faci una altra pregunta(3h)
• 39.Crea un visualitzador que mostri un compte enrere amb els 20 segons de temps després de realitzar una pregunta(1h)
• 40.El botó de seleccionar, només es mostrarà actiu si hi ha una opció escollida.(1h)
• 42.Implementa un Easter Egg(1h)