umwd-components 0.1.40 → 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 +34 -7
  2. package/dist/esm/components/WebsitePlaceholder.js +34 -7
  3. package/package.json +1 -1
  4. package/src/components/WebsitePlaceholder.js +44 -6
  5. package/src/stories/WebsitePlaceholder.stories.js +30 -12
package/dist/cjs/components/WebsitePlaceholder.js CHANGED
@@ -13,7 +13,6 @@ var React = require('react');
13
13
  var PropTypes = require('prop-types');
14
14
  var material = require('@mui/material');
15
15
  var Image = require('next/image');
16
- require('@mui/icons-material');
17
16
 
18
17
  function WebsitePlaceholder({
19
18
  title,
@@ -22,12 +21,41 @@ function WebsitePlaceholder({
22
21
  }) {
23
22
  const theme = material.useTheme();
24
23
  const [visible, setVisible] = React.useState(true);
25
- const handleKeydown = e => {
26
- console.log("handleKeydown", e);
27
- if (e.key === "W") {
28
- setVisible(false);
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);
29
40
  }
30
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
+ }, []);
31
59
  return /*#__PURE__*/React.createElement(material.Box, {
32
60
  sx: [visible && {
33
61
  display: "grid",
@@ -43,8 +71,7 @@ function WebsitePlaceholder({
43
71
  left: 0,
44
72
  zIndex: 9000,
45
73
  isolation: "isolate"
46
- }],
47
- onKeyDown: e => handleKeydown()
74
+ }]
48
75
  }, visible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(material.Typography, {
49
76
  variant: "h1",
50
77
  align: "center"
package/dist/esm/components/WebsitePlaceholder.js CHANGED
@@ -9,7 +9,6 @@ import React from 'react';
9
9
  import PropTypes from 'prop-types';
10
10
  import { useTheme, Box, Typography } from '@mui/material';
11
11
  import Image from 'next/image';
12
- import '@mui/icons-material';
13
12
 
14
13
  function WebsitePlaceholder({
15
14
  title,
@@ -18,12 +17,41 @@ function WebsitePlaceholder({
18
17
  }) {
19
18
  const theme = useTheme();
20
19
  const [visible, setVisible] = React.useState(true);
21
- const handleKeydown = e => {
22
- console.log("handleKeydown", e);
23
- if (e.key === "W") {
24
- setVisible(false);
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);
25
36
  }
26
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
+ }, []);
27
55
  return /*#__PURE__*/React.createElement(Box, {
28
56
  sx: [visible && {
29
57
  display: "grid",
@@ -39,8 +67,7 @@ function WebsitePlaceholder({
39
67
  left: 0,
40
68
  zIndex: 9000,
41
69
  isolation: "isolate"
42
- }],
43
- onKeyDown: e => handleKeydown()
70
+ }]
44
71
  }, visible && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
45
72
  variant: "h1",
46
73
  align: "center"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.40",
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
@@ -4,20 +4,59 @@ import React from "react";
4
4
  import PropTypes from "prop-types";
5
5
  import { Typography, Box, useTheme } from "@mui/material";
6
6
  import Image from "next/image";
7
- import { Visibility } from "@mui/icons-material";
8
7
 
9
8
  function WebsitePlaceholder({ title, announcement, logo }) {
10
9
  const theme = useTheme();
11
10
 
12
11
  const [visible, setVisible] = React.useState(true);
13
12
 
14
- const handleKeydown = (e) => {
15
- console.log("handleKeydown", e);
16
- if (e.key === "W") {
17
- setVisible(false);
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);
18
36
  }
19
37
  };
20
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
+
21
60
  return (
22
61
  <Box
23
62
  sx={[
@@ -37,7 +76,6 @@ function WebsitePlaceholder({ title, announcement, logo }) {
37
76
  isolation: "isolate",
38
77
  },
39
78
  ]}
40
- onKeyDown={(e) => handleKeydown()}
41
79
  >
42
80
  {visible && (
43
81
  <>
package/src/stories/WebsitePlaceholder.stories.js CHANGED
@@ -7,18 +7,36 @@ export default {
7
7
  component: WebsitePlaceholder,
8
8
  };
9
9
 
10
- const Template = ({ title, announcement, logo, ...args }) => (
11
- <>
12
- <WebsitePlaceholder title={title} announcement={announcement} logo={logo}>
13
- <Box sx={{ height: "300px" }}></Box>
14
- <Box sx={{ height: "300px" }}></Box>
15
- <Box sx={{ height: "300px" }}></Box>
16
- <Box sx={{ height: "300px" }}></Box>
17
- <Box sx={{ height: "300px" }}></Box>
18
- <Box sx={{ height: "300px" }}></Box>
19
- </WebsitePlaceholder>
20
- </>
21
- );
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
+ };
22
40
 
23
41
  export const HelloWorld = Template.bind({});
24
42