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

Added marks to some other features

Browse source
This commit is contained in:
Harley White 2021-05-14 15:32:20 -04:00
parent 01f33b0ebe
commit 4f831f51b0
10 changed files with 30 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
changelog.md
View file

@ -1,5 +1,9 @@
# The Modding Tree changelog: # The Modding Tree changelog:
- Particle
- Added marked feature to buyables, clickables, and challenges. By default, stars multi-completion challenges when maxed.
- Improved number formatting more.
# v2.5.6 - 5/14/21 # v2.5.6 - 5/14/21
- You can now use non-numeric ids for upgrades, buyables, etc. - You can now use non-numeric ids for upgrades, buyables, etc.
- Fixed an exploit that let you buy an extra buyable. - Fixed an exploit that let you buy an extra buyable.

2
docs/buyables.md
View file

@ -52,6 +52,8 @@ Features:
- purchaseLimit: **optional**. The limit on how many of the buyable can be bought. The default is no limit. - purchaseLimit: **optional**. The limit on how many of the buyable can be bought. The default is no limit.
- marked: **optional** Adds a mark to the corner of the buyable. If it's "true" it will be a star, but it can also be an image URL.
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar. - layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
- id: **assigned automagically**. It's the "key" which the buyable was stored under, for convenient access. The buyable in the example's id is 11. - id: **assigned automagically**. It's the "key" which the buyable was stored under, for convenient access. The buyable in the example's id is 11.

2
docs/challenges.md
View file

@ -58,6 +58,8 @@ Individual Challenges can have these features:
- style: **optional**. Applies CSS to this challenge, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings). - style: **optional**. Applies CSS to this challenge, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- marked: **optional** Adds a mark to the corner of the challenge. If it's "true" it will be a star, but it can also be an image URL. By default, if the challenge has multiple completions, it will be starred at max completions.
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do player[this.layer].points or similar - layer: **assigned automagically**. It's the same value as the name of this layer, so you can do player[this.layer].points or similar
- id: **assigned automagically**. It's the "key" which the challenge was stored under, for convenient access. The challenge in the example's id is 11. - id: **assigned automagically**. It's the "key" which the challenge was stored under, for convenient access. The challenge in the example's id is 11.

2
docs/clickables.md
View file

@ -42,6 +42,8 @@ Features:
- style: **optional**. Applies CSS to this clickable, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings). - style: **optional**. Applies CSS to this clickable, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
- marked: **optional** Adds a mark to the corner of the clickable. If it's "true" it will be a star, but it can also be an image URL.
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar. - layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
- id: **assigned automagically**. It's the "key" which the clickable was stored under, for convenient access. The clickable in the example's id is 11. - id: **assigned automagically**. It's the "key" which the clickable was stored under, for convenient access. The clickable in the example's id is 11.

7
index.html
View file

@ -30,7 +30,7 @@
</head> </head>
<body onload="load()"> <body onload="load()" onmousemove="updateMouse(event)">
<div id="app"> <div id="app">
<canvas id="treeCanvas" class="canvas" v-if="!(gameEnded && !player.keepGoing)"></canvas> <canvas id="treeCanvas" class="canvas" v-if="!(gameEnded && !player.keepGoing)"></canvas>
@ -112,6 +112,11 @@
</div> </div>
</transition-group> </transition-group>
</div> </div>
<div class="particle-container">
<div v-for="particle,index in particles">
<particle :data="particle" :index="index" v-bind:key="'b' + particle.id"></particle>
</div>
</div>
<div v-if="player.navTab !== 'none' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)" onscroll="resizeCanvas()" style="background-color:var(--background)" v-bind:class="{ fullWidth: player.navTab == 'none' || !tmp.other.splitScreen || !readData(layoutInfo.showTree), col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}"> <div v-if="player.navTab !== 'none' && player.tab !== 'none' && !(gameEnded && !player.keepGoing)" onscroll="resizeCanvas()" style="background-color:var(--background)" v-bind:class="{ fullWidth: player.navTab == 'none' || !tmp.other.splitScreen || !readData(layoutInfo.showTree), col: player.navTab != 'none', right: player.navTab != 'none', fast: true, tab: true}">
<div v-for="layer in LAYERS"> <div v-for="layer in LAYERS">

1
js/Demo/demoLayers.js
View file

