Merge pull request #51 from jcw780/verticalTypes

Vertical types

HISTORY.md

@@ -7,7 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-## [v2.2.9](https://github.com/jcw780/wows_ballistics/compare/v2.2.8...v2.2.9)
+## [v2.2.10](https://github.com/jcw780/wows_ballistics/compare/v2.2.9...v2.2.10)
+
+### Merged
+
+- Formalize dispersion [`#50`](https://github.com/jcw780/wows_ballistics/pull/50)
+
+### Commits
+
+- feature: added settings to select vertical type - formatting adjusted [`098f45e`](https://github.com/jcw780/wows_ballistics/commit/098f45e7f40b64024d32693ad42b5b110d5e6b71)
+- refactor: deal with warnings [`2a3e7d5`](https://github.com/jcw780/wows_ballistics/commit/2a3e7d50cba72f92bc0d8db2ad09715524777d3b)
+- fix: cleaned up css and naming for settings [`14cf853`](https://github.com/jcw780/wows_ballistics/commit/14cf8533792c48a6a2cc9b6cfd7035b3c41ecc7d)
+- update version [`489e319`](https://github.com/jcw780/wows_ballistics/commit/489e3196fd7d0507623201e8c3752ebd794a85ea)
+- feature: added wasm to support different vertical types [`a6b36be`](https://github.com/jcw780/wows_ballistics/commit/a6b36bebd703073876c9fc4c77a1dc57f69db7e7)
+- fix: edited readme [`250b959`](https://github.com/jcw780/wows_ballistics/commit/250b95995cce710638b26ef79a9c3aa691bcd45e)
+- Update README.md [`8f54936`](https://github.com/jcw780/wows_ballistics/commit/8f54936c29c615c273ce52d5e4726f056d5290a4)
+- Update README.md [`4820ec8`](https://github.com/jcw780/wows_ballistics/commit/4820ec8f06ce4955a44de35f410dd11f1972277b)
+
+## [v2.2.9](https://github.com/jcw780/wows_ballistics/compare/v2.2.8...v2.2.9) - 2021-01-21
 
 ### Commits
 

README.md

@@ -1,6 +1,6 @@
 # <img src="/public/android-chrome-512x512.png" width="64" height="64"> World of Warships Ballistics Calculator
 [![License](https://img.shields.io/github/license/jcw780/wows_ballistics)](./LICENSE)
-[![](https://img.shields.io/github/commit-activity/m/jcw780/wows_ballistics?style=plastic)](https://github.com/jcw780/wows_ballistics/pulse)
+[![](https://img.shields.io/github/commit-activity/y/jcw780/wows_ballistics?style=plastic)](https://github.com/jcw780/wows_ballistics/pulse)
 [![World of Warships Ballistics](https://img.shields.io/website?url=https%3A%2F%2Fjcw780.github.io/wows_ballistics/)](https://jcw780.github.io/wows_ballistics/)
 [![Discord](https://discordapp.com/api/guilds/731224331136532531/widget.png)](https://discord.gg/fpDB9y5)
 - Page Link: https://jcw780.github.io/wows_ballistics/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wows_ballistics",
-  "version": "2.2.9",
+  "version": "2.2.10",
   "private": true,
   "license": "MIT",
   "homepage": "http://jcw780.github.io/wows_ballistics",

src/components/App.tsx

@@ -51,7 +51,8 @@ class App extends React.Component<{},{}> {
 		distance: {min: 0, max: undefined, stepSize: 1000, },
 		calculationSettings: {
 			calculationMethod: 1, timeStep: 0.02,
-			launchAngle : {min: 0, max: 30, precision: 0.1},
+			launchAngle: {min: 0, max: 30, precision: 0.1},
+			verticalType: 0
 		},
 		format: {
 			rounding: 3, shortNames: true, legendPosition: 'right',
@@ -140,9 +141,21 @@ class App extends React.Component<{},{}> {
 			3: (shell) : void => calculator.calcImpactRungeKutta4(shell)
 		};
 		if (method in calcImpactFunc) return calcImpactFunc[method];
-		else{console.error('Error', method); throw new Error('Invalid parameter');}
+		else{console.error('Error', method); throw new Error('Invalid calculation method');}
 	}
-
+
+	calcDispersion = () => {
+		const {calculator} = this;
+		const {verticalType} = this.settings.calculationSettings;
+		const dispersionFunction = {
+			0: (shell) : void => calculator.calcDispersion(shell, this.module.verticalTypes.horizontal.value),
+			1: (shell) : void => calculator.calcDispersion(shell, this.module.verticalTypes.normal.value),
+			2: (shell) : void => calculator.calcDispersion(shell, this.module.verticalTypes.vertical.value)
+		}
+		if (verticalType in dispersionFunction) return dispersionFunction[verticalType];
+		else {console.error('Error', verticalType); throw new Error('Invalid verticalType');}
+	}
+
 	generate = () : void => {
 		const shellData = this.SFCref.current!.returnShellData();
 		const tgtData = this.TFCref.current!.returnData();
@@ -204,10 +217,11 @@ class App extends React.Component<{},{}> {
 			let maxRange = 0;
 			this.applyCalculationSettings();
 			const impactFunction = this.calcImpact();
+			const dispersionFunction = this.calcDispersion();
 			//console.log(impactFunction);
 			shells.forEach(shell => {
 				impactFunction(shell);
-				calculator.calcDispersion(shell);
+				dispersionFunction(shell);
 				calculator.calcAngles(shell, 
 					tgtData.armor, tgtData.inclination
 				);

src/components/Charts/Charts.tsx

@@ -304,7 +304,7 @@ export class ChartGroup extends React.Component<chartGroupProps>{
         defaults.global.animation = false;
         Chart.plugins.register({ //Allows viewing of downloaded image on bright backgrounds
             beforeDraw: function(chartInstance) {
-                let ctx = chartInstance.chart.ctx;
+                const ctx = chartInstance.chart.ctx;
                 ctx.fillStyle = "white";
                 ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
             },
@@ -570,11 +570,11 @@ export class ChartGroup extends React.Component<chartGroupProps>{
         }
         const generatePost = (i : number, name : string, colors : string[]) => {
             for(const [index, chart] of configPost.entries()) { //Post
-                let pL : Array<any> = [
+                const pL : Array<any> = [
                     postData.fused[index + graphData.angles.length*i],
                     postData.notFused[index + graphData.angles.length*i]
                 ];
-                let pLShow : boolean[] = [true, true];
+                const pLShow : boolean[] = [true, true];
                 for(let j=0; j<2; ++j){ //react-chartjs-2 doesn't like undefined data
                     if(pL[j].length === 0){pL[j] = [{x: 0, y: 0}]; pLShow[j] = false;}
                 }

src/components/Navbar/Navbar.tsx

@@ -5,9 +5,6 @@ import * as T from '../commonTypes';
 import NavDropdownContainer from './NavDropdownContainer';
 import './Navbar.css';
 
-import GithubLogo from './GitHub-Mark-Light-32px.png';
-import DiscordLogo from './Discord-Logo-White.png';
-
 const NavDropdown = React.lazy(() => import('react-bootstrap/NavDropdown'));
 export class NavbarCustom extends React.Component<{links: T.linkT}>{
     state = {update: true};

src/components/SettingsBar/SettingsBar.css

@@ -17,30 +17,31 @@
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
     grid-gap: 0;
+    column-gap: 1rem;
 }
 
 .graph-region{
     grid-column: span 3;
     display: grid;
+    grid-template-rows: 2rem auto;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
     grid-gap: 0;
 }
 
 .graph-title{
-    grid-column-start: 1;
-    grid-column-end: -1;
+    grid-column: 1/-1;
 }
 
 .calc-region{
-    grid-column: span 1;
+    grid-column: span 2;
     display: grid;
+    grid-template-rows: 2rem auto;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
     grid-gap: 0;
 }
 
 .calc-title{
-    grid-column-start: 1;
-    grid-column-end: -1;
+    grid-column: 1/-1;
 }
 
 .content-box{

src/components/SettingsBar/SettingsBarInternal.tsx

@@ -36,6 +36,20 @@ const CalculationRadio : React.FunctionComponent<{settings: T.settingsT}> = Reac
         </CommonRadioFormat>
     );
 });
+const VerticalTypeRadio : React.FunctionComponent<{settings: T.settingsT}> = React.memo(({settings}) => {
+    const options = ["Horizontal Plane", "Trajectory Normal", "Vertical Plane"];
+    const values = [0, 1, 2];
+    const {calculationSettings} = settings;
+    const onChange = (value: number) => {calculationSettings.verticalType = value;};
+    return(
+        <CommonRadioFormat>
+            <SettingsRadio options={options} values={values}
+                defaultValue={calculationSettings.verticalType}
+                onChange={onChange}
+            />
+        </CommonRadioFormat>
+    );
+});
 
 export class SettingsBarInternal extends React.PureComponent<settingsBarProps>{
     titles : T.collapseTitlesT = ["Hide: ", "Show: "]; // 0: Hide 1: Show
@@ -113,7 +127,7 @@ export class SettingsBarInternal extends React.PureComponent<settingsBarProps>{
     }
     //Distance Axis
     private handleGraphChange = (value: string, id: string) => {
-        var numValue : number | undefined;
+        let numValue : number | undefined;
         if(value === ''){numValue = undefined;} 
         else{numValue = parseFloat(value);}
         this.props.settings.distance[id] = numValue; 
@@ -289,6 +303,10 @@ export class SettingsBarInternal extends React.PureComponent<settingsBarProps>{
                         <CalculationRadio settings={settings}/>
                         {this.generateNumericalMethodForm()}
                     </div>
+                    <div className="content-box">
+                        <h4>Vertical Dispersion Type</h4>
+                        <VerticalTypeRadio settings={settings}/>
+                    </div>
                 </div>
             </div>
             <Row className="justify-content-sm-center">

src/components/ShellForms/ShellForms.tsx

@@ -459,7 +459,7 @@ export class ShellFormsContainer extends React.Component<{settings : T.settingsT
 			}
 			this.shellRefs.push(React.createRef<ShellForms>());
 			this.setState((current) => {
-				let set = current.keys;
+				const set = current.keys;
 				return {keys: set.add(index), disabled: true};
 			});
 		}
@@ -469,7 +469,7 @@ export class ShellFormsContainer extends React.Component<{settings : T.settingsT
 		if(state.disabled){return;}
 		else{
 			if(state.keys.size > 0){
-				let set = state.keys; set.delete(key); this.deletedKeys.push(key);
+				const set = state.keys; set.delete(key); this.deletedKeys.push(key);
 				this.shellRefs.splice(index, 1);
 				this.setState((current) => {
 					return {keys: set, disabled: true};
@@ -482,7 +482,7 @@ export class ShellFormsContainer extends React.Component<{settings : T.settingsT
 		this.copied = true; this.addShip();
 	}
 	returnShellData = () => {
-		let data = Array<S.formDataT>();
+		const data = Array<S.formDataT>();
 		this.shellRefs.forEach((reference, i) => {
 			const returnedData : S.formDataT | false = reference.current!.returnData();
 			if(returnedData !== false){

src/components/TargetForms/TargetForms.tsx

@@ -183,12 +183,12 @@ export class TargetFormsContainer extends React.PureComponent<{}, targetFormsCon
         if(this.deletedKeys[id].length > 0){index = this.deletedKeys[id].pop()!;}
         else{index = this.state.keys[id].size;}
 		this.setState((current) => {
-            let set = current.keys[id]; set.add(index);
+            const set = current.keys[id]; set.add(index);
 			return {...current, keys : {...current.keys, id: set}};
         });
     }
     deleteForm = (key: number, index: number, id : multiFormT) : void => {
-        let set = this.state.keys[id];
+        const set = this.state.keys[id];
         set.delete(key); this.deletedKeys[id].push(key);
 		this.setState((current) => {return {...current, keys : {...current.keys, id: set} }});
     }
@@ -204,7 +204,7 @@ export class TargetFormsContainer extends React.PureComponent<{}, targetFormsCon
     }
     private handleAngleChange = (value: string, id : number) : void => {this.targetData.angles[id] = parseFloat(value);}
     private generateAngleElements = (elementsPerColumn : number) => {
-        const stateKeys = this.state.keys, {targetData} = this; let angleElements : Array<Array<JSX.Element>> = [];
+        const stateKeys = this.state.keys, {targetData} = this; const angleElements : Array<Array<JSX.Element>> = [];
         Array.from(stateKeys.angles).forEach((key, i) => {
             const columnIndex = Math.floor(i / elementsPerColumn);
             if(i % elementsPerColumn === 0){angleElements.push([]);}
@@ -233,7 +233,7 @@ export class TargetFormsContainer extends React.PureComponent<{}, targetFormsCon
     }
     private onRefAngleChange = (value: string, id : string) : void => {this.targetData.refAngles[id] = parseFloat(value);}
     private generateRefAngleElements = (elementsPerColumn : number) => {
-        const stateKeys = this.state.keys; let angleElements : Array<Array<JSX.Element>> = [];
+        const stateKeys = this.state.keys; const angleElements : Array<Array<JSX.Element>> = [];
         Array.from(stateKeys.refAngles).forEach((key, i) => {
             const columnIndex = Math.floor(i / elementsPerColumn);
             if(i % elementsPerColumn === 0) angleElements.push([]);

src/components/commonTypes.tsx

@@ -36,7 +36,8 @@ export interface distanceSettingsT {
 }
 export interface calculationSettingsT {
     calculationMethod: number, timeStep: number, 
-    launchAngle: {min: number, max: number, precision: number}
+    launchAngle: {min: number, max: number, precision: number},
+    verticalType: number
 }
 export interface colorSettingsT{
     hueMin: number, hueMax: number,