create-rspeedy 0.13.5 → 0.13.6

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # create-rspeedy
 
+## 0.13.6
+
 ## 0.13.5
 
 ## 0.13.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rspeedy",
-  "version": "0.13.5",
+  "version": "0.13.6",
   "description": "Create Rspeedy-powered ReactLynx apps with one command",
   "keywords": [
     "webpack",
@@ -36,9 +36,9 @@
   "devDependencies": {
     "@rsbuild/plugin-type-check": "1.3.4",
     "@lynx-js/qrcode-rsbuild-plugin": "^0.4.6",
-    "@lynx-js/react": "^0.116.5",
-    "@lynx-js/react-rsbuild-plugin": "^0.12.10",
-    "@lynx-js/rspeedy": "^0.13.5"
+    "@lynx-js/react": "^0.117.0",
+    "@lynx-js/react-rsbuild-plugin": "^0.13.0",
+    "@lynx-js/rspeedy": "^0.13.6"
   },
   "engines": {
     "node": ">=18"

package/template-react-js/src/App.jsx

@@ -4,9 +4,11 @@ import './App.css'
 import arrow from './assets/arrow.png'
 import lynxLogo from './assets/lynx-logo.png'
 import reactLynxLogo from './assets/react-logo.png'
+import { useFlappy } from './useFlappy.js'
 
 export function App() {
   const [alterLogo, setAlterLogo] = useState(false)
+  const [logoY, jump] = useFlappy()
 
   useEffect(() => {
     console.info('Hello, ReactLynx')
@@ -18,11 +20,15 @@ export function App() {
   }, [])
 
   return (
-    <view>
+    <view bindtap={jump}>
       <view className='Background' />
       <view className='App'>
         <view className='Banner'>
-          <view className='Logo' bindtap={onTap}>
+          <view
+            className='Logo'
+            style={{ transform: `translateY(${logoY}px)` }}
+            bindtap={onTap}
+          >
             {alterLogo
               ? <image src={reactLynxLogo} className='Logo--react' />
               : <image src={lynxLogo} className='Logo--lynx' />}

package/template-react-js/src/lib/flappy.js

@@ -0,0 +1,58 @@
+/**
+ * Framework-agnostic flappy-bird physics engine.
+ *
+ * Manages gravity, jump impulse, and a 60fps game loop.
+ * Wire it up to any UI framework by calling `jump()` on tap
+ * and reading `getY()` in the loop callback.
+ *
+ * @param {(y: number) => void} onUpdate
+ * @param {object} [options]
+ * @param {number} [options.gravity=0.6]
+ * @param {number} [options.jumpForce=-12]
+ * @param {number} [options.stackFactor=0.6]
+ * @param {number} [options.frameMs=16]
+ * @returns {{ jump: () => void, getY: () => number, destroy: () => void }}
+ */
+export function createFlappy(onUpdate, options = {}) {
+  const {
+    gravity = 0.6,
+    jumpForce = -12,
+    stackFactor = 0.6,
+    frameMs = 16,
+  } = options
+
+  let y = 0
+  let velocity = 0
+  let timer = null
+
+  function loop() {
+    velocity += gravity
+    y += velocity
+    if (y >= 0) {
+      y = 0
+      velocity = 0
+      timer = null
+      onUpdate(y)
+      return
+    }
+    onUpdate(y)
+    timer = setTimeout(loop, frameMs)
+  }
+
+  function jump() {
+    // Stack impulse on rapid taps, clamped to one full jumpForce
+    velocity = Math.max(velocity + jumpForce * stackFactor, jumpForce)
+    if (!timer) {
+      loop()
+    }
+  }
+
+  function destroy() {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  return { jump, getY: () => y, destroy }
+}

package/template-react-js/src/useFlappy.js

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef, useState } from '@lynx-js/react'
+
+import { createFlappy } from './lib/flappy.js'
+
+/**
+ * React hook for flappy-bird physics.
+ *
+ * Returns `[y, jump]` — a state value and a stable callback.
+ * The game loop runs automatically; cleanup happens on unmount.
+ * Options are read once on mount and not reactive to later changes.
+ *
+ * @param {object} [options]
+ * @returns {[number, () => void]}
+ */
+export function useFlappy(options) {
+  const [y, setY] = useState(0)
+  const engineRef = useRef(null)
+
+  if (engineRef.current == null) {
+    engineRef.current = createFlappy((newY) => {
+      setY(newY)
+    }, options)
+  }
+
+  useEffect(() => {
+    return () => {
+      engineRef.current?.destroy()
+    }
+  }, [])
+
+  const jump = useCallback(() => {
+    'background only'
+    engineRef.current?.jump()
+  }, [])
+
+  return [y, jump]
+}

package/template-react-ts/src/App.tsx

@@ -4,9 +4,11 @@ import './App.css'
 import arrow from './assets/arrow.png'
 import lynxLogo from './assets/lynx-logo.png'
 import reactLynxLogo from './assets/react-logo.png'
+import { useFlappy } from './useFlappy.js'
 
 export function App() {
   const [alterLogo, setAlterLogo] = useState(false)
+  const [logoY, jump] = useFlappy()
 
   useEffect(() => {
     console.info('Hello, ReactLynx')
@@ -18,11 +20,15 @@ export function App() {
   }, [])
 
   return (
-    <view>
+    <view bindtap={jump}>
       <view className='Background' />
       <view className='App'>
         <view className='Banner'>
-          <view className='Logo' bindtap={onTap}>
+          <view
+            className='Logo'
+            style={{ transform: `translateY(${logoY}px)` }}
+            bindtap={onTap}
+          >
             {alterLogo
               ? <image src={reactLynxLogo} className='Logo--react' />
               : <image src={lynxLogo} className='Logo--lynx' />}

package/template-react-ts/src/lib/flappy.ts

@@ -0,0 +1,76 @@
+/**
+ * Framework-agnostic flappy-bird physics engine.
+ *
+ * Manages gravity, jump impulse, and a 60fps game loop.
+ * Wire it up to any UI framework by calling `jump()` on tap
+ * and reading `getY()` in the loop callback.
+ */
+
+export interface FlappyOptions {
+  /** Downward acceleration per frame (default 0.6) */
+  gravity?: number
+  /** Upward impulse per tap — negative value (default -12) */
+  jumpForce?: number
+  /** Impulse stacking factor for rapid taps (default 0.6) */
+  stackFactor?: number
+  /** Frame interval in ms (default 16 ≈ 60fps) */
+  frameMs?: number
+}
+
+export type OnUpdate = (y: number) => void
+
+export interface FlappyEngine {
+  /** Call on each tap to apply upward impulse. */
+  jump(): void
+  /** Current Y offset (0 = ground, negative = airborne). */
+  getY(): number
+  /** Stop the game loop and clean up. */
+  destroy(): void
+}
+
+export function createFlappy(
+  onUpdate: OnUpdate,
+  options: FlappyOptions = {},
+): FlappyEngine {
+  const {
+    gravity = 0.6,
+    jumpForce = -12,
+    stackFactor = 0.6,
+    frameMs = 16,
+  } = options
+
+  let y = 0
+  let velocity = 0
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  function loop() {
+    velocity += gravity
+    y += velocity
+    if (y >= 0) {
+      y = 0
+      velocity = 0
+      timer = null
+      onUpdate(y)
+      return
+    }
+    onUpdate(y)
+    timer = setTimeout(loop, frameMs)
+  }
+
+  function jump() {
+    // Stack impulse on rapid taps, clamped to one full jumpForce
+    velocity = Math.max(velocity + jumpForce * stackFactor, jumpForce)
+    if (!timer) {
+      loop()
+    }
+  }
+
+  function destroy() {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  return { jump, getY: () => y, destroy }
+}

package/template-react-ts/src/useFlappy.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useRef, useState } from '@lynx-js/react'
+
+import { createFlappy } from './lib/flappy.js'
+import type { FlappyEngine, FlappyOptions } from './lib/flappy.js'
+
+/**
+ * React hook for flappy-bird physics.
+ *
+ * Returns `[y, jump]` — a state value and a stable callback.
+ * The game loop runs automatically; cleanup happens on unmount.
+ * Options are read once on mount and not reactive to later changes.
+ *
+ * @example
+ * ```tsx
+ * function Bird() {
+ *   const [y, jump] = useFlappy()
+ *   return (
+ *     <view bindtap={jump} style={{ transform: `translateY(${y}px)` }}>
+ *       <text>Tap me!</text>
+ *     </view>
+ *   )
+ * }
+ * ```
+ */
+export function useFlappy(
+  options?: FlappyOptions,
+): [number, () => void] {
+  const [y, setY] = useState(0)
+  const engineRef = useRef<FlappyEngine | null>(null)
+
+  if (engineRef.current == null) {
+    engineRef.current = createFlappy((newY) => {
+      setY(newY)
+    }, options)
+  }
+
+  useEffect(() => {
+    return () => {
+      engineRef.current?.destroy()
+    }
+  }, [])
+
+  const jump = useCallback(() => {
+    'background only'
+    engineRef.current?.jump()
+  }, [])
+
+  return [y, jump]
+}

package/template-react-vitest-rltl-js/src/App.jsx

@@ -4,9 +4,11 @@ import './App.css'
 import arrow from './assets/arrow.png'
 import lynxLogo from './assets/lynx-logo.png'
 import reactLynxLogo from './assets/react-logo.png'
+import { useFlappy } from './useFlappy.js'
 
 export function App(props) {
   const [alterLogo, setAlterLogo] = useState(false)
+  const [logoY, jump] = useFlappy()
 
   useEffect(() => {
     console.info('Hello, ReactLynx')
@@ -19,11 +21,15 @@ export function App(props) {
   }, [])
 
   return (
-    <view>
+    <view bindtap={jump}>
       <view className='Background' />
       <view className='App'>
         <view className='Banner'>
-          <view className='Logo' bindtap={onTap}>
+          <view
+            className='Logo'
+            style={{ transform: `translateY(${logoY}px)` }}
+            bindtap={onTap}
+          >
             {alterLogo
               ? <image src={reactLynxLogo} className='Logo--react' />
               : <image src={lynxLogo} className='Logo--lynx' />}

package/template-react-vitest-rltl-js/src/__tests__/index.test.jsx

@@ -39,6 +39,7 @@ test('App', async () => {
           >
             <view
               class="Logo"
+              style="transform: translateY(0px);"
             >
               <image
                 class="Logo--lynx"

package/template-react-vitest-rltl-js/src/lib/flappy.js

@@ -0,0 +1,58 @@
+/**
+ * Framework-agnostic flappy-bird physics engine.
+ *
+ * Manages gravity, jump impulse, and a 60fps game loop.
+ * Wire it up to any UI framework by calling `jump()` on tap
+ * and reading `getY()` in the loop callback.
+ *
+ * @param {(y: number) => void} onUpdate
+ * @param {object} [options]
+ * @param {number} [options.gravity=0.6]
+ * @param {number} [options.jumpForce=-12]
+ * @param {number} [options.stackFactor=0.6]
+ * @param {number} [options.frameMs=16]
+ * @returns {{ jump: () => void, getY: () => number, destroy: () => void }}
+ */
+export function createFlappy(onUpdate, options = {}) {
+  const {
+    gravity = 0.6,
+    jumpForce = -12,
+    stackFactor = 0.6,
+    frameMs = 16,
+  } = options
+
+  let y = 0
+  let velocity = 0
+  let timer = null
+
+  function loop() {
+    velocity += gravity
+    y += velocity
+    if (y >= 0) {
+      y = 0
+      velocity = 0
+      timer = null
+      onUpdate(y)
+      return
+    }
+    onUpdate(y)
+    timer = setTimeout(loop, frameMs)
+  }
+
+  function jump() {
+    // Stack impulse on rapid taps, clamped to one full jumpForce
+    velocity = Math.max(velocity + jumpForce * stackFactor, jumpForce)
+    if (!timer) {
+      loop()
+    }
+  }
+
+  function destroy() {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  return { jump, getY: () => y, destroy }
+}

package/template-react-vitest-rltl-js/src/useFlappy.js

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useRef, useState } from '@lynx-js/react'
+
+import { createFlappy } from './lib/flappy.js'
+
+/**
+ * React hook for flappy-bird physics.
+ *
+ * Returns `[y, jump]` — a state value and a stable callback.
+ * The game loop runs automatically; cleanup happens on unmount.
+ * Options are read once on mount and not reactive to later changes.
+ *
+ * @param {object} [options]
+ * @returns {[number, () => void]}
+ */
+export function useFlappy(options) {
+  const [y, setY] = useState(0)
+  const engineRef = useRef(null)
+
+  if (engineRef.current == null) {
+    engineRef.current = createFlappy((newY) => {
+      setY(newY)
+    }, options)
+  }
+
+  useEffect(() => {
+    return () => {
+      engineRef.current?.destroy()
+    }
+  }, [])
+
+  const jump = useCallback(() => {
+    'background only'
+    engineRef.current?.jump()
+  }, [])
+
+  return [y, jump]
+}

package/template-react-vitest-rltl-ts/src/App.tsx

@@ -4,11 +4,13 @@ import './App.css'
 import arrow from './assets/arrow.png'
 import lynxLogo from './assets/lynx-logo.png'
 import reactLynxLogo from './assets/react-logo.png'
+import { useFlappy } from './useFlappy.js'
 
 export function App(props: {
   onRender?: () => void
 }) {
   const [alterLogo, setAlterLogo] = useState(false)
+  const [logoY, jump] = useFlappy()
 
   useEffect(() => {
     console.info('Hello, ReactLynx')
@@ -21,11 +23,15 @@ export function App(props: {
   }, [])
 
   return (
-    <view>
+    <view bindtap={jump}>
       <view className='Background' />
       <view className='App'>
         <view className='Banner'>
-          <view className='Logo' bindtap={onTap}>
+          <view
+            className='Logo'
+            style={{ transform: `translateY(${logoY}px)` }}
+            bindtap={onTap}
+          >
             {alterLogo
               ? <image src={reactLynxLogo} className='Logo--react' />
               : <image src={lynxLogo} className='Logo--lynx' />}

package/template-react-vitest-rltl-ts/src/__tests__/index.test.tsx

@@ -39,6 +39,7 @@ test('App', async () => {
           >
             <view
               class="Logo"
+              style="transform: translateY(0px);"
             >
               <image
                 class="Logo--lynx"

package/template-react-vitest-rltl-ts/src/lib/flappy.ts

@@ -0,0 +1,76 @@
+/**
+ * Framework-agnostic flappy-bird physics engine.
+ *
+ * Manages gravity, jump impulse, and a 60fps game loop.
+ * Wire it up to any UI framework by calling `jump()` on tap
+ * and reading `getY()` in the loop callback.
+ */
+
+export interface FlappyOptions {
+  /** Downward acceleration per frame (default 0.6) */
+  gravity?: number
+  /** Upward impulse per tap — negative value (default -12) */
+  jumpForce?: number
+  /** Impulse stacking factor for rapid taps (default 0.6) */
+  stackFactor?: number
+  /** Frame interval in ms (default 16 ≈ 60fps) */
+  frameMs?: number
+}
+
+export type OnUpdate = (y: number) => void
+
+export interface FlappyEngine {
+  /** Call on each tap to apply upward impulse. */
+  jump(): void
+  /** Current Y offset (0 = ground, negative = airborne). */
+  getY(): number
+  /** Stop the game loop and clean up. */
+  destroy(): void
+}
+
+export function createFlappy(
+  onUpdate: OnUpdate,
+  options: FlappyOptions = {},
+): FlappyEngine {
+  const {
+    gravity = 0.6,
+    jumpForce = -12,
+    stackFactor = 0.6,
+    frameMs = 16,
+  } = options
+
+  let y = 0
+  let velocity = 0
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  function loop() {
+    velocity += gravity
+    y += velocity
+    if (y >= 0) {
+      y = 0
+      velocity = 0
+      timer = null
+      onUpdate(y)
+      return
+    }
+    onUpdate(y)
+    timer = setTimeout(loop, frameMs)
+  }
+
+  function jump() {
+    // Stack impulse on rapid taps, clamped to one full jumpForce
+    velocity = Math.max(velocity + jumpForce * stackFactor, jumpForce)
+    if (!timer) {
+      loop()
+    }
+  }
+
+  function destroy() {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+  }
+
+  return { jump, getY: () => y, destroy }
+}

package/template-react-vitest-rltl-ts/src/useFlappy.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useRef, useState } from '@lynx-js/react'
+
+import { createFlappy } from './lib/flappy.js'
+import type { FlappyEngine, FlappyOptions } from './lib/flappy.js'
+
+/**
+ * React hook for flappy-bird physics.
+ *
+ * Returns `[y, jump]` — a state value and a stable callback.
+ * The game loop runs automatically; cleanup happens on unmount.
+ * Options are read once on mount and not reactive to later changes.
+ *
+ * @example
+ * ```tsx
+ * function Bird() {
+ *   const [y, jump] = useFlappy()
+ *   return (
+ *     <view bindtap={jump} style={{ transform: `translateY(${y}px)` }}>
+ *       <text>Tap me!</text>
+ *     </view>
+ *   )
+ * }
+ * ```
+ */
+export function useFlappy(
+  options?: FlappyOptions,
+): [number, () => void] {
+  const [y, setY] = useState(0)
+  const engineRef = useRef<FlappyEngine | null>(null)
+
+  if (engineRef.current == null) {
+    engineRef.current = createFlappy((newY) => {
+      setY(newY)
+    }, options)
+  }
+
+  useEffect(() => {
+    return () => {
+      engineRef.current?.destroy()
+    }
+  }, [])
+
+  const jump = useCallback(() => {
+    'background only'
+    engineRef.current?.jump()
+  }, [])
+
+  return [y, jump]
+}