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 9a68f59..3b52b46 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2879,6 +2879,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", @@ -5260,6 +5261,7 @@ "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", "dev": true, "dependencies": { + "graceful-fs": "^4.1.6", "universalify": "^2.0.0" }, "optionalDependencies": { @@ -6562,6 +6564,9 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", "dev": true, + "dependencies": { + "fsevents": "~2.3.2" + }, "bin": { "rollup": "dist/bin/rollup" }, diff --git a/package.json b/package.json index b8dbaac..2d37586 100644 --- a/package.json +++ b/package.json @@ -44,4 +44,4 @@ "webpack-dev-server": "^4.11.1", "workbox-webpack-plugin": "^6.5.4" } -} +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index aed9ea5..9f3885f 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,8 +114,9 @@ svg text { text-decoration: none; color: var(--main-font-color); } + .thing img { - width: 2rem; + width: 3rem; margin-right: 0.5rem; vertical-align: middle; } @@ -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,19 +165,23 @@ 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; @@ -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,29 +224,104 @@ 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; } -#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; } +.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 .header img { + margin-right: 0.5rem; + width: 2rem; + float: left; +} + +.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 diff --git a/src/items.ts b/src/items.ts index ad40197..71b1376 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'; diff --git a/src/labels.json b/src/labels.json index d8136fd..ad699c9 100644 --- a/src/labels.json +++ b/src/labels.json @@ -24,5 +24,10 @@ "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", "fr-FR": "Ouvrir l'article sur Astroneer Wiki"}, + "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/planets.ts b/src/planets.ts index b9c03e4..50b6aed 100644 --- a/src/planets.ts +++ b/src/planets.ts @@ -3,6 +3,7 @@ import {Planet} from './types'; import {Labels} from './labels'; import {Things} from './things'; + export const Planets = { Open: (planet: Planet) => { //update title diff --git a/src/router.ts b/src/router.ts index ad6dead..035ed45 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,12 @@ export const Router = { window.scrollTo(0, 0); }, GetURL: (thing: Thing): string => `#${thing.type}=${thing.id}`, + GetWikiUrl: (thing: Thing): string => { + // wiki url structure requires every other word to start capitalized + // "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: () => { const event = new UIEvent('hashchange', {bubbles: true, cancelable: true, detail: 1}); window.dispatchEvent(event); diff --git a/src/things.ts b/src/things.ts index ca7a4ba..2bb5ca2 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); @@ -77,7 +77,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); @@ -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,11 +149,12 @@ 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; }, 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);