Skip to content
Browse files

Afegir exemples de comunicació entre client-servidor

- Afegir llibreria per crear diagrames de flux
- Diagrama de flux de la comunicació necessària per crear una nova partida.
- Diagrama de flux de la comunicació necessària per unir-se a una partida.
- Diagrama de flux dels missatges generats pel desenvolupament d'una partida.
  • Loading branch information...
1 parent 8a1cfeb commit 86949c6b566b3767f9fde37ea7009a0d70e55ac7 @pokoli committed
Showing with 439 additions and 1 deletion.
  1. +0 −1 TODO
  2. +106 −0 implementacio.tex
  3. +4 −0 memoria.tex
  4. +329 −0 pgf-umlsd.sty
View
1 TODO
@@ -7,7 +7,6 @@ Comentaris JM (20/05/12):
- A l'apartat d'implementació explicar les millores que s'han realitzat a cada versió. (Afegir un detall del log de git)
- A l'apartat implementació afegir exemples dels testos que s'han realitzat.
- Revisar les resolucions de les imatges adjuntes per tal de que aquestes quedin millor al incrustar-les a la memòria.
-- Afegir un diagrama de seqüencia amb els intercanvis de missatges que es realitzen per en els diversos procesos del transcurs d'una partida (a la secció implementació de la lògica del client).
- El apartat visualització de la informació inclourel a l'apartat d'interfície de client.
- Afegir captures de pantalla del resultat final de la interfície d'usuari.
View
106 implementacio.tex
@@ -156,6 +156,7 @@ \subsection{Lògica del client}
Cada vegada que es rep un missatge d'aquest tipus el programa client s'encarrega de processar la informació i de cridar al programa de visualització de la informació \footnote{Veure secció \ref{sec:visualitzacio-informacio}} per a que mostri la informació a l'usuari. El programa client també s'encarrega de refrescar la informació del servidor de forma periòdica.
+
\subsection{Visualització de la informació}
\label{sec:visualitzacio-informacio}
@@ -164,3 +165,108 @@ \subsection{Visualització de la informació}
Per tal de poder dibuixar l'àrea de joc de la partida i les cartes que juguen cada jugador s'ha utilitzat l'objecte canvas introduït en la última versió del llenguatge HTML. Aquest objecte proporciona un espai on poder realitzar dibuixos de forma dinàmica a través de JavaScript. Gràcies a que s'escriu a través de JavaScript ens permet dibuixar-hi sense tenir que tornar a carregar la pàgina. Aquest fet provoca que l'usuari pugui veure moviment a la pantalla.
En la implementació per defecte, l'objecte canvas forma tot un conjunt independentment del nombre d'objectes que tenim dibuixat al seu interior. Així només és pot associar esdeveniments a l'objecte en canvas i no als elements que estan continguts al seu interior. Un dels requisits del joc es que es puguin associar esdeveniments a objectes de dins del canvas, per exemple associar un esdeveniments que cada vegada que es faci clic sobre una carta s'enviï una petició al servidor sol·licitant que es vol jugar. Per tal de solucionar aquest problema s'ha utilitzat la llibreria kinetic.js\footnote{\url{http://www.kineticjs.com/}}. A més d'associar esdeveniments als objectes de dins aquesta llibreria ens permet estructurar el dibuix a nivell de capes, permetent-nos crear tantes capes com es cregui necessari. La llibreria s'encarrega de superposar totes les capes i mostrar-les a l'usuari.
+
+\section{Exemples de comunicació}
+
+En aquest apartat es mostraran alguns exemples de la comunicació que es dur a terme entre el client i el servidor, detallant els missatges que s'intercanvien.
+
+\begin{figure}[h!]
+\centering
+\begin{sequencediagram}
+\newthread[white]{c}{Client}
+\newinst[9]{s}{Servidor}
+
+\begin{call}{c}{Establir conexió}{s}{welcome}
+\end{call}
+
+\begin{call}{c}{login}{s}{Informació del usuari}
+\end{call}
+
+\begin{call}{c}{new-game}{s}{Informació de la partida creada}
+\end{call}
+
+\end{sequencediagram}
+\caption{Diagrama de flux de creació d'una nova partida.}
+\label{diag:creacio-nova-partida}
+\end{figure}
+
+A la figura \ref{diag:creacio-nova-partida} es pot observar el diagrama de flux necesàri per a la creació d'una nova partida. En el primer pas el programa client estableix la connexió amb el programa servidor que li contesta donant-li la benvinguda al servidor i preguntant-li el seu nom d'usuari. Una vegada el programa client envia el nom d'usuari el programa servidor li contesta amb l'identificador usuari que te asignat. Una vegada s'ha identificat el programa
+
+
+\begin{figure}[h!]
+\centering
+\begin{sequencediagram}
+\newthread[white]{c}{Client}
+\newinst[9]{s}{Servidor}
+
+\begin{call}{c}{Establir conexió}{s}{welcome}
+\end{call}
+
+\begin{call}{c}{login}{s}{Informació del usuari}
+\end{call}
+
+\begin{call}{c}{list-games}{s}{Llista de partides}
+\end{call}
+
+\begin{call}{c}{join-game(id)}{s}{Confirmació.}
+\end{call}
+
+\end{sequencediagram}
+\caption{Diagrama de flux per entrar a una partida existent.}
+\label{diag:entrar-partida}
+\end{figure}
+
+A la figura \ref{diag:entrar-partida} es pot observar el diagrama de flux necesàri per a la creació d'una nova partida. En el primer pas el programa client estableix la connexió amb el programa servidor que li contesta donant-li la benvinguda al servidor i preguntant-li el seu nom d'usuari. Una vegada el programa client envia el nom d'usuari el programa servidor li contesta amb l'identificador usuari que te asignat. Una vegada s'ha identificat el programa
+
+\begin{figure}[h!]
+\centering
+\begin{sequencediagram}
+\newthread[white]{s}{Servidor}
+\newinst[9]{c}{Client}
+
+\begin{messcall}{s}{start-game(game-data)}{c}
+\end{messcall}
+
+\begin{sdblock}{ Ronda } { Mentre no hi haigi equip guanyador.}
+
+ \begin{call}{s}{select-thriumph(choises)}{c}{made-thriumph(thriumph)}
+ \end{call}
+
+ \begin{messcall}{s}{chosen-thriumph(thriumph)}{c}
+ \end{messcall}
+
+ \begin{call}{s}{contro}{c}{do-contro(value)}
+ \end{call}
+
+ \begin{messcall}{s}{new-move)}{c}
+ \end{messcall}
+
+ \begin{sdblock}{ Jugada } { Fins que no quedin cartes per jugar }
+
+ \begin{messcall}{s}{play-card}{c}
+ \end{messcall}
+
+ \begin{messcall}{c}{play-card}{s}{missatge-error}
+ \end{messcall}
+
+ \begin{messcall}{s}{played-card}{c}
+ \end{messcall}
+
+ \end{sdblock}
+
+ \begin{messcall}{s}{end-move)}{c}
+ \end{messcall}
+
+\end{sdblock}
+
+\begin{messcall}{s}{end-game(game-data)}{c}
+\end{messcall}
+
+\end{sequencediagram}
+\caption{Diagrama de flux del desenvolupament d'una partida.}
+\label{diag:desenvolupament-partida}
+\end{figure}
+
+
+A la figura \ref{diag:desenvolupament-partida} es pot observar el diagrama de flux del desenvolupmaent d'una partida. En aquest cas s'han omès els pasos de creació d'una nova partida i que cada jugador entri dins de la partida. La partida comença quan el servidor notifica a tots els jugadors de la partida que aquesta ha comensat. Durant el transcurs de la partida es van jugant diferents rondes. En cada ronda el servidor notifica al client que ha de seleccionar thriumph les opcions que té diferent i espera la resposta del client. Una vegada el client ha seleccionat triomf, notifica a tots els jugadors de la partida quin ha estat el triomf seleccionat. Després d'això, notifica als jugadors que tenen la posibilitat de contrar i espera la seva resposta. Una vegada s'ha realitzat el proces de contro, el servidor indica el començament d'una nova jugada amb el missatge new-move. Cada jugada consisteix en un movimient (nova carta jugada) de cadascun dels jugadors de la partida. Així per cada moviment del jugador el servidor notifica al client que ha de realitzar un nou movimient i espera rebre el missatge de que s'ha jugat una nova carta. Quan el client envia el missatge de que vol jugar una nova carta el servidor valida que el moviment sigui correcte. En el cas de que aquest sigui incorrecte ho notifica al client i espera la jugada d'una nova carta. En el cas contrari, notifica a la resta de jugadors la carta que s'ha jugat i repeteix de nou la jugada. Així es van produïnt jugades fins que s'han acabat totes les cartes de tots els jugadors, concretament es tracta de 12 jugades. Una vegada s'han jugat totes les cartes la ronda es dona per finalitzada i el servidor computa les puntuacions de la partida. En el cas que no s'haigi finalitzat la partida es comença la ronda i es torna a repetir tot el procediment realitzat anteriorment. Si hi ha un equip guanyador la partida es dona per finalitzada i es notifica a tots els clients.
+
View
4 memoria.tex
@@ -29,7 +29,11 @@
morestring=[b]',
morestring=[b]"
}
+%%%%%% Per realitzar diagrames de fluxe %%%%%%
+\usepackage{tikz}
+\usetikzlibrary{arrows,shadows}
+\usepackage{pgf-umlsd}
%%%%%% Estructura de la pagina %%%%
\setlength{\parskip}{1.7ex plus 0.5ex minus 0.5ex}
View
329 pgf-umlsd.sty
@@ -0,0 +1,329 @@
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+% Start of pgf-umlsd.sty
+%
+% Some macros for UML Sequence Diagrams.
+% Home page of project: http://pgf-umlsd.googlecode.com/
+% Author: Xu Yuan <xuyuan.cn@gmail.com>, Southeast University, China
+% Contributor: Nobel Huang <nobel1984@gmail.com>, Southeast University, China
+%
+% History:
+% v0.7 2012/03/05
+% - unify interface of call and callself
+% - non-instantaneous message
+% - bugfix: conflits with tikz library backgrounds
+% v0.6 2011/07/27
+% - Fix Issue 6 reported by frankmorgner@gmail.com
+% - diagram without a thread
+% - allows empty diagram
+% - New manual
+% v0.5 2009/09/30 Fix Issue 2 reported by vlado.handziski
+% - Nested callself is supported
+% - Rename sdloop and sdframe to sdblock
+% v0.4 2008/12/08 Fix Issue 1 reported by MathStuf:
+% Nested sdloop environment hides outer loop
+% v0.3 2008/11/10 in Berlin, fix for the PGF cvs version:
+% - the list items in \foreach are not evaluated by default now,
+% the `evaluate' opinion should be used
+% v0.2 2008/03/20 create project at http://pgf-umlsd.googlecode.com/
+% - use `shadows' library
+% Thanks for Dr. Ludger Humbert's <humbert@uni-wuppertal.de> feedback!
+% - reduce the parameter numbers, the user can write the content
+% of instance (such as no colon)
+% - the user can redefine the `inststyle'
+% - new option: switch underlining of the instance text
+% - new option: switch rounded corners
+% v0.1 2008/01/25 first release at http://www.fauskes.net/pgftikzexamples/
+%
+
+\NeedsTeXFormat{LaTeX2e}[1999/12/01]
+\ProvidesPackage{pgf-umlsd}[2011/07/27 v0.6 Some LaTeX macros for UML
+Sequence Diagrams.]
+
+\RequirePackage{tikz}
+\usetikzlibrary{arrows,shadows}
+
+\RequirePackage{ifthen}
+
+% Options
+% ? the instance name under line ?
+\newif\ifpgfumlsdunderline\pgfumlsdunderlinetrue
+\DeclareOption{underline}{\pgfumlsdunderlinetrue}
+\DeclareOption{underline=true}{\pgfumlsdunderlinetrue}
+\DeclareOption{underline=false}{\pgfumlsdunderlinefalse}
+% ? the instance box with rounded corners ?
+\newif\ifpgfumlsdroundedcorners\pgfumlsdroundedcornersfalse
+\DeclareOption{roundedcorners}{\pgfumlsdroundedcornerstrue}
+\DeclareOption{roundedcorners=true}{\pgfumlsdroundedcornerstrue}
+\DeclareOption{roundedcorners=false}{\pgfumlsdroundedcornersfalse}
+\ProcessOptions
+
+% new counters
+\newcounter{preinst}
+\newcounter{instnum}
+\newcounter{threadnum}
+\newcounter{seqlevel} % level
+\newcounter{callevel}
+\newcounter{callselflevel}
+\newcounter{blocklevel}
+
+% new an instance
+% Example:
+% \newinst[edge distance]{var}{name:class}
+\newcommand{\newinst}[3][0.2]{
+ \stepcounter{instnum}
+ \path (inst\thepreinst.east)+(#1,0) node[inststyle] (inst\theinstnum)
+ {\ifpgfumlsdunderline
+ \underline{#3}
+ \else
+ #3
+ \fi};
+ \path (inst\theinstnum)+(0,-0.5*\unitfactor) node (#2) {};
+ \tikzstyle{instcolor#2}=[]
+ \stepcounter{preinst}
+}
+
+% new an instance thread
+% Example:
+% \newinst[color]{var}{name}{class}
+\newcommand{\newthread}[3][gray!30]{
+ \newinst{#2}{#3}
+ \stepcounter{threadnum}
+ \node[below of=inst\theinstnum,node distance=0.8cm] (thread\thethreadnum) {};
+ \tikzstyle{threadcolor\thethreadnum}=[fill=#1]
+ \tikzstyle{instcolor#2}=[fill=#1]
+}
+
+% draw running (thick) line, should not call directly
+\newcommand*{\drawthread}[2]{
+ \begin{pgfonlayer}{umlsd@threadlayer}
+ \draw[threadstyle] (#1.west) -- (#1.east) -- (#2.east) -- (#2.west) -- cycle;
+ \end{pgfonlayer}
+}
+
+% a function call
+% Example:
+% \begin{call}[height]{caller}{function}{callee}{return}
+% \end{call}
+\newenvironment{call}[5][1]{
+\ifthenelse{\equal{#2}{#4}}
+{
+ \begin{callself}[#1]{#2}{#3}{#5}
+}
+{
+ \begin{callanother}[#1]{#2}{#3}{#4}{#5}
+}
+}
+{
+\ifthenelse{\equal{\f\thecallevel}{\t\thecallevel}}
+{
+ \end{callself}
+}
+{
+ \end{callanother}
+}
+}
+
+% function call to another instance
+% interal use only
+\newenvironment*{callanother}[5][1]{
+ \stepcounter{seqlevel}
+ \stepcounter{callevel} % push
+ \path
+ (#2)+(0,-\theseqlevel*\unitfactor-0.7*\unitfactor) node (cf\thecallevel) {}
+ (#4.\threadbias)+(0,-\theseqlevel*\unitfactor-0.7*\unitfactor) node (ct\thecallevel) {};
+
+ \draw[->,>=triangle 60] ({cf\thecallevel}) -- (ct\thecallevel)
+ node[midway, above] {#3};
+ \def\l\thecallevel{#1}
+ \def\f\thecallevel{#2}
+ \def\t\thecallevel{#4}
+ \def\returnvalue{#5}
+ \tikzstyle{threadstyle}+=[instcolor#2]
+}
+{
+ \addtocounter{seqlevel}{\l\thecallevel}
+ \path
+ (\f\thecallevel)+(0,-\theseqlevel*\unitfactor-0.7*\unitfactor) node (rf\thecallevel) {}
+ (\t\thecallevel.\threadbias)+(0,-\theseqlevel*\unitfactor-0.7*\unitfactor) node (rt\thecallevel) {};
+ \draw[dashed,->,>=angle 60] ({rt\thecallevel}) -- (rf\thecallevel)
+ node[midway, above]{\returnvalue};
+ \drawthread{ct\thecallevel}{rt\thecallevel}
+ \addtocounter{callevel}{-1} % pop
+}
+
+% a function do not need call others
+% interal use only
+% Example:
+% \begin{callself}[height]{caller}{function}{return}
+% \end{callself}
+\newenvironment*{callself}[4][1]{
+ \stepcounter{seqlevel}
+ \stepcounter{callevel} % push
+ \stepcounter{callselflevel}
+
+ \path
+ (#2)+(\thecallselflevel*0.1-0.1,-\theseqlevel*\unitfactor-0.7*\unitfactor) node (sc\thecallevel) {}
+ ({sc\thecallevel}.east)+(0,-0.33*\unitfactor) node (scb\thecallevel) {};
+
+ \draw[->,>=triangle 60] ({sc\thecallevel}.east) -- ++(0.8,0)
+ node[near start, above right] {#3} -- ++(0,-0.33*\unitfactor)
+ -- (scb\thecallevel);
+ \def\l\thecallevel{#1}
+ \def\f\thecallevel{#2}
+ \def\t\thecallevel{#2}
+ \def\returnvalue{#4}
+ \tikzstyle{threadstyle}+=[instcolor#2]
+}{
+ \addtocounter{seqlevel}{\l\thecallevel}
+ \path (\f\thecallevel)+(\thecallselflevel*0.1-0.1,-\theseqlevel*\unitfactor-0.33*\unitfactor) node
+ (sct\thecallevel) {};
+
+ \draw[dashed,->,>=angle 60] ({sct\thecallevel}.east) node
+ (sce\thecallevel) {} -- ++(0.8,0) -- node[midway, right]{\returnvalue} ++(0,-0.33*\unitfactor) -- ++(-0.8,0);
+ \drawthread{scb\thecallevel}{sce\thecallevel}
+ \addtocounter{callevel}{-1} % pop
+ \addtocounter{callselflevel}{-1}
+}
+
+% message between threads
+% Example:
+% \mess[delay]{sender}{message content}{receiver}
+\newcommand{\mess}[4][0]{
+ \stepcounter{seqlevel}
+ \path
+ (#2)+(0,-\theseqlevel*\unitfactor-0.7*\unitfactor) node (mess from) {};
+ \addtocounter{seqlevel}{#1}
+ \path
+ (#4)+(0,-\theseqlevel*\unitfactor-0.7*\unitfactor) node (mess to) {};
+ \draw[->,>=angle 60] (mess from) -- (mess to) node[midway, above]
+ {#3};
+
+ \node (#3 from) at (mess from) {};
+ \node (#3 to) at (mess to) {};
+}
+
+\newenvironment{messcall}[4][1]{
+ \stepcounter{seqlevel}
+ \stepcounter{callevel} % push
+ \path
+ (#2)+(0,-\theseqlevel*\unitfactor-0.7*\unitfactor) node (cf\thecallevel) {}
+ (#4.\threadbias)+(0,-\theseqlevel*\unitfactor-0.7*\unitfactor) node (ct\thecallevel) {};
+
+ \draw[->,>=angle 60] ({cf\thecallevel}) -- (ct\thecallevel)
+ node[midway, above] {#3};
+ \def\l\thecallevel{#1}
+ \def\f\thecallevel{#2}
+ \def\t\thecallevel{#4}
+ \tikzstyle{threadstyle}+=[instcolor#2]
+}
+{
+ \addtocounter{seqlevel}{\l\thecallevel}
+ \path
+ (\f\thecallevel)+(0,-\theseqlevel*\unitfactor-0.7*\unitfactor) node (rf\thecallevel) {}
+ (\t\thecallevel.\threadbias)+(0,-\theseqlevel*\unitfactor-0.3*\unitfactor) node (rt\thecallevel) {};
+ \drawthread{ct\thecallevel}{rt\thecallevel}
+ \addtocounter{callevel}{-1} % pop
+}
+
+% In the situation of multi-threads, some objects are called at the
+% same time. Currently, we have to adjust the bias of thread line
+% manually. Possible parameters are: center, west, east
+\newcommand{\setthreadbias}[1]{\global\def\threadbias{#1}}
+
+% This function makes the call earlier.
+\newcommand{\prelevel}{\addtocounter{seqlevel}{-1}}
+
+% This function makes the call later.
+\newcommand{\postlevel}{\addtocounter{seqlevel}{+1}}
+
+% a block box with caption
+% \begin{sdblock}[caption background color]{caption}{comments}
+% \end{sdblock}
+\newenvironment{sdblock}[3][white]{
+ \stepcounter{seqlevel}
+ \stepcounter{blocklevel} % push
+ \coordinate (blockbeg\theblocklevel) at (0,-\theseqlevel*\unitfactor-\unitfactor);
+ \stepcounter{seqlevel}
+ \def\blockcolor\theblocklevel{#1}
+ \def\blockname\theblocklevel{#2}
+ \def\blockcomm\theblocklevel{#3}
+ \begin{pgfinterruptboundingbox}
+}{
+ \coordinate (blockend) at (0,-\theseqlevel*\unitfactor-2*\unitfactor);
+ \path (current bounding box.east)+(0.2,0) node (boxeast) {}
+ (current bounding box.west |- {blockbeg\theblocklevel}) + (-0.2,0)
+ node (nw) {};
+ \path (boxeast |- blockend) node (se) {};
+
+ % % title
+ \node[blockstyle] (blocktitle) at (nw) {\blockname\theblocklevel};
+ \path (blocktitle.south east) + (0,0.2) node (set) {}
+ (blocktitle.south east) + (-0.2,0) node (seb) {}
+ (blocktitle.north east) + (0.2,0) node (comm) {};
+ \draw[fill=\blockcolor\theblocklevel] (blocktitle.north west) -- (blocktitle.north east) --
+ (set.center) -- (seb.center) -- (blocktitle.south west) -- cycle;
+ \node[blockstyle] (blocktitle) at (nw) {\blockname\theblocklevel};
+ \node[blockcommentstyle] (blockcomment) at (comm) {\blockcomm\theblocklevel};
+
+ \coordinate (se) at (current bounding box.south east);
+ \end{pgfinterruptboundingbox}
+
+ \draw (se) rectangle (nw);
+
+ \addtocounter{blocklevel}{-1} % pop
+ \stepcounter{seqlevel}
+}
+
+% the environment of sequence diagram
+\newenvironment{sequencediagram}{
+ % declare layers
+ \pgfdeclarelayer{umlsd@background}
+ \pgfdeclarelayer{umlsd@threadlayer}
+ \pgfsetlayers{umlsd@background,umlsd@threadlayer,main}
+
+ \begin{tikzpicture}
+ \setlength{\unitlength}{1cm}
+ \tikzstyle{sequence}=[coordinate]
+ \tikzstyle{inststyle}=[rectangle, draw, anchor=west, minimum
+ height=0.8cm, minimum width=1.6cm, fill=white,
+ drop shadow={opacity=1,fill=black}]
+ \ifpgfumlsdroundedcorners
+ \tikzstyle{inststyle}+=[rounded corners=3mm]
+ \fi
+ \tikzstyle{blockstyle}=[anchor=north west]
+ \tikzstyle{blockcommentstyle}=[anchor=north west, font=\small]
+ \tikzstyle{dot}=[inner sep=0pt,fill=black,circle,minimum size=0.2pt]
+ \global\def\unitfactor{0.6}
+ \global\def\threadbias{center}
+ % reset counters
+ \setcounter{preinst}{0}
+ \setcounter{instnum}{0}
+ \setcounter{threadnum}{0}
+ \setcounter{seqlevel}{0}
+ \setcounter{callevel}{0}
+ \setcounter{callselflevel}{0}
+ \setcounter{blocklevel}{0}
+
+ % origin
+ \node[coordinate] (inst0) {};
+}
+{
+ \begin{pgfonlayer}{umlsd@background}
+ \ifnum\c@instnum > 0
+ \foreach \t [evaluate=\t] in {1,...,\theinstnum}{
+ \draw[dotted] (inst\t) -- ++(0,-\theseqlevel*\unitfactor-2.2*\unitfactor);
+ }
+ \fi
+ \ifnum\c@threadnum > 0
+ \foreach \t [evaluate=\t] in {1,...,\thethreadnum}{
+ \path (thread\t)+(0,-\theseqlevel*\unitfactor-0.1*\unitfactor) node (threadend) {};
+ \tikzstyle{threadstyle}+=[threadcolor\t]
+ \drawthread{thread\t}{threadend}
+ }
+ \fi
+ \end{pgfonlayer}
+\end{tikzpicture}}
+
+
+%%% End of pgf-umlsd.sty
+%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

0 comments on commit 86949c6

Please sign in to comment.
Something went wrong with that request. Please try again.