Ich hab da noch mehr Much

src/pages/RechnerSeite.vue

@@ -27,6 +27,24 @@
 							@click="personHinzufügen"
 						/>
 					</q-card-actions>
+
+					<q-card-section>
+						<q-checkbox
+							v-model="witzigeEffekte"
+							label="Witzige Effekte"
+						/>
+						<q-slider
+							v-model="FAULERDISKORUTSCHER"
+							:min="100"
+							:max="2000"
+							:step="50"
+							:disable="!witzigeEffekte"
+							snap
+							label
+							:label-value="FAULERDISKORUTSCHER + 'ms'"
+							@change="faulerWert => { DISKORUTSCHER = faulerWert }"
+						/>
+					</q-card-section>
 				</q-card>
 			</div>
 
@@ -51,21 +69,19 @@
 						virtual-scroll
 					>
 						<template #body-cell-geblecht="props">
-							<q-td :props="props">
+							<q-td
+								v-if="props.row.geblecht.length && witzigeEffekte"
+								:props="props"
+								class="cursor-pointer ichGehInDieDisko"
+								@click="blechGesprächÖffnen(props.key)"
+							>
+								{{ props.value }}
+							</q-td>
+							<q-td
+								v-else
+								:props="props"
+							>
 								{{ props.value }}
-								<q-tooltip
-									anchor="top middle"
-									class="bg-indigo"
-								>
-									<span
-										v-for="blech in blechGründe(props.key)"
-										:key="blech.grund"
-										class="text-subtitle2"
-									>
-										<strong>{{ blech.grund }}:</strong> {{ gleitzahlenAnalysierer(blech.geld) }} €
-										<br>
-									</span>
-								</q-tooltip>
 							</q-td>
 						</template>
 					</q-table>
@@ -150,12 +166,19 @@
 						<!-- ZÜRLEDIGEN: Gespräch / Platzen-Hoch mit den einzelnen Blechwerten  -->
 						<template #body-cell-geblecht="props">
 							<q-td
+								v-if="props.row.geblecht.length && witzigeEffekte"
 								:props="props"
-								class="cursor-pointer"
+								class="cursor-pointer ichGehInDieDisko"
 								@click="blechGesprächÖffnen(props.key)"
 							>
 								{{ props.value }}
 							</q-td>
+							<q-td
+								v-else
+								:props="props"
+							>
+								{{ props.value }}
+							</q-td>
 						</template>
 					</q-table>
 				</q-card>
@@ -206,6 +229,18 @@ const grundEingabeFeld = ref('');
 const blechGespräch = ref(false);
 const blechGesprächPerson = ref(null);
 
+const witzigeEffekte = ref(false);
+const FAULERDISKORUTSCHER = ref(1000);
+const DISKORUTSCHER = ref(1000);
+
+const blechDiskoGeschwindigkeit = computed(() => {
+	return `${DISKORUTSCHER.value * 5}ms`;
+});
+
+const schuldenDiskoGeschwindigkeit = computed(() => {
+	return `${DISKORUTSCHER.value}ms`;
+});
+
 function blechGesprächÖffnen (nameDerPerson) {
 	blechGespräch.value = true;
 	blechGesprächPerson.value = nameDerPerson;
@@ -229,9 +264,9 @@ onMounted(() => {
 	}
 });
 
-function blechGründe (nameDerPerson) {
-	return personen.value[nameDerPerson].geblecht;
-}
+// function blechGründe (nameDerPerson) {
+// 	return personen.value[nameDerPerson].geblecht;
+// }
 
 function speicherLeute () {
 	localStorage.setItem('personen', JSON.stringify(personen.value));
@@ -323,6 +358,13 @@ const tabellenSpalten = computed(() => {
 		cols.push({
 			name: `an-${name}`,
 			label: `An ${name}`,
+			classes: reihe => witzigeEffekte.value && reihe.an[name] ? 'duMusstNochGeldZahlenDuLackaffe' : '',
+			// classes: reihe => {
+			// 	if (!witzigeEffekte.value) return '';
+			// 	if (!reihe.an[name]) return '';
+			
+			// 	return DISKOMODUS.value ? 'ZAHLMIRENDLICHDASGELDDUAFFE' : 'duMusstNochGeldZahlenDuLackaffe';
+			// },
 			field: reihe => reihe.an[name],
 			format: (reihenWert) => reihenWert ? `${gleitzahlenAnalysierer(reihenWert) || '0.00'} €` : '',
 		});
@@ -349,7 +391,7 @@ function reihenRechner () {
 		for(const [nameDerAnderenPerson, datenDerAnderenPerson] of personenEinträge) {
 			if (name === nameDerAnderenPerson) continue;
 
-			const blechTeiler = datenDerAnderenPerson.geblecht / Object.keys(personen.value).length;
+			const blechTeiler = blechSumme(datenDerAnderenPerson.geblecht) / Object.keys(personen.value).length;
 			personenObjekt.an[nameDerAnderenPerson] = blechTeiler;
 		}
 
@@ -402,3 +444,37 @@ const personenAuswahlMöglichkeiten = computed(() => {
 });
 
 </script>
+
+<style>
+.ichGehInDieDisko {
+	animation: diskoNeu v-bind(blechDiskoGeschwindigkeit) linear infinite;
+	background: linear-gradient(238deg, #7c4200, #760043, #4c007e, #001f86, #005a68, #194830);
+	background-size: 1200% 1200%;
+}
+
+/* .ICHBINSOHARTINDERDISKOBRUDIALTERDIGGA {
+	animation: diskoNeu 1s linear infinite;
+	background: linear-gradient(238deg, #7c4200, #760043, #4c007e, #001f86, #005a68, #194830);
+	background-size: 1200% 1200%;
+} */
+
+.duMusstNochGeldZahlenDuLackaffe {
+	animation: schuldenDisko v-bind(schuldenDiskoGeschwindigkeit) linear infinite;
+}
+
+/* .ZAHLMIRENDLICHDASGELDDUAFFE {
+	animation: schuldenDisko 0.25s linear infinite;
+} */
+
+@keyframes diskoNeu {
+  0% { background-position: 0% 50% }
+  50% { background-position: 100% 50% }
+  100% { background-position: 0% 50% }
+}
+
+@keyframes schuldenDisko {
+  0% { background-color: rgb(100, 0, 0); }
+  50% { background-color: black; }
+  100% { background-color: rgb(100, 0, 0); }
+}
+</style>