@energy8platform/game-engine 0.11.0 → 0.13.0

package/README.md

@@ -100,7 +100,7 @@ import { GameApplication } from '@energy8platform/game-engine';             // f
 import { Scene, SceneManager } from '@energy8platform/game-engine/core';
 import { AssetManager } from '@energy8platform/game-engine/assets';
 import { AudioManager } from '@energy8platform/game-engine/audio';
-import { FlexContainer, Button, Label, Panel, Modal, Layout, ScrollContainer, Toast, ProgressBar, BalanceDisplay, WinDisplay, resolveView } from '@energy8platform/game-engine/ui';
+import { FlexContainer, Button, Label, Panel, Modal, Layout, ScrollContainer, Toast, ProgressBar, BalanceDisplay, WinDisplay, Slider, Toggle, resolveView } from '@energy8platform/game-engine/ui';
 import { Tween, Timeline, Easing, SpriteAnimation } from '@energy8platform/game-engine/animation';
 import { DevBridge, FPSOverlay } from '@energy8platform/game-engine/debug';
 import { ReactScene, extendPixiElements, extendUIElements, useSDK, useViewport } from '@energy8platform/game-engine/react';
@@ -426,6 +426,26 @@ toolbar.addFlexChild(spacer, { flexGrow: 1 });   // with flex config
 toolbar.resize(800, 60);
 ```
 
+**FlexItemConfig** — per-child options passed via `addFlexChild(child, config)` or JSX props:
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `flexGrow` | `number` | `0` | Flex grow factor |
+| `flexShrink` | `number` | `1` | Flex shrink factor (`0` = don't shrink when content overflows) |
+| `alignSelf` | `'auto' \| 'start' \| 'center' \| 'end' \| 'stretch'` | `'auto'` | Override parent's `alignItems` for this child |
+| `flexExclude` | `boolean` | `false` | Exclude from flex layout (like `position: absolute`) |
+| `layoutWidth` | `number` | — | Explicit width override for layout calculations |
+| `layoutHeight` | `number` | — | Explicit height override for layout calculations |
+
+```typescript
+// Fixed item that won't shrink + centered override
+toolbar.addFlexChild(logo, { flexShrink: 0 });
+toolbar.addFlexChild(badge, { alignSelf: 'center' });
+
+// Background excluded from layout flow
+toolbar.addFlexChild(background, { flexExclude: true });
+```
+
 ### Layout
 
 Higher-level layout with direction presets (`horizontal`/`vertical`/`grid`/`wrap`), viewport anchoring, and responsive breakpoints. Wraps FlexContainer.
@@ -494,6 +514,58 @@ const bar = new ProgressBar({
 });
 ```
 
+### Slider
+
+Draggable slider with customizable track, fill, and handle views:
+
+```typescript
+// Graphics-based
+const volume = new Slider({
+  min: 0, max: 1, value: 0.5, step: 0.1,
+  width: 200, height: 8,
+  fillColor: 0xffd700,
+  onUpdate: (v) => audio.setVolume('music', v),
+  onChange: (v) => console.log('Final:', v),
+});
+
+// Asset-based
+const volume = new Slider({
+  min: 0, max: 1, value: 0.5,
+  width: 200, height: 8,
+  trackView: 'slider-track',
+  fillView: 'slider-fill',
+  handleView: 'slider-handle',
+  onUpdate: (v) => audio.setVolume('music', v),
+});
+```
+
+`onUpdate` fires continuously during drag, `onChange` fires once when drag ends.
+
+### Toggle
+
+Two-state toggle switch with animation:
+
+```typescript
+// Graphics-based
+const mute = new Toggle({
+  value: false,
+  width: 52, height: 28,
+  onColor: 0x22cc22, offColor: 0x666666,
+  onChange: (on) => audio.muteAll(!on),
+});
+
+// Asset-based (custom ON/OFF views with crossfade)
+const ante = new Toggle({
+  value: false,
+  onView: 'toggle-on',
+  offView: 'toggle-off',
+  onChange: (on) => setAnteBet(on),
+});
+
+// Programmatic control
+mute.forceSwitch(true);
+```
+
 ### ScrollContainer
 
 Touch/drag scrolling with mouse wheel, inertia, and optional visual scrollbar:
@@ -824,6 +896,21 @@ All engine UI components are config-based: the reconciler passes JSX props as a
   <label text="Item 1" />
   <label text="Item 2" />
 </scrollContainer>
