aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/MainViewModal.tsx
diff options
context:
space:
mode:
authorandrewdkim <adkim414@gmail.com>2019-10-01 18:55:50 -0400
committerandrewdkim <adkim414@gmail.com>2019-10-01 18:55:50 -0400
commit23619154f8688ffcb25a988158d75934c0cacbf7 (patch)
treed7462da0f0e8b9de091263af166959872e8af0f6 /src/client/views/MainViewModal.tsx
parent45b9f489033cd323614463ca9c36f41900bf1965 (diff)
parent69e4a936c4eb0cc2e35e4e7f3258aed1f72b8da7 (diff)
still unfinished
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