Fix Layout für mobile overview Ansicht

Tabu.csv

-"1	Elefant	Rüssel	Dickhäuter	Tier	Afrika	grau"
-"2	Küche	Koch	Essen	Kühlschrank	Herd	Arbeitsplatte"
-"3	Taschengeld	Ausgeben	Sparen	Jacke	Euro	Eltern"
-"4	Schwimmen	Sport	Verein	Wasser	Baden	Kraul"
-"5	Buch	Lesen	Seite	Taschen	Einband	Autor"
-"6	Jacke	Mantel	Überziehen	Tragen	Kalt	Strick"
-"7	Fahrrad	Reifen	Sattel	Pedale	Klingel	Tour"
-"8	Sparschwein	Geld	Sparen 	Füllen	Kinder	Taschengeld"
-"9	Affe	Dschungel	Banane	Tarzan	Pavian	Tier"
-"10	Kaffee	Schwarz	Milch	Zucker	Heiß	Koffein"
-"11	Salat	Tomaten	Gurken	Grün	Soße	Vorspeise"
-"12	Schnee	Eis	Weiß	Kalt	Skifahren	Winter"
-"13	Uhr	Zeit	Zahlen	Armband	Handgelenk	Stunden"
-"14	Brot	Backen	Laib	Kruste	Scheiben	Bäcker"
-"15	Hunde	Gassi	Haustier	Bellen	Leine	Katze"
-"16	Datum	Kalender	Heute	Monat	Jahr	Tag"
-"17	Sonne	Hell	Scheinen	Regen	Wolken	Himmel"
-"18	Finger	Hand	Zeigen	Daumen	anfassen	Abdruck"
-"19	Kartoffel	Ecken	Püree	Schale	Erdapfel	Pommes"
-"20	Spaghetti	Nudeln	Bolognese	Faden	Pasta	Lang"
-"21	Maus	Micky	Computer	Tastatur	Käse	Falle"
-"22	Pferd	Reiten	Hufeisen	Sattel	Stall	Trense"
-"23	Fussball	Schwarz	Weiß	Bundesliga	Sport	Spiel"
-"24	Schule	Bücher	Prüfungen	Lehrer	Klasse	Gymnasium"
-"25	Hamburger	Fleisch	Brötchen	Ketchup	Mc Donalds	Fast Food"
-"26	Pony	Pferd	Klein	Reiten	Sattel	Hof"
-"27	Obst	Frucht	Baum	Essen	Apfel	Banane"
-"28	Skateboard	Fahren	Brett	Balance	Rollen	Inliner"
-"29	Schlange	Reptil	Giftzähne	Kriechen	Schuppen	Häuten"
-"30	Höhle	Decken	Versteck	Dunkel	Leben	Fledermäuse"
-"31	Badeanzug	Wasser	Schwimmbad	Sommer	Hose	Bikini"
-"32	Lolli	Lutschen	Farbe	Stiel	Süßigkeit	Zuckerstange"
-"33	Schwimmbad	Wasser	Becken	Schwimmen	Sportschule	aus"
-"34	Motorrad	Zweirad	Fahren	Helm	schnell	Auto"
-"35	Tischtennis	Ball	Schläger	Platte	Rundlauf	Match"
-"36	Toilette	WC	Bad	Spülen	Papier	ausverkauft"
-"37	Torte	Backen	Kuchen	Geburtstag	Muffin	Kaffee"
-"38	Toast	Heiß	Brot	Butter	Sandwich	weiß"
-"39	Schiedsrichter	Unparteiisch	Fußball	Sport	Abseits	Pfeifen"
-"40	Tomate	Reif	Rot	Gemüse	Ketchup	Soße"
-"41	Stier	Hörner	Kampf	Kuh	Sternzeichen	rot"
-"42	Platz	Fläche	Offen	Spiel	Fußball	Sitz"
-"43	Ballkleid	Lang	Hübsch	Abi	Elegant	Tanzen"
-"44	Kartoffelchips	Tüte	gesalzen	Knusprig	Pringles	woraus"
-"45	Einhorn	Pferd	Horn	Fabel	Fantasie	Tier"
-"46	Schleife	Haar	Schuhe	Binden	Knoten	Conny"
-"47	Pyjama	Anzug	Schlafen	Bett	Nachts	anziehen"
-"48	Basketball	groß	Spieler	Korb	Sport	Halle"
-"49	Jucken	Haut	Kratzen	Reiben	rot	Allergie"
-"50	Satellit	Umkreisen	Erde	Weltraum	fliegen	Raumfahrt"
-"51	Karotte	Orange	Hase	Gemüse	knabbern	hart"
-"52	Frikadellen	Rindfleisch	Rund	Senf	Buletten	Brötchen"
-"53	Schultasche	Tragen	Hefte	Sachen	Mäppchen	Ranzen"
-"54	Lederhose	Bayern	Beine	kurz	Oktoberfest	Deutsch"
-"55	Milchstrasse	Sterne	Weltall	Sonnensystem	Galaxie	Himmel"
-"56	Kehlkopf	Schlucken	Hals	Sprechen	Rachen	Luftröhre"
-"57	Sweatshirt	Ärmel	Lang	Jacke	Warm	Pullover"
-"58	Informatiker	Computer	Programmieren	Beruf	Hardware	Software"
-"59	Tischdecke	Essen	Stoff	Mahlzeit	Möbel	Zimmer"
-"60	Geist	Gespenst	Schloss	Spuken	Halloween	weiß"
-"61	Gynäkologe	Frauenarzt	Stuhl	Untersuchung	Schwanger	Pille"
-"62	Hausfrau	Arbeit	Beruf	Familie	Haushalt	Erziehung"
-"63	Internet	WLAN	online	Netzwerk	Computer	Daten"
-"64	Januar	Monat	Dezember	Februar	Winter	Jahresbeginn"
-"65	Eis	gefroren	kalt	Wasser	See	Schlittschuh"
-"66	Frost	Eis	Wetter	Raureif	Boden	kalt"
-"67	Grippe	Krankheit	Fieber	Husten	Virus	Arzt"
-"68	Supermarkt	Geschäft	Laden	einkaufen	Essen	Discounter"
-"69	Sofa	Sitzen	Wohnzimmer	Couch	Möbelstück	Fernsehen"
-"70	Weihnachten	Feiern	Jesus	Geburt	Geschenke	Dezember"
-"71	Kirche	Gottesdienst	Religion	Pfarrer	Christ	Gebäude"
-"72	Google	Suchmaschine	Internet	nachgucken	suchen	Bing"
-"73	Klavier	Musik	Instrument	Spielen	Tasten	Noten"
-"74	Medizin	Mittel	Tablette	Saft	Arzt	studieren"
-"75	vier	Zahl	drei	zwei	fünf	Nummer"
-"76	Tabu	Spiel	jetzt	grade	erklären	Karten"
-"77	Musik	singen	spielen	hören	Noten	Instrument"
-"78	Kugelschreiber	Stift	schreiben	Unterschrift	blau	Füller"
-"79	Tastatur	Computer	tippen	Maus	eingeben	Buchstaben"
-"80	Smartphone	Handy	Telefon	anrufen	Internet	mobil"
-"81	Hausarbeit	Universität	schreiben	Seiten	Aufgabe	Klausur"
-"82	Flasche	Wasser	Getränk	trinken	Glas	Pfand"
-"83	Abend	Morgen	Mittag	dunkel	Nacht	spät"
-"84	Arbeit	Beruf	tagsüber	verdienen	Geld	Tätigkeit"
-"85	Auge	sehen	Pupille	Gesicht	gucken	zwei"
-"86	Auto	fahren	Verkehrsmittel	Fahrrad	Reifen	Benzin"
-"87	Blume	Pflanze	Strauß	Beet	wachsen	schön"
-"88	Beruf	Arbeiten	Was	Woche	Ausbildung	Geld"
-"89	Bett	schlafen	Nacht	Decke	Kissen	Laken"
-"90	Boden	stehen	Parkett	Teppich	Fliesen	unten"
-"91	Bruder	Schwester	Geschwister	Junge	Mann	Sohn"
-"92	Brief	schicken	Mail	Umschlag	Papier	schreiben"
-"93	Dorf	Stadt	klein	wohnen	ländlich	Siedlung"
-"94	Ding	vergessen	Sache	Gegenstand	unspezifisch	Wort"
-"95	Palme	Baum	warm	Blätter	Banane	Kokosnuss"
-"96	Ende	Anfang	Fertig	Gegenteil	Zeitpunkt	aufhören"
-"97	Erde	Planet	leben	Welt	Blumen	Pflanzen"
-"98	Familie	Eltern	Kinder	verwandt	Nachname	Haus"
-"99	Ferien	Urlaub	Frei	Sommer	Weihnachten	Herbst"
-"100	Klausur	schreiben	Prüfung	Klassenarbeit	lernen	Kontrolle"
-"101	Fisch	Wasser	schwimmen	Tier	Meer	See"
-"102	Frage	Satz	Antwort	Erkundigen	Thema	Problem"
-"103	Freund	mögen	lieben	Sympathie	jemanden	Person"
-"104	Frau	weiblich	erwachsen	Mensch	Mädchen	Mann"
-"105	Fuß	Zehen	Bein	stehen	gehen	Schuhe"
-"106	Garten	Grundstück	draußen	Rasen	Terasse	Pflanzen"
-"107	Geburtstag	Feiern	Geschenke	Kuchen	Jahr	alt"
-"108	Haar	Kopf	wachsen	rasieren	Tier	Körper"
-"109	Herz	Symbol	Organ	schlagen	rot	Liebe"
-"110	Hunger	satt	Essen	Appetit	Nahrung	Empfindung"
-"111	Raum	Zimmer	Platz	Wände	Zahlen	Welt"
-"112	Kopf	Haupt	Körper	Schultern	Schädel	Gehirn"
-"113	Kind	jung	klein	Mensch	erwachsen	Eltern"
-"114	Lehrer	Beruf	Arbeiten	Schule	Studieren	Referendar"
-"115	Leben	Tod	Menschen	Tiere	Herz	Welt"
-"116	Licht	dunkel	Lampe	Glühbirne	Kerze	hell"
-"117	Loch	fallen	tief	Boden	Erde	Monster"
-"118	Luft	atmen	Gas	durchsichtig	Wasser	leben"
-"119	Minute	Sekunden	60	Stunde	Uhr	Zeit"
-"120	Mensch	Person	Tier	Lebewesen	zwei	Beine"
-"121	Onkel	Tante	Cousin	Bruder	Vater	Schwager"
-"122	Plural	Mehrzahl	Einzahl	Singular	deutsch	viele"
-"123	Rad	Reifen	Rund	fahren	Auto	drehen"
-"124	Sache	Ding	Gegenstand	etwas	Bezeichnung	besitzen"
-"125	Fotoalbum	Erinnerungen	Kamera	Buch	drucken	Bilder"
-"126	Schiff	Boot	Wasser	fahren	schwimmen	Gefährt"
-"127	Sommer	Jahreszeit	Frühling	warm	Winter	Herbst"
-"128	Stadt	Land	Dorf	Vorort	wohnen	viele"
-"129	Spaß	Vergnügen	glücklich	Spiel	Freude	Scherz"
-"130	Straße	Weg	Bürgersteig	Adresse	Asphalt	Autobahn"
-"131	Tag	Nacht	Woche	Stunden	Mittwoch	Monat"
-"132	Teller	Essen	flach	Suppe	Kuchen	Tisch"
-"133	Jogginghose	Beine	anziehen	bequem	Jeans	laufen"
-"134	Vogel	fliegen	Tier	Flügel	Federn	Piepmatz"
-"135	Waage	Gewicht	Sternzeichen	Person	Küche	Gramm"
-"136	Wald	Bäume	Holz	Forst	Feld	wachsen"
-"137	Wissen	verstehen	Kenntnis	Bildung	Weisheit	viel"
-"138	Wort	Begriff	reden	erklären	Synonym	Satz"
-"139	Wohnung	umziehen	Haus	Wände	Mieten	Raum"
-"140	Zeitung	lesen	Bild	General	Allgemeine	Artikel"
-"141	Zug	fahren	Gleis	Bahnhof	Fahrzeug	Schienen"
-"142	Zahl	Nummer	Mathe	eins	rechnen	Ziffer"
-"143	Blödsinn	Mist	Quatsch	Unsinn	erzählen	wahr"
-"144	Anhängsel	Freund	Begleitung	Umgangssprachlich	Bezeichnung	Person"
-"145	Hüftgold	Speck	Rippen	Dick	Bauch	Fett"
-"146	Quadratlatschen	Schuhe	groß	viereck	Füße	gehen"
-"147	Ratzefummel	Radierer	Synonym	Bleistift	wegmachen	Gummi"
-"148	Waschbrettbauch	Sixpack	Muskeln	Körper	trainiert	Wampe"
-"149	Quietscheente	Badewanne	Tier	gelb	Gummi	Spielzeug"
-"150	Tollpatsch	ungeschickt	jemand	Person	Mensch	Pechvogel"
-"151	Trantüte	langsam	träge	Mensch	Lahmarsch	Schnarchnase"
-"152	Schwitzkasten	Würgegriff	Unterarm	Hals	festhalten	Kämpfen"
-"153	Kaulquappe	Frosch	Babys	Nachwuchs	Wasser	Larven"
-"154	Schnappsidee	Einfall	Blöd	Alkohol	seltsam	unsinnig"
-"155	Glückspilz	Symbol	Kleeblatt	Gemüse	Sonntagskind	Boden"
-"156	Feuerzeug	anzünden	Flamme	Streichholz	Zigarette	Kerze"
-"157	Grenze	Land	Markierung	trennen	Rand	geographisch"
-"158	Staubsauger	Schmutz	Dreck	Putzen	Boden	sauber"
-"159	Shisha	rauchen	Bar	Wasserdampf	Pfeife	Tabak"
-"160	Fernseher	gucken	Film	Gerät	TV	Bildschirm"
-"161	Fernbedienung	TV	Anschalten	Lautstärke	Tasten	Hand"
-"162	Ordner	Akten	Papier	Blätter	Lochen	Dokumente"
-"163	Schublade	Aufbewahren	Öffnen	Kommode	Nachttisch	Griff"
-"164	Klingel	Besuch	Haustür	Ding Dong	Klopfen	reinlassen"
-"165	Schneemann	Kugel	Möhre	drei	Winter	kalt"
-"166	Fingernagel	Hand	lackieren	schneiden	Fuß	feilen"
-"167	Nagellack	Finger	Füße	bunt	Hand	malen"
-"168	Arzt	Krank	untersuchen	Blutabnahme	impfen	Beruf"
-"169	Krankenhaus	Arzt	Schwester	Notaufnahme	Verletzung	Operation"
-"170	Bauchnabel	Loch	Körper	Mitte	Schnur	Geburt"
-"171	Stock	Ast	Baum	Holz	Wald	wandern"
-"172	Alkohol	trinken	Bier	Wein	Promille	Schnaps"
-"173	Bilderrahmen	Foto	aufhängen	Wand	Erinnerung	aufstellen"
-"174	SMS	schreiben	Handy	früher	Whatsapp	Nachricht"
-"175	Serie	Film	gucken	Netflix	Folge	Staffel"
-"176	Türklinke	öffnen	drücken	abschließen	Hand	rein"
-"177	Flugzeug	Urlaub	fliegen	Luft	Terminal	Turbine"
-"178	Lautsprecher	hören	Box	Musik	Bass	Durchsage"
-"179	Waffel	backen	Herzchen	Teig	Kirschen	Essen"
-"180	Brille	Gläser	sehen	Gestell	Gesicht	Augen"
-"181	Dekoration	schön	einrichten	Frauen	Weihnachten	Kerzen"
-"182	Staubfänger	Dekoration	unnötig	herumstehen	nutzlos	dreckig"
-"183	Adventskalender	Dezember	Weihnachten	24	Türchen	Tag"
-"184	Wurst	Fleisch	Brotbelag	Käse	Abendessen	Salami"
-"185	Vegetarier	essen	Fleisch	Tofu	Gemüse	Vegan"
-"186	Zahn	putzen	Zahnpasta	Zahnbürste	Kieferorthopäde	Karies"
-"187	Deodorant	Tag	Schweiß	Achsel	stinken	Parfüm"
-"188	Zopf	Mädchen	flechten	binden	hoch	Haargummi"
-"189	Süßigkeiten	Gummibärchen	Schokolade	Zucker	Bonbon	essen"
-"190	Pflaster	Blut	Wunde	verletzen	kleben	Trost"
-"191	Wimper	Augenbraue	Mascara	schminken	Gesicht	Haar"
-"192	Frühstück	Morgens	Essen	Brunch	Müsli	Brötchen"
-"193	Mäppchen	Stifte	Schule	Ranzen	Füller	Kugelschreiber"
-"194	Blitz	Gewitter	Donner	hell	Licht	Himmel"
-"195	BaumstammWald		Ast	Floß	Holz	Zweig"
-"196	Handgelenk	umgeknickt	bewegen	Arm	Armband	Uhr"
-"197	Kapuze	Jacke	Pullover	Sweatshirt	Kopf	Regen"
-"198	Steckdose	Strom	Kabel	Wand	Adapter	aufladen"
-"199	Gewalt	Krieg	Lösung	Prügelei	Schlagen	Brutal"
-"200	Zufall	würfeln	Wahrscheinlichkeit	ungewiss	Los	voraussehen"
\ No newline at end of file

