Skip to content

Commit

Permalink
Merge branch 'main' into prod
Browse files Browse the repository at this point in the history
  • Loading branch information
@hareeen
hareeen committed Dec 4, 2024
2 parents e93a48b + d828296 commit 58de002
Show file tree
Hide file tree
Showing 10 changed files with 193 additions and 101 deletions.
10 changes: 5 additions & 5 deletions src/app/[locale]/strat/[id]/components/StratMain.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ const ScrollSyncFixed: (props: ScrollSyncProps) => React.ReactNode = ScrollSync
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
const ScrollSyncPaneFixed: (props: ScrollSyncPaneProps) => React.ReactNode = ScrollSyncPane as any;

const SCROLL_SYNC_GROUP = ['x', 'y'];

export const StratMain = () => {
const [resizePanelSize, setResizePanelSize] = useState(20);
const zoom = useAtomValue(zoomAtom);
Expand Down Expand Up @@ -108,8 +110,6 @@ export const StratMain = () => {
return record;
}, [strategyData.strategy_players]);

const scrollSyncGroup = useMemo(() => ['x', 'y'], []);

useEffect(() => {
if (overlayRef.current) {
overlayRef.current.scrollTop *= zoom.changeRatio;
Expand Down Expand Up @@ -157,12 +157,12 @@ export const StratMain = () => {
direction="horizontal"
className="relative flex w-screen flex-grow overflow-hidden select-none"
>
<ResizablePanel defaultSize={20} minSize={4} className="border-r -z-50">
<ResizablePanel defaultSize={35} minSize={4} className="border-r -z-50">
<div className="min-h-20 h-20 border-b" />
</ResizablePanel>
<ResizableHandle className="w-0" withHandle />
<ResizablePanel
defaultSize={80}
defaultSize={65}
maxSize={96}
className="z-10 flex flex-col overflow-auto border-r"
onResize={(size) => {
Expand All @@ -187,7 +187,7 @@ export const StratMain = () => {
))}
</div>
</ScrollSyncPaneFixed>
<ScrollSyncPaneFixed group={scrollSyncGroup} innerRef={mainRef}>
<ScrollSyncPaneFixed group={SCROLL_SYNC_GROUP} innerRef={mainRef}>
<div
className={cn(
'relative overscroll-none overflow-x-scroll bg-background',
Expand Down
32 changes: 26 additions & 6 deletions src/app/[locale]/strat/[id]/components/header/FilterMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,15 @@ import { CustomIcons } from '@/components/icons/CustomIcons';
import { Button } from '@/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Toggle } from '@/components/ui/toggle';
import { filterAtom } from '@/lib/atoms';
import { viewOptionsAtom } from '@/lib/atoms';
import type { Enums } from '@/lib/database.types';
import { cn } from '@/lib/utils/helpers';
import { useAtom } from 'jotai';
import { useTranslations } from 'next-intl';
import { GIMMICK_BACKGROUND_STYLE } from '../../utils/constants';
import { produce } from 'immer';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';

export const FilterMenu = () => {
const GimmickTypes: Array<Enums<'gimmick_type'>> = [
Expand All @@ -20,8 +23,9 @@ export const FilterMenu = () => {
'Enrage',
];

const [filterState, setFilterState] = useAtom(filterAtom);
const t = useTranslations('StratPage.StratHeader.GimmickType');
const [viewOptions, setViewOptions] = useAtom(viewOptionsAtom);
const tGimmickType = useTranslations('StratPage.StratHeader.GimmickType');
const t = useTranslations('StratPage.StratHeader.FilterMenu');

return (
<Popover>
Expand All @@ -37,19 +41,35 @@ export const FilterMenu = () => {
<MixerHorizontalIcon />
</div>
<Separator className="mb-[2px]" /> */}
<div className="flex items-center space-x-2 mb-4 ml-[2px]">
<Switch
id="verbose-timeline"
checked={viewOptions.showVerboseTimeline}
onCheckedChange={() => setViewOptions(
produce((draft) => {
draft.showVerboseTimeline = !draft.showVerboseTimeline;
}),
)}
/>
<Label htmlFor="verbose-timeline">{t('VerboseTimeline')}</Label>
</div>
<div className="grid grid-rows-3 grid-cols-2">
{GimmickTypes.map((gimmickType) => (
<Toggle
className="flex justify-start text-start h-7 px-3 m-[2px]"
aria-label="h"
key={gimmickType}
pressed={filterState[gimmickType]}
pressed={viewOptions.gimmickTypeFilter[gimmickType]}
onPressedChange={(pressed) => {
setFilterState({ ...filterState, [gimmickType]: pressed });
setViewOptions(
produce((draft) => {
draft.gimmickTypeFilter[gimmickType] = pressed;
}),
);
}}
>
<div className={cn('rounded-sm mr-2 w-[8px] h-[8px]', GIMMICK_BACKGROUND_STYLE[gimmickType])} />
<div className="text-xs">{t(gimmickType)}</div>
<div className="text-xs">{tGimmickType(gimmickType)}</div>
</Toggle>
))}
</div>
Expand Down
49 changes: 29 additions & 20 deletions src/app/[locale]/strat/[id]/components/overlay/DamagesText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,24 @@ import { ACTIVE_DAMAGE_OPTION_STYLE, INACTIVE_DAMAGE_OPTION_STYLE } from '../../
import { MitigatedDamagesContext } from './MitigatedDamagesContext';

type DamageAmountsProps = {
damageType: Enums<'damage_type'>;
currentDamage: number;
defaultDamage: number;
};

export const DamageAmounts = (props: DamageAmountsProps) => {
const { damageType, currentDamage, defaultDamage } = props;
export const DamageTypeIcon = (props: { damageType: Enums<'damage_type'> }) => {
const { damageType } = props;

const src = `/icons/damage/${damageType.toLowerCase()}.png`;

return <Image src={src} alt={damageType} width={16} height={16} className='inline' />;
};

export const DamageAmounts = (props: DamageAmountsProps) => {
const { currentDamage, defaultDamage } = props;

return (
<>
<div className="flex items-center space-x-1">
<Image src={src} alt={damageType} width={16} height={16} />
<span className="tabular-nums font-bold">{currentDamage}</span>
</div>
<span className="tabular-nums font-bold">{currentDamage}</span>
<span className="text-muted-foreground tabular-nums text-xs my-auto">{defaultDamage}</span>
</>
);
Expand All @@ -51,10 +53,11 @@ const BothTankBuster = (props: DamageTextProps) => {

return (
<>
<div className="space-x-1 pr-6">
<div className="space-x-1 pr-4 flex items-center">
<DamageTypeIcon damageType={damageType} />
<span className={ACTIVE_DAMAGE_OPTION_STYLE}>T1+T2</span>
</div>
<DamageAmounts damageType={damageType} currentDamage={currentDamage} defaultDamage={defaultDamage} />
<DamageAmounts currentDamage={currentDamage} defaultDamage={defaultDamage} />
</>
);
};
Expand All @@ -71,7 +74,8 @@ const SingleTankBuster = (props: DamageTextProps) => {

return (
<>
<div className="space-x-1 pr-6 min-w-16">
<div className="space-x-1 pr-4 flex items-center min-w-16">
<DamageTypeIcon damageType={damageType} />
{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
<span
className={cn(activeOption === 0 ? ACTIVE_DAMAGE_OPTION_STYLE : INACTIVE_DAMAGE_OPTION_STYLE, cursorStyle)}
Expand Down Expand Up @@ -108,7 +112,7 @@ const SingleTankBuster = (props: DamageTextProps) => {
</span>
</div>

<DamageAmounts damageType={damageType} currentDamage={currentDamage} defaultDamage={defaultDamage} />
<DamageAmounts currentDamage={currentDamage} defaultDamage={defaultDamage} />
</>
);
};
Expand All @@ -125,7 +129,8 @@ const ShareTankBuster = (props: DamageTextProps) => {

return (
<>
<div className="space-x-1 pr-6 min-w-28">
<div className="space-x-1 pr-4 flex items-center min-w-28">
<DamageTypeIcon damageType={damageType} />
{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
<span
className={cn(activeOption === 0 ? ACTIVE_DAMAGE_OPTION_STYLE : INACTIVE_DAMAGE_OPTION_STYLE, cursorStyle)}
Expand Down Expand Up @@ -182,7 +187,6 @@ const ShareTankBuster = (props: DamageTextProps) => {
</div>

<DamageAmounts
damageType={damageType}
currentDamage={currentDamage}
defaultDamage={defaultDamage / (activeOption === 0 ? 2 : 1)}
/>
Expand All @@ -196,10 +200,12 @@ const ShareAllRaidWide = (props: DamageTextProps) => {

return (
<>
<div className="space-x-1 pr-6">
<div className="space-x-1 pr-4 flex items-center">
<DamageTypeIcon damageType={damageType} />

<span className={ACTIVE_DAMAGE_OPTION_STYLE}>{t('DamageOption.Share')}</span>
</div>
<DamageAmounts damageType={damageType} currentDamage={currentDamage} defaultDamage={defaultDamage / 8} />
<DamageAmounts currentDamage={currentDamage} defaultDamage={defaultDamage / 8} />
</>
);
};
Expand All @@ -217,10 +223,12 @@ const RaidWide = (props: DamageTextProps) => {

return (
<>
<div className="space-x-1 pr-6">
<div className="space-x-1 pr-4 flex items-center">
<DamageTypeIcon damageType={damageType} />

<span className={ACTIVE_DAMAGE_OPTION_STYLE}>{text}</span>
</div>
<DamageAmounts damageType={damageType} currentDamage={currentDamage} defaultDamage={defaultDamage} />
<DamageAmounts currentDamage={currentDamage} defaultDamage={defaultDamage} />
</>
);
};
Expand All @@ -236,7 +244,9 @@ const ShareHalfRaidWide = (props: DamageTextProps) => {

return (
<>
<div className="space-x-1 pr-6 min-w-20">
<div className="space-x-1 pr-4 flex items-center min-w-20">
<DamageTypeIcon damageType={damageType} />

{/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
<span
className={cn(activeOption === 0 ? ACTIVE_DAMAGE_OPTION_STYLE : INACTIVE_DAMAGE_OPTION_STYLE, cursorStyle)}
Expand Down Expand Up @@ -273,7 +283,6 @@ const ShareHalfRaidWide = (props: DamageTextProps) => {
</span>
</div>
<DamageAmounts
damageType={damageType}
currentDamage={currentDamage}
defaultDamage={defaultDamage / (activeOption === 0 ? 4 : 3)}
/>
Expand All @@ -285,7 +294,7 @@ const ShareHalfRaidWide = (props: DamageTextProps) => {
const Unknown = () => {
const t = useTranslations('StratPage.DamageText');

return <div className="space-x-1 pr-6">{t('DamageOption.Unknown')}</div>;
return <div className="space-x-1 pr-4 flex items-center">{t('DamageOption.Unknown')}</div>;
};
const componentSelector = (target: 'Raidwide' | 'Tankbuster', numTargets: number, maxShared: number) => {
if (target === 'Tankbuster') {
Expand Down
Loading

0 comments on commit 58de002

Please sign in to comment.