|
|
|
@@ -1,12 +1,12 @@ |
|
|
|
<template> |
|
|
|
<div class="combat-layout"> |
|
|
|
<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 }} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
<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 }} |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
@@ -293,4 +293,14 @@ div.right-move { |
|
|
|
color: #f88; |
|
|
|
} |
|
|
|
|
|
|
|
.left-selector, |
|
|
|
.right-selector { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
} |
|
|
|
|
|
|
|
.combatant-picker { |
|
|
|
flex: 1 1; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |