Add access to icons and locale from export

Add models for accessing and using the icons and locale that's exported
when an instance export is runned.

packages/web_ui/src/index.css

@@ -259,3 +259,9 @@ body {
 .json-input {
 	font-family: monospace;
 }
+
+.factorio-icon.item-unknown-item {
+	background: url("./images/unknown-item.png");
+	height: 32px;
+	width: 32px;
+}

packages/web_ui/src/index.jsx

@@ -3,6 +3,8 @@ export { default as notify, notifyErrorHandler } from "./util/notify.jsx";
 
 export * from "./model/instance.jsx";
 export * from "./model/slave.jsx";
+export * from "./model/locale.jsx";
+export * from "./model/item_metadata.jsx";
 
 
 export { default as ControlContext } from "./components/ControlContext";

packages/web_ui/src/model/item_metadata.jsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from "react";
+
+
+let itemMetadataCache = null;
+export function useItemMetadata() {
+	let [itemMetadata, setItemMetadata] = useState(itemMetadataCache || new Map());
+	useEffect(() => {
+		async function load() {
+			let response = await fetch(`${webRoot}export/item-metadata.json`);
+			if (response.ok) {
+				let data = await response.json();
+				itemMetadataCache = new Map(data);
+				let style = document.createElement("style");
+				style.type = "text/css";
+				document.head.appendChild(style);
+				for (let [name, meta] of itemMetadataCache) {
+					style.sheet.insertRule(
+						`.item-${CSS.escape(name)} {
+	background-image: url("${webRoot}export/item-spritesheet.png");
+	background-repeat: no-repeat;
+	background-position: -${meta.x}px -${meta.y}px;
+	height: ${meta.size}px;
+	width: ${meta.size}px;
+}`
+					);
+				}
+				setItemMetadata(itemMetadataCache);
+			}
+		}
+
+		if (!itemMetadataCache) {
+			load();
+		}
+	}, []);
+
+	return itemMetadata;
+}
+

packages/web_ui/src/model/locale.jsx

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from "react";
+
+
+let localeCache = null;
+export function useLocale() {
+	let [locale, setLocale] = useState(localeCache || new Map());
+	useEffect(() => {
+		async function load() {
+			let response = await fetch(`${webRoot}export/locale.json`);
+			if (response.ok) {
+				let data = await response.json();
+				localeCache = new Map(data);
+				setLocale(localeCache);
+			}
+		}
+
+		if (!localeCache) {
+			load();
+		}
+	}, []);
+
+	return locale;
+}
+