figbertmath

[RADIOACTIVE] miscellaneous math programs in website form
git clone git://git.figbert.com/figbertmath.git
Log | Files | Refs | README

polygonAngle.js (3089B)

      1 import React from 'react';
      2 import PropTypes from 'prop-types';
      3 import { CalcOut } from "../lowLevel/calcOut";
      4 import { Pad } from "../lowLevel/pad";
      5 
      6 export class PolygonAngle extends React.Component {
      7     constructor(props) {
      8         super(props);
      9         this.state = {
     10             output: '',
     11             sides: '',
     12             type: 'Regular'
     13         };
     14         this.calcAngles = this.calcAngles.bind(this);
     15         this.onChange = this.onChange.bind(this);
     16         this.onTypeClick = this.onTypeClick.bind(this);
     17     }
     18 
     19     calcAngles() {
     20         const sides = Math.round(Number(this.state.sides));
     21         if (sides < 3) {
     22             this.setState({
     23                 output: 'ERROR'
     24             });
     25         } else {
     26             const totalInterior = (sides - 2) * 180;
     27             if (this.state.type === 'Regular') {
     28                 let eachInterior = totalInterior / sides,
     29                     eachExterior = 360 / sides;
     30                 if (eachInterior % 1 !== 0) {
     31                     eachInterior = '~' + Math.round(eachInterior);
     32                 }
     33                 if (eachExterior % 1 !== 0) {
     34                     eachExterior = '~' + Math.round(eachExterior);
     35                 }
     36                 this.setState({
     37                     output: ['Total Interior: ' + totalInterior + '°', 'Each Interior: ' + eachInterior + '°', 'Each Exterior: ' + eachExterior + '°']
     38                 })
     39             } else {
     40                 this.setState({
     41                     output: 'Total Interior: ' + totalInterior + '°'
     42                 })
     43             }
     44         }
     45     }
     46 
     47     onChange(object) {
     48         const value = object.target.value;
     49         this.setState({ sides: value }, () => {
     50             if (this.state.sides !== '') {
     51                 this.calcAngles()
     52             } else {
     53                 this.setState({
     54                     output: ''
     55                 })
     56             }
     57         });
     58     }
     59 
     60     onTypeClick() {
     61         if (this.state.type === 'Regular') {
     62             this.setState({ type: 'Irregular Convex' }, () => {
     63                 if (this.state.sides !== '') {
     64                     this.calcAngles()
     65                 }
     66             });
     67         } else {
     68             this.setState({ type: 'Regular'}, () => {
     69                 if (this.state.sides !== '') {
     70                     this.calcAngles()
     71                 }
     72             });
     73         }
     74     }
     75 
     76     render() {
     77         return (
     78             <div>
     79                 <CalcOut mode={this.props.mode} output={this.state.output} />
     80                 <Pad
     81                     buttonValues={['type', 'sides', 'select']}
     82                     displayValues={[this.state.type, '# of sides', '…']}
     83                     mode={this.props.mode}
     84                     onChange={this.onChange}
     85                     onClick={this.onTypeClick}
     86                     onModeClick={this.props.onModeChange}
     87                     textValues={[this.state.sides]}
     88                     type={'large'}
     89                 />
     90             </div>
     91         );
     92     }
     93 }
     94 PolygonAngle.propTypes = {
     95     mode: PropTypes.string.isRequired,
     96     onModeChange: PropTypes.func.isRequired
     97 };