1919// schema on proton-pulse.com/confidence.html so users can cross-reference.
2020
2121import { ModalRoot , Focusable , DialogButton , showModal } from '@decky/ui' ;
22+ import scoringInfo from '../data/scoring-info.json' ;
23+ import { ScoringGuideModal } from './ScoringGuideModal' ;
2224import { computeGameStats } from '../lib/gameStats' ;
2325import { computeConfidenceBreakdown } from '../lib/scoring' ;
2426import { useFocusableScroll } from '../lib/useFocusableScroll' ;
@@ -132,18 +134,22 @@ function PerReportAnalysisModal({ report, allReports, configs, sysInfo, closeMod
132134 const ratingColor = RATING_COLORS [ report . rating ] ?? '#888' ;
133135 const contributionColor = contributionDelta > 0 ? '#4caf50' : contributionDelta < 0 ? '#e57373' : '#9bb5cc' ;
134136
137+ // Qualitative tier derived from scoring-info.json (shared with web app)
138+ const scoreTier = [ ...scoringInfo . reportScoreTiers . tiers ]
139+ . sort ( ( a , b ) => b . min - a . min )
140+ . find ( ( tier ) => breakdown . total >= tier . min ) ?? scoringInfo . reportScoreTiers . tiers [ scoringInfo . reportScoreTiers . tiers . length - 1 ] ;
141+ const scoreLabel = scoreTier . label ;
142+ const scoreLabelColor = scoreTier . color ;
143+
135144 return (
136145 < ModalRoot onCancel = { closeModal } >
137146 < Focusable
138147 onCancelButton = { closeModal }
139148 style = { {
140149 display : 'flex' ,
141150 flexDirection : 'column' ,
142- width : 720 ,
151+ width : '100%' ,
143152 maxHeight : '85vh' ,
144- background : '#0f1822' ,
145- border : '1px solid rgba(102, 192, 244, 0.18)' ,
146- borderRadius : 6 ,
147153 overflow : 'hidden' ,
148154 } }
149155 >
@@ -168,14 +174,23 @@ function PerReportAnalysisModal({ report, allReports, configs, sysInfo, closeMod
168174 { formatProtonLabel ( report . protonVersion ) } . { t ( ) . common . daysAgo ( report . recencyDays ) }
169175 </ div >
170176 </ div >
171- { /* Total confidence pill on the right (matches the card's pill style) */ }
172- < span style = { {
173- background : 'rgba(102, 192, 244, 0.18)' ,
174- color : '#e0ebf3' ,
175- fontSize : 13 , fontWeight : 700 ,
176- padding : '4px 14px' , borderRadius : 999 ,
177- border : '1px solid rgba(102, 192, 244, 0.35)' ,
178- } } > { breakdown . total } </ span >
177+ { /* Total confidence score + help button */ }
178+ < div style = { { display : 'flex' , flexDirection : 'column' , alignItems : 'flex-end' , gap : 3 } } >
179+ < div style = { { display : 'flex' , alignItems : 'center' , gap : 6 } } >
180+ < DialogButton
181+ style = { { width : 'auto' , height : 28 , minWidth : 0 , padding : '0 10px' , borderRadius : 999 , fontSize : 10 , fontWeight : 700 , display : 'flex' , alignItems : 'center' , justifyContent : 'center' , whiteSpace : 'nowrap' } }
182+ onClick = { ( ) => showModal ( < ScoringGuideModal /> ) }
183+ > { t ( ) . extras ! . perReportWhatsThis ! ( ) } </ DialogButton >
184+ < span style = { {
185+ background : 'rgba(102, 192, 244, 0.18)' ,
186+ color : '#e0ebf3' ,
187+ fontSize : 13 , fontWeight : 700 ,
188+ padding : '4px 14px' , borderRadius : 999 ,
189+ border : '1px solid rgba(102, 192, 244, 0.35)' ,
190+ } } > { breakdown . total } pts</ span >
191+ </ div >
192+ < span style = { { fontSize : 9 , color : scoreLabelColor , fontWeight : 700 , textTransform : 'uppercase' , letterSpacing : '0.06em' , marginRight : 10 } } > { scoreLabel } </ span >
193+ </ div >
179194 </ div >
180195
181196 { /* Scrollable body */ }
0 commit comments