Merge pull request 'main' (#1) from React-Group/react-typescript-test:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/sageTheDm/react-typescript-test/pulls/1

app/LandingPage.tsx

@@ -8,7 +8,7 @@ const Home = () => {
       <div className="home-container">
         <h2>About Us</h2>
         <p>
-          We are a group of informatics students from IMS (Informatik Schule Sargans), currently learning React to prepare for an upcoming project. This project will be part of our traineeship at a company, where we'll apply our skills in a real-world setting. Our coursework in React is equipping us with the knowledge and experience needed to excel in this practical opportunity.
+          We are a group of IT students from IMS (Informatikmittelschule), currently learning React to prepare for an upcoming project. This project will be part of our traineeship at a company, where we'll apply our skills in a real-world setting. Our coursework in React is equipping us with the knowledge and experience needed to excel in this practical opportunity.
         </p>
 
         <section className="cards">
@@ -24,7 +24,7 @@ const Home = () => {
 
           <div className="card">
             <a href="https://interstellardevelopment.org/code/sageTheDm" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="/img/sage.png" alt="Sage" />
+                <img src="/img/sage.png" alt="Luca" />
                 <h3>Luca</h3>
                 <p>
                     Luca, Patrick's co-programmer, is skilled in Java, GDScript, Bash, and Basic Typewriter. His expertise in Java and GDScript supports robust application and game development, while his Bash scripting skills streamline automation. His knowledge of Basic Typewriter adds a classic touch to his versatile programming capabilities.
@@ -33,8 +33,8 @@ const Home = () => {
           </div>
 
           <div className="card">
-            <a href="https://interstellardevelopment.org/code/Patrick_Pluto" className="card-link" target="_blank" rel="noopener noreferrer">
-                <img src="/img/yasin.png" alt="Norway" />
+            <a href="https://interstellardevelopment.org/code/YasinOnm08" className="card-link" target="_blank" rel="noopener noreferrer">
+                <img src="/img/yasin.png" alt="Yasin" />
                 <h3>Yasin</h3>
                 <p>
                     Yasin is a proficient programmer with expertise in Java, where he has even developed games, as well as Bash, HTML, CSS, SQL, and NoSQL. His skills span from backend development and automation to web design and database management, making him a versatile asset in any tech project.

app/patrick/Patrick.tsx

@@ -1,13 +1,80 @@
 // Patrick.tsx
-"use client";
-import React from 'react';
-import './Patrick.css'; // Import specific styles for Patrick
+import React, { useRef, useEffect } from 'react';
+import './Patrick.css';
 
-const Patrick = () => (
-  <div className="programmer-space patrick">
-    <h2>Patrick's Space</h2>
-    <p>Welcome, Patrick! This is your programming space.</p>
-  </div>
-);
+const Patrick: React.FC = () => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const contextRef = useRef<CanvasRenderingContext2D | null>(null);
+  var isPressed = false;
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      canvas.width = 1000; // Set canvas width
+      canvas.height = 500; // Set canvas height
+      const context = canvas.getContext('2d');
+      if (context) {
+        contextRef.current = context;
+        // Fill the canvas with a color
+        context.fillStyle = 'black';
+        context.fillRect(0, 0, canvas.width, canvas.height);
+      }
+    }
+  }, []);
+
+  const manipulatePixel = (x: number, y: number) => {
+    const context = contextRef.current;
+    if (context) {
+      // Get the pixel data
+      const imageData = context.getImageData(x, y, 1, 1);
+      const data = imageData.data;
+
+      // Manipulate the pixel (invert color)
+      data[0] = 255; // Red
+      data[1] = 255; // Green
+      data[2] = 255; // Blue
+      context.putImageData(imageData, x, y);
+      context.putImageData(imageData, x+1, y);
+      context.putImageData(imageData, x-1, y);
+      context.putImageData(imageData, x, y+1);
+      context.putImageData(imageData, x, y-1);
+    }
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
+    const canvas = canvasRef.current;
+    if (canvas && isPressed) {
+      const rect = canvas.getBoundingClientRect();
+      const x = Math.floor(event.clientX - rect.left);
+      const y = Math.floor(event.clientY - rect.top);
+      manipulatePixel(x, y);
+    } else {
+      isPressed = false;
+    }
+  };
+
+  const moveDown = (event: React.MouseEvent<HTMLCanvasElement>) => {
+    isPressed = true;
+    handleClick(event)
+  };
+
+  const moveUp = () => {
+    isPressed = false;
+  };
+
+  return (
+    <div className="programmer-space patrick">
+      <h1>Welcome to Patrick-Paint™.</h1>
+      <br></br>
+      <canvas
+        ref={canvasRef}
+        onMouseDown={moveDown}
+        onMouseUp={moveUp}
+        onMouseMove={handleClick}
+        style={{ border: '1px solid black' }}
+      />
+    </div>
+  );
+};
 
 export default Patrick;

next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    basePath: '/react',
+};
 
 export default nextConfig;

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"