react-life-game - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

dist/react-life-game.es.js

@@ -17,3 +17,3 @@ var __defProp = Object.defineProperty;
 };
-import require$$0, { memo, useCallback, useState, useEffect, useMemo } from "react";
+import require$$0, { memo, useCallback, useState, useEffect, useMemo, useLayoutEffect } from "react";
 const defaultOption = {
@@ -227,2 +227,13 @@ interval: 1e3,
   }, [cells]);
+  useLayoutEffect(() => {
+    const onResize = () => {
+      const rows2 = Math.ceil(window.innerHeight / cellSize);
+      const columns2 = Math.ceil(window.innerWidth / cellSize);
+      setCells(generate2DArrayRandom(rows2, columns2, initialAliveRatio));
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
   useEffect(() => {
@@ -272,15 +283,2 @@ const id = setInterval(() => {
 };
-const useKeyOnResize = () => {
-  const [width, setWidth] = useState(window.innerWidth);
-  useEffect(() => {
-    const onResize = () => setWidth(window.innerWidth);
-    window.addEventListener("resize", onResize);
-    return () => {
-      window.removeEventListener("resize", onResize);
-    };
-  }, []);
-  return {
-    key: width
-  };
-};
-export { LifeGameField, useKeyOnResize };
+export { LifeGameField };

dist/react-life-game.umd.js

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

package.json

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

README.md

@@ -1,8 +0,10 @@
-# React life game
+# 👾 React life game
 
-A React component that renders "Conway's Game of Life".
+A React component that renders "Conway's Game of Life" 👾 .
 
+You are a great **God** 👼 in this life game world, so you can control the life and death of cells by clicking on them.
+
 ![lifegame](https://user-images.githubusercontent.com/38521709/151740215-103ad0cf-15e5-4cf3-9e7d-67c136d67672.gif)
 
-## Installation
+## 🌏 Installation
 
@@ -21,3 +23,3 @@ ### npm:
 
-## Usage
+## 🚀 Usage
 
@@ -40,7 +42,7 @@ ```jsx
 
-### Playground
+### 👽 Playground
 
 [CodeSandBox](https://codesandbox.io/s/react-life-game-57q0d?file=/src/App.tsx)
 
-### option
+### 🛠️ option
 
@@ -56,17 +58,1 @@ | option            | type   | description                                                                                   | default            |
 | height            | numer  | Height of the field of game of life                                                           | window.innerHeight |
-
-### tips
-
-#### Re-render on window resize
-
-By default, this component is **not** resizable.
-To support window resize, you need to use `key` prop for this component generated by `useKeyOnResize` hook.
-
-```jsx
-import { LifeGameField, useKeyOnResize } from 'react-life-game';
-
-function App() {
-  const { key } = useKeyOnResize();
-  return <LifeGameField key={key} option={{...}} />;
-}
-```

types/index.d.ts

 export { LifeGameField } from './components/Field';
-export { useKeyOnResize } from './hooks/useKeyOnResize';
 //# sourceMappingURL=index.d.ts.map

No alert changes

Worsened metrics

Total package byte prevSize

21001

decreased by-2.53%

Number of package files

24

decreased by-7.69%

Lines of code

365

decreased by-1.62%

Number of lines in readme file

56

decreased by-20%

No dependency changes