Reactive UI changes

package.json

@@ -12,7 +12,8 @@
     "react-dom": "^17.0.2",
     "react-error-boundary": "^4.0.12",
     "react-router-dom": "^6.3.0",
-    "react-scripts": "^5.0.0"
+    "react-scripts": "^5.0.0",
+    "react-swipeable-views": "^0.14.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -61,6 +62,7 @@
     "@types/node": "^20.10.5",
     "@types/react": "17.0.3",
     "@types/react-dom": "17.0.3",
+    "@types/react-swipeable-views": "^0.13.5",
     "eslint-plugin-react-hooks": "^4.3.0",
     "typescript": "^4.9.5"
   }

src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Col, Container, Row } from 'react-bootstrap';
+import { Col, Container, Row, Stack } from 'react-bootstrap';
 import { useSearchParams } from 'react-router-dom';
 import { ErrorBoundary } from 'react-error-boundary';
 
@@ -12,6 +12,7 @@ import ShootMassAnalysisSection from 'src/components/ShootMassAnalysisSection';
 import WorldOfTanksSection from 'src/components/WorldOfTanks/WorldOfTanksSection';
 import { DeadzoneSection } from 'src/components/Deadzone/DeadzoneSection';
 
+
 const _viewToAdditionalTexts: Map<CalculatorViewChoice, string[]> = new Map([
   [CalculatorViewChoice.KtShoot, ['shoot']],
   [CalculatorViewChoice.KtFight, ['fight']],
@@ -60,7 +61,7 @@ const App = () => {
   ) : JSX.Element {
     return (
       <ErrorBoundary fallbackRender={fallbackRender}>
-        <div style={{ display: currentView === view ? 'block' : 'none' }}>
+        <div style={{ display: currentView === view ? 'block' : 'none'}}>
           {child}
         </div>
       </ErrorBoundary>
@@ -69,23 +70,19 @@ const App = () => {
 
   return (
     <>
-      <AppHeader navCallback={setCurrentView} currentView={currentView} />
-        <Container>
-          <Row>
-            <Col className={Util.centerHoriz + ' p-0'} style={{fontSize: '11px'}}>
-              Starred (*) items have explanations in hovertext and 'Notes' at bottom.
-            </Col>
-          </Row>
-          <Row>
-            <Col>
-              {sectionDiv(CalculatorViewChoice.KtShoot, <ShootSection/>)}
-              {sectionDiv(CalculatorViewChoice.KtFight, <FightSection/>)}
-              {sectionDiv(CalculatorViewChoice.KtShootMassAnalysis, <ShootMassAnalysisSection/>)}
-              {sectionDiv(CalculatorViewChoice.WorldOfTanks, <WorldOfTanksSection/>)}
-              {sectionDiv(CalculatorViewChoice.Deadzone, <DeadzoneSection/>)}
-            </Col>
-          </Row>
-        </Container>
+        <Stack>
+          <AppHeader navCallback={setCurrentView} currentView={currentView} />
+          <div className={Util.centerHoriz + ' p-0'} style={{fontSize: '11px'}}>
+            Starred (*) items have explanations in hovertext and 'Notes' at bottom.
+          </div>
+          <div>
+            {sectionDiv(CalculatorViewChoice.KtShoot, <ShootSection/>)}
+            {sectionDiv(CalculatorViewChoice.KtFight, <FightSection/>)}
+            {sectionDiv(CalculatorViewChoice.KtShootMassAnalysis, <ShootMassAnalysisSection/>)}
+            {sectionDiv(CalculatorViewChoice.WorldOfTanks, <WorldOfTanksSection/>)}
+            {sectionDiv(CalculatorViewChoice.Deadzone, <DeadzoneSection/>)}
+          </div>
+        </Stack>
     </>
   );
 };

src/components/AttackerControls.tsx

@@ -99,21 +99,17 @@ const AttackerControls: React.FC<Props> = (props: Props) => {
   const elemsCol1 = propsToRows(paramsCol1);
 
   return (
-    <Container style={{width: '310px'}}>
+    <Container>
       <Row>
         <Col>Attacker</Col>
         <Col>{advancedCheckbox}</Col>
       </Row>
       <Row>
         <Col>
-          <Container className='p-0'>
             {elemsCol0}
-          </Container>
         </Col>
         <Col>
-          <Container className='p-0'>
             {elemsCol1}
-          </Container>
         </Col>
       </Row>
     </Container>

src/components/DefenderControls.tsx

@@ -77,16 +77,14 @@ const DefenderControls: React.FC<Props> = (props: Props) => {
   const elemsCol0 = propsToRows(paramsToShow);
   return (
     // it would be nice to make this something other than a fixed width
-    <Container style={{width: '130px'}}>
+    <Container>
       <Row>
         <Col>Defender</Col>
         <Col>{advancedCheckbox}</Col>
       </Row>
       <Row>
         <Col>
-          <Container className='p-0' style={{width: 'fit-content'}}>
-            {elemsCol0}
-          </Container>
+          {elemsCol0}
         </Col>
       </Row>
     </Container>

src/components/IncDecSelect.tsx

@@ -83,11 +83,11 @@ const IncDecSelect: React.FC<IProps> = (props: IProps) => {
 }
 
 export function propsToRow(props: Props): JSX.Element {
-  return <Row key={props.id}><Col className='pr-0'><IncDecSelect {...props}/></Col></Row>;
+  return <Row key={props.id}><Col><IncDecSelect {...props}/></Col></Row>;
 }
 
 export function propsToRows(props: Props[]): JSX.Element[] {
-  return props.map(p => <Row key={p.id}><Col className='pr-0'><IncDecSelect {...p}/></Col></Row>);
+  return props.map(p => <Row key={p.id}><Col><IncDecSelect {...p}/></Col></Row>);
 }
 
 export default IncDecSelect;

src/components/ShootOptionControls.tsx

@@ -35,11 +35,11 @@ const ShootOptionControls: React.FC<Props> = (props: Props) => {
     <Row key={p.id}><Col className='pr-0'><IncDecSelect {...p}/></Col></Row>);
 
   return (
-    <Container style={{width: '310px'}}>
-      <Row>General</Row>
+    <Container>
+      <Row className='justify-content-center'>General</Row>
       <Row>
         <Col>
-          <Container className='p-0'>
+          <Container>
             {paramElems.slice(0, paramElems.length / 2)}
           </Container>
         </Col>