diff --git a/README.md b/README.md
index 2dc88bf..e40ab54 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,8 @@
ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows made with React by Prozilla.
+[Live demo](https://os.prozilla.dev/)
+
> Please note that ProzillaOS is a WIP and far from complete. Many additional features will be added in the near future.
diff --git a/package-lock.json b/package-lock.json
index 096943b..288b22a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,10 +16,10 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"core-js": "^3.31.1",
- "dotenv": "^16.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.5",
+ "react-iframe": "^1.8.5",
"react-scripts": "5.0.1",
"react-svg": "^16.1.18",
"web-vitals": "^2.1.4"
@@ -7045,17 +7045,6 @@
"tslib": "^2.0.3"
}
},
- "node_modules/dotenv": {
- "version": "16.3.1",
- "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
- "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/motdotla/dotenv?sponsor=1"
- }
- },
"node_modules/dotenv-expand": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
@@ -14741,6 +14730,17 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
+ "node_modules/react-iframe": {
+ "version": "1.8.5",
+ "resolved": "https://registry.npmjs.org/react-iframe/-/react-iframe-1.8.5.tgz",
+ "integrity": "sha512-F4cQJGs3ydaG6fJWfuz9yLwOU0Trzl6kttXuUG+vYwosH8enOOFxZWEDQCSbNVO8ayjfYZeqLxEvdvcsSy4GvA==",
+ "dependencies": {
+ "object-assign": "^4.1.1"
+ },
+ "peerDependencies": {
+ "react": ">=16.x.x"
+ }
+ },
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index dad0acf..7fe3edb 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.5",
+ "react-iframe": "^1.8.5",
"react-scripts": "5.0.1",
"react-svg": "^16.1.18",
"web-vitals": "^2.1.4"
diff --git a/public/media/applications/icons/balls.svg b/public/media/applications/icons/balls.svg
new file mode 100644
index 0000000..4c9c103
--- /dev/null
+++ b/public/media/applications/icons/balls.svg
@@ -0,0 +1,18 @@
+
diff --git a/public/media/applications/icons/minesweeper.svg b/public/media/applications/icons/minesweeper.svg
new file mode 100644
index 0000000..1c1836a
--- /dev/null
+++ b/public/media/applications/icons/minesweeper.svg
@@ -0,0 +1,18 @@
+
diff --git a/public/media/applications/icons/wordle.svg b/public/media/applications/icons/wordle.svg
new file mode 100644
index 0000000..1a00a44
--- /dev/null
+++ b/public/media/applications/icons/wordle.svg
@@ -0,0 +1,18 @@
+
diff --git a/public/media/icons/close.svg b/public/media/icons/close.svg
new file mode 100644
index 0000000..edf38b5
--- /dev/null
+++ b/public/media/icons/close.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/media/icons/maximize.svg b/public/media/icons/maximize.svg
new file mode 100644
index 0000000..aeb1b0d
--- /dev/null
+++ b/public/media/icons/maximize.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/media/icons/minimize.svg b/public/media/icons/minimize.svg
new file mode 100644
index 0000000..266ab63
--- /dev/null
+++ b/public/media/icons/minimize.svg
@@ -0,0 +1,3 @@
+
diff --git a/public/media/icons/search.svg b/public/media/icons/search.svg
new file mode 100644
index 0000000..645909e
--- /dev/null
+++ b/public/media/icons/search.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/components/applications/templates/WebView.jsx b/src/components/applications/templates/WebView.jsx
new file mode 100644
index 0000000..f7c8c6f
--- /dev/null
+++ b/src/components/applications/templates/WebView.jsx
@@ -0,0 +1,13 @@
+import Iframe from "react-iframe";
+import styles from "./WebView.module.css";
+
+/**
+ * @param {Object} props
+ * @param {String} props.source
+ * @returns
+ */
+export function WebView(props) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/applications/templates/WebView.module.css b/src/components/applications/templates/WebView.module.css
new file mode 100644
index 0000000..d111fa1
--- /dev/null
+++ b/src/components/applications/templates/WebView.module.css
@@ -0,0 +1,6 @@
+.Web-view {
+ width: 100%;
+ height: 100%;
+ border: none;
+ background: none;
+}
\ No newline at end of file
diff --git a/src/features/applications/application.js b/src/features/applications/application.js
index 4a3369b..39e023e 100644
--- a/src/features/applications/application.js
+++ b/src/features/applications/application.js
@@ -1,4 +1,9 @@
export default class Application {
+ /**
+ * @param {String} name
+ * @param {String} id
+ * @param {React.ReactElement} windowContent
+ */
constructor(name, id, windowContent) {
Object.assign(this, { name, id, windowContent });
}
diff --git a/src/features/applications/applications.js b/src/features/applications/applications.js
index 8df43cf..3fe9d5d 100644
--- a/src/features/applications/applications.js
+++ b/src/features/applications/applications.js
@@ -1,4 +1,5 @@
/* eslint-disable eqeqeq */
+import { WebView } from "../../components/applications/templates/WebView.jsx";
import { Terminal } from "../../components/applications/terminal/Terminal.js";
import Application from "./application.js";
@@ -9,6 +10,9 @@ export default class ApplicationsManager {
new Application("Code Editor", "code-editor"),
new Application("File Explorer", "file-explorer"),
new Application("Media Viewer", "media-viewer"),
+ new Application("Wordle", "wordle", ),
+ new Application("Balls", "balls", ),
+ new Application("Minesweeper", "minesweeper", ),
]
static getApplication(id) {