feat: particle patching

packages/entity/src/trait-renderers/emitter.jsx

@@ -15,9 +15,8 @@ const Emitter = ({
       Object.keys(particles).map((key) => (
         <Particle
           key={key}
-          pkey={key}
           particle={particles[key]}
-          path={join(path, 'params/particles')}
+          path={join(path, 'params/particles', key)}
         />
       ))
     }

packages/entity/src/trait-renderers/emitter/particle.jsx

@@ -1,11 +1,10 @@
 import './particle.scss';
 
-import {join} from 'path';
-
 import {EntityListView} from '@avocado/entity';
 import {PropTypes, React} from '@latus/react';
 import {useLatus} from '@latus/react/client';
 import {Stage} from '@persea/core/client';
+import {useJsonPatcher} from '@persea/json';
 
 import Entity from '../../entity-renderer';
 import useEntity from '../../hooks/use-entity';
@@ -24,12 +23,12 @@ const emitterJson = {
 };
 
 const Particle = ({
-  pkey,
   particle,
   path,
 }) => {
   const latus = useLatus();
   const entity = useEntity(emitterJson);
+  const patchParticle = useJsonPatcher(particle, path);
   const {EntityList} = latus.get('%resources');
   const entityList = new EntityList();
   const entityListView = new EntityListView(entityList);
@@ -38,7 +37,6 @@ const Particle = ({
   }
   return (
     <div className="emitter__particle">
-      <h2 className="emitter__particle-label">{pkey}</h2>
       <div className="emitter__particle-controls">
         <Stage
           fps={60}
@@ -52,11 +50,23 @@ const Particle = ({
         <div className="emitter__particle-inputs">
           <label>
             Rate
-            <input type="text" value={particle.rate || 0} readOnly />
+            <input
+              type="text"
+              value={particle.rate || 0}
+              onChange={(event) => {
+                patchParticle('rate', parseFloat(event.target.value));
+              }}
+            />
           </label>
           <label>
             Count
-            <input type="text" value={particle.count || 1} readOnly />
+            <input
+              type="text"
+              value={particle.count || 1}
+              onChange={(event) => {
+                patchParticle('count', parseInt(event.target.value, 10));
+              }}
+            />
           </label>
         </div>
       </div>
@@ -72,14 +82,13 @@ const Particle = ({
       </button>
       <Entity.Component
         buffer={Buffer.from(JSON.stringify(particle))}
-        path={join(path, pkey)}
+        path={path}
       />
     </div>
   );
 };
 
 Particle.propTypes = {
-  pkey: PropTypes.string.isRequired,
   particle: PropTypes.shape({
     count: PropTypes.number,
     rate: PropTypes.number,