bonk-challanges 0.2.2 → 0.4.0

package/index.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const { PanResponder, Pressable, StyleSheet, Text, TextInput, View } = require('react-native');
+const { Animated, PanResponder, Pressable, StyleSheet, Text, TextInput, View } = require('react-native');
 
 function randomInt(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -58,6 +58,37 @@ function createMathProblem(difficulty = 'intermediate') {
       label: 'Answer',
     };
   }
+  if (difficulty === 'marc') {
+    const kind = randomInt(0, 2);
+    if (kind === 0) {
+      const slope = randomInt(-5, 5) * 2;
+      const intercept = randomInt(-8, 8);
+      const upper = randomInt(2, 8);
+      const answer = (slope / 2) * upper * upper + intercept * upper;
+      return {
+        text: `Integral from 0 to ${upper} of (${slope}x ${intercept >= 0 ? '+' : '-'} ${Math.abs(intercept)}) dx = ?`,
+        answer: String(answer),
+        label: 'Answer',
+      };
+    }
+    if (kind === 1) {
+      const matrix = Array.from({ length: 3 }, () => Array.from({ length: 3 }, () => randomInt(-4, 5)));
+      return {
+        text: `det(\n${formatMatrix(matrix)}\n) = ?`,
+        answer: String(determinant3(matrix)),
+        label: 'det',
+        monospace: true,
+      };
+    }
+    const a = [randomInt(-5, 5), randomInt(-5, 5), randomInt(-5, 5)];
+    const b = [randomInt(-5, 5), randomInt(-5, 5), randomInt(-5, 5)];
+    return {
+      text: `a x b\n\na = ${formatVerticalVector(a)}\nb = ${formatVerticalVector(b)}\n\nAnswer as x,y,z`,
+      answer: formatVector(crossProduct(a, b)),
+      label: 'x,y,z',
+      monospace: true,
+    };
+  }
   const x = randomInt(-12, 12);
   const a = randomInt(2, 10);
   const b = randomInt(-24, 24);
@@ -72,6 +103,33 @@ function createMathProblem(difficulty = 'intermediate') {
   return { text: `${a}x - ${b} = ${a * x - b}`, answer: String(x), label: 'x' };
 }
 
