From 2e35ebd9534b6138f597b94d65884059de3897db Mon Sep 17 00:00:00 2001
From: Christian Opitz <git@c-opitz.de>
Date: Sun, 12 Nov 2023 19:51:48 +0100
Subject: [PATCH] verbessertes responsives Layout

---
 src/App.vue | 122 +++++++++++++++++++++++++++-------------------------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index badacab..5229830 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,12 +15,12 @@
   <div style="display: flex; justify-content: center; align-items: center;">
     <div class="grid-container-spalten-2" style="max-width: 800px;">
       <div class="grid-item-spalte" style="border: 0px; padding-left: 20px; padding-right: 20px;" v-bind:class="[
-    { aktiv: this.wer_ist_dran_mensch },
-    {
-      inaktiv:
-        !this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
-    },
-  ]">
+        { aktiv: this.wer_ist_dran_mensch },
+        {
+          inaktiv:
+            !this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
+        },
+      ]">
         <h3>Mensch</h3>
       </div>
       <div class="grid-item-spalte" style="border: 0px;" v-bind:class="[
@@ -137,72 +137,76 @@
 
   <br />
   <DIV style="white-space: pre-wrap;">
-    {{ this.ausgabe }}
-  </DIV>
-  <br />
+      {{ this.ausgabe }}
+    </DIV>
+    <br />
 
 
-  <button class="btn btn-primary" @click="neuer_spieldurchgang">
-    neues Spiel (Münzstand zurücksetzen)
-  </button>
-
-  <br />
-  <br />
-  <br />
-
-  <div style="width: 800px; margin: auto">
-    <button class="btn btn-primary collapsible" style="background: grey">
-      Vertiefung: weitere Einstellungsmöglichkeiten
+    <button class="btn btn-primary" @click="neuer_spieldurchgang">
+      neues Spiel (Münzstand zurücksetzen)
     </button>
-    <div class="content" id="content0" style="text-align: center">
-      <br />
 
-      <button class="btn btn-primary" style="background-color: red" @click="initialisiere_spiel">
-        Alle gelernten KI-Züge löschen.
+    <br />
+    <br />
+    <br />
+
+
+  <div style="display: flex; justify-content: center; align-items: center;">
+
+    <div style="max-width: 800px; margin: auto">
+      <button class="btn btn-primary collapsible" style="background: grey">
+        Vertiefung: weitere Einstellungsmöglichkeiten
       </button>
-      <br />
+      <div class="content" id="content0" style="text-align: center">
+        <br />
 
-      <br />
-      <hr />
-      <br />
-      Durch jede Änderung werden die gelernten KI-Züge werden gelöscht.
-      <div class="row">
-        <div class="column" style="text-align: center">
-          <h3>Münzenanzahl</h3>
+        <button class="btn btn-primary" style="background-color: red" @click="initialisiere_spiel">
+          Alle gelernten KI-Züge löschen.
+        </button>
+        <br />
 
-          <button class="btn btn-primary" @click="update_anzahl_muenzen(--this.zustaende)">
-            -
-          </button>
-          &nbsp;
-          <b style="font-size: xx-large">{{ this.zustaende }}</b>&nbsp;
-          <button class="btn btn-primary" @click="update_anzahl_muenzen(++this.zustaende)">
-            +
-          </button>
+        <br />
+        <hr />
+        <br />
+        Durch jede Änderung werden die gelernten KI-Züge werden gelöscht.
+        <div class="row">
+          <div class="column" style="text-align: center">
+            <h3>Münzenanzahl</h3>
 
-          <br />
-          <br />
-        </div>
+            <button class="btn btn-primary" @click="update_anzahl_muenzen(--this.zustaende)">
+              -
+            </button>
+            &nbsp;
+            <b style="font-size: xx-large">{{ this.zustaende }}</b>&nbsp;
+            <button class="btn btn-primary" @click="update_anzahl_muenzen(++this.zustaende)">
+              +
+            </button>
 
-        <div class="column" style="text-align: center">
-          <h3>max. Münzen pro Zug</h3>
+            <br />
+            <br />
+          </div>
 
-          <button class="btn btn-primary" @click="update_max_muenzen_pro_zug(--this.max_muenzen_pro_zug)">
-            -
-          </button>
-          &nbsp;
-          <b style="font-size: xx-large">{{ this.max_muenzen_pro_zug }}</b>
-          &nbsp;
-          <button class="btn btn-primary" @click="update_max_muenzen_pro_zug(++this.max_muenzen_pro_zug)">
-            +
-          </button>
-          <br />
-          <br />
+          <div class="column" style="text-align: center">
+            <h3>max. Münzen pro Zug</h3>
+
+            <button class="btn btn-primary" @click="update_max_muenzen_pro_zug(--this.max_muenzen_pro_zug)">
+              -
+            </button>
+            &nbsp;
+            <b style="font-size: xx-large">{{ this.max_muenzen_pro_zug }}</b>
+            &nbsp;
+            <button class="btn btn-primary" @click="update_max_muenzen_pro_zug(++this.max_muenzen_pro_zug)">
+              +
+            </button>
+            <br />
+            <br />
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <br />
-  <br />
+    <br />
+    <br />
+  </DIV>
 </template>
 
 <script>