react-robot-vacuum 1.0.4 → 1.0.6
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.
- package/README.md +3 -5
- package/package.json +1 -4
- package/dist/RobotVacuum.module.css +0 -151
- package/dist/index.css +0 -129
package/README.md
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
An animated React component featuring an autonomous robot vacuum that cleans your page by collecting dirt particles. Built with TypeScript, React and CSS
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## 🎮 Live Demo
|
|
6
|
+
|
|
7
|
+
Try it on [CodeSandbox](https://codesandbox.io/p/sandbox/react-robot-vacuum-4xlm7j)
|
|
6
8
|
|
|
7
9
|
## 📦 Installation
|
|
8
10
|
|
|
@@ -75,10 +77,6 @@ function App() {
|
|
|
75
77
|
- **`startCleaning()`** - Manually start the cleaning process
|
|
76
78
|
- **`reset()`** - Reset robot to dock and generate new dirt
|
|
77
79
|
|
|
78
|
-
## 🎮 Live Demo
|
|
79
|
-
|
|
80
|
-
Try it on [CodeSandbox](https://codesandbox.io/p/sandbox/react-robot-vacuum-4xlm7j)
|
|
81
|
-
|
|
82
80
|
## 🛠️ Development
|
|
83
81
|
|
|
84
82
|
```bash
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-robot-vacuum",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "An animated React component featuring a robot vacuum that autonomously cleans your page by collecting dirt particles",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -65,8 +65,5 @@
|
|
|
65
65
|
"typescript": "^5.3.0",
|
|
66
66
|
"typescript-eslint": "^8.51.0",
|
|
67
67
|
"vite": "^7.3.0"
|
|
68
|
-
},
|
|
69
|
-
"dependencies": {
|
|
70
|
-
"react-robot-vacuum": "^1.0.2"
|
|
71
68
|
}
|
|
72
69
|
}
|
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
position: absolute;
|
|
3
|
-
width: 100%;
|
|
4
|
-
height: 100%;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
top: 0;
|
|
7
|
-
left: 0;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.robot {
|
|
11
|
-
visibility: hidden; /* Hide the robot by default */
|
|
12
|
-
position: absolute;
|
|
13
|
-
z-index: 100;
|
|
14
|
-
width: 25px;
|
|
15
|
-
height: 25px;
|
|
16
|
-
background-color: #333;
|
|
17
|
-
border-radius: 50%;
|
|
18
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
/* Robot center button */
|
|
22
|
-
.robot::before {
|
|
23
|
-
content: "";
|
|
24
|
-
position: absolute;
|
|
25
|
-
top: 50%;
|
|
26
|
-
left: 50%;
|
|
27
|
-
transform: translate(-50%, -50%);
|
|
28
|
-
width: 7px;
|
|
29
|
-
height: 7px;
|
|
30
|
-
background-color: #666;
|
|
31
|
-
border-radius: 50%;
|
|
32
|
-
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
/* State styles for the robot */
|
|
36
|
-
.idle::before {
|
|
37
|
-
background-color: #c0c0c0;
|
|
38
|
-
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Glowing effect */
|
|
39
|
-
animation: glow 1s infinite alternate;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.cleaning::before {
|
|
43
|
-
background-color: #00ff00;
|
|
44
|
-
animation: flash 0.5s infinite alternate;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.returning::before {
|
|
48
|
-
background-color: orange;
|
|
49
|
-
animation: flash 0.5s infinite alternate;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
/* Keyframe for glowing effect */
|
|
53
|
-
@keyframes glow {
|
|
54
|
-
0% {
|
|
55
|
-
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
|
|
56
|
-
}
|
|
57
|
-
100% {
|
|
58
|
-
box-shadow: 0 0 20px rgba(255, 255, 255, 1);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
/* Keyframe for flashing effect */
|
|
63
|
-
@keyframes flash {
|
|
64
|
-
0% {
|
|
65
|
-
opacity: 1;
|
|
66
|
-
}
|
|
67
|
-
100% {
|
|
68
|
-
opacity: 0.5;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/* Robot wheels */
|
|
73
|
-
.wheel {
|
|
74
|
-
position: absolute;
|
|
75
|
-
width: 2px;
|
|
76
|
-
height: 7px;
|
|
77
|
-
background-color: #444;
|
|
78
|
-
border-radius: 1px;
|
|
79
|
-
top: calc(50% - 4px);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.wheel.left {
|
|
83
|
-
left: -1px;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.wheel.right {
|
|
87
|
-
right: -1px;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
/* Robot sensors */
|
|
91
|
-
.sensor {
|
|
92
|
-
position: absolute;
|
|
93
|
-
width: 4px;
|
|
94
|
-
height: 4px;
|
|
95
|
-
background-color: #444;
|
|
96
|
-
border-radius: 50%;
|
|
97
|
-
top: 3px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.sensor.left {
|
|
101
|
-
left: 3px;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.sensor.right {
|
|
105
|
-
right: 3px;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
/* Robot front panel */
|
|
109
|
-
.front-panel {
|
|
110
|
-
position: absolute;
|
|
111
|
-
top: 15px;
|
|
112
|
-
left: 50%;
|
|
113
|
-
transform: translateX(-50%);
|
|
114
|
-
width: 13px;
|
|
115
|
-
height: 7px;
|
|
116
|
-
background-color: #666;
|
|
117
|
-
border-radius: 7px 7px 0 0;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.dirt {
|
|
121
|
-
position: absolute;
|
|
122
|
-
z-index: 100;
|
|
123
|
-
width: 5px;
|
|
124
|
-
height: 5px;
|
|
125
|
-
background-color: #fff; /* Light gray color */
|
|
126
|
-
border: 1px solid black;
|
|
127
|
-
}
|
|
128
|
-
.dock {
|
|
129
|
-
position: absolute;
|
|
130
|
-
top: 5px;
|
|
131
|
-
left: 25px;
|
|
132
|
-
transform: translateX(-50%);
|
|
133
|
-
width: 20px;
|
|
134
|
-
height: 20px;
|
|
135
|
-
background-color: #333; /* Dark color for the dock */
|
|
136
|
-
border-radius: 10px; /* Rounded corners */
|
|
137
|
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
|
|
138
|
-
justify-content: center;
|
|
139
|
-
align-items: center;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.dock::before {
|
|
143
|
-
content: "";
|
|
144
|
-
position: absolute;
|
|
145
|
-
left: -5px;
|
|
146
|
-
top: -5px; /* Adjust as needed */
|
|
147
|
-
width: 30px; /* Adjust as needed */
|
|
148
|
-
height: 10px; /* Adjust as needed */
|
|
149
|
-
background-color: #333; /* Same color as the dock */
|
|
150
|
-
border-radius: 5px 5px 0 0; /* Rounded top corners */
|
|
151
|
-
}
|
package/dist/index.css
DELETED
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
/* src/RobotVacuum/RobotVacuum.module.css */
|
|
2
|
-
.container {
|
|
3
|
-
position: absolute;
|
|
4
|
-
width: 100%;
|
|
5
|
-
height: 100%;
|
|
6
|
-
overflow: hidden;
|
|
7
|
-
top: 0;
|
|
8
|
-
left: 0;
|
|
9
|
-
}
|
|
10
|
-
.robot {
|
|
11
|
-
visibility: hidden;
|
|
12
|
-
position: absolute;
|
|
13
|
-
z-index: 100;
|
|
14
|
-
width: 25px;
|
|
15
|
-
height: 25px;
|
|
16
|
-
background-color: #333;
|
|
17
|
-
border-radius: 50%;
|
|
18
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
19
|
-
}
|
|
20
|
-
.robot::before {
|
|
21
|
-
content: "";
|
|
22
|
-
position: absolute;
|
|
23
|
-
top: 50%;
|
|
24
|
-
left: 50%;
|
|
25
|
-
transform: translate(-50%, -50%);
|
|
26
|
-
width: 7px;
|
|
27
|
-
height: 7px;
|
|
28
|
-
background-color: #666;
|
|
29
|
-
border-radius: 50%;
|
|
30
|
-
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
31
|
-
}
|
|
32
|
-
.idle::before {
|
|
33
|
-
background-color: #c0c0c0;
|
|
34
|
-
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
|
|
35
|
-
animation: glow 1s infinite alternate;
|
|
36
|
-
}
|
|
37
|
-
.cleaning::before {
|
|
38
|
-
background-color: #00ff00;
|
|
39
|
-
animation: flash 0.5s infinite alternate;
|
|
40
|
-
}
|
|
41
|
-
.returning::before {
|
|
42
|
-
background-color: orange;
|
|
43
|
-
animation: flash 0.5s infinite alternate;
|
|
44
|
-
}
|
|
45
|
-
@keyframes glow {
|
|
46
|
-
0% {
|
|
47
|
-
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
|
|
48
|
-
}
|
|
49
|
-
100% {
|
|
50
|
-
box-shadow: 0 0 20px rgba(255, 255, 255, 1);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
@keyframes flash {
|
|
54
|
-
0% {
|
|
55
|
-
opacity: 1;
|
|
56
|
-
}
|
|
57
|
-
100% {
|
|
58
|
-
opacity: 0.5;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
.wheel {
|
|
62
|
-
position: absolute;
|
|
63
|
-
width: 2px;
|
|
64
|
-
height: 7px;
|
|
65
|
-
background-color: #444;
|
|
66
|
-
border-radius: 1px;
|
|
67
|
-
top: calc(50% - 4px);
|
|
68
|
-
}
|
|
69
|
-
.wheel.left {
|
|
70
|
-
left: -1px;
|
|
71
|
-
}
|
|
72
|
-
.wheel.right {
|
|
73
|
-
right: -1px;
|
|
74
|
-
}
|
|
75
|
-
.sensor {
|
|
76
|
-
position: absolute;
|
|
77
|
-
width: 4px;
|
|
78
|
-
height: 4px;
|
|
79
|
-
background-color: #444;
|
|
80
|
-
border-radius: 50%;
|
|
81
|
-
top: 3px;
|
|
82
|
-
}
|
|
83
|
-
.sensor.left {
|
|
84
|
-
left: 3px;
|
|
85
|
-
}
|
|
86
|
-
.sensor.right {
|
|
87
|
-
right: 3px;
|
|
88
|
-
}
|
|
89
|
-
.front-panel {
|
|
90
|
-
position: absolute;
|
|
91
|
-
top: 15px;
|
|
92
|
-
left: 50%;
|
|
93
|
-
transform: translateX(-50%);
|
|
94
|
-
width: 13px;
|
|
95
|
-
height: 7px;
|
|
96
|
-
background-color: #666;
|
|
97
|
-
border-radius: 7px 7px 0 0;
|
|
98
|
-
}
|
|
99
|
-
.dirt {
|
|
100
|
-
position: absolute;
|
|
101
|
-
z-index: 100;
|
|
102
|
-
width: 5px;
|
|
103
|
-
height: 5px;
|
|
104
|
-
background-color: #fff;
|
|
105
|
-
border: 1px solid black;
|
|
106
|
-
}
|
|
107
|
-
.dock {
|
|
108
|
-
position: absolute;
|
|
109
|
-
top: 5px;
|
|
110
|
-
left: 25px;
|
|
111
|
-
transform: translateX(-50%);
|
|
112
|
-
width: 20px;
|
|
113
|
-
height: 20px;
|
|
114
|
-
background-color: #333;
|
|
115
|
-
border-radius: 10px;
|
|
116
|
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
117
|
-
justify-content: center;
|
|
118
|
-
align-items: center;
|
|
119
|
-
}
|
|
120
|
-
.dock::before {
|
|
121
|
-
content: "";
|
|
122
|
-
position: absolute;
|
|
123
|
-
left: -5px;
|
|
124
|
-
top: -5px;
|
|
125
|
-
width: 30px;
|
|
126
|
-
height: 10px;
|
|
127
|
-
background-color: #333;
|
|
128
|
-
border-radius: 5px 5px 0 0;
|
|
129
|
-
}
|