feat: Ren'Py screens (screen/call screen/show screen) with actions and styles
Converter - screens.py parses the screen language: containers (fixed, frame, vbox, hbox, grid, vpgrid, viewport, button, has), widgets (text, textbutton, imagebutton, add, bar ...), if/for/use/transclude, default, python, key, timer, on, inline ATL, conditional properties, and decompiled forms (unparenthesised operators, glued property values, comma separated actions) - style statements, call/show/hide screen operators and Python-level renpy.show_screen are translated; only screens the game shows are audited, unused stock screens no longer block an import; undefined screens do - ATL values may be computed at run time and transforms take parameters (at blink(0.2, 0.3)); blur property Player - screens.ts builds the DOM from the IR and rebuilds it on state changes; buttons with idle/hover/selected/insensitive states, tooltips, sounds, modal screens, timers and keys that survive re-rendering, saved with the save file - Actions: Jump, Call, Return, SetVariable, Toggle*, SetScreenVariable, Show, Hide, ToggleScreen, Function, Play, Notify, If, Language, ShowMenu, OpenURL ... - Crop/LiveCrop/Solid/Frame/Transform/DynamicDisplayable values, crop property, globals(), renpy.variant/change_language/seen_image, transition stubs Tests: screen parser and runtime (linkedom DOM), screens fixture compiled from tests/fixtures/screens.rpy. Docs: docs/SCREENS.md. Twisted-Thoughts now passes the strict compatibility check. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
mrleo1nidandClaude Sonnet 5.5 committed
1 parent
47fc121e7d
commit
62ece25902
24 files changed
+2997
-60
No files matched your search
Generated
+302
@@ -16,10 +16,18 @@
|
||||
"@types/react": "18.3.12",
|
||||
"@types/react-dom": "18.3.1",
|
||||
"@vitejs/plugin-react": "4.3.4",
|
||||
"linkedom": "0.18.14",
|
||||
"typescript": "5.6.3",
|
||||
"vite": "5.4.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@acemir/cssom": {
|
||||
"version": "0.9.32",
|
||||
"resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.32.tgz",
|
||||
"integrity": "sha512-OijrAUu7rrJhSIoHNg6LMPS5e344nwUHA+1EFYYjrh64D+GmytUsfBQjci45TjT+rd5Spsp8B5xsZDT+TgyXXQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.29.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
|
||||
@@ -1232,6 +1240,20 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/boolbase": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-2.0.0.tgz",
|
||||
"integrity": "sha512-DkVaaQHymRhpYEYo9x1oo7Q7B0Y6KJUsjm3c9eTyFDby4MHLBTwZ6ZDWBel5zrYxj1WsZgC5oLpiz+93MluXeA==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=20.19.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/browserslist": {
|
||||
"version": "4.29.4",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.29.4.tgz",
|
||||
@@ -1294,6 +1316,41 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/css-select": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-7.0.0.tgz",
|
||||
"integrity": "sha512-snmjEVXy+1LnwXdxhYvTMj1d9tOh4HxkA1YmoayVBeeyR2C14Pum7fcxJIm4SswYspVy866eYNwlH6xC3/VH5g==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"boolbase": "^2.0.0",
|
||||
"css-what": "^8.0.0",
|
||||
"domhandler": "^6.0.1",
|
||||
"domutils": "^4.0.2",
|
||||
"nth-check": "^3.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.19.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/css-what": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-8.0.0.tgz",
|
||||
"integrity": "sha512-DH0Bqq3DNp5tdOReuNyAA+Ev4Y2GS5FMbZpeTLP6C4CDi0h5nL0BmUPChXw3o/qbHLDWHl49sbNqQVY7bMSDdw==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=20.19.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
||||
@@ -1319,6 +1376,77 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/dom-serializer": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-3.1.1.tgz",
|
||||
"integrity": "sha512-4MEa38/QexBob6gFNwu+EGdWvhJ1OKuNwdYY3Y3NyeWDQfnGeDYQUDfIRzWu5B5gsv03so2Uxd28YC6zrsx3Lw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"domelementtype": "^3.0.0",
|
||||
"domhandler": "^6.0.0",
|
||||
"entities": "^8.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.19.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/domelementtype": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-3.0.0.tgz",
|
||||
"integrity": "sha512-umCQid3jKbDmVjx8jGaW7uUykm4DEUeyV21hPxNMo2nV955DhUThwqyOIDtreepP31hl84X7G5U9ZfsWvIB3Pg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
],
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=20.19.0"
|
||||
}
|
||||
},
|
||||
"node_modules/domhandler": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-6.0.1.tgz",
|
||||
"integrity": "sha512-gYzvtM72ZtxQO0T048kd6HWSbbGCNOUwcnfQ01cqIJ4X2IYKFFHZ5mKvrQETcFXxsRObZulDaKmy//R7TPtsBg==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"domelementtype": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.19.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/fb55/domhandler?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/domutils": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-4.0.2.tgz",
|
||||
"integrity": "sha512-qI4JLRKnSzqFqr7hAlS5xQDusBCjKSEG4t4+7aNrIQMHBcsC2TGEhuyABJdYkgSewL57PNLYEiibY2iPKhKpaA==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"dom-serializer": "^3.0.0",
|
||||
"domelementtype": "^3.0.0",
|
||||
"domhandler": "^6.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.19.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/fb55/domutils?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.464",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.464.tgz",
|
||||
@@ -1326,6 +1454,19 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-8.1.0.tgz",
|
||||
"integrity": "sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=20.19.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.21.5",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
|
||||
@@ -1400,6 +1541,118 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/html-escaper": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz",
|
||||
"integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/htmlparser2": {
|
||||
"version": "10.1.0",
|
||||
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
|
||||
"integrity": "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
"https://github.com/fb55/htmlparser2?sponsor=1",
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"domelementtype": "^2.3.0",
|
||||
"domhandler": "^5.0.3",
|
||||
"domutils": "^3.2.2",
|
||||
"entities": "^7.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/htmlparser2/node_modules/dom-serializer": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
|
||||
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"domelementtype": "^2.3.0",
|
||||
"domhandler": "^5.0.2",
|
||||
"entities": "^4.2.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/htmlparser2/node_modules/dom-serializer/node_modules/entities": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
|
||||
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/htmlparser2/node_modules/domelementtype": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
|
||||
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
],
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/htmlparser2/node_modules/domhandler": {
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
|
||||
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"domelementtype": "^2.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/domhandler?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/htmlparser2/node_modules/domutils": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
|
||||
"integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"dom-serializer": "^2.0.0",
|
||||
"domelementtype": "^2.3.0",
|
||||
"domhandler": "^5.0.3"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/domutils?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/htmlparser2/node_modules/entities": {
|
||||
"version": "7.0.1",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
|
||||
"integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@@ -1432,6 +1685,31 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/linkedom": {
|
||||
"version": "0.18.14",
|
||||
"resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.18.14.tgz",
|
||||
"integrity": "sha512-BRUnkOm4YR5vo+qI3j0EbungB0vZPSCue5AdnTQRaxAGSbsOZiBFRO0rh4zlo8qXUhli8pxvnpEXDklMnlq2Rg==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@acemir/cssom": "^0.9.32",
|
||||
"css-select": "^7.0.0",
|
||||
"html-escaper": "^3.0.3",
|
||||
"htmlparser2": "^10.1.0",
|
||||
"uhyphen": "^0.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"canvas": ">= 2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"canvas": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
@@ -1490,6 +1768,23 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/nth-check": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-3.0.1.tgz",
|
||||
"integrity": "sha512-GX0gsdbGVCgnRgbeGaubfjpBXyYRWOOCVeYh08bSQvDZqxz5ndXs1OTfAt/h36G1xvI94YIspsI0sVFqAV9+RQ==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"boolbase": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.19.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/fb55/nth-check?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||
@@ -1682,6 +1977,13 @@
|
||||
"node": ">=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/uhyphen": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/uhyphen/-/uhyphen-0.2.0.tgz",
|
||||
"integrity": "sha512-qz3o9CHXmJJPGBdqzab7qAYuW8kQGKNEuoHFYrBwV6hWIMcpAmxDLXojcHfFr9US1Pe6zUswEIJIbLI610fuqA==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/update-browserslist-db": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.4.tgz",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
"@types/react": "18.3.12",
|
||||
"@types/react-dom": "18.3.1",
|
||||
"@vitejs/plugin-react": "4.3.4",
|
||||
"linkedom": "0.18.14",
|
||||
"typescript": "5.6.3",
|
||||
"vite": "5.4.11"
|
||||
}
|
||||
|
||||
+66
-22
@@ -2,17 +2,22 @@
|
||||
|
||||
export type AtlProps = Record<string, any>;
|
||||
|
||||
/** A literal, or an expression evaluated when the timeline runs (`{ e: expr }`). */
|
||||
export type AtlValue<T = any> = T | { e: any };
|
||||
|
||||
export interface AtlBlock {
|
||||
steps: AtlStep[];
|
||||
repeat: null | true | number;
|
||||
repeat: null | true | AtlValue<number>;
|
||||
/** Parameters of `transform name(a, b=1):`. */
|
||||
params?: { n: string; d: any; kind: string }[];
|
||||
}
|
||||
|
||||
export type AtlStep =
|
||||
| { op: "set"; props: AtlProps }
|
||||
| { op: "move"; warp: "linear" | "ease" | "easein" | "easeout"; t: number; props: AtlProps }
|
||||
| { op: "pause"; t: number }
|
||||
| { op: "move"; warp: "linear" | "ease" | "easein" | "easeout"; t: AtlValue<number>; props: AtlProps }
|
||||
| { op: "pause"; t: AtlValue<number> }
|
||||
| { op: "parallel"; blocks: AtlBlock[] }
|
||||
| { op: "choice"; blocks: { w: number; block: AtlBlock }[] }
|
||||
| { op: "choice"; blocks: { w: AtlValue<number>; block: AtlBlock }[] }
|
||||
| { op: "block"; block: AtlBlock }
|
||||
| { op: "on"; events: string[]; block: AtlBlock }
|
||||
| { op: "use"; name: string };
|
||||
@@ -24,6 +29,20 @@ export interface AtlHost {
|
||||
props(name: string): AtlProps | null;
|
||||
/** Called after every change of the working properties. */
|
||||
apply(props: AtlProps): void;
|
||||
/** Evaluate a run-time value with the transform's parameters in scope. */
|
||||
eval?(expr: any, vars: Map<string, any>): any;
|
||||
}
|
||||
|
||||
/** Bind `name(args)` of an `at` clause to the transform's parameters. `ev` evaluates in the caller's scope. */
|
||||
export function bindArguments(block: AtlBlock, spec: { args?: any[]; kw?: Record<string, any> },
|
||||
ev: (expr: any) => any): Map<string, any> {
|
||||
const vars = new Map<string, any>();
|
||||
(block.params ?? []).forEach((p, i) => {
|
||||
if (spec.kw && Object.hasOwn(spec.kw, p.n)) vars.set(p.n, ev(spec.kw[p.n]));
|
||||
else if (spec.args && i < spec.args.length) vars.set(p.n, ev(spec.args[i]));
|
||||
else vars.set(p.n, p.d ? ev(p.d) : null);
|
||||
});
|
||||
return vars;
|
||||
}
|
||||
|
||||
const SHOW_EVENTS = new Set(["show", "appear", "default", "start", "update", "replace"]);
|
||||
@@ -50,15 +69,34 @@ function nextFrame() {
|
||||
export class AtlRunner {
|
||||
private token = 0;
|
||||
|
||||
constructor(private host: AtlHost, private props: AtlProps) {}
|
||||
constructor(private host: AtlHost, private props: AtlProps, private vars: Map<string, any> = new Map()) {}
|
||||
|
||||
/** Start the timeline; resolves when it ends (never, for endless loops) or is stopped. */
|
||||
async start(block: AtlBlock): Promise<void> {
|
||||
/** Resolve `{ e: expr }` values (also inside tuples). */
|
||||
private val<T = any>(v: AtlValue<T> | undefined): any {
|
||||
if (Array.isArray(v)) return v.map((x) => this.val(x));
|
||||
if (v && typeof v === "object" && "e" in v) return this.host.eval ? this.host.eval((v as any).e, this.vars) : null;
|
||||
return v;
|
||||
}
|
||||
|
||||
private props_(values: AtlProps): AtlProps {
|
||||
return Object.fromEntries(Object.entries(values).map(([k, v]) => [k, this.val(v)]));
|
||||
}
|
||||
|
||||
private seconds(v: AtlValue<number> | undefined): number {
|
||||
const n = Number(this.val(v));
|
||||
return Number.isFinite(n) ? Math.max(0, n) : 0;
|
||||
}
|
||||
|
||||
/** Start the timeline; resolves when it ends (never, for endless loops) or is stopped.
|
||||
* The result is true only when the timeline ran to its end. */
|
||||
async start(block: AtlBlock): Promise<boolean> {
|
||||
const token = ++this.token;
|
||||
try {
|
||||
await this.run(block, token, 0, "show");
|
||||
return true;
|
||||
} catch (err) {
|
||||
if (!(err instanceof Stopped)) throw err;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -126,7 +164,7 @@ export class AtlRunner {
|
||||
}
|
||||
loops++;
|
||||
if (block.repeat === null) return;
|
||||
if (block.repeat !== true && loops >= block.repeat) return;
|
||||
if (block.repeat !== true && loops >= this.seconds(block.repeat as AtlValue<number>)) return;
|
||||
// a loop without any waiting step would freeze the page: yield one frame per turn
|
||||
if (!waited && performance.now() - startedAt < 1) await nextFrame();
|
||||
}
|
||||
@@ -136,22 +174,27 @@ export class AtlRunner {
|
||||
private async step(step: AtlStep, token: number, depth: number, event: string): Promise<boolean> {
|
||||
switch (step.op) {
|
||||
case "set":
|
||||
Object.assign(this.props, step.props);
|
||||
Object.assign(this.props, this.props_(step.props));
|
||||
this.apply();
|
||||
return false;
|
||||
case "pause":
|
||||
await this.sleep(step.t, token);
|
||||
return step.t > 0;
|
||||
case "move":
|
||||
await this.move(step, token);
|
||||
return step.t > 0;
|
||||
case "pause": {
|
||||
const t = this.seconds(step.t);
|
||||
await this.sleep(t, token);
|
||||
return t > 0;
|
||||
}
|
||||
case "move": {
|
||||
const t = this.seconds(step.t);
|
||||
await this.move(step, t, token);
|
||||
return t > 0;
|
||||
}
|
||||
case "parallel":
|
||||
await Promise.all(step.blocks.map((b) => this.run(b, token, depth + 1, event)));
|
||||
return true;
|
||||
case "choice": {
|
||||
const total = step.blocks.reduce((s, b) => s + b.w, 0);
|
||||
const weights = step.blocks.map((b) => this.seconds(b.w) || 1);
|
||||
const total = weights.reduce((s, w) => s + w, 0);
|
||||
let pick = Math.random() * total;
|
||||
const chosen = step.blocks.find((b) => (pick -= b.w) < 0) ?? step.blocks[step.blocks.length - 1];
|
||||
const chosen = step.blocks.find((_, i) => (pick -= weights[i]) < 0) ?? step.blocks[step.blocks.length - 1];
|
||||
if (chosen) await this.run(chosen.block, token, depth + 1, event);
|
||||
return true;
|
||||
}
|
||||
@@ -199,22 +242,23 @@ export class AtlRunner {
|
||||
}
|
||||
}
|
||||
|
||||
private async move(step: Extract<AtlStep, { op: "move" }>, token: number) {
|
||||
private async move(step: Extract<AtlStep, { op: "move" }>, seconds: number, token: number) {
|
||||
const target = this.props_(step.props);
|
||||
const from: AtlProps = {};
|
||||
for (const key of Object.keys(step.props)) from[key] = this.current(key);
|
||||
for (const key of Object.keys(target)) from[key] = this.current(key);
|
||||
const curve = curves[step.warp] ?? curves.linear;
|
||||
const start = performance.now();
|
||||
const duration = step.t * 1000;
|
||||
const duration = seconds * 1000;
|
||||
while (duration > 0) {
|
||||
await nextFrame();
|
||||
this.alive(token);
|
||||
const raw = Math.min(1, (performance.now() - start) / duration);
|
||||
const k = curve(raw);
|
||||
for (const [key, to] of Object.entries(step.props)) this.props[key] = mix(from[key], to, k);
|
||||
for (const [key, to] of Object.entries(target)) this.props[key] = mix(from[key], to, k);
|
||||
this.apply();
|
||||
if (raw >= 1) return;
|
||||
}
|
||||
Object.assign(this.props, step.props);
|
||||
Object.assign(this.props, target);
|
||||
this.apply();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { Renderer, type ResolvedImage } from "./renderer";
|
||||
import { fastPoint, interpolate, parseText, plainText, renderText, waitPoints } from "./text";
|
||||
import { languageName, rememberLanguage, type Translator } from "./i18n";
|
||||
import { naniText } from "./naninovel";
|
||||
import { ScreenManager, type ScreenHost } from "./screens";
|
||||
import { DEFAULT_SETTINGS, SLOTS, Restart, el, loadJSON, saveJSON, type SaveApi, type SaveMeta, type Settings } from "./engine-util";
|
||||
import type {
|
||||
CharacterDef, Expr, Frame, GameData, ImageDef, Label, Layer, Manifest, Node, SaveData, ScriptModule,
|
||||
@@ -35,6 +36,9 @@ export class Engine {
|
||||
private stack: Frame[] = [];
|
||||
private gen = 0;
|
||||
private waiters: (() => void)[] = [];
|
||||
private screens: ScreenManager;
|
||||
private screenFonts = new Map<string, string>();
|
||||
private seenImages = new Set<string>();
|
||||
private running = false;
|
||||
|
||||
private skip = false;
|
||||
@@ -101,7 +105,8 @@ export class Engine {
|
||||
del: (n) => void delete this.store[n],
|
||||
};
|
||||
this.py = new Python(scope);
|
||||
this.builtins = this.makeBuiltins();
|
||||
this.screens = new ScreenManager(this.screenHost(), game.screens ?? {}, game.styles ?? {});
|
||||
this.builtins = { ...this.makeBuiltins(), ...this.screens.builtins() };
|
||||
|
||||
const [w, h] = game.resolution;
|
||||
this.baseSize = Number(game.ui.text_size) || Math.round(h * 0.0306);
|
||||
@@ -113,6 +118,15 @@ export class Engine {
|
||||
evalCond: (c) => truthy(this.safeEval(c)),
|
||||
transform: (name) => game.transforms[name] ?? null,
|
||||
atl: (name) => game.atl?.[name] ?? null,
|
||||
evalExpr: (expr, frame) => {
|
||||
const saved = this.py.locals;
|
||||
this.py.locals = frame ? [...saved, frame] : saved;
|
||||
try {
|
||||
return this.safeEval(expr);
|
||||
} finally {
|
||||
this.py.locals = saved;
|
||||
}
|
||||
},
|
||||
text: (e) => this.interp(this.tr.str(pyStr(this.safeEval(e)))),
|
||||
});
|
||||
this.audio = new AudioSystem(this.settings, (f) => this.fileUrl(f), game.channels ?? {});
|
||||
@@ -125,6 +139,7 @@ export class Engine {
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.screens.destroy();
|
||||
this.gen++;
|
||||
this.wakeAll();
|
||||
this.audio.stopAll();
|
||||
@@ -303,8 +318,12 @@ export class Engine {
|
||||
throw new JumpSignal("jump", "__quit__");
|
||||
},
|
||||
version: () => "pgvn",
|
||||
...this.screens.renpyApi(),
|
||||
// presentation-only: nothing to roll back or replay, and the next transition is chosen by `with`
|
||||
end_replay: () => null,
|
||||
variant: (name: string) => ["pc", "large", "web", "medium"].includes(String(name)),
|
||||
change_language: (code: any) => void this.setLanguage(code === null || code === undefined ? this.game.sourceLang ?? "und" : String(code)),
|
||||
seen_image: (name: any) => this.seenImages.has(String(name)),
|
||||
block_rollback: () => null,
|
||||
transition: () => null,
|
||||
};
|
||||
@@ -330,6 +349,10 @@ export class Engine {
|
||||
random,
|
||||
math: { floor: Math.floor, ceil: Math.ceil, sqrt: Math.sqrt, pi: Math.PI, pow: Math.pow },
|
||||
len: (x: any) => (x instanceof PyDict ? x.map.size : x?.length ?? 0),
|
||||
// a read-only view: `"name" in globals()` works, writes do not reach the game
|
||||
globals: () => new PyDict(Object.entries(this.store)),
|
||||
...Object.fromEntries(["Dissolve", "Fade", "ImageDissolve", "MoveTransition", "CropMove", "PushMove",
|
||||
"Pixellate", "ComposeTransition", "With"].map((n) => [n, () => null])),
|
||||
str: (x: any) => pyStr(x),
|
||||
int: (x: any) => Math.trunc(num(x)),
|
||||
float: (x: any) => num(x),
|
||||
@@ -385,7 +408,72 @@ export class Engine {
|
||||
}
|
||||
}
|
||||
|
||||
private screenHost(): ScreenHost {
|
||||
const engine = this;
|
||||
return {
|
||||
py: this.py,
|
||||
fileUrl: (path) => this.fileUrl(path),
|
||||
image: (value) => this.screenImage(value),
|
||||
text: (el, value, size) => renderText(el, parseText(this.interp(this.tr.str(value))), Infinity, size),
|
||||
fontFamily: (file) => this.screenFont(file),
|
||||
get baseSize() { return engine.baseSize; },
|
||||
play: (channel, file, loop) => this.audio.play(channel, [file], { loop }),
|
||||
stop: (channel) => this.audio.stop(channel, 0),
|
||||
notify: (message) => this.notify(message),
|
||||
jump: (label) => this.restart(() => this.guardedJump(label)),
|
||||
call: (label) => this.restart(() => this.call(label)),
|
||||
quit: () => this.onExit(),
|
||||
mainMenu: () => this.restart(() => { this.stack = []; this.cur = { label: "", path: [0] }; }),
|
||||
openMenu: () => this.openGameMenu(),
|
||||
openUrl: (url) => {
|
||||
if (/^https?:\/\//i.test(url)) window.open(url, "_blank", "noopener,noreferrer");
|
||||
},
|
||||
setLanguage: (code) => void this.setLanguage(code ?? this.game.sourceLang ?? "und"),
|
||||
transform: (name) => this.game.transforms[name] ?? null,
|
||||
atl: (name) => this.game.atl?.[name] ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
/** A jump requested from a widget; the special menu/quit targets end the session instead. */
|
||||
private guardedJump(label: string) {
|
||||
try {
|
||||
this.jump(label);
|
||||
} catch (err) {
|
||||
if (!(err instanceof Restart)) throw err;
|
||||
this.cur = { label: "", path: [0] };
|
||||
if (err.message === "__quit__") this.onExit();
|
||||
}
|
||||
}
|
||||
|
||||
private screenImage(value: string): HTMLElement | null {
|
||||
if (/^#[0-9a-f]{3,8}$/i.test(value)) {
|
||||
const box = el("div");
|
||||
box.style.background = value;
|
||||
box.style.width = box.style.height = "100%";
|
||||
return box;
|
||||
}
|
||||
const resolved = this.resolveImage(value.split(" "));
|
||||
if (resolved) return this.renderer.displayable(resolved.def);
|
||||
const url = this.fileUrl(value);
|
||||
if (!url) return null;
|
||||
const img = new Image();
|
||||
img.src = url;
|
||||
img.draggable = false;
|
||||
return img;
|
||||
}
|
||||
|
||||
private screenFont(file: string): string | null {
|
||||
let family = this.screenFonts.get(file);
|
||||
if (!family) {
|
||||
family = `pg-scr-${this.screenFonts.size}`;
|
||||
this.screenFonts.set(file, family);
|
||||
this.loadFont(family, file);
|
||||
}
|
||||
return family;
|
||||
}
|
||||
|
||||
private resetStore() {
|
||||
this.screens.clear();
|
||||
this.store = {};
|
||||
try {
|
||||
this.py.exec(this.game.init);
|
||||
@@ -557,6 +645,7 @@ export class Engine {
|
||||
}
|
||||
try {
|
||||
await this.exec(node);
|
||||
this.screens.refresh();
|
||||
} catch (err) {
|
||||
if (err instanceof JumpSignal) {
|
||||
if (err.kind === "jump") this.jump(err.target);
|
||||
@@ -577,6 +666,13 @@ export class Engine {
|
||||
}
|
||||
}
|
||||
|
||||
private screenArgs(node: Node) {
|
||||
return {
|
||||
args: (node.args ?? []).map((e: Expr) => this.safeEval(e)),
|
||||
kw: Object.fromEntries(Object.entries(node.kw ?? {}).map(([k, e]) => [k, this.safeEval(e as Expr)])),
|
||||
};
|
||||
}
|
||||
|
||||
private async exec(node: Node) {
|
||||
switch (node.op) {
|
||||
case "nani_exit":
|
||||
@@ -688,6 +784,26 @@ export class Engine {
|
||||
return this.jump(node.target ?? pyStr(this.safeEval(node.expr)));
|
||||
case "call":
|
||||
return this.call(node.target ?? pyStr(this.safeEval(node.expr)), node.args);
|
||||
case "call_screen": {
|
||||
const { args, kw } = this.screenArgs(node);
|
||||
this.interactionStart();
|
||||
this.setSkip(false);
|
||||
const value = await this.wait<any>((done) => this.screens.show(node.name, args, kw, { call: true, onReturn: done }));
|
||||
this.screens.hideCall(node.name);
|
||||
this.store._return = value ?? null;
|
||||
this.advance();
|
||||
return;
|
||||
}
|
||||
case "show_screen": {
|
||||
const { args, kw } = this.screenArgs(node);
|
||||
this.screens.show(node.name, args, kw);
|
||||
this.advance();
|
||||
return;
|
||||
}
|
||||
case "hide_screen":
|
||||
this.screens.hide(node.name);
|
||||
this.advance();
|
||||
return;
|
||||
case "camera":
|
||||
this.renderer.camera(node.at ?? []);
|
||||
this.advance();
|
||||
@@ -727,6 +843,7 @@ export class Engine {
|
||||
return;
|
||||
}
|
||||
const tag = node.as ?? (node.img.name ? node.img.name[0] : img.name[0]);
|
||||
for (let n = 1; n <= img.name.length; n++) this.seenImages.add(img.name.slice(0, n).join(" "));
|
||||
const zorder = node.zorder ? Number(this.safeEval(node.zorder)) : undefined;
|
||||
this.renderer.show(img, tag, node.at ?? [], { zorder, behind: node.behind });
|
||||
}
|
||||
@@ -1003,6 +1120,7 @@ export class Engine {
|
||||
this.wakeAll();
|
||||
this.onAdvance = null;
|
||||
this.skipTick = null;
|
||||
this.screens.hideCalls();
|
||||
this.closeScreen();
|
||||
this.menuEl.classList.add("pg-hidden");
|
||||
this.centeredEl.classList.add("pg-hidden");
|
||||
@@ -1097,6 +1215,7 @@ export class Engine {
|
||||
cur: anchor(this.cur),
|
||||
stack: this.stack.map((f) => ({ ...anchor(f), saved: encodeValue(f.saved) })),
|
||||
store: encodeValue(this.store),
|
||||
screens: encodeValue(this.screens.snapshot()),
|
||||
scene: this.renderer.snapshot(),
|
||||
music: this.audio.current("music"),
|
||||
window: this.windowShown,
|
||||
@@ -1142,6 +1261,7 @@ export class Engine {
|
||||
this.restart(() => {
|
||||
this.resetStore();
|
||||
Object.assign(this.store, decodeValue(data.store));
|
||||
this.screens.restore(decodeValue(data.screens ?? []));
|
||||
this.renderer.scene();
|
||||
for (const s of data.scene) {
|
||||
const img = this.resolveImage(s.name);
|
||||
@@ -1239,7 +1359,7 @@ export class Engine {
|
||||
this.centeredEl = el("div", "pg-centered pg-hidden");
|
||||
this.screen = el("div", "pg-screen pg-hidden");
|
||||
this.notifyEl = el("div", "pg-notify pg-hidden");
|
||||
stage.append(this.nvlEl, this.textbox, this.centeredEl, this.menuEl, this.screen, this.notifyEl);
|
||||
stage.append(this.nvlEl, this.textbox, this.centeredEl, this.menuEl, this.screens.layer, this.screen, this.notifyEl);
|
||||
|
||||
// touch-friendly menu button outside the scaled stage
|
||||
const hud = el("button", "pg-hud-btn", "☰");
|
||||
@@ -1255,7 +1375,7 @@ export class Engine {
|
||||
|
||||
stage.addEventListener("click", (ev) => {
|
||||
if (!this.screen.classList.contains("pg-hidden")) return;
|
||||
if ((ev.target as HTMLElement).closest(".pg-menu, .pg-quick")) return;
|
||||
if ((ev.target as HTMLElement).closest(".pg-menu, .pg-quick, .pg-sbtn, .pg-sframe, .pg-swindow, .pg-sviewport, .pg-sbar, .pg-smodal")) return;
|
||||
this.advanceInput();
|
||||
});
|
||||
stage.addEventListener("wheel", (ev) => {
|
||||
|
||||
@@ -343,3 +343,20 @@
|
||||
.pg-dialog-row { display: flex; justify-content: flex-end; gap: 10px; }
|
||||
.pg-dialog button { font-size: 15px; padding: 9px 18px; }
|
||||
.pg-dialog .pg-primary { background: #ff9f43; border-color: #ff9f43; color: #1a1205; font-weight: 650; }
|
||||
|
||||
/* --- game screens (Ren'Py screen language) ------------------------------------------ */
|
||||
.pg-usr { position: absolute; inset: 0; pointer-events: none; }
|
||||
.pg-sinst { position: absolute; inset: 0; pointer-events: none; }
|
||||
.pg-sinst.pg-smodal { pointer-events: auto; }
|
||||
.pg-sw { pointer-events: none; min-width: 0; min-height: 0; color: var(--pg-text, #fff); font-size: var(--pg-font, 24px); }
|
||||
.pg-sframe, .pg-swindow, .pg-sviewport, .pg-sbar, .pg-sbtn { pointer-events: auto; }
|
||||
.pg-sbtn { cursor: pointer; user-select: none; }
|
||||
.pg-sbtn.pg-sdisabled { cursor: default; }
|
||||
.pg-sbtn:focus-visible { outline: 2px solid var(--pg-accent, #4af); outline-offset: 2px; }
|
||||
.pg-simgbtn img, .pg-simgbtn .pg-simg { display: block; pointer-events: none; }
|
||||
.pg-stext { white-space: pre-wrap; }
|
||||
.pg-sbar { background: rgba(255, 255, 255, 0.18); min-width: 40px; min-height: 12px; }
|
||||
.pg-sbar-fill { background: var(--pg-accent, #4af); width: 100%; height: 100%; }
|
||||
.pg-sbar:not(.pg-svbar) .pg-sbar-fill { height: 100%; }
|
||||
.pg-sadd { pointer-events: none; }
|
||||
.pg-sviewport { scrollbar-width: thin; }
|
||||
@@ -1,7 +1,7 @@
|
||||
// DOM renderer for the image layer: one absolutely positioned element per shown tag.
|
||||
// The stage has the game's native resolution and is scaled with a CSS transform.
|
||||
|
||||
import { AtlRunner, type AtlBlock } from "./atl";
|
||||
import { AtlRunner, bindArguments, type AtlBlock } from "./atl";
|
||||
import type { AtSpec, ImageDef, ShownImage, Transition } from "./types";
|
||||
|
||||
const POSITIONS: Record<string, Record<string, number>> = {
|
||||
@@ -29,6 +29,8 @@ export interface RendererHost {
|
||||
evalCond(e: any): boolean;
|
||||
transform(name: string): Record<string, any> | null;
|
||||
atl(name: string): AtlBlock | null;
|
||||
/** Evaluate an expression, optionally with extra variables (ATL parameters) in scope. */
|
||||
evalExpr(expr: any, frame?: Map<string, any>): any;
|
||||
text(e: any): string;
|
||||
}
|
||||
|
||||
@@ -105,7 +107,8 @@ export class Renderer {
|
||||
block: (name) => this.host.atl(name),
|
||||
props: (name) => this.host.transform(name),
|
||||
apply: (p) => this.style(entry.el, { ...p }),
|
||||
}, live);
|
||||
eval: (expr, frame) => this.host.evalExpr(expr, frame),
|
||||
}, live, bindArguments(block, spec, (e) => this.host.evalExpr(e)));
|
||||
entry.runners.push({ runner, block });
|
||||
void runner.start(block).catch((err) => console.warn("[pgvn] ATL", err));
|
||||
}
|
||||
@@ -207,6 +210,11 @@ export class Renderer {
|
||||
return document.createElement("div");
|
||||
}
|
||||
|
||||
/** An element for an image definition, for UI built outside the scene (screens). */
|
||||
displayable(def: ImageDef): HTMLElement {
|
||||
return this.build(def);
|
||||
}
|
||||
|
||||
/** Frame-by-frame ATL animation: swaps children on timers while attached. */
|
||||
private animated(def: ImageDef, depth: number): HTMLElement {
|
||||
const box = document.createElement("div");
|
||||
@@ -311,7 +319,10 @@ export class Renderer {
|
||||
if (ax.endsWith("px") || ay.endsWith("px"))
|
||||
el.style.transform = `translate(calc(-1 * ${ax}), calc(-1 * ${ay})) scale(${zx}, ${zy})`;
|
||||
if (p.alpha !== undefined) el.style.opacity = String(p.alpha);
|
||||
if (p.filter) el.style.filter = `${p.filter}(1)`;
|
||||
const filters: string[] = [];
|
||||
if (p.filter) filters.push(`${p.filter}(1)`);
|
||||
if (typeof p.blur === "number" && p.blur > 0) filters.push(`blur(${p.blur}px)`);
|
||||
if (filters.length) el.style.filter = filters.join(" ");
|
||||
}
|
||||
|
||||
// --- transitions ---------------------------------------------------------------
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -53,6 +53,9 @@ export interface AtSpec {
|
||||
props?: Record<string, any>;
|
||||
/** Animated transform: a name from GameData.atl or an inline timeline. */
|
||||
atl?: string | import("./atl").AtlBlock;
|
||||
/** Arguments of `at name(args)` for a parameterised transform. */
|
||||
args?: Expr[];
|
||||
kw?: Record<string, Expr>;
|
||||
effect?: "shake";
|
||||
d?: number;
|
||||
dist?: number;
|
||||
@@ -109,6 +112,8 @@ export interface GameData {
|
||||
images: Record<string, ImageDef>;
|
||||
transforms: Record<string, Record<string, any>>;
|
||||
atl?: Record<string, import("./atl").AtlBlock>;
|
||||
screens?: Record<string, import("./screens").ScreenDef>;
|
||||
styles?: Record<string, import("./screens").StyleDef>;
|
||||
transitions: Record<string, Transition | null>;
|
||||
audio: Record<string, string>;
|
||||
channels?: Record<string, { mixer: string; loop: boolean }>;
|
||||
@@ -155,4 +160,5 @@ export interface SaveData {
|
||||
camera?: AtSpec[];
|
||||
menuSeen?: string[];
|
||||
text?: string;
|
||||
screens?: { name: string; args: any[]; kw: Record<string, any> }[];
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"screens":{"card":{"params":[{"n":"title","d":null,"kind":"p"}],"props":{},"defaults":[],"body":[{"w":"frame","args":[],"props":{},"body":[{"w":"vbox","args":[],"props":{},"body":[{"w":"text","args":[{"k":"name","id":"title"}],"props":{},"body":[]},{"c":"transclude"}]}]}]},"counter":{"params":[],"props":{},"defaults":[],"body":[{"w":"add","args":[{"k":"const","v":"#fff"}],"props":{"xysize":{"k":"tuple","v":[{"k":"const","v":10},{"k":"const","v":10}]}},"body":[]},{"w":"bar","args":[],"props":{"value":{"k":"call","f":{"k":"name","id":"VariableValue"},"a":[{"k":"const","v":"score"},{"k":"const","v":10}],"kw":{}},"xsize":{"k":"const","v":100},"vertical":{"k":"const","v":false}},"body":[]}]},"deck":{"params":[],"props":{},"defaults":[],"body":[{"c":"use","name":"card","args":[{"k":"const","v":"Deck"}],"kw":{},"body":[{"w":"text","args":[{"k":"bin","op":"+","l":{"k":"const","v":"child "},"r":{"k":"const","v":"one"}}],"props":{},"body":[]},{"w":"textbutton","args":[{"k":"const","v":"Pick"}],"props":{"action":{"k":"call","f":{"k":"name","id":"Return"},"a":[{"k":"const","v":1}],"kw":{}}},"body":[]}]},{"w":"add","args":[{"k":"const","v":"pic.png"}],"props":{"crop":{"k":"tuple","v":[{"k":"const","v":1},{"k":"const","v":2},{"k":"const","v":30},{"k":"const","v":40}]}},"body":[]},{"w":"add","args":[{"k":"const","v":"dot.png"}],"props":{"at":[{"props":{"alpha":0.0},"name":"blink","atl":"blink","args":[{"k":"const","v":0.02},{"k":"const","v":0.02}],"kw":{}}]},"body":[]},{"w":"add","args":[{"k":"const","v":"bg.png"}],"props":{"alpha":{"k":"const","v":0.0},"at":[{"props":{},"atl":{"steps":[{"op":"move","warp":"linear","t":0.1,"props":{"alpha":1.0}}],"repeat":null}}]},"body":[]},{"c":"on","event":"show","action":{"k":"call","f":{"k":"name","id":"SetVariable"},"a":[{"k":"const","v":"shown"},{"k":"const","v":true}],"kw":{}}},{"c":"on","event":"hide","action":{"k":"call","f":{"k":"name","id":"SetVariable"},"a":[{"k":"const","v":"hid"},{"k":"const","v":true}],"kw":{}}},{"w":"text","args":[{"k":"const","v":"x"}],"props":{"pos":{"k":"tuple","v":[{"k":"const","v":5},{"k":"const","v":6}]}},"body":[]},{"w":"vpgrid","args":[],"props":{"cols":{"k":"const","v":2}},"body":[{"w":"text","args":[{"k":"const","v":"a"}],"props":{},"body":[]},{"w":"text","args":[{"k":"const","v":"b"}],"props":{},"body":[]}]},{"w":"textbutton","args":[{"k":"const","v":"Language"}],"props":{"action":{"k":"list","v":[{"k":"call","f":{"k":"name","id":"Language"},"a":[{"k":"const","v":"ru"}],"kw":{}},{"k":"call","f":{"k":"name","id":"ToggleScreen"},"a":[{"k":"const","v":"counter"}],"kw":{}}]}},"body":[]},{"w":"add","args":[{"k":"call","f":{"k":"name","id":"Crop"},"a":[{"k":"tuple","v":[{"k":"const","v":0},{"k":"const","v":0},{"k":"const","v":8},{"k":"const","v":8}]},{"k":"const","v":"sprite.png"}],"kw":{}}],"props":{},"body":[]}]},"hud":{"params":[{"n":"day","d":{"k":"const","v":1},"kind":"p"}],"props":{"tag":{"k":"name","id":"hud"},"zorder":{"k":"const","v":5},"style_prefix":{"k":"const","v":"hud"}},"defaults":[["open",{"k":"const","v":false}]],"body":[{"w":"frame","args":[],"props":{"xalign":{"k":"const","v":0.0},"yalign":{"k":"const","v":0.0}},"body":[{"w":"vbox","args":[],"props":{"spacing":{"k":"const","v":6}},"body":[{"w":"text","args":[{"k":"const","v":"Day [day]"}],"props":{},"body":[]},{"c":"if","branches":[{"c":{"k":"cmp","l":{"k":"name","id":"money"},"ops":[">"],"r":[{"k":"const","v":10}]},"body":[{"w":"text","args":[{"k":"const","v":"Rich"}],"props":{},"body":[]}]},{"c":null,"body":[{"w":"text","args":[{"k":"const","v":"Poor"}],"props":{},"body":[]}]}]},{"c":"for","t":{"k":"name","id":"item"},"it":{"k":"name","id":"inventory"},"body":[{"w":"textbutton","args":[{"k":"name","id":"item"}],"props":{"action":{"k":"call","f":{"k":"name","id":"SetVariable"},"a":[{"k":"const","v":"held"},{"k":"name","id":"item"}],"kw":{}}},"body":[]}]},{"w":"textbutton","args":[{"k":"const","v":"Menu"}],"props":{"action":{"k":"call","f":{"k":"name","id":"ToggleScreenVariable"},"a":[{"k":"const","v":"open"}],"kw":{}},"selected":{"k":"name","id":"open"}},"body":[]},{"c":"if","branches":[{"c":{"k":"name","id":"open"},"body":[{"w":"text","args":[{"k":"const","v":"open!"}],"props":{},"body":[]}]}]},{"w":"textbutton","args":[{"k":"const","v":"Go"}],"props":{"action":{"k":"list","v":[{"k":"call","f":{"k":"name","id":"SetVariable"},"a":[{"k":"const","v":"went"},{"k":"const","v":true}],"kw":{}},{"k":"call","f":{"k":"name","id":"Jump"},"a":[{"k":"const","v":"elsewhere"}],"kw":{}}]}},"body":[]}]}]},{"c":"key","key":{"k":"const","v":"K_h"},"action":{"k":"call","f":{"k":"name","id":"SetVariable"},"a":[{"k":"const","v":"hotkey"},{"k":"const","v":true}],"kw":{}}},{"c":"timer","delay":{"k":"const","v":0.02},"action":{"k":"call","f":{"k":"name","id":"SetVariable"},"a":[{"k":"const","v":"ticked"},{"k":"const","v":true}],"kw":{}},"repeat":null}]},"mood":{"params":[],"props":{},"defaults":[],"body":[{"w":"imagebutton","args":[],"props":{"action":{"k":"tuple","v":[{"k":"call","f":{"k":"name","id":Line truncated
|
||||
Vendored
+94
@@ -0,0 +1,94 @@
|
||||
# Source of screens.json. Regenerate from backend/ with:
|
||||
# python -m tests.make_screens ../frontend/tests/fixtures/screens.rpy ../frontend/tests/fixtures/screens.json
|
||||
|
||||
style hud_text:
|
||||
size 30
|
||||
color "#abc"
|
||||
|
||||
style hud_button:
|
||||
background "#123"
|
||||
hover_background "#456"
|
||||
padding (10, 4)
|
||||
|
||||
transform fade_in:
|
||||
alpha 0.0
|
||||
linear 0.1 alpha 1.0
|
||||
|
||||
screen hud(day=1):
|
||||
tag hud
|
||||
zorder 5
|
||||
style_prefix "hud"
|
||||
default open = False
|
||||
frame:
|
||||
xalign 0.0
|
||||
yalign 0.0
|
||||
vbox:
|
||||
spacing 6
|
||||
text "Day [day]"
|
||||
if money > 10:
|
||||
text "Rich"
|
||||
else:
|
||||
text "Poor"
|
||||
for item in inventory:
|
||||
textbutton item action SetVariable("held", item)
|
||||
textbutton "Menu" action ToggleScreenVariable("open") selected open
|
||||
if open:
|
||||
text "open!"
|
||||
textbutton "Go" action [SetVariable("went", True), Jump("elsewhere")]
|
||||
key "K_h" action SetVariable("hotkey", True)
|
||||
timer 0.02 action SetVariable("ticked", True)
|
||||
|
||||
screen shop(item="none"):
|
||||
modal True
|
||||
imagebutton auto "buy_%s.png" action Return(item) at fade_in
|
||||
textbutton "Cancel" action Return(None) sensitive can_cancel
|
||||
|
||||
screen counter():
|
||||
add "#fff" xysize (10, 10)
|
||||
bar value VariableValue("score", 10) xsize 100
|
||||
|
||||
transform blink(delay, cycle=1.0):
|
||||
alpha 0.0
|
||||
pause delay
|
||||
linear cycle alpha 1.0
|
||||
|
||||
screen card(title):
|
||||
frame:
|
||||
has vbox
|
||||
text title
|
||||
transclude
|
||||
|
||||
screen deck():
|
||||
use card("Deck"):
|
||||
text "child " + "one"
|
||||
textbutton "Pick" action Return(1)
|
||||
add "pic.png" crop(1, 2, 30, 40)
|
||||
add "dot.png" at blink(0.02, 0.02)
|
||||
add "bg.png":
|
||||
alpha 0.0
|
||||
linear 0.1 alpha 1.0
|
||||
on "show" action SetVariable("shown", True)
|
||||
on "hide" action SetVariable("hid", True)
|
||||
text "x" pos(5, 6)
|
||||
vpgrid:
|
||||
cols 2
|
||||
text "a"
|
||||
text "b"
|
||||
textbutton "Language" action [Language("ru"), ToggleScreen("counter")]
|
||||
add Crop((0, 0, 8, 8), "sprite.png")
|
||||
|
||||
screen mood():
|
||||
imagebutton:
|
||||
if money > 10:
|
||||
idle "rich.png"
|
||||
else:
|
||||
idle "poor.png"
|
||||
action SetVariable("mood_clicked", 1), SetVariable("mood_done", True)
|
||||
|
||||
label start:
|
||||
show screen mood
|
||||
show screen deck
|
||||
show screen hud(2)
|
||||
call screen shop("sword")
|
||||
show screen counter
|
||||
return
|
||||
@@ -0,0 +1,227 @@
|
||||
import assert from "node:assert/strict";
|
||||
import { readFileSync } from "node:fs";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { test } from "node:test";
|
||||
import { build } from "esbuild";
|
||||
import { parseHTML } from "linkedom";
|
||||
|
||||
const { window, document } = parseHTML("<!doctype html><html><body></body></html>");
|
||||
Object.assign(globalThis, { window, document, HTMLElement: window.HTMLElement, HTMLInputElement: window.HTMLInputElement,
|
||||
HTMLImageElement: window.HTMLImageElement, Image: window.Image });
|
||||
window.setTimeout = setTimeout;
|
||||
window.clearTimeout = clearTimeout;
|
||||
globalThis.requestAnimationFrame = (cb) => setTimeout(() => cb(performance.now()), 1);
|
||||
|
||||
const compiled = await build({
|
||||
stdin: { contents: `export * from "./python"; export * from "./screens";`,
|
||||
resolveDir: fileURLToPath(new URL("../src/player/", import.meta.url)), loader: "ts" },
|
||||
bundle: true, write: false, format: "esm", platform: "node", logLevel: "silent",
|
||||
});
|
||||
const { Python, ScreenManager, userBuiltins } =
|
||||
await import(`data:text/javascript;base64,${Buffer.from(compiled.outputFiles[0].text).toString("base64")}`);
|
||||
const fixture = JSON.parse(readFileSync(new URL("./fixtures/screens.json", import.meta.url), "utf8"));
|
||||
const wait = (ms) => new Promise((r) => setTimeout(r, ms));
|
||||
|
||||
function setup(extra = {}) {
|
||||
const store = { money: 20, inventory: ["sword", "shield"], can_cancel: true, ...extra };
|
||||
const builtins = {};
|
||||
const py = new Python({
|
||||
get: (n) => (n in store ? store[n] : builtins[n]),
|
||||
has: (n) => n in store || n in builtins,
|
||||
set: (n, v) => { store[n] = v; },
|
||||
del: (n) => { delete store[n]; },
|
||||
});
|
||||
const calls = { jump: [], play: [], notify: [], language: [] };
|
||||
const host = {
|
||||
py, baseSize: 24,
|
||||
fileUrl: (p) => `/f/${p}`,
|
||||
image: (value) => { const e = document.createElement("img"); e.setAttribute("src", `/f/${value}`); return e; },
|
||||
text: (el, value) => { el.textContent = value.replace(/\[(\w+)\]/g, (_m, n) => String(py.lookup(n))); },
|
||||
fontFamily: () => null,
|
||||
play: (...a) => calls.play.push(a), stop() {}, notify: (m) => calls.notify.push(m),
|
||||
jump: (l) => calls.jump.push(l), call() {}, quit() {}, mainMenu() {},
|
||||
openMenu() {}, openUrl() {}, setLanguage: (c) => calls.language.push(c),
|
||||
transform: (n) => fixture.transforms[n] ?? null,
|
||||
atl: (n) => fixture.atl[n] ?? null,
|
||||
};
|
||||
const manager = new ScreenManager(host, fixture.screens, fixture.styles);
|
||||
Object.assign(builtins, userBuiltins(py), manager.builtins());
|
||||
document.body.append(manager.layer);
|
||||
return { manager, store, calls, py };
|
||||
}
|
||||
|
||||
const texts = (root) => [...root.querySelectorAll(".pg-stext")].map((e) => e.textContent);
|
||||
const buttons = (root) => [...root.querySelectorAll(".pg-sbtn")];
|
||||
const click = (el) => el.onclick({ stopPropagation() {}, preventDefault() {} });
|
||||
const settle = () => wait(15);
|
||||
|
||||
test("a screen renders its widgets, conditions, loops and interpolated text", () => {
|
||||
const { manager } = setup();
|
||||
manager.show("hud", [2]);
|
||||
const root = manager.layer;
|
||||
assert.deepEqual(texts(root).slice(0, 2), ["Day 2", "Rich"]);
|
||||
assert.deepEqual(buttons(root).map((b) => b.textContent), ["sword", "shield", "Menu", "Go"]);
|
||||
const frame = root.querySelector(".pg-sframe");
|
||||
assert.ok(frame, "frame rendered");
|
||||
const label = root.querySelector(".pg-sbtn .pg-stext");
|
||||
assert.equal(label.style.color, "#abc", "style hud_text applies through style_prefix");
|
||||
assert.equal(label.style.fontSize, "30px");
|
||||
assert.equal(root.querySelector(".pg-sbtn").style.background, "#123", "style hud_button applies");
|
||||
});
|
||||
|
||||
test("conditions follow the game state when the screen refreshes", async () => {
|
||||
const { manager, store } = setup();
|
||||
manager.show("hud");
|
||||
assert.ok(texts(manager.layer).includes("Rich"));
|
||||
store.money = 1;
|
||||
manager.refresh();
|
||||
await settle();
|
||||
assert.ok(texts(manager.layer).includes("Poor"));
|
||||
});
|
||||
|
||||
test("actions change variables, screen variables and the selected state", async () => {
|
||||
const { manager, store } = setup();
|
||||
manager.show("hud");
|
||||
click(buttons(manager.layer)[1]);
|
||||
assert.equal(store.held, "shield");
|
||||
assert.ok(!texts(manager.layer).includes("open!"));
|
||||
click(buttons(manager.layer)[2]);
|
||||
await settle();
|
||||
assert.ok(texts(manager.layer).includes("open!"), "ToggleScreenVariable re-rendered the screen");
|
||||
assert.ok(buttons(manager.layer)[2].classList.contains("pg-sselected"), "`selected open` marks the button");
|
||||
});
|
||||
|
||||
test("Jump stops the remaining actions and goes to the label", () => {
|
||||
const { manager, store, calls } = setup();
|
||||
manager.show("hud");
|
||||
click(buttons(manager.layer)[3]);
|
||||
assert.equal(store.went, true);
|
||||
assert.deepEqual(calls.jump, ["elsewhere"]);
|
||||
});
|
||||
|
||||
test("call screen resolves with the Return value; a modal screen blocks what is below", async () => {
|
||||
const { manager } = setup();
|
||||
let result = "pending";
|
||||
manager.show("shop", ["sword"], {}, { call: true, onReturn: (v) => { result = v; } });
|
||||
const root = manager.layer;
|
||||
assert.ok(root.querySelector(".pg-sinst").classList.contains("pg-smodal"));
|
||||
const image = root.querySelector(".pg-simgbtn img");
|
||||
assert.equal(image.getAttribute("src"), "/f/buy_idle.png", "auto \"buy_%s.png\" picks the idle image");
|
||||
click(root.querySelector(".pg-simgbtn"));
|
||||
assert.equal(result, "sword");
|
||||
manager.hideCall("shop");
|
||||
assert.equal(root.querySelector(".pg-sinst"), null);
|
||||
});
|
||||
|
||||
test("insensitive buttons do nothing", () => {
|
||||
const { manager } = setup({ can_cancel: false });
|
||||
let result = "pending";
|
||||
manager.show("shop", [], {}, { call: true, onReturn: (v) => { result = v; } });
|
||||
const cancel = buttons(manager.layer)[1];
|
||||
assert.ok(cancel.classList.contains("pg-sdisabled"));
|
||||
click(cancel);
|
||||
assert.equal(result, "pending");
|
||||
});
|
||||
|
||||
test("timers fire, keys work, and hiding stops both", async () => {
|
||||
const { manager, store } = setup();
|
||||
manager.show("hud");
|
||||
await wait(40);
|
||||
assert.equal(store.ticked, true);
|
||||
const press = () => {
|
||||
const event = new window.Event("keydown");
|
||||
event.key = "h";
|
||||
window.dispatchEvent(event);
|
||||
};
|
||||
press();
|
||||
assert.equal(store.hotkey, true);
|
||||
store.hotkey = false;
|
||||
manager.hide("hud");
|
||||
press();
|
||||
assert.equal(store.hotkey, false);
|
||||
});
|
||||
|
||||
test("screens can be saved and restored with their arguments", () => {
|
||||
const { manager } = setup();
|
||||
manager.show("hud", [7]);
|
||||
const saved = JSON.parse(JSON.stringify(manager.snapshot()));
|
||||
manager.clear();
|
||||
assert.equal(manager.layer.querySelector(".pg-sinst"), null);
|
||||
manager.restore(saved);
|
||||
assert.ok(texts(manager.layer).includes("Day 7"));
|
||||
});
|
||||
|
||||
test("bars show a variable and unknown screens fail loudly", () => {
|
||||
const { manager, store } = setup({ score: 5 });
|
||||
manager.show("counter");
|
||||
assert.equal(manager.layer.querySelector(".pg-sbar-fill").style.width, "50%");
|
||||
store.score = 10;
|
||||
assert.throws(() => manager.show("missing"), /missing/);
|
||||
});
|
||||
|
||||
test("use with children transcludes them in the caller's scope; `has` nests the rest of the block", () => {
|
||||
const { manager } = setup();
|
||||
manager.show("deck");
|
||||
const card = manager.layer.querySelector(".pg-sframe");
|
||||
assert.ok(card.querySelector(".pg-svbox"), "`has vbox` created the box");
|
||||
assert.deepEqual([...card.querySelectorAll(".pg-stext")].map((e) => e.textContent), ["Deck", "child one", "Pick"]);
|
||||
assert.equal(card.querySelector(".pg-sbtn").textContent, "Pick");
|
||||
});
|
||||
|
||||
test("on show runs once, on hide when the screen goes away", async () => {
|
||||
const { manager, store } = setup();
|
||||
manager.show("deck");
|
||||
await settle();
|
||||
assert.equal(store.shown, true);
|
||||
store.shown = false;
|
||||
manager.refresh();
|
||||
await settle();
|
||||
assert.equal(store.shown, false, "re-rendering does not repeat `on show`");
|
||||
manager.hide("deck");
|
||||
assert.equal(store.hid, true);
|
||||
});
|
||||
|
||||
test("crop, glued properties, viewport grids, displayable values and extra actions", () => {
|
||||
const { manager, calls } = setup();
|
||||
manager.show("deck");
|
||||
const root = manager.layer;
|
||||
const pic = [...root.querySelectorAll(".pg-sadd")].find((e) => e.style.width === "30px");
|
||||
assert.equal(pic.style.height, "40px", "crop (1, 2, 30, 40) shows a 30x40 window");
|
||||
assert.equal(pic.firstChild.style.left, "-1px");
|
||||
const small = [...root.querySelectorAll(".pg-sadd")].find((e) => e.style.width === "8px");
|
||||
assert.ok(small, "Crop((0, 0, 8, 8), ...) works as a value");
|
||||
const grid = root.querySelector(".pg-svpgrid");
|
||||
assert.equal(grid.style.gridTemplateColumns, "repeat(2, auto)");
|
||||
const x = [...root.querySelectorAll(".pg-stext")].find((e) => e.textContent === "x");
|
||||
assert.equal(x.style.left, "calc(5px + 0px)", "pos(5, 6) without a space is understood");
|
||||
const button = [...root.querySelectorAll(".pg-sbtn")].find((b) => b.textContent === "Language");
|
||||
click(button);
|
||||
assert.deepEqual(calls.language, ["ru"]);
|
||||
assert.ok(manager.has("counter"));
|
||||
});
|
||||
|
||||
test("animated transforms with parameters start from their arguments and do not replay", async () => {
|
||||
const { manager } = setup();
|
||||
manager.show("deck");
|
||||
const dot = () => [...manager.layer.querySelectorAll(".pg-sadd")].find((e) => e.getAttribute("src") === "/f/dot.png");
|
||||
assert.equal(dot().style.opacity, "0");
|
||||
await wait(120);
|
||||
assert.equal(dot().style.opacity, "1");
|
||||
manager.refresh();
|
||||
await settle();
|
||||
assert.equal(dot().style.opacity, "1", "a finished animation stays finished after a refresh");
|
||||
});
|
||||
|
||||
test("an `if` that only sets properties picks the image; decompiled comma actions run all parts", async () => {
|
||||
const { manager, store } = setup();
|
||||
manager.show("mood");
|
||||
const picture = () => manager.layer.querySelector(".pg-simgbtn img").getAttribute("src");
|
||||
assert.equal(picture(), "/f/rich.png");
|
||||
store.money = 1;
|
||||
manager.refresh();
|
||||
await settle();
|
||||
assert.equal(picture(), "/f/poor.png");
|
||||
click(manager.layer.querySelector(".pg-simgbtn"));
|
||||
assert.equal(store.mood_clicked, 1);
|
||||
assert.equal(store.mood_done, true);
|
||||
});
|
||||
Reference in new issue
Block a user