diff --git a/package.json b/package.json index b808fa5..952992d 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,9 @@ }, "dependencies": { "@types/node": "^20.14.10", - "solid-js": "^1.8.17" + "@types/three": "^0.176.0", + "solid-js": "^1.8.17", + "three": "^0.176.0" }, "devDependencies": { "typescript": "^5.2.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3eda747..d89f785 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,9 +11,15 @@ importers: '@types/node': specifier: ^20.14.10 version: 20.14.10 + '@types/three': + specifier: ^0.176.0 + version: 0.176.0 solid-js: specifier: ^1.8.17 version: 1.8.17 + three: + specifier: ^0.176.0 + version: 0.176.0 devDependencies: typescript: specifier: ^5.2.2 @@ -132,6 +138,9 @@ packages: resolution: {integrity: sha512-XEFXSlxiG5td2EJRe8vOmRbaXVgfcBlszKujvVmWIK/UpywWljQCfzAv3RQCGujWQ1RD4YYWEAqDXfuJiy8f5Q==} engines: {node: '>=6.9.0'} + '@dimforge/rapier3d-compat@0.12.0': + resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==} + '@esbuild/aix-ppc64@0.21.5': resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==} engines: {node: '>=12'} @@ -368,6 +377,9 @@ packages: cpu: [x64] os: [win32] + '@tweenjs/tween.js@23.1.3': + resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==} + '@types/babel__core@7.20.5': resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} @@ -386,6 +398,18 @@ packages: '@types/node@20.14.10': resolution: {integrity: sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==} + '@types/stats.js@0.17.4': + resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==} + + '@types/three@0.176.0': + resolution: {integrity: sha512-FwfPXxCqOtP7EdYMagCFePNKoG1AGBDUEVKtluv2BTVRpSt7b+X27xNsirPCTCqY1pGYsPUzaM3jgWP7dXSxlw==} + + '@types/webxr@0.5.22': + resolution: {integrity: sha512-Vr6Stjv5jPRqH690f5I5GLjVk8GSsoQSYJ2FVd/3jJF7KaqfwPi3ehfBS96mlQ2kPCwZaX6U0rG2+NGHBKkA/A==} + + '@webgpu/types@0.1.60': + resolution: {integrity: sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==} + ansi-styles@3.2.1: resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==} engines: {node: '>=4'} @@ -449,6 +473,9 @@ packages: resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} engines: {node: '>=0.8.0'} + fflate@0.8.2: + resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==} + fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -493,6 +520,9 @@ packages: resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==} engines: {node: '>=12.13'} + meshoptimizer@0.18.1: + resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==} + ms@2.1.2: resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} @@ -546,6 +576,9 @@ packages: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} engines: {node: '>=4'} + three@0.176.0: + resolution: {integrity: sha512-PWRKYWQo23ojf9oZSlRGH8K09q7nRSWx6LY/HF/UUrMdYgN9i1e2OwJYHoQjwc6HF/4lvvYLC5YC1X8UJL2ZpA==} + to-fast-properties@2.0.0: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} engines: {node: '>=4'} @@ -767,6 +800,8 @@ snapshots: '@babel/helper-validator-identifier': 7.24.7 to-fast-properties: 2.0.0 + '@dimforge/rapier3d-compat@0.12.0': {} + '@esbuild/aix-ppc64@0.21.5': optional: true @@ -901,6 +936,8 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.18.0': optional: true + '@tweenjs/tween.js@23.1.3': {} + '@types/babel__core@7.20.5': dependencies: '@babel/parser': 7.24.7 @@ -928,6 +965,22 @@ snapshots: dependencies: undici-types: 5.26.5 + '@types/stats.js@0.17.4': {} + + '@types/three@0.176.0': + dependencies: + '@dimforge/rapier3d-compat': 0.12.0 + '@tweenjs/tween.js': 23.1.3 + '@types/stats.js': 0.17.4 + '@types/webxr': 0.5.22 + '@webgpu/types': 0.1.60 + fflate: 0.8.2 + meshoptimizer: 0.18.1 + + '@types/webxr@0.5.22': {} + + '@webgpu/types@0.1.60': {} + ansi-styles@3.2.1: dependencies: color-convert: 1.9.3 @@ -1007,6 +1060,8 @@ snapshots: escape-string-regexp@1.0.5: {} + fflate@0.8.2: {} + fsevents@2.3.3: optional: true @@ -1034,6 +1089,8 @@ snapshots: dependencies: is-what: 4.1.16 + meshoptimizer@0.18.1: {} + ms@2.1.2: {} nanoid@3.3.7: {} @@ -1099,6 +1156,8 @@ snapshots: dependencies: has-flag: 3.0.0 + three@0.176.0: {} + to-fast-properties@2.0.0: {} typescript@5.5.2: {} diff --git a/src/App.tsx b/src/App.tsx index ff99b8d..e1952c5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,3 +1,4 @@ +// src/App.tsx import "./App.css"; import {AdvancedBr, Singular88, SingularOomfie} from "./components/comps.tsx"; import {createSignal, onMount} from "solid-js"; diff --git a/src/components/pfp.tsx b/src/components/pfp.tsx index 46bf06a..17b5eb2 100644 --- a/src/components/pfp.tsx +++ b/src/components/pfp.tsx @@ -1,5 +1,7 @@ import HoverComponent from "./name"; import "./pfp.css"; +import {RotatingCubeButton} from "./rotatingCubeButton.tsx"; +import {createSignal} from "solid-js"; export function Bdpfp({ setpopupEasterEgg, @@ -28,42 +30,39 @@ export function Bdpfp({ } export function Normalpfp({ - setpopupEasterEgg, -}: { - setpopupEasterEgg: (value: boolean) => void; + setpopupEasterEgg, + }: { + setpopupEasterEgg: (value: boolean) => void; }) { - return ( -
{ - e.preventDefault(); - setpopupEasterEgg(true); - }} - class="birthdayparent header normal" - > - amy's current discord pfp { - (e.target as HTMLImageElement).animate( - [{ transform: "rotateZ(0deg)" }, { transform: "rotateZ(360deg)" }], - { - duration: 400, - iterations: 1, - }, - ); - }} - onClick={(e) => { - (e.target as HTMLImageElement).animate( - [{ transform: "rotateY(0deg)" }, { transform: "rotateY(360deg)" }], - { - duration: 150, - iterations: 1, - }, - ); - }} - /> - -
- ); -} + // State to control whether the cube or the image is displayed + const [showCube, setShowCube] = createSignal(false); + + return ( +
{ + e.preventDefault(); + setpopupEasterEgg(true); + }} + // On click, toggle the showCube state + onClick={() => setShowCube(true)} + class="birthdayparent header normal" + style={{ cursor: 'pointer', display: 'flex', "justify-content": 'center', "align-items": 'center' }} // Added styles for centering content + > + {showCube() ? ( + // If showCube is true, render the RotatingCubeButton + // The onClick for the cube itself can be an empty function or trigger something else + console.log("Cube pfp clicked!")} /> + ) : ( + // Otherwise, render the original image and HoverComponent + <> + amy's current discord pfp + + + )} +
+ ); +} \ No newline at end of file diff --git a/src/components/rotatingCubeButton.tsx b/src/components/rotatingCubeButton.tsx new file mode 100644 index 0000000..02374db --- /dev/null +++ b/src/components/rotatingCubeButton.tsx @@ -0,0 +1,90 @@ +// src/components/RotatingCubeButton.tsx +import { onCleanup, onMount } from 'solid-js'; +import * as THREE from 'three'; + +interface RotatingCubeButtonProps { + onClick: () => void; +} + +export const RotatingCubeButton = (props: RotatingCubeButtonProps) => { + let mountRef: HTMLDivElement | undefined; + let renderer: THREE.WebGLRenderer; + let scene: THREE.Scene; + let camera: THREE.PerspectiveCamera; + let cube: THREE.Mesh; + let animationFrameId: number; + + + onMount(() => { + if (mountRef) { + + scene = new THREE.Scene(); + camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000); + camera.position.z = 2; + + renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); + renderer.setSize(mountRef.clientWidth, mountRef.clientHeight); + mountRef.appendChild(renderer.domElement); + + const textureLoader = new THREE.TextureLoader(); + const texture = textureLoader.load( + 'https://dp.nea.moe/avatar/603229858612510720.png', + undefined, + () => { + cube.material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); + } + ); + + const geometry = new THREE.BoxGeometry(1, 1, 1); + const material = new THREE.MeshBasicMaterial({ map: texture }); + + cube = new THREE.Mesh(geometry, material); + scene.add(cube); + + const animate = () => { + animationFrameId = requestAnimationFrame(animate); + cube.rotation.x += 0.01; + cube.rotation.y += 0.01; + renderer.render(scene, camera); + }; + animate(); + const handleResize = () => { + if (mountRef) { + camera.aspect = mountRef.clientWidth / mountRef.clientHeight; + camera.updateProjectionMatrix(); + renderer.setSize(mountRef.clientWidth, mountRef.clientHeight); + } + }; + window.addEventListener('resize', handleResize); + + onCleanup(() => { + window.removeEventListener('resize', handleResize); + cancelAnimationFrame(animationFrameId); + if (mountRef && renderer.domElement) { + mountRef.removeChild(renderer.domElement); + } + geometry.dispose(); + material.dispose(); + texture.dispose(); + renderer.dispose(); + }); + } + }); + + return ( +
+ +
+ ); +};