Skip to content

Commit

Permalink
Fix TeamSummary & Score Calculator layout tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@ThePotatoArchivist
ThePotatoArchivist committed Mar 17, 2024
1 parent a0db02f commit 3fab819
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 73 deletions.
8 changes: 0 additions & 8 deletions client/src/apps/picklist/components/TeamSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,6 @@ function TeamSummary({
)}
</Dialog>
</div>
<div>
<h2 className='text-2xl'>Comments</h2>

{(teamData && teamData.Comments) ? Object.entries(teamData.Comments).sort(([_, a], [__, b]) => b - a).map(([comment, count]) => (
count > 0 && <p className={` ${commentToColor(comment)} `}>{snakeToSpaced(comment)}: {count}</p>
)) : <br />}
</div>

<div className='pl-5'>
<h2 className='pb-2 text-2xl'>Comments</h2>

Expand Down
110 changes: 45 additions & 65 deletions client/src/apps/score_calculator/ScoreCalculator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import React, { Dispatch, SetStateAction, useState } from 'react';

import LinkButton from '../../components/LinkButton';
import { MaterialSymbol } from 'react-material-symbols';
import MultiButton from '../../components/MultiButton';

function Counter({
value,
Expand All @@ -17,7 +16,7 @@ function Counter({
return (
<>
<button
className='text-md my-2 rounded-l-lg border bg-red-400 py-2 px-4 text-zinc-100'
className='text-md my-2 rounded-l-lg border bg-red-400 px-4 py-2 text-zinc-100'
onClick={() => onChange(value > 0 ? value - 1 : value)}>
-
</button>
Expand All @@ -31,18 +30,17 @@ function Counter({
}

function ScoreCalculator() {
const [autoLeave, setAutoLeave] = useState(Number);
const [autoSpeaker, setAutoSpeaker] = useState(Number);
const [autoAmp, setAutoAmp] = useState(Number);
const [teleSpeaker, setTeleSpeaker] = useState(Number);
const [ampedTeleSpeaker, setAmpedTeleSpeaker] = useState(Number);
const [teleAmp, setTeleAmp] = useState(Number);
const [park, setPark] = useState(Number);
const [climb, setClimb] = useState(Number);
const [climbSpot, setClimbSpot] = useState(Number);
const [trap, setTrap] = useState(Number);
const [harmony, setHarmony] = useState(Number);
const [speakerOnly, setSpeakerOnly] = useState(Boolean);
const [autoLeave, setAutoLeave] = useState(0);
const [autoSpeaker, setAutoSpeaker] = useState(0);
const [autoAmp, setAutoAmp] = useState(0);
const [teleSpeaker, setTeleSpeaker] = useState(0);
const [ampedTeleSpeaker, setAmpedTeleSpeaker] = useState(0);
const [teleAmp, setTeleAmp] = useState(0);
const [park, setPark] = useState(0);
const [climb, setClimb] = useState(0);
const [climbSpot, setClimbSpot] = useState(0);
const [trap, setTrap] = useState(0);
const [harmony, setHarmony] = useState(0);

const handleReset = () => {
setAutoLeave(0);
Expand All @@ -59,27 +57,14 @@ function ScoreCalculator() {
};

return (
<div
className={`flex ${speakerOnly ? 'h-[70vh]' : 'h-screen'} flex-col`}>
<div className='mb-7 border border-neutral-900 bg-gray-800'>
<div className='flex h-dvh flex-col'>
<div className='mb-2 border border-neutral-900 bg-gray-800'>
<br />
<h1 className='mb-4 text-center text-3xl font-bold text-[#48c55c]'>
Score Calculator
</h1>
</div>

<div className='absolute right-4 top-4 col-span-2 grid grid-rows-[1fr_1fr] gap-2 self-center'>
<MultiButton
onChange={setSpeakerOnly}
value={speakerOnly}
labels={['All', 'Speaker Only']}
values={[false, true]}
className={'rounded-md text-sm'}
unSelectedClassName='text-gray-500 bg-gray-300 '
selectedClassName='bg-green-500 text-white'
/>
</div>

<div className='fixed left-4 top-4 z-20 flex flex-col gap-2 rounded-md bg-slate-200 p-1'>
<LinkButton link='/' className='snap-none'>
<MaterialSymbol
Expand All @@ -93,14 +78,15 @@ function ScoreCalculator() {
</LinkButton>
</div>

<div className='flex flex-grow flex-col gap-2'>
<div className='flex flex-grow flex-col'>
<button
onClick={handleReset}
className='text-md col-span-2 rounded-md border bg-blue-400/70 px-3 py-2 text-black'>
className='text-md col-span-2 mx-2 rounded-md border bg-blue-400/70 px-3 py-2 text-black'>
Reset All
</button>
<div className='flex flex-grow snap-x snap-mandatory flex-row overflow-x-auto *:flex-shrink-0'>
<div className='grid w-full snap-center snap-always grid-cols-[auto_1fr] p-2'>
<div className='grid w-23/24 snap-center snap-always grid-cols-[auto_1fr] p-2 grid-rows-[auto] auto-rows-fr'>
<h2 className='col-span-2 text-xl text-green-600 text-center'>Auto</h2>
<Counter value={autoLeave} onChange={setAutoLeave}>
Auto Leave
</Counter>
Expand All @@ -111,7 +97,8 @@ function ScoreCalculator() {
Auto Amp
</Counter>
</div>
<div className='grid w-full snap-center snap-always grid-cols-[auto_1fr] p-2'>
<div className='grid w-11/12 snap-center snap-always grid-cols-[auto_1fr] p-2 grid-rows-[auto] auto-rows-fr'>
<h2 className='col-span-2 text-xl text-green-600 text-center'>Teleop</h2>
<Counter value={teleSpeaker} onChange={setTeleSpeaker}>
Tele Speaker
</Counter>
Expand All @@ -126,7 +113,8 @@ function ScoreCalculator() {
</Counter>
</div>

<div className='grid w-full snap-center snap-always grid-cols-[auto_1fr] p-2'>
<div className='grid w-23/24 snap-center snap-always grid-cols-[auto_1fr] p-2 grid-rows-[auto] auto-rows-fr'>
<h2 className='col-span-2 text-xl text-green-600 text-center'>Endgame</h2>
<Counter value={park} onChange={setPark}>
Park
</Counter>
Expand All @@ -146,19 +134,15 @@ function ScoreCalculator() {
</div>

<div className='col-span-2 grid grid-cols-2 justify-center gap-2 bg-slate-200 p-3'>
{speakerOnly || (
<>
<p className='text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center'>
Leave:{' '}
<span className='rounded-lg bg-black/15 p-2 py-1'>
{autoLeave * 2}
</span>
</p>
</>
)}
<p className='text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center'>
Leave:{' '}
<span className='rounded-lg bg-black/15 p-2 py-1'>
{autoLeave * 2}
</span>
</p>

<p
className={` text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center ${speakerOnly ? 'col-span-2 max-h-12' : ''} `}>
className={` text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center`}>
Speaker:{' '}
<span className='rounded-lg bg-black/15 p-2 py-1'>
{autoSpeaker * 5 +
Expand All @@ -167,27 +151,23 @@ function ScoreCalculator() {
</span>
</p>

{speakerOnly || (
<>
<p className='text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center'>
Amp:{' '}
<span className='rounded-lg bg-black/15 p-2 py-1'>
{autoAmp * 2 + teleAmp * 1}
</span>
</p>
<p className='text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center'>
Amp:{' '}
<span className='rounded-lg bg-black/15 p-2 py-1'>
{autoAmp * 2 + teleAmp * 1}
</span>
</p>

<p className='text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center'>
Stage:{' '}
<span className='rounded-lg bg-black/15 p-2 py-1'>
{park * 1 +
climb * 3 +
climbSpot * 4 +
trap * 5 +
harmony * 2}
</span>
</p>
</>
)}
<p className='text-black-100 text-md rounded-md border-green-800 bg-green-400/70 px-3 py-2 text-center'>
Stage:{' '}
<span className='rounded-lg bg-black/15 p-2 py-1'>
{park * 1 +
climb * 3 +
climbSpot * 4 +
trap * 5 +
harmony * 2}
</span>
</p>
</div>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions client/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ export default {
},
rotate: {
'60': '60deg',
},
spacing: {
'23/24': '95.833333%'
}
},

Expand Down

0 comments on commit 3fab819

Please sign in to comment.