From b69018da4f812d1edad3bbfe1ad5d213a7ca1c45 Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Mon, 24 Oct 2022 09:26:45 +0200 Subject: [PATCH 01/17] Refactoring to reduce complexity Remove not needed comment --- .node-version | 1 + package-lock.json | 93 +++++++++++++++++++++++++++++++---------------- src/draw.ts | 31 ++++++++++++++++ src/items.ts | 13 ++----- src/planets.ts | 13 ++----- src/resources.ts | 12 ++---- src/router.ts | 2 + 7 files changed, 107 insertions(+), 58 deletions(-) create mode 100644 .node-version create mode 100644 src/draw.ts diff --git a/.node-version b/.node-version new file mode 100644 index 0000000..188dd74 --- /dev/null +++ b/.node-version @@ -0,0 +1 @@ +15.5.0 diff --git a/package-lock.json b/package-lock.json index c1329e1..075068b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1817,6 +1817,30 @@ "node": ">=6.0.0" } }, + "node_modules/@jridgewell/source-map": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz", + "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", + "dev": true, + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.0", + "@jridgewell/trace-mapping": "^0.3.9" + } + }, + "node_modules/@jridgewell/source-map/node_modules/@jridgewell/gen-mapping": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", + "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.13", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz", @@ -2852,6 +2876,7 @@ "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", + "fsevents": "~2.3.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -5217,6 +5242,7 @@ "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", "dev": true, "dependencies": { + "graceful-fs": "^4.1.6", "universalify": "^2.0.0" }, "optionalDependencies": { @@ -5733,7 +5759,7 @@ "node_modules/optimist/node_modules/minimist": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", - "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=", + "integrity": "sha512-iotkTvxc+TwOm5Ieim8VnSNvCDjCK9S8G3scJ50ZthspSxa7jx50jkhYduuAtAjvfDUwSgOwf8+If99AlOEhyw==", "dev": true }, "node_modules/optionator": { @@ -6458,6 +6484,9 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.0.tgz", "integrity": "sha512-1/wxtweHJ7YwI2AIK3ZgCBU3nbW8sLnBIFwN46cwOTnVzt8f1o6J8zPKjwoiuADvzSjmnLqJce31p0q2vQ+dqw==", "dev": true, + "dependencies": { + "fsevents": "~2.3.2" + }, "bin": { "rollup": "dist/bin/rollup" }, @@ -7162,14 +7191,14 @@ } }, "node_modules/terser": { - "version": "5.13.1", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.13.1.tgz", - "integrity": "sha512-hn4WKOfwnwbYfe48NgrQjqNOH9jzLqRcIfbYytOXCOv46LBfWr9bDS17MQqOi+BWGD0sJK3Sj5NC/gJjiojaoA==", + "version": "5.15.1", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.1.tgz", + "integrity": "sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==", "dev": true, "dependencies": { + "@jridgewell/source-map": "^0.3.2", "acorn": "^8.5.0", "commander": "^2.20.0", - "source-map": "~0.8.0-beta.0", "source-map-support": "~0.5.20" }, "bin": { @@ -7237,18 +7266,6 @@ "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "dev": true }, - "node_modules/terser/node_modules/source-map": { - "version": "0.8.0-beta.0", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz", - "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==", - "dev": true, - "dependencies": { - "whatwg-url": "^7.0.0" - }, - "engines": { - "node": ">= 8" - } - }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -9494,6 +9511,29 @@ "integrity": "sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==", "dev": true }, + "@jridgewell/source-map": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz", + "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==", + "dev": true, + "requires": { + "@jridgewell/gen-mapping": "^0.3.0", + "@jridgewell/trace-mapping": "^0.3.9" + }, + "dependencies": { + "@jridgewell/gen-mapping": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz", + "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==", + "dev": true, + "requires": { + "@jridgewell/set-array": "^1.0.1", + "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/trace-mapping": "^0.3.9" + } + } + } + }, "@jridgewell/sourcemap-codec": { "version": "1.4.13", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz", @@ -12495,7 +12535,7 @@ "minimist": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz", - "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=", + "integrity": "sha512-iotkTvxc+TwOm5Ieim8VnSNvCDjCK9S8G3scJ50ZthspSxa7jx50jkhYduuAtAjvfDUwSgOwf8+If99AlOEhyw==", "dev": true } } @@ -13575,14 +13615,14 @@ } }, "terser": { - "version": "5.13.1", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.13.1.tgz", - "integrity": "sha512-hn4WKOfwnwbYfe48NgrQjqNOH9jzLqRcIfbYytOXCOv46LBfWr9bDS17MQqOi+BWGD0sJK3Sj5NC/gJjiojaoA==", + "version": "5.15.1", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.15.1.tgz", + "integrity": "sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==", "dev": true, "requires": { + "@jridgewell/source-map": "^0.3.2", "acorn": "^8.5.0", "commander": "^2.20.0", - "source-map": "~0.8.0-beta.0", "source-map-support": "~0.5.20" }, "dependencies": { @@ -13591,15 +13631,6 @@ "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "dev": true - }, - "source-map": { - "version": "0.8.0-beta.0", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz", - "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==", - "dev": true, - "requires": { - "whatwg-url": "^7.0.0" - } } } }, diff --git a/src/draw.ts b/src/draw.ts new file mode 100644 index 0000000..8019c43 --- /dev/null +++ b/src/draw.ts @@ -0,0 +1,31 @@ +import {Item, Planet, Resource} from './types'; +import {Router} from './router'; +import {Database} from './database'; +import {Labels} from './labels'; +import {ThingType} from './database'; + +export const Utilities = { + DrawWiki: (item: Item): HTMLElement => { + const wiki = document.createFullElement('div', {class: "wiki", href: Router.GetWikiUrl(item)}); + return wiki; + }, + DrawForList: (thing: Item | Planet): HTMLLIElement => { + const element = document.createFullElement('li'); + element.appendChild(Utilities.Draw(thing)); + return element; + }, + Draw: (thing: Item | Planet | Resource): HTMLAnchorElement => { + const link = document.createFullElement('a', {class: 'thing', href: Router.GetURL(thing)}); + link.appendChild(Utilities.DrawImage(thing)); + if(thing.type === ThingType.Item || thing.type === ThingType.Resource) { + link.appendChild(document.createTextNode(Labels.Localize(thing.label))); + } + if(thing.type === ThingType.Planet) { + link.appendChild(document.createTextNode(thing.name)); + } + return link; + }, + DrawImage: (thing: Item | Planet | Resource): HTMLImageElement => { + return document.createFullElement('img', {src: Database.GetThingImage(thing)}); + }, +} \ No newline at end of file diff --git a/src/items.ts b/src/items.ts index d2a5bce..ae549a4 100644 --- a/src/items.ts +++ b/src/items.ts @@ -4,22 +4,17 @@ import {Database} from './database'; import {Router} from './router'; import {Things} from './things'; import {Item} from './types'; +import {Utilities} from './draw'; export const Items = { - DrawImage: (item: Item): HTMLImageElement => { - return document.createFullElement('img', {src: Database.GetThingImage(item)}); - }, - Draw: (item: Item): HTMLAnchorElement => { - const link = document.createFullElement('a', {class: 'thing', href: Router.GetURL(item)}); - link.appendChild(Items.DrawImage(item)); - link.appendChild(document.createTextNode(Labels.Localize(item.label))); - return link; - }, + DrawImage: Utilities.DrawImage, + Draw: Utilities.Draw, DrawForList: (item: Item): HTMLLIElement => { const element = document.createFullElement('li'); element.appendChild(Items.Draw(item)); return element; }, + DrawWiki: Utilities.DrawWiki, Open: (item: Item) => { const item_tree = document.getElementById('item_tree'); diff --git a/src/planets.ts b/src/planets.ts index 315f9e9..163f5f6 100644 --- a/src/planets.ts +++ b/src/planets.ts @@ -3,17 +3,12 @@ import {Resources} from './resources'; import {Router} from './router'; import {Planet} from './types'; import {Labels} from './labels'; +import {Utilities} from './draw'; + export const Planets = { - DrawImage: (planet: Planet): HTMLImageElement => { - return document.createFullElement('img', {src: Database.GetThingImage(planet)}); - }, - Draw: (planet: Planet): HTMLAnchorElement => { - const link = document.createFullElement('a', {class: 'thing', href: Router.GetURL(planet)}); - link.appendChild(Planets.DrawImage(planet)); - link.appendChild(document.createTextNode(planet.name)); - return link; - }, + DrawImage: Utilities.DrawImage, + Draw: Utilities.Draw, DrawForList: (planet: Planet): HTMLLIElement => { const element = document.createFullElement('li'); element.appendChild(Planets.Draw(planet)); diff --git a/src/resources.ts b/src/resources.ts index 6819095..0b4aff0 100644 --- a/src/resources.ts +++ b/src/resources.ts @@ -5,17 +5,11 @@ import {Planets} from './planets'; import {Router} from './router'; import {Labels} from './labels'; import {Resource} from './types'; +import {Utilities} from './draw'; export const Resources = { - DrawImage: (resource: Resource): HTMLImageElement => { - return document.createFullElement('img', {src: Database.GetThingImage(resource)}); - }, - Draw: (resource: Resource): HTMLAnchorElement => { - const link = document.createFullElement('a', {class: 'thing', href: Router.GetURL(resource)}); - link.appendChild(Resources.DrawImage(resource)); - link.appendChild(document.createTextNode(Labels.Localize(resource.label))); - return link; - }, + DrawImage: Utilities.DrawImage, + Draw: Utilities.Draw, DrawForList: (resource: Resource, quantity?: number): HTMLLIElement => { const element = document.createFullElement('li'); if(quantity !== undefined) { diff --git a/src/router.ts b/src/router.ts index ad6dead..98104e9 100644 --- a/src/router.ts +++ b/src/router.ts @@ -9,6 +9,7 @@ import {Settings} from './settings'; import {Home} from './home'; const STATE_PREFIX = 'Astroneer Helper'; +const WIKI_URI = 'https://astroneer.fandom.com/wiki/'; export const Router = { Reset: () => { @@ -20,6 +21,7 @@ export const Router = { window.scrollTo(0, 0); }, GetURL: (thing: Thing): string => `#${thing.type}=${thing.id}`, + GetWikiUrl: (thing: Thing): string => `${WIKI_URI}${thing.id}`, Reload: () => { const event = new UIEvent('hashchange', {bubbles: true, cancelable: true, detail: 1}); window.dispatchEvent(event); From a87c915388f5392cd81cb909da9e699f2fd7874b Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Mon, 24 Oct 2022 17:46:06 +0200 Subject: [PATCH 02/17] Added label for wiki link --- src/labels.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/labels.json b/src/labels.json index d8136fd..f4220c9 100644 --- a/src/labels.json +++ b/src/labels.json @@ -24,5 +24,6 @@ "planet_primary_resources": {"en-US": "Primary resources", "fr-FR": "Ressources primaires"}, "planet_secondary_resources": {"en-US": "Secondary resources", "fr-FR": "Ressources secondaires"}, "planet_at_core": {"en-US": "At core", "fr-FR": "Au noyau"}, - "planet_atmospheric_resources": {"en-US": "Atmospheric resources", "fr-FR": "Ressources atmosphériques"} + "planet_atmospheric_resources": {"en-US": "Atmospheric resources", "fr-FR": "Ressources atmosphériques"}, + "wiki_link": {"en-US": "Open article on Astroneer Wiki on", "fr-FR": "Ouvrir l'article sur Astroneer Wiki"} } From 73122cbe1bf64736c2690a4f9de2adaac489ac49 Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Mon, 24 Oct 2022 17:46:26 +0200 Subject: [PATCH 03/17] Refactored to make use of base interface --- src/draw.ts | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/draw.ts b/src/draw.ts index 8019c43..4a1150c 100644 --- a/src/draw.ts +++ b/src/draw.ts @@ -1,20 +1,28 @@ -import {Item, Planet, Resource} from './types'; +import {Item, Planet, Resource, Thing} from './types'; import {Router} from './router'; import {Database} from './database'; import {Labels} from './labels'; import {ThingType} from './database'; export const Utilities = { - DrawWiki: (item: Item): HTMLElement => { - const wiki = document.createFullElement('div', {class: "wiki", href: Router.GetWikiUrl(item)}); + DrawWiki: (thing: Thing): HTMLElement => { + const wiki = document.createFullElement('div', {class: 'wiki'}); + const link = document.createFullElement('a', {href: Router.GetWikiUrl(thing)}); + if(thing.type === ThingType.Item || thing.type === ThingType.Resource) { + link.appendChild(document.createTextNode(`${Labels.GetLabel('wiki_link')} "${Labels.Localize(thing.label)}"`)); + } + if(thing.type === ThingType.Planet) { + link.appendChild(document.createTextNode(`${Labels.GetLabel('wiki_link')} "${thing.name}"`)); + } + wiki.appendChild(link) return wiki; }, - DrawForList: (thing: Item | Planet): HTMLLIElement => { + DrawForList: (thing: Thing): HTMLLIElement => { const element = document.createFullElement('li'); element.appendChild(Utilities.Draw(thing)); return element; }, - Draw: (thing: Item | Planet | Resource): HTMLAnchorElement => { + Draw: (thing: Thing): HTMLAnchorElement => { const link = document.createFullElement('a', {class: 'thing', href: Router.GetURL(thing)}); link.appendChild(Utilities.DrawImage(thing)); if(thing.type === ThingType.Item || thing.type === ThingType.Resource) { @@ -25,7 +33,7 @@ export const Utilities = { } return link; }, - DrawImage: (thing: Item | Planet | Resource): HTMLImageElement => { + DrawImage: (thing: Thing): HTMLImageElement => { return document.createFullElement('img', {src: Database.GetThingImage(thing)}); }, } \ No newline at end of file From 0461193e1fd2822ba649c030dc239fdb8acb2c02 Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Mon, 24 Oct 2022 17:46:40 +0200 Subject: [PATCH 04/17] Added first iteration of adding the link --- src/items.ts | 2 +- src/planets.ts | 2 ++ src/resources.ts | 2 ++ 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/items.ts b/src/items.ts index ae549a4..7562ef4 100644 --- a/src/items.ts +++ b/src/items.ts @@ -9,12 +9,12 @@ import {Utilities} from './draw'; export const Items = { DrawImage: Utilities.DrawImage, Draw: Utilities.Draw, + DrawWiki: Utilities.DrawWiki, DrawForList: (item: Item): HTMLLIElement => { const element = document.createFullElement('li'); element.appendChild(Items.Draw(item)); return element; }, - DrawWiki: Utilities.DrawWiki, Open: (item: Item) => { const item_tree = document.getElementById('item_tree'); diff --git a/src/planets.ts b/src/planets.ts index 163f5f6..c1170f3 100644 --- a/src/planets.ts +++ b/src/planets.ts @@ -9,9 +9,11 @@ import {Utilities} from './draw'; export const Planets = { DrawImage: Utilities.DrawImage, Draw: Utilities.Draw, + DrawWiki: Utilities.DrawWiki, DrawForList: (planet: Planet): HTMLLIElement => { const element = document.createFullElement('li'); element.appendChild(Planets.Draw(planet)); + element.appendChild(Planets.DrawWiki(planet)); return element; }, Open: (planet: Planet) => { diff --git a/src/resources.ts b/src/resources.ts index 0b4aff0..8944422 100644 --- a/src/resources.ts +++ b/src/resources.ts @@ -10,12 +10,14 @@ import {Utilities} from './draw'; export const Resources = { DrawImage: Utilities.DrawImage, Draw: Utilities.Draw, + DrawWiki: Utilities.DrawWiki, DrawForList: (resource: Resource, quantity?: number): HTMLLIElement => { const element = document.createFullElement('li'); if(quantity !== undefined) { element.appendChild(document.createFullElement('span', {style: 'margin-right: 1rem'}, quantity.toString())); } element.appendChild(Resources.Draw(resource)); + element.appendChild(Planets.DrawWiki(resource)); return element; }, Open: (resource: Resource) => { From a4155c2baf876d4ec5bb9232a72fc11bebce9102 Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Mon, 24 Oct 2022 17:47:42 +0200 Subject: [PATCH 05/17] Open wiki link as new tab --- src/draw.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/draw.ts b/src/draw.ts index 4a1150c..be17001 100644 --- a/src/draw.ts +++ b/src/draw.ts @@ -7,7 +7,7 @@ import {ThingType} from './database'; export const Utilities = { DrawWiki: (thing: Thing): HTMLElement => { const wiki = document.createFullElement('div', {class: 'wiki'}); - const link = document.createFullElement('a', {href: Router.GetWikiUrl(thing)}); + const link = document.createFullElement('a', {href: Router.GetWikiUrl(thing), target: '_blank'}); if(thing.type === ThingType.Item || thing.type === ThingType.Resource) { link.appendChild(document.createTextNode(`${Labels.GetLabel('wiki_link')} "${Labels.Localize(thing.label)}"`)); } From c0fe23579043301f696b9be4edb7b3437f4b5cf3 Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Mon, 24 Oct 2022 17:50:04 +0200 Subject: [PATCH 06/17] Fix path of original repository --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 24b59ae..bb126b5 100644 --- a/package.json +++ b/package.json @@ -21,10 +21,10 @@ "license": "Unlicense", "repository": { "type": "git", - "url": "https://github.com/matco/astroneer-helper.git" + "url": "https://github.com/matco/astroneer.git" }, "bugs": { - "url": "https://github.com/matco/astroneer-helper/issues" + "url": "https://github.com/matco/astroneer/issues" }, "dependencies": { "@matco/basic-tools": "^2.3.0" @@ -44,4 +44,4 @@ "webpack-dev-server": "^4.9.0", "workbox-webpack-plugin": "^6.5.3" } -} +} \ No newline at end of file From 90194c0df12922ab24cedfc92c3c706c5102af4b Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Mon, 24 Oct 2022 17:58:43 +0200 Subject: [PATCH 07/17] Disable overlay during development --- webpack.config.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 8ebe90b..cf30272 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -61,6 +61,12 @@ export default { }, devServer: { port: 9000, - host: '0.0.0.0' + host: '0.0.0.0', + client: { + overlay: { + errors: true, + warnings: false + } + } } }; From 35fa601402d64f6bd491833afa3314f0084d46d8 Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Mon, 24 Oct 2022 20:17:56 +0200 Subject: [PATCH 08/17] Implemented output of tooltip --- src/draw.ts | 17 ++++++++++++++--- src/items.ts | 1 + src/labels.json | 3 ++- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/draw.ts b/src/draw.ts index be17001..4a5572b 100644 --- a/src/draw.ts +++ b/src/draw.ts @@ -8,13 +8,24 @@ export const Utilities = { DrawWiki: (thing: Thing): HTMLElement => { const wiki = document.createFullElement('div', {class: 'wiki'}); const link = document.createFullElement('a', {href: Router.GetWikiUrl(thing), target: '_blank'}); + const header = document.createFullElement('span', {class: 'header'}); + const footer = document.createFullElement('span', {class: 'footer'}); + const highlightText = document.createFullElement('strong'); + const normalText = document.createTextNode(`${Labels.GetLabel('wiki_category')}: ${thing.type}`); if(thing.type === ThingType.Item || thing.type === ThingType.Resource) { - link.appendChild(document.createTextNode(`${Labels.GetLabel('wiki_link')} "${Labels.Localize(thing.label)}"`)); + highlightText.appendChild(document.createTextNode(Labels.Localize(thing.label))); + link.appendChild(document.createTextNode(`${Labels.GetLabel('wiki_link')}`)); } if(thing.type === ThingType.Planet) { - link.appendChild(document.createTextNode(`${Labels.GetLabel('wiki_link')} "${thing.name}"`)); + highlightText.appendChild(document.createTextNode(`${thing.name}`)); + link.appendChild(document.createTextNode(`${Labels.GetLabel('wiki_link')}`)); } - wiki.appendChild(link) + header.appendChild(highlightText); + header.appendChild(document.createFullElement('br')) + header.appendChild(normalText); + footer.appendChild(link); + wiki.appendChild(header); + wiki.appendChild(footer); return wiki; }, DrawForList: (thing: Thing): HTMLLIElement => { diff --git a/src/items.ts b/src/items.ts index 7562ef4..3bccac8 100644 --- a/src/items.ts +++ b/src/items.ts @@ -13,6 +13,7 @@ export const Items = { DrawForList: (item: Item): HTMLLIElement => { const element = document.createFullElement('li'); element.appendChild(Items.Draw(item)); + element.appendChild(Items.DrawWiki(item)); return element; }, Open: (item: Item) => { diff --git a/src/labels.json b/src/labels.json index f4220c9..26b6f84 100644 --- a/src/labels.json +++ b/src/labels.json @@ -25,5 +25,6 @@ "planet_secondary_resources": {"en-US": "Secondary resources", "fr-FR": "Ressources secondaires"}, "planet_at_core": {"en-US": "At core", "fr-FR": "Au noyau"}, "planet_atmospheric_resources": {"en-US": "Atmospheric resources", "fr-FR": "Ressources atmosphériques"}, - "wiki_link": {"en-US": "Open article on Astroneer Wiki on", "fr-FR": "Ouvrir l'article sur Astroneer Wiki"} + "wiki_link": {"en-US": "Open article on Astroneer Wiki", "fr-FR": "Ouvrir l'article sur Astroneer Wiki"}, + "wiki_category": {"en-US": "Category", "fr-FR": "Catégorie"} } From 2027cdefe2e17c787badfb2d95fbb5382072daef Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Mon, 24 Oct 2022 20:18:28 +0200 Subject: [PATCH 09/17] Code format and added styles for tooltip, restructured list view --- src/index.css | 122 +++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 107 insertions(+), 15 deletions(-) diff --git a/src/index.css b/src/index.css index fdf550f..df65bcc 100644 --- a/src/index.css +++ b/src/index.css @@ -18,6 +18,7 @@ html { min-height: 100%; } + body { font-family: 'Astroneer'; color: var(--main-font-color); @@ -27,11 +28,13 @@ body { margin: auto; width: 70rem; } + /* disable interaction on the web page */ body.disabled { opacity: 0; pointer-events: none; } + h1 { font-family: 'Astroneer-Bold'; font-size: 2rem; @@ -40,27 +43,33 @@ h1 { text-transform: uppercase; position: relative; } -h1 > a { + +h1>a { text-decoration: none; color: white; } -h1 > a:last-child { + +h1>a:last-child { position: absolute; top: 0.5rem; right: 1rem; } -h1 > a:last-child > img { + +h1>a:last-child>img { width: 2rem; height: 2rem; } + ul { list-style-type: none; padding: 0; } + select { border-radius: 5px; padding: 0.2 0.8rem; } + button { cursor: pointer; padding: 0.5rem 0.8rem; @@ -69,26 +78,32 @@ button { border: 3px solid white; border-radius: 5px; } + button:hover { border-color: #164ab2; } + footer { margin: 1rem; font-size: 0.6rem; text-align: center; color: white; } -footer > a { + +footer>a { color: white; } + svg { margin: auto; } + svg path { fill: none; stroke: black; stroke-width: 3; } + svg text { font-size: 0.8rem; } @@ -99,6 +114,7 @@ svg text { text-decoration: none; color: var(--main-font-color); } + .thing img { width: 2rem; margin-right: 0.5rem; @@ -109,6 +125,7 @@ svg text { position: relative; margin-top: 1rem; } + #thing input { font-family: 'Astroneer'; box-sizing: border-box; @@ -120,12 +137,15 @@ svg text { border: 5px solid var(--title-font-color); border-radius: 5px; } + #thing input:focus { outline: none; } + #thing input:focus::-moz-placeholder { color: transparent; } + #thing input:focus::-webkit-input-placeholder { color: transparent; } @@ -145,25 +165,29 @@ svg text { border-radius: 5px; box-shadow: 0 0 2rem var(--main-font-color); } -#things > li { + +#things>li { cursor: pointer; color: #3e4544; padding: 0.3rem; } -#things > li.selected { + +#things>li.selected { background-color: #263531; color: white; } -#things > li .highlight { + +#things>li .highlight { color: #4ab2e3; } -#things > li > img { + +#things>li>img { width: 2rem; margin-right: 0.5rem; vertical-align: middle; } - .section { +.section { position: relative; display: none; margin-top: 1rem; @@ -171,7 +195,8 @@ svg text { border: 5px solid var(--title-font-color); border-radius: 5px; } -.section > h2 { + +.section>h2 { font-size: 1.5rem; color: var(--title-font-color); text-align: center; @@ -183,10 +208,12 @@ svg text { border-color: var(--title-font-color); border-width: 5px 0 5px 0; } -.section > h2:first-child { + +.section>h2:first-child { border-top: none; } -.section > h2 > button { + +.section>h2>button { font-family: 'Astroneer-Bold'; font-size: 1.5rem; position: absolute; @@ -197,21 +224,86 @@ svg text { border: none; cursor: pointer; } -.section > h2 > img { + +.section>h2>img { width: 2rem; margin-right: 0.5rem; vertical-align: middle; } -.section > div, .section > form { + +.section>div, +.section>form { padding: 1rem; } + .section h3 { text-align: center; } +.thing:hover+.wiki, +.thing+.wiki:hover { + display: grid; +} + +.wiki { + position: absolute; + display: none; + width: 30%; + margin-left: -1rem; +} + +.wiki .header { + color: #848384; + text-transform: uppercase; + background-color: rgba(255, 255, 255, 0.9); + padding: 0.5rem; +} + +.wiki .footer { + color: #ffffff; + text-transform: uppercase; + background-color: rgba(132, 131, 132, 0.9); + padding: 0.5rem; +} + +.wiki .footer:hover { + background-color: rgba(90, 89, 90, 0.9); +} + +.wiki a { + color: #fff; + text-decoration: none; +} + +.section ul { + display: grid; + grid-template-columns: 25% 25% 25% 25%; +} + +.section ul li { + padding: 0 1rem; +} + +.section ul li:hover { + background-color: #235EB5; +} + +.section ul li:hover a { + color: #ffffff; +} + @media (max-width: 800px) { + .section ul { + display: grid; + grid-template-columns: 50% 50%; + } + + .wiki { + width: 50%; + } + body { width: 100%; box-sizing: border-box; } -} +} \ No newline at end of file From bb01bc1f0aebaefc7b0969f6f357222c7ded9b2e Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Fri, 28 Oct 2022 14:36:49 +0200 Subject: [PATCH 10/17] Added alt to image --- src/draw.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/draw.ts b/src/draw.ts index 4a5572b..28c8890 100644 --- a/src/draw.ts +++ b/src/draw.ts @@ -45,6 +45,13 @@ export const Utilities = { return link; }, DrawImage: (thing: Thing): HTMLImageElement => { - return document.createFullElement('img', {src: Database.GetThingImage(thing)}); + let alt = ''; + if(thing.type === ThingType.Item || thing.type === ThingType.Resource) { + alt = Labels.Localize(thing.label); + } + if(thing.type === ThingType.Planet) { + alt = thing.name; + } + return document.createFullElement('img', {src: Database.GetThingImage(thing), alt}); }, } \ No newline at end of file From 715cdd33f5e924df91163268c58c678b3f2c3c0c Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Fri, 28 Oct 2022 14:37:14 +0200 Subject: [PATCH 11/17] Increased size of icons --- src/index.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index df65bcc..fe6f8c9 100644 --- a/src/index.css +++ b/src/index.css @@ -116,7 +116,7 @@ svg text { } .thing img { - width: 2rem; + width: 3rem; margin-right: 0.5rem; vertical-align: middle; } @@ -270,6 +270,12 @@ svg text { background-color: rgba(90, 89, 90, 0.9); } +.wiki .header img { + margin-right: 0.5rem; + width: 2rem; + float: left; +} + .wiki a { color: #fff; text-decoration: none; From 483d4a3f3c486497f08ff48dfb875a5d28cdb7e9 Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Fri, 28 Oct 2022 14:39:17 +0200 Subject: [PATCH 12/17] Cleanup not used imports --- src/index.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/index.ts b/src/index.ts index c8316eb..93e1174 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,10 +6,6 @@ import {MOBILE_MEDIA} from './mobile'; import {Labels} from './labels'; import {Router} from './router'; import {Database, ThingType} from './database'; -import {Resources} from './resources'; -import {Items} from './items'; -import {Planets} from './planets'; -import {Things} from './things'; import {Thing} from './types'; import {Settings} from './settings'; From f66680e6e77667fe55527b4f82f229c926f9f15d Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Fri, 28 Oct 2022 14:49:08 +0200 Subject: [PATCH 13/17] Adjust image size and code format --- src/things.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/things.ts b/src/things.ts index 5945d62..157c67a 100644 --- a/src/things.ts +++ b/src/things.ts @@ -13,13 +13,13 @@ const DIMENSIONS = { }; function update_dimensions() { - DIMENSIONS.thing = MOBILE_MEDIA.matches ? 30 : 45; + DIMENSIONS.thing = MOBILE_MEDIA.matches ? 30 : 50; DIMENSIONS.module = DIMENSIONS.thing / 2; DIMENSIONS.x_margin = DIMENSIONS.thing; DIMENSIONS.y_margin = DIMENSIONS.thing * (MOBILE_MEDIA.matches ? 3 : 2.5); } -function get_level(thing: Resource|Item): number { +function get_level(thing: Resource | Item): number { if(!thing.dependencies) { return 0; } @@ -33,7 +33,7 @@ function get_level(thing: Resource|Item): number { * @param {Resource|Item} thing the thing (resource of item) used to perform the calculation * @returns the number of natural resources required to build the thing */ -function get_natural_resources_number(thing: Resource|Item): number { +function get_natural_resources_number(thing: Resource | Item): number { if(!thing.dependencies) { return 1; } @@ -55,7 +55,7 @@ function get_natural_resources_number(thing: Resource|Item): number { * y is a useless parameter (it has been kept because it could be used for an alternative representation) * the y-axis coordinate is absolute and is calculated according to the thing level */ -function draw_resource_tree(svg: SVGElement, x: number, y: number, thing: Resource|Item, quantity?: number) { +function draw_resource_tree(svg: SVGElement, x: number, y: number, thing: Resource | Item, quantity?: number) { //create a group at the thing position const group = SVG.Group({transform: `translate(${x},${y + DIMENSIONS.thing / 2})`}); svg.appendChild(group); @@ -75,7 +75,7 @@ function draw_resource_tree(svg: SVGElement, x: number, y: number, thing: Resour if(thing.dependencies) { const resource_width = get_natural_resources_number(thing) * (DIMENSIONS.thing + DIMENSIONS.x_margin); let dependency_offset = x - resource_width / 2; - const module_y = -DIMENSIONS.y_margin / 2 -DIMENSIONS.thing / 2; + const module_y = -DIMENSIONS.y_margin / 2 - DIMENSIONS.thing / 2; thing.dependencies.forEach(dependency => { const resource = Database.GetResource(dependency.id); const dependency_dependencies_number = get_natural_resources_number(resource); @@ -104,7 +104,7 @@ function draw_resource_tree(svg: SVGElement, x: number, y: number, thing: Resour export const Things = { Sort: (thing1: Thing, thing2: Thing): number => thing1.id.compareTo(thing2.id), - DrawResourceTree: (thing: Resource|Item, svg: SVGElement) => { + DrawResourceTree: (thing: Resource | Item, svg: SVGElement) => { update_dimensions(); //find selected item level const item_level = get_level(thing); From 5f4cf8375cfc71132a7cd1b6945f3b257f776aa2 Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Fri, 28 Oct 2022 15:58:06 +0200 Subject: [PATCH 14/17] Remove no longer needed import --- src/items.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/items.ts b/src/items.ts index 3bccac8..7976327 100644 --- a/src/items.ts +++ b/src/items.ts @@ -1,7 +1,6 @@ import {Labels} from './labels'; import {Resources} from './resources'; import {Database} from './database'; -import {Router} from './router'; import {Things} from './things'; import {Item} from './types'; import {Utilities} from './draw'; From 07fa752de2d63ac8f940072713284515469ba66f Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Fri, 28 Oct 2022 15:58:40 +0200 Subject: [PATCH 15/17] Fix broken wiki links for things longer than one word --- src/router.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/router.ts b/src/router.ts index 98104e9..05714ac 100644 --- a/src/router.ts +++ b/src/router.ts @@ -21,7 +21,11 @@ export const Router = { window.scrollTo(0, 0); }, GetURL: (thing: Thing): string => `#${thing.type}=${thing.id}`, - GetWikiUrl: (thing: Thing): string => `${WIKI_URI}${thing.id}`, + GetWikiUrl: (thing: Thing): string => { + // wiki url structure requires every other word to start capitalized + const id = thing.id.split("_").map(t => t.charAt(0).toUpperCase() + t.slice(1)).join("_"); + return `${WIKI_URI}${id}`; + }, Reload: () => { const event = new UIEvent('hashchange', {bubbles: true, cancelable: true, detail: 1}); window.dispatchEvent(event); From 84cf4c8ba828c893bf46ea9507791b25f3ade2ee Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Tue, 1 Nov 2022 23:45:49 +0100 Subject: [PATCH 16/17] Made changes according to review --- src/draw.ts | 2 +- src/router.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/draw.ts b/src/draw.ts index 28c8890..e0c8409 100644 --- a/src/draw.ts +++ b/src/draw.ts @@ -45,7 +45,7 @@ export const Utilities = { return link; }, DrawImage: (thing: Thing): HTMLImageElement => { - let alt = ''; + let alt; if(thing.type === ThingType.Item || thing.type === ThingType.Resource) { alt = Labels.Localize(thing.label); } diff --git a/src/router.ts b/src/router.ts index 05714ac..035ed45 100644 --- a/src/router.ts +++ b/src/router.ts @@ -23,7 +23,8 @@ export const Router = { GetURL: (thing: Thing): string => `#${thing.type}=${thing.id}`, GetWikiUrl: (thing: Thing): string => { // wiki url structure requires every other word to start capitalized - const id = thing.id.split("_").map(t => t.charAt(0).toUpperCase() + t.slice(1)).join("_"); + // "some id" will be used as url slug and turned into "Some_Id" + const id = thing.id.split("_").map(slug => slug.charAt(0).toUpperCase() + slug.slice(1)).join("_"); return `${WIKI_URI}${id}`; }, Reload: () => { From bb7e52a5a4fb8d2db9c3e568f56ebad51464aebe Mon Sep 17 00:00:00 2001 From: Markus Reisenhofer Date: Wed, 2 Nov 2022 00:25:09 +0100 Subject: [PATCH 17/17] Reworked draw wiki logic due changes in original code --- src/draw.ts | 57 ------------------------------------------------ src/index.css | 8 +++++-- src/items.ts | 1 - src/labels.json | 5 ++++- src/resources.ts | 1 - src/things.ts | 24 ++++++++++++++++++++ 6 files changed, 34 insertions(+), 62 deletions(-) delete mode 100644 src/draw.ts diff --git a/src/draw.ts b/src/draw.ts deleted file mode 100644 index e0c8409..0000000 --- a/src/draw.ts +++ /dev/null @@ -1,57 +0,0 @@ -import {Item, Planet, Resource, Thing} from './types'; -import {Router} from './router'; -import {Database} from './database'; -import {Labels} from './labels'; -import {ThingType} from './database'; - -export const Utilities = { - DrawWiki: (thing: Thing): HTMLElement => { - const wiki = document.createFullElement('div', {class: 'wiki'}); - const link = document.createFullElement('a', {href: Router.GetWikiUrl(thing), target: '_blank'}); - const header = document.createFullElement('span', {class: 'header'}); - const footer = document.createFullElement('span', {class: 'footer'}); - const highlightText = document.createFullElement('strong'); - const normalText = document.createTextNode(`${Labels.GetLabel('wiki_category')}: ${thing.type}`); - if(thing.type === ThingType.Item || thing.type === ThingType.Resource) { - highlightText.appendChild(document.createTextNode(Labels.Localize(thing.label))); - link.appendChild(document.createTextNode(`${Labels.GetLabel('wiki_link')}`)); - } - if(thing.type === ThingType.Planet) { - highlightText.appendChild(document.createTextNode(`${thing.name}`)); - link.appendChild(document.createTextNode(`${Labels.GetLabel('wiki_link')}`)); - } - header.appendChild(highlightText); - header.appendChild(document.createFullElement('br')) - header.appendChild(normalText); - footer.appendChild(link); - wiki.appendChild(header); - wiki.appendChild(footer); - return wiki; - }, - DrawForList: (thing: Thing): HTMLLIElement => { - const element = document.createFullElement('li'); - element.appendChild(Utilities.Draw(thing)); - return element; - }, - Draw: (thing: Thing): HTMLAnchorElement => { - const link = document.createFullElement('a', {class: 'thing', href: Router.GetURL(thing)}); - link.appendChild(Utilities.DrawImage(thing)); - if(thing.type === ThingType.Item || thing.type === ThingType.Resource) { - link.appendChild(document.createTextNode(Labels.Localize(thing.label))); - } - if(thing.type === ThingType.Planet) { - link.appendChild(document.createTextNode(thing.name)); - } - return link; - }, - DrawImage: (thing: Thing): HTMLImageElement => { - let alt; - if(thing.type === ThingType.Item || thing.type === ThingType.Resource) { - alt = Labels.Localize(thing.label); - } - if(thing.type === ThingType.Planet) { - alt = thing.name; - } - return document.createFullElement('img', {src: Database.GetThingImage(thing), alt}); - }, -} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 28f71af..9f3885f 100644 --- a/src/index.css +++ b/src/index.css @@ -239,12 +239,16 @@ svg text { .section h3 { text-align: center; } -#home_resources, #home_items, #home_planets { + +#home_resources, +#home_items, +#home_planets { display: flex; flex-wrap: wrap; justify-content: space-between; } -:is(#home_resources, #home_items, #home_planets) > li { + +:is(#home_resources, #home_items, #home_planets)>li { width: 20rem; } diff --git a/src/items.ts b/src/items.ts index 365f085..71b1376 100644 --- a/src/items.ts +++ b/src/items.ts @@ -3,7 +3,6 @@ import {Resources} from './resources'; import {Database} from './database'; import {Things} from './things'; import {Item} from './types'; -import {Utilities} from './draw'; export const Items = { Open: (item: Item) => { diff --git a/src/labels.json b/src/labels.json index 26b6f84..ad699c9 100644 --- a/src/labels.json +++ b/src/labels.json @@ -26,5 +26,8 @@ "planet_at_core": {"en-US": "At core", "fr-FR": "Au noyau"}, "planet_atmospheric_resources": {"en-US": "Atmospheric resources", "fr-FR": "Ressources atmosphériques"}, "wiki_link": {"en-US": "Open article on Astroneer Wiki", "fr-FR": "Ouvrir l'article sur Astroneer Wiki"}, - "wiki_category": {"en-US": "Category", "fr-FR": "Catégorie"} + "wiki_category": {"en-US": "Category", "fr-FR": "Catégorie"}, + "resource": {"en-US": "Resource", "fr-FR": "Ressource"}, + "item": {"en-US": "Item", "fr-FR": "Objet"}, + "planet": {"en-US": "Planet", "fr-FR": "Planète"} } diff --git a/src/resources.ts b/src/resources.ts index 6f3a2f8..f56143f 100644 --- a/src/resources.ts +++ b/src/resources.ts @@ -2,7 +2,6 @@ import {Database} from './database'; import {Things} from './things'; import {Labels} from './labels'; import {Resource} from './types'; -import {Utilities} from './draw'; export const Resources = { Open: (resource: Resource) => { diff --git a/src/things.ts b/src/things.ts index 4092191..2bb5ca2 100644 --- a/src/things.ts +++ b/src/things.ts @@ -111,6 +111,29 @@ export const Things = { } return Labels.Localize(thing.label); }, + DrawWiki: (thing: Thing): HTMLElement => { + const wiki = document.createFullElement('div', {class: 'wiki'}); + const link = document.createFullElement('a', {href: Router.GetWikiUrl(thing), target: '_blank'}); + const header = document.createFullElement('span', {class: 'header'}); + const footer = document.createFullElement('span', {class: 'footer'}); + const highlightText = document.createFullElement('strong'); + const normalText = document.createTextNode(`${Labels.GetLabel('wiki_category')}: ${Labels.GetLabel(thing.type)}`); + if(thing.type === ThingType.Item || thing.type === ThingType.Resource) { + highlightText.appendChild(document.createTextNode(Labels.Localize(thing.label))); + link.appendChild(document.createTextNode(`${Labels.GetLabel('wiki_link')}`)); + } + if(thing.type === ThingType.Planet) { + highlightText.appendChild(document.createTextNode(`${thing.name}`)); + link.appendChild(document.createTextNode(`${Labels.GetLabel('wiki_link')}`)); + } + header.appendChild(highlightText); + header.appendChild(document.createFullElement('br')) + header.appendChild(normalText); + footer.appendChild(link); + wiki.appendChild(header); + wiki.appendChild(footer); + return wiki; + }, DrawImage: (thing: Thing): HTMLImageElement => { return document.createFullElement('img', {src: Database.GetThingImage(thing), alt: Things.GetLabel(thing)}); }, @@ -126,6 +149,7 @@ export const Things = { element.appendChild(document.createFullElement('span', {style: 'margin-right: 1rem'}, quantity.toString())); } element.appendChild(Things.Draw(thing)); + element.appendChild(Things.DrawWiki(thing)); return element; },