react-life-game - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/react-life-game.es.js

@@ -17,77 +17,10 @@ var __defProp = Object.defineProperty;
 };
-import require$$0, { useCallback, useState, useEffect, useMemo, memo } from "react";
-const useWindowSize = () => {
-  const getWindowSize = useCallback(() => {
-    var _a, _b;
-    return {
-      width: (_a = window == null ? void 0 : window.innerWidth) != null ? _a : 0,
-      height: (_b = window == null ? void 0 : window.innerHeight) != null ? _b : 0
-    };
-  }, []);
-  const [windowSizes, setWindowSizes] = useState(getWindowSize());
-  useEffect(() => {
-    const onResize = () => {
-      setWindowSizes(getWindowSize());
-    };
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, [getWindowSize]);
-  return windowSizes;
+import require$$0, { memo, useCallback, useState, useEffect, useMemo } from "react";
+const defaultOption = {
+  interval: 1e3,
+  cellSize: 12,
+  initialAliveRatio: 0.1,
+  aliveColor: "#1e3a8a",
+  deadColor: "#0f172b"
 };
-const CELL_SIZE = 12;
-const useCellNum = () => {
-  const { width, height } = useWindowSize();
-  const rows = useMemo(() => Math.ceil(height / CELL_SIZE), [height]);
-  const columns = useMemo(() => Math.ceil(width / CELL_SIZE), [width]);
-  return {
-    rows,
-    columns
-  };
-};
-const generate2DArray = (m2, n2, val = false) => {
-  return [...Array(m2)].map((_) => Array(n2).fill(val));
-};
-const generate2DArrayRandom = (m2, n2, initialAliveRatio) => {
-  const array = generate2DArray(m2, n2);
-  return array.map((row) => row.map((_) => Math.random() > 1 - initialAliveRatio));
-};
-const countAliveNeighbors = (arr, i, j) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  return Number(((_a = arr[i - 1]) == null ? void 0 : _a[j - 1]) ? true : false) + Number(((_b = arr[i - 1]) == null ? void 0 : _b[j]) ? true : false) + Number(((_c = arr[i - 1]) == null ? void 0 : _c[j + 1]) ? true : false) + Number(((_d = arr[i]) == null ? void 0 : _d[j - 1]) ? true : false) + Number(((_e = arr[i]) == null ? void 0 : _e[j + 1]) ? true : false) + Number(((_f = arr[i + 1]) == null ? void 0 : _f[j - 1]) ? true : false) + Number(((_g = arr[i + 1]) == null ? void 0 : _g[j]) ? true : false) + Number(((_h = arr[i + 1]) == null ? void 0 : _h[j + 1]) ? true : false);
-};
-const nextCells = (array) => {
-  const next = [...array];
-  array.forEach((row, i) => {
-    row.forEach((currentCell, j) => {
-      const neighbors = countAliveNeighbors(array, i, j);
-      next[i][j] = currentCell ? neighbors === 2 || neighbors === 3 : neighbors === 3;
-    });
-  });
-  return next;
-};
-function useLifeGame({
-  width,
-  height,
-  interval = 1e3,
-  initialAliveRatio = 0.1
-} = {}) {
-  const { rows, columns } = useCellNum();
-  const [cells, setCells] = useState(generate2DArrayRandom(rows, columns, initialAliveRatio));
-  const handleClickCell = useCallback((i, j) => {
-    const cellsCopy = [...cells];
-    cellsCopy[i][j] = !cellsCopy[i][j];
-    setCells(cellsCopy);
-  }, [cells]);
-  useEffect(() => {
-    const id = setInterval(() => {
-      setCells(nextCells(cells));
-    }, interval);
-    return () => clearInterval(id);
-  }, [cells]);
-  return {
-    cells,
-    setCells,
-    handleClickCell
-  };
-}
 var jsxRuntime = { exports: {} };
@@ -197,4 +130,6 @@ var reactJsxRuntime_production_min = {};
 const jsx = jsxRuntime.exports.jsx;
+const Fragment = jsxRuntime.exports.Fragment;
 const Cell = memo(({
   isAlive,
+  size,
   onClick,
@@ -209,4 +144,4 @@ aliveColor = "#1e3a8a",
     style: __spreadValues({
-      width: "12px",
-      height: "12px",
+      width: `${size}px`,
+      height: `${size}px`,
       flexShrink: 0
@@ -217,11 +152,86 @@ }, colorStyle),
 });
-const LifeGameField = () => {
+const useWindowSize = () => {
+  const getWindowSize = useCallback(() => {
+    var _a, _b;
+    return {
+      width: (_a = window == null ? void 0 : window.innerWidth) != null ? _a : 0,
+      height: (_b = window == null ? void 0 : window.innerHeight) != null ? _b : 0
+    };
+  }, []);
+  const [windowSizes, setWindowSizes] = useState(getWindowSize());
+  useEffect(() => {
+    const onResize = () => {
+      setWindowSizes(getWindowSize());
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [getWindowSize]);
+  return windowSizes;
+};
+const useCellNum = ({
+  width,
+  height,
+  size
+}) => {
+  const { width: fullWidth, height: fullHeight } = useWindowSize();
+  const w = width || fullWidth;
+  const h = height || fullHeight;
+  const rows = useMemo(() => Math.ceil(h / size), [h]);
+  const columns = useMemo(() => Math.ceil(w / size), [w]);
+  return {
+    rows,
+    columns
+  };
+};
+const generate2DArray = (m2, n2, val = false) => {
+  return [...Array(m2)].map((_) => Array(n2).fill(val));
+};
+const generate2DArrayRandom = (m2, n2, initialAliveRatio) => {
+  const array = generate2DArray(m2, n2);
+  return array.map((row) => row.map((_) => Math.random() > 1 - initialAliveRatio));
+};
+const countAliveNeighbors = (arr, i, j) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  return Number(((_a = arr[i - 1]) == null ? void 0 : _a[j - 1]) ? true : false) + Number(((_b = arr[i - 1]) == null ? void 0 : _b[j]) ? true : false) + Number(((_c = arr[i - 1]) == null ? void 0 : _c[j + 1]) ? true : false) + Number(((_d = arr[i]) == null ? void 0 : _d[j - 1]) ? true : false) + Number(((_e = arr[i]) == null ? void 0 : _e[j + 1]) ? true : false) + Number(((_f = arr[i + 1]) == null ? void 0 : _f[j - 1]) ? true : false) + Number(((_g = arr[i + 1]) == null ? void 0 : _g[j]) ? true : false) + Number(((_h = arr[i + 1]) == null ? void 0 : _h[j + 1]) ? true : false);
+};
+const nextCells = (array) => {
+  const next = [...array];
+  array.forEach((row, i) => {
+    row.forEach((currentCell, j) => {
+      const neighbors = countAliveNeighbors(array, i, j);
+      next[i][j] = currentCell ? neighbors === 2 || neighbors === 3 : neighbors === 3;
+    });
+  });
+  return next;
+};
+function useLifeGame({
+  width,
+  height,
+  cellSize = defaultOption.cellSize,
+  interval = defaultOption.interval,
+  initialAliveRatio = defaultOption.initialAliveRatio,
+  aliveColor = defaultOption.aliveColor,
+  deadColor = defaultOption.deadColor
+}) {
   const {
-    cells,
-    handleClickCell
-  } = useLifeGame();
-  return /* @__PURE__ */ jsx("div", {
-    style: {
-      overflow: "hidden"
-    },
+    rows,
+    columns
+  } = useCellNum({
+    width,
+    height,
+    size: cellSize
+  });
+  const [cells, setCells] = useState(generate2DArrayRandom(rows, columns, initialAliveRatio));
+  const handleClickCell = useCallback((i, j) => {
+    const cellsCopy = [...cells];
+    cellsCopy[i][j] = !cellsCopy[i][j];
+    setCells(cellsCopy);
+  }, [cells]);
+  useEffect(() => {
+    const id = setInterval(() => {
+      setCells(nextCells(cells));
+    }, interval);
+    return () => clearInterval(id);
+  }, [cells]);
+  const renderLifeGame = () => /* @__PURE__ */ jsx(Fragment, {
     children: cells.map((row, i) => /* @__PURE__ */ jsx("div", {
@@ -234,6 +244,31 @@ style: {
         isAlive: cell,
-        onClick: () => handleClickCell(i, j)
+        size: cellSize,
+        onClick: () => handleClickCell(i, j),
+        aliveColor,
+        deadColor
       }, j))
     }, i))
   });
+  return {
+    cells,
+    setCells,
+    handleClickCell,
+    renderLifeGame
+  };
+}
+const LifeGameField = ({
+  option
+}) => {
+  const opt = __spreadValues(__spreadValues({}, defaultOption), option);
+  const {
+    renderLifeGame
+  } = useLifeGame(opt);
+  return /* @__PURE__ */ jsx("div", {
+    style: {
+      overflow: "hidden",
+      width: "100%",
+      height: "100%"
+    },
+    children: renderLifeGame()
+  });
 };
@@ -240,0 +275,0 @@ const useKeyOnResize = () => {

dist/react-life-game.umd.js

@@ -1,6 +0,6 @@
-var H=Object.defineProperty;var S=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var E=(a,s,c)=>s in a?H(a,s,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[s]=c,C=(a,s)=>{for(var c in s||(s={}))J.call(s,c)&&E(a,c,s[c]);if(S)for(var c of S(s))Y.call(s,c)&&E(a,c,s[c]);return a};(function(a,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],s):(a=typeof globalThis!="undefined"?globalThis:a||self,s(a.ReactLifeGame={},a.React))})(this,function(a,s){"use strict";function c(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var j=c(s);const x=()=>{const e=s.useCallback(()=>{var r,o;return{width:(r=window==null?void 0:window.innerWidth)!=null?r:0,height:(o=window==null?void 0:window.innerHeight)!=null?o:0}},[]),[t,n]=s.useState(e());return s.useEffect(()=>{const r=()=>{n(e())};return window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[e]),t},b=12,N=()=>{const{width:e,height:t}=x(),n=s.useMemo(()=>Math.ceil(t/b),[t]),r=s.useMemo(()=>Math.ceil(e/b),[e]);return{rows:n,columns:r}},L=(e,t,n=!1)=>[...Array(e)].map(r=>Array(t).fill(n)),R=(e,t,n)=>L(e,t).map(o=>o.map(l=>Math.random()>1-n)),k=(e,t,n)=>{var r,o,l,i,u,h,f,m;return Number(!!((r=e[t-1])==null?void 0:r[n-1]))+Number(!!((o=e[t-1])==null?void 0:o[n]))+Number(!!((l=e[t-1])==null?void 0:l[n+1]))+Number(!!((i=e[t])==null?void 0:i[n-1]))+Number(!!((u=e[t])==null?void 0:u[n+1]))+Number(!!((h=e[t+1])==null?void 0:h[n-1]))+Number(!!((f=e[t+1])==null?void 0:f[n]))+Number(!!((m=e[t+1])==null?void 0:m[n+1]))},z=e=>{const t=[...e];return e.forEach((n,r)=>{n.forEach((o,l)=>{const i=k(e,r,l);t[r][l]=o&&i===2||i===3})}),t};function P({width:e,height:t,interval:n=1e3,initialAliveRatio:r=.1}={}){const{rows:o,columns:l}=N(),[i,u]=s.useState(R(o,l,r)),h=s.useCallback((f,m)=>{const y=[...i];y[f][m]=!y[f][m],u(y)},[i]);return s.useEffect(()=>{const f=setInterval(()=>{u(z(i))},n);return()=>clearInterval(f)},[i]),{cells:i,setCells:u,handleClickCell:h}}var w={exports:{}},d={};/*
+var X=Object.defineProperty;var N=Object.getOwnPropertySymbols;var Z=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var R=(a,s,c)=>s in a?X(a,s,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[s]=c,g=(a,s)=>{for(var c in s||(s={}))Z.call(s,c)&&R(a,c,s[c]);if(N)for(var c of N(s))q.call(s,c)&&R(a,c,s[c]);return a};(function(a,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],s):(a=typeof globalThis!="undefined"?globalThis:a||self,s(a.ReactLifeGame={},a.React))})(this,function(a,s){"use strict";function c(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var L=c(s);const d={interval:1e3,cellSize:12,initialAliveRatio:.1,aliveColor:"#1e3a8a",deadColor:"#0f172b"};var O={exports:{}},b={};/*
 object-assign
 (c) Sindre Sorhus
 @license MIT
-*/var v=Object.getOwnPropertySymbols,I=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;function A(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function M(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;var r=Object.getOwnPropertyNames(t).map(function(l){return t[l]});if(r.join("")!=="0123456789")return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(l){o[l]=l}),Object.keys(Object.assign({},o)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}M();/** @license React v17.0.2
+*/var _=Object.getOwnPropertySymbols,z=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;function P(e){if(e==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function A(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de",Object.getOwnPropertyNames(e)[0]==="5")return!1;for(var n={},t=0;t<10;t++)n["_"+String.fromCharCode(t)]=t;var r=Object.getOwnPropertyNames(n).map(function(i){return n[i]});if(r.join("")!=="0123456789")return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(i){o[i]=i}),Object.keys(Object.assign({},o)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}A();/** @license React v17.0.2
  * react-jsx-runtime.production.min.js
@@ -12,2 +12,2 @@ *
  * LICENSE file in the root directory of this source tree.
- */var T=j.default,g=60103;if(d.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var O=Symbol.for;g=O("react.element"),d.Fragment=O("react.fragment")}var D=T.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,F=Object.prototype.hasOwnProperty,G={key:!0,ref:!0,__self:!0,__source:!0};function _(e,t,n){var r,o={},l=null,i=null;n!==void 0&&(l=""+n),t.key!==void 0&&(l=""+t.key),t.ref!==void 0&&(i=t.ref);for(r in t)F.call(t,r)&&!G.hasOwnProperty(r)&&(o[r]=t[r]);if(e&&e.defaultProps)for(r in t=e.defaultProps,t)o[r]===void 0&&(o[r]=t[r]);return{$$typeof:g,type:e,key:l,ref:i,props:o,_owner:D.current}}d.jsx=_,d.jsxs=_,w.exports=d;const p=w.exports.jsx,U=s.memo(({isAlive:e,onClick:t,aliveColor:n="#1e3a8a",deadColor:r="#0f172b"})=>p("div",{style:C({width:"12px",height:"12px",flexShrink:0},{backgroundColor:e?n:r}),onClick:t})),K=()=>{const{cells:e,handleClickCell:t}=P();return p("div",{style:{overflow:"hidden"},children:e.map((n,r)=>p("div",{style:{display:"flex",flexDirection:"row"},children:n.map((o,l)=>p(U,{isAlive:o,onClick:()=>t(r,l)},l))},r))})},B=()=>{const[e,t]=s.useState(window.innerWidth);return s.useEffect(()=>{const n=()=>t(window.innerWidth);return window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}},[]),{key:e}};a.LifeGameField=K,a.useKeyOnResize=B,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
+ */var W=L.default,S=60103;if(b.Fragment=60107,typeof Symbol=="function"&&Symbol.for){var C=Symbol.for;S=C("react.element"),b.Fragment=C("react.fragment")}var F=W.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,G=Object.prototype.hasOwnProperty,I={key:!0,ref:!0,__self:!0,__source:!0};function E(e,n,t){var r,o={},i=null,l=null;t!==void 0&&(i=""+t),n.key!==void 0&&(i=""+n.key),n.ref!==void 0&&(l=n.ref);for(r in n)G.call(n,r)&&!I.hasOwnProperty(r)&&(o[r]=n[r]);if(e&&e.defaultProps)for(r in n=e.defaultProps,n)o[r]===void 0&&(o[r]=n[r]);return{$$typeof:S,type:e,key:i,ref:l,props:o,_owner:F.current}}b.jsx=E,b.jsxs=E,O.exports=b;const v=O.exports.jsx,M=O.exports.Fragment,T=s.memo(({isAlive:e,size:n,onClick:t,aliveColor:r="#1e3a8a",deadColor:o="#0f172b"})=>{const i={backgroundColor:e?r:o};return v("div",{style:g({width:`${n}px`,height:`${n}px`,flexShrink:0},i),onClick:t})}),D=()=>{const e=s.useCallback(()=>{var r,o;return{width:(r=window==null?void 0:window.innerWidth)!=null?r:0,height:(o=window==null?void 0:window.innerHeight)!=null?o:0}},[]),[n,t]=s.useState(e());return s.useEffect(()=>{const r=()=>{t(e())};return window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[e]),n},U=({width:e,height:n,size:t})=>{const{width:r,height:o}=D(),i=e||r,l=n||o,f=s.useMemo(()=>Math.ceil(l/t),[l]),m=s.useMemo(()=>Math.ceil(i/t),[i]);return{rows:f,columns:m}},H=(e,n,t=!1)=>[...Array(e)].map(r=>Array(n).fill(t)),K=(e,n,t)=>H(e,n).map(o=>o.map(i=>Math.random()>1-t)),B=(e,n,t)=>{var r,o,i,l,f,m,u,p;return Number(!!((r=e[n-1])==null?void 0:r[t-1]))+Number(!!((o=e[n-1])==null?void 0:o[t]))+Number(!!((i=e[n-1])==null?void 0:i[t+1]))+Number(!!((l=e[n])==null?void 0:l[t-1]))+Number(!!((f=e[n])==null?void 0:f[t+1]))+Number(!!((m=e[n+1])==null?void 0:m[t-1]))+Number(!!((u=e[n+1])==null?void 0:u[t]))+Number(!!((p=e[n+1])==null?void 0:p[t+1]))},J=e=>{const n=[...e];return e.forEach((t,r)=>{t.forEach((o,i)=>{const l=B(e,r,i);n[r][i]=o&&l===2||l===3})}),n};function Y({width:e,height:n,cellSize:t=d.cellSize,interval:r=d.interval,initialAliveRatio:o=d.initialAliveRatio,aliveColor:i=d.aliveColor,deadColor:l=d.deadColor}){const{rows:f,columns:m}=U({width:e,height:n,size:t}),[u,p]=s.useState(K(f,m,o)),x=s.useCallback((h,w)=>{const y=[...u];y[h][w]=!y[h][w],p(y)},[u]);return s.useEffect(()=>{const h=setInterval(()=>{p(J(u))},r);return()=>clearInterval(h)},[u]),{cells:u,setCells:p,handleClickCell:x,renderLifeGame:()=>v(M,{children:u.map((h,w)=>v("div",{style:{display:"flex",flexDirection:"row"},children:h.map((y,j)=>v(T,{isAlive:y,size:t,onClick:()=>x(w,j),aliveColor:i,deadColor:l},j))},w))})}}const Q=({option:e})=>{const n=g(g({},d),e),{renderLifeGame:t}=Y(n);return v("div",{style:{overflow:"hidden",width:"100%",height:"100%"},children:t()})},V=()=>{const[e,n]=s.useState(window.innerWidth);return s.useEffect(()=>{const t=()=>n(window.innerWidth);return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[]),{key:e}};a.LifeGameField=Q,a.useKeyOnResize=V,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

package.json

 {
   "name": "react-life-game",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "files": [
@@ -5,0 +5,0 @@ "dist",

types/components/Cell.d.ts

 /// <reference types="react" />
 declare type Props = {
     isAlive: boolean;
+    size: number;
     onClick: () => void;
@@ -5,0 +6,0 @@ aliveColor?: string;

types/components/Field.d.ts

 import { FC } from 'react';
-export declare const LifeGameField: FC;
+import { LifeGameOption } from '../types';
+declare type Props = {
+    option?: Partial<LifeGameOption>;
+};
+export declare const LifeGameField: FC<Props>;
+export {};
 //# sourceMappingURL=Field.d.ts.map

types/hooks/useCellNums.d.ts

@@ -1,2 +0,6 @@
-export declare const useCellNum: () => {
+export declare const useCellNum: ({ width, height, size, }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    size: number;
+}) => {
     rows: number;
@@ -3,0 +7,0 @@ columns: number;

types/hooks/useLifeGame.d.ts

 /// <reference types="react" />
-declare type Field = boolean[][];
-declare type LifeGameOption = {
-    width?: number;
-    height?: number;
-    interval?: number;
-    initialAliveRatio?: number;
-};
-export declare function useLifeGame({ width, height, interval, initialAliveRatio, }?: LifeGameOption): {
+import { Field, LifeGameOption } from '../types';
+export declare function useLifeGame({ width, height, cellSize, interval, initialAliveRatio, aliveColor, deadColor, }: LifeGameOption): {
     cells: Field;
     setCells: import("react").Dispatch<import("react").SetStateAction<Field>>;
     handleClickCell: (i: number, j: number) => void;
+    renderLifeGame: () => JSX.Element;
 };
-export {};
 //# sourceMappingURL=useLifeGame.d.ts.map

types/index.d.ts

@@ -1,3 +0,3 @@
-export * from './components/Field';
-export * from './hooks/useKeyOnResize';
+export { LifeGameField } from './components/Field';
+export { useKeyOnResize } from './hooks/useKeyOnResize';
 //# sourceMappingURL=index.d.ts.map

No alert changes

Improved metrics

Total package byte prevSize

19121

increased by17.94%

Number of package files

25

increased by47.06%

Lines of code

371

increased by18.15%

No dependency changes