WIP: input slider component

konrad-jamrozik · Jun 28, 2024 · ee0bd9e · ee0bd9e
1 parent 574d390
commit ee0bd9e
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 0 deletions.
diff --git a/web/assets/spy_DodgerBlue_512px.svg b/web/assets/spy_DodgerBlue_512px.svg
diff --git a/web/src/components/FactionsDataGrid/InputSlider.tsx b/web/src/components/FactionsDataGrid/InputSlider.tsx
@@ -0,0 +1,82 @@
+/** This file was originally adapted from
+ * https://mui.com/material-ui/react-slider/#slider-with-input-field
+ */
+import { Button, Stack, SvgIcon, TextField } from '@mui/material'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import Slider from '@mui/material/Slider'
+import _ from 'lodash'
+import * as React from 'react'
+import { assetNameColors } from '../../lib/rendering/renderAssets'
+
+export default function InputSlider(): React.JSX.Element {
+  const [value, setValue] = React.useState(30)
+
+  function handleSliderChange(event: Event, newValue: number | number[]): void {
+    setValue(newValue as number)
+  }
+
+  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setValue(event.target.value === '' ? 0 : Number(event.target.value))
+  }
+
+  function handleBlur(): void {
+    if (value < 0) {
+      setValue(0)
+    } else if (value > 100) {
+      setValue(100)
+    }
+  }
+
+  return (
+    <Box>
+      <Stack>
+        <Grid container spacing={2} alignItems="center">
+          <Grid item>
+            <SvgIcon sx={{ width: 36, height: 36 }}>
+              {/* https://game-icons.net/1x1/delapouite/spy.html */}
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                <g transform="translate(0,0)">
+                  <path
+                    d="M218 19c-1 0-2.76.52-5.502 3.107-2.742 2.589-6.006 7.021-9.191 12.76-6.37 11.478-12.527 28.033-17.666 45.653-4.33 14.844-7.91 30.457-10.616 44.601 54.351 24.019 107.599 24.019 161.95 0-2.706-14.144-6.286-29.757-10.616-44.601-5.139-17.62-11.295-34.175-17.666-45.653-3.185-5.739-6.45-10.171-9.191-12.76C296.76 19.52 295 19 294 19c-6.5 0-9.092 1.375-10.822 2.85-1.73 1.474-3.02 3.81-4.358 7.34-1.338 3.53-2.397 8.024-5.55 12.783C270.116 46.73 263.367 51 256 51c-7.433 0-14.24-4.195-17.455-8.988-3.214-4.794-4.26-9.335-5.576-12.881-1.316-3.546-2.575-5.867-4.254-7.315C227.035 20.37 224.5 19 218 19zm-46.111 124.334c-1.41 9.278-2.296 17.16-2.57 22.602 6.61 5.087 17.736 10.007 31.742 13.302C217.18 183.031 236.6 185 256 185s38.82-1.969 54.94-5.762c14.005-3.295 25.13-8.215 31.742-13.302-.275-5.443-1.161-13.324-2.57-22.602-55.757 23.332-112.467 23.332-168.223 0zM151.945 155.1c-19.206 3.36-36.706 7.385-51.918 11.63-19.879 5.548-35.905 11.489-46.545 16.57-5.32 2.542-9.312 4.915-11.494 6.57-.37.28-.247.306-.445.546.333.677.82 1.456 1.73 2.479 1.973 2.216 5.564 4.992 10.627 7.744 10.127 5.504 25.944 10.958 45.725 15.506C139.187 225.24 194.703 231 256 231s116.813-5.76 156.375-14.855c19.78-4.548 35.598-10.002 45.725-15.506 5.063-2.752 8.653-5.528 10.627-7.744.91-1.023 1.397-1.802 1.73-2.479-.198-.24-.075-.266-.445-.547-2.182-1.654-6.174-4.027-11.494-6.568-10.64-5.082-26.666-11.023-46.545-16.57-15.212-4.246-32.712-8.272-51.918-11.631.608 5.787.945 10.866.945 14.9v3.729l-2.637 2.634c-10.121 10.122-25.422 16.191-43.302 20.399C297.18 200.969 276.6 203 256 203s-41.18-2.031-59.06-6.238c-17.881-4.208-33.182-10.277-43.303-20.399L151 173.73V170c0-4.034.337-9.113.945-14.9zm1.094 88.205C154.558 308.17 200.64 359 256 359c55.36 0 101.442-50.83 102.96-115.695a748.452 748.452 0 0 1-19.284 2.013c-1.33 5.252-6.884 25.248-15.676 30.682-13.61 8.412-34.006 7.756-48 0-7.986-4.426-14.865-19.196-18.064-27.012-.648.002-1.287.012-1.936.012-.65 0-1.288-.01-1.936-.012-3.2 7.816-10.078 22.586-18.064 27.012-13.994 7.756-34.39 8.412-48 0-8.792-5.434-14.346-25.43-15.676-30.682a748.452 748.452 0 0 1-19.285-2.013zM137.4 267.209c-47.432 13.23-77.243 32.253-113.546 61.082 42.575 4.442 67.486 21.318 101.265 48.719l16.928 13.732-21.686 2.211c-13.663 1.393-28.446 8.622-39.3 17.3-5.925 4.738-10.178 10.06-12.957 14.356 44.68 5.864 73.463 10.086 98.011 20.147 18.603 7.624 34.81 18.89 53.737 35.781l5.304-23.576c-1.838-9.734-4.134-19.884-6.879-30.3-5.12-7.23-9.698-14.866-13.136-22.007C201.612 397.326 199 391 199 384c0-3.283.936-6.396 2.428-9.133a480.414 480.414 0 0 0-6.942-16.863c-29.083-19.498-50.217-52.359-57.086-90.795zm237.2 0c-6.87 38.436-28.003 71.297-57.086 90.795a480.521 480.521 0 0 0-6.942 16.861c1.493 2.737 2.428 5.851 2.428 9.135 0 7-2.612 13.326-6.14 20.654-3.44 7.142-8.019 14.78-13.14 22.01-2.778 10.547-5.099 20.82-6.949 30.666l5.14 23.42c19.03-17.01 35.293-28.338 53.974-35.994 24.548-10.06 53.33-14.283 98.011-20.147-2.78-4.297-7.032-9.618-12.957-14.355-10.854-8.679-25.637-15.908-39.3-17.3l-21.686-2.212 16.928-13.732c33.779-27.4 58.69-44.277 101.265-48.719-36.303-28.829-66.114-47.851-113.546-61.082zM256 377c-8 0-19.592.098-28.234 1.826-4.321.864-7.8 2.222-9.393 3.324-1.592 1.103-1.373.85-1.373 1.85s1.388 6.674 4.36 12.846c2.971 6.172 7.247 13.32 11.964 19.924 4.717 6.604 9.925 12.699 14.465 16.806 4.075 3.687 7.842 5.121 8.211 5.377.37-.256 4.136-1.69 8.21-5.377 4.54-4.107 9.749-10.202 14.466-16.806 4.717-6.605 8.993-13.752 11.965-19.924C293.612 390.674 295 385 295 384s.22-.747-1.373-1.85c-1.593-1.102-5.072-2.46-9.393-3.324C275.592 377.098 264 377 256 377zm0 61.953c-.042.03-.051.047 0 .047s.042-.018 0-.047zm-11.648 14.701L235.047 495h41.56l-9.058-41.285C264.162 455.71 260.449 457 256 457c-4.492 0-8.235-1.316-11.648-3.346z"
+                    fill={assetNameColors.Intel}
+                    fillOpacity="1"
+                  ></path>
+                </g>
+              </svg>
+            </SvgIcon>
+          </Grid>
+          <Grid item xs>
+            <Slider
+              sx={{ width: '120px' }}
+              value={_.isNumber(value) ? value : 0}
+              onChange={handleSliderChange}
+              aria-labelledby="input-slider"
+            />
+          </Grid>
+          <Grid item>
+            <TextField
+              value={value}
+              label="Amount"
+              type="number"
+              size="small"
+              onChange={handleInputChange}
+              onBlur={handleBlur}
+              inputProps={{
+                step: 10,
+                min: 0,
+                max: 100,
+                type: 'number',
+                'aria-labelledby': 'input-slider',
+              }}
+              variant="outlined"
+            />
+          </Grid>
+        </Grid>
+        <Button variant="contained" id="input-slider">
+          Invest intel
+        </Button>
+      </Stack>
+    </Box>
+  )
+}
diff --git a/web/src/components/FactionsDataGrid/ManageFactionDialog.tsx b/web/src/components/FactionsDataGrid/ManageFactionDialog.tsx
@@ -12,6 +12,7 @@ import { getNormalizedPower } from '../../lib/codesync/ruleset'
 import { factionNameRenderMap } from '../../lib/rendering/renderFactions'
 import { getSx } from '../../lib/rendering/renderUtils'
 import { Label } from '../Label'
+import InputSlider from './InputSlider'
 
 const factionDetailsGridMaxWidthPx = 400
 export type ManageFactionDialogProps = {
@@ -82,6 +83,9 @@ export default function DeployMissionDialog(
             <Stack spacing={2} display="flex" alignItems="center">
               <Label>Panel1</Label>
               <Label>Panel2</Label>
+              <InputSlider />
+              <Label>Panel3</Label>
+              <Label>Panel4</Label>
             </Stack>
           </Stack>
         </DialogContent>