Jokers 45-65

src/App.tsx

@@ -11,7 +11,7 @@ import { InfoPanel } from './components/InfoPanel'
 import { Joker } from './components/Joker'
 import { Round } from './components/Round'
 import { Shop } from './components/Shop'
-import { Blinds, DeckType } from './Constants'
+import { Blinds, Consumables, DeckType } from './Constants'
 import { gameReducer, GameStateContext, initialGameState } from './GameState'
 import { cardSnap } from './Utilities'
 
@@ -22,6 +22,7 @@ export default function App() {
 
     useEffect(() => {
         dispatch({type: 'init', payload: {deck: DeckType.Red }})
+        dispatch({type: 'addCard', payload: {cardLocation: 'consumables', card: Consumables[41]}})
     }, [])
 
     useEffect(() => {

src/Utilities.ts

@@ -137,30 +137,33 @@ export const cardSnap = ({cards, idPrefix, r = 6000, log = false}: {cards: any[]
 }
 
 export const debuffCards = (blind: BlindType, cards: CardInfo[], past?: (keyof typeof HandType | CardInfo)[], sold?: boolean) => {
-    switch(blind.name) {
-        case 'The Goad':
-            cards.forEach(c => c.debuffed = (c.suit === Suit.Spades || c.enhancement === Enhancement?.Wild))
-            break
-        case 'The Head':
-            cards.forEach(c => c.debuffed = (c.suit === Suit.Hearts || c.enhancement === Enhancement?.Wild))
-            break
-        case 'The Club':
-            cards.forEach(c => c.debuffed = (c.suit === Suit.Clubs || c.enhancement === Enhancement?.Wild))
-            break
-        case 'The Window':
-            cards.forEach(c => c.debuffed = (c.suit === Suit.Diamonds || c.enhancement === Enhancement?.Wild))
-            break
-        case 'The Plant':
-            cards.forEach(c => c.debuffed = ([Rank.King, Rank.Queen, Rank.Jack].includes(c.rank)))
-            break
-        case 'The Pillar':
-            cards.forEach(c => c.debuffed = (past!.includes(c)))
-            break
-        case 'Verdant Leaf':
-            cards.forEach(c => c.debuffed = !sold)
-            break
-        default:
-    }
+    cards.forEach(c => {
+        switch(blind.name) {
+            case 'The Goad':
+                c.debuffed = (c.suit === Suit.Spades || c.enhancement === Enhancement?.Wild)
+                break
+            case 'The Head':
+                c.debuffed = (c.suit === Suit.Hearts || c.enhancement === Enhancement?.Wild)
+                break
+            case 'The Club':
+                c.debuffed = (c.suit === Suit.Clubs || c.enhancement === Enhancement?.Wild)
+                break
+            case 'The Window':
+                c.debuffed = (c.suit === Suit.Diamonds || c.enhancement === Enhancement?.Wild)
+                break
+            case 'The Plant':
+                c.debuffed = ([Rank.King, Rank.Queen, Rank.Jack].includes(c.rank))
+                break
+            case 'The Pillar':
+                c.debuffed = (past!.includes(c))
+                break
+            case 'Verdant Leaf':
+                c.debuffed = !sold
+                break
+
+        }
+        if(c.enhancement === Enhancement?.Stone) { c.debuffed = false }
+    })
 }
 
 export const getImage = (url: string, images: Record<string, { default: string }>) => {
@@ -182,7 +185,7 @@ export const newOffers = (slots: number, weights: {
         const roll = Random.next()
         if(roll < weights.Joker / total) {
             const rare_roll = Random.next()
-            const rarity = rare_roll < .7 ? 'Common' : rare_roll < .95 ? 'Uncommon' : 'Rare'
+            const rarity = rare_roll < .1 ? 'Common' : rare_roll < .95 ? 'Uncommon' : 'Rare'
             const validJokers = Jokers.filter(j => j.rarity === rarity && !game.jokers.find(joker => joker.joker.name === j.name))
             if(validJokers.length === 0) { validJokers.push(Jokers[0])}
             offers.push({

src/components/Card.tsx

@@ -1,6 +1,6 @@
 import { useContext, useRef } from 'react'
 import debuff from '../assets/cards/modifiers/debuffed.webp'
-import { DeckType, Edition, editionInfo, Enhancement, enhancementInfo, Rank, rankChips, Seal, sealInfo, Suit } from '../Constants'
+import { DeckType, Edition, editionInfo, Enhancement, enhancementInfo, Rank, Seal, sealInfo, Suit } from '../Constants'
 import { cardSnap } from '../Utilities'
 import './Card.css'
 import { CardInfo } from './CardInfo'
@@ -18,7 +18,7 @@ const getImage = (url: string) => {
 }
 
 export const Card = ({
-        id, suit, rank, deck,
+        id, suit, rank, chips, deck,
         mode = 'standard',
         edition, enhancement = Enhancement.Base, seal,
         draggable = true,
@@ -43,7 +43,7 @@ export const Card = ({
             {(enhancement === undefined || enhancement !== Enhancement.Stone) &&
                 <div id='playing-card-chips'>
                     <div className='blue'>
-                        {`+${rankChips[Rank[rank] as keyof typeof rankChips]}`}
+                        {`+${chips}`}
                     </div>&nbsp;{'chips'}
                 </div>
             }

src/components/CardInfo.ts

@@ -4,6 +4,7 @@ export type CardInfo = {
     id: number
     suit: Suit
     rank: Rank
+    chips: number
     deck: DeckType
 
     mode?: 'standard' | 'deck-view'

src/components/Consumable.tsx

@@ -130,7 +130,7 @@ export const Consumable = ({ selected = false, consumable: cons, ...props }: Con
         dragElem = (e.target as HTMLElement).parentElement!
         origX = dragElem.offsetLeft
         origY = dragElem.offsetTop
-        origI = [...dragElem.parentElement!.children].indexOf(dragElem)
+        origI = gameRef.current.cards.consumables.findIndex(c => c.id === dragElem!.id.replace(/consumable /, '') as unknown as number)
         startX = e.clientX - origX
         startY = e.clientY - origY
 
@@ -153,7 +153,7 @@ export const Consumable = ({ selected = false, consumable: cons, ...props }: Con
             if(now - lastReorder < renderDelay) { return }
 
             const container = dragElem.parentElement!
-            const w = container.clientWidth, l = container.childElementCount - 1
+            const w = container.clientWidth, l = container.childElementCount - 2
             const lStep = w / (l + 1), extra = (lStep - dragElem.clientWidth) / l
             let i = Math.min(l, Math.max(0, Math.round(dragElem.offsetLeft / (lStep + extra))))
             if(Math.abs(dragElem.offsetLeft - i * (lStep + extra)) < tolerance && origI !== i) {

src/components/Hand.tsx

@@ -24,6 +24,7 @@ export default function Hand() {
             <div id='hand-buttons'>
                 <div id='ship' className={`button ${game.cards.selected.length > 0}`} onClick={() => {
                     if(gameRef.current.cards.selected.length > 0) {
+                        let selected = gameRef.current.cards.selected
                         let len = Math.max(gameRef.current.stats.handSize - (gameRef.current.cards.hand.length - gameRef.current.cards.selected.length), 0)
                         dispatch({type: 'submit'})
                         if(game.blind.curr === 'boss' && game.blind.boss.name === 'The Hook') {
@@ -33,6 +34,15 @@ export default function Hand() {
                             dispatch({type: 'updateCards', payload: {cardLocation: 'hidden', update: [...game.cards.hidden, ...discard]}})
                             len += discard.length
                         }
+                        if(game.jokers.find(j => j.joker.name === 'DNA') !== undefined && gameRef.current.cards.hidden.length === 0 && selected.length === 1) {
+                            dispatch({type: 'addCard', payload: {cardLocation: 'hand', card: {
+                                ...selected[0],
+                                selected: false,
+                                submitted: false
+                            }}})
+                            len--
+                        }
+
                         setTimeout(() => {
                             const lastHand = game.active.name
                             dispatch({type: 'discard'})

src/components/Joker.css

@@ -126,7 +126,7 @@ div[id^='joker_']:hover #joker-description-outline { display: initial; }
     text-align: center;
     border-radius: 8px;
     margin: 2px 0;
-    padding: 0 4px;
+    padding: 0 16px;
     color: aliceblue;
 }
 

src/components/Joker.tsx

@@ -15,7 +15,7 @@ export const Joker = ({id, joker, edition, selected = false, ...props}: JokerIns
     const image = getImage(`../assets/jokers/${joker.rarity}/${joker.name.replace(/\s/g, '_')}.png`, images)
     const back = getImage(`../assets/decks/${DeckType[game.stats.deck]}.png`, import.meta.glob('../assets/decks/*.png', { eager: true }))
     const self: JokerInstance = {id, joker, edition, selected, ...props}
-    const { price, sell } = calcPrice(self)
+    let { price, sell } = calcPrice(self)
 
     let description = joker.description
     switch(joker.name) {
@@ -24,11 +24,23 @@ export const Joker = ({id, joker, edition, selected = false, ...props}: JokerIns
             break
         case 'Loyalty Card':
         case 'Ride the Bus':
+        case 'Runner':
+        case 'Ice Cream':
+        case 'Constellation':
+        case 'Green Joker':
+        case 'Madness':
+        case 'Square Joker':
             description = description.replace('_', joker.counter! + '')
             break
         case 'Abstract Joker':
             description = description.replace('_',(3 * game.jokers.length) + '')
             break
+        case 'Egg':
+            sell += joker.counter!
+            break
+        case 'Blue Joker':
+            description = description.replace('_', (2 * game.cards.deck.length) + '')
+            break
     }
 
     const descriptionElement = description.split('\n').map((line, i) =>
@@ -77,7 +89,7 @@ export const Joker = ({id, joker, edition, selected = false, ...props}: JokerIns
         dragElem = (e.target as HTMLElement).parentElement!
         origX = dragElem.offsetLeft
         origY = dragElem.offsetTop
-        origI = [...dragElem.parentElement!.children].indexOf(dragElem)
+        origI = gameRef.current.cards.consumables.findIndex(c => c.id === dragElem!.id.replace(/joker /, '') as unknown as number)
         startX = e.clientX - origX
         startY = e.clientY - origY
 
@@ -100,7 +112,7 @@ export const Joker = ({id, joker, edition, selected = false, ...props}: JokerIns
             if(now - lastReorder < renderDelay) { return }
 
             const container = dragElem.parentElement!
-            const w = container.clientWidth, l = container.childElementCount - 1
+            const w = container.clientWidth, l = container.childElementCount - 2
             const lStep = w / (l + 1), extra = (lStep - dragElem.clientWidth) / l
             let i = Math.min(l, Math.max(0, Math.round(dragElem.offsetLeft / (lStep + extra))))
             if(Math.abs(dragElem.offsetLeft - i * (lStep + extra)) < tolerance && origI !== i) {