|
|
|
@@ -21,7 +21,7 @@ |
|
|
|
<p class="location-desc">{{ location.desc }}</p> |
|
|
|
</div> |
|
|
|
<div class="explore-nav"> |
|
|
|
<NavButton @click.native="writeLog(location.connections[direction].travel(world, world.player))" v-for="direction in Object.keys(location.connections)" :key="direction" :style="navBtnCss(direction)" :location="location" :direction="direction" /> |
|
|
|
<NavButton @click.native="writeLog(location.connections[direction].travel(world, world.player))" v-for="direction in Object.keys(directions).filter(dir => Object.keys(location.connections).includes(dir))" :key="direction" :style="navBtnCss(direction)" :location="location" :direction="direction" /> |
|
|
|
</div> |
|
|
|
<div class="explore-choices"> |
|
|
|
<ChoiceButton @click.native="writeLog(choice.execute(world, world.player))" v-for="(choice, index) in location.choices.filter(choice => choice.visible(world))" :key="'choice' + index" :choice="choice" :world="world" /> |
|
|
|
@@ -101,9 +101,9 @@ export default class Explore extends Vue { |
|
|
|
position: relative; |
|
|
|
display: grid; |
|
|
|
grid-template-areas: "info log log statblock" |
|
|
|
"worldinfo log log containers" |
|
|
|
"worldinfo log log statblock" |
|
|
|
"nav nav choices containers "; |
|
|
|
grid-template-rows: fit-content(50%) 1fr minmax(25%, 33%); |
|
|
|
grid-template-rows: fit-content(50%) 1fr 18rem; |
|
|
|
grid-template-columns: 1fr 1fr 1fr 1fr; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
|