Beta

package.json

@@ -2,7 +2,7 @@
   "name": "stt-data-core",
   "description": "STT DataCore",
   "author": "ussjohnjay/ironyWrit",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "license": "MIT",
   "scripts": {
     "check": "tsc --noEmit",
@@ -27,6 +27,7 @@
     "@babel/helpers": "7.27.1",
     "@babel/runtime": "7.27.1",
     "@nivo/bar": "0.88.0",
+    "@nivo/boxplot": "^0.99.0",
     "@nivo/bump": "0.88.0",
     "@nivo/calendar": "0.88.0",
     "@nivo/chord": "0.88.0",

src/components/base/daterangepicker.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import { OptionsPanelFlexColumn } from "../stats/utils";
+import { Form } from "semantic-ui-react";
+import { DEFAULT_MOBILE_WIDTH } from "../hovering/hoverstat";
+import { GlobalContext } from "../../context/globalcontext";
+
+export interface DateRangePickerProps {
+    startDate?: Date;
+    endDate?: Date;
+    setStartDate: (value?: Date) => void;
+    setEndDate?: (value?: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+}
+
+export const DateRangePicker = (props: DateRangePickerProps) => {
+    const globalContext = React.useContext(GlobalContext);
+    const { t } = globalContext.localized;
+
+    const flexCol = OptionsPanelFlexColumn;
+    const isMobile = typeof window !== 'undefined' && window.innerWidth < DEFAULT_MOBILE_WIDTH;
+    const { minDate, maxDate, startDate, endDate, setStartDate, setEndDate } = props;
+
+    const config = React.useMemo(() => {
+        const startValue = getValue('start');
+        const startMin = getMinDate('start');
+        const startMax = getMaxDate('start');
+        const endValue = getValue('end');
+        const endMin = getMinDate('end');
+        const endMax = getMaxDate('end');
+        return { startValue, startMin, startMax, endValue, endMin, endMax };
+    }, [minDate, maxDate, startDate, endDate]);
+
+    const { startValue, startMin, startMax, endValue, endMin, endMax } = config;
+
+    return (<>
+        <div style={{ ...flexCol, alignItems: 'flex-start', textAlign: 'left' }}>
+            <span>{t('global.date_start')}</span>
+            <Form.Input
+                style={{minWidth: !isMobile ? '14.25em' : undefined}}
+                type='date'
+                value={startValue}
+                min={startMin}
+                max={startMax}
+                onChange={(e, { value }) => setValue(value, 'start')}
+            />
+        </div>
+        {!!setEndDate && <div style={{ ...flexCol, alignItems: 'flex-start', textAlign: 'left' }}>
+            <span>{t('global.date_end')}</span>
+            <Form.Input
+                style={{minWidth: !isMobile ? '14.25em' : undefined}}
+                type='date'
+                value={endValue}
+                min={endMin}
+                max={endMax}
+                onChange={(e, { value }) => setValue(value, 'end')}
+            />
+        </div>}
+    </>);
+
+    function getMinDate(widget: 'start' | 'end') {
+        let d1 = minDate;
+        let d2 = startDate;
+        if (widget === 'end' && d2) return d2.toISOString().slice(0, 10);
+        if (d2 && d1) {
+            if (d1.getTime() < d2.getTime()) return d1.toISOString().slice(0, 10);
+            else return d2.toISOString().slice(0, 10);
+        }
+        if (widget === 'end') {
+            if (d1) return d1.toISOString().slice(0, 10);
+            else if (d2) return d2.toISOString().slice(0, 10);
+        }
+        else {
+            if (d1) return d1.toISOString().slice(0, 10);
+        }
+        return undefined;
+    }
+
+    function getMaxDate(widget: 'start' | 'end') {
+        let d1 = maxDate;
+        let d2 = endDate;
+        if (widget === 'start' && d2) return d2.toISOString().slice(0, 10);
+        if (d2 && d1) {
+            if (d1.getTime() > d2.getTime()) return d1.toISOString().slice(0, 10);
+            else return d2.toISOString().slice(0, 10);
+        }
+        if (widget === 'start') {
+            if (d1) return d1.toISOString().slice(0, 10);
+            else if (d2) return d2.toISOString().slice(0, 10);
+        }
+        else {
+            if (d1) return d1.toISOString().slice(0, 10);
+        }
+        return undefined;
+    }
+
+    function getValue(widget: 'start' | 'end') {
+        if (widget === 'start') {
+            if (startDate && typeof startDate === 'string') return (new Date(startDate)).toISOString().slice(0, 10);
+            let s = startDate?.toISOString().slice(0, 10);
+            return s;
+        }
+        else {
+            if (endDate && typeof endDate === 'string') return (new Date(endDate)).toISOString().slice(0, 10);
+            let s = endDate?.toISOString().slice(0, 10);
+            return s;
+        }
+    }
+
+    function setValue(value: string | undefined, widget: 'start' | 'end') {
+        let d = value ? new Date(value) : undefined;
+        if (d && `${d}`.toLowerCase() === 'invalid date') d = undefined;
+        if (widget === 'start') {
+            if (d && endDate) {
+                if (d.getTime() > endDate.getTime()) {
+                    setStartDate(endDate);
+                    return;
+                }
+            }
+            setStartDate(d);
+        }
+        else if (setEndDate) {
+            if (d && startDate) {
+                if (d.getTime() < startDate.getTime()) {
+                    setEndDate(startDate);
+                    return;
+                }
+            }
+            setEndDate(d);
+        }
+    }
+}

src/components/collections/views/overview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Label, Modal, Grid, Segment, Input, Icon, Image, Popup } from 'semantic-ui-react';
+import { Label, Modal, Grid, Segment, Input, Icon, Image, Popup, Dropdown, Button } from 'semantic-ui-react';
 
 import { GlobalContext } from '../../../context/globalcontext';
 import { MilestoneBuff, PlayerCollection } from '../../../model/player';
@@ -9,24 +9,70 @@ import { getAllStatBuffs } from '../../../utils/collectionutils';
 import { getIconPath } from '../../../utils/assets';
 import { Collection } from "../../../model/collections";
 import { LazyImage } from '../../lazyimage';
+import { gradeToColor, numberToGrade } from '../../../utils/crewutils';
+import { OptionsPanelFlexRow } from '../../stats/utils';
+import { useStateWithStorage } from '../../../utils/storage';
 
 export const CollectionsOverview = () => {
 	const globalContext = React.useContext(GlobalContext);
 
 	const [search, setSearch] = React.useState('');
 	const { ITEM_ARCHETYPES, COLLECTIONS, t } = globalContext.localized;
 	const [modalInstance, setModalInstance] = React.useState(null as PlayerCollection | null);
-	const { collections } = globalContext.core;
+
+	const [sort, setSort] = useStateWithStorage(`${globalContext.player.playerData?.player.dbid || 'default'}_collections/overview/sort_by`, '', { rememberForever: true });
+	const [dir, setDir] = useStateWithStorage(`${globalContext.player.playerData?.player.dbid || 'default'}_collections/overview/sort_direction`, 1, { rememberForever: true });
+
+	const collections = React.useMemo(() => {
+		const cols = [...globalContext.core.collections];
+		if (sort) {
+			if (sort === 'name') {
+				cols.sort((a, b) => dir * a.name.localeCompare(b.name));
+			}
+			if (sort === 'score') {
+				cols.sort((a, b) => dir * (a.score!.score - b.score!.score));
+			}
+			else {
+				cols.sort((a, b) => dir * (a.score!.details[sort] - b.score!.details[sort]));
+			}
+		}
+		else if (dir === -1) {
+			cols.reverse();
+		}
+		return cols;
+	}, [sort, dir, globalContext.core.collections]);
 
 	if (!collections || collections.length === 0) {
 		return globalContext.core.spin ? globalContext.core.spin() : <></>;
 	}
 
+	const sortOptions = [
+		{ key: 'default', value: '', text: t('base.release_date') },
+		{ key: 'name', value: 'name', text: t('global.name') },
+		{ key: 'score', value: 'score', text: t('base.score') },
+		{ key: 'loot_score', value: 'loot_score', text: t('global.loot') },
+		{ key: 'difficulty', value: 'difficulty', text: t('global.difficulty') },
+	]
+
 	return (
 		<div>
-			<div style={{display:'flex', flexDirection: 'row', justifyContent:'flex-start', alignItems: 'center', gap: '0.5em', marginBottom: '1em'}}>
+			<div style={{display:'flex', flexDirection: 'row', justifyContent:'flex-start', alignItems: 'center', gap: '0.5em', marginBottom: '1em', width: '100%'}}>
 				<Input placeholder={t('global.search')} value={search} onChange={(e, { value }) => setSearch(value.trim())} />
 				<Icon style={{margin:0,cursor:'pointer'}} name='close' onClick={() => setSearch('')} />
+				<div style={{...OptionsPanelFlexRow, flexGrow: 1, justifyContent: 'flex-end', gap: '1em', justifySelf: 'flex-end', textAlign: 'right'}}>
+					{t('global.sort_by{{:}}')}&nbsp;
+					<Dropdown
+						clearable
+						placeholder={t('base.release_date')}
+						options={sortOptions}
+						value={sort}
+						onChange={(e, { value }) => setSort(value as any)}
+						/>
+					<Button
+						icon={`sort alphabet ${dir === 1 ? 'descending' : 'ascending'}`}
+						onClick={() => setDir(dir * -1)}
+						/>
+				</div>
 			</div>
 
 			<Grid stackable columns={3}>
@@ -59,8 +105,32 @@ export const CollectionsOverview = () => {
 										size="large"
 										// onError={e => e.target.style.visibility = 'hidden'}
 									/>
-									<Label attached='bottom'>
+									<Label attached='bottom'
+										// style={{minHeight: '4em'}}
+										>
+										<div style={{margin:0,padding:0}}>
 										{formatColString(colInfo.description!)}
+										</div>
+										<div style={{margin:0,padding:'0.5em 0 0 0'}}>
+
+											{t('base.score{{:}}')}
+											&nbsp;&nbsp;
+											<span>
+												{Math.ceil(colInfo!.score!.score).toLocaleString()}
+											</span>&nbsp;&mdash;&nbsp;
+
+											{t('global.difficulty{{:}}')}
+											&nbsp;&nbsp;
+											<span>
+												{colInfo?.score?.details?.difficulty.toLocaleString()}
+											</span>&nbsp;&mdash;&nbsp;
+											{t('global.loot{{:}}')}
+											&nbsp;&nbsp;
+											<span>
+												{colInfo?.score?.details?.loot_score.toLocaleString()}
+											</span>
+
+										</div>
 									</Label>
 								</Segment>
 							</div>

src/components/collections/views/progresstable.tsx

@@ -20,15 +20,21 @@ export const ProgressTable = (props: ProgressTableProps) => {
 	const { t } = context.localized;
 	const [rewardFilter, setRewardFilter] = useStateWithStorage<string | undefined>('collectionstool/rewardFilter', undefined);
 	const [showMaxed, setShowMaxed] = useStateWithStorage('collectionstool/showMaxed', false);
+	const [showScores, setShowScores] = useStateWithStorage('collectionstool/showScores', true, { rememberForever: true });
 
 	const tableConfig: ITableConfigRow[] = [
-		{ width: 2, column: 'name', title: 'Collection' },
-		{ width: 1, column: 'owned', title: 'Total Owned', reverse: true },
-		{ width: 1, column: 'progressPct', title: 'Progress', reverse: true },
-		{ width: 1, column: 'needed', title: 'Needed', tiebreakers: ['neededPct'] },
+		{ width: 2, column: 'name', title: t('base.collection') },
+		{ width: 1, column: 'score.score', title: t('base.score'), reverse: true },
+		{ width: 1, column: 'score.details.difficulty', title: t('global.difficulty'), reverse: false },
+		{ width: 1, column: 'score.details.loot_score', title: t('global.loot'), reverse: true },
+		{ width: 1, column: 'owned', title: t('collections.columns.total_owned'), reverse: true },
+		{ width: 1, column: 'progressPct', title: t('collections.columns.progress'), reverse: true },
+		{ width: 1, column: 'needed', title: t('collections.columns.needed'), tiebreakers: ['neededPct'] },
 		{ width: 3, column: 'totalRewards', title: <span>{t('collections.milestone_rewards')} <Popup trigger={<Icon name='help' />} content={t('collections.milestone_rewards_desc')} /></span>, reverse: true }
 	];
-
+	if (!showScores) {
+		tableConfig.splice(1, 3);
+	}
 	// Rewards will test value against literal symbol string, except when prefixed by:
 	//	= Regular expression against symbol, * Special test case
 	const rewardOptions = makeRewards(t);
@@ -56,6 +62,12 @@ export const ProgressTable = (props: ProgressTableProps) => {
 							checked={showMaxed}
 							onChange={(e, { checked }) => setShowMaxed(checked)}
 						/>
+						<Form.Field
+							control={Checkbox}
+							label={t('collections.options.show_scoring_columns')}
+							checked={showScores}
+							onChange={(e, { checked }) => setShowScores(checked)}
+						/>
 					</Form.Group>
 				</Form>
 			</div>
@@ -128,11 +140,20 @@ export const ProgressTable = (props: ProgressTableProps) => {
 					<span style={{ fontWeight: 'bolder', fontSize: '1.25em' }}><Link to={`/collections/#${encodeURI(collection.name)}`}>{collection.name}</Link></span>
 					<br/>{collection.simpleDescription}
 				</Table.Cell>
+				{showScores && <>
+					<Table.Cell>{Math.ceil(collection.score.score).toLocaleString()}</Table.Cell>
+					<Table.Cell>{collection.score.details.difficulty}</Table.Cell>
+					<Table.Cell>{collection.score.details.loot_score}</Table.Cell>
+				</>}
 				<Table.Cell textAlign='center'>{collection.owned} / {collection.crew.length}</Table.Cell>
 				<Table.Cell textAlign='center'>{collection.milestone.goal > 0 ? `${collection.progress} / ${collection.milestone.goal}` : 'MAX'}</Table.Cell>
 				<Table.Cell textAlign='center'>{collection.needed}</Table.Cell>
 				<Table.Cell textAlign='center'>
-					<RewardsGrid rewards={rewards} />
+					<RewardsGrid
+						wrap
+						maxCols={4}
+						rewards={rewards}
+					/>
 				</Table.Cell>
 			</Table.Row>
 		);

src/components/crewpage/crewvariants.tsx

@@ -114,7 +114,7 @@ export const CrewVariants = (props: CrewVariantsProps) => {
 
 	function renderGroup(group: Variant, idx: number): JSX.Element {
 		return (
-			<Segment key={idx}>
+			<Segment key={`${group.name}_variant_${idx}`}>
 				<div style={{display:'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap'}}>
 					<Header as='h4'>{t('crew_page.variants', { crew: group.name })}</Header>
 					<Form>