Added word cloud

Fixes #23

Kudos to @j285he for noticing that we had commas in `pages/font.css` when we should've had semicolons.

Co-authored-by: Amy Wang <a258wang@csclub.uwaterloo.ca>
Reviewed-on: #24
Reviewed-by: Shahan Neda <snedadah@csclub.uwaterloo.ca>

@@ -0,0 +26,4 @@
+  /** A random seed used for placing the words, change this value to get an alternate placement of words */
+  randomSeed?: number;
+  /** ClassName of the wrapper of the wordcloud */
+  wrapperClassName?: string;

@@ -0,0 +143,4 @@
+  const fixedValueGenerator = () => randomSeed;
+  return (
+    <VisxWordcloud
+      words={data}

@@ -0,0 +1,19 @@
+.word:hover {

@@ -0,0 +10,4 @@
+  left: 0;
+  position: absolute;
+  background-color: white;
+  color: var(--navy);

@@ -0,0 +11,4 @@
+  position: absolute;
+  background-color: white;
+  color: var(--navy);
+  box-shadow: var(--card-background) 0px calc(1rem / 16) calc(2rem / 16);

@@ -0,0 +46,4 @@
+    fontWeight = 500,
+    minFontSize = 20,
+    maxFontSize = 150,
+    randomSeed = 0.5,

@@ -0,0 +99,4 @@
+  }
+);
+
+/** The internal wordcloud component that actually lays out the word needs to be seperate from the tooltip to prevent extra rerendering. */

@@ -0,0 +100,4 @@
+);
+
+/** The internal wordcloud component that actually lays out the word needs to be seperate from the tooltip to prevent extra rerendering. */
+type WordCloudWordsProps = WordCloudProps & {

@@ -0,0 +116,4 @@
+  ) => void;
+  hideTooltip: () => void;
+  // These next props are just used to stop the component from updating when it doesnt need to,
+  // but they are not needed to render the component

@@ -0,0 +147,4 @@
+      width={width}
+      height={height}
+      fontSize={fontSizeSetter}
+      font="Inconsolata, monospace"

@@ -0,0 +149,4 @@
+      fontSize={fontSizeSetter}
+      font="Inconsolata, monospace"
+      padding={wordPadding}
+      spiral={"rectangular"}

@@ -0,0 +154,4 @@
+      random={fixedValueGenerator}
+    >
+      {(cloudWords) =>
+        cloudWords.map((w, i) => {

@@ -0,0 +157,4 @@
+        cloudWords.map((w, i) => {
+          return (
+            <Text
+              key={`wordcloud-word-${w.text ?? ""}`}

@@ -0,0 +166,4 @@
+              className={styles.word}
+              textAnchor="middle"
+              onMouseMove={
+                ((e: React.MouseEvent<SVGTextElement, MouseEvent>) => {

@@ -0,0 +183,4 @@
+                      eventSvgCoords.y
+                    );
+                  }
+                  console.log(e, eventSvgCoords);

@@ -5,3 +5,3 @@
   "engines": {
     "node": "^16",
-    "npm": "^8.0.0"
+    "npm": ">=7"

@@ -110,3 +110,3 @@
     --label: var(--dark--label);
   }
-}
+}

@@ -5,3 +7,3 @@
 export default function Home() {
   return (
-    <>
+    <div>