@bbki.ng/site 1.7.6 → 1.7.8

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.7.8
+
+## 1.7.7
+
 ## 1.7.6
 
 ## 1.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,7 @@
     "url": "git+https://github.com/bbbottle/bbki.ng.git"
   },
   "dependencies": {
-    "@bbki.ng/components": "workspace:2.5.6",
+    "@bbki.ng/components": "workspace:2.5.7",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",

package/src/components/effect-layer/EffectContextProvider.tsx

@@ -7,7 +7,7 @@ export const EffectContextProvider = (props: { children: ReactNode }) => {
   return (
     <EffectContext.Provider value={{}}>
       <>
-        {/*<EffectLayer />*/}
+        <EffectLayer />
         {props.children}
       </>
     </EffectContext.Provider>

package/src/components/effect-layer/hooks/useRender.ts

@@ -1,19 +1,27 @@
-import {useCallback, useState} from "react";
-import {useMousePosition} from "@/hooks/use_mouse_position";
+import { useCallback, useState } from "react";
+import { useMousePosition } from "@/hooks/use_mouse_position";
+import { useResolution } from "@/components/effect-layer/hooks/useResolution";
 
 export const useRender = () => {
-  const [inst, setInst] = useState<any>(null)
+  const [inst, setInst] = useState<any>(null);
   const pos = useMousePosition();
+  const resolution = useResolution();
 
-  const onRender = useCallback((p: any) => {
-    if (inst === null) {
-      setInst(p)
-      return;
-    }
+  const onRender = useCallback(
+    (p: any) => {
+      if (inst === null) {
+        setInst(p);
+        return;
+      }
 
-    inst.uniforms.uMouse.value[0] = pos.current.x;
-    inst.uniforms.uMouse.value[1] = pos.current.y;
-  }, [inst]);
+      inst.uniforms.uResolution.value[0] = resolution.current[0];
+      inst.uniforms.uResolution.value[1] = resolution.current[1];
 
-  return { inst, onRender }
-}
+      inst.uniforms.uMouse.value[0] = pos.current.x;
+      inst.uniforms.uMouse.value[1] = pos.current.y;
+    },
+    [inst]
+  );
+
+  return { inst, onRender };
+};

package/src/components/effect-layer/hooks/useResolution.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+
+export const useResolution = () => {
+  const resolution = useRef<[number, number]>([
+    window.innerWidth,
+    window.innerHeight,
+  ]);
+  useEffect(() => {
+    const updateResolution = () => {
+      resolution.current = [window.innerWidth, window.innerHeight];
+    };
+
+    window.addEventListener("resize", updateResolution);
+
+    // touch move
+    window.addEventListener("touchmove", updateResolution);
+
+    return () => {
+      window.removeEventListener("resize", updateResolution);
+      window.removeEventListener("touchmove", updateResolution);
+    };
+  }, []);
+
+  return resolution;
+};

package/src/components/effect-layer/main.frag

@@ -3,11 +3,8 @@ precision mediump float;
 uniform vec2 uResolution;
 uniform float uProgress;
 uniform float uDevicePixelRatio;
-uniform vec2 uCenter;
-uniform vec2 uOffset;
 
 #define DefaultColor vec4(0.0, 0.0, 0.0, 0.0)
-#define CenterPos uCenter * uDevicePixelRatio / uResolution
 
 #include "effects/grain.frag"
 //#include "shapes/circle.frag"

package/src/components/effect-layer/uniforms.ts

@@ -2,29 +2,17 @@ export default {
   uResolution: {
     type: "vec2",
     value: [
-      Math.min(innerWidth, innerHeight),
-      Math.min(innerWidth, innerHeight),
+      innerWidth, innerHeight,
     ],
   },
   uDevicePixelRatio: {
     type: "float",
     value: [devicePixelRatio],
   },
-  uOffset: {
-    type: "vec2",
-    value: [
-      (innerWidth / innerHeight) > 1 ? (innerWidth - innerHeight) / 2 : 0,
-      (innerWidth / innerHeight) < 1 ? (innerHeight - innerWidth) / 2 : 0,
-    ],
-  },
   pi: {
     type: "float",
     value: [Math.PI],
   },
-  uCenter: {
-    type: "vec2",
-    value: [innerWidth / 2, innerHeight / 2],
-  },
   uMouse: {
     type: "vec2",
     value: [0, 0],