bonk-challanges 0.1.0 → 0.2.1

package/README.md

@@ -0,0 +1,50 @@
+# bonk-challanges
+
+Reusable React Native challenge components for Bonk wake-up flows.
+
+## Exports
+
+```js
+const { BonkChallengeRunner } = require('bonk-challanges');
+```
+
+`BonkChallengeRunner` renders one challenge at a time and calls `onSolved(stats)` when the current challenge is complete.
+
+## Challenge Types
+
+### Math
+
+```jsx
+<BonkChallengeRunner type="math" difficulty="advanced" colors={colors} onSolved={onSolved} />
+```
+
+Difficulties:
+
+- `easy`
+- `intermediate`
+- `advanced`
+
+Stats include `type`, `attempts`, `durationMs`, and `difficulty`.
+
+### Tile Puzzle
+
+```jsx
+<BonkChallengeRunner type="tile" tileCount={8} colors={colors} onSolved={onSolved} />
+```
+
+Tile sizes:
+
+- `8` = 3x3 puzzle with 8 numbered tiles and one blank space.
+- `15` = 4x4 puzzle with 15 numbered tiles and one blank space.
+
+The old 2x2 puzzle has been removed. Stats include `type`, `moves`, `durationMs`, and `tileCount`.
+
+## Packaging
+
+This package is consumed by the mobile app as a local packed tarball. After editing:
+
+```bash
+npm pack
+```
+
+Then update the mobile app dependency/lockfile or reinstall so `mobile/node_modules/bonk-challanges` receives the new package contents.

