kfarr · May 3, 2023 05:11
diff --git a/prompt-aframe-component-doc.txt b/prompt-aframe-component-doc.txt
 Here is an example of simple documentation of an A-Frame component:
 ## aframe-gridhelper-component

 A GridHelper component for [A-Frame](https://aframe.io).

 ### Properties

 | Property         | Description | Default Value |
 | ---------------- | ----------- | ------------- |
 | size             |             | 5             |
 | divisions        |             | 10            |
 | colorCenterLine  |             | red           |
 | colorGrid        |             | black         |

 ### Usage

 ```html
 <head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
  <script src="https://rawgit.com/dbradleyfl/aframe-gridhelper/master/dist/aframe-gridhelper-component.min.js"></script>
 </head>

 <body>
  <a-scene gridhelper>
    <a-entity geometry="primitive: box" material="color: #C03546"></a-entity>
  </a-scene>
 </body>
 ```

 And here is the corresponding code to the example documentation above:
 /**
 * GridHelper component for A-Frame.
 */
 AFRAME.registerComponent('gridhelper', {
  schema: {
    size: { default: 5 },
    divisions: { default: 10 },
    colorCenterLine: {default: 'red'},
    colorGrid: {default: 'black'}
  },

  /**
   * Called once when component is attached. Generally for initial setup.
   */
  init: function () {
    var scene = this.el.object3D;
    var data = this.data;

    var size = data.size;
    var divisions = data.divisions;
    var colorCenterLine = data.colorCenterLine;
    var colorGrid = data.colorGrid;

    var gridHelper = new THREE.GridHelper( size, divisions, colorCenterLine, colorGrid );
    gridHelper.name = "gridHelper";
    scene.add(gridHelper);
  },
  remove: function () {
    var scene = this.el.object3D;
    scene.remove(scene.getObjectByName("gridHelper"));
  }
 });

 Now given this new code, make documentation for it: 
 // Comment for this prompt template: you can paste your own code here to generate docs for your own component
  AFRAME.registerComponent('screentock', {
      schema: {
        takeScreenshot: { type: 'boolean', default: false },
        filename: {type: 'string', default: 'screenshot' },
        type: {type: 'string', default: 'jpg'}, // png, jpg, img
        selector: {type: 'selector'}
      },
      tick: function (time, timeDelta) {
        // console.log('tick')
      },
      init: function () {
        // console.log('init')
      },
      tock: function () {
        // console.log('tock')
        // this should be paused when not in use. probably restart, set true, pause
        var renderer = AFRAME.scenes[0].renderer;
        // const renderer = this.element;
        if (this.data.takeScreenshot) {
          this.el.setAttribute('screentock', 'takeScreenshot', false);
          // this.el.setAttribute('takeScreenshot', false);
          takeScreenshotNow(this.data.filename, this.data.type)
        }
      }
    })
	Here is an example of simple documentation of an A-Frame component:
	## aframe-gridhelper-component

	A GridHelper component for [A-Frame](https://aframe.io).

	### Properties

	\| Property \| Description \| Default Value \|
	\| ---------------- \| ----------- \| ------------- \|
	\| size \| \| 5 \|
	\| divisions \| \| 10 \|
	\| colorCenterLine \| \| red \|
	\| colorGrid \| \| black \|

	### Usage

	```html
	<head>
	<title>My A-Frame Scene</title>
	<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
	<script src="https://rawgit.com/dbradleyfl/aframe-gridhelper/master/dist/aframe-gridhelper-component.min.js"></script>
	</head>

	<body>
	<a-scene gridhelper>
	<a-entity geometry="primitive: box" material="color: #C03546"></a-entity>
	</a-scene>
	</body>
	```

	And here is the corresponding code to the example documentation above:
	/**
	* GridHelper component for A-Frame.
	*/
	AFRAME.registerComponent('gridhelper', {
	schema: {
	size: { default: 5 },
	divisions: { default: 10 },
	colorCenterLine: {default: 'red'},
	colorGrid: {default: 'black'}
	},

	/**
	* Called once when component is attached. Generally for initial setup.
	*/
	init: function () {
	var scene = this.el.object3D;
	var data = this.data;

	var size = data.size;
	var divisions = data.divisions;
	var colorCenterLine = data.colorCenterLine;
	var colorGrid = data.colorGrid;

	var gridHelper = new THREE.GridHelper( size, divisions, colorCenterLine, colorGrid );
	gridHelper.name = "gridHelper";
	scene.add(gridHelper);
	},
	remove: function () {
	var scene = this.el.object3D;
	scene.remove(scene.getObjectByName("gridHelper"));
	}
	});

	Now given this new code, make documentation for it:
	// Comment for this prompt template: you can paste your own code here to generate docs for your own component
	AFRAME.registerComponent('screentock', {
	schema: {
	takeScreenshot: { type: 'boolean', default: false },
	filename: {type: 'string', default: 'screenshot' },
	type: {type: 'string', default: 'jpg'}, // png, jpg, img
	selector: {type: 'selector'}
	},
	tick: function (time, timeDelta) {
	// console.log('tick')
	},
	init: function () {
	// console.log('init')
	},
	tock: function () {
	// console.log('tock')
	// this should be paused when not in use. probably restart, set true, pause
	var renderer = AFRAME.scenes[0].renderer;
	// const renderer = this.element;
	if (this.data.takeScreenshot) {
	this.el.setAttribute('screentock', 'takeScreenshot', false);
	// this.el.setAttribute('takeScreenshot', false);
	takeScreenshotNow(this.data.filename, this.data.type)
	}
	}
	})