umwd-components 0.1.39 → 0.1.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/WebsitePlaceholder.js +42 -12
  2. package/dist/esm/components/WebsitePlaceholder.js +42 -12
  3. package/package.json +1 -1
  4. package/src/components/WebsitePlaceholder.js +81 -34
  5. package/src/stories/WebsitePlaceholder.stories.js +31 -4
package/dist/cjs/components/WebsitePlaceholder.js CHANGED
@@ -20,29 +20,59 @@ function WebsitePlaceholder({
20
20
  logo
21
21
  }) {
22
22
  const theme = material.useTheme();
23
- console.log(theme.palette.primary.main);
24
- const handleKeydown = e => {
25
- console.log(e);
23
+ const [visible, setVisible] = React.useState(true);
24
+ const [keysPressed, setKeysPressed] = React.useState({});
25
+ const keyDownHandler = event => {
26
+ // console.log("User pressed: ", event);
27
+ event.preventDefault();
28
+ const newPressedKeys = {
29
+ ...keysPressed,
30
+ [event.key]: true
31
+ };
32
+ setKeysPressed(newPressedKeys);
33
+ console.log("newPressedKeys: ", newPressedKeys);
34
+ if (newPressedKeys["w"] && newPressedKeys["a"] && newPressedKeys["s"] && newPressedKeys["d"]) {
35
+ event.preventDefault();
36
+
37
+ // CONSOLE.log("User pressed WASD");
38
+
39
+ setVisible(!visible);
40
+ }
26
41
  };
42
+ const keyUpHandler = event => {
43
+ // console.log("User released: ", event);
44
+ event.preventDefault();
45
+ const newPressedKeys = {
46
+ ...keysPressed
47
+ };
48
+ delete newPressedKeys[event.key];
49
+ setKeysPressed(newPressedKeys);
50
+ };
51
+ React.useEffect(() => {
52
+ document.addEventListener("keydown", keyDownHandler);
53
+ document.addEventListener("keyup", keyUpHandler);
54
+ return () => {
55
+ document.removeEventListener("keydown", keyDownHandler);
56
+ document.removeEventListener("keyup", keyUpHandler);
57
+ };
58
+ }, []);
27
59
  return /*#__PURE__*/React.createElement(material.Box, {
28
- sx: {
60
+ sx: [visible && {
29
61
  display: "grid",
30
62
  justifyItems: "center",
31
63
  alignItems: "center",
32
64
  backgroundColor: theme.palette.primary.main,
33
65
  height: "100vh",
66
+ maxHeight: "100vh",
34
67
  width: "100vw",
35
68
  overflow: "hidden",
36
69
  position: "fixed",
37
70
  top: 0,
38
71
  left: 0,
39
- zIndex: 1000,
72
+ zIndex: 9000,
40
73
  isolation: "isolate"
41
- },
42
- onKeyDown: e => {
43
- handleKeydown(e);
44
- }
45
- }, /*#__PURE__*/React.createElement(material.Typography, {
74
+ }]
75
+ }, visible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
46
76
  variant: "h1",
47
77
  align: "center"
48
78
  }, title), logo?.url && /*#__PURE__*/React.createElement(Image, {
@@ -53,13 +83,13 @@ function WebsitePlaceholder({
53
83
  }), /*#__PURE__*/React.createElement(material.Typography, {
54
84
  variant: "h3",
55
85
  align: "center"
56
- }, announcement));
86
+ }, announcement)));
57
87
  }
