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:
|
||||
- Build-Pipeline
|
||||
- Thumbnail / Icon anpassen
|
||||
|
||||
|
|
|
|||
240
src/App.vue
240
src/App.vue
|
|
@ -12,133 +12,135 @@
|
|||
|
||||
<br />
|
||||
<br />
|
||||
<div class="grid-container-spalten-2">
|
||||
<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>Mensch</h3>
|
||||
</div>
|
||||
<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 style="display: flex; justify-content: center; align-items: center;">
|
||||
<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 },
|
||||
{
|
||||
inaktiv:
|
||||
!this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
|
||||
},
|
||||
]">
|
||||
<h3>Mensch</h3>
|
||||
</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 },
|
||||
{ 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
|
||||
</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
|
||||
<h3>KI</h3>
|
||||
</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) }}
|
||||
<div style="border: 0px;" v-bind:class="[
|
||||
{ aktiv: this.wer_ist_dran_mensch },
|
||||
{
|
||||
inaktiv:
|
||||
!this.wer_ist_dran_mensch || this.aktueller_muenzen_stand <= 0,
|
||||
},
|
||||
]">
|
||||
<br>
|
||||
<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" 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>
|
||||
</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>
|
||||
|
||||
<br />
|
||||
<DIV style="white-space: pre-wrap;">
|
||||
{{ this.ausgabe }}
|
||||
{{ this.ausgabe }}
|
||||
</DIV>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
|
||||
|
||||
<button class="btn btn-primary" @click="neuer_spieldurchgang">
|
||||
neues Spiel (Münzstand zurücksetzen)
|
||||
|
|
@ -242,7 +244,7 @@ export default {
|
|||
initialisiere_spiel() {
|
||||
this.wer_ist_dran_mensch = true;
|
||||
this.aktueller_muenzen_stand = this.zustaende;
|
||||
this.ausgabe = "Spiel läuft";
|
||||
this.ausgabe = "Das Spiel läuft.";
|
||||
this.spielsituationen = [];
|
||||
let zug_moeglichkeiten = [];
|
||||
for (let i = 1; i <= this.max_muenzen_pro_zug; i++) {
|
||||
|
|
@ -522,14 +524,14 @@ export default {
|
|||
.grid-container-spalten-2 {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
background-color: #2196f3;
|
||||
/* background-color: #2196f3; */
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.grid-container-spalten-3 {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
background-color: #2196f3;
|
||||
/* background-color: #2196f3; */
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -545,13 +547,13 @@ export default {
|
|||
/*color: lightgreen;*/
|
||||
color: black;
|
||||
background-color: lightgreen;
|
||||
border: 1px solid lightgreen;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
.inaktiv {
|
||||
/* color: grey;*/
|
||||
color: black;
|
||||
background-color: lightgray;
|
||||
border: 1px solid lightgray;
|
||||
background-color: rgb(211, 211, 211, 0.8);
|
||||
border: 1px solid white;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue