Neobii/zode

## zode
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Zim Rect React</title>
    <script src="https://zimjs.org/cdn/1.3.3/createjs.js"></script>
    <script src="https://zimjs.org/cdn/cat/04/zim.js"></script>
  </head>
  <body style="margin:0">
  <div id="root"></div>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>


  <!-- zim component -->
  <script type="text/babel">


  const ZimFrame = () => {
    const didMountRef = React.useRef(false);
    const message = 'React + ZIM';
    const rectWidth = 200;
    let stage;
    let rect;
    const drawRect = () => {
      rect.center();
      stage.update();
    };
    const addWidth = () => {
      // widthOnly is the ZIM property
      // setting width would proportionally set the height
      rect.widthOnly += 10;
      rect.center(); // optional
      stage.update();
    };
    const subWidth = () => {
      rect.widthOnly -= 10;
      rect.center();
      stage.update();
    };


    React.useEffect(()=> {
      if(didMountRef.current) {
        //don't rerender
      }
      else {
        const scaling = "full"; // this will resize to fit inside the screen dimensions
        const width = 1024;
        const height = 768;
        const color = clear; // ZIM colors like green, blue, pink, faint, clear, etc.
        const outerColor = dark; // any HTML colors like "violet", "#333", etc. are fine to use


        const frame = new Frame("root", 300, 200, yellow);
        frame.on("ready", () => {

            // store local variables if we want to access them in the ZIM code
            stage = frame.stage;

            rect = new Rectangle(rectWidth, 150, purple);

            stage.update(); // if there was something to update - which there is not in this simple example
        });
        didMountRef.current = true;
      }
      return function cleanup() {
        frame.dispose();
      }
    });
    return (
        <div>
          <div>{message}</div>
          <button onClick={e => drawRect()}>Add Rect</button>
          <button onClick={e => subWidth()}>-</button>
          <button onClick={e => addWidth()}>+</button>
        </div>
    );
}
</script>


  <script type="text/babel">
    const wrapper = () => {
      return (
        <React.Fragment>
          <ZimFrame/>
        </React.Fragment>
      )
    }
    ReactDOM.render(wrapper(), document.getElementById('root'));
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Zim Rect React</title>
	<script src="https://zimjs.org/cdn/1.3.3/createjs.js"></script>
	<script src="https://zimjs.org/cdn/cat/04/zim.js"></script>
	</head>
	<body style="margin:0">
	<div id="root"></div>
	<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>


	<!-- zim component -->
	<script type="text/babel">


	const ZimFrame = () => {
	const didMountRef = React.useRef(false);
	const message = 'React + ZIM';
	const rectWidth = 200;
	let stage;
	let rect;
	const drawRect = () => {
	rect.center();
	stage.update();
	};
	const addWidth = () => {
	// widthOnly is the ZIM property
	// setting width would proportionally set the height
	rect.widthOnly += 10;
	rect.center(); // optional
	stage.update();
	};
	const subWidth = () => {
	rect.widthOnly -= 10;
	rect.center();
	stage.update();
	};



	React.useEffect(()=> {
	if(didMountRef.current) {
	//don't rerender
	}
	else {
	const scaling = "full"; // this will resize to fit inside the screen dimensions
	const width = 1024;
	const height = 768;
	const color = clear; // ZIM colors like green, blue, pink, faint, clear, etc.
	const outerColor = dark; // any HTML colors like "violet", "#333", etc. are fine to use


	const frame = new Frame("root", 300, 200, yellow);
	frame.on("ready", () => {

	// store local variables if we want to access them in the ZIM code
	stage = frame.stage;

	rect = new Rectangle(rectWidth, 150, purple);

	stage.update(); // if there was something to update - which there is not in this simple example
	});
	didMountRef.current = true;
	}
	return function cleanup() {
	frame.dispose();
	}
	});
	return (
	<div>
	<div>{message}</div>
	<button onClick={e => drawRect()}>Add Rect</button>
	<button onClick={e => subWidth()}>-</button>
	<button onClick={e => addWidth()}>+</button>
	</div>
	);
	}
	</script>


	<script type="text/babel">
	const wrapper = () => {
	return (
	<React.Fragment>
	<ZimFrame/>
	</React.Fragment>
	)
	}
	ReactDOM.render(wrapper(), document.getElementById('root'));
	</script>
	</body>
	</html>