bonk-challanges 0.1.0

package/index.js

@@ -0,0 +1,328 @@
+const React = require('react');
+const { PanResponder, Pressable, StyleSheet, Text, View } = require('react-native');
+
+function randomInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+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 };
+  }
+  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 x = randomInt(2, 12);
+  const a = randomInt(2, 9);
+  const b = randomInt(1, 25);
+  return { text: `${a}x + ${b} = ${a * x + b}`, answer: x };
+}
+
+function boardSizeFromTileCount(tileCount) {
+  return tileCount === 3 ? 2 : 3;
+}
+
+function createSolvedBoard(tileCount) {
+  const out = [];
+  for (let i = 1; i <= tileCount; i += 1) out.push(i);
+  out.push(0);
+  return out;
+}
+
+function neighbors(index, size) {
+  const row = Math.floor(index / size);
+  const col = index % size;
+  const out = [];
+  if (row > 0) out.push(index - size);
+  if (row < size - 1) out.push(index + size);
+  if (col > 0) out.push(index - 1);
+  if (col < size - 1) out.push(index + 1);
+  return out;
+}
+
+function shuffleBoard(tileCount, steps = 80) {
+  const size = boardSizeFromTileCount(tileCount);
+  const board = createSolvedBoard(tileCount);
+  let emptyIndex = board.length - 1;
+  let prev = -1;
+  for (let i = 0; i < steps; i += 1) {
+    const options = neighbors(emptyIndex, size).filter((n) => n !== prev);
+    const target = options[randomInt(0, options.length - 1)];
+    board[emptyIndex] = board[target];
+    board[target] = 0;
+    prev = emptyIndex;
+    emptyIndex = target;
+  }
+  return board;
+}
+
+function isSolved(board, tileCount) {
+  for (let i = 0; i < tileCount; i += 1) {
+    if (board[i] !== i + 1) return false;
+  }
+  return board[tileCount] === 0;
+}
+
+function moveBoard(board, index, tileCount) {
+  const size = boardSizeFromTileCount(tileCount);
+  const emptyIndex = board.indexOf(0);
+  const canMove = board[index] !== 0 && neighbors(index, size).includes(emptyIndex);
+  if (!canMove) return null;
+  const next = [...board];
+  next[emptyIndex] = board[index];
+  next[index] = 0;
+  return next;
+}
+
+function swipeTargetFromGesture(index, dx, dy, tileCount) {
+  const size = boardSizeFromTileCount(tileCount);
+  const row = Math.floor(index / size);
+  const col = index % size;
+  const horizontal = Math.abs(dx) >= Math.abs(dy);
+  if (horizontal) {
+    if (dx > 0 && col < size - 1) return index + 1;
+    if (dx < 0 && col > 0) return index - 1;
+    return null;
+  }
+  if (dy > 0 && row < size - 1) return index + size;
+  if (dy < 0 && row > 0) return index - size;
+  return null;
+}
+
+function useMathChallenge(difficulty) {
+  const [problem, setProblem] = React.useState(() => createMathProblem(difficulty));
+  const [message, setMessage] = React.useState('');
+  const [attempts, setAttempts] = React.useState(0);
+  const startedAtRef = React.useRef(Date.now());
+
+  React.useEffect(() => {
+    setProblem(createMathProblem(difficulty));
+    setMessage('');
+    setAttempts(0);
+    startedAtRef.current = Date.now();
+  }, [difficulty]);
+
+  const submit = React.useCallback(
+    (value, onSolved) => {
+      const nextAttempts = attempts + 1;
+      setAttempts(nextAttempts);
+      if (Number(value) === problem.answer) {
+        setMessage('Correct');
+        onSolved({
+          type: 'math',
+          attempts: nextAttempts,
+          durationMs: Date.now() - startedAtRef.current,
+          difficulty,
+        });
+        return;
+      }
+      setMessage('Try again');
+      setProblem(createMathProblem(difficulty));
+    },
+    [attempts, difficulty, problem.answer]
+  );
+
+  return { problem, message, submit };
+}
+
+function MathChallenge({ colors, stylesConfig, onSolved, difficulty = 'intermediate' }) {
+  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'];
+
+  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'),
+    message
+      ? React.createElement(Text, { style: [styles.feedback, { color: colors.subtleText }, stylesConfig?.feedback] }, message)
+      : null,
+    React.createElement(
+      View,
+      { style: styles.padGrid },
+      pad.map((k) =>
+        React.createElement(
+          Pressable,
+          {
+            key: k,
+            onPress: () => {
+              if (k === 'C') {
+                setInput('');
+                return;
+              }
+              if (k === 'OK') {
+                submit(input, onSolved);
+                return;
+              }
+              if (input.length >= 3) return;
+              setInput((v) => `${v}${k}`);
+            },
+            style: ({ pressed }) => [
+              styles.key,
+              {
+                borderColor: colors.border,
+                backgroundColor: pressed ? colors.primaryPressed : colors.cardMuted,
+              },
+              stylesConfig?.key,
+            ],
+          },
+          React.createElement(Text, { style: [styles.keyText, { color: colors.text }, stylesConfig?.keyText] }, k)
+        )
+      )
+    )
+  );
+}
+
+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 [moves, setMoves] = React.useState(0);
+  const startedAtRef = React.useRef(Date.now());
+
+  const applyMove = React.useCallback(
+    (fromIndex) => {
+      const next = moveBoard(board, fromIndex, tileCount);
+      if (!next) return;
+      const nextMoves = moves + 1;
+      setBoard(next);
+      setMoves(nextMoves);
+      if (isSolved(next, tileCount)) {
+        onSolved({
+          type: 'tile',
+          moves: nextMoves,
+          durationMs: Date.now() - startedAtRef.current,
+          tileCount,
+        });
+      }
+    },
+    [board, moves, onSolved, tileCount]
+  );
+
+  return React.createElement(
+    View,
+    { style: [styles.block, stylesConfig?.block] },
+    React.createElement(Text, { style: [styles.prompt, { color: colors.text }, stylesConfig?.prompt] }, `Slide tiles into order (${sizeLabel})`),
+    React.createElement(Text, { style: [styles.answer, { color: colors.subtleText }, stylesConfig?.answer] }, `Moves: ${moves}`),
+    React.createElement(
+      View,
+      {
+        style: [
+          styles.tileGrid,
+          {
+            width: size * tileSide + (size - 1) * 8,
+          },
+        ],
+      },
+      board.map((value, index) => {
+        const emptyIndex = board.indexOf(0);
+        const canMove = value !== 0 && neighbors(index, size).includes(emptyIndex);
+        const responder = PanResponder.create({
+          onStartShouldSetPanResponder: () => value !== 0,
+          onMoveShouldSetPanResponder: (_evt, g) => Math.abs(g.dx) > 8 || Math.abs(g.dy) > 8,
+          onPanResponderRelease: (_evt, g) => {
+            if (value === 0) return;
+            const target = swipeTargetFromGesture(index, g.dx, g.dy, tileCount);
+            if (target === null) return;
+            if (target === emptyIndex) applyMove(index);
+          },
+        });
+
+        return React.createElement(
+          Pressable,
+          {
+            key: `${index}-${value}`,
+            disabled: value === 0,
+            onPress: () => applyMove(index),
+            ...responder.panHandlers,
+            style: ({ pressed }) => [
+              styles.tile,
+              {
+                width: tileSide,
+                height: tileSide,
+                borderColor: colors.border,
+                backgroundColor: value === 0 ? 'transparent' : pressed ? colors.primaryPressed : colors.cardMuted,
+                opacity: value === 0 ? 0.2 : canMove ? 1 : 0.7,
+              },
+              stylesConfig?.tile,
+            ],
+          },
+          value === 0 ? null : React.createElement(Text, { style: [styles.tileText, { color: colors.text }, stylesConfig?.tileText] }, String(value))
+        );
+      })
+    )
+  );
+}
+
+function BonkChallengeRunner({ type, tileCount = 8, difficulty = 'intermediate', colors, stylesConfig, onSolved }) {
+  if (type === 'tile') {
+    return React.createElement(TileChallenge, { colors, stylesConfig, onSolved, tileCount });
+  }
+  return React.createElement(MathChallenge, { colors, stylesConfig, onSolved, difficulty });
+}
+
+const styles = StyleSheet.create({
+  block: {
+    gap: 10,
+  },
+  prompt: {
+    fontSize: 20,
+    fontWeight: '700',
+  },
+  answer: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  feedback: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  padGrid: {
+    marginTop: 2,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  key: {
+    width: '30%',
+    borderRadius: 10,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 42,
+  },
+  keyText: {
+    fontSize: 17,
+    fontWeight: '700',
+  },
+  tileGrid: {
+    marginTop: 6,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    alignSelf: 'center',
+  },
+  tile: {
+    borderRadius: 10,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tileText: {
+    fontSize: 30,
+    fontWeight: '800',
+  },
+});
+
+module.exports = {
+  BonkChallengeRunner,
+};

package/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "bonk-challanges",
+  "version": "0.1.0",
+  "main": "index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.70"
+  }
+}