React-Group/react-typescript-test
1
0
Fork 3
Code Pull requests Activity

Compare commits

base: React-Group:5d2a13de4c4487850cff5c5ed1b8526262cda3c4
Branches Tags
React-Group:main
..
compare: React-Group:bde28dbd8bf7484316559debb118f1baf16e75e8
Branches Tags
React-Group:main

No commits in common. "5d2a13de4c4487850cff5c5ed1b8526262cda3c4" and "bde28dbd8bf7484316559debb118f1baf16e75e8" have entirely different histories.
5d2a13de4c ... bde28dbd8b

2 changed files with 13 additions and 80 deletions
Show stats Expand all files Collapse all files

8
app/LandingPage.tsx
View file

@ -8,7 +8,7 @@ const Home = () => {
<div className="home-container">
<h2>About Us</h2>
<p>
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.
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.
</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="Luca" />
<img src="/img/sage.png" alt="Sage" />
<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/YasinOnm08" className="card-link" target="_blank" rel="noopener noreferrer">
<img src="/img/yasin.png" alt="Yasin" />
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" className="card-link" target="_blank" rel="noopener noreferrer">
<img src="/img/yasin.png" alt="Norway" />
<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.

85
app/patrick/Patrick.tsx
View file

@ -1,80 +1,13 @@
// Patrick.tsx
import React, { useRef, useEffect } from 'react';
import './Patrick.css';
"use client";
import React from 'react';
import './Patrick.css'; // Import specific styles for Patrick
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>
);
};
const Patrick = () => (
<div className="programmer-space patrick">
<h2>Patrick's Space</h2>
<p>Welcome, Patrick! This is your programming space.</p>
</div>
);
export default Patrick;