| @@ -1,12 +1,12 @@ | |||||
| <template> | <template> | ||||
| <div class="combat-layout"> | <div class="combat-layout"> | ||||
| <div class="left-selector"> | <div class="left-selector"> | ||||
| <button @click="left = combatant" v-for="(combatant, index) in combatants.filter(c => c !== right && c !== left)" :key="'left' + index"> | |||||
| <button class="combatant-picker" @click="left = combatant" v-for="(combatant, index) in combatants.filter(c => c !== right && c !== left)" :key="'left' + index"> | |||||
| {{ combatant.name }} | {{ combatant.name }} | ||||
| </button> | </button> | ||||
| </div> | </div> | ||||
| <div class="right-selector"> | <div class="right-selector"> | ||||
| <button @click="right = combatant" v-for="(combatant, index) in combatants.filter(c => c !== left && c !== right)" :key="'right' + index"> | |||||
| <button class="combatant-picker" @click="right = combatant" v-for="(combatant, index) in combatants.filter(c => c !== left && c !== right)" :key="'right' + index"> | |||||
| {{ combatant.name }} | {{ combatant.name }} | ||||
| </button> | </button> | ||||
| </div> | </div> | ||||
| @@ -293,4 +293,14 @@ div.right-move { | |||||
| color: #f88; | color: #f88; | ||||
| } | } | ||||
| .left-selector, | |||||
| .right-selector { | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| } | |||||
| .combatant-picker { | |||||
| flex: 1 1; | |||||
| } | |||||
| </style> | </style> | ||||