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-21 16:13:55 +00:00
Code Issues Releases Activity Actions

This didn't seem to be working out but I'd rather hang onto it

Browse source
This commit is contained in:
Acamaeda 2020-10-16 17:04:11 -04:00
parent 5e5220acc1
commit 708c7beeb5
3 changed files with 10 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
js/temp.js
View file

@ -114,17 +114,7 @@ function constructBarStyles(layer){
bar.fillDims = {'width': bar.width + "px", 'height': bar.height + "px"}
if (dir !== undefined)
{
bar.fillDims[DIR_MARGINS[dir]] = "0px"
if (dir == UP || dir == DOWN)
{
bar.fillDims.height = bar.height * bar.progress + "px"
if (dir == UP) bar.fillDims['margin-top'] = bar.height * (1 - Math.min(bar.progress, 1)) + "px"
}
else
{
bar.fillDims.width = bar.width * bar.progress + "px"
if (dir == LEFT) bar.fillDims['margin-left'] = bar.width * (1 - Math.min(bar.progress, 1)) + "px"
}
bar.fillDims['clip-path'] = 'inset(0% 0% 50% 0%)'
}
}

4
js/v.js
View file

@ -291,12 +291,12 @@ function loadVue() {
Vue.component('bar', {
props: ['layer', 'data'],
template: `
<div v-if="tmp[layer].bars && tmp[layer].bars[data].unlocked" v-bind:style="{'position': 'relative'}"><div class ="barBorder" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].baseStyle, tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].dims]">
<div v-if="tmp[layer].bars && tmp[layer].bars[data].unlocked" v-bind:style="{'position': 'relative'}"><div class ="barBorder barBase" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].baseStyle, tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].dims]">
<div class = "overlayTextContainer" v-bind:style="[tmp[layer].bars[data].dims]">
<span class = "overlayText" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].textStyle]" v-html="tmp[layer].bars[data].display"></span>
</div>
<div class ="fill" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].fillStyle, tmp[layer].bars[data].fillDims]"></div>
<div class ="fill barBorder" v-bind:style="[tmp[layer].bars[data].style, tmp[layer].bars[data].fillStyle, tmp[layer].bars[data].borderStyle, tmp[layer].bars[data].fillDims]"></div>
</div></div>
`

10
style.css
View file

@ -136,12 +136,16 @@ h1, h2, h3, b, input {
text-shadow: 0px 0px 7px var(--color);
}
.barBase {
overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.barBorder {
border: 2px solid;
border-radius: 10%;
border-color: var(--color);
overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.overlayTextContainer {
@ -156,7 +160,7 @@ h1, h2, h3, b, input {
.fill {
background-color: var(--color);
border-radius: 5%;
border-radius: 10%;
position: absolute;
overflow: hidden;
}