package.json

 {
   "name": "tabooh",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/impressum/impressum.component.html

@@ -63,7 +63,7 @@
 <br>
 <div data-aos="zoom-out-right" data-aos-duration="250">
   <mat-card class="transparent">
-    <mat-card-subtitle>Tabooh-Version: 2.2.1</mat-card-subtitle>
+    <mat-card-subtitle>Tabooh-Version: 2.2.2</mat-card-subtitle>
     <mat-card-subtitle>Zuletzt geändert am: 11.04.2021</mat-card-subtitle>
     <mat-card-content>
       <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>

src/app/overview/overview.component.html

@@ -21,7 +21,7 @@
         <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
           <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
         </button>
-        <mat-icon *ngIf="view === 'mobileView'" class="peopleInSessionRight" matBadge="{{totalPlayers}}" matBadgeSize="small" matBadgeColor="primary" aria-hidden="false" aria-label="home icon blue">people</mat-icon>
+        <mat-icon *ngIf="view === 'mobileView'" class="peopleInSessionRight" matBadgeHidden="{{disablePlayersOnlineBadges}}" matBadge="{{totalPlayers}}" matBadgeSize="small" matBadgeColor="primary" aria-hidden="false" aria-label="home icon blue">people</mat-icon>
       </div>
       <br *ngIf="view === 'mobileView'">
       <br *ngIf="view === 'mobileView'">
@@ -30,17 +30,17 @@
           <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
         </button>
       </div>
-      <mat-icon *ngIf="view !== 'mobileView'" class="peopleInSessionRight" matBadge="{{totalPlayers}}" matBadgeSize="small" matBadgeColor="primary" aria-hidden="false" aria-label="home icon blue">people</mat-icon>
+      <mat-icon *ngIf="view !== 'mobileView'" class="peopleInSessionRight" matBadgeHidden="{{disablePlayersOnlineBadges}}" matBadge="{{totalPlayers}}" matBadgeSize="small" matBadgeColor="primary" aria-hidden="false" aria-label="home icon blue">people</mat-icon>
       <div class="CenterText">
         <h2 *ngIf="view === 'mobileView'" class="textMobileView">{{membership}}</h2>
         <h2 *ngIf="view !== 'mobileView'">{{membership}}</h2>
       </div>
     </div>
     <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
-      <mat-icon matBadge="{{redPlayers}}" matBadgeSize="small" matBadgeColor="primary" color = "warn" aria-hidden="false" aria-label="home icon red" >home</mat-icon>
+      <mat-icon matBadge="{{redPlayers}}" matBadgeHidden="{{disablePlayersOnlineBadges}}" matBadgeSize="small" matBadgeColor="primary" color = "warn" aria-hidden="false" aria-label="home icon red" >home</mat-icon>
     </button>
     <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
-      <mat-icon style="color: darkblue" matBadge="{{bluePlayers}}" matBadgeSize="small" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
+      <mat-icon style="color: darkblue" matBadgeHidden="{{disablePlayersOnlineBadges}}" matBadge="{{bluePlayers}}" matBadgeSize="small" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
     </button>
   </mat-card>
   <br>

src/app/overview/overview.component.scss

@@ -24,6 +24,10 @@ th{
   background-color: rgba(200, 0, 0, 0.3);
 }
 
+.floatLeft {
+  float: left;
+}
+
 .bluefont{
   margin: 5px;
   color: rgba(0,0,139);
@@ -50,7 +54,11 @@ th{
   align-items: center;
 }
 .newStartButtonLeft{float:left;width:100px;}
-.peopleInSessionRight{float:right; margin-top: 4px}
+.peopleInSessionRight{
+  position: absolute;
+  right: 10px;
+  margin-top: 4px;
+}
 .CenterText{margin:0 auto;width:250px;}
 
 .spinner-wrapper {
@@ -74,7 +82,3 @@ th{
 .textMobileView {
   display: inline;
 }
-
-.peopleRight {
-  float: right;
-}

src/app/overview/overview.component.ts

@@ -27,6 +27,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
   isActiveRound = false;
   red = 'choose';
   blue = 'choose';
+  disablePlayersOnlineBadges = true;
   totalPlayers = 1;
   redPlayers = 0;
   bluePlayers = 0;
@@ -133,6 +134,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
     this.subSessionPlayers = this.socketDataService.getSessionPlayers(this.sessionName)
       .pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
         if (data.hasOwnProperty('total')) {
+          this.disablePlayersOnlineBadges = false;
           this.totalPlayers = data.total;
           this.redPlayers = data.red;
           this.bluePlayers = data.blue;