Merge pull request #10 from mj-life-is-once/dev

Dev

src/app/canvas/page.tsx

@@ -3,7 +3,7 @@ import path from "path";
 import { SampleData } from "../types/types";
 import Plotter from "../components/Plotter";
 import { parse } from "papaparse";
-import { BackButton } from "../components/BackButton";
+import { Button } from "../components/Button";
 
 const getCSVData = async (f: string) => {
   const filePath = path.join(process.cwd(), f);
@@ -42,7 +42,9 @@ const Page = async () => {
 
   return (
     <div className="relative bg-purple-600">
-      <BackButton className="inline-block text-center" />
+      <Button className="inline-block text-center" href="/">
+        Back
+      </Button>
       <Plotter data={promiseData} time={promiseTime.datetime} />
     </div>
   );

src/app/components/Button.tsx

@@ -0,0 +1,24 @@
+import { MouseEventHandler, ReactNode } from "react";
+import Link from "next/link";
+export const Button = ({
+  className,
+  children,
+  href,
+  onClick,
+}: {
+  className?: string;
+  children: ReactNode;
+  href?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+}) => {
+  return (
+    <button
+      className={`absolute max-sm:static max-sm:m-5 top-10 left-10 text-lg font-bold border border-white rounded p-3 font-extrabold leading-tighter uppercase text-white hover:bg-emerald-green hover:text-black hover:border-stone-800 hover:opacity-90 ${
+        className ?? ""
+      }`}
+      onClick={onClick}
+    >
+      {href && <Link href={href}>{children}</Link>}
+    </button>
+  );
+};

src/app/components/Canvas.module.css

@@ -1,10 +1,10 @@
 .container {
-  width: 95%;
+  width: 100%;
   margin: auto;
   display: flex;
   flex-direction: row;
   justify-content: center;
-  overflow-y: hidden;
+  overflow: hidden;
 }
 
 .toolTip {
@@ -15,13 +15,12 @@
 .chartDiv {
   position: relative;
   margin-top: 0;
+  /*background-color: yellow;*/
   order: -1;
 }
 
 .svgContainer {
   position: absolute;
-  width: 100%;
-  height: 100%;
   color: white;
   z-index: 10;
 }

src/app/components/Canvas.tsx

@@ -233,22 +233,29 @@ const Canvas = ({
   };
 
   useEffect(() => {
-    setDimensions({
-      width: chartContainerRef.current?.getClientRects()[0].width!,
-      height: chartContainerRef.current?.getClientRects()[0].height!,
-    });
-  }, [toolTipShow]);
+    console.log("canvas", canvasWidth, canvasHeight);
+  }, [canvasHeight, canvasWidth]);
 
   useEffect(() => {
     const handleResize = () => {
-      setDimensions({
-        width: chartContainerRef.current?.getClientRects()[0].width!,
-        height: chartContainerRef.current?.getClientRects()[0].height!,
-      });
+      console.log("window", window.innerWidth, window.innerHeight);
+      if (window.innerWidth < outerWidth) {
+        setDimensions({
+          width: window.innerWidth,
+          height: window.innerHeight,
+        });
+      }
     };
 
     window.addEventListener("resize", handleResize);
 
+    // resize once the screen is smaller than outerWidth
+    if (window.innerWidth < outerWidth) {
+      setDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
     return () => {
       window.removeEventListener("resize", handleResize);
     };
@@ -392,12 +399,16 @@ const Canvas = ({
         className={c.chartDiv}
         ref={chartContainerRef}
         style={{
-          minWidth: `${outerWidth}px`,
-          minHeight: `${outerHeight}px`,
+          minWidth: `${dimensions.width}px`,
+          minHeight: `${dimensions.height}px`,
         }}
       >
         <div className={c.svgContainer}>
-          <svg width={dimensions.width} height={dimensions.height}>
+          <svg
+            width={dimensions.width}
+            height={dimensions.height}
+            viewBox={`0 0} ${dimensions.width} ${dimensions.height}`}
+          >
             <g id="axes" transform={`translate(${margin.left}, ${margin.top})`}>
               <g id="gxAxis" transform={`translate(0, ${canvasHeight})`}></g>
               <g id="gyAxis"></g>

src/app/components/ToolTip.tsx

@@ -36,12 +36,14 @@ const ToolTip = ({
   };
   return (
     <div
-      className={`text-center p-3 mx-2 my-1 max-w-2xl lg:max-w-xl rounded-md bg-emerald-green text-slate-900 ${
+      className={`text-center p-3 mx-2 my-1 max-w-2xl max-lg:max-w-xl max-md:max-w-md max-sm:max-w-sm max-xs:max-w-xs rounded bg-emerald-green text-slate-900 ${
         className || ""
       }}`}
     >
       <div className="text-center m-2 ">
-        <h3 className="md:text-4xl uppercase font-extrabold m-5">toolbox</h3>
+        <h3 className="max-sm:text-3xl text-4xl uppercase font-extrabold m-5">
+          toolbox
+        </h3>
         <ul className="max-w-xl text-center list-none m-auto">
           <li>Use Mouse-wheel to scroll</li>
           <li>Adjust radius to search more datapoints</li>

src/app/page.tsx

@@ -1,8 +1,10 @@
 import { Card } from "./components/Card";
+import { Button } from "./components/Button";
 import Link from "next/link";
 const Page = async () => {
   return (
     <section className="relative w-full py-10 min-h-full bg-cyan-600">
+      <Button href="https://experiments.minjoocho.com/">Home</Button>
       <div className="container flex flex-col gap-10 h-full justify-around max-w-3xl mx-auto px-4 py-4 sm:px-6">
         <div className="text-center text-neutral-50 pb-12 md:pb-16">
           <h1 className="text-emerald-green text-5xl md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4">
@@ -28,7 +30,7 @@ const Page = async () => {
             </h1>
             <p className="font-bold pb-10 text-lg">~10k datapoints</p>
             <Link
-              className="absolute right-10 bottom-5 inline-block font-bold text-xl"
+              className="absolute right-10 bottom-5 inline-block font-bold text-xl hover:underline"
               href="/canvas"
             >
               Explore
@@ -41,14 +43,14 @@ const Page = async () => {
             </h1>
             <p className="font-bold pb-10 text-lg">~1M datapoints</p>
             <Link
-              className="absolute right-10 bottom-5 inline-block font-bold text-xl"
+              className="absolute right-10 bottom-5 inline-block font-bold text-xl hover:underline"
               href="/webgl"
             >
               Explore
             </Link>
           </Card>
         </div>
-        <div className="text-center max-sm:max-w-xs m-auto">
+        <div className="text-white text-center max-sm:max-w-xs m-auto">
           <ul className="text-lg">
             Resource
             <li className="text-sm pt-2 underline">

src/app/webgl/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useRef, useEffect, useState } from "react";
 import dynamic from "next/dynamic";
-import { BackButton } from "../components/BackButton";
+import { Button } from "../components/Button";
 
 const WebGLChart = dynamic(() => import("../components/WebGLChart"), {
   ssr: false,
@@ -48,9 +48,11 @@ const Page = () => {
 
   return (
     <section className="relative w-full h-full bg-blue-400">
-      <BackButton className="top-20 left-10" />
+      <Button className="top-20 left-10" href="/">
+        Back
+      </Button>
       <div className="flex flex-col justify-center w-full h-full pt-20 mx-auto px-4 py-4 sm:px-6">
-        <div className="text-center pb-12 md:pb-16">
+        <div className="text-white text-center pb-12 md:pb-16">
           <h1 className="text-5xl md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4">
             WebGL
           </h1>
@@ -74,7 +76,7 @@ const Page = () => {
       </div>
       {showLoading && (
         <div className="absolute flex flex-col justify-center item-center bottom-0 left-0 w-full h-full bg-slate-900 bg-opacity-90 text-center">
-          <h1 className="text-5xl md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4">
+          <h1 className="text-white text-5xl md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4">
             Loading Data ...
           </h1>
         </div>