Can render text blocks

package.json

@@ -20,18 +20,23 @@
     "babel-preset-env": "^1.6.1",
     "clean-webpack-plugin": "^0.1.17",
     "copy-webpack-plugin": "^4.2.3",
+    "css-loader": "^0.28.7",
     "eslint": "^4.12.1",
     "eslint-config-react-app": "^2.0.1",
     "eslint-plugin-flowtype": "^2.39.1",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.5.1",
+    "file-loader": "^1.1.5",
     "html-webpack-plugin": "^2.30.1",
+    "style-loader": "^0.19.0",
+    "url-loader": "^0.6.2",
     "webpack": "^3.9.1",
     "webpack-dev-server": "^2.9.5"
   },
   "dependencies": {
     "howler": "^2.0.5",
-    "pixi.js": "^4.6.2"
+    "pixi.js": "^4.6.2",
+    "webfontloader": "^1.6.28"
   }
 }

src/index.js

@@ -1,9 +1,12 @@
 import * as PIXI from "pixi.js";
 import { createStore } from "./store";
-import reducer, { setApp, setTextures, mouseOver, click, computeFOV, setSound } from "./reducer";
+import reducer, { setApp, setTextures, mouseOver, click, computeFOV, setSound, setTextBlock } from "./reducer";
 import { getMousePos, getMapCoord } from "./util";
 import setupScene from "./renderScene"
 import Sound from "./sound";
+import WebFont from "webfontloader";
+
+require("./main.css");
 
 function start() {
   const store = initScene();
@@ -66,7 +69,18 @@ function onLoadResources(loader, resources, store) {
     return acc;
   }, {});
   setupScene(store.dispatch(setTextures(textures)));
+  store.dispatch(setTextBlock(`Level 0.
+2 tresure chests.
+Total gold in them: 3.
+Click when you are ready to start`));
   store.dispatch(computeFOV());
 }
 
-start();
+WebFont.load({
+  custom: {
+      families: ['Pixilator']
+  },
+  active: function() {
+      start();
+  }
+});

src/main.css

@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "Pixilator";
+  src: url('./fonts/pixilator.eot');
+  src: url('./fonts/pixilator.eot?#iefix') format('embedded-opentype'),
+       url('./fonts/pixilator.woff') format('woff'),
+       url('./fonts/pixilator.ttf') format('truetype'),
+       url('./fonts/pixilator.svg#Pixilator') format('svg');
+}
+
+body {
+  font-family: 'Pixilator',sans-serif;
+  color: black;
+  background-color: #212a43;
+}
+
+#main-container {
+  width: 1000px;
+  margin: 0 auto;
+}