verbessertes Spaltenlayout
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
0c10bc9df9
commit
6fb7b5e683
2 changed files with 122 additions and 121 deletions
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
||||||
242
src/App.vue
242
src/App.vue
|
|
@ -12,133 +12,135 @@
|
||||||
|
|
||||||
<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;">
|
||||||
{ aktiv: this.wer_ist_dran_mensch },
|
<div class="grid-item-spalte" style="border: 0px; padding-left: 20px; padding-right: 20px;" 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>
|
]">
|
||||||
</div>
|
<h3>Mensch</h3>
|
||||||
<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,
|
|
||||||
},
|
|
||||||
]">
|
|
||||||
<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">
|
|
||||||
nimm {{ index }}
|
|
||||||
</button>
|
|
||||||
<br />
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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 },
|
|
||||||
]">
|
|
||||||
Anzahl Münzen
|
|
||||||
</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: this.wer_ist_dran_mensch },
|
{
|
||||||
{ inaktiv: this.wer_ist_dran_mensch == null },
|
inaktiv:
|
||||||
|
this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
|
||||||
|
},
|
||||||
]">
|
]">
|
||||||
Mögliche Züge
|
<h3>KI</h3>
|
||||||
</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 },
|
|
||||||
]">
|
|
||||||
Gemerkter Zug
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-for="(element, element_index) in this.spielsituationen" :key="element.anzahl_muenzen">
|
<div style="border: 0px;" v-bind:class="[
|
||||||
<div class="grid-item-spalte" v-bind:class="[
|
{ aktiv: this.wer_ist_dran_mensch },
|
||||||
{
|
{
|
||||||
aktiv:
|
inaktiv:
|
||||||
!this.wer_ist_dran_mensch &&
|
!this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
|
||||||
element.anzahl_muenzen == this.aktueller_muenzen_stand,
|
},
|
||||||
},
|
]">
|
||||||
{
|
<br>
|
||||||
inaktiv:
|
<template v-for="index in this.max_muenzen_pro_zug">
|
||||||
!this.wer_ist_dran_mensch &&
|
<button class="btn btn-primary" v-on:click="nimm(index, false)" :disabled="!wer_ist_dran_mensch"
|
||||||
element.anzahl_muenzen != this.aktueller_muenzen_stand,
|
v-show="index <= this.aktueller_muenzen_stand">
|
||||||
},
|
nimm {{ index }}
|
||||||
]">
|
|
||||||
{{ 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,
|
|
||||||
},
|
|
||||||
]">
|
|
||||||
<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>
|
|
||||||
<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,
|
|
||||||
},
|
|
||||||
]">
|
|
||||||
|
|
||||||
<button class="btn btn-primary" disabled v-show="element.gemerkter_zug > 0">
|
|
||||||
{{ this.gib_gemerkter_zug_ausgabe(element.gemerkter_zug) }}
|
|
||||||
</button>
|
</button>
|
||||||
|
<br />
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-container-spalten-3" style="border: 0px;" 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>
|
||||||
</template>
|
<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 },
|
||||||
|
]">
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
]">
|
||||||
|
{{ 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,
|
||||||
|
},
|
||||||
|
]">
|
||||||
|
<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>
|
||||||
|
<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,
|
||||||
|
},
|
||||||
|
]">
|
||||||
|
|
||||||
|
<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>
|
</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++) {
|
||||||
|
|
@ -295,7 +297,7 @@ export default {
|
||||||
|
|
||||||
if (
|
if (
|
||||||
this.aktueller_muenzen_stand <= 0 ||
|
this.aktueller_muenzen_stand <= 0 ||
|
||||||
this.wer_ist_dran_mensch &&
|
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
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue