From 6fb7b5e683c89691d1f4b88dc0d1a1f630c0211b Mon Sep 17 00:00:00 2001
From: Christian Opitz <git@c-opitz.de>
Date: Sun, 12 Nov 2023 19:36:24 +0100
Subject: [PATCH] verbessertes Spaltenlayout

---
 README.md   |   1 -
 src/App.vue | 242 ++++++++++++++++++++++++++--------------------------
 2 files changed, 122 insertions(+), 121 deletions(-)

diff --git a/README.md b/README.md
index e869094..495599e 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,5 @@ Gewonnen hat beim Standardspiel derjenige, der das letzte Hölzchen nimmt (vgl.
 
 
 ToDo:
-- Build-Pipeline
 - Thumbnail / Icon anpassen
 
diff --git a/src/App.vue b/src/App.vue
index dd26823..badacab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,133 +12,135 @@
 
   <br />
   <br />
-  <div class="grid-container-spalten-2">
-    <div class="grid-item-spalte" v-bind:class="[
-      { 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" v-bind:class="[
-      { aktiv: !this.wer_ist_dran_mensch },
-      {
-        inaktiv:
-          this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
-      },
-    ]">
-      <h3>KI</h3>
-    </div>
-
-    <div v-bind:class="[
-      { aktiv: this.wer_ist_dran_mensch },
-      {
-        inaktiv:
-          !this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
-      },
-    ]">
-      <template v-for="index in this.max_muenzen_pro_zug">
-        <button class="btn btn-primary" v-on:click="nimm(index, false)" :disabled="!wer_ist_dran_mensch"
-          v-show="index <= this.aktueller_muenzen_stand">
-          nimm {{ index }}
-        </button>
-        <br />
-      </template>
-    </div>
-
-    <div class="grid-container-spalten-3" v-bind:class="[
-      { aktiv: !this.wer_ist_dran_mensch },
-      { inaktiv: this.wer_ist_dran_mensch },
-      { inaktiv: this.wer_ist_dran_mensch == null },
-    ]">
-      <div class="grid-item-spalte" v-bind:class="[
-        { aktiv: !this.wer_ist_dran_mensch },
-        { inaktiv: this.wer_ist_dran_mensch },
-        { inaktiv: this.wer_ist_dran_mensch == null },
-      ]">
-        Anzahl Münzen
+  <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,
+    },
+  ]">
+        <h3>Mensch</h3>
       </div>
-      <div class="grid-item-spalte" v-bind:class="[
+      <div class="grid-item-spalte" style="border: 0px;" v-bind:class="[
         { aktiv: !this.wer_ist_dran_mensch },
-        { inaktiv: this.wer_ist_dran_mensch },
-        { inaktiv: this.wer_ist_dran_mensch == null },
+        {
+          inaktiv:
+            this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
+        },
       ]">
-        Mögliche Züge
-      </div>
-      <div class="grid-item-spalte" v-bind:class="[
-        { aktiv: !this.wer_ist_dran_mensch },
-        { inaktiv: this.wer_ist_dran_mensch },
-        { inaktiv: this.wer_ist_dran_mensch == null },
-      ]">
-        Gemerkter Zug
+        <h3>KI</h3>
       </div>
 
-      <template v-for="(element, element_index) in this.spielsituationen" :key="element.anzahl_muenzen">
-        <div class="grid-item-spalte" v-bind:class="[
-          {
-            aktiv:
-              !this.wer_ist_dran_mensch &&
-              element.anzahl_muenzen == this.aktueller_muenzen_stand,
-          },
-          {
-            inaktiv:
-              !this.wer_ist_dran_mensch &&
-              element.anzahl_muenzen != this.aktueller_muenzen_stand,
-          },
-        ]">
-          {{ element.anzahl_muenzen }}
-        </div>
-        <div class="grid-item-spalte" v-bind:class="[
-          {
-            aktiv:
-              !this.wer_ist_dran_mensch &&
-              element.anzahl_muenzen == this.aktueller_muenzen_stand,
-          },
-          {
-            inaktiv:
-              !this.wer_ist_dran_mensch &&
-              element.anzahl_muenzen != this.aktueller_muenzen_stand,
-          },
-        ]">
-          <template v-for="zug_moeglichkeit in element.moegliche_zuege">
-            <button class="btn btn-primary" v-on:click="nimm(zug_moeglichkeit, true)" :disabled="this.wer_ist_dran_mensch ||
-              element.anzahl_muenzen != this.aktueller_muenzen_stand
-              " v-show="zug_moeglichkeit <= element.anzahl_muenzen">
-              nimm {{ zug_moeglichkeit }}
-            </button>
-            <br />
-          </template>
-        </div>
-        <div class="grid-item-spalte" v-bind:class="[
-          {
-            aktiv:
-              !this.wer_ist_dran_mensch &&
-              element.anzahl_muenzen == this.aktueller_muenzen_stand,
-          },
-          {
-            inaktiv:
-              !this.wer_ist_dran_mensch &&
-              element.anzahl_muenzen != this.aktueller_muenzen_stand,
-          },
-        ]">
-
-          <button class="btn btn-primary" disabled v-show="element.gemerkter_zug > 0">
-            {{ this.gib_gemerkter_zug_ausgabe(element.gemerkter_zug) }}
+      <div style="border: 0px;" v-bind:class="[
+        { aktiv: this.wer_ist_dran_mensch },
+        {
+          inaktiv:
+            !this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
+        },
+      ]">
+        <br>
+        <template v-for="index in this.max_muenzen_pro_zug">
+          <button class="btn btn-primary" v-on:click="nimm(index, false)" :disabled="!wer_ist_dran_mensch"
+            v-show="index <= this.aktueller_muenzen_stand">
+            nimm {{ index }}
           </button>
+          <br />
+        </template>
+      </div>
+
+      <div class="grid-container-spalten-3" style="border: 0px;" v-bind:class="[
+        { aktiv: !this.wer_ist_dran_mensch },
+        { inaktiv: this.wer_ist_dran_mensch },
+        { inaktiv: this.wer_ist_dran_mensch == null },
+      ]">
+        <div class="grid-item-spalte" v-bind:class="[
+          { aktiv: !this.wer_ist_dran_mensch },
+          { inaktiv: this.wer_ist_dran_mensch },
+          { inaktiv: this.wer_ist_dran_mensch == null },
+        ]">
+          Anzahl Münzen
         </div>
-      </template>
+        <div class="grid-item-spalte" v-bind:class="[
+          { aktiv: !this.wer_ist_dran_mensch },
+          { inaktiv: this.wer_ist_dran_mensch },
+          { inaktiv: this.wer_ist_dran_mensch == null },
+        ]">
+          Mögliche Züge
+        </div>
+        <div class="grid-item-spalte" v-bind:class="[
+          { aktiv: !this.wer_ist_dran_mensch },
+          { inaktiv: this.wer_ist_dran_mensch },
+          { inaktiv: this.wer_ist_dran_mensch == null },
+        ]">
+          Gemerkter Zug
+        </div>
+
+        <template v-for="(element, element_index) in this.spielsituationen" :key="element.anzahl_muenzen">
+          <div class="grid-item-spalte" v-bind:class="[
+            {
+              aktiv:
+                !this.wer_ist_dran_mensch &&
+                element.anzahl_muenzen == this.aktueller_muenzen_stand,
+            },
+            {
+              inaktiv:
+                !this.wer_ist_dran_mensch &&
+                element.anzahl_muenzen != this.aktueller_muenzen_stand,
+            },
+          ]">
+            {{ element.anzahl_muenzen }}
+          </div>
+          <div class="grid-item-spalte" v-bind:class="[
+            {
+              aktiv:
+                !this.wer_ist_dran_mensch &&
+                element.anzahl_muenzen == this.aktueller_muenzen_stand,
+            },
+            {
+              inaktiv:
+                !this.wer_ist_dran_mensch &&
+                element.anzahl_muenzen != this.aktueller_muenzen_stand,
+            },
+          ]">
+            <template v-for="zug_moeglichkeit in element.moegliche_zuege">
+              <button class="btn btn-primary" v-on:click="nimm(zug_moeglichkeit, true)" :disabled="this.wer_ist_dran_mensch ||
+                element.anzahl_muenzen != this.aktueller_muenzen_stand
+                " v-show="zug_moeglichkeit <= element.anzahl_muenzen">
+                nimm {{ zug_moeglichkeit }}
+              </button>
+              <br />
+            </template>
+          </div>
+          <div class="grid-item-spalte" v-bind:class="[
+            {
+              aktiv:
+                !this.wer_ist_dran_mensch &&
+                element.anzahl_muenzen == this.aktueller_muenzen_stand,
+            },
+            {
+              inaktiv:
+                !this.wer_ist_dran_mensch &&
+                element.anzahl_muenzen != this.aktueller_muenzen_stand,
+            },
+          ]">
+
+            <button class="btn btn-primary" disabled v-show="element.gemerkter_zug > 0">
+              {{ this.gib_gemerkter_zug_ausgabe(element.gemerkter_zug) }}
+            </button>
+          </div>
+        </template>
+      </div>
     </div>
   </div>
 
   <br />
   <DIV style="white-space: pre-wrap;">
-  {{ this.ausgabe }}
+    {{ this.ausgabe }}
   </DIV>
   <br />
-  <br />
-  <br />
+
 
   <button class="btn btn-primary" @click="neuer_spieldurchgang">
     neues Spiel (Münzstand zurücksetzen)
@@ -242,7 +244,7 @@ export default {
     initialisiere_spiel() {
       this.wer_ist_dran_mensch = true;
       this.aktueller_muenzen_stand = this.zustaende;
-      this.ausgabe = "Spiel läuft";
+      this.ausgabe = "Das Spiel läuft.";
       this.spielsituationen = [];
       let zug_moeglichkeiten = [];
       for (let i = 1; i <= this.max_muenzen_pro_zug; i++) {
@@ -295,7 +297,7 @@ export default {
 
         if (
           this.aktueller_muenzen_stand <= 0 ||
-          this.wer_ist_dran_mensch && 
+          this.wer_ist_dran_mensch &&
           this.spielsituationen[
             this.spielsituationen.length - this.aktueller_muenzen_stand
           ].moegliche_zuege.length == 0
@@ -522,14 +524,14 @@ export default {
 .grid-container-spalten-2 {
   display: grid;
   grid-template-columns: auto auto;
-  background-color: #2196f3;
+  /* background-color: #2196f3; */
   padding: 2px;
 }
 
 .grid-container-spalten-3 {
   display: grid;
   grid-template-columns: auto auto auto;
-  background-color: #2196f3;
+  /* background-color: #2196f3; */
   padding: 2px;
 }
 
@@ -545,13 +547,13 @@ export default {
   /*color: lightgreen;*/
   color: black;
   background-color: lightgreen;
-  border: 1px solid lightgreen;
+  border: 1px solid white;
 }
 
 .inaktiv {
   /* color: grey;*/
   color: black;
-  background-color: lightgray;
-  border: 1px solid lightgray;
+  background-color: rgb(211, 211, 211, 0.8);
+  border: 1px solid white;
 }
 </style>