Organize the code

ts5h · Sep 30, 2023 · 79c7efd · 79c7efd
1 parent 47c3bc6
commit 79c7efd
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -1,11 1,9 @@
 # Biased Diamond Ring 2 - 2023
-https://0bjekt.co/2020/biased_diamond_ring
 
-![biased_diamond_ring_readme](https://user-images.githubusercontent.com/1344010/146092034-3d65e69e-1eda-420c-bd22-28fdd77c79a0.png)
 Drawing a diamond ring in a tilted elliptical shape using React and HTML Canvas. 
 https://0bjekt.co/2020/biased_diamond_ring_2
 
-## Gherciu / react-p5
-https://github.com/Gherciu/react-p5 
-https://codesandbox.io/s/k09k8knxz5 
 ![biased_diamond_ring_readme](https://user-images.githubusercontent.com/1344010/146092034-3d65e69e-1eda-420c-bd22-28fdd77c79a0.png)
 
 # Getting Started with Create React App
 

diff --git a/package.json b/package.json
@@ -18,6 18,7 @@
  "react-p5": "^1.3.22",
  "react-scripts": "5.0.1",
  "sass": "^1.68.0",
  "tone": "^14.7.77",
  "typescript": "^5.2.2",
  "web-vitals": "^3.5.0"
  },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,7 7,7 @@ import "./scss/App.scss";
 export const App: FC = () => (
  <div className="App">
  <ReturnToHome theme="light" />
- <GitHub theme="light" url="https://github.com/ts5h/biased_diamond_ring" />
  <GitHub theme="light" />
  <BiasedDiamondRing />
  </div>
 );
diff --git a/src/components/BiasedDiamondRing/index.tsx b/src/components/BiasedDiamondRing/index.tsx
@@ -48,17 48,20 @@ export const BiasedDiamondRing: FC = () => {
  const cx = windowSize.width / 2;
  const cy = windowSize.height / 2;
 
- const r =
- Math.min(windowSize.width, windowSize.height) / 2;
  const r = Math.min(windowSize.width, windowSize.height) / 2;
  let rx = r   Math.random() * 400 - 200;
  let ry = r   Math.random() * 400 - 200;
 
  if (rx > Math.min(windowSize.width, windowSize.height) / 2) {
- rx = Math.min(windowSize.width, windowSize.height) / 2 - (isMobile ? 10 : 20);
  rx =
  Math.min(windowSize.width, windowSize.height) / 2 -
  (isMobile ? 10 : 20);
  }
 
  if (ry > Math.min(windowSize.width, windowSize.height) / 2) {
- ry = Math.min(windowSize.width, windowSize.height) / 2 - (isMobile ? 10 : 20);
  ry =
  Math.min(windowSize.width, windowSize.height) / 2 -
  (isMobile ? 10 : 20);
  }
 
  const rotDeg = Math.random() * 360;

diff --git a/src/components/GitHub/index.tsx b/src/components/GitHub/index.tsx
@@ -5,10 5,9 @@ import Styles from "../../scss/components/GitHub.module.scss";
 // GitHub Link
 type Props = {
  theme: "light" | "dark";
- url: string;
 };
 
-export const GitHub: FC<Props> = ({ theme, url }) => {
 export const GitHub: FC<Props> = ({ theme }) => {
  const [hover, setHover] = useState(false);
 
  const handleOnMouse = (state: boolean) => {
@@ -33,7 32,12 @@ export const GitHub: FC<Props> = ({ theme, url }) => {
  hover ? Styles.on : ""
  }`}
  >
- <a href={url} target="_blank" title="GitHub" rel="noreferrer">
  <a
  href="https://github.com/ts5h/biased_diamond_ring_2"
  target="_blank"
  title="GitHub"
  rel="noreferrer"
  >
  GitHub
  </a>
  </div>