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

verbessertes Spaltenlayout
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:36:24 +01:00
parent 0c10bc9df9
commit 6fb7b5e683
2 changed files with 122 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -4,6 +4,5 @@ Gewonnen hat beim Standardspiel derjenige, der das letzte Hölzchen nimmt (vgl.
ToDo: ToDo:
- Build-Pipeline
- Thumbnail / Icon anpassen - Thumbnail / Icon anpassen

28
src/App.vue
View file

@ -12,8 +12,9 @@
<br /> <br />
<br /> <br />
<div class="grid-container-spalten-2"> <div style="display: flex; justify-content: center; align-items: center;">
<div class="grid-item-spalte" v-bind:class="[ <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="[
{ aktiv: this.wer_ist_dran_mensch }, { aktiv: this.wer_ist_dran_mensch },
{ {
inaktiv: inaktiv:
@ -22,7 +23,7 @@
]"> ]">
<h3>Mensch</h3> <h3>Mensch</h3>
</div> </div>
<div class="grid-item-spalte" v-bind:class="[ <div class="grid-item-spalte" style="border: 0px;" v-bind:class="[
{ aktiv: !this.wer_ist_dran_mensch }, { aktiv: !this.wer_ist_dran_mensch },
{ {
inaktiv: inaktiv:
@ -32,13 +33,14 @@
<h3>KI</h3> <h3>KI</h3>
</div> </div>
<div v-bind:class="[ <div style="border: 0px;" 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,
}, },
]"> ]">
<br>
<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" v-on:click="nimm(index, false)" :disabled="!wer_ist_dran_mensch" <button class="btn btn-primary" v-on:click="nimm(index, false)" :disabled="!wer_ist_dran_mensch"
v-show="index <= this.aktueller_muenzen_stand"> v-show="index <= this.aktueller_muenzen_stand">
@ -48,7 +50,7 @@
</template> </template>
</div> </div>
<div class="grid-container-spalten-3" v-bind:class="[ <div class="grid-container-spalten-3" style="border: 0px;" 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 },
@ -131,14 +133,14 @@
</template> </template>
</div> </div>
</div> </div>
</div>
<br /> <br />
<DIV style="white-space: pre-wrap;"> <DIV style="white-space: pre-wrap;">
{{ this.ausgabe }} {{ this.ausgabe }}
</DIV> </DIV>
<br /> <br />
<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)
@ -242,7 +244,7 @@ export default {
initialisiere_spiel() { initialisiere_spiel() {
this.wer_ist_dran_mensch = true; this.wer_ist_dran_mensch = true;
this.aktueller_muenzen_stand = this.zustaende; this.aktueller_muenzen_stand = this.zustaende;
this.ausgabe = "Spiel läuft"; this.ausgabe = "Das Spiel läuft.";
this.spielsituationen = []; this.spielsituationen = [];
let zug_moeglichkeiten = []; let zug_moeglichkeiten = [];
for (let i = 1; i <= this.max_muenzen_pro_zug; i++) { for (let i = 1; i <= this.max_muenzen_pro_zug; i++) {
@ -522,14 +524,14 @@ export default {
.grid-container-spalten-2 { .grid-container-spalten-2 {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
background-color: #2196f3; /* background-color: #2196f3; */
padding: 2px; padding: 2px;
} }
.grid-container-spalten-3 { .grid-container-spalten-3 {
display: grid; display: grid;
grid-template-columns: auto auto auto; grid-template-columns: auto auto auto;
background-color: #2196f3; /* background-color: #2196f3; */
padding: 2px; padding: 2px;
} }
@ -545,13 +547,13 @@ export default {
/*color: lightgreen;*/ /*color: lightgreen;*/
color: black; color: black;
background-color: lightgreen; background-color: lightgreen;
border: 1px solid lightgreen; border: 1px solid white;
} }
.inaktiv { .inaktiv {
/* color: grey;*/ /* color: grey;*/
color: black; color: black;
background-color: lightgray; background-color: rgb(211, 211, 211, 0.8);
border: 1px solid lightgray; border: 1px solid white;
} }
</style> </style>