create-pixifact 0.17.0 → 0.19.0

package/templates/game/src/ui/Dialog.ts

@@ -0,0 +1,31 @@
+import { Group } from 'pixifact/runtime';
+import { createEvent, event, prop, scene } from 'pixifact/scene';
+
+@scene()
+export class Dialog extends Group {
+    @prop({ default: '确认操作' })
+    declare title: string;
+
+    @prop({ default: '是否继续？' })
+    declare message: string;
+
+    @prop({ default: '确定' })
+    declare confirmText: string;
+
+    @prop({ default: '取消' })
+    declare cancelText: string;
+
+    @event()
+    readonly confirmed = createEvent();
+
+    @event()
+    readonly cancelled = createEvent();
+
+    confirm() {
+        this.confirmed.emit();
+    }
+
+    cancel() {
+        this.cancelled.emit();
+    }
+}

package/templates/game/src/ui/Panel.scene

@@ -0,0 +1,7 @@
+<Scene name="Panel" width="620" height="400">
+  <PanelBackground id="background" scene="./nine/PanelBackground.scene" left="0" right="0" top="0" bottom="0" />
+  <Label id="titleLabel" text="{title}" left="32" right="32" top="24" height="48" fontSize="36" fontFamily="sans-serif" fontWeight="700" fill="#25322d" alignY="center" eventMode="none" />
+  <Group id="contentHost" left="32" right="32" top="96" bottom="32">
+    <slot name="content" />
+  </Group>
+</Scene>

package/templates/game/src/ui/Panel.ts

@@ -0,0 +1,11 @@
+import { Group } from 'pixifact/runtime';
+import { prop, scene, slot } from 'pixifact/scene';
+
+@scene()
+export class Panel extends Group {
+    @prop({ default: '面板' })
+    declare title: string;
+
+    @slot()
+    declare readonly content: Group;
+}

package/templates/game/src/ui/ProgressBar.scene

@@ -0,0 +1,4 @@
+<Scene name="ProgressBar" width="420" height="24" eventMode="none">
+  <Rect id="track" left="0" right="0" top="0" bottom="0" fillColor="#e8e0d0" radius="12" />
+  <Rect id="fill" width="0" height="24" fillColor="#c8a464" radius="12" />
+</Scene>

package/templates/game/src/ui/ProgressBar.ts

@@ -0,0 +1,25 @@
+import { Group, type Rect } from 'pixifact/runtime';
+import { part, scene } from 'pixifact/scene';
+
+@scene()
+export class ProgressBar extends Group {
+    @part()
+    protected declare fill: Rect;
+
+    private fraction = 0;
+
+    onMounted() {
+        this.layout();
+    }
+
+    setProgress(value: number, max: number) {
+        this.fraction = Math.max(0, Math.min(1, value / max));
+        this.layout();
+    }
+
+    override layout() {
+        super.layout();
+        // Group 在 Scene 挂载完成前也会布局；@part 在挂载后注入。
+        if (this.fill) this.fill.setSize(this.width * this.fraction, this.height);
+    }
+}

package/templates/game/src/ui/nine/ButtonBackground.scene

@@ -0,0 +1,3 @@
+<Scene name="ButtonBackground" width="96" height="96" eventMode="none">
+  <NineImage id="image" texture="assets/ui/button.png" left="0" right="0" top="0" bottom="0" leftWidth="24" rightWidth="24" topHeight="24" bottomHeight="24" eventMode="none" />
+</Scene>

package/templates/game/src/ui/nine/ButtonBackground.ts

@@ -0,0 +1,5 @@
+import { Group } from 'pixifact/runtime';
+import { scene } from 'pixifact/scene';
+
+@scene()
+export class ButtonBackground extends Group {}

package/templates/game/src/ui/nine/PanelBackground.scene

@@ -0,0 +1,3 @@
+<Scene name="PanelBackground" width="96" height="96" eventMode="none">
+  <NineImage id="image" texture="assets/ui/panel.png" left="0" right="0" top="0" bottom="0" leftWidth="24" rightWidth="24" topHeight="24" bottomHeight="24" eventMode="none" />
+</Scene>

package/templates/game/src/ui/nine/PanelBackground.ts

@@ -0,0 +1,5 @@
+import { Group } from 'pixifact/runtime';
+import { scene } from 'pixifact/scene';
+
+@scene()
+export class PanelBackground extends Group {}

package/templates/game/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="pixifact/client" />

package/templates/game/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"]
+}

package/templates/game/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import { pixifact, pixifactRuntimePlugin } from 'pixifact/compiler-node';
+
+export default defineConfig({
+    plugins: [
+        pixifact(),
+        pixifactRuntimePlugin(),
+    ],
+});

package/templates/minimal/package.json

@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "pixi.js": "8.18.1",
-    "pixifact": "^0.17.0"
+    "pixifact": "^0.19.0"
   },
   "devDependencies": {
-    "pixifact-cli": "^0.17.0",
+    "pixifact-cli": "^0.19.0",
     "typescript": "^5.3.3",
     "vite": "^8.0.10"
   }