WOOOHOOOOO BDAYYY

ofluffydev · Sep 13, 2024 · c74e5d0 · c74e5d0
commit c74e5d0
Show file tree

Hide file tree

Showing 26 changed files with 3,889 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/README.md b/README.md
@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+});
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from "eslint-plugin-react";
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: "18.3" } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs["jsx-runtime"].rules,
+  },
+});
+```
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,39 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+export default [
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      "react/react-in-jsx-scope": "off",
+      "react/jsx-uses-react": "off",
+    },
+  },
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      react: pluginReact,
+    },
+    rules: {
+      ...pluginReact.configs["jsx-runtime"].rules,
+    },
+  },
+];
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ary B-day :3</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "bday",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "preview": "vite preview",
+    "format": "prettier . --write"
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.112.0",
+    "@types/three": "^0.168.0",
+    "@types/vara": "^1.1.4",
+    "react": "^18.3.1",
+    "react-confetti": "^6.1.0",
+    "react-dom": "^18.3.1",
+    "react-three-fiber": "^6.0.13",
+    "three": "0.163.0",
+    "three-addons": "^1.2.0",
+    "vara": "^1.4.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.10.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.10.0",
+    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.45",
+    "prettier": "3.3.3",
+    "tailwindcss": "^3.4.11",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.5.0",
+    "vite": "^5.4.1"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/public/Cake.glb b/public/Cake.glb
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,30 @@
+import VaraComponent from "./components/VaraComponent.tsx";
+import FadeUp from "./components/FadeUp.tsx";
+import Letter from "./components/Letter.tsx";
+import Cake from "./components/Cake.tsx";
+import ReactConfetti from "react-confetti";
+
+function App() {
+  return (<>
+    <div className="fixed top-0">
+      <ReactConfetti />
+    </div>
+    <div className="overflow-x-hidden z-40">
+      <div className="w-screen flex justify-center items-center mt-20 flex-col">
+        <VaraComponent text={"Hello Ary! :3"} />
+        <FadeUp delay={1000}>
+          <div className="flex justify-center items-center">
+            <Letter />
+          </div>
+        </FadeUp>
+        <h1 className="font-extrabold text-4xl m-10 mb-0 text-center">Alssssooooo, CAKEEE!!!</h1>
+        <p className="text-sm font-thin mx-10 text-center">yes, you can move it around and yes I made the 3D cake</p>
+        <div className="md:w-1/3 w-screen h-[20rem] items-center justify-center mb-10">
+          <Cake />
+        </div>
+      </div>
+    </div>
+  </>);
+}
+
+export default App;
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/Cake.tsx b/src/components/Cake.tsx
@@ -0,0 +1,93 @@
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { GLTFLoader } from "three/addons";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+
+function Cake() {
+  const mountRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!mountRef.current) return;
+
+    // Scene setup
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(
+      75,
+      mountRef.current.clientWidth / mountRef.current.clientHeight,
+      0.1,
+      1000,
+    );
+    const renderer = new THREE.WebGLRenderer();
+    renderer.setSize(mountRef.current.clientWidth, mountRef.current.clientHeight);
+    renderer.setClearColor(0xffffff); // Set clear color to white
+    mountRef.current.appendChild(renderer.domElement);
+
+    camera.position.z = 5;
+
+    // Controls
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 1;
+    controls.autoRotate = true;
+    controls.autoRotateSpeed = 5;
+
+    // Lights
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+    scene.add(ambientLight);
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 5);
+    directionalLight.position.set(1, 1, 1);
+    scene.add(directionalLight);
+
+    // Model loading
+    const loader = new GLTFLoader();
+    loader.load(
+      "Cake.glb",
+      (gltf) => {
+        const cake = gltf.scene;
+        if (cake) {
+          cake.position.set(0, -1, 0);
+          cake.scale.set(0.4, 0.4, 0.4);
+          cake.rotation.set(Math.PI / 4, Math.PI / 4, 0); // Adjust initial rotation
+          scene.add(cake);
+        }
+        console.log("Car added successfully.");
+      },
+      undefined,
+      (error) => {
+        console.error("Error loading the model:", error);
+      },
+    );
+
+    // Animation
+    function animate() {
+      requestAnimationFrame(animate);
+      controls.update();
+      renderer.render(scene, camera);
+    }
+
+    animate();
+
+    // Resize handler
+    const handleResize = () => {
+      if (mountRef.current) {
+        renderer.setSize(mountRef.current.clientWidth, mountRef.current.clientHeight);
+        camera.aspect = mountRef.current.clientWidth / mountRef.current.clientHeight;
+        camera.updateProjectionMatrix();
+      }
+    };
+    window.addEventListener("resize", handleResize);
+
+    // Cleanup
+    return () => {
+      if (mountRef.current) {
+        mountRef.current.removeChild(renderer.domElement);
+      }
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return <div ref={mountRef} style={{ width: "100%", height: "100%" }} />;
+}
+
+export default Cake;
diff --git a/src/components/FadeUp.tsx b/src/components/FadeUp.tsx
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from "react";
+
+interface FadeUpProps {
+  children: React.ReactNode;
+  delay?: number;
+}
+
+function FadeUp({ children, delay = 0 }: FadeUpProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [delay]);
+
+  return (
+    <div
+      className={`transition-all duration-1000 ease-out ${
+        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
+      }`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default FadeUp;
diff --git a/src/components/Letter.tsx b/src/components/Letter.tsx
@@ -0,0 +1,47 @@
+function Letter() {
+  return (
+    <div className="px-3 md:w-1/2 lg:w-1/3 text-sm md:text-[1rem] whitespace-pre-wrap">
+      <p>
+        &#9;Happy birthday silly!!! I made you a little websiteee for your
+        birthdayy, I couldn&apos;t think of anything to make or buy, but then I
+        remembered, we both code!!! We both do web stuffs! I thought it would be
+        cute :P.
+      </p>
+      <br />
+      <p>
+        &#9;Anywayy, I wanted to write you a little letter about how much I
+        appreciate you being here and in my life for thisss. You have somehow in
+        the couple of months we have talked, managed to make yourself both my
+        favorite and most trusted friend ever! Before you, everyone fell off or
+        left or was just temporary, I haven&apos;t seen anyone treat me like you
+        have. I really mean it when I say you&apos; the best friend ever ever
+        ever!!!
+      </p>
+      <br />
+      <p>
+        &#9;I loved spending all the time coding together with you, I loved
+        teaching you python and html stuffs and even our worst enemy, css.
+        I&apos;ll never forget the day I literally sat down for 9 HOURS WITH YOU
+        to help make python GUI. While you may think that was annoying to me, I
+        actually loved spending so much time with you it was nice.
+      </p>
+      <br />
+      <p>
+        &#9;But you also the only person that does programming related things
+        that doesn&apos;t just do programming stuffs then leaveee. I can always
+        come to you when I&apos;m sad and need help or super excited and want to
+        share something. You have literally carried me through so much since we
+        met, and I can&apos;t thank you enough for that.
+      </p>
+      <br />
+      <p>
+        &#9;I&apos;m so happy I met you silly, thank you for everything you do
+        😭. I hope you like your little birthday website, happy birthday!!!
+      </p>
+      <br />
+      <h1 className="text-center font-bold">I love you Aryyy 💜</h1>
+    </div>
+  );
+}
+
+export default Letter;