feat: damage container

client/ui/damage.js

@@ -0,0 +1,33 @@
+// 3rd party.
+import * as I from 'immutable';
+import React, {useEffect, useState} from 'react';
+// 2nd party.
+import {compose} from '@avocado/core';
+import contempo from 'contempo';
+
+const decorate = compose(
+  contempo(`
+.damage {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+.particle {
+}
+.particle .text {
+  display: inline-block;
+  font-family: monospace;
+  font-weight: bold;
+  text-shadow: 1px 1px 0px black;
+}
+  `),
+);
+
+const DamageComponent = ({damageProton}) => {
+  return <div className="damage unselectable"></div>;
+}
+
+export default decorate(DamageComponent);

client/ui/index.js

@@ -3,10 +3,12 @@ import React from 'react';
 import {hot} from 'react-hot-loader/root';
 // 1st party.
 import ConnectionStatus from './connection-status';
+import Damage from './damage';
 import WorldTime from './world-time';
 
 const Ui = ({socket, worldTime}) => {
   return <React.Fragment>
+    <Damage />
     <WorldTime worldTime={worldTime} />
     <ConnectionStatus socket={socket} />
   </React.Fragment>;