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>
|
<template>
|
||||||
<h2>
|
<h2>
|
||||||
Wer die letzte Münze nimmt, gewinnt.<br />
|
Wer die letzte Münze nimmt, gewinnt.
|
||||||
Trainiere die KI!
|
|
||||||
</h2>
|
</h2>
|
||||||
|
<h4>
|
||||||
|
Trainiere die KI und beobachte, was mit den gemerkten Zügen der KI passiert!
|
||||||
|
</h4>
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
<H3>Münzen:</H3>
|
<H3>Münzen:</H3>
|
||||||
|
|
@ -11,168 +13,129 @@
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
<div class="grid-container-spalten-2">
|
<div class="grid-container-spalten-2">
|
||||||
<div
|
<div class="grid-item-spalte" v-bind:class="[
|
||||||
class="grid-item-spalte"
|
{ aktiv: this.wer_ist_dran_mensch },
|
||||||
v-bind:class="[
|
{
|
||||||
{ aktiv: this.wer_ist_dran_mensch },
|
inaktiv:
|
||||||
{
|
!this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
|
||||||
inaktiv:
|
},
|
||||||
!this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
|
]">
|
||||||
},
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<h3>Mensch</h3>
|
<h3>Mensch</h3>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="grid-item-spalte" v-bind:class="[
|
||||||
class="grid-item-spalte"
|
{ aktiv: !this.wer_ist_dran_mensch },
|
||||||
v-bind:class="[
|
{
|
||||||
{ aktiv: !this.wer_ist_dran_mensch },
|
inaktiv:
|
||||||
{
|
this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
|
||||||
inaktiv:
|
},
|
||||||
this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
|
]">
|
||||||
},
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<h3>KI</h3>
|
<h3>KI</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div v-bind:class="[
|
||||||
v-bind:class="[
|
{ aktiv: this.wer_ist_dran_mensch },
|
||||||
{ aktiv: this.wer_ist_dran_mensch },
|
{
|
||||||
{
|
inaktiv:
|
||||||
inaktiv:
|
!this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
|
||||||
!this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
|
},
|
||||||
},
|
]">
|
||||||
]"
|
|
||||||
>
|
|
||||||
<template v-for="index in this.max_muenzen_pro_zug">
|
<template v-for="index in this.max_muenzen_pro_zug">
|
||||||
<button class="btn btn-primary"
|
<button class="btn btn-primary" v-on:click="nimm(index, false)" :disabled="!wer_ist_dran_mensch"
|
||||||
v-on:click="nimm(index, false)"
|
v-show="index <= this.aktueller_muenzen_stand">
|
||||||
:disabled="!wer_ist_dran_mensch"
|
|
||||||
v-show="index <= this.aktueller_muenzen_stand"
|
|
||||||
>
|
|
||||||
nimm {{ index }}
|
nimm {{ index }}
|
||||||
</button>
|
</button>
|
||||||
<br />
|
<br />
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div class="grid-container-spalten-3" v-bind:class="[
|
||||||
class="grid-container-spalten-3"
|
{ aktiv: !this.wer_ist_dran_mensch },
|
||||||
v-bind:class="[
|
{ 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 },
|
{ aktiv: !this.wer_ist_dran_mensch },
|
||||||
{ inaktiv: this.wer_ist_dran_mensch },
|
{ inaktiv: this.wer_ist_dran_mensch },
|
||||||
{ inaktiv: this.wer_ist_dran_mensch == null },
|
{ 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
|
Anzahl Münzen
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="grid-item-spalte" v-bind:class="[
|
||||||
class="grid-item-spalte"
|
{ aktiv: !this.wer_ist_dran_mensch },
|
||||||
v-bind:class="[
|
{ inaktiv: this.wer_ist_dran_mensch },
|
||||||
{ aktiv: !this.wer_ist_dran_mensch },
|
{ inaktiv: this.wer_ist_dran_mensch == null },
|
||||||
{ inaktiv: this.wer_ist_dran_mensch },
|
]">
|
||||||
{ inaktiv: this.wer_ist_dran_mensch == null },
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
Mögliche Züge
|
Mögliche Züge
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="grid-item-spalte" v-bind:class="[
|
||||||
class="grid-item-spalte"
|
{ aktiv: !this.wer_ist_dran_mensch },
|
||||||
v-bind:class="[
|
{ inaktiv: this.wer_ist_dran_mensch },
|
||||||
{ aktiv: !this.wer_ist_dran_mensch },
|
{ inaktiv: this.wer_ist_dran_mensch == null },
|
||||||
{ inaktiv: this.wer_ist_dran_mensch },
|
]">
|
||||||
{ inaktiv: this.wer_ist_dran_mensch == null },
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
Gemerkter Zug
|
Gemerkter Zug
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template
|
<template v-for="(element, element_index) in this.spielsituationen" :key="element.anzahl_muenzen">
|
||||||
v-for="(element, element_index) in this.spielsituationen"
|
<div class="grid-item-spalte" v-bind:class="[
|
||||||
:key="element.anzahl_muenzen"
|
{
|
||||||
>
|
aktiv:
|
||||||
<div
|
!this.wer_ist_dran_mensch &&
|
||||||
class="grid-item-spalte"
|
element.anzahl_muenzen == this.aktueller_muenzen_stand,
|
||||||
v-bind:class="[
|
},
|
||||||
{
|
{
|
||||||
aktiv:
|
inaktiv:
|
||||||
!this.wer_ist_dran_mensch &&
|
!this.wer_ist_dran_mensch &&
|
||||||
element.anzahl_muenzen == this.aktueller_muenzen_stand,
|
element.anzahl_muenzen != this.aktueller_muenzen_stand,
|
||||||
},
|
},
|
||||||
{
|
]">
|
||||||
inaktiv:
|
|
||||||
!this.wer_ist_dran_mensch &&
|
|
||||||
element.anzahl_muenzen != this.aktueller_muenzen_stand,
|
|
||||||
},
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
{{ element.anzahl_muenzen }}
|
{{ element.anzahl_muenzen }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="grid-item-spalte" v-bind:class="[
|
||||||
class="grid-item-spalte"
|
{
|
||||||
v-bind:class="[
|
aktiv:
|
||||||
{
|
!this.wer_ist_dran_mensch &&
|
||||||
aktiv:
|
element.anzahl_muenzen == this.aktueller_muenzen_stand,
|
||||||
!this.wer_ist_dran_mensch &&
|
},
|
||||||
element.anzahl_muenzen == this.aktueller_muenzen_stand,
|
{
|
||||||
},
|
inaktiv:
|
||||||
{
|
!this.wer_ist_dran_mensch &&
|
||||||
inaktiv:
|
element.anzahl_muenzen != this.aktueller_muenzen_stand,
|
||||||
!this.wer_ist_dran_mensch &&
|
},
|
||||||
element.anzahl_muenzen != this.aktueller_muenzen_stand,
|
]">
|
||||||
},
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<template v-for="zug_moeglichkeit in element.moegliche_zuege">
|
<template v-for="zug_moeglichkeit in element.moegliche_zuege">
|
||||||
<button class="btn btn-primary"
|
<button class="btn btn-primary" v-on:click="nimm(zug_moeglichkeit, true)" :disabled="this.wer_ist_dran_mensch ||
|
||||||
v-on:click="nimm(zug_moeglichkeit, true)"
|
element.anzahl_muenzen != this.aktueller_muenzen_stand
|
||||||
:disabled="
|
" v-show="zug_moeglichkeit <= element.anzahl_muenzen">
|
||||||
this.wer_ist_dran_mensch ||
|
nimm {{ zug_moeglichkeit }}
|
||||||
element.anzahl_muenzen != this.aktueller_muenzen_stand
|
|
||||||
"
|
|
||||||
v-show="zug_moeglichkeit <= element.anzahl_muenzen"
|
|
||||||
>
|
|
||||||
nimm {{ zug_moeglichkeit }}
|
|
||||||
</button>
|
</button>
|
||||||
<br />
|
<br />
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="grid-item-spalte" v-bind:class="[
|
||||||
class="grid-item-spalte"
|
{
|
||||||
v-bind:class="[
|
aktiv:
|
||||||
{
|
!this.wer_ist_dran_mensch &&
|
||||||
aktiv:
|
element.anzahl_muenzen == this.aktueller_muenzen_stand,
|
||||||
!this.wer_ist_dran_mensch &&
|
},
|
||||||
element.anzahl_muenzen == this.aktueller_muenzen_stand,
|
{
|
||||||
},
|
inaktiv:
|
||||||
{
|
!this.wer_ist_dran_mensch &&
|
||||||
inaktiv:
|
element.anzahl_muenzen != this.aktueller_muenzen_stand,
|
||||||
!this.wer_ist_dran_mensch &&
|
},
|
||||||
element.anzahl_muenzen != this.aktueller_muenzen_stand,
|
]">
|
||||||
},
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
|
|
||||||
<button class="btn btn-primary"
|
<button class="btn btn-primary" disabled v-show="element.gemerkter_zug > 0">
|
||||||
disabled v-show="element.gemerkter_zug > 0">
|
{{ this.gib_gemerkter_zug_ausgabe(element.gemerkter_zug) }}
|
||||||
{{ this.gib_gemerkter_zug_ausgabe(element.gemerkter_zug) }}
|
</button>
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
|
<DIV style="white-space: pre-wrap;">
|
||||||
{{ this.ausgabe }}
|
{{ this.ausgabe }}
|
||||||
|
</DIV>
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
|
|
@ -192,11 +155,7 @@
|
||||||
<div class="content" id="content0" style="text-align: center">
|
<div class="content" id="content0" style="text-align: center">
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<button
|
<button class="btn btn-primary" style="background-color: red" @click="initialisiere_spiel">
|
||||||
class="btn btn-primary"
|
|
||||||
style="background-color: red"
|
|
||||||
@click="initialisiere_spiel"
|
|
||||||
>
|
|
||||||
Alle gelernten KI-Züge löschen.
|
Alle gelernten KI-Züge löschen.
|
||||||
</button>
|
</button>
|
||||||
<br />
|
<br />
|
||||||
|
|
@ -209,19 +168,12 @@
|
||||||
<div class="column" style="text-align: center">
|
<div class="column" style="text-align: center">
|
||||||
<h3>Münzenanzahl</h3>
|
<h3>Münzenanzahl</h3>
|
||||||
|
|
||||||
<button
|
<button class="btn btn-primary" @click="update_anzahl_muenzen(--this.zustaende)">
|
||||||
class="btn btn-primary"
|
|
||||||
@click="update_anzahl_muenzen(--this.zustaende)"
|
|
||||||
>
|
|
||||||
-
|
-
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<b style="font-size: xx-large">{{ this.zustaende }}</b
|
<b style="font-size: xx-large">{{ this.zustaende }}</b>
|
||||||
>
|
<button class="btn btn-primary" @click="update_anzahl_muenzen(++this.zustaende)">
|
||||||
<button
|
|
||||||
class="btn btn-primary"
|
|
||||||
@click="update_anzahl_muenzen(++this.zustaende)"
|
|
||||||
>
|
|
||||||
+
|
+
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
@ -232,19 +184,13 @@
|
||||||
<div class="column" style="text-align: center">
|
<div class="column" style="text-align: center">
|
||||||
<h3>max. Münzen pro Zug</h3>
|
<h3>max. Münzen pro Zug</h3>
|
||||||
|
|
||||||
<button
|
<button class="btn btn-primary" @click="update_max_muenzen_pro_zug(--this.max_muenzen_pro_zug)">
|
||||||
class="btn btn-primary"
|
|
||||||
@click="update_max_muenzen_pro_zug(--this.max_muenzen_pro_zug)"
|
|
||||||
>
|
|
||||||
-
|
-
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<b style="font-size: xx-large">{{ this.max_muenzen_pro_zug }}</b>
|
<b style="font-size: xx-large">{{ this.max_muenzen_pro_zug }}</b>
|
||||||
|
|
||||||
<button
|
<button class="btn btn-primary" @click="update_max_muenzen_pro_zug(++this.max_muenzen_pro_zug)">
|
||||||
class="btn btn-primary"
|
|
||||||
@click="update_max_muenzen_pro_zug(++this.max_muenzen_pro_zug)"
|
|
||||||
>
|
|
||||||
+
|
+
|
||||||
</button>
|
</button>
|
||||||
<br />
|
<br />
|
||||||
|
|
@ -267,9 +213,10 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
wer_ist_dran_mensch: true,
|
wer_ist_dran_mensch: true,
|
||||||
|
wer_hat_zuletzt_angefangen: true,
|
||||||
aktueller_muenzen_stand: 4,
|
aktueller_muenzen_stand: 4,
|
||||||
zustaende: 4,
|
zustaende: 4,
|
||||||
max_muenzen_pro_zug: 3,
|
max_muenzen_pro_zug: 2,
|
||||||
spielsituationen: [],
|
spielsituationen: [],
|
||||||
letzter_gewinner_mensch: null,
|
letzter_gewinner_mensch: null,
|
||||||
ausgabe: "",
|
ausgabe: "",
|
||||||
|
|
@ -314,17 +261,23 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
neuer_spieldurchgang() {
|
neuer_spieldurchgang() {
|
||||||
this.aktueller_muenzen_stand = this.zustaende;
|
|
||||||
console.log("letzter gewinner: " + this.letzter_gewinner_mensch);
|
|
||||||
if (this.letzter_gewinner_mensch) {
|
if (this.letzter_gewinner_mensch) {
|
||||||
this.loesche_gemerkten_zug();
|
this.loesche_gemerkten_zug();
|
||||||
} else {
|
} else {
|
||||||
this.reset_gemerkten_zug();
|
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.letzter_gewinner_mensch = null;
|
||||||
this.ausgabe = "Spiel läuft";
|
this.ausgabe = "Spiel läuft";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
nimm(anzahl, ki_zug) {
|
nimm(anzahl, ki_zug) {
|
||||||
|
|
@ -338,16 +291,17 @@ export default {
|
||||||
this.merke_zug(alter_muenzen_stand, anzahl);
|
this.merke_zug(alter_muenzen_stand, anzahl);
|
||||||
wer = "Die KI";
|
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 (
|
if (
|
||||||
this.aktueller_muenzen_stand <= 0 ||
|
this.aktueller_muenzen_stand <= 0 ||
|
||||||
|
this.wer_ist_dran_mensch &&
|
||||||
this.spielsituationen[
|
this.spielsituationen[
|
||||||
this.spielsituationen.length - this.aktueller_muenzen_stand
|
this.spielsituationen.length - this.aktueller_muenzen_stand
|
||||||
].moegliche_zuege.length == 0
|
].moegliche_zuege.length == 0
|
||||||
) {
|
) {
|
||||||
this.letzter_gewinner_mensch = this.wer_ist_dran_mensch;
|
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;
|
this.wer_ist_dran_mensch = null;
|
||||||
} else {
|
} else {
|
||||||
this.wer_ist_dran_mensch = !this.wer_ist_dran_mensch;
|
this.wer_ist_dran_mensch = !this.wer_ist_dran_mensch;
|
||||||
|
|
@ -407,15 +361,15 @@ export default {
|
||||||
if (anzahl == 1) {
|
if (anzahl == 1) {
|
||||||
rueckgabe = "1 Münze";
|
rueckgabe = "1 Münze";
|
||||||
}
|
}
|
||||||
|
|
||||||
return rueckgabe;
|
return rueckgabe;
|
||||||
},
|
},
|
||||||
gib_gemerkter_zug_ausgabe(anzahl) {
|
gib_gemerkter_zug_ausgabe(anzahl) {
|
||||||
if (anzahl > 0) {
|
if (anzahl > 0) {
|
||||||
return "nimm " + this.gib_muenztext(anzahl);
|
return "nimm " + this.gib_muenztext(anzahl);
|
||||||
} else {
|
} else {
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue