diff --git a/custom.css b/custom.css index 1d873ce5..b2eac39b 100644 --- a/custom.css +++ b/custom.css @@ -1,4 +1,18 @@ +.help-tooltip { + width: 30px; + height: 30px; + padding: 6px 0px; + border-radius: 20px; + text-align: center; + font-size: 1rem; + line-height: 1; + margin: auto; + background-color: #E9ECEF; + border-width: 1px; + border-color: #CED4DA; +} + .card.bg-info { background-color: #91cdd6 !important; color: black !important; @@ -70,3 +84,98 @@ textarea.invalid:focus { overflow-wrap: normal; overflow-x: scroll; } + +body[data-style="dark"] { + background-color: #222529; +} + +body[data-style="dark"] #source { + background-color: #181a1d; + border-color: #646b72; + color: #ddd; +} + +body[data-style="dark"] .form-control { + background-color: #343a40; + color: #ddd; + border-color: #24282c; +} + +body[data-style="dark"] .input-group-text { + background-color: #2d3236; + color: #fff; + border-color: #24282c; +} + +body[data-style="dark"] .btn-outline-secondary { + background-color: #343a40 !important; + color: #ddd; + border-color: #24282c; +} + +body[data-style="dark"] .btn-outline-dark { + filter: invert(); +} + +body[data-style="dark"] .custom-control-label { + color: #ddd; +} + +body[data-style="dark"] .dropdown-menu { + background-color: #343a40; + color: #ddd; +} + +body[data-style="dark"] .dropdown-item:hover { + background-color: #2d3236; +} + +body[data-style="dark"] .card.bg-success { + background-color: #2f693e !important; + color: white !important; +} + +body[data-style="dark"] .card.bg-light { + background-color: #32373c !important; + color: white !important; +} + +body[data-style="dark"] .btn-light { + background-color: #282d31 !important; + color: white !important; + border-color: #282d31 !important; +} + +body[data-style="dark"] .card.bg-secondary { + background-color: #707579 !important; + color: white !important; +} + +body[data-style="dark"] .card.bg-info { + background-color: #2a707a !important; + color: black !important; +} + +body[data-style="dark"] .card.bg-info .card.bg-info { + background-color: #3a929e !important; + color: black !important; +} + +body[data-style="dark"] .card.bg-dark { + background-color: #4b4f54 !important; + color: white !important; +} + +body[data-style="dark"] .card.bg-dark .card.bg-dark { + background-color: #565b60 !important; +} + +body[data-style="dark"] .card.bg-dark .card.bg-dark .card.bg-dark { + background-color: #646b72 !important; +} + +body[data-style="dark"] .help-tooltip { + background-color: #2d3236; + color: #fff; + border-color: #24282c; +} diff --git a/i18n.js b/i18n.js index d379e9d3..faee506f 100644 --- a/i18n.js +++ b/i18n.js @@ -17,11 +17,11 @@ i18next }) .then(() => { jqueryI18next.init(i18next, $, { parseDefaultValueFromContent: false }) - $('html').localize() + updateView() }) function changeLng(code) { i18next.changeLanguage(code).then(() => { - $('html').localize() + updateView() }) } diff --git a/index.html b/index.html index 83284f78..53ea15ba 100644 --- a/index.html +++ b/index.html @@ -32,11 +32,18 @@
  • - + 🌎 Language
    • +
  • + +
    + + +
    +
    • diff --git a/locales/en.json b/locales/en.json index c2fa4628..c19e6f96 100644 --- a/locales/en.json +++ b/locales/en.json @@ -218,6 +218,16 @@ "function.zoom": "Zoom", "function_add": "Add Function", "function_remove": "Remove Function", + "help.entry.expand": "If false, entry will return all contents of tag, otherwise entry will behave as multiple item entries", + "help.entry.type.alternatives": "Tests conditions of the child entries and executes the first that can run", + "help.entry.type.dynamic": "Gets block specific drops", + "help.entry.type.empty": "Adds nothing to the pool", + "help.entry.type.group": "Executes all child entries when own conditions pass", + "help.entry.type.item": "Adds a single item", + "help.entry.type.loot_table": "Adds the contents of another loot table", + "help.entry.type.sequence": "Executes child entries until the first one that can't run due to conditions", + "help.entry.type.tag": "Adds the contents of an item tag", + "help.pool.rolls": "The amount of entries that are randomly chosen", "gamemode.adventure": "Adventure", "gamemode.creative": "Creative", "gamemode.spectator": "Spectator", @@ -322,6 +332,9 @@ "tabs": "Tabs", "term_add": "Add Term", "term_remove": "Remove Term", + "theme": "Theme", + "theme.light": "Light", + "theme.dark": "Dark", "title.loot-table": "Loot Table Generator", "title.predicate": "Predicate Generator", "true": "True", diff --git a/schemas/1.13.json b/schemas/1.13.json index ce2838c1..b59d7f49 100644 --- a/schemas/1.13.json +++ b/schemas/1.13.json @@ -53,6 +53,7 @@ "type": "enum", "translate": "entry.type", "translateValue": "entry.type", + "help": true, "default": "minecraft:item", "values": [ "minecraft:empty", diff --git a/schemas/1.14.json b/schemas/1.14.json index b55c53c1..cfc18d2d 100644 --- a/schemas/1.14.json +++ b/schemas/1.14.json @@ -34,7 +34,8 @@ { "id": "rolls", "type": "random", - "translate": "pool.rolls" + "translate": "pool.rolls", + "help": true }, { "id": "bonus_rolls", @@ -75,6 +76,7 @@ "type": "enum", "translate": "entry.type", "translateValue": "entry.type", + "help": true, "default": "minecraft:item", "values": [ "minecraft:empty", @@ -114,6 +116,7 @@ "type": "boolean", "default": "false", "translate": "entry.expand", + "help": true, "require": [ "minecraft:tag" ] diff --git a/schemas/1.15.json b/schemas/1.15.json index 9eec4581..1bf8aea9 100644 --- a/schemas/1.15.json +++ b/schemas/1.15.json @@ -86,6 +86,7 @@ "type": "enum", "translate": "entry.type", "translateValue": "entry.type", + "help": true, "default": "minecraft:item", "values": [ "minecraft:empty", @@ -125,6 +126,7 @@ "type": "boolean", "default": "false", "translate": "entry.expand", + "help": true, "require": [ "minecraft:tag" ] diff --git a/view.js b/view.js index 0ab68e71..978c58bd 100644 --- a/view.js +++ b/view.js @@ -32,6 +32,15 @@ function changeVersion(version) { }); } +changeTheme(localStorage.getItem('theme')) +function changeTheme(theme) { + if (theme === null) { + theme = 'light'; + } + $('body').attr('data-style', theme); + localStorage.setItem('theme', theme); +} + function updateView() { if (structure) { let {out: sourceOut, component: $component} = generateSourceAndView(table, structure); @@ -113,6 +122,9 @@ function generateString(data, struct) { $el.attr('data-index', struct.id); $el.find('[data-name]').attr('data-i18n', struct.translate); $el.find('input').val(data); + if (struct.help) { + $el.append(generateTooltip(struct.translate)); + } return {out: data, component: $el}; } @@ -125,6 +137,9 @@ function generateBoolean(data, struct) { } else if (data === false) { $el.find('[value="false"]').addClass('active'); } + if (struct.help) { + $el.append(generateTooltip(struct.translate)); + } return {out: data, component: $el}; } @@ -146,6 +161,9 @@ function generateRandom(data, struct) { $el.find('.exact').removeClass('d-none'); $el.find('.exact').val(data); } + if (struct.help) { + $el.append(generateTooltip(struct.translate)); + } return {out: data, component: $el}; } @@ -161,6 +179,9 @@ function generateRange(data, struct) { $el.find('.exact').removeClass('d-none'); $el.find('.exact').val(data); } + if (struct.help) { + $el.append(generateTooltip(struct.translate)); + } return {out: data, component: $el}; } @@ -172,6 +193,9 @@ function generateBoundary(data, struct) { $el.find('.range.min').val(data.min); $el.find('.range.max').val(data.max); } + if (struct.help) { + $el.append(generateTooltip(struct.translate)); + } return {out: data, component: $el}; } @@ -196,6 +220,9 @@ function generateEnum(data, struct) { } } $el.find('select').val(collection.includes(data) ? data : correctNamespace(data)); + if (struct.help) { + $el.append(generateTooltip(struct.translateValue + '.' + data.replace(/.*:/, ''))); + } return {out: data, component: $el}; } @@ -273,6 +300,9 @@ function generateJson(data, struct) { data = JSON.stringify(data); } $el.find('textarea').val(data).keydown(e => preventNewline(e)); + if (struct.help) { + $el.append(generateTooltip(struct.translate)); + } return {out: data, component: $el}; } @@ -450,6 +480,12 @@ function generateField(data, field, parent) { return false; } +function generateTooltip(str) { + let $el = $(''); + $el.tooltip({title: i18next.t('help.' + str)}); + return $el; +} + function preventNewline(e) { if (e.which === 13) { $(e.target).trigger('change');