Add timer display component

Hyuchia · Hyuchia · commit b260364fb614 · 2020-02-01T18:35:06.000-06:00
diff --git a/src/components/timer-display/index.css b/src/components/timer-display/index.css
@@ -0,0 +1,10 @@
+timer-display {
+	position: absolute;
+	top: 0;
+	width: 100%;
+	height: 0.5rem;
+
+	& div {
+		background: rgba(255, 255, 255, 0.2);
+	}
+}
diff --git a/src/components/timer-display/index.js b/src/components/timer-display/index.js
@@ -0,0 +1,80 @@
+import { Component } from './../../lib/Component';
+import { Util } from '@aegis-framework/artemis';
+
+class TimerDisplay extends Component {
+
+	constructor (...args) {
+		super (...args);
+
+		this.props = {
+			callback: () => {},
+			time: 0,
+			step: 0,
+			timer: null,
+			tick: null
+		};
+
+		this.state = {
+			elapsed: 0,
+			remaining: 0,
+			value: 100
+		};
+	}
+
+	willMount () {
+		this.setProps ({
+			step: this.props.time / 100
+		});
+
+		this.setState ({
+			remaining: this.props.time
+		});
+
+		return Promise.resolve ();
+	}
+
+	didMount () {
+		this.setProps ({
+			tick: () => {
+				this.setProps({
+					timer: setTimeout (() => {
+						if (this.state.elapsed >= this.props.time) {
+							Util.callAsync (this.props.callback, this.engine).then (() => {
+								clearTimeout (this.props.timer);
+								if (this.parentNode) {
+									this.element ().remove ();
+								}
+							});
+						} else {
+							this.setState ({
+								elapsed: this.state.elapsed + this.props.step,
+								remaining: this.state.remaining - this.props.step,
+								value: (1 - (this.state.elapsed / this.props.time)) * 100
+							});
+
+							this.forceRender ();
+							this.props.tick ();
+						}
+
+
+					}, this.props.step)
+				});
+			}
+		});
+
+		this.props.tick ();
+
+		return Promise.resolve ();
+	}
+
+	render () {
+		return `
+			<div style="width: ${this.state.value}%;"></div>
+		`;
+	}
+}
+
+TimerDisplay.tag = 'timer-display';
+
+
+export default TimerDisplay;
diff --git a/src/index.css b/src/index.css
@@ -44,4 +44,5 @@
 @import './components/slot-container/index.css';
 @import './components/text-box/index.css';
 @import './components/text-input/index.css';
+@import './components/timer-display/index.css';
 @import './components/visual-novel/index.css';
diff --git a/src/index.js b/src/index.js
@@ -122,6 +122,7 @@ import SettingsScreen from './components/settings-screen';
 import SlotContainer from './components/slot-container';
 import TextBox from './components/text-box';
 import TextInput from './components/text-input';
+import TimerDisplay from './components/timer-display';
 import VisualNovel from './components/visual-novel';
 
 Monogatari._components = [
@@ -145,6 +146,7 @@ Monogatari._components = [
 	SlotContainer,
 	TextBox,
 	TextInput,
+	TimerDisplay,
 	VisualNovel,
 ];
 