package/index.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const { PanResponder, Pressable, StyleSheet, Text, View } = require('react-native');
+const { PanResponder, Pressable, StyleSheet, Text, TextInput, View } = require('react-native');
 
 function randomInt(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -7,25 +7,95 @@ function randomInt(min, max) {
 
 function createMathProblem(difficulty = 'intermediate') {
   if (difficulty === 'easy') {
-    const x = randomInt(1, 9);
-    const a = randomInt(1, 4);
-    const b = randomInt(0, 10);
-    return { text: `${a}x + ${b} = ${a * x + b}`, answer: x };
+    const a = randomInt(-12, 18);
+    const b = randomInt(-10, 14);
+    const op = ['+', '-', 'x'][randomInt(0, 2)];
+    if (op === '+') return { text: `${a} + ${b} = ?`, answer: String(a + b), label: 'Answer' };
+    if (op === '-') return { text: `${a} - ${b} = ?`, answer: String(a - b), label: 'Answer' };
+    return { text: `${a} x ${b} = ?`, answer: String(a * b), label: 'Answer' };
   }
   if (difficulty === 'advanced') {
-    const x = randomInt(-12, 12);
-    const a = randomInt(3, 12);
-    const b = randomInt(-24, 24);
-    return { text: `${a}x ${b >= 0 ? '+' : '-'} ${Math.abs(b)} = ${a * x + b}`, answer: x };
+    const kind = randomInt(0, 2);
+    if (kind === 0) {
+      const x = randomInt(-9, 9);
+      const a = randomInt(2, 8);
+      const b = randomInt(-18, 18);
+      return { text: `${a}x^2 ${b >= 0 ? '+' : '-'} ${Math.abs(b)} = ${a * x * x + b}`, answer: String(Math.abs(x)), label: '|x|' };
+    }
+    if (kind === 1) {
+      const x = randomInt(2, 12);
+      const a = randomInt(2, 5);
+      return { text: `sqrt(${a * x * x}) / sqrt(${a}) = ?`, answer: String(x), label: 'Answer' };
+    }
+    const x = randomInt(-6, 6);
+    const a = randomInt(2, 5);
+    const b = randomInt(2, 4);
+    return { text: `${a}^${b} + x = ${a ** b + x}`, answer: String(x), label: 'x' };
   }
-  const x = randomInt(2, 12);
-  const a = randomInt(2, 9);
-  const b = randomInt(1, 25);
-  return { text: `${a}x + ${b} = ${a * x + b}`, answer: x };
+  if (difficulty === 'professional') {
+    const ar = randomInt(-7, 7);
+    const ai = randomInt(-7, 7);
+    const br = randomInt(-7, 7);
+    const bi = randomInt(-7, 7);
+    const kind = randomInt(0, 2);
+    if (kind === 0) {
+      return {
+        text: `(${formatComplex(ar, ai)}) + (${formatComplex(br, bi)}) = ?`,
+        answer: formatComplex(ar + br, ai + bi),
+        label: 'Answer',
+      };
+    }
+    if (kind === 1) {
+      return {
+        text: `(${formatComplex(ar, ai)}) - (${formatComplex(br, bi)}) = ?`,
+        answer: formatComplex(ar - br, ai - bi),
+        label: 'Answer',
+      };
+    }
+    return {
+      text: `i x (${formatComplex(ar, ai)}) = ?`,
+      answer: formatComplex(-ai, ar),
+      label: 'Answer',
+    };
+  }
+  const x = randomInt(-12, 12);
+  const a = randomInt(2, 10);
+  const b = randomInt(-24, 24);
+  const kind = randomInt(0, 3);
+  if (kind === 0) return { text: `${a}x ${b >= 0 ? '+' : '-'} ${Math.abs(b)} = ${a * x + b}`, answer: String(x), label: 'x' };
+  if (kind === 1) return { text: `${a}(x ${b >= 0 ? '+' : '-'} ${Math.abs(b)}) = ${a * (x + b)}`, answer: String(x), label: 'x' };
+  if (kind === 2) {
+    const quotient = randomInt(-12, 12);
+    const integerX = quotient * a;
+    return { text: `(x / ${a}) ${b >= 0 ? '+' : '-'} ${Math.abs(b)} = ${quotient + b}`, answer: String(integerX), label: 'x' };
+  }
+  return { text: `${a}x - ${b} = ${a * x - b}`, answer: String(x), label: 'x' };
+}
+
+function formatComplex(real, imag) {
+  if (imag === 0) return String(real);
+  if (real === 0) {
+    if (imag === 1) return 'i';
+    if (imag === -1) return '-i';
+    return `${imag}i`;
+  }
+  const sign = imag >= 0 ? '+' : '-';
+  const mag = Math.abs(imag);
+  return `${real}${sign}${mag === 1 ? '' : mag}i`;
+}
+
+function normalizeAnswer(value) {
+  return String(value)
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '')
+    .replace(/−/g, '-')
+    .replace(/\*/g, '')
+    .replace(/\+-/g, '-');
 }
 
 function boardSizeFromTileCount(tileCount) {
-  return tileCount === 3 ? 2 : 3;
+  return tileCount === 15 ? 4 : 3;
 }
 
 function createSolvedBoard(tileCount) {
@@ -112,7 +182,7 @@ function useMathChallenge(difficulty) {
     (value, onSolved) => {
       const nextAttempts = attempts + 1;
       setAttempts(nextAttempts);
-      if (Number(value) === problem.answer) {
+      if (normalizeAnswer(value) === normalizeAnswer(problem.answer)) {
         setMessage('Correct');
         onSolved({
           type: 'math',
@@ -135,13 +205,28 @@ function MathChallenge({ colors, stylesConfig, onSolved, difficulty = 'intermedi
   const [input, setInput] = React.useState('');
   const { problem, message, submit } = useMathChallenge(difficulty);
 
-  const pad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'C', '0', 'OK'];
+  React.useEffect(() => {
+    setInput('');
+  }, [problem.text]);
+
+  const pad = ['1', '2', '3', '-', '4', '5', '6', '+', '7', '8', '9', 'i', 'C', '0', 'OK'];
 
   return React.createElement(
     View,
     { style: [styles.block, stylesConfig?.block] },
-    React.createElement(Text, { style: [styles.prompt, { color: colors.text }, stylesConfig?.prompt] }, `Solve for x: ${problem.text}`),
-    React.createElement(Text, { style: [styles.answer, { color: colors.subtleText }, stylesConfig?.answer] }, input ? `x = ${input}` : 'Enter x'),
+    React.createElement(Text, { style: [styles.prompt, { color: colors.text }, stylesConfig?.prompt] }, problem.text),
+    React.createElement(
+      TextInput,
+      {
+        value: input,
+        onChangeText: setInput,
+        placeholder: problem.label || 'Answer',
+        placeholderTextColor: colors.subtleText,
+        autoCapitalize: 'none',
+        autoCorrect: false,
+        style: [styles.answerInput, { color: colors.text, borderColor: colors.border, backgroundColor: colors.cardMuted }, stylesConfig?.answer],
+      }
+    ),
     message
       ? React.createElement(Text, { style: [styles.feedback, { color: colors.subtleText }, stylesConfig?.feedback] }, message)
       : null,
@@ -162,7 +247,7 @@ function MathChallenge({ colors, stylesConfig, onSolved, difficulty = 'intermedi
                 submit(input, onSolved);
                 return;
               }
-              if (input.length >= 3) return;
+              if (input.length >= 12) return;
               setInput((v) => `${v}${k}`);
             },
             style: ({ pressed }) => [
@@ -183,9 +268,9 @@ function MathChallenge({ colors, stylesConfig, onSolved, difficulty = 'intermedi
 
 function TileChallenge({ colors, stylesConfig, onSolved, tileCount = 8 }) {
   const size = boardSizeFromTileCount(tileCount);
-  const sizeLabel = size === 2 ? '2x2' : '3x3';
-  const tileSide = tileCount === 3 ? 96 : 80;
-  const [board, setBoard] = React.useState(() => shuffleBoard(tileCount, tileCount === 3 ? 28 : 80));
+  const sizeLabel = size === 4 ? '4x4' : '3x3';
+  const tileSide = tileCount === 15 ? 62 : 80;
+  const [board, setBoard] = React.useState(() => shuffleBoard(tileCount, tileCount === 15 ? 160 : 80));
   const [moves, setMoves] = React.useState(0);
   const startedAtRef = React.useRef(Date.now());
 
@@ -256,7 +341,13 @@ function TileChallenge({ colors, stylesConfig, onSolved, tileCount = 8 }) {
               stylesConfig?.tile,
             ],
           },
-          value === 0 ? null : React.createElement(Text, { style: [styles.tileText, { color: colors.text }, stylesConfig?.tileText] }, String(value))
+          value === 0
+            ? null
+            : React.createElement(
+                Text,
+                { style: [styles.tileText, { color: colors.text, fontSize: tileCount === 15 ? 24 : 30 }, stylesConfig?.tileText] },
+                String(value)
+              )
         );
       })
     )
@@ -282,6 +373,14 @@ const styles = StyleSheet.create({
     fontSize: 15,
     fontWeight: '600',
   },
+  answerInput: {
+    minHeight: 46,
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    fontSize: 18,
+    fontWeight: '700',
+  },
   feedback: {
     fontSize: 13,
     fontWeight: '600',

package/package.json

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