+function determinant3(matrix) {
+  const [[a, b, c], [d, e, f], [g, h, i]] = matrix;
+  return a * (e * i - f * h) - b * (d * i - f * g) + c * (d * h - e * g);
+}
+
+function crossProduct(a, b) {
+  return [
+    a[1] * b[2] - a[2] * b[1],
+    a[2] * b[0] - a[0] * b[2],
+    a[0] * b[1] - a[1] * b[0],
+  ];
+}
+
+function formatVector(vector) {
+  return vector.join(',');
+}
+
+function formatMatrix(matrix) {
+  const width = Math.max(...matrix.flat().map((value) => String(value).length));
+  return matrix.map((row) => `[ ${row.map((value) => String(value).padStart(width, ' ')).join('  ')} ]`).join('\n');
+}
+
+function formatVerticalVector(vector) {
+  const width = Math.max(...vector.map((value) => String(value).length));
+  return `[ ${vector.map((value) => String(value).padStart(width, ' ')).join('  ')} ]`;
+}
+
 function formatComplex(real, imag) {
   if (imag === 0) return String(real);
   if (real === 0) {
@@ -90,6 +148,7 @@ function normalizeAnswer(value) {
     .toLowerCase()
     .replace(/\s+/g, '')
     .replace(/−/g, '-')
+    .replace(/[()[\]]/g, '')
     .replace(/\*/g, '')
     .replace(/\+-/g, '-');
 }
@@ -165,6 +224,129 @@ function swipeTargetFromGesture(index, dx, dy, tileCount) {
   return null;
 }
 
+function createDeck() {
+  const suits = ['S', 'H', 'D', 'C'];
+  const ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
+  const deck = [];
+  suits.forEach((suit) => ranks.forEach((rank) => deck.push({ rank, suit, id: `${rank}${suit}` })));
+  for (let i = deck.length - 1; i > 0; i -= 1) {
+    const j = randomInt(0, i);
+    const tmp = deck[i];
+    deck[i] = deck[j];
+    deck[j] = tmp;
+  }
+  return deck;
+}
+
+function drawCard(deck) {
+  return deck.pop();
+}
+
+function cardLabel(card) {
+  return `${card.rank}${suitSymbol(card.suit)}`;
+}
+
+function suitSymbol(suit) {
+  if (suit === 'S') return '♠';
+  if (suit === 'H') return '♥';
+  if (suit === 'D') return '♦';
+  return '♣';
+}
+
+function isRedSuit(suit) {
+  return suit === 'H' || suit === 'D';
+}
+
+function handValue(cards) {
+  let total = 0;
+  let aces = 0;
+  cards.forEach((card) => {
+    if (card.rank === 'A') {
+      aces += 1;
+      total += 11;
+    } else if (['K', 'Q', 'J'].includes(card.rank)) {
+      total += 10;
+    } else {
+      total += Number(card.rank);
+    }
+  });
+  while (total > 21 && aces > 0) {
+    total -= 10;
+    aces -= 1;
+  }
+  return total;
+}
+
+function canSplitHand(hand) {
+  return hand.cards.length === 2 && hand.cards[0].rank === hand.cards[1].rank;
+}
+
+function createBlackjackRound(rounds = 0, message = 'Beat the dealer to pass.') {
+  const deck = createDeck();
+  const playerCards = [drawCard(deck), drawCard(deck)];
+  const dealerCards = [drawCard(deck), drawCard(deck)];
+  return {
+    deck,
+    dealerCards,
+    hands: [{ cards: playerCards, bet: 1, done: false }],
+    activeIndex: 0,
+    rounds,
+    message,
+    finished: false,
+    startedAt: Date.now(),
+  };
+}
+
+function activeBlackjackHand(game) {
+  return game.hands[game.activeIndex];
+}
+
+function nextBlackjackHandOrResolve(game) {
+  const nextIndex = game.hands.findIndex((hand, index) => index > game.activeIndex && !hand.done);
+  if (nextIndex >= 0) return { ...game, activeIndex: nextIndex };
+  return resolveBlackjackRound(game);
+}
+
+function dealerPlay(deck, dealerCards) {
+  const nextDeck = [...deck];
+  const nextDealer = [...dealerCards];
+  while (handValue(nextDealer) < 17) {
+    nextDealer.push(drawCard(nextDeck));
+  }
+  return { deck: nextDeck, dealerCards: nextDealer };
+}
+
+function resolveBlackjackRound(game) {
+  const { deck, dealerCards } = dealerPlay(game.deck, game.dealerCards);
+  const dealerTotal = handValue(dealerCards);
+  let won = false;
+  const resultLines = game.hands.map((hand, index) => {
+    const total = handValue(hand.cards);
+    let result = 'Push';
+    if (total > 21) result = 'Bust';
+    else if (dealerTotal > 21 || total > dealerTotal) {
+      result = 'Win';
+      won = true;
+    } else if (total < dealerTotal) result = 'Lose';
+    return `Hand ${index + 1}: ${result} (${total})`;
+  });
+  if (won) {
+    return {
+      ...game,
+      deck,
+      dealerCards,
+      message: `You won. ${resultLines.join('  ')}`,
+      finished: true,
+    };
+  }
+  return createBlackjackRound(game.rounds + 1, `No win yet. ${resultLines.join('  ')} New deal.`);
+}
+
+function updateBlackjackHand(game, updater) {
+  const hands = game.hands.map((hand, index) => (index === game.activeIndex ? updater(hand) : hand));
+  return { ...game, hands };
+}
+
 function useMathChallenge(difficulty) {
   const [problem, setProblem] = React.useState(() => createMathProblem(difficulty));
   const [message, setMessage] = React.useState('');
@@ -209,12 +391,23 @@ function MathChallenge({ colors, stylesConfig, onSolved, difficulty = 'intermedi
     setInput('');
   }, [problem.text]);
 
-  const pad = ['-', '+', 'i', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'C', '0', 'OK'];
+  const padRows = [['-', '+', 'i'], ['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9'], [',', 'C', '0', 'OK']];
 
   return React.createElement(
     View,
     { style: [styles.block, stylesConfig?.block] },
-    React.createElement(Text, { style: [styles.prompt, { color: colors.text }, stylesConfig?.prompt] }, problem.text),
+    React.createElement(
+      Text,
+      {
+        style: [
+          styles.prompt,
+          problem.monospace ? styles.monospacePrompt : null,
+          { color: colors.text },
+          stylesConfig?.prompt,
+        ],
+      },
+      problem.text
+    ),
     React.createElement(
       TextInput,
       {
@@ -233,33 +426,42 @@ function MathChallenge({ colors, stylesConfig, onSolved, difficulty = 'intermedi
     React.createElement(
       View,
       { style: styles.padGrid },
-      pad.map((k) =>
+      padRows.map((row) =>
         React.createElement(
-          Pressable,
+          View,
           {
-            key: k,
-            onPress: () => {
-              if (k === 'C') {
-                setInput('');
-                return;
-              }
-              if (k === 'OK') {
-                submit(input, onSolved);
-                return;
-              }
-              if (input.length >= 12) return;
-              setInput((v) => `${v}${k}`);
-            },
-            style: ({ pressed }) => [
-              styles.key,
+            key: row.join(''),
+            style: styles.padRow,
+          },
+          row.map((k) =>
+            React.createElement(
+              Pressable,
               {
-                borderColor: colors.border,
-                backgroundColor: pressed ? colors.primaryPressed : colors.cardMuted,
+                key: k,
+                onPress: () => {
+                  if (k === 'C') {
+                    setInput('');
+                    return;
+                  }
+                  if (k === 'OK') {
+                    submit(input, onSolved);
+                    return;
+                  }
+                  if (input.length >= 18) return;
+                  setInput((v) => `${v}${k}`);
+                },
+                style: ({ pressed }) => [
+                  styles.key,
+                  {
+                    borderColor: colors.border,
+                    backgroundColor: pressed ? colors.primaryPressed : colors.cardMuted,
+                  },
+                  stylesConfig?.key,
+                ],
               },
-              stylesConfig?.key,
-            ],
-          },
-          React.createElement(Text, { style: [styles.keyText, { color: colors.text }, stylesConfig?.keyText] }, k)
+              React.createElement(Text, { style: [styles.keyText, { color: colors.text }, stylesConfig?.keyText] }, k)
+            )
+          )
         )
       )
     )
@@ -354,10 +556,255 @@ function TileChallenge({ colors, stylesConfig, onSolved, tileCount = 8 }) {
   );
 }
 
+function BlackjackChallenge({ colors, stylesConfig, onSolved }) {
+  const [game, setGame] = React.useState(() => createBlackjackRound());
+  const activeHand = activeBlackjackHand(game);
+  const dealerShownCards = game.finished ? game.dealerCards : [game.dealerCards[0]];
+  const canAct = Boolean(activeHand) && !game.finished;
+  const canDouble = canAct && activeHand.cards.length === 2;
+  const canSplit = canAct && game.hands.length < 4 && canSplitHand(activeHand);
+
+  const completeIfWon = React.useCallback(
+    (nextGame) => {
+      setGame(nextGame);
+      if (nextGame.finished) {
+        onSolved({
+          type: 'blackjack',
+          attempts: nextGame.rounds + 1,
+          durationMs: Date.now() - nextGame.startedAt,
+        });
+      }
+    },
+    [onSolved]
+  );
+
+  const hit = React.useCallback(() => {
+    if (!canAct) return;
+    const deck = [...game.deck];
+    let next = updateBlackjackHand({ ...game, deck }, (hand) => ({
+      ...hand,
+      cards: [...hand.cards, drawCard(deck)],
+    }));
+    next = { ...next, deck };
+    if (handValue(activeBlackjackHand(next).cards) > 21) {
+      next = updateBlackjackHand(next, (hand) => ({ ...hand, done: true }));
+      next = nextBlackjackHandOrResolve(next);
+    }
+    completeIfWon(next);
+  }, [canAct, completeIfWon, game]);
+
+  const stand = React.useCallback(() => {
+    if (!canAct) return;
+    let next = updateBlackjackHand(game, (hand) => ({ ...hand, done: true }));
+    next = nextBlackjackHandOrResolve(next);
+    completeIfWon(next);
+  }, [canAct, completeIfWon, game]);
+
+  const doubleDown = React.useCallback(() => {
+    if (!canDouble) return;
+    const deck = [...game.deck];
+    let next = updateBlackjackHand({ ...game, deck }, (hand) => ({
+      ...hand,
+      bet: hand.bet * 2,
+      cards: [...hand.cards, drawCard(deck)],
+      done: true,
+    }));
+    next = nextBlackjackHandOrResolve({ ...next, deck });
+    completeIfWon(next);
+  }, [canDouble, completeIfWon, game]);
+
+  const split = React.useCallback(() => {
+    if (!canSplit) return;
+    const deck = [...game.deck];
+    const hands = [...game.hands];
+    const [first, second] = activeHand.cards;
+    hands.splice(
+      game.activeIndex,
+      1,
+      { cards: [first, drawCard(deck)], bet: activeHand.bet, done: false },
+      { cards: [second, drawCard(deck)], bet: activeHand.bet, done: false }
+    );
+    setGame({ ...game, deck, hands });
+  }, [activeHand, canSplit, game]);
+
+  const renderHand = (hand, index) =>
+    React.createElement(
+      View,
+      {
+        key: index,
+        style: [
+          styles.blackjackHand,
+          {
+            borderColor: index === game.activeIndex && !game.finished ? colors.primary : colors.border,
+            backgroundColor: colors.cardMuted,
+          },
+        ],
+      },
+      React.createElement(
+        Text,
+        { style: [styles.blackjackLabel, { color: colors.subtleText }] },
+        `Hand ${index + 1}${hand.bet > 1 ? ' x2' : ''}`
+      ),
+      React.createElement(
+        View,
+        { style: styles.cardRow },
+        hand.cards.map((card, cardIndex) =>
+          React.createElement(AnimatedCard, {
+            key: `${game.rounds}-${index}-${card.id}-${cardIndex}-${hand.cards.length}`,
+            card,
+            delay: 120 + index * 120 + cardIndex * 95,
+          })
+        )
+      ),
+      React.createElement(
+        Text,
+        { style: [styles.blackjackValue, { color: handValue(hand.cards) > 21 ? '#D65A5A' : colors.subtleText }] },
+        `Value: ${handValue(hand.cards)}${hand.done ? '  Done' : ''}`
+      )
+    );
+
+  return React.createElement(
+    View,
+    { style: [styles.block, stylesConfig?.block] },
+    React.createElement(Text, { style: [styles.prompt, { color: colors.text }, stylesConfig?.prompt] }, 'Blackjack: beat the dealer'),
+    React.createElement(
+      View,
+      { style: [styles.blackjackDealer, { borderColor: colors.border, backgroundColor: colors.cardMuted }] },
+      React.createElement(Text, { style: [styles.blackjackLabel, { color: colors.subtleText }] }, 'Dealer'),
+      React.createElement(
+        View,
+        { style: styles.cardRow },
+        dealerShownCards.map((card, index) =>
+          React.createElement(AnimatedCard, {
+            key: `${game.rounds}-dealer-${card.id}-${index}-${game.finished ? 'show' : 'peek'}`,
+            card,
+            delay: index * 95,
+          })
+        ).concat(
+          game.finished
+            ? []
+            : [
+                React.createElement(AnimatedCard, {
+                  key: `${game.rounds}-dealer-hidden`,
+                  hidden: true,
+                  delay: 95,
+                }),
+              ]
+        )
+      ),
+      React.createElement(
+        Text,
+        { style: [styles.blackjackValue, { color: colors.subtleText }] },
+        game.finished ? `Value: ${handValue(game.dealerCards)}` : `Showing: ${handValue(dealerShownCards)}`
+      )
+    ),
+    React.createElement(View, { style: styles.blackjackHands }, game.hands.map(renderHand)),
+    React.createElement(Text, { style: [styles.feedback, { color: colors.subtleText }, stylesConfig?.feedback] }, game.message),
+    React.createElement(
+      View,
+      { style: styles.blackjackActions },
+      React.createElement(BlackjackAction, { label: 'Hit', colors, disabled: !canAct, onPress: hit }),
+      React.createElement(BlackjackAction, { label: 'Stand', colors, disabled: !canAct, onPress: stand }),
+      React.createElement(BlackjackAction, { label: 'Double', colors, disabled: !canDouble, onPress: doubleDown }),
+      React.createElement(BlackjackAction, { label: 'Split', colors, disabled: !canSplit, onPress: split })
+    )
+  );
+}
+
+function BlackjackAction({ label, colors, disabled, onPress }) {
+  return React.createElement(
+    Pressable,
+    {
+      disabled,
+      onPress,
+      style: ({ pressed }) => [
+        styles.blackjackAction,
+        {
+          borderColor: colors.border,
+          backgroundColor: pressed ? colors.primaryPressed : colors.cardMuted,
+          opacity: disabled ? 0.45 : 1,
+        },
+      ],
+    },
+    React.createElement(Text, { style: [styles.blackjackActionText, { color: colors.text }] }, label)
+  );
+}
+
+function AnimatedCard({ card, hidden = false, delay = 0 }) {
+  const progress = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    progress.setValue(0);
+    Animated.spring(progress, {
+      toValue: 1,
+      delay,
+      speed: 14,
+      bounciness: 8,
+      useNativeDriver: true,
+    }).start();
+  }, [delay, progress]);
+
+  return React.createElement(
+    Animated.View,
+    {
+      style: [
+        styles.playingCardAnim,
+        {
+          opacity: progress,
+          transform: [
+            {
+              translateY: progress.interpolate({
+                inputRange: [0, 1],
+                outputRange: [-26, 0],
+              }),
+            },
+            {
+              translateX: progress.interpolate({
+                inputRange: [0, 1],
+                outputRange: [22, 0],
+              }),
+            },
+            {
+              rotate: progress.interpolate({
+                inputRange: [0, 1],
+                outputRange: ['-7deg', '0deg'],
+              }),
+            },
+          ],
+        },
+      ],
+    },
+    React.createElement(PlayingCard, { card, hidden })
+  );
+}
+
+function PlayingCard({ card, hidden = false }) {
+  if (hidden) {
+    return React.createElement(
+      View,
+      { style: [styles.playingCard, styles.playingCardBack] },
+      React.createElement(Text, { style: styles.cardBackMark }, 'BONK')
+    );
+  }
+  const red = isRedSuit(card.suit);
+  const color = red ? '#D65A5A' : '#1F2328';
+  const symbol = suitSymbol(card.suit);
+  return React.createElement(
+    View,
+    { style: styles.playingCard },
+    React.createElement(Text, { style: [styles.cardCorner, { color }] }, card.rank),
+    React.createElement(Text, { style: [styles.cardSuit, { color }] }, symbol),
+    React.createElement(Text, { style: [styles.cardCornerBottom, { color }] }, card.rank)
+  );
+}
+
 function BonkChallengeRunner({ type, tileCount = 8, difficulty = 'intermediate', colors, stylesConfig, onSolved }) {
   if (type === 'tile') {
     return React.createElement(TileChallenge, { colors, stylesConfig, onSolved, tileCount });
   }
+  if (type === 'blackjack') {
+    return React.createElement(BlackjackChallenge, { colors, stylesConfig, onSolved });
+  }
   return React.createElement(MathChallenge, { colors, stylesConfig, onSolved, difficulty });
 }
 
@@ -369,6 +816,11 @@ const styles = StyleSheet.create({
     fontSize: 20,
     fontWeight: '700',
   },
+  monospacePrompt: {
+    fontFamily: 'Courier',
+    fontSize: 18,
+    lineHeight: 24,
+  },
   answer: {
     fontSize: 15,
     fontWeight: '600',
@@ -387,12 +839,14 @@ const styles = StyleSheet.create({
   },
   padGrid: {
     marginTop: 2,
+    gap: 8,
+  },
+  padRow: {
     flexDirection: 'row',
-    flexWrap: 'wrap',
     gap: 8,
   },
   key: {
-    width: '30%',
+    flex: 1,
     borderRadius: 10,
     borderWidth: 1,
     alignItems: 'center',
@@ -403,6 +857,102 @@ const styles = StyleSheet.create({
     fontSize: 17,
     fontWeight: '700',
   },
+  blackjackDealer: {
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 12,
+    gap: 8,
+  },
+  blackjackHands: {
+    gap: 8,
+  },
+  blackjackHand: {
+    borderWidth: 1,
+    borderRadius: 10,
+    padding: 12,
+    gap: 8,
+  },
+  blackjackLabel: {
+    fontSize: 12,
+    fontWeight: '800',
+    letterSpacing: 0.6,
+  },
+  blackjackValue: {
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  cardRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  playingCardAnim: {
+    width: 54,
+    height: 76,
+  },
+  playingCard: {
+    width: 54,
+    height: 76,
+    borderRadius: 8,
+    backgroundColor: '#F8FAFC',
+    borderWidth: 1,
+    borderColor: '#D6DEE8',
+    padding: 5,
+    justifyContent: 'space-between',
+    shadowColor: '#000',
+    shadowOpacity: 0.18,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 2,
+  },
+  playingCardBack: {
+    backgroundColor: '#E9A866',
+    borderColor: '#F2C083',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cardBackMark: {
+    color: '#1F2328',
+    fontSize: 10,
+    fontWeight: '900',
+    letterSpacing: 0.8,
+  },
+  cardCorner: {
+    fontSize: 14,
+    fontWeight: '900',
+    lineHeight: 15,
+  },
+  cardSuit: {
+    alignSelf: 'center',
+    fontSize: 28,
+    fontWeight: '900',
+    lineHeight: 30,
+  },
+  cardCornerBottom: {
+    alignSelf: 'flex-end',
+    fontSize: 14,
+    fontWeight: '900',
+    lineHeight: 15,
+    transform: [{ rotate: '180deg' }],
+  },
+  blackjackActions: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  blackjackAction: {
+    flexGrow: 1,
+    flexBasis: '45%',
+    minHeight: 42,
+    borderRadius: 10,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  blackjackActionText: {
+    fontSize: 15,
+    fontWeight: '800',
+  },
   tileGrid: {
     marginTop: 6,
     flexDirection: 'row',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonk-challanges",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "main": "index.js",
   "license": "MIT",
   "peerDependencies": {