figbertmath

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

commit d1b4ae9f6143f828c56c98b3fbcd6d8b4969602f
parent c0fe4da0279ba83d7bcb28080a5a3479a21ff3e5
Author: therealFIGBERT <figbertwelner@gmail.com>
Date:   Mon, 25 Nov 2019 19:14:50 -0800

Add angular size/real size/distance calculator graphics

Diffstat:
Msrc/components/App.js | 3+++
Asrc/components/angSize/angSizeButton.js | 66++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/components/angSize/angSizeHandler.js | 105+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/components/angSize/angSizePad.js | 46++++++++++++++++++++++++++++++++++++++++++++++
Msrc/components/calcOut.js | 14+++++++++++++-
Msrc/index.css | 11+++++++++++
6 files changed, 244 insertions(+), 1 deletion(-)

diff --git a/src/components/App.js b/src/components/App.js @@ -1,6 +1,7 @@ import React from 'react'; import { ModeSelect } from "./modeSelect/modeSelectHandler"; import { BasicCalc } from "./basicCalc/basicHandler"; +import { AngSizeCalc } from "./angSize/angSizeHandler"; export class App extends React.Component { constructor(props) { @@ -22,6 +23,8 @@ export class App extends React.Component { switch (this.state.mode) { case 'basic': return <BasicCalc mode={this.state.mode} onModeChange={this.changeMode} />; + case 'angSize': + return <AngSizeCalc mode={this.state.mode} onModeChange={this.changeMode}/>; default: return <ModeSelect mode={this.state.mode} onButtonPress={this.changeMode} />; } diff --git a/src/components/angSize/angSizeButton.js b/src/components/angSize/angSizeButton.js @@ -0,0 +1,65 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +let buttonCSS = { + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-evenly', + alignItems: 'center' +}; + +let disabledCSS = { + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-evenly', + alignItems: 'center', + background: '#7e1221' +}; + +export class AngSizeButton extends React.Component { + render() { + if (this.props.truth) { + return ( + <button + className='calc calc__rectangleButton' + style={buttonCSS} + value={this.props.buttonValue} + onClick={this.props.onClick} + > + {this.props.buttonValue} = + <input + name={this.props.buttonValue} + type='number' + value={this.props.textValue} + onChange={this.props.onChange} + /> + </button> + ); + } else { + return ( + <button + className='calc calc__rectangleButton' + style={disabledCSS} + value={this.props.buttonValue} + onClick={this.props.onClick} + > + {this.props.buttonValue} = + <input + name={this.props.buttonValue} + type='number' + value={this.props.textValue} + onChange={this.props.onChange} + disabled + /> + </button> + ); + } + } +} +AngSizeButton.propTypes = { + buttonValue: PropTypes.string.isRequired, + textValue: PropTypes.string.isRequired, + truth: PropTypes.bool.isRequired, + onChange: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired +}; +\ No newline at end of file diff --git a/src/components/angSize/angSizeHandler.js b/src/components/angSize/angSizeHandler.js @@ -0,0 +1,104 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { CalcOut } from "../calcOut"; +import { AngSizePad } from "./angSizePad"; + +export class AngSizeCalc extends React.Component { + constructor(props) { + super(props); + this.state = { + output: '', + aVal: '', + aTruth: false, + rVal: '', + rTruth: false, + dVal: '', + dTruth: false + }; + this.onChange = this.onChange.bind(this); + this.onClick = this.onClick.bind(this); + } + + onClick(object) { + const objectID = object.target.value; + if (objectID === '⍺') { + if (!this.state.aTruth && !(this.state.rTruth && this.state.dTruth)) { + this.setState({ + aVal: '', + aTruth: !this.state.aTruth + }); + } else if (this.state.aTruth) { + this.setState({ + aVal: '', + aTruth: !this.state.aTruth + }); + } + } else if (objectID === 'r') { + if (!this.state.rTruth && !(this.state.aTruth && this.state.dTruth)) { + this.setState({ + rVal: '', + rTruth: !this.state.rTruth + }); + } else if (this.state.rTruth) { + this.setState({ + rVal: '', + rTruth: !this.state.rTruth + }); + } + } else if (objectID === 'd') { + if (!this.state.dTruth && !(this.state.aTruth && this.state.rTruth)) { + this.setState({ + dVal: '', + dTruth: !this.state.dTruth + }); + } else if (this.state.dTruth) { + this.setState({ + dVal: '', + dTruth: !this.state.dTruth + }); + } + } + } + + onChange(object) { + const value = object.target.value, + name = object.target.name; + if (name === '⍺') { + this.setState({ + aVal: value + }); + } else if (name === 'r') { + this.setState({ + rVal: value + }); + } else if (name === 'd') { + this.setState({ + dVal: value + }); + } + } + + render() { + return ( + <div> + <CalcOut mode={this.props.mode} output={this.state.output} /> + <AngSizePad + aVal={this.state.aVal} + aTruth={this.state.aTruth} + rVal={this.state.rVal} + rTruth={this.state.rTruth} + dVal={this.state.dVal} + dTruth={this.state.dTruth} + onChange={this.onChange} + onClick={this.onClick} + onModeChange={this.props.onModeChange} + /> + </div> + ); + } +} + +AngSizeCalc.propTypes = { + mode: PropTypes.string.isRequired, + onModeChange: PropTypes.func.isRequired +}; +\ No newline at end of file diff --git a/src/components/angSize/angSizePad.js b/src/components/angSize/angSizePad.js @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { AngSizeButton } from "./angSizeButton"; +import { ModeButton } from "../modeSelect/modeButton"; + +export class AngSizePad extends React.Component { + render() { + return ( + <div className='calc calc__pad' style={{alignItems: 'center'}}> + <AngSizeButton + buttonValue='⍺' + textValue={this.props.aVal} + truth={this.props.aTruth} + onChange={this.props.onChange} + onClick={this.props.onClick} + /> + <AngSizeButton + buttonValue='r' + textValue={this.props.rVal} + truth={this.props.rTruth} + onChange={this.props.onChange} + onClick={this.props.onClick} + /> + <AngSizeButton + buttonValue='d' + textValue={this.props.dVal} + truth={this.props.dTruth} + onChange={this.props.onChange} + onClick={this.props.onClick} + /> + <ModeButton value='select' modeName='…' onButtonPress={this.props.onModeChange} /> + </div> + ); + } +} +AngSizePad.propTypes = { + aVal: PropTypes.string.isRequired, + aTruth: PropTypes.bool.isRequired, + rVal: PropTypes.string.isRequired, + rTruth: PropTypes.bool.isRequired, + dVal: PropTypes.string.isRequired, + dTruth: PropTypes.bool.isRequired, + onChange: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired +}; +\ No newline at end of file diff --git a/src/components/calcOut.js b/src/components/calcOut.js @@ -16,6 +16,10 @@ let selectCSS = { textAlign: 'center', }; +let angSizeCSS = { + width: '20vmax' +}; + export class CalcOut extends React.Component { render() { switch (this.props.mode) { @@ -26,6 +30,14 @@ export class CalcOut extends React.Component { <div style={{fontSize: '1.5vmax'}}>{this.props.input}</div> </div> ); + case 'angSize': + return ( + <div className='calc calc__out' style={angSizeCSS}> + <span style={{fontSize: '2vmax', textAlign: 'left', lineHeight: '100%'}}> + {this.props.output} + </span> + </div> + ); default: return ( <div className='calc calc__out' style={selectCSS}> @@ -40,6 +52,6 @@ export class CalcOut extends React.Component { CalcOut.propTypes = { mode: PropTypes.string.isRequired, - output: PropTypes.number, + output: PropTypes.string, input: PropTypes.string }; \ No newline at end of file diff --git a/src/index.css b/src/index.css @@ -13,6 +13,17 @@ body { justify-content: center; } +input { + color: rgba(255, 255, 255, .7); + border: 0; + border-bottom: 0.25vmax solid #7e1221; + background: transparent; + width: 25vmax; + text-align: center; + font-size: 1vmax; + font-family: Tomorrow, -apple-system, sans-serif; +} + .calc { background: #ac1a2d; color: rgba(255, 255, 255, .7);