@ -527,6 +527,7 @@ addLayer("a", {
}, },
}, },
midsection: ["grid", "blank"], midsection: ["grid", "blank"],
marked: true,
grid: { grid: {
maxRows: 3, maxRows: 3,
rows: 2, rows: 2,

5
js/components.js
View file

@ -148,6 +148,8 @@ function loadVue() {
Reward: <span v-html="tmp[layer].challenges[data].rewardDescription"></span><br> Reward: <span v-html="tmp[layer].challenges[data].rewardDescription"></span><br>
<span v-if="layers[layer].challenges[data].rewardDisplay!==undefined">Currently: <span v-html="(tmp[layer].challenges[data].rewardDisplay) ? (run(layers[layer].challenges[data].rewardDisplay, layers[layer].challenges[data])) : format(tmp[layer].challenges[data].rewardEffect)"></span></span> <span v-if="layers[layer].challenges[data].rewardDisplay!==undefined">Currently: <span v-html="(tmp[layer].challenges[data].rewardDisplay) ? (run(layers[layer].challenges[data].rewardDisplay, layers[layer].challenges[data])) : format(tmp[layer].challenges[data].rewardEffect)"></span></span>
</span> </span>
<node-mark :layer='layer' :data='tmp[layer].challenges[data].marked' :offset="10"></node-mark></span>
</div> </div>
` `
}) })
@ -275,6 +277,8 @@ function loadVue() {
v-on:click="buyBuyable(layer, data)" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop"> v-on:click="buyBuyable(layer, data)" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">
<span v-if= "tmp[layer].buyables[data].title"><h2 v-html="tmp[layer].buyables[data].title"></h2><br></span> <span v-if= "tmp[layer].buyables[data].title"><h2 v-html="tmp[layer].buyables[data].title"></h2><br></span>
<span v-bind:style="{'white-space': 'pre-line'}" v-html="run(layers[layer].buyables[data].display, layers[layer].buyables[data])"></span> <span v-bind:style="{'white-space': 'pre-line'}" v-html="run(layers[layer].buyables[data].display, layers[layer].buyables[data])"></span>
<node-mark :layer='layer' :data='tmp[layer].buyables[data].marked'></node-mark>
</button> </button>
<br v-if="(tmp[layer].buyables[data].sellOne !== undefined && !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)) || (tmp[layer].buyables[data].sellAll && !(tmp[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false))"> <br v-if="(tmp[layer].buyables[data].sellOne !== undefined && !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)) || (tmp[layer].buyables[data].sellAll && !(tmp[layer].buyables[data].canSellAll !== undefined && tmp[layer].buyables[data].canSellAll == false))">
<sell-one :layer="layer" :data="data" v-bind:style="tmp[layer].componentStyles['sell-one']" v-if="(tmp[layer].buyables[data].sellOne)&& !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)"></sell-one> <sell-one :layer="layer" :data="data" v-bind:style="tmp[layer].componentStyles['sell-one']" v-if="(tmp[layer].buyables[data].sellOne)&& !(tmp[layer].buyables[data].canSellOne !== undefined && tmp[layer].buyables[data].canSellOne == false)"></sell-one>
@ -336,6 +340,7 @@ function loadVue() {
v-on:click="clickClickable(layer, data)" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop"> v-on:click="clickClickable(layer, data)" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" @touchend="stop" @touchcancel="stop">
<span v-if= "tmp[layer].clickables[data].title"><h2 v-html="tmp[layer].clickables[data].title"></h2><br></span> <span v-if= "tmp[layer].clickables[data].title"><h2 v-html="tmp[layer].clickables[data].title"></h2><br></span>
<span v-bind:style="{'white-space': 'pre-line'}" v-html="run(layers[layer].clickables[data].display, layers[layer].clickables[data])"></span> <span v-bind:style="{'white-space': 'pre-line'}" v-html="run(layers[layer].clickables[data].display, layers[layer].clickables[data])"></span>
<node-mark :layer='layer' :data='tmp[layer].clickables[data].marked'></node-mark>
</button> </button>
`, `,
data() { return { interval: false, time: 0,}}, data() { return { interval: false, time: 0,}},

2
js/technical/layerSupport.js
View file

@ -105,6 +105,8 @@ function setupLayer(layer){
layers[layer].challenges[thing].unlocked = true layers[layer].challenges[thing].unlocked = true
if (layers[layer].challenges[thing].completionLimit === undefined) if (layers[layer].challenges[thing].completionLimit === undefined)
layers[layer].challenges[thing].completionLimit = 1 layers[layer].challenges[thing].completionLimit = 1
else if (layers[layer].challenges[thing].marked === undefined)
layers[layer].challenges[thing].marked = function() {return maxedChallenge(this.layer, this.id)}
} }
} }

2
js/utils/NumberFormating.js
View file

@ -6,7 +6,7 @@ function exponentialFormat(num, precision, mantissa = true) {
m = decimalOne m = decimalOne
e = e.add(1) e = e.add(1)
} }
e = (e.gte(1e9) ? format(e, 1) : (e.gte(10000) ? commaFormat(e, 0) : e.toStringWithDecimalPlaces(0))) e = (e.gte(1e9) ? format(e, 3) : (e.gte(10000) ? commaFormat(e, 0) : e.toStringWithDecimalPlaces(0)))
if (mantissa) if (mantissa)
return m.toStringWithDecimalPlaces(precision) + "e" + e return m.toStringWithDecimalPlaces(precision) + "e" + e
else return "e" + e else return "e" + e

5
style.css
View file

@ -265,6 +265,7 @@ h1, h2, h3, b, input {
border: 2px solid; border: 2px solid;
border-color: rgba(0, 0, 0, 0.125); border-color: rgba(0, 0, 0, 0.125);
font-size: 10px; font-size: 10px;
position:relative;
} }
.tile { .tile {
@ -535,6 +536,7 @@ ul {
.hChallenge { .hChallenge {
background-color: #bf8f8f; background-color: #bf8f8f;
position: relative;
border: 4px solid; border: 4px solid;
border-color: rgba(0, 0, 0, 0.125); border-color: rgba(0, 0, 0, 0.125);
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
@ -706,6 +708,7 @@ button > * {
border-left: 0.3em solid transparent; border-left: 0.3em solid transparent;
font-size: 10px; font-size: 10px;
overflow:auto; overflow:auto;
pointer-events: none;
} }
.star { .star {
@ -721,6 +724,8 @@ button > * {
border-bottom: 0.7em solid #ffcc00; border-bottom: 0.7em solid #ffcc00;
border-left: 0.3em solid transparent; border-left: 0.3em solid transparent;
font-size: 10px; font-size: 10px;
pointer-events: none;
} }
.star:before, .star:after { .star:before, .star:after {