aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/MainViewModal.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/MainViewModal.tsx')
-rw-r--r--src/client/views/MainViewModal.tsx44
1 files changed, 44 insertions, 0 deletions
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
new file mode 100644
index 000000000..b7fdd6168
--- /dev/null
+++ b/src/client/views/MainViewModal.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import "./MainViewModal.scss";
+
+export interface MainViewOverlayProps {
+ isDisplayed: boolean;
+ interactive: boolean;
+ contents: string | JSX.Element;
+ dialogueBoxStyle?: React.CSSProperties;
+ overlayStyle?: React.CSSProperties;
+ dialogueBoxDisplayedOpacity?: number;
+ overlayDisplayedOpacity?: number;
+}
+
+export default class MainViewModal extends React.Component<MainViewOverlayProps> {
+
+ render() {
+ let p = this.props;
+ let dialogueOpacity = p.dialogueBoxDisplayedOpacity || 1;
+ let overlayOpacity = p.overlayDisplayedOpacity || 0.4;
+ return (
+ <div style={{ pointerEvents: p.isDisplayed ? p.interactive ? "all" : "none" : "none" }}>
+ <div
+ className={"dialogue-box"}
+ style={{
+ backgroundColor: "gainsboro",
+ borderColor: "black",
+ ...(p.dialogueBoxStyle || {}),
+ opacity: p.isDisplayed ? dialogueOpacity : 0
+ }}
+ >{p.contents}</div>
+ <div
+ className={"overlay"}
+ style={{
+ backgroundColor: "gainsboro",
+ ...(p.overlayStyle || {}),
+ opacity: p.isDisplayed ? overlayOpacity : 0
+ }}
+ />
+ </div>
+ );
+ }
+
+
+} \ No newline at end of file