58
88
  WebsitePlaceholder.propTypes = {
59
89
  title: PropTypes.string.isRequired,
60
90
  announcement: PropTypes.string.isRequired,
61
91
  logo: PropTypes.shape({
62
- src: PropTypes.string.isRequired,
92
+ url: PropTypes.string.isRequired,
63
93
  alt: PropTypes.string,
64
94
  width: PropTypes.string,
65
95
  height: PropTypes.string
package/dist/esm/components/WebsitePlaceholder.js CHANGED
@@ -16,29 +16,59 @@ function WebsitePlaceholder({
16
16
  logo
17
17
  }) {
18
18
  const theme = useTheme();
19
- console.log(theme.palette.primary.main);
20
- const handleKeydown = e => {
21
- console.log(e);
19
+ const [visible, setVisible] = React.useState(true);
20
+ const [keysPressed, setKeysPressed] = React.useState({});
21
+ const keyDownHandler = event => {
22
+ // console.log("User pressed: ", event);
23
+ event.preventDefault();
24
+ const newPressedKeys = {
25
+ ...keysPressed,
26
+ [event.key]: true
27
+ };
28
+ setKeysPressed(newPressedKeys);
29
+ console.log("newPressedKeys: ", newPressedKeys);
30
+ if (newPressedKeys["w"] && newPressedKeys["a"] && newPressedKeys["s"] && newPressedKeys["d"]) {
31
+ event.preventDefault();
32
+
33
+ // CONSOLE.log("User pressed WASD");
34
+
35
+ setVisible(!visible);
36
+ }
22
37
  };
38
+ const keyUpHandler = event => {
39
+ // console.log("User released: ", event);
40
+ event.preventDefault();
41
+ const newPressedKeys = {
42
+ ...keysPressed
43
+ };
44
+ delete newPressedKeys[event.key];
45
+ setKeysPressed(newPressedKeys);
46
+ };
47
+ React.useEffect(() => {
48
+ document.addEventListener("keydown", keyDownHandler);
49
+ document.addEventListener("keyup", keyUpHandler);
50
+ return () => {
51
+ document.removeEventListener("keydown", keyDownHandler);
52
+ document.removeEventListener("keyup", keyUpHandler);
53
+ };
54
+ }, []);
23
55
  return /*#__PURE__*/React.createElement(Box, {
24
- sx: {
56
+ sx: [visible && {
25
57
  display: "grid",
26
58
  justifyItems: "center",
27
59
  alignItems: "center",
28
60
  backgroundColor: theme.palette.primary.main,
29
61
  height: "100vh",
62
+ maxHeight: "100vh",
30
63
  width: "100vw",
31
64
  overflow: "hidden",
32
65
  position: "fixed",
33
66
  top: 0,
34
67
  left: 0,
35
- zIndex: 1000,
68
+ zIndex: 9000,
36
69
  isolation: "isolate"
37
- },
38
- onKeyDown: e => {
39
- handleKeydown(e);
40
- }
41
- }, /*#__PURE__*/React.createElement(Typography, {
70
+ }]
71
+ }, visible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
42
72
  variant: "h1",
43
73
  align: "center"
44
74
  }, title), logo?.url && /*#__PURE__*/React.createElement(Image, {
@@ -49,13 +79,13 @@ function WebsitePlaceholder({
49
79
  }), /*#__PURE__*/React.createElement(Typography, {
50
80
  variant: "h3",
51
81
  align: "center"
52
- }, announcement));
82
+ }, announcement)));
53
83
  }
54
84
  WebsitePlaceholder.propTypes = {
55
85
  title: PropTypes.string.isRequired,
56
86
  announcement: PropTypes.string.isRequired,
57
87
  logo: PropTypes.shape({
58
- src: PropTypes.string.isRequired,
88
+ url: PropTypes.string.isRequired,
59
89
  alt: PropTypes.string,
60
90
  width: PropTypes.string,
61
91
  height: PropTypes.string
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.39",
3
+ "version": "0.1.41",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/WebsitePlaceholder.js CHANGED
@@ -8,46 +8,93 @@ import Image from "next/image";
8
8
  function WebsitePlaceholder({ title, announcement, logo }) {
9
9
  const theme = useTheme();
10
10
 
11
- console.log(theme.palette.primary.main);
11
+ const [visible, setVisible] = React.useState(true);
12
12
 
13
- const handleKeydown = (e) => {
14
- console.log(e);
13
+ const [keysPressed, setKeysPressed] = React.useState({});
14
+
15
+ const keyDownHandler = (event) => {
16
+ // console.log("User pressed: ", event);
17
+ event.preventDefault();
18
+
19
+ const newPressedKeys = { ...keysPressed, [event.key]: true };
20
+
21
+ setKeysPressed(newPressedKeys);
22
+
23
+ console.log("newPressedKeys: ", newPressedKeys);
24
+
25
+ if (
26
+ newPressedKeys["w"] &&
27
+ newPressedKeys["a"] &&
28
+ newPressedKeys["s"] &&
29
+ newPressedKeys["d"]
30
+ ) {
31
+ event.preventDefault();
32
+
33
+ // CONSOLE.log("User pressed WASD");
34
+
35
+ setVisible(!visible);
36
+ }
15
37
  };
16
38
 
39
+ const keyUpHandler = (event) => {
40
+ // console.log("User released: ", event);
41
+ event.preventDefault();
42
+
43
+ const newPressedKeys = { ...keysPressed };
44
+
45
+ delete newPressedKeys[event.key];
46
+
47
+ setKeysPressed(newPressedKeys);
48
+ };
49
+
50
+ React.useEffect(() => {
51
+ document.addEventListener("keydown", keyDownHandler);
52
+ document.addEventListener("keyup", keyUpHandler);
53
+
54
+ return () => {
55
+ document.removeEventListener("keydown", keyDownHandler);
56
+ document.removeEventListener("keyup", keyUpHandler);
57
+ };
58
+ }, []);
59
+
17
60
  return (
18
61
  <Box
19
- sx={{
20
- display: "grid",
21
- justifyItems: "center",
22
- alignItems: "center",
23
- backgroundColor: theme.palette.primary.main,
24
- height: "100vh",
25
- width: "100vw",
26
- overflow: "hidden",
27
- position: "fixed",
28
- top: 0,
29
- left: 0,
30
- zIndex: 1000,
31
- isolation: "isolate",
32
- }}
33
- onKeyDown={(e) => {
34
- handleKeydown(e);
35
- }}
62
+ sx={[
63
+ visible && {
64
+ display: "grid",
65
+ justifyItems: "center",
66
+ alignItems: "center",
67
+ backgroundColor: theme.palette.primary.main,
68
+ height: "100vh",
69
+ maxHeight: "100vh",
70
+ width: "100vw",
71
+ overflow: "hidden",
72
+ position: "fixed",
73
+ top: 0,
74
+ left: 0,
75
+ zIndex: 9000,
76
+ isolation: "isolate",
77
+ },
78
+ ]}
36
79
  >
37
- <Typography variant="h1" align="center">
38
- {title}
39
- </Typography>
40
- {logo?.url && (
41
- <Image
42
- src={logo.url}
43
- alt={logo.alt || "logo"}
44
- width={logo.width || "200"}
45
- height={logo.height || "200"}
46
- />
80
+ {visible && (
81
+ <>
82
+ <Typography variant="h1" align="center">
83
+ {title}
84
+ </Typography>
85
+ {logo?.url && (
86
+ <Image
87
+ src={logo.url}
88
+ alt={logo.alt || "logo"}
89
+ width={logo.width || "200"}
90
+ height={logo.height || "200"}
91
+ />
92
+ )}
93
+ <Typography variant="h3" align="center">
94
+ {announcement}
95
+ </Typography>
96
+ </>
47
97
  )}
48
- <Typography variant="h3" align="center">
49
- {announcement}
50
- </Typography>
51
98
  </Box>
52
99
  );
53
100
  }
@@ -56,7 +103,7 @@ WebsitePlaceholder.propTypes = {
56
103
  title: PropTypes.string.isRequired,
57
104
  announcement: PropTypes.string.isRequired,
58
105
  logo: PropTypes.shape({
59
- src: PropTypes.string.isRequired,
106
+ url: PropTypes.string.isRequired,
60
107
  alt: PropTypes.string,
61
108
  width: PropTypes.string,
62
109
  height: PropTypes.string,
package/src/stories/WebsitePlaceholder.stories.js CHANGED
@@ -1,15 +1,42 @@
1
1
  import WebsitePlaceholder from "../components/WebsitePlaceholder";
2
2
  import React from "react";
3
+ import { Box } from "@mui/material";
3
4
 
4
5
  export default {
5
6
  title: "UMWD/WebsitePlaceholder",
6
7
  component: WebsitePlaceholder,
7
- // argTypes: { numberOfChildren: { type: "number" } },
8
8
  };
9
9
 
10
- const Template = ({ title, announcement, logo, ...args }) => (
11
- <WebsitePlaceholder title={title} announcement={announcement} logo={logo} />
12
- );
10
+ const Template = ({ title, announcement, logo, ...args }) => {
11
+ const [visible, setVisible] = React.useState(true);
12
+
13
+ const handleKeydown = (e) => {
14
+ console.log("handleKeydown", e);
15
+ setVisible(!visible);
16
+ if (e.key === "W") {
17
+ setVisible(false);
18
+ }
19
+ };
20
+
21
+ return (
22
+ <>
23
+ <WebsitePlaceholder
24
+ title={title}
25
+ announcement={announcement}
26
+ logo={logo}
27
+ onKeyDown={handleKeydown}
28
+ visible={visible}
29
+ >
30
+ <Box sx={{ height: "300px" }}></Box>
31
+ <Box sx={{ height: "300px" }}></Box>
32
+ <Box sx={{ height: "300px" }}></Box>
33
+ <Box sx={{ height: "300px" }}></Box>
34
+ <Box sx={{ height: "300px" }}></Box>
35
+ <Box sx={{ height: "300px" }}></Box>
36
+ </WebsitePlaceholder>
37
+ </>
38
+ );
39
+ };
13
40
 
14
41
  export const HelloWorld = Template.bind({});
15
42