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:
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);
