From 2ad2a6768b1248f6385d2f2aa4088c01f50d8ab4 Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Sat, 24 Oct 2020 11:40:56 -0500 Subject: [PATCH 1/5] Added lore component --- index.html | 2 ++ js/utils.js | 1 + js/v.js | 10 ++++++++++ style.css | 9 ++++++++- 4 files changed, 21 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index c524d18..160cd73 100644 --- a/index.html +++ b/index.html @@ -91,6 +91,7 @@ + @@ -162,6 +163,7 @@



+
diff --git a/js/utils.js b/js/utils.js index 70a59f4..ad7e64b 100644 --- a/js/utils.js +++ b/js/utils.js @@ -90,6 +90,7 @@ function startPlayerBase() { keepGoing: false, hasNaN: false, hideChallenges: false, + showStory: true, points: modInfo.initialStartPoints, subtabs: {}, } diff --git a/js/v.js b/js/v.js index 7ac6e50..75c5b23 100644 --- a/js/v.js +++ b/js/v.js @@ -69,6 +69,16 @@ function loadVue() { ` }) + Vue.component('lore', { + props: ['layer', 'data'], + template: ` +
+
+ ` + }) + // Data = width in px, by default fills the full area Vue.component('h-line', { diff --git a/style.css b/style.css index f497a2a..44a2b36 100644 --- a/style.css +++ b/style.css @@ -596,4 +596,11 @@ button > * { .ghost { visibility: hidden -} \ No newline at end of file +} + +.story { + max-width: 600px; + border: solid 5px; + padding: 8px; + margin-bottom: 8px; +} From 31e069dd2f86431cc428d77183ec9bb3a1b172c6 Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Sat, 24 Oct 2020 11:42:55 -0500 Subject: [PATCH 2/5] Documented lore feature --- docs/layer-features.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/layer-features.md b/docs/layer-features.md index f5dfe60..6209ecc 100644 --- a/docs/layer-features.md +++ b/docs/layer-features.md @@ -46,6 +46,8 @@ Key: - effectDescription: **optional**, A function that returns a description of this effect. If the text stays constant, it can just be a string. +- lore: **optional**, Displays some text (can use basic HTML) in a box at the top of the layer tab, unless the player has hidden the lore in the settings. + - layerShown(): A function returning a bool which determines if this layer's node should be visible on the tree. It can also return "ghost", which will hide the layer, but its node will still take up space in the tree. From 46c9aadbbd5f8ff3c8dfebd6eb32ee17dc8f81c0 Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Sat, 24 Oct 2020 19:06:28 -0500 Subject: [PATCH 3/5] Redesigned lore component to be minimized individually rather than disabled globally --- index.html | 1 - js/utils.js | 1 + js/v.js | 12 +++++++++--- style.css | 31 ++++++++++++++++++++++++++++--- 4 files changed, 38 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 160cd73..cccccf4 100644 --- a/index.html +++ b/index.html @@ -91,7 +91,6 @@ - diff --git a/js/utils.js b/js/utils.js index ad7e64b..5929000 100644 --- a/js/utils.js +++ b/js/utils.js @@ -122,6 +122,7 @@ function getStartPlayer() { for (item in layers[layer].microtabs) playerdata.subtabs[layer][item] = Object.keys(layers[layer].microtabs[item])[0] } + playerdata[layer].loreHidden = false } return playerdata } diff --git a/js/v.js b/js/v.js index 75c5b23..07888b4 100644 --- a/js/v.js +++ b/js/v.js @@ -72,9 +72,15 @@ function loadVue() { Vue.component('lore', { props: ['layer', 'data'], template: ` -
+
+ +
+ +
` }) diff --git a/style.css b/style.css index 44a2b36..0f710dd 100644 --- a/style.css +++ b/style.css @@ -599,8 +599,33 @@ button > * { } .story { - max-width: 600px; - border: solid 5px; - padding: 8px; + width: 600px; + max-width: 95%; + border: solid 4px; + border-radius: 8px; margin-bottom: 8px; } + +.story-title { + text-align: left; + font-size: 24px; + color: black; + cursor: pointer; + border: none; + width: 100%; + padding: 2px; +} + +.story-toggle { + border: none; + background: black; + color: white; + font-size: 20px; + pointer-events: none; + width: 1em; + display: inline-block; +} + +.story-text { + padding: 2px; +} From 3de5d23477fb4ddf5ccb2261ffb431e07e3b797e Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Sat, 24 Oct 2020 19:10:17 -0500 Subject: [PATCH 4/5] Moved lore component to below main display by default --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index cccccf4..3156531 100644 --- a/index.html +++ b/index.html @@ -162,8 +162,8 @@



- +
From da4d22c73462471799ce853426822f20f90222b2 Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Sat, 24 Oct 2020 19:47:42 -0500 Subject: [PATCH 5/5] Tweaked look of lore component --- index.html | 2 +- js/v.js | 8 ++++---- style.css | 10 ++++++++-- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 3156531..cccccf4 100644 --- a/index.html +++ b/index.html @@ -162,8 +162,8 @@



- +
diff --git a/js/v.js b/js/v.js index 07888b4..ba811b4 100644 --- a/js/v.js +++ b/js/v.js @@ -72,13 +72,13 @@ function loadVue() { Vue.component('lore', { props: ['layer', 'data'], template: ` -
+
-
+
diff --git a/style.css b/style.css index 0f710dd..b43388a 100644 --- a/style.css +++ b/style.css @@ -601,9 +601,10 @@ button > * { .story { width: 600px; max-width: 95%; - border: solid 4px; + border-bottom: solid 4px; border-radius: 8px; margin-bottom: 8px; + text-align: left; } .story-title { @@ -612,8 +613,8 @@ button > * { color: black; cursor: pointer; border: none; - width: 100%; padding: 2px; + border-radius: 8px 8px 0 0; } .story-toggle { @@ -628,4 +629,9 @@ button > * { .story-text { padding: 2px; + border: solid 4px; + border-color: inherit; + border-radius: inherit; + border-top-left-radius: 0; + margin-bottom: -2px; }