incremental-social/The-Modding-Tree
incremental-social/The-Modding-Tree
Template
1
0
Fork 0
mirror of https://github.com/Acamaeda/The-Modding-Tree.git synced 2024-11-24 17:31:50 +00:00
Code Issues Releases Activity Actions

Infoboxes are now stylish

Browse source
This commit is contained in:
Acamaeda 2020-10-25 22:11:57 -04:00
parent 79c5aad414
commit d94b225a6f
2 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
js/Demo/demoLayers.js
View file

@ -43,7 +43,10 @@ addLayer("c", {
}, },
infoboxes:{ infoboxes:{
coolInfo: { coolInfo: {
text: "momo" title: "Lore",
titleStyle: {'color': '#FE0000'},
body: "DEEP LORE!",
bodyStyle: {'background-color': "#0000EE"}
} }
}, },
milestones: { milestones: {

10
js/v.js
View file

@ -57,7 +57,7 @@ function loadVue() {
Vue.component('column', { Vue.component('column', {
props: ['layer', 'data'], props: ['layer', 'data'],
template: ` template: `
<div class="upgTable instant" > <div class="upgTable instant">
<div class="upgCol"> <div class="upgCol">
<div v-for="item in data"> <div v-for="item in data">
<div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer" v-bind:style="tmp[layer].componentStyles[item]"></div> <div v-if="!Array.isArray(item)" v-bind:is="item" :layer= "layer" v-bind:style="tmp[layer].componentStyles[item]"></div>
@ -72,14 +72,14 @@ function loadVue() {
Vue.component('infobox', { Vue.component('infobox', {
props: ['layer', 'data'], props: ['layer', 'data'],
template: ` template: `
<div class="story instant" v-if="tmp[layer].infoboxes && tmp[layer].infoboxes[data]!== undefined && tmp[layer].infoboxes[data].unlocked" v-bind:style="{'border-color': tmp[layer].color, 'border-radius': player.infoboxes[layer][data] ? 0 : '8px'}"> <div class="story instant" v-if="tmp[layer].infoboxes && tmp[layer].infoboxes[data]!== undefined && tmp[layer].infoboxes[data].unlocked" v-bind:style="{'border-color': tmp[layer].color, 'border-radius': player.infoboxes[layer][data] ? 0 : '8px'}, tmp[layer].infoboxes[data].style">
<button class="story-title" v-bind:style="{'background-color': tmp[layer].color}" <button class="story-title" v-bind:style="[{'background-color': tmp[layer].color}, tmp[layer].infoboxes[data].titleStyle]"
v-on:click="player.infoboxes[layer][data] = !player.infoboxes[layer][data]"> v-on:click="player.infoboxes[layer][data] = !player.infoboxes[layer][data]">
<span class="story-toggle">{{player.infoboxes[layer][data] ? "+" : "-"}}</span> <span class="story-toggle">{{player.infoboxes[layer][data] ? "+" : "-"}}</span>
<span v-html="tmp[layer].infoboxes[data].title ? tmp[layer].infoboxes[data].title : (tmp[layer].name)"></span> <span v-html="tmp[layer].infoboxes[data].title ? tmp[layer].infoboxes[data].title : (tmp[layer].name)"></span>
</button> </button>
<div v-if="!player.infoboxes[layer][data]" class="story-text"> <div v-if="!player.infoboxes[layer][data]" class="story-text" v-bind:style="tmp[layer].infoboxes[data].bodyStyle">
<span v-html="tmp[layer].infoboxes[data].text ? tmp[layer].infoboxes[data].text : 'Blah'"></span> <span v-html="tmp[layer].infoboxes[data].body ? tmp[layer].infoboxes[data].body : 'Blah'"></span>
</div> </div>
</div> </div>
` `