Added logic simulator app

README.md

@@ -22,9 +22,17 @@ ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows.
 
 ## Packages
 
-- [`prozilla-os`][prozilla-os] - A bundle containing all other packages
+Each package follows a similar structure and has a `src/main.ts` entry file.
+
+- [`prozilla-os`][prozilla-os] - A bundle containing all essential packages and standard applications of ProzillaOS
+
+### Essentials
+
 - [`@prozilla-os/core`][core] - Core functionality, React components and hooks
 - [`@prozilla-os/shared`][shared] - Shared functions and utilities
+
+### Standard applications
+
 - [`@prozilla-os/file-explorer`][file-explorer] - File explorer app
 - [`@prozilla-os/terminal`][terminal] - Terminal/shell app
 - [`@prozilla-os/text-editor`][text-editor] - Text editor app
@@ -33,6 +41,56 @@ ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows.
 - [`@prozilla-os/browser`][browser] - Browser app
 - [`@prozilla-os/calculator`][calculator] - Calculator app
 
+### Non-standard applications
+
+- [`@prozilla-os/logic-sim`][logic-sim] - Logic simulator app
+
+## Scripts
+
+These are the scripts in logical order, that will be available when you have installed the dependencies. Note that certain scripts can be omitted by running another script. For more information about scripts #1, #2 and #3, check the [officiel Vite documentation](https://vitejs.dev/guide/cli.html).
+
+### Main scripts
+
+1. `npm run start`
+
+	Start Vite dev server at [localhost:3000](http://localhost:3000/). Changes to module will dynamically be hot-reloaded, so normally there is no need for hard-refreshes. VSCode is configured to run this script whenever the project is opened.
+
+2. `npm run build`
+
+	Compile project using TypeScript and bundle all files into the `dist` directory, or the directory specified in config file. This directory can be uploaded to a web server.
+
+3. `npm run serve`
+
+	Start web server with preview of build at [localhost:8080](http://localhost:8080/). Can be useful for testing build before deploying.
+
+4. `npm run stage`
+
+	Execute [stage.ts](../scripts/stage.ts), which stages the build and prepares it for deployment. Script will generate a sitemap, robots.txt and all other necessary files.
+
+5. `npm run deploy`
+
+	Run scripts #2 and #4, then execute [deploy.ts](../scripts/deploy.ts), which uploads the staged build to GitHub Pages on branch called `gh-pages`. This should then trigger a GitHub Action that deploys the build to production.
+
+### Extra scripts
+
+- `npm run fetch`
+
+	Fetch the repository tree using GitHub's API and store it as a JSON file that will be used to populate the virtual drive. More information can be found on the [virtual drive](./features/virtual-drive/README.md) page.
+
+### Packages scripts
+
+- `npm run packages:build`
+
+	Build all packages in sequential order and output to respective `dist` directories.
+
+- `npm run packages:update`
+
+	Create a new changeset for packages and update their version accordingly.
+
+- `npm run packages:release`
+
+	Publish the latest versions of each package to the npm registry.
+
 ## Links
 
 - [Website/demo][website]
@@ -70,4 +128,5 @@ These resources can help you get started with ProzillaOS.
 [settings]: ./packages/apps/settings/
 [media-viewer]: ./packages/apps/media-viewer/
 [browser]: ./packages/apps/browser/
-[calculator]: ./packages/apps/calculator/
+[calculator]: ./packages/apps/calculator/
+[logic-sim]: ./packages/apps/logic-sim/

package.json

@@ -33,6 +33,7 @@
 		"@fortawesome/fontawesome-svg-core": "^6.5.2",
 		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
+		"@prozilla-os/logic-sim": "workspace:*",
 		"prozilla-os": "workspace:*",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",

packages/apps/logic-sim/README.md

@@ -0,0 +1,68 @@
+<div align="center">
+  <br />
+  <p>
+    <a href="https://os.prozilla.dev/"><img src="https://os.prozilla.dev/assets/logo.svg?v=2" height="200" alt="ProzillaOS" /></a>
+  </p>
+  <p>
+    <a href="https://github.com/prozilla-os/ProzillaOS/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/github/license/Prozilla/ProzillaOS?style=flat-square&color=FF4D5B&label=License"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Stars" src="https://img.shields.io/github/stars/Prozilla/ProzillaOS?style=flat-square&color=FED24C&label=%E2%AD%90"></a>
+    <a href="https://github.com/prozilla-os/ProzillaOS"><img alt="Forks" src="https://img.shields.io/github/forks/Prozilla/ProzillaOS?style=flat-square&color=4D9CFF&label=Forks&logo=github"></a>
+    <a href="https://www.npmjs.com/package/prozilla-os"><img alt="NPM Version" src="https://img.shields.io/npm/v/prozilla-os?logo=npm&style=flat-square&label=prozilla-os&color=FF4D5B"></a>
+  </p>
+</div>
+
+## About 
+
+`@prozilla-os/logic-sim` is a ProzillaOS application for simulating digital logic. Inspired by [Digital Logic Sim](https://sebastian.itch.io/digital-logic-sim) by Sebastian Lague.
+
+## Installation
+
+`@prozilla-os/core` is required to run this application.
+
+```sh
+$ npm install @prozilla-os/core @prozilla-os/logic-sim
+$ yarn add @prozilla-os/core @prozilla-os/logic-sim
+$ pnpm add @prozilla-os/core @prozilla-os/logic-sim
+```
+
+## Usage
+
+### Basic setup
+
+```tsx
+import { Desktop, ModalsView, ProzillaOS, Taskbar, WindowsView, AppsConfig } from "@prozilla-os/core";
+import { logicSim } from "@prozilla-os/logic-sim";
+
+function App() {
+  return (
+    <ProzillaOS
+      systemName="Example"
+      tagLine="Powered by ProzillaOS"
+      config={{
+        apps: new AppsConfig({
+          apps: [ logicSim ]
+        })
+      }}
+    >
+      <Taskbar/>
+      <WindowsView/>
+      <ModalsView/>
+      <Desktop/>
+    </ProzillaOS>
+  );
+}
+```
+
+## Links
+
+- [Website/demo][website]
+- [GitHub][github]
+- [npm][npm]
+- [Discord][discord]
+- [Ko-fi][ko-fi]
+
+[website]: https://os.prozilla.dev/logic-sim
+[github]: https://github.com/prozilla-os/ProzillaOS/tree/convert-to-monorepo/packages/apps/logic-sim
+[npm]: https://www.npmjs.com/package/@prozilla-os/logic-sim
+[discord]: https://discord.gg/JwbyQP4tdz
+[ko-fi]: https://ko-fi.com/prozilla

packages/apps/logic-sim/package.json

@@ -0,0 +1,47 @@
+{
+	"name": "@prozilla-os/logic-sim",
+	"description": "A ProzillaOS application for simulating digital logic.",
+	"version": "1.0.1",
+	"homepage": "https://os.prozilla.dev/logic-sim",
+	"author": {
+		"name": "Prozilla",
+		"email": "business@prozilla.dev",
+		"url": "https://prozilla.dev/"
+	},
+	"type": "module",
+	"main": "dist/main.js",
+	"types": "dist/main.d.ts",
+	"scripts": {
+		"build": "tsc && vite build"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/prozilla-os/ProzillaOS.git",
+		"directory": "packages/apps/logic-sim"
+	},
+	"license": "MIT",
+	"dependencies": {
+		"@prozilla-os/core": "workspace:*",
+		"react": "^18.3.1"
+	},
+	"devDependencies": {
+		"@types/node": "^20.14.5",
+		"@types/react": "^18.3.3",
+		"@vitejs/plugin-react-swc": "^3.7.0",
+		"typescript": "^5.4.5",
+		"vite": "^5.3.1",
+		"vite-plugin-dts": "^3.9.1",
+		"vite-plugin-lib-inject-css": "^2.1.1",
+		"@prozilla-os/shared": "workspace:*"
+	},
+	"files": [
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/",
+		"access": "public"
+	}
+}

packages/apps/logic-sim/src/components/CircuitView.tsx

@@ -1,13 +1,8 @@
 import { useEffect, useRef, useState } from "react";
-import { Circuit } from "../../../features/apps/logic-sim/core/circuit";
 import styles from "./CircuitView.module.css";
-import { DropdownAction } from "../../actions/actions/DropdownAction";
-import { HeaderMenu } from "../_utils/header-menu/HeaderMenu";
-import { ClickAction } from "../../actions/actions/ClickAction";
-import { ChipsManager } from "../../../features/apps/logic-sim/chips/chipsManager";
-import { App } from "../../../features/apps/app";
-import { useAppFolder } from "../../../hooks/apps/appFolder";
-import { openUrl } from "../../../features/_utils/browser.utils";
+import { App, ClickAction, DropdownAction, HeaderMenu, openUrl, useAppFolder } from "@prozilla-os/core";
+import { Circuit } from "../core/circuit";
+import { ChipsManager } from "../core/chips/chipsManager";
 
 interface CircuitViewProps {
 	app?: App;

packages/apps/logic-sim/src/components/LogicSim.tsx

@@ -1,4 +1,4 @@
-import { WindowProps } from "../../windows/WindowView";
+import { WindowProps } from "@prozilla-os/core";
 import { CircuitView } from "./CircuitView";
 import styles from "./LogicSim.module.css";
 

packages/apps/logic-sim/src/constants/logicSim.const.ts

@@ -1,5 +1,3 @@
-import { APPS } from "../apps.config";
-
 export const CURSORS = {
 	default: "default",
 	pointer: "pointer"
@@ -7,7 +5,7 @@ export const CURSORS = {
 
 export const FONT = "outfit";
 export const ENABLE_COLOR_CACHING = true;
-export const VIRTUAL_PATH = `~/Apps/${APPS.LOGIC_SIM}/`;
+export const VIRTUAL_PATH = "~/Apps/logic-sim/";
 
 export const BACKGROUND = {
 	padding: 30,

packages/apps/logic-sim/src/core/chips/chip.ts

@@ -1,8 +1,8 @@
-import { CHIP, COLORS, PIN } from "../../../../config/apps/logicSim.config";
-import { Vector2 } from "../../../math/vector2";
 import { Circuit } from "../circuit";
 import { Pin, PinJson } from "../pins/pin";
 import { State } from "../_utils/state";
+import { Vector2 } from "@prozilla-os/core";
+import { CHIP, COLORS, PIN } from "../../constants/logicSim.const";
 
 export interface ChipJson {
 	color: string;

packages/apps/logic-sim/src/core/chips/chipsManager.ts

@@ -1,11 +1,10 @@
 import { Chip } from "./chip";
 import { State } from "../_utils/state";
 import { Circuit, CircuitJson } from "../circuit";
-import { VirtualFolder } from "../../../virtual-drive/folder";
 import { ControlledPin } from "../pins/controlledPin";
-import { Vector2 } from "../../../math/vector2";
 import { Pin } from "../pins/pin";
 import { Wire } from "../wires/wire";
+import { Vector2, VirtualFolder } from "@prozilla-os/core";
 
 export class ChipsManager {
 	static CHIPS: Record<string, Chip> = {

packages/apps/logic-sim/src/core/circuit.ts

@@ -1,10 +1,9 @@
-import { BACKGROUND, COLORS, CURSORS, FONT, CONTROLLER, ENABLE_COLOR_CACHING } from "../../../../config/apps/logicSim.config";
-import { Vector2 } from "../../../math/vector2";
+import { clamp, Vector2 } from "@prozilla-os/core";
 import { Chip, ChipJson } from "./chips/chip";
 import { ControlledPin } from "./pins/controlledPin";
 import { InputHandler } from "./inputHandler";
 import { Wire, WireJson } from "./wires/wire";
-import { clamp } from "../../../_utils/math.utils";
+import { BACKGROUND, COLORS, CONTROLLER, CURSORS, ENABLE_COLOR_CACHING, FONT } from "../constants/logicSim.const";
 
 export interface CircuitJson extends ChipJson {
 	wires: WireJson[];

packages/apps/logic-sim/src/core/inputHandler.ts

@@ -1,11 +1,11 @@
-import { CONTROLLER, PIN, WIRE } from "../../../../config/apps/logicSim.config";
-import { Vector2 } from "../../../math/vector2";
 import { Chip } from "./chips/chip";
 import { Circuit } from "./circuit";
 import { ControlledPin } from "./pins/controlledPin";
 import { Pin } from "./pins/pin";
 import { State } from "./_utils/state";
 import { Wire } from "./wires/wire";
+import { Vector2 } from "@prozilla-os/core";
+import { CONTROLLER, PIN, WIRE } from "../constants/logicSim.const";
 
 export class InputHandler {
 	circuit!: Circuit;

packages/apps/logic-sim/src/core/pins/controlledPin.ts

@@ -1,7 +1,7 @@
-import { COLORS, CONTROLLER, CURSORS } from "../../../../config/apps/logicSim.config";
-import { Vector2 } from "../../../math/vector2";
+import { Vector2 } from "@prozilla-os/core";
 import { Circuit } from "../circuit";
 import { Pin } from "./pin";
+import { COLORS, CONTROLLER, CURSORS } from "../../constants/logicSim.const";
 
 export class ControlledPin extends Pin {
 	constructor(circuit: Circuit, name: string, isInput: boolean, id?: number) {

packages/apps/logic-sim/src/core/pins/pin.ts

@@ -1,9 +1,9 @@
-import { COLORS, CONTROLLER, CURSORS, PIN } from "../../../../config/apps/logicSim.config";
-import { Vector2 } from "../../../math/vector2";
+import { Vector2 } from "@prozilla-os/core";
 import { Chip } from "../chips/chip";
 import { Circuit } from "../circuit";
 import { State } from "../_utils/state";
 import { Wire } from "../wires/wire";
+import { COLORS, CONTROLLER, CURSORS, PIN } from "../../constants/logicSim.const";
 
 export interface PinJson {
 	name: string;

packages/apps/logic-sim/src/core/wires/wire.ts

@@ -1,8 +1,8 @@
-import { WIRE } from "../../../../config/apps/logicSim.config";
-import { Vector2 } from "../../../math/vector2";
+import { Vector2 } from "@prozilla-os/core";
 import { Circuit } from "../circuit";
 import { Pin } from "../pins/pin";
 import { State } from "../_utils/state";
+import { WIRE } from "../../constants/logicSim.const";
 
 export interface WireJson {
 	color: string;

packages/apps/logic-sim/src/main.ts

@@ -0,0 +1,7 @@
+import { App } from "@prozilla-os/core";
+import { LogicSim } from "./components/LogicSim";
+
+const logicSim = new App("Logic Sim", "logic-sim", LogicSim)
+	.setIconUrl("https://os.prozilla.dev/assets/apps/icons/logic-sim.svg");
+
+export { logicSim };

packages/apps/logic-sim/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"paths": {
+			"@prozilla-os/core": ["packages/core/dist/main"],
+			"@prozilla-os/shared": ["packages/shared/dist/main"]
+		}
+	}
+}

packages/apps/logic-sim/tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "../../../tsconfig.json",
+	"compilerOptions": {
+		"baseUrl": "../../..",
+		"composite": true,
+		"outDir": "dist",
+		"declaration": true,
+		"emitDeclarationOnly": true,
+		"noEmit": false,
+		"paths": {
+			"@prozilla-os/core": ["./node_modules/@prozilla-os/core/src/main"],
+			"@prozilla-os/shared": ["./node_modules/@prozilla-os/shared/src/main"]
+		}
+	},
+	"include": ["src", "vite.config.ts"],
+	"exclude": ["node_modules"],
+}

packages/apps/logic-sim/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import { appViteConfig } from "@prozilla-os/shared";
+
+export default defineConfig({
+	...appViteConfig(__dirname, "src/main.ts")
+});

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@fortawesome/react-fontawesome':
         specifier: ^0.2.2
         version: 0.2.2(@fortawesome/fontawesome-svg-core@6.5.2)(react@18.3.1)
+      '@prozilla-os/logic-sim':
+        specifier: workspace:^
+        version: link:packages/apps/logic-sim
       prozilla-os:
         specifier: workspace:*
         version: link:packages/prozilla-os
@@ -208,6 +211,40 @@ importers:
         specifier: ^2.1.1
         version: 2.1.1(vite@5.3.1(@types/node@20.14.6)(less@4.2.0))
 
+  packages/apps/logic-sim:
+    dependencies:
+      '@prozilla-os/core':
+        specifier: workspace:*
+        version: link:../../core
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+    devDependencies:
+      '@prozilla-os/shared':
+        specifier: workspace:*
+        version: link:../../shared
+      '@types/node':
+        specifier: ^20.14.5
+        version: 20.14.6
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@vitejs/plugin-react-swc':
+        specifier: ^3.7.0
+        version: 3.7.0(vite@5.3.1(@types/node@20.14.6)(less@4.2.0))
+      typescript:
+        specifier: ^5.4.5
+        version: 5.4.5
+      vite:
+        specifier: ^5.3.1
+        version: 5.3.1(@types/node@20.14.6)(less@4.2.0)
+      vite-plugin-dts:
+        specifier: ^3.9.1
+        version: 3.9.1(@types/node@20.14.6)(rollup@4.18.0)(typescript@5.4.5)(vite@5.3.1(@types/node@20.14.6)(less@4.2.0))
+      vite-plugin-lib-inject-css:
+        specifier: ^2.1.1
+        version: 2.1.1(vite@5.3.1(@types/node@20.14.6)(less@4.2.0))
+
   packages/apps/media-viewer:
     dependencies:
       '@prozilla-os/core':
@@ -435,7 +472,7 @@ importers:
         specifier: workspace:*
         version: link:../apps/browser
       '@prozilla-os/calculator':
-        specifier: workspace:^
+        specifier: workspace:*
         version: link:../apps/calculator
       '@prozilla-os/core':
         specifier: workspace:*

src/config/apps.config.ts

@@ -3,6 +3,7 @@ import { NAME } from "./branding.config";
 import { wordle } from "../apps/wordle";
 import { ballMaze } from "../apps/ball-maze";
 import { minesweeper } from "../apps/minesweeper";
+import { logicSim } from "@prozilla-os/logic-sim";
 
 export const appsConfig = new AppsConfig({
 	apps: [
@@ -29,5 +30,8 @@ export const appsConfig = new AppsConfig({
 		wordle.setIconUrl("/assets/apps/icons/wordle.svg"),
 		ballMaze.setIconUrl("/assets/apps/icons/ball-maze.svg"),
 		minesweeper.setIconUrl("/assets/apps/icons/minesweeper.svg"),
+		logicSim.setName("Logic Sim (WIP)")
+			.setDescription("Create digital logic circuits using the online simulator.")
+			.setIconUrl("/assets/apps/icons/logic-sim.svg")
 	],
 });