co/reinforcement_learning_simulation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Mensch und KI beginnen in jeder Spielrunde abwechselnd. Layoutverbesserungen.
All checks were successful
ci/woodpecker/push/default Pipeline was successful
Details

Browse source
This commit is contained in:
Christian Opitz 2023-11-12 12:01:59 +01:00
parent 6576aeeebc
commit 0c10bc9df9
1 changed files with 116 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
src/App.vue
View file

@ -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,98 +13,70 @@
<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"
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,
}, },
]" ]">
>
<h3>Mensch</h3> <h3>Mensch</h3>
</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: !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,
}, },
]" ]">
>
<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"
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="[
<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 },
]" ]">
>
Anzahl Münzen Anzahl Münzen
</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: !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 },
]" ]">
>
Mögliche Züge Mögliche Züge
</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: !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 },
]" ]">
>
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"
>
<div
class="grid-item-spalte"
v-bind:class="[
{ {
aktiv: aktiv:
!this.wer_ist_dran_mensch && !this.wer_ist_dran_mensch &&
@ -113,13 +87,10 @@
!this.wer_ist_dran_mensch && !this.wer_ist_dran_mensch &&
element.anzahl_muenzen != this.aktueller_muenzen_stand, 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: aktiv:
!this.wer_ist_dran_mensch && !this.wer_ist_dran_mensch &&
@ -130,25 +101,17 @@
!this.wer_ist_dran_mensch && !this.wer_ist_dran_mensch &&
element.anzahl_muenzen != this.aktueller_muenzen_stand, 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)"
:disabled="
this.wer_ist_dran_mensch ||
element.anzahl_muenzen != this.aktueller_muenzen_stand element.anzahl_muenzen != this.aktueller_muenzen_stand
" " v-show="zug_moeglichkeit <= element.anzahl_muenzen">
v-show="zug_moeglichkeit <= element.anzahl_muenzen"
>
nimm {{ zug_moeglichkeit }} 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: aktiv:
!this.wer_ist_dran_mensch && !this.wer_ist_dran_mensch &&
@ -159,11 +122,9 @@
!this.wer_ist_dran_mensch && !this.wer_ist_dran_mensch &&
element.anzahl_muenzen != this.aktueller_muenzen_stand, 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>
@ -172,7 +133,9 @@
</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>
&nbsp; &nbsp;
<b style="font-size: xx-large">{{ this.zustaende }}</b <b style="font-size: xx-large">{{ this.zustaende }}</b>&nbsp;
>&nbsp; <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>
&nbsp; &nbsp;
<b style="font-size: xx-large">{{ this.max_muenzen_pro_zug }}</b> <b style="font-size: xx-large">{{ this.max_muenzen_pro_zug }}</b>
&nbsp; &nbsp;
<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) {
@ -342,12 +295,13 @@ export default {
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;