From 0c10bc9df9bf05407ba98c2d4cab3ccbcc718431 Mon Sep 17 00:00:00 2001
From: Christian Opitz <git@c-opitz.de>
Date: Sun, 12 Nov 2023 12:01:59 +0100
Subject: [PATCH] Mensch und KI beginnen in jeder Spielrunde abwechselnd.
 Layoutverbesserungen.

---
 src/App.vue | 278 ++++++++++++++++++++++------------------------------
 1 file changed, 116 insertions(+), 162 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5adfe57..dd26823 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,10 @@
 <template>
   <h2>
-    Wer die letzte Münze nimmt, gewinnt.<br />
-    Trainiere die KI!
+    Wer die letzte Münze nimmt, gewinnt.
   </h2>
+  <h4>
+    Trainiere die KI und beobachte, was mit den gemerkten Zügen der KI passiert!
+  </h4>
 
   <br />
   <H3>Münzen:</H3>
@@ -11,168 +13,129 @@
   <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,
-        },
-      ]"
-    >
+    <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,
-        },
-      ]"
-    >
+    <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,
-        },
-      ]"
-    >
+    <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"
-        >
+        <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="[
+    <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 },
-      ]"
-    >
-      <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>
-      <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 },
-        ]"
-      >
+      <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 },
-        ]"
-      >
+      <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,
-            },
-          ]"
-        >
+      <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,
-            },
-          ]"
-        >
+        <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 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,
-            },
-          ]"
-        >
+        <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>
+          <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>
 
   <br />
+  <DIV style="white-space: pre-wrap;">
   {{ this.ausgabe }}
+  </DIV>
   <br />
   <br />
   <br />
@@ -192,11 +155,7 @@
     <div class="content" id="content0" style="text-align: center">
       <br />
 
-      <button
-        class="btn btn-primary"
-        style="background-color: red"
-        @click="initialisiere_spiel"
-      >
+      <button class="btn btn-primary" style="background-color: red" @click="initialisiere_spiel">
         Alle gelernten KI-Züge löschen.
       </button>
       <br />
@@ -209,19 +168,12 @@
         <div class="column" style="text-align: center">
           <h3>Münzenanzahl</h3>
 
-          <button
-            class="btn btn-primary"
-            @click="update_anzahl_muenzen(--this.zustaende)"
-          >
+          <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)"
-          >
+          <b style="font-size: xx-large">{{ this.zustaende }}</b>&nbsp;
+          <button class="btn btn-primary" @click="update_anzahl_muenzen(++this.zustaende)">
             +
           </button>
 
@@ -232,19 +184,13 @@
         <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 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 class="btn btn-primary" @click="update_max_muenzen_pro_zug(++this.max_muenzen_pro_zug)">
             +
           </button>
           <br />
@@ -267,9 +213,10 @@ export default {
   data() {
     return {
       wer_ist_dran_mensch: true,
+      wer_hat_zuletzt_angefangen: true,
       aktueller_muenzen_stand: 4,
       zustaende: 4,
-      max_muenzen_pro_zug: 3,
+      max_muenzen_pro_zug: 2,
       spielsituationen: [],
       letzter_gewinner_mensch: null,
       ausgabe: "",
@@ -314,17 +261,23 @@ export default {
     },
 
     neuer_spieldurchgang() {
-      this.aktueller_muenzen_stand = this.zustaende;
-      console.log("letzter gewinner: " + this.letzter_gewinner_mensch);
+
       if (this.letzter_gewinner_mensch) {
         this.loesche_gemerkten_zug();
       } else {
         this.reset_gemerkten_zug();
       }
 
-      this.wer_ist_dran_mensch = true;
+
+      this.aktueller_muenzen_stand = this.zustaende;
+
+      this.wer_ist_dran_mensch = !this.wer_hat_zuletzt_angefangen;
+      this.wer_hat_zuletzt_angefangen = this.wer_ist_dran_mensch;
       this.letzter_gewinner_mensch = null;
       this.ausgabe = "Spiel läuft";
+
+
+
     },
 
     nimm(anzahl, ki_zug) {
@@ -338,16 +291,17 @@ export default {
           this.merke_zug(alter_muenzen_stand, anzahl);
           wer = "Die KI";
         }
-        this.ausgabe = wer + " hat im letzten Zug " + this.gib_muenztext(anzahl) + " genommen. ";
-        
+        this.ausgabe = wer + " hat im letzten Zug " + this.gib_muenztext(anzahl) + " genommen.";
+
         if (
           this.aktueller_muenzen_stand <= 0 ||
+          this.wer_ist_dran_mensch && 
           this.spielsituationen[
             this.spielsituationen.length - this.aktueller_muenzen_stand
           ].moegliche_zuege.length == 0
         ) {
           this.letzter_gewinner_mensch = this.wer_ist_dran_mensch;
-          this.ausgabe += "Spielende: " + wer + " hat gewonnen.";
+          this.ausgabe += " \n \n Spielende: " + wer + " hat gewonnen.";
           this.wer_ist_dran_mensch = null;
         } else {
           this.wer_ist_dran_mensch = !this.wer_ist_dran_mensch;
@@ -407,15 +361,15 @@ export default {
       if (anzahl == 1) {
         rueckgabe = "1 Münze";
       }
-      
+
       return rueckgabe;
     },
     gib_gemerkter_zug_ausgabe(anzahl) {
       if (anzahl > 0) {
-            return "nimm " + this.gib_muenztext(anzahl);
-          } else {
-            return "";
-          }
+        return "nimm " + this.gib_muenztext(anzahl);
+      } else {
+        return "";
+      }
     },
   },