+
+{/* Slider */}
+<slider min={0} max={1} value={volume} width={200} height={8}
+        fillColor={0xffd700} onUpdate={setVolume} />
+
+{/* Toggle */}
+<toggle value={isMuted} onColor={0x22cc22} onChange={setIsMuted} />
+
+{/* Flex item props — work on any element inside <flexContainer> */}
+<flexContainer direction="row" width={800} height={60}>
+  <graphics draw={drawBg} flexExclude />       {/* excluded from flow */}
+  <label text="Logo" flexShrink={0} />          {/* won't shrink */}
+  <container flexGrow={1} />                     {/* fills remaining space */}
+  <button text="Menu" alignSelf="center" />      {/* centered on cross-axis */}
+</flexContainer>
 ```
 
 **Dash-notation** for nested config: `colors-default={0xff0000}` → `{ colors: { default: 0xff0000 } }`, `style-fontSize={24}` → `{ style: { fontSize: 24 } }`.

package/bin/simulate.ts

@@ -1,8 +1,9 @@
 #!/usr/bin/env npx tsx
 import { SimulationRunner, formatSimulationResult } from '../src/lua/SimulationRunner';
 import { ParallelSimulationRunner } from '../src/lua/ParallelSimulationRunner';
+import { NativeSimulationRunner, findNativeBinary, formatNativeResult } from '../src/lua/NativeSimulationRunner';
 import { cpus } from 'os';
-import { resolve } from 'path';
+import { resolve, dirname } from 'path';
 
 // ─── Argument Parsing ───────────────────────────────────
 
@@ -10,9 +11,14 @@ function parseArgs(argv: string[]): Record<string, string> {
   const args: Record<string, string> = {};
   for (let i = 2; i < argv.length; i++) {
     const arg = argv[i];
-    if (arg.startsWith('--') && i + 1 < argv.length) {
+    if (arg.startsWith('--')) {
       const key = arg.slice(2);
-      args[key] = argv[++i];
+      // Boolean flags (no value)
+      if (key === 'native' || key === 'js') {
+        args[key] = 'true';
+      } else if (i + 1 < argv.length) {
+        args[key] = argv[++i];
+      }
     }
   }
   return args;
@@ -28,6 +34,8 @@ async function main() {
   const action = args.action ?? 'spin';
   const params = args.params ? JSON.parse(args.params) : undefined;
   const workers = args.workers ? parseInt(args.workers, 10) : cpus().length;
+  const useNative = args.native === 'true';
+  const useJs = args.js === 'true';
 
   // Load dev config
   let config: any;
@@ -52,14 +60,46 @@ async function main() {
   }
 
   const gameId = config.gameDefinition.id ?? 'unknown';
-  const useParallel = workers > 1;
-  console.log(`Starting simulation for ${gameId} (${iterations.toLocaleString()} iterations, action: ${action}, workers: ${useParallel ? workers : 1})...`);
+
+  // ─── Native binary detection ────────────────────────────
+  // Search in config dir first, then in the game-engine package root
+  const engineRoot = resolve(__dirname, '..');
+  const binaryPath = args.binary ?? (useJs ? null : (findNativeBinary(dirname(configPath)) ?? findNativeBinary(engineRoot)));
+
+  if (useNative && !binaryPath) {
+    console.error('Native simulation binary not found.');
+    console.error('Use --binary <path> or set SIMULATE_BINARY environment variable.');
+    process.exit(1);
+  }
 
   const onProgress = (completed: number, total: number) => {
     const pct = Math.round((completed / total) * 100);
     console.log(`Progress: ${completed.toLocaleString()}/${total.toLocaleString()} (${pct}%)`);
   };
 
+  // ─── Native binary path ─────────────────────────────────
+  if (binaryPath) {
+    console.log(`Using native binary: ${binaryPath}`);
+    console.log(`Starting simulation for ${gameId} (${iterations.toLocaleString()} iterations, action: ${action})...`);
+
+    const runner = new NativeSimulationRunner({
+      binaryPath,
+      script: config.luaScript,
+      gameDefinition: config.gameDefinition,
+      iterations,
+      bet,
+      action,
+      params,
+    });
+    const result = await runner.run();
+    console.log(formatNativeResult(result));
+    return;
+  }
+
+  // ─── JS simulation path ─────────────────────────────────
+  const useParallel = workers > 1;
+  console.log(`Starting simulation for ${gameId} (${iterations.toLocaleString()} iterations, action: ${action}, workers: ${useParallel ? workers : 1})...`);
+
   let result;
 
   if (useParallel) {

package/dist/index.cjs.js

@@ -2966,6 +2966,37 @@ function layoutLine(items, isRow, mainSize, justify, align, gap, crossOffset, cr
             }
         }
     }
+    // Shrink: if content overflows and mainSize is finite, shrink eligible items
+    if (totalGrow === 0 && mainSize > 0) {
+        const overflow = totalFixed + totalGap - mainSize;
+        if (overflow > 0) {
+            let totalShrinkable = 0;
+            for (const item of items) {
+                const shrink = item.child._flexConfig?.flexShrink ?? 1;
+                if (shrink > 0) {
+                    totalShrinkable += isRow ? item.w : item.h;
+                }
+            }
+            if (totalShrinkable > 0) {
+                for (const item of items) {
+                    const shrink = item.child._flexConfig?.flexShrink ?? 1;
+                    if (shrink > 0) {
+                        const itemMain = isRow ? item.w : item.h;
+                        const reduction = overflow * (itemMain / totalShrinkable);
+                        const newSize = Math.max(0, itemMain - reduction);
+                        if (isRow) {
+                            item.w = newSize;
+                            item.child.width = newSize;
+                        }
+                        else {
+                            item.h = newSize;
+                            item.child.height = newSize;
+                        }
+                    }
+                }
+            }
+        }
+    }
     // Calculate total main size after flex
     let totalMain = totalGap;
     for (const item of items) {
@@ -3002,9 +3033,12 @@ function layoutLine(items, isRow, mainSize, justify, align, gap, crossOffset, cr
     for (const item of items) {
         const mainDim = isRow ? item.w : item.h;
         const crossDim = isRow ? item.h : item.w;
-        // Cross-axis alignment
+        // Cross-axis alignment (alignSelf overrides align)
+        const effectiveAlign = (item.child._flexConfig?.alignSelf && item.child._flexConfig.alignSelf !== 'auto')
+            ? item.child._flexConfig.alignSelf
+            : align;
         let crossPos = crossOffset;
-        switch (align) {
+        switch (effectiveAlign) {
             case 'start':
                 break;
             case 'center':
@@ -3188,11 +3222,14 @@ class FlexContainer extends pixi_js.Container {
         const contentH = this._explicitHeight > 0 ? this._explicitHeight - pt - pb : Infinity;
         const mainLimit = isRow ? contentW : contentH;
         const crossLimit = isRow ? contentH : contentW;
-        // Measure children
-        const measured = this._layoutChildren.map((child) => {
+        // Measure children (skip flexExclude — they position themselves)
+        const measured = [];
+        for (const child of this._layoutChildren) {
+            if (child._flexConfig?.flexExclude)
+                continue;
             const { w, h, ox, oy } = measureChild(child);
-            return { child, w, h, ox, oy };
-        });
+            measured.push({ child, w, h, ox, oy });
+        }
         // Split into lines (if wrapping)
         const lines = [];
         if (flexWrap && mainLimit < Infinity) {
@@ -3235,7 +3272,12 @@ class FlexContainer extends pixi_js.Container {
             const mainStart = isRow ? pl : pt;
             // Offset items by padding
             const tempItems = line.map((item) => ({ ...item }));
-            layoutLine(tempItems, isRow, mainLimit < Infinity ? mainLimit : 0, mainLimit < Infinity ? justifyContent : 'start', alignItems, gap, crossOffset, crossLimit < Infinity ? Math.min(lineCross, crossLimit) : lineCross);
+            // For single-line layouts, use the full available cross space for alignment;
+            // for multi-line (wrapping), each line gets its own measured cross size.
+            const effectiveCross = lines.length === 1 && crossLimit < Infinity
+                ? crossLimit
+                : (crossLimit < Infinity ? Math.min(lineCross, crossLimit) : lineCross);
+            layoutLine(tempItems, isRow, mainLimit < Infinity ? mainLimit : 0, mainLimit < Infinity ? justifyContent : 'start', alignItems, gap, crossOffset, effectiveCross);
             // Apply main-axis padding offset
             for (const item of tempItems) {
                 const origChild = line.find((l) => l.child === item.child);