Merge pull request #9 from NarraLeaf/develop

[prod] narraleaf-react-0.0.1-beta.8

package.json

@@ -1,8 +1,8 @@
 {
   "name": "narraleaf-react",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.8",
   "description": "A React visual novel player framework",
-  "main": "./dist/index.js",
+  "main": "./dist/main.js",
   "types": "./dist/index.d.ts",
   "scripts": {
     "prebuild": "rimraf dist",
@@ -13,6 +13,7 @@
     "lint": "eslint \"./src/**/*.{ts,tsx,js,jsx}\"",
     "lint:fix": "eslint --fix \"./src/**/*.{ts,tsx,js,jsx}\"",
     "prepublish": "npm run lint && rimraf dist && webpack --config webpack.config.js && tsc-alias -p tsconfig.json",
+    "publish": "npm publish",
     "typedoc": "typedoc src/index.ts --out doc"
   },
   "devDependencies": {
@@ -70,6 +71,7 @@
   "author": "[email protected]",
   "license": "MIT",
   "dependencies": {
+    "@emotion/is-prop-valid": "^1.3.0",
     "client-only": "^0.0.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.5.4",

src/game/nlcore/game.ts

@@ -61,6 +61,8 @@ export class Game {
             aspectRatio: 16 / 9,
             minWidth: 800,
             minHeight: 450,
+            width: "100%",
+            height: "100%",
         },
         elements: {
             say: {

src/game/nlcore/gameTypes.d.ts

@@ -30,6 +30,8 @@ export type GameConfig = {
         aspectRatio: number;
         minWidth: number;
         minHeight: number;
+        width: number | string;
+        height: number | string;
     };
     elements: {
         say: {

src/game/player/elements/Player.tsx

@@ -121,11 +121,14 @@ export default function Player(
         }
     }
 
+    const playerWidth = width || game.config.player.width;
+    const playerHeight = height || game.config.player.height;
+
     return (
         <Motion>
             <div style={{
-                width: typeof width === "number" ? `${width}px` : width,
-                height: typeof height === "number" ? `${height}px` : height,
+                width: typeof playerWidth === "number" ? `${playerWidth}px` : playerWidth,
+                height: typeof playerHeight === "number" ? `${playerHeight}px` : playerHeight,
             }} className={clsx(className)}>
                 <AspectRatio className={clsx("flex-grow overflow-auto")}>
                     <Isolated className="relative">

webpack.config.js

@@ -20,7 +20,7 @@ module.exports = {
         main: ["./src/index.ts"]
     },
     output: {
-        filename: (!useAnalyzer) ? "index.js" : "[name].[contenthash].js",
+        filename: (!useAnalyzer) ? "main.js" : "[name].[contenthash].js",
         path: path.resolve(__dirname, "dist"),
         library: "NarraleafReact",
         libraryTarget: "umd",