Merge pull request #2 from Im-Rises/develop

Develop
Im-Rises · May 24, 2023 · 0ad0de1 · 0ad0de1
2 parents 0bf3649 + 9ffce9e
commit 0ad0de1
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -11,25 +11,17 @@
 
 ## Description
 
-## 🚀🚀[You can try it online from your browser](https://im-rises.github.io/cube-ascii-react-website/) 🚀🚀
-
-## 🚀🚀 [The package is available on npm](https://www.npmjs.com/package/cube-ascii-react) 🚀🚀
+This is a package to create a 3D ASCII cube in React.
 
-## Screenshots
-
-[//]: # (|                                                      Attraction                                                       |                                                         Drag                                                          |                                                       Repulsion                                                       |)
+## 🚀🚀[You can try it online from your browser](https://im-rises.github.io/cube-ascii-react-website/) 🚀🚀
 
-[//]: # (|:---------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------:|)
+You can find the package in the npm registry:
 
-[//]: # (| ![screenshot1]&#40;https://user-images.githubusercontent.com/59691442/230525907-1efd6bc5-ce33-485a-879a-57a8ed46c596.png&#41; | ![screenshot2]&#40;https://user-images.githubusercontent.com/59691442/230525910-7a41907f-d6fe-4ed2-8c44-94c09b837e6f.png&#41; | ![screenshot3]&#40;https://user-images.githubusercontent.com/59691442/230525912-bb0054c4-0f0c-4f6e-b7c9-937f11ba0acf.png&#41; |)
+## 🚀🚀 [The package is available on npm](https://www.npmjs.com/package/cube-ascii-react) 🚀🚀
 
 ## Demo video
 
-[//]: # (https://user-images.githubusercontent.com/59691442/219550627-16660c09-dbea-41f3-ba15-3d7aaafca6d9.mp4)
-
-[//]: # (https://user-images.githubusercontent.com/59691442/230523799-9afbf327-3cf4-4530-8127-594339d94334.mp4)
-
-[//]: # (https://user-images.githubusercontent.com/59691442/230526870-cd104007-be41-4cdd-a10e-4672da650974.mp4)
+https://github.com/Im-Rises/cubeAscii/assets/59691442/f5bd5eae-67f1-4b75-88f0-6140808ba2f8
 
 ## Package installation
 
@@ -48,20 +40,31 @@ import {CubeAscii} from './components/CubeAscii';
 
 const App: React.FC = () => {
     const divRef = React.useRef<HTMLDivElement>(null);
+    const preTagRef = React.useRef<HTMLPreElement>(null);
     const [isLoaded, setIsLoaded] = useState(false);
+    const [useColor, setUseColor] = useState(true);
+
+    const copyToClipboard = async (text: string) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            console.log('Text copied to clipboard');
+        } catch (err: unknown) {
+            console.error('Failed to copy text: ', err);
+        }
+    };
 
     useEffect(() => {
         if (divRef.current) {
             setIsLoaded(true);
-            console.log('loaded');
         }
     }, [divRef]);
     return (
         <div className={'App'} ref={divRef}>
             {
                 isLoaded
-                    ? (
-                        <CubeAscii parentRef={divRef}/>
+                    ? (<>
+                            <CubeAscii parentRef={divRef}/>
+                        </>
                     )
                     : (
                         <p>Loading...</p>
@@ -75,7 +78,7 @@ export default App;
 
 ```
 
-or you can change all the settings like this:
+or you can change some settings like this:
 
 ```tsx
 import React, {useEffect, useState} from 'react';
@@ -84,22 +87,37 @@ import {CubeAscii} from './components/CubeAscii';
 
 const App: React.FC = () => {
     const divRef = React.useRef<HTMLDivElement>(null);
+    const preTagRef = React.useRef<HTMLPreElement>(null);
     const [isLoaded, setIsLoaded] = useState(false);
+    const [useColor, setUseColor] = useState(true);
+
+    const copyToClipboard = async (text: string) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            console.log('Text copied to clipboard');
+        } catch (err: unknown) {
+            console.error('Failed to copy text: ', err);
+        }
+    };
 
     useEffect(() => {
         if (divRef.current) {
             setIsLoaded(true);
-            console.log('loaded');
         }
     }, [divRef]);
     return (
         <div className={'App'} ref={divRef}>
             {
                 isLoaded
-                    ? (
-                        <CubeAscii parentRef={divRef} screenWidth={70} screenHeight={30}
-                                   cubeWidthHeight={40} distanceFromCamera={100}
-                                   framerate={60} useColor={true}/>
+                    ? (<>
+                            <button onClick={() => {
+                                setUseColor(!useColor);
+                            }}/>
+                            <button className={'Button-Copy-Clipboard'}
+                                    onClick={async () => copyToClipboard(preTagRef.current!.innerText)}>Copy to clipboard
+                            </button>
+                            <CubeAscii parentRef={divRef} useColor={useColor} preTagRef={preTagRef}/>
+                        </>
                     )
                     : (
                         <p>Loading...</p>
@@ -113,7 +131,7 @@ export default App;
 
 ```
 
-The component takes 1 to 16 props:
+The component takes 1 to 9 props:
 
 - `parentRef` - a reference to the parent div of the canvas. It is used to get the size of the canvas.
 - `screenWidth` - the resolution of the cube view in characters.
@@ -122,12 +140,14 @@ The component takes 1 to 16 props:
 - `distanceFromCamera` - the distance from the camera to the cube.
 - `framerate` - the framerate of the animation.
 - `useColor` - a boolean to use colors or not.
+- `defaultColor` - the default color of the cube when `useColor` is set to `false`.
+- `preTagRef` - a reference to the pre tag that contains the cube. You can use it to copy the cube to the clipboard.
 
 You can find the complete example of the project in the GitHub
 repository [here](https://im-rises.github.io/cube-ascii-react-website).
 
 > **Note**  
-> Be sure to do like in the example, the parent div of the canvas must be set before the p5 canvas is created.
+> Make sure to follow the example: set the parent div of the canvas before instantiating the cube.
 
 ## GitHub Actions
 

diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "name": "Im-Rises",
     "email": "quentin-morel88@hotmail.com"
   },
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": false,
   "license": "MIT",
   "publishConfig": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,20 +4,37 @@ import {CubeAscii} from './components/CubeAscii';
 
 const App: React.FC = () => {
 	const divRef = React.useRef<HTMLDivElement>(null);
+	const preTagRef = React.useRef<HTMLPreElement>(null);
 	const [isLoaded, setIsLoaded] = useState(false);
+	const [useColor, setUseColor] = useState(true);
+
+	const copyToClipboard = async (text: string) => {
+		try {
+			await navigator.clipboard.writeText(text);
+			console.log('Text copied to clipboard');
+		} catch (err: unknown) {
+			console.error('Failed to copy text: ', err);
+		}
+	};
 
 	useEffect(() => {
 		if (divRef.current) {
 			setIsLoaded(true);
-			console.log('loaded');
 		}
 	}, [divRef]);
 	return (
 		<div className={'App'} ref={divRef}>
 			{
 				isLoaded
-					? (
-						<CubeAscii parentRef={divRef}/>
+					? (<>
+						<button onClick={() => {
+							setUseColor(!useColor);
+						}}/>
+						<button className={'Button-Copy-Clipboard'}
+							onClick={async () => copyToClipboard(preTagRef.current!.innerText)}>Copy
+						</button>
+						<CubeAscii parentRef={divRef} useColor={useColor} preTagRef={preTagRef}/>
+					</>
 					)
 					: (
 						<p>Loading...</p>

diff --git a/src/components/CubeAscii.tsx b/src/components/CubeAscii.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {createRef, useEffect, useRef, useState} from 'react';
 import Cube from '../classes/Cube';
 import {
 	generateTextFromBuffer,
@@ -17,6 +17,8 @@ type Props = {
 	distanceFromCamera?: number;
 	frameRate?: number;
 	useColor?: boolean;
+	defaultColor?: string;
+	preTagRef?: React.RefObject<HTMLPreElement>;
 };
 
 const defaultProps = {
@@ -26,13 +28,13 @@ const defaultProps = {
 	distanceFromCamera: 100,
 	frameRate: 60,
 	useColor: true,
+	defaultColor: '#ffffff',
+	preTagRef: createRef<HTMLPreElement>(),
 };
 
 export const CubeAscii = (props: Props) => {
 	const mergedProps = {...defaultProps, ...props};
 
-	const preTagRef = useRef<HTMLPreElement>(null);
-
 	const [asciiCube, setAsciiCube] = useState<string>('');
 
 	const zBuffer: number[] = [];
@@ -41,11 +43,11 @@ export const CubeAscii = (props: Props) => {
 	const cube = new Cube();
 
 	useEffect(() => {
-		calculateAndSetFontSize(preTagRef.current!, mergedProps.screenWidth, mergedProps.screenHeight, mergedProps.parentRef.current!.clientWidth, mergedProps.parentRef.current!.clientHeight);
+		calculateAndSetFontSize(mergedProps.preTagRef.current!, mergedProps.screenWidth, mergedProps.screenHeight, mergedProps.parentRef.current!.clientWidth, mergedProps.parentRef.current!.clientHeight);
 
 		const resizeObserver = new ResizeObserver(entries => {
 			const {width, height} = entries[0].contentRect;
-			calculateAndSetFontSize(preTagRef.current!, mergedProps.screenWidth, mergedProps.screenHeight, width, height);
+			calculateAndSetFontSize(mergedProps.preTagRef.current!, mergedProps.screenWidth, mergedProps.screenHeight, width, height);
 		});
 		if (mergedProps.parentRef.current) {
 			resizeObserver.observe(mergedProps.parentRef.current);
@@ -65,7 +67,7 @@ export const CubeAscii = (props: Props) => {
 			if (mergedProps.useColor) {
 				setAsciiCube(generateTextFromBufferWithColor(cubeTextBuffer, mergedProps.screenWidth, mergedProps.screenHeight));
 			} else {
-				setAsciiCube(generateTextFromBuffer(cubeTextBuffer, mergedProps.screenWidth, mergedProps.screenHeight));
+				setAsciiCube(generateTextFromBuffer(cubeTextBuffer, mergedProps.screenWidth, mergedProps.screenHeight, mergedProps.defaultColor));
 			}
 
 			rotateCube(cube);
@@ -79,6 +81,7 @@ export const CubeAscii = (props: Props) => {
 	}, [mergedProps.screenWidth, mergedProps.screenHeight, mergedProps.frameRate, mergedProps.useColor, mergedProps.parentRef]);
 
 	return (
-		<pre ref={preTagRef} dangerouslySetInnerHTML={{__html: asciiCube}} style={{fontFamily: 'monospace'}}/>
+		<pre ref={mergedProps.preTagRef} dangerouslySetInnerHTML={{__html: asciiCube}}
+			style={{fontFamily: 'monospace'}}/>
 	);
 };
diff --git a/src/constants/cube-settings.ts b/src/constants/cube-settings.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-const BACKGROUND_CHARACTER = '.';
+const BACKGROUND_CHARACTER = ' ';// '.'
 const FACE_1_CHARACTER = '@';
 const FACE_2_CHARACTER = '$';
 const FACE_3_CHARACTER = '~';

diff --git a/src/maths/cube-maths.ts b/src/maths/cube-maths.ts
@@ -87,8 +87,8 @@ const refreshBuffers = (zBuffer: number[], textBuffer: string[], screenWidth: nu
 	}
 };
 
-const generateTextFromBuffer = (textBuffer: string[], screenWidth: number, screenHeight: number) => {
-	let text = '';
+const generateTextFromBuffer = (textBuffer: string[], screenWidth: number, screenHeight: number, color: string) => {
+	let text = `<span style="color: ${color}">`;
 	for (let i = 0; i < screenHeight; i++) {
 		for (let j = 0; j < screenWidth; j++) {
 			text += textBuffer[(i * screenWidth) + j];
@@ -97,7 +97,7 @@ const generateTextFromBuffer = (textBuffer: string[], screenWidth: number, scree
 		text += '\n';
 	}
 
-	return text;
+	return text + '</span>';
 };
 
 const generateTextFromBufferWithColor = (textBuffer: string[], screenWidth: number, screenHeight: number) => {