plutosdk 0.0.8-beta.1

package/lib/App.d.ts

@@ -0,0 +1,24 @@
+import { PureComponent } from 'react';
+import { PAGE_ID } from './utils/constant';
+/**
+ *
+ */
+export default class App extends PureComponent {
+    state: {
+        pageId: PAGE_ID;
+    };
+    /**
+     *
+     */
+    componentDidMount(): void;
+    /**
+     *
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+    /**
+     *
+     * @param _
+     * @param pageId
+     */
+    onSwitchPage: (_: string, pageId: PAGE_ID) => void;
+}

package/lib/App.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material';
+import PubSub from 'pubsub-js';
+import { EVENT_SWITCH_PAGE, PAGE_ID } from './utils/constant';
+import Index from './components/Index';
+import Login from './components/Login';
+import Purchase from './components/Purchase';
+//
+const Layout = styled(Box)(() => ({
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    position: 'fixed',
+    zIndex: 999,
+    left: 0,
+    top: 0
+}));
+/**
+ *
+ */
+export default class App extends PureComponent {
+    constructor() {
+        super(...arguments);
+        //
+        this.state = {
+            pageId: PAGE_ID.Index
+        };
+        /**
+         *
+         * @param _
+         * @param pageId
+         */
+        this.onSwitchPage = (_, pageId) => {
+            this.setState({ pageId });
+        };
+    }
+    /**
+     *
+     */
+    componentDidMount() {
+        PubSub.subscribe(EVENT_SWITCH_PAGE, this.onSwitchPage);
+    }
+    /**
+     *
+     */
+    render() {
+        const { pageId } = this.state;
+        switch (pageId) {
+            case PAGE_ID.Index:
+                return (_jsx(Layout, { children: _jsx(Index, {}) }));
+            case PAGE_ID.Login:
+                return (_jsx(Layout, { children: _jsx(Login, {}) }));
+            case PAGE_ID.Purchase:
+                return (_jsx(Layout, { children: _jsx(Purchase, {}) }));
+            default:
+                return null;
+        }
+    }
+}

package/lib/components/BlurMask/index.d.ts

@@ -0,0 +1,10 @@
+import { PureComponent } from 'react';
+/**
+ *
+ */
+export default class BlurMask extends PureComponent {
+    /**
+     *
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/lib/components/BlurMask/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+/**
+ *
+ */
+export default class BlurMask extends PureComponent {
+    /**
+     *
+     */
+    render() {
+        return (_jsx(Box, { sx: { width: '100%', height: '100%', position: 'absolute', left: 0, top: 0, background: 'rgba(0,0,0,0.4)', backgroundSize: "cover", backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)' } }));
+    }
+}

package/lib/components/CatAni/index.d.ts

@@ -0,0 +1,30 @@
+import { PureComponent } from 'react';
+/**
+ *
+ */
+export default class index extends PureComponent {
+    private _frameUrl;
+    private _totalFrame;
+    private _unmount;
+    private _timer;
+    state: {
+        resLoaded: boolean;
+        currentFrame: number;
+    };
+    /**
+     *
+     */
+    componentDidMount(): void;
+    /**
+     *
+     */
+    componentWillUnmount(): void;
+    /**
+     *
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+    /**
+     *
+     */
+    startAni: () => void;
+}

package/lib/components/CatAni/index.js

@@ -0,0 +1,243 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import { getRes } from '../../utils/Utils';
+//
+const CAT_BALL_FRAME = {
+    0: {
+        x: 0,
+        y: 0
+    },
+    1: {
+        x: -222,
+        y: 0
+    },
+    2: {
+        x: -444,
+        y: 0
+    },
+    3: {
+        x: -666,
+        y: 0
+    },
+    4: {
+        x: -888,
+        y: 0
+    },
+    5: {
+        x: 0,
+        y: -119
+    },
+    6: {
+        x: -222,
+        y: -119
+    },
+    7: {
+        x: -444,
+        y: -119
+    },
+    8: {
+        x: -666,
+        y: -119
+    },
+    9: {
+        x: -888,
+        y: -119
+    },
+    10: {
+        x: 0,
+        y: -238
+    },
+    11: {
+        x: -222,
+        y: -238
+    },
+    12: {
+        x: -444,
+        y: -238
+    },
+    13: {
+        x: -666,
+        y: -238
+    },
+    14: {
+        x: -888,
+        y: -238
+    },
+    15: {
+        x: 0,
+        y: -357
+    },
+    16: {
+        x: -222,
+        y: -357
+    },
+    17: {
+        x: -444,
+        y: -357
+    },
+    18: {
+        x: -666,
+        y: -357
+    },
+    19: {
+        x: -888,
+        y: -357
+    },
+    20: {
+        x: 0,
+        y: -476
+    },
+    21: {
+        x: 0,
+        y: -595
+    },
+    22: {
+        x: 0,
+        y: -714
+    },
+    23: {
+        x: 0,
+        y: -833
+    },
+    24: {
+        x: -222,
+        y: -476
+    },
+    25: {
+        x: -444,
+        y: -476
+    },
+    26: {
+        x: -666,
+        y: -476
+    },
+    27: {
+        x: -888,
+        y: -476
+    },
+    28: {
+        x: -222,
+        y: -595
+    },
+    29: {
+        x: -222,
+        y: -714
+    },
+    30: {
+        x: -222,
+        y: -833
+    },
+    31: {
+        x: -444,
+        y: -595
+    },
+    32: {
+        x: -666,
+        y: -595
+    },
+    33: {
+        x: -888,
+        y: -595
+    },
+    34: {
+        x: -444,
+        y: -714
+    },
+    35: {
+        x: -444,
+        y: -833
+    },
+    36: {
+        x: -666,
+        y: -714
+    },
+    37: {
+        x: -888,
+        y: -714
+    },
+    38: {
+        x: -666,
+        y: -833
+    },
+    39: {
+        x: -888,
+        y: -833
+    }
+};
+/**
+ *
+ */
+export default class index extends PureComponent {
+    constructor() {
+        super(...arguments);
+        //
+        this._frameUrl = `${getRes('cat_ball.png')}`;
+        //
+        this._totalFrame = Object.keys(CAT_BALL_FRAME).length;
+        //
+        this._unmount = false;
+        //
+        this._timer = null;
+        //
+        this.state = {
+            resLoaded: false,
+            currentFrame: 0
+        };
+        /**
+         *
+         */
+        this.startAni = () => {
+            if (this._unmount) {
+                return;
+            }
+            //
+            this._timer = window.setInterval(() => {
+                const { currentFrame } = this.state;
+                this.setState({
+                    currentFrame: (currentFrame + 1) % this._totalFrame
+                });
+            }, 80);
+        };
+    }
+    /**
+     *
+     */
+    componentDidMount() {
+        let image = new Image();
+        image.src = this._frameUrl;
+        image.onload = () => {
+            this.setState({
+                resLoaded: true
+            });
+            this.startAni();
+        };
+        image.onerror = () => {
+            console.log('image onerror');
+        };
+    }
+    /**
+     *
+     */
+    componentWillUnmount() {
+        this._unmount = true;
+        if (this._timer) {
+            window.clearInterval(this._timer);
+            this._timer = null;
+        }
+    }
+    /**
+     *
+     */
+    render() {
+        const { resLoaded, currentFrame } = this.state;
+        if (!resLoaded) {
+            return (_jsx(Box, { sx: { marginLeft: 8, height: 118 } }));
+        }
+        //
+        let pos = CAT_BALL_FRAME[currentFrame] || {};
+        let x = `${(pos.x) || 0}px`;
+        let y = `${(pos.y) || 0}px`;
+        return (_jsx(Box, Object.assign({ sx: { marginLeft: 8, height: 118 } }, { children: _jsx(Box, { sx: { width: 221, height: 118, backgroundImage: `url(${this._frameUrl})`, backgroundPosition: `${x} ${y}`, display: 'inline-block' } }) })));
+    }
+}

package/lib/components/GameInfo/index.d.ts

@@ -0,0 +1,10 @@
+import { PureComponent } from 'react';
+/**
+ *
+ */
+export default class GameInfo extends PureComponent {
+    /**
+     *
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/lib/components/GameInfo/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import { Avatar } from '@mui/material';
+import user from '../../utils/User';
+/**
+ *
+ */
+export default class GameInfo extends PureComponent {
+    /**
+     *
+     */
+    render() {
+        const { icon, name, describe } = user.gameInfo;
+        return (_jsxs(Box, Object.assign({ sx: { paddingBottom: 2 } }, { children: [_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', paddingTop: 2 } }, { children: [_jsx(Avatar, Object.assign({ src: icon, sx: { width: 60, height: 60 }, variant: 'square' }, { children: "G" })), _jsx(Box, Object.assign({ sx: { marginLeft: 1.4, fontSize: 22, fontWeight: 'bold', color: '#7c4b30' } }, { children: name }))] })), _jsx(Box, Object.assign({ sx: { textAlign: 'left', wordWrap: 'break-word', marginTop: 1, fontSize: 14, fontWeight: 800, color: '#ca996e' } }, { children: describe }))] })));
+    }
+}

package/lib/components/Index/index.d.ts

@@ -0,0 +1,10 @@
+import { PureComponent } from 'react';
+/**
+ *
+ */
+export default class index extends PureComponent {
+    /**
+     *
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/lib/components/Index/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import { getRes } from '../../utils/Utils';
+/**
+ *
+ */
+export default class index extends PureComponent {
+    /**
+     *
+     */
+    render() {
+        return (_jsx(Box, { sx: { width: '100%', height: '100%', position: 'relative', backgroundImage: `url(${getRes('bg1.png')})` } }));
+    }
+}

package/lib/components/Login/index.d.ts

@@ -0,0 +1,10 @@
+import { PureComponent } from 'react';
+/**
+ *
+ */
+export default class Login extends PureComponent {
+    /**
+     *
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/lib/components/Login/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material';
+import Zoom from '@mui/material/Zoom';
+import { getRes } from '../../utils/Utils';
+import GameInfo from '../GameInfo';
+import ShareButton from '../ShareButton';
+import PlayButton from '../PlayButton';
+import CatAni from '../CatAni';
+//
+const InfoLayout = styled(Box)(() => ({
+    width: '100%',
+    maxWidth: 430,
+    margin: '0 auto',
+    position: 'relative'
+}));
+/**
+ *
+ */
+export default class Login extends PureComponent {
+    /**
+     *
+     */
+    render() {
+        return (_jsxs(Box, Object.assign({ sx: { width: '100%', height: '100%', position: 'relative', backgroundImage: `url(${getRes('bg1.png')})` } }, { children: [_jsx(Box, { sx: { width: '100%', height: '100%', position: 'relative', backgroundImage: `url(${getRes('bg3.png')})` } }), _jsxs(Box, Object.assign({ sx: { width: '100%', top: '6%', textAlign: 'center', position: 'absolute' } }, { children: [_jsx(CatAni, {}), _jsx(Box, Object.assign({ sx: { fontSize: 24, fontWeight: 'bold', color: '#764428' } }, { children: "Catizen" })), _jsx(Box, Object.assign({ sx: { margin: '0 auto', width: 300, textAlign: 'center', wordWrap: 'break-word', fontSize: 18, fontWeight: 'bold', color: '#bc805e' } }, { children: "Where every game leads to an  airdrop adventure" }))] })), _jsx(Box, Object.assign({ sx: { width: '100%', bottom: 20, position: 'absolute' } }, { children: _jsx(Zoom, Object.assign({ in: true }, { children: _jsxs(Box, { children: [_jsxs(InfoLayout, { children: [_jsx(Box, { sx: { width: '100%', height: '100%', position: 'absolute', borderImage: `url(${getRes('bg2.png')})`, borderWidth: 40, borderStyle: 'solid', borderImageRepeat: 'repeat', borderImageSlice: '40 fill' } }), _jsxs(Box, Object.assign({ sx: { position: 'relative', paddingTop: 1, paddingRight: 4, paddingBottom: 4, paddingLeft: 4 } }, { children: [_jsx(GameInfo, {}), _jsx(ShareButton, {})] }))] }), _jsx(InfoLayout, Object.assign({ sx: { paddingTop: 2 } }, { children: _jsx(PlayButton, {}) }))] }) })) }))] })));
+    }
+}

package/lib/components/NetLoading/index.d.ts

@@ -0,0 +1,7 @@
+import { PureComponent } from 'react';
+/**
+ *
+ */
+export default class index extends PureComponent {
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/lib/components/NetLoading/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+/**
+ *
+ */
+export default class index extends PureComponent {
+    render() {
+        return (_jsx(Box, Object.assign({ sx: { top: 0, right: 0, bottom: 0, left: 0, zIndex: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'absolute' } }, { children: _jsxs(Box, Object.assign({ sx: { position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, { children: [_jsx(Box, { sx: { width: 120, height: 80, backgroundColor: '#424242', borderRadius: 2, opacity: 0.7 } }), _jsx(Box, Object.assign({ sx: { top: 0, right: 0, bottom: 0, left: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'absolute', color: '#fff' } }, { children: _jsx(CircularProgress, { color: "inherit" }) }))] })) })));
+    }
+}

package/lib/components/PayButton/index.d.ts

@@ -0,0 +1,16 @@
+import { MouseEventHandler, PureComponent } from 'react';
+interface IProps {
+    content: string;
+    icon: string;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+/**
+ *
+ */
+export default class index extends PureComponent<IProps> {
+    /**
+     *
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/lib/components/PayButton/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { getRes } from '../../utils/Utils';
+import StrokeText from '../StrokeText';
+/**
+ *
+ */
+export default class index extends PureComponent {
+    /**
+     *
+     */
+    render() {
+        const { content, icon, onClick } = this.props;
+        return (_jsx(Box, Object.assign({ sx: { height: 50, position: 'relative' } }, { children: _jsxs(Button, Object.assign({ sx: { width: '100%', height: '100%', borderRadius: 3 }, variant: 'contained', onClick: onClick }, { children: [_jsx(Box, { sx: { width: '100%', height: '100%', position: 'absolute', top: 0, borderImage: `url(${getRes('button_2.png')})`, borderWidth: 20, borderStyle: 'solid', borderImageRepeat: 'repeat', borderImageSlice: '20 fill' } }), _jsxs(Box, Object.assign({ sx: { height: '100%', position: 'absolute', top: 0, display: 'flex', alignItems: 'center' } }, { children: [_jsx(Box, { component: 'img', src: icon, sx: { width: 30, height: 30, marginRight: 1 } }), _jsx(StrokeText, { content: content, fontSize: 22, color: '#fff', strokeColor: '#4a7408', strokeWidth: 3 })] }))] })) })));
+    }
+}

package/lib/components/PlayButton/index.d.ts

@@ -0,0 +1,29 @@
+import { PureComponent } from 'react';
+/**
+ *
+ */
+export default class PlayButton extends PureComponent {
+    state: {
+        showPlay: boolean;
+    };
+    /**
+     *
+     */
+    componentDidMount(): void;
+    /**
+     *
+     */
+    componentWillUnmount(): void;
+    /**
+     *
+     */
+    render(): import("react/jsx-runtime").JSX.Element;
+    /**
+     *
+     */
+    onReady: (_: string, ready: boolean) => void;
+    /**
+     *
+     */
+    onClickPlay: () => void;
+}

package/lib/components/PlayButton/index.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PureComponent } from 'react';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import PubSub from 'pubsub-js';
+import { EVENT_GAME_READY, EVENT_SWITCH_PAGE, PAGE_ID } from '../../utils/constant';
+import { getRes } from '../../utils/Utils';
+import StrokeText from '../StrokeText';
+/**
+ *
+ */
+export default class PlayButton extends PureComponent {
+    constructor() {
+        super(...arguments);
+        //
+        this.state = {
+            showPlay: false
+        };
+        /**
+         *
+         */
+        this.onReady = (_, ready) => {
+            this.setState({ showPlay: ready });
+        };
+        /**
+         *
+         */
+        this.onClickPlay = () => {
+            PubSub.publish(EVENT_SWITCH_PAGE, PAGE_ID.None);
+        };
+    }
+    /**
+     *
+     */
+    componentDidMount() {
+        PubSub.subscribe(EVENT_GAME_READY, this.onReady);
+    }
+    /**
+     *
+     */
+    componentWillUnmount() {
+        PubSub.unsubscribe(this.onReady);
+    }
+    /**
+     *
+     */
+    render() {
+        const { showPlay } = this.state;
+        if (showPlay) {
+            return (_jsx(Box, Object.assign({ sx: { height: 50, position: 'relative' } }, { children: _jsx(Box, Object.assign({ sx: { left: 10, right: 10, height: '100%', position: 'absolute' } }, { children: _jsxs(Button, Object.assign({ sx: { width: '100%', height: '100%', borderRadius: 3 }, variant: 'contained', onClick: this.onClickPlay }, { children: [_jsx(Box, { sx: { width: '100%', height: '100%', position: 'absolute', top: 0, borderImage: `url(${getRes('button_1.png')})`, borderWidth: 20, borderStyle: 'solid', borderImageRepeat: 'repeat', borderImageSlice: '20 fill' } }), _jsx(Box, Object.assign({ sx: { height: '100%', position: 'absolute', top: 0, display: 'flex', alignItems: 'center' } }, { children: _jsx(StrokeText, { content: 'Play', fontSize: 22, color: '#fff', strokeColor: '#0e3772', strokeWidth: 3 }) }))] })) })) })));
+        }
+        //
+        return (_jsx(Box, Object.assign({ sx: { height: 50, position: 'relative' } }, { children: _jsxs(Box, Object.assign({ sx: { left: 10, right: 10, height: '100%', position: 'absolute', } }, { children: [_jsx(Box, { sx: { width: '100%', height: '100%', position: 'absolute', top: 0, borderImage: `url(${getRes('button_3.png')})`, borderWidth: 20, borderStyle: 'solid', borderImageRepeat: 'repeat', borderImageSlice: '20 fill' } }), _jsxs(Box, Object.assign({ sx: { width: '100%', height: 46, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'absolute' } }, { children: [_jsx(StrokeText, { content: 'Loading', fontSize: 22, color: '#fff', strokeColor: '#505151', strokeWidth: 3 }), _jsx(CircularProgress, { sx: { position: 'absolute', right: 20 }, color: "inherit", size: 28 })] }))] })) })));
+    }
+}