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

verbessertes responsives Layout
All checks were successful
ci/woodpecker/push/default Pipeline was successful
Details

Browse source
This commit is contained in:
Christian Opitz 2023-11-12 19:51:48 +01:00
parent 6fb7b5e683
commit 2e35ebd953
1 changed files with 63 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

122
src/App.vue
View file

@ -15,12 +15,12 @@
<div style="display: flex; justify-content: center; align-items: center;"> <div style="display: flex; justify-content: center; align-items: center;">
<div class="grid-container-spalten-2" style="max-width: 800px;"> <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="[ <div class="grid-item-spalte" style="border: 0px; padding-left: 20px; padding-right: 20px;" 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 class="grid-item-spalte" style="border: 0px;" v-bind:class="[ <div class="grid-item-spalte" style="border: 0px;" v-bind:class="[
@ -137,72 +137,76 @@
<br /> <br />
<DIV style="white-space: pre-wrap;"> <DIV style="white-space: pre-wrap;">
{{ this.ausgabe }} {{ this.ausgabe }}
</DIV> </DIV>
<br /> <br />
<button class="btn btn-primary" @click="neuer_spieldurchgang"> <button class="btn btn-primary" @click="neuer_spieldurchgang">
neues Spiel (Münzstand zurücksetzen) neues Spiel (Münzstand zurücksetzen)
</button>
<br />
<br />
<br />
<div style="width: 800px; margin: auto">
<button class="btn btn-primary collapsible" style="background: grey">
Vertiefung: weitere Einstellungsmöglichkeiten
</button> </button>
<div class="content" id="content0" style="text-align: center">
<br />
<button class="btn btn-primary" style="background-color: red" @click="initialisiere_spiel"> <br />
Alle gelernten KI-Züge löschen. <br />
<br />
<div style="display: flex; justify-content: center; align-items: center;">
<div style="max-width: 800px; margin: auto">
<button class="btn btn-primary collapsible" style="background: grey">
Vertiefung: weitere Einstellungsmöglichkeiten
</button> </button>
<br /> <div class="content" id="content0" style="text-align: center">
<br />
<br /> <button class="btn btn-primary" style="background-color: red" @click="initialisiere_spiel">
<hr /> Alle gelernten KI-Züge löschen.
<br /> </button>
Durch jede Änderung werden die gelernten KI-Züge werden gelöscht. <br />
<div class="row">
<div class="column" style="text-align: center">
<h3>Münzenanzahl</h3>
<button class="btn btn-primary" @click="update_anzahl_muenzen(--this.zustaende)"> <br />
- <hr />
</button> <br />
&nbsp; Durch jede Änderung werden die gelernten KI-Züge werden gelöscht.
<b style="font-size: xx-large">{{ this.zustaende }}</b>&nbsp; <div class="row">
<button class="btn btn-primary" @click="update_anzahl_muenzen(++this.zustaende)"> <div class="column" style="text-align: center">
+ <h3>Münzenanzahl</h3>
</button>
<br /> <button class="btn btn-primary" @click="update_anzahl_muenzen(--this.zustaende)">
<br /> -
</div> </button>
&nbsp;
<b style="font-size: xx-large">{{ this.zustaende }}</b>&nbsp;
<button class="btn btn-primary" @click="update_anzahl_muenzen(++this.zustaende)">
+
</button>
<div class="column" style="text-align: center"> <br />
<h3>max. Münzen pro Zug</h3> <br />
</div>
<button class="btn btn-primary" @click="update_max_muenzen_pro_zug(--this.max_muenzen_pro_zug)"> <div class="column" style="text-align: center">
- <h3>max. Münzen pro Zug</h3>
</button>
&nbsp; <button class="btn btn-primary" @click="update_max_muenzen_pro_zug(--this.max_muenzen_pro_zug)">
<b style="font-size: xx-large">{{ this.max_muenzen_pro_zug }}</b> -
&nbsp; </button>
<button class="btn btn-primary" @click="update_max_muenzen_pro_zug(++this.max_muenzen_pro_zug)"> &nbsp;
+ <b style="font-size: xx-large">{{ this.max_muenzen_pro_zug }}</b>
</button> &nbsp;
<br /> <button class="btn btn-primary" @click="update_max_muenzen_pro_zug(++this.max_muenzen_pro_zug)">
<br /> +
</button>
<br />
<br />
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <br />
<br /> <br />
<br /> </DIV>
</template> </template>
<script> <script>