Skip to content

Commit

Permalink
fix: add test and refactor the App file
Browse files Browse the repository at this point in the history
  • Loading branch information
RoxaneBurri committed Mar 7, 2023
1 parent bc0a029 commit 869cc2f
Show file tree
Hide file tree
Showing 6 changed files with 533 additions and 171 deletions.
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
"preview": "vite preview",
"test": "vitest"
},
"dependencies": {
"react": "^18.2.0",
Expand All @@ -17,6 +18,7 @@
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^3.1.0",
"typescript": "^4.9.3",
"vite": "^4.1.4"
"vite": "^4.1.4",
"vitest": "^0.29.2"
}
}
215 changes: 48 additions & 167 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import "./App.css";

import { centerWord } from "./utils";
import * as React from "react";

const defaultWords = [
Expand All @@ -8,185 +8,66 @@ const defaultWords = [
{ id: "3456", text: "haha", x: 130, y: 40 },
];

const centerRect = (rect: {
id: string;
text: string;
x: number;
y: number;
}) => {
const elem = document.getElementById(rect.id);
if (elem) {
const h = elem.getBoundingClientRect().height;
const w = elem.getBoundingClientRect().width;

let x = rect.x + Math.floor(w / 2);
let y = rect.y + Math.floor(h / 2);

return [x, y];
}
};
const MAX_WIDTH = 150;
const Wordcloud = () => {
const [words, setWords] = React.useState(defaultWords);
const [intervalId, setIntervalId] = React.useState<number | null>(null);

const distance = (
w1: { id: string; text: string; x: number; y: number },
w2: { id: string; text: string; x: number; y: number }
) => {
const centerW1 = centerRect(w1);
const centerW2 = centerRect(w2);
const updateWords = () => {
setWords((prevWords) => {
let passRect: { id: string; text: string; x: number; y: number }[] = [];

return Math.sqrt(
Math.pow(centerW2[0] - centerW1[0], 2) +
Math.pow(centerW2[1] - centerW1[1], 2)
);
};
const newWords = prevWords.forEach((w) => {
const elem = document.getElementById(w.id);

const allCollision = (
word: { id: string; text: string; x: number; y: number },
wordArray: any[]
): any => {
wordArray.forEach((w: { id: string; text: string; x: number; y: number }) => {
if (word.id != w.id) {
if (collision(word, w)) {
console.log("collision");
return true;
} else {
console.log("No collision");

return false;
}
}
return false;
});
};
if (elem) {
const heightW = elem.getBoundingClientRect().height;
const widthW = elem.getBoundingClientRect().width;

const collision = (
word1: { id: string; text: string; x: number; y: number },
word2: { id: string; text: string; x: number; y: number }
) => {
const x1 = word1.x;
const y1 = word1.y;
const w1 = document.getElementById(word1.id).getBoundingClientRect().width;
const h1 = document.getElementById(word1.id).getBoundingClientRect().height;

const x2 = word2.x;
const y2 = word2.y;
const w2 = document.getElementById(word2.id).getBoundingClientRect().width;
const h2 = document.getElementById(word2.id).getBoundingClientRect().height;

if (x1 < x2 + w2 && x1 + w1 > x2 && y1 < y2 + h2 && h1 + y1 > y2) {
console.log("collision");
return true;
} else {
console.log("No collision");
return false;
}
};
// Get the center of the word

const finished = (array: any[]) => {
// if (!array.includes(w)) {
// array.push(array);
// }
const centeredX = centerWord(w, heightW, widthW);

array.forEach((word) => {
// console.log(document.getElementById(word.id).getBoundingClientRect());
});
const xW = centeredX[0];
const yW = centeredX[1];
}

if (array.length === defaultWords.length) {
// condition to stop
return true;
}
};
return w;
});

// w element to place, otherLocation how are already place
const findLocation = (
word: { id: string; text: string; x: number; y: number },
otherLocation: any[]
) => {
let lastword = otherLocation[otherLocation.length - 1];

console.log(innerHeight);
console.log(innerWidth);
let direction = 0;
let xDirection = 0;
let yDirection = 0;

word.x = lastword.x;
word.y = lastword.y;

let ret = 1;

while (ret) {
direction = Math.random();
xDirection = Math.random();
yDirection = Math.random();

if (direction == 0) {
if (word.x >= innerWidth - 1) {
word.x -= 1;
} else if (word.x <= 1) {
word.x += 1;
} else {
if (xDirection == 0) {
word.x += 1;
} else {
word.x -= 1;
}
}
}

if (direction == 1) {
if (word.y >= innerHeight - 1) {
word.y -= 1;
} else if (word.y <= 1) {
word.y += 1;
} else {
if (yDirection == 0) {
word.y += 1;
} else {
word.y -= 1;
}
}
}
// const newWords = prevWords.map((w) => {

ret = allCollision(word, otherLocation);
console.log(ret);
}
// const elem = document.getElementById(w.id);

return word;
};
// if (elem) {
// const heightW = elem.getBoundingClientRect().height;
// const widthW = elem.getBoundingClientRect().width;

const MAX_WIDTH = 150;
const Wordcloud = () => {
const [words, setWords] = React.useState(defaultWords);
const [intervalId, setIntervalId] = React.useState<number | null>(null);
let positionWord = defaultWords;
// const rect = document.getElementById("rect");

const updateWords = () => {
setWords((prevWords) => {
let currArray: any[] = [];
console.log("start");

const newWords = prevWords.map((w) => {
const elem1 = document.getElementById(w.id);

const rect = document.getElementById("rect");
console.log("rectangle");
console.log(rect?.getBoundingClientRect());
// const x1 = elem1.getBoundingClientRect().x;
// console.log(elem1.getBoundingClientRect());

if (currArray.indexOf(w) == -1) {
currArray.push(w);
// console.log(currArray);
w = findLocation(w, currArray);
}
// if (rect) {
// console.log(rect.getBoundingClientRect());
// const xParent = rect.getBoundingClientRect().x;
// const yParent = rect.getBoundingClientRect().y;
// const wParent = rect.getBoundingClientRect().width;
// const hParent = rect.getBoundingClientRect().height;
// }

// if (currArray.indexOf(w) == -1) {
// currArray.push(w);
// w = findLocation(w, currArray);
// }

// return w;
// }

// {
// ...w,
// x: 100 - w.x > 0 ? w.x + 1 : w.x - 1,
// y: 100 - w.y > 0 ? w.y + 1 : w.y - 1,
// };
// });

return w;
// {
// ...w,
// x: 100 - w.x > 0 ? w.x + 1 : w.x - 1,
// y: 100 - w.y > 0 ? w.y + 1 : w.y - 1,
// };
});
return newWords;
});
};
Expand Down
6 changes: 6 additions & 0 deletions src/pseudocode.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,10 @@ function netForce(point, passRect){
}
}

function netForceMethod1(point, passRect){

}

// fonction qui retourne un triangle rectangle avec comme hypoténus la droite de la force résultante

function getTriangleFromNetForce(netForce){
Expand All @@ -91,6 +95,8 @@ function stepY(x, th, ty, step){
return y + val
}



function futurPosition(rect, passRect, step){

netForce = netForce(rect, passRect)
Expand Down
82 changes: 82 additions & 0 deletions src/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
export const centerWord = (
rect: {
id: string;
text: string;
x: number;
y: number;
},
h: number,
w: number
) => {
let x = rect.x + Math.floor(w / 2);
let y = rect.y + Math.floor(h / 2);

return [x, y];
};

export const centerParent = (p: any) => {
let xParent = 0;
let yParent = 0;
let wParent = 0;
let hParent = 0;

if (p) {
xParent = p.getBoundingClientRect().x;
yParent = p.getBoundingClientRect().y;
wParent = p.getBoundingClientRect().width;
hParent = p.getBoundingClientRect().height;

const centerOfParentX = xParent + Math.floor(wParent / 2);
const centerOfParentY = yParent + Math.floor(hParent / 2);

return [centerOfParentX, centerOfParentY];
}
};

export const distance = (
w1: { id: string; text: string; x: number; y: number },
w2: { id: string; text: string; x: number; y: number }
) => {
return Math.sqrt(Math.pow(w2.x - w1.x, 2) + Math.pow(w2.y - w1.y, 2));
};

export const allCollision = (
word: { id: string; text: string; x: number; y: number },
wordArray: any[]
): any => {
wordArray.forEach((w: { id: string; text: string; x: number; y: number }) => {
if (word.id != w.id) {
if (collision(word, w)) {
console.log("collision");
return true;
} else {
console.log("No collision");

return false;
}
}
return false;
});
};

export const collision = (
w1: { id: string; text: string; x: number; y: number },
w2: { id: string; text: string; x: number; y: number },
w1H: number,
w1W: number,
w2H: number,
w2W: number
) => {
if (
w1.x < w2.x + w2W &&
w1.x + w1W > w2.x &&
w1.y < w2.y + w2H &&
w1H + w1.y > w2.y
) {
console.log("collision");
return true;
} else {
console.log("No collision");
return false;
}
};
Loading

0 comments on commit 869cc2f

Please sign in to comment.