Mensch und KI beginnen in jeder Spielrunde abwechselnd. Layoutverbesserungen.
All checks were successful
ci/woodpecker/push/default Pipeline was successful
All checks were successful
ci/woodpecker/push/default Pipeline was successful
This commit is contained in:
parent
6576aeeebc
commit
0c10bc9df9
1 changed files with 116 additions and 162 deletions
278
src/App.vue
278
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>
|
||||
|
||||
<b style="font-size: xx-large">{{ this.zustaende }}</b
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="update_anzahl_muenzen(++this.zustaende)"
|
||||
>
|
||||
<b style="font-size: xx-large">{{ this.zustaende }}</b>
|
||||
<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>
|
||||
|
||||
<b style="font-size: xx-large">{{ this.max_muenzen_pro_zug }}</b>
|
||||
|
||||
<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 "";
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue