SZUT/casino
SZUT/casino
Archived
3
1
Fork 0
Code Issues Pull requests 2 Releases 162 Packages 2 Wiki Activity Actions

docs: update diagrams formatting in project documentation

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-06-04 14:50:28 +02:00
commit 37f0ec4ae2
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
1 changed files with 27 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

54
docs/projektdokumentation.tex
View file

@ -273,11 +273,11 @@ Angular Router → Lazy Loading → Feature Modules
Die Casino Gaming Platform basiert auf einer modernen, schichtbasierten Architektur mit klarer Trennung zwischen Frontend und Backend. Die Darstellung erfolgt mittels des C4-Architekturmodells (Context, Container, Component, Code), welches eine hierarchische Sichtweise auf die Softwarearchitektur ermöglicht.
\clearpage
\needspace{8\baselineskip}
\begin{landscape}
\subsubsection{Ebene 1: Systemkontext-Diagramm}
Das Systemkontext-Diagramm stellt die Casino Gaming Platform in ihrem geschäftlichen Umfeld dar und zeigt die Beziehungen zu externen Akteuren und Systemen. Es verdeutlicht, wer das System nutzt und mit welchen externen Systemen es interagiert.
\begin{landscape}
\vspace{0.5cm}
\begin{tikzpicture}[
person/.style={rectangle, draw=blue!80, fill=blue!15, minimum width=3cm, minimum height=1.8cm, align=center, rounded corners=3pt, thick},
system/.style={rectangle, draw=blue!80, fill=blue!60, minimum width=5cm, minimum height=2.5cm, align=center, text=white, rounded corners=5pt, thick},
@ -308,11 +308,11 @@ Das Systemkontext-Diagramm stellt die Casino Gaming Platform in ihrem geschäftl
\end{landscape}
\clearpage
\needspace{8\baselineskip}
\begin{landscape}
\subsubsection{Ebene 2: Container-Diagramm}
Das Container-Diagramm zeigt die High-Level-Architektur der Software und stellt die verschiedenen ausführbaren Einheiten (Container) sowie deren Kommunikation dar. Jeder Container repräsentiert eine separate deploybare/ausführbare Einheit wie eine Webanwendung, Datenbank oder Microservice.
\begin{landscape}
\vspace{0.5cm}
\begin{tikzpicture}[
webapp/.style={rectangle, draw=blue!80, fill=blue!25, minimum width=4cm, minimum height=2.5cm, align=center, rounded corners=4pt, thick},
api/.style={rectangle, draw=green!80, fill=green!25, minimum width=4cm, minimum height=2.5cm, align=center, rounded corners=4pt, thick},
@ -350,11 +350,11 @@ Das Container-Diagramm zeigt die High-Level-Architektur der Software und stellt
\end{landscape}
\clearpage
\needspace{8\baselineskip}
\begin{landscape}
\subsubsection{Ebene 3: Komponenten-Diagramm - Backend API}
Das Komponenten-Diagramm zeigt die interne Struktur des Backend API-Containers und stellt die wichtigsten Softwarekomponenten sowie deren Abhängigkeiten dar. Es verdeutlicht die Architektur nach dem MVC-Pattern mit Controller-, Service- und Repository-Schichten.
\begin{landscape}
\vspace{0.5cm}
\begin{tikzpicture}[
component/.style={rectangle, draw=yellow!80, fill=yellow!15, minimum width=3.2cm, minimum height=1.8cm, align=center, rounded corners=3pt, thick},
controller/.style={rectangle, draw=blue!80, fill=blue!20, minimum width=3.2cm, minimum height=1.8cm, align=center, rounded corners=3pt, thick},
@ -400,29 +400,29 @@ Das Komponenten-Diagramm zeigt die interne Struktur des Backend API-Containers u
\end{landscape}
\clearpage
\needspace{8\baselineskip}
\begin{landscape}
\subsubsection{Ebene 4: Code-Diagramm - Blackjack Service Implementierung}
Das Code-Diagramm zeigt exemplarisch die Implementierungsdetails des Blackjack Game Service auf Klassenebene. Es stellt die wichtigsten Klassen, Interfaces und deren Beziehungen dar, die für die Blackjack-Spiellogik verantwortlich sind.
\begin{landscape}
\vspace{0.5cm}
\begin{tikzpicture}[
class/.style={rectangle, draw=cyan!80, fill=cyan!15, minimum width=3.5cm, minimum height=3cm, align=center, rounded corners=4pt, thick},
interface/.style={rectangle, draw=yellow!80, fill=yellow!15, minimum width=3cm, minimum height=2cm, align=center, rounded corners=4pt, thick},
->, >=Stealth, node distance=4.5cm, thick
]
% Interface - kompaktere Anordnung
\node[interface] (game-interface) at (0, 4) {\textbf{<<Interface>>}\\GameService\\+spielStarten()\\+zugVerarbeiten()\\+ergebnisBerechnen()};
% Interface - mit mehr Abstand
\node[interface] (game-interface) at (0, 6) {\textbf{<<Interface>>}\\GameService\\+spielStarten()\\+zugVerarbeiten()\\+ergebnisBerechnen()};
% Haupt-Service-Klasse
\node[class] (blackjack-service) at (0, 1) {\textbf{BlackjackService}\\implementiert GameService\\- kartendeck: Deck\\- spielRepository: Repository\\+ neuesSpielStarten(einsatz)\\+ ziehen(spielId)\\+ halten(spielId)\\+ verdoppeln(spielId)};
\node[class] (blackjack-service) at (0, 2) {\textbf{BlackjackService}\\implementiert GameService\\- kartendeck: Deck\\- spielRepository: Repository\\+ neuesSpielStarten(einsatz)\\+ ziehen(spielId)\\+ halten(spielId)\\+ verdoppeln(spielId)};
% Unterstützende Klassen - kompakter angeordnet
\node[class] (card-deck) at (-5, 1) {\textbf{Kartendeck}\\- karten: List<Karte>\\+ mischen()\\+ karteGeben()\\+ zurücksetzen()};
% Unterstützende Klassen - mit größerem Abstand
\node[class] (card-deck) at (-7, 2) {\textbf{Kartendeck}\\- karten: List<Karte>\\+ mischen()\\+ karteGeben()\\+ zurücksetzen()};
\node[class] (game-entity) at (5, 1) {\textbf{BlackjackSpielEntity}\\- id: Long\\- spielerKarten: List<Karte>\\- dealerKarten: List<Karte>\\- einsatzBetrag: BigDecimal\\- spielZustand: SpielZustand};
\node[class] (game-entity) at (7, 2) {\textbf{BlackjackSpielEntity}\\- id: Long\\- spielerKarten: List<Karte>\\- dealerKarten: List<Karte>\\- einsatzBetrag: BigDecimal\\- spielZustand: SpielZustand};
\node[class] (balance-service) at (0, -2) {\textbf{GuthabenService}\\+ guthabenAktualisieren()\\+ ausreichendGuthaben()\\+ transaktionErstellen()};
\node[class] (balance-service) at (0, -2.5) {\textbf{GuthabenService}\\+ guthabenAktualisieren()\\+ ausreichendGuthaben()\\+ transaktionErstellen()};
% Beziehungen
\draw (blackjack-service) -- (game-interface) node[midway, right] {implementiert};
@ -434,11 +434,11 @@ Das Code-Diagramm zeigt exemplarisch die Implementierungsdetails des Blackjack G
\end{landscape}
\clearpage
\needspace{8\baselineskip}
\begin{landscape}
\subsubsection{Deployment-Diagramm}
Das Deployment-Diagramm zeigt die Verteilung der Software-Container auf die physische/virtuelle Infrastruktur und stellt die Laufzeitumgebung der Anwendung dar. Es verdeutlicht, wie die verschiedenen Komponenten in der Produktionsumgebung deployed werden.
\begin{landscape}
\vspace{0.5cm}
\begin{tikzpicture}[
node/.style={rectangle, draw=gray!80, fill=gray!15, minimum width=5cm, minimum height=4cm, align=center, rounded corners=5pt, thick},
container/.style={rectangle, draw=blue!80, fill=blue!20, minimum width=3cm, minimum height=2cm, align=center, rounded corners=4pt, thick},
@ -448,15 +448,15 @@ Das Deployment-Diagramm zeigt die Verteilung der Software-Container auf die phys
% Infrastruktur-Knoten
\node[node] (docker-host) at (0, 0) {\textbf{Docker-Host}\\Ubuntu Linux\\Docker Engine 24.x};
% Container innerhalb des Docker-Hosts - kompaktere Anordnung
\node[container] (nginx) at (-4, 2.5) {\textbf{nginx}\\Webserver\\Port 80/443};
\node[container] (angular) at (-1.5, 2.5) {\textbf{Frontend}\\Angular-App\\Statische Dateien};
\node[container] (spring) at (1.5, 2.5) {\textbf{Backend}\\Spring Boot\\Port 8080};
\node[container] (postgres) at (4, 2.5) {\textbf{Datenbank}\\PostgreSQL\\Port 5432};
\node[container] (mailpit) at (0, -2.5) {\textbf{Mailpit}\\E-Mail-Service\\Port 1025/8025};
% Container innerhalb des Docker-Hosts - mit mehr Abstand
\node[container] (nginx) at (-5, 3.5) {\textbf{nginx}\\Webserver\\Port 80/443};
\node[container] (angular) at (-2, 3.5) {\textbf{Frontend}\\Angular-App\\Statische Dateien};
\node[container] (spring) at (2, 3.5) {\textbf{Backend}\\Spring Boot\\Port 8080};
\node[container] (postgres) at (5, 3.5) {\textbf{Datenbank}\\PostgreSQL\\Port 5432};
\node[container] (mailpit) at (0, -3.5) {\textbf{Mailpit}\\E-Mail-Service\\Port 1025/8025};
% Externe Dienste - näher platziert
\node[node] (cloud) at (7, 0) {\textbf{Cloud-Dienste}\\Stripe API\\OAuth-Provider};
% Externe Dienste - mit mehr Abstand
\node[node] (cloud) at (9, 0) {\textbf{Cloud-Dienste}\\Stripe API\\OAuth-Provider};
% Beziehungen
\draw (nginx) -- (angular);
@ -509,11 +509,11 @@ Das Backend folgt dem Domain-Driven Design (DDD) Ansatz:
}
\clearpage
\needspace{8\baselineskip}
\begin{landscape}
\subsubsection{Ebene 3: Komponenten-Diagramm - Frontend-Anwendung}
Das Komponenten-Diagramm zeigt die interne Struktur der Angular Frontend-Anwendung und stellt die modulare Architektur mit Feature-Modulen, Services und Guards dar. Es verdeutlicht die Anwendung des Angular-Framework-Patterns.
\begin{landscape}
\vspace{0.5cm}
\begin{tikzpicture}[
module/.style={rectangle, draw=purple!80, fill=purple!20, minimum width=3.5cm, minimum height=2.2cm, align=center, rounded corners=4pt, thick},
component/.style={rectangle, draw=blue!80, fill=blue!20, minimum width=3cm, minimum height=1.6cm, align=center, rounded corners=3pt, thick},