umwd-components 0.1.197 → 0.1.199

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 (4) hide show
  1. package/dist/cjs/components/FluidBackground.js +26 -6
  2. package/dist/esm/components/FluidBackground.js +26 -6
  3. package/package.json +1 -1
  4. package/src/components/FluidBackground.tsx +30 -8
package/dist/cjs/components/FluidBackground.js CHANGED
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  /*
2
3
  * UMWD-Components
3
4
  * @copyright Jelle Paulus
@@ -11,15 +12,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
11
12
  var React = require('react');
12
13
 
13
14
  function FluidBackground() {
14
- const [objectX, setObjectX] = React.useState(window.innerWidth / 2); // Initial position
15
- const [objectY, setObjectY] = React.useState(window.innerHeight / 2);
15
+ const [objectX, setObjectX] = React.useState(0);
16
+ const [objectY, setObjectY] = React.useState(0);
16
17
  const [brightness, setBrightness] = React.useState(1);
17
18
  const maxBrightness = 1.5;
18
19
  const minBrightness = 0.5;
19
- const minSize = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
20
- const maxSize = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
21
- const [ObjectSize, setObjectSize] = React.useState(maxSize); // Initial size
22
- let transitionInterval = null; // Declare transitionInterval variable
20
+ const [ObjectSize, setObjectSize] = React.useState(0);
21
+ const [minSize, setMinSize] = React.useState(0);
22
+ const [maxSize, setMaxSize] = React.useState(0);
23
+ let transitionInterval = null;
24
+ React.useEffect(() => {
25
+ setObjectX(window.innerWidth / 2);
26
+ setObjectY(window.innerHeight / 2);
27
+ setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
28
+ setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
29
+ setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
30
+ }, []);
31
+
32
+ // const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
33
+ // const [objectY, setObjectY] = useState(window.innerHeight / 2);
34
+ // const [brightness, setBrightness] = useState(1);
35
+ // const maxBrightness = 1.5;
36
+ // const minBrightness = 0.5;
37
+ // const minSize =
38
+ // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
39
+ // const maxSize =
40
+ // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
41
+ // const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
42
+ // let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
23
43
 
24
44
  const handleMove = (x, y) => {
25
45
  setObjectX(x);
package/dist/esm/components/FluidBackground.js CHANGED
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  /*
2
3
  * UMWD-Components
3
4
  * @copyright Jelle Paulus
@@ -7,15 +8,34 @@
7
8
  import React__default, { useState, useEffect } from 'react';
8
9
 
9
10
  function FluidBackground() {
10
- const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
11
- const [objectY, setObjectY] = useState(window.innerHeight / 2);
11
+ const [objectX, setObjectX] = useState(0);
12
+ const [objectY, setObjectY] = useState(0);
12
13
  const [brightness, setBrightness] = useState(1);
13
14
  const maxBrightness = 1.5;
14
15
  const minBrightness = 0.5;
15
- const minSize = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
16
- const maxSize = Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
17
- const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
18
- let transitionInterval = null; // Declare transitionInterval variable
16
+ const [ObjectSize, setObjectSize] = useState(0);
17
+ const [minSize, setMinSize] = useState(0);
18
+ const [maxSize, setMaxSize] = useState(0);
19
+ let transitionInterval = null;
20
+ useEffect(() => {
21
+ setObjectX(window.innerWidth / 2);
22
+ setObjectY(window.innerHeight / 2);
23
+ setObjectSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
24
+ setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
25
+ setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
26
+ }, []);
27
+
28
+ // const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
29
+ // const [objectY, setObjectY] = useState(window.innerHeight / 2);
30
+ // const [brightness, setBrightness] = useState(1);
31
+ // const maxBrightness = 1.5;
32
+ // const minBrightness = 0.5;
33
+ // const minSize =
34
+ // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
35
+ // const maxSize =
36
+ // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
37
+ // const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
38
+ // let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
19
39
 
20
40
  const handleMove = (x, y) => {
21
41
  setObjectX(x);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "umwd-components",
3
- "version": "0.1.197",
3
+ "version": "0.1.199",
4
4
  "description": "UMWD Component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/FluidBackground.tsx CHANGED
@@ -1,17 +1,39 @@
1
+ "use client";
2
+
1
3
  import React, { useState, useEffect } from "react";
2
4
 
3
5
  function FluidBackground() {
4
- const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
5
- const [objectY, setObjectY] = useState(window.innerHeight / 2);
6
+ const [objectX, setObjectX] = useState(0);
7
+ const [objectY, setObjectY] = useState(0);
6
8
  const [brightness, setBrightness] = useState(1);
7
9
  const maxBrightness = 1.5;
8
10
  const minBrightness = 0.5;
9
- const minSize =
10
- Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
11
- const maxSize =
12
- Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
13
- const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
14
- let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
11
+ const [ObjectSize, setObjectSize] = useState(0);
12
+ const [minSize, setMinSize] = useState(0);
13
+ const [maxSize, setMaxSize] = useState(0);
14
+ let transitionInterval: NodeJS.Timeout | null = null;
15
+
16
+ useEffect(() => {
17
+ setObjectX(window.innerWidth / 2);
18
+ setObjectY(window.innerHeight / 2);
19
+ setObjectSize(
20
+ Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2
21
+ );
22
+ setMinSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6);
23
+ setMaxSize(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2);
24
+ }, []);
25
+
26
+ // const [objectX, setObjectX] = useState(window.innerWidth / 2); // Initial position
27
+ // const [objectY, setObjectY] = useState(window.innerHeight / 2);
28
+ // const [brightness, setBrightness] = useState(1);
29
+ // const maxBrightness = 1.5;
30
+ // const minBrightness = 0.5;
31
+ // const minSize =
32
+ // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 6;
33
+ // const maxSize =
34
+ // Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2) / 2;
35
+ // const [ObjectSize, setObjectSize] = useState(maxSize); // Initial size
36
+ // let transitionInterval: NodeJS.Timeout | null = null; // Declare transitionInterval variable
15
37
 
16
38
  const handleMove = (x: number, y: number) => {
17
39
  setObjectX(x);