Merge remote-tracking branch 'origin/dev' into feat/visual-programming-interface

# Conflicts:
#	src/main.tsx

README.md

@@ -1,73 +1,29 @@
-# React + TypeScript + Vite
+# PepperPlus UI
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Installation
 
-Currently, two official plugins are available:
+First a description of how to install Node, then how to install this project.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+### Node
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-## React Compiler
+Install Node 20.19 or higher.
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+Choose one of the options from [the Node.js website](https://nodejs.org/en/download). On Windows, the installer option seems easiest. On Linux (or macOS) you can use `nvm`. On macOS you can also use `brew`.
 
-## Expanding the ESLint configuration
+### Project
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+With a terminal in the project directory, run:
 
-```js
+```shell
-export default defineConfig([
+npm i
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+## Running
 
-```js
+You can run the project from a terminal with:
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
 
-export default defineConfig([
+```shell
-  globalIgnores(['dist']),
+npm run dev
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
 ```
+
+It should automatically reload when you save changes.

package-lock.json

@@ -11,7 +11,8 @@
         "@neodrag/react": "^2.3.1",
         "@xyflow/react": "^12.8.6",
         "react": "^19.1.1",
-        "react-dom": "^19.1.1"
+        "react-dom": "^19.1.1",
+        "react-router": "^7.9.3"
       },
       "devDependencies": {
         "@eslint/js": "^9.36.0",
@@ -2044,6 +2045,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3121,6 +3131,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.9.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.3.tgz",
+      "integrity": "sha512-4o2iWCFIwhI/eYAIL43+cjORXYn/aRQPgtFRRZb3VzoyQ5Uej0Bmqj7437L97N9NJW4wnicSwLOLS+yCXfAPgg==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3224,6 +3256,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

package.json

@@ -13,7 +13,8 @@
     "@neodrag/react": "^2.3.1",
     "@xyflow/react": "^12.8.6",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "react-router": "^7.9.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

src/App.css

@@ -18,6 +18,20 @@
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
+
+.logopepper {
+  height: 8em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logopepper:hover {
+  filter: drop-shadow(0 0 10em #ff0707);
+}
+.logopepper.react:hover {
+  filter: drop-shadow(0 0 10em #4eff14aa);
+}
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);
@@ -27,16 +41,75 @@
   }
 }
 
+
+@keyframes logo-pepper-spin {
+  from {
+    transform: rotate(-20deg);
+  }
+  to {
+    transform: rotate(20deg);
+  }
+}
+
+
+
+@keyframes logo-pepper-scale {
+  from {
+    transform: scale(1,1);
+  }
+  to {
+    transform: scale(1.5,1.5);
+  }
+}
+
 @media (prefers-reduced-motion: no-preference) {
   a:nth-of-type(2) .logo {
     animation: logo-spin infinite 20s linear;
   }
 }
 
-.card {
+@media (prefers-reduced-motion: no-preference) {
-  padding: 2em;
+  .logopepper {
+    animation: logo-pepper-spin infinite 1s linear alternate;
+  }
 }
 
-.read-the-docs {
+@media (prefers-reduced-motion: no-preference) {
-  color: #888;
+  .logoPepperScaling {
+    animation: logo-pepper-scale infinite 1s linear alternate;
+  }
+}
+
+
+
+
+
+button.reset {
+  background-color: crimson;
+  color: white;
+}
+button.reset:hover {
+  background-color: darkred;
+}
+
+button.movePage {
+  position: fixed;          /* Position the button relative to the viewport (screen),
+                               not inside its parent. It stays in place even when you scroll. */
+
+  top: 50%;                 /* Place the button halfway down from the top of the screen. */
+                   /* Stick the button to the left edge of the screen. */
+  border: 3px solid black;
+  outline: 1px solid white;
+  transform: translateY(-50%); 
+  background-color: aquamarine;
+  color: white;
+}
+button.movePage.left{
+  left: 5%;
+}
+button.movePage.right{
+  right: 5%;
+}
+button.movePage:hover{
+  background-color: rgb(0, 176, 176);
 }

src/App.tsx

@@ -1,34 +1,15 @@
-import { useState } from 'react'
+import { Routes, Route } from 'react-router'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import './App.css'
+import TemplatePage from './pages/TemplatePage/Template.tsx'
+import Home from './pages/Home/Home.tsx'
 
-function App() {
+function App(){
-  const [count, setCount] = useState(0)
+  
-
   return (
-    <>
+    <Routes>
-      <div>
+      <Route path="/" element={<Home />} />
-        <a href="https://vite.dev" target="_blank">
+      <Route path="/Template" element={<TemplatePage />} />
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+    </Routes>
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
   )
 }
 

src/components/components.tsx

@@ -0,0 +1,20 @@
+// src/components/Counter.tsx
+import { useState } from 'react'
+//import style from './Counter.module.css' // optional, if you want a CSS module for reset button
+import '../App.css'
+
+function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="card">
+      <button onClick={() => setCount((count) => count + 3)}>
+        count is {count}
+      </button>
+      <button className='reset' onClick={() => setCount(0)}>
+        Reset Counter
+      </button>
+    </div>
+  )
+}
+export default Counter

src/main.tsx

@@ -1,12 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router'
 import './index.css'
 import App from './App.tsx'
-import VisualProgrammingUI from "./visualProgrammingUI/VisProgUI.tsx";
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
-      <VisualProgrammingUI />
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )

src/pages/Home/Home.module.css

@@ -0,0 +1,6 @@
+.read_the_docs {
+  color: #888;
+}
+.card {
+  padding: 2em;
+}

src/pages/Home/Home.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+import reactLogo from '../../assets/react.svg'
+import viteLogo from '../../assets/vite.svg'
+import pepperLogo from '../../assets/pepper_transp2_small.svg'
+import style from './Home.module.css'
+import Counter from '../../components/components.tsx'
+
+function Home() {
+  
+
+
+  return (
+    <>
+      <div>
+        <div className = "logoPepperScaling">
+          <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
+            <img src={pepperLogo} className="logopepper" alt="Pepper logo" />
+          </a>
+        </div>
+        
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      
+        <Counter />
+        <Link to = '/Template'>
+            <button className='movePage right' onClick={() : void => {}}>
+            Page Cool --{'>'}
+            </button>
+        </Link>
+        
+        <p>
+            Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      
+      <p className={style.read_the_docs}>
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default Home

src/pages/TemplatePage/Template.module.css

@@ -0,0 +1,4 @@
+button.reset:hover {
+  background-color: yellow;
+}
+

src/pages/TemplatePage/Template.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import { Link } from 'react-router'
+import Counter from '../../components/components.tsx'
+import style from './Template.module.css'
+
+//this is your css file where you can style your buttons and such
+//you can still use css parts from App.css, but also overwrite them
+
+function TemplatePage() {
+  
+
+  return (
+    <>
+      <Counter />
+      <Link to = {"/"}> {/* here you link to the homepage, in App.tsx you can link new pages */}
+        <button className= 'movePage left' onClick={() :void => {}}>
+          Page {'<'}-- Go Home
+        </button>
+      </Link>
+    </>
+  )
+}
+
+export default TemplatePage