styling

src/components/Competition/Points.jsx

@@ -1,21 +1,40 @@
 import { FormControl, TextField } from '@mui/material'
 
 export default function Points({ num, participant, participantId, myRef, onInputClick, rowIndex }) {
+    // Min/Max-Index berechnen
+    let minIdx = -1,
+        maxIdx = -1
+    if (participant?.points && participant.points.length > 0) {
+        const nums = participant.points.map(Number)
+        const min = Math.min(...nums)
+        const max = Math.max(...nums)
+        minIdx = nums.indexOf(min)
+        maxIdx = nums.lastIndexOf(max)
+    }
     return (
         <div style={{ display: 'flex' }}>
-            {Array.from({ length: num }).map((_, i) => (
-                <FormControl key={`${participantId}-${i}`} sx={{ m: 1, maxWidth: 60 }} size="small">
-                    <TextField
-                        label={'# ' + (i + 1)}
-                        name={`${participantId}/${i}`}
-                        value={participant?.points ? participant.points[i] ?? '' : ''}
-                        size="small"
-                        inputRef={(el) => myRef && myRef(el, i, rowIndex)}
-                        onFocus={() => onInputClick && onInputClick(i)}
-                        readOnly
-                    />
-                </FormControl>
-            ))}
+            {Array.from({ length: num }).map((_, i) => {
+                let bg = undefined
+                let color = undefined
+                if (i === minIdx || i === maxIdx) {
+                    color = 'gray'
+                    bg = i === minIdx ? '#fb00000F' : '#00ff1a0F'
+                }
+                return (
+                    <FormControl key={`${participantId}-${i}`} sx={{ m: 1, maxWidth: 60 }} size="small">
+                        <TextField
+                            label={'# ' + (i + 1)}
+                            name={`${participantId}/${i}`}
+                            value={participant?.points ? participant.points[i] ?? '' : ''}
+                            size="small"
+                            inputRef={(el) => myRef && myRef(el, i, rowIndex)}
+                            onFocus={() => onInputClick && onInputClick(i)}
+                            readOnly
+                            sx={{ background: bg, '& input': { color: color, fontWeight: 700 } }}
+                        />
+                    </FormControl>
+                )
+            })}
         </div>
     )
 }

src/components/Competition/PointsView.jsx

@@ -1,5 +1,4 @@
 import { FormControl, InputLabel, MenuItem, Select, TextField } from '@mui/material'
-import { styled as muiStyled } from '@mui/material/styles'
 import { parseWertungen, getParticipantInfo } from '../../utilities/participantUtils'
 import { useEffect, useRef, useState } from 'react'
 import KataSelect from '../Kata/KataSelect'
@@ -17,6 +16,7 @@ const PREFIX = 'PointsView'
 const classes = {
     row: `${PREFIX}-row`,
     club: `${PREFIX}-club`,
+    id: `${PREFIX}-id`,
 }
 
 const Root = styled('div')({
@@ -28,10 +28,13 @@ const Root = styled('div')({
     [`& .${classes.row} > div`]: {
         marginRight: '1rem',
     },
+    [`& .${classes.id}`]: {
+        minWidth: '2.5rem',
+    },
     [`& .${classes.club}`]: {
         display: 'flex',
         flexDirection: 'column',
-        minWidth: '14rem',
+        minWidth: '16rem',
         alignItems: 'center',
     },
 })
@@ -41,7 +44,7 @@ export default function PointsView({ groupData, allParticipants, allTeams }) {
     const { data: groupEncounters, loading } = useFetch(apiServer + '/group/encounters/' + groupData.id + token)
     const [encounter, setEncounter] = useState(null)
     const [judges, setJudges] = useState(5)
-    const [average, setAverage] = useState(5)
+    const [average, setAverage] = useState(6)
     const [open, setOpen] = useState(false)
     const [modalIndex, setModalIndex] = useState({ participantId: null, pointIndex: null })
     const [participantData, setParticipantData] = useState({})
@@ -168,17 +171,17 @@ export default function PointsView({ groupData, allParticipants, allTeams }) {
 
     // TODO: Colors styled
     const placeColors = ['#ffd700', '#c0c0c0', '#cd7f32', '#90ee90'] // Gold, Silber, Bronze, Grün
-    const PlaceBadge = muiStyled('span')(({ place }) => ({
+    const PlaceBadge = styled('span')({
         display: 'inline-block',
         minWidth: 24,
+        height: 24,
+        lineHeight: '24px',
         textAlign: 'center',
-        borderRadius: 12,
+        borderRadius: '50%',
         fontWeight: 700,
-        color: '#222',
-        background: placeColors[place - 1] || '#eee',
         marginRight: 8,
-        padding: '2px 8px',
-    }))
+        background: '#eee',
+    })
 
     // Teilnehmer-Komponente mit Platzierung
     const Participant = ({ participants, index, place }) => {
@@ -186,10 +189,12 @@ export default function PointsView({ groupData, allParticipants, allTeams }) {
         const pid = String(participants.id)
         return (
             <div className={classes.row}>
-                {place && place <= 4 && <PlaceBadge place={place}>{place}</PlaceBadge>}
-                <div>{participants.id}</div>
+                <div className={classes.id}>{participants.id}</div>
                 <div className={classes.club}>
-                    {!groupData.discipline.includes('Team') && <span>{participants.prename + ' ' + participants.name}</span>}
+                    <div>
+                        {place && place <= 4 && <PlaceBadge style={{ background: placeColors[place - 1] || '#eee' }}>{place}</PlaceBadge>}
+                        <span>{participants.prename + ' ' + participants.name}</span>
+                    </div>
                     <strong>{participants.club}</strong>
                 </div>
                 <KataSelect
@@ -217,7 +222,7 @@ export default function PointsView({ groupData, allParticipants, allTeams }) {
                     isPointsSystem={groupData?.pointsSystem}
                 />
                 <FormControl sx={{ m: 1, maxWidth: 80 }} size="small">
-                    <TextField label="Sum" variant="filled" value={participantData[pid]?.total ?? ''} disabled size="small" />
+                    <TextField label="Sum" variant="filled" value={participantData[pid]?.total ?? ''} disabled size="small" sx={{ '& input': { fontWeight: 700 } }} />
                 </FormControl>
             </div>
         )