feat(ui): handle probabilities

index.html

@@ -202,11 +202,9 @@ <h2>Hand</h2>
 					<div class="stack">
 						<button class="button" type="submit">Submit</button>
 
-						<div class="card score-card">
-							<p class="score">Score: <b><code data-formatted-score>—</code></b></p>
-							<p>Exact: <b><span data-score>—</span></b></p>
-							<p>Hand: <b><span data-played-hand>—</span></b></p>
-						</div>
+						<p>Hand: <b data-sc-played-hand>—</b></p>
+
+						<div class="list" data-sc-container></div>
 					</div>
 				</div>
 			</form>
@@ -233,7 +231,7 @@ <h2>Hand</h2>
 		</div>
 	</template>
 
-	<template id="joker">
+	<template id="joker-card">
 		<div class="stack">
 			<div class="action-list">
 				<label class="j-name select-control">
@@ -478,7 +476,7 @@ <h2>Hand</h2>
 		</div>
 	</template>
 
-	<template id="card">
+	<template id="playing-card">
 		<div class="stack">
 			<div class="action-list">
 				<label class="c-is-played checkbox-control">
@@ -579,6 +577,22 @@ <h2>Hand</h2>
 		</div>
 	</template>
 
+	<template id="score-card">
+		<div class="card score-card">
+			<div class="stack">
+				<div class="score-entry">
+					<b data-sc-formatted-score></b>
+
+					<div class="badge">Luck: <b data-sc-luck></b></div>
+				</div>
+
+				<p class="exact-score">
+					Exact: <b data-sc-score></b>
+				</p>
+			</div>
+		</div>
+	</template>
+
 	<script src="./src/ui/main.ts" type="module"></script>
 </body>
 

src/ui/UiState.ts

@@ -4,7 +4,7 @@ import { PlayingCard } from './components/PlayingCard.js'
 import { getState } from '#utilities/getState.js'
 import { log } from '#utilities/log.js'
 import { calculateScore } from '#lib/balatro.js'
-import type { BlindName, Card, DeckName, HandName, InitialState, Joker, State } from '#lib/types.js'
+import type { BlindName, Card, DeckName, HandName, InitialState, Joker, State, ResultScore } from '#lib/types.js'
 
 export class UiState {
 	handsInput: HTMLInputElement
@@ -23,8 +23,7 @@ export class UiState {
 	playingCardContainer: HTMLElement
 	addCardButton: HTMLButtonElement
 
-	formattedScoreEl: HTMLElement
-	scoreEl: HTMLElement
+	scoreCardContainer: HTMLElement
 	playedHandEl: HTMLElement
 
 	constructor (form: HTMLFormElement) {
@@ -46,9 +45,8 @@ export class UiState {
 		this.addCardButton = form.querySelector('[data-c-add-button]') as HTMLButtonElement
 		this.addCardButton.addEventListener('click', () => this.addCard())
 
-		this.formattedScoreEl = form.querySelector('[data-formatted-score]') as HTMLElement
-		this.scoreEl = form.querySelector('[data-score]') as HTMLElement
-		this.playedHandEl = form.querySelector('[data-played-hand]') as HTMLElement
+		this.scoreCardContainer = form.querySelector('[data-sc-container]') as HTMLElement
+		this.playedHandEl = form.querySelector('[data-sc-played-hand]') as HTMLElement
 
 		// Quick and dirty way to update the state whenever necessary
 		form.addEventListener('change', () => {
@@ -70,10 +68,31 @@ export class UiState {
 		const { hand, scoringCards, scores } = calculateScore(state)
 		log({ hand, scoringCards, scores })
 
-		const score = scores[0]!
-		this.formattedScoreEl.textContent = score.formattedScore
-		this.scoreEl.textContent = new Intl.NumberFormat('en').format(score.score)
+		const distinctScores = new Map<number, ResultScore>()
+		for (const score of scores) {
+			if (!distinctScores.has(score.score)) {
+				distinctScores.set(score.score, score)
+			}
+		}
+
 		this.playedHandEl.textContent = hand
+
+		this.scoreCardContainer.innerHTML = ''
+		for (const score of distinctScores.values()) {
+			const template = document.querySelector('template#score-card') as HTMLTemplateElement
+			const fragment = template.content.cloneNode(true) as Element
+
+			const luckEl = fragment.querySelector('[data-sc-luck]') as HTMLElement
+			luckEl.textContent = score.luck
+
+			const formattedScoreEl = fragment.querySelector('[data-sc-formatted-score]') as HTMLElement
+			formattedScoreEl.textContent = score.formattedScore
+
+			const scoreEl = fragment.querySelector('[data-sc-score]') as HTMLElement
+			scoreEl.textContent = new Intl.NumberFormat('en').format(score.score)
+
+			this.scoreCardContainer.appendChild(fragment)
+		}
 	}
 
 	/**

src/ui/components/JokerCard.ts

@@ -26,7 +26,7 @@ export class JokerCard extends DraggableCard {
 	constructor () {
 		super()
 
-		const template = document.querySelector('template#joker') as HTMLTemplateElement
+		const template = document.querySelector('template#joker-card') as HTMLTemplateElement
 		this.fragment = template.content.cloneNode(true) as Element
 		const id = uniqueId()
 		this.id = `joker-card-${id}`

src/ui/components/PlayingCard.ts

@@ -24,7 +24,7 @@ export class PlayingCard extends DraggableCard {
 	constructor () {
 		super()
 
-		const template = document.querySelector('template#card') as HTMLTemplateElement
+		const template = document.querySelector('template#playing-card') as HTMLTemplateElement
 		this.fragment = template.content.cloneNode(true) as Element
 		const id = uniqueId()
 		this.id = `playing-card-${id}`

src/ui/css/_components.css

@@ -65,7 +65,6 @@
 }
 
 .card:not(.increase-specificity) {
-	/* min-width: 100px; */
 	max-width: 180px;
 }
 
@@ -233,6 +232,14 @@ hand-level {
 	font-size: 1.2em;
 }
 
-.score {
-	font-size: 1.5rem;
+.score-entry {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+	gap: 0.25rem;
+}
+
+.exact-score {
+	font-size: 0.9rem;
+	word-break: break-all;
 }

src/ui/css/_form-elements.css

@@ -10,7 +10,7 @@
 	gap: 0.25rem;
 }
 
-.action-list>:not(.button.--icon) {
+.action-list>:not(.button.--icon):not(.push-left) {
 	flex: 1;
 }
 

src/ui/css/_utilities.css

@@ -38,6 +38,19 @@
 	flex-wrap: wrap;
 }
 
+.actions:where(.--right) {
+	justify-content: flex-end;
+}
+
+.badge {
+	display: inline-block;
+	padding: 0 0.5rem;
+	color: var(--c-text);
+	background-color: var(--c-background-lighter);
+	border-radius: 3px;
+	font-size: 0.8em;
+}
+
 .push-left {
 	margin-left: auto;
 }