diff --git a/README.md b/README.md index 6dce05a..e7885ec 100644 --- 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](https://user-images.githubusercontent.com/59691442/230525907-1efd6bc5-ce33-485a-879a-57a8ed46c596.png) | ![screenshot2](https://user-images.githubusercontent.com/59691442/230525910-7a41907f-d6fe-4ed2-8c44-94c09b837e6f.png) | ![screenshot3](https://user-images.githubusercontent.com/59691442/230525912-bb0054c4-0f0c-4f6e-b7c9-937f11ba0acf.png) |) +## 🚀🚀 [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(null); + const preTagRef = React.useRef(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 (
{ isLoaded - ? ( - + ? (<> + + ) : (

Loading...

@@ -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(null); + const preTagRef = React.useRef(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 (
{ isLoaded - ? ( - + ? (<> + + + ) : (

Loading...

@@ -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 index ed40c5f..d45ade4 100644 --- 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 index 6748231..664feeb 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/logo192.png b/public/logo192.png index 418eeec..5246b64 100644 Binary files a/public/logo192.png and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png index afadcc0..9ac0261 100644 Binary files a/public/logo512.png and b/public/logo512.png differ diff --git a/src/App.tsx b/src/App.tsx index 2dd2f3c..3c61f61 100644 --- 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(null); + const preTagRef = React.useRef(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 (
{ isLoaded - ? ( - + ? (<> + + + ) : (

Loading...

diff --git a/src/components/CubeAscii.tsx b/src/components/CubeAscii.tsx index 44a7644..00e1f9c 100644 --- 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; }; const defaultProps = { @@ -26,13 +28,13 @@ const defaultProps = { distanceFromCamera: 100, frameRate: 60, useColor: true, + defaultColor: '#ffffff', + preTagRef: createRef(), }; export const CubeAscii = (props: Props) => { const mergedProps = {...defaultProps, ...props}; - const preTagRef = useRef(null); - const [asciiCube, setAsciiCube] = useState(''); 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 ( - 
+		
 	);
 };
diff --git a/src/constants/cube-settings.ts b/src/constants/cube-settings.ts
index e304faa..9484024 100644
--- 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
index e44b601..ca7031c 100644
--- 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 = ``;
 	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 + '';
 };
 
 const generateTextFromBufferWithColor = (textBuffer: string[], screenWidth: number, screenHeight: number) => {