Some improvements, qol changes and added wiki link

.node-version

@@ -0,0 +1 @@
+15.5.0

package.json

@@ -44,4 +44,4 @@
 		"webpack-dev-server": "^4.11.1",
 		"workbox-webpack-plugin": "^6.5.4"
 	}
-}
+}

src/draw.ts

@@ -0,0 +1,57 @@
+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});
+    },
+}

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,21 +224,92 @@ 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 .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;
 	}
-}
+}