From 9751ba13a2e749a7df120fa06747cf8dc75d72b4 Mon Sep 17 00:00:00 2001 From: Icemic Date: Wed, 23 Oct 2024 11:51:50 +0800 Subject: [PATCH 01/15] First commit From b2854e881a50fb3cb5def21ae2698a7f74e6d7e4 Mon Sep 17 00:00:00 2001 From: Icemic Date: Tue, 29 Oct 2024 10:40:11 +0800 Subject: [PATCH 02/15] Adds files --- .editorconfig | 10 + .gitattributes | 4 + .gitignore | 17 + .yarnrc.yml | 3 + LICENSE.txt | 21 + README.md | 1 + biome.json | 36 + index.html | 14 + package.json | 29 + rspack.config.js | 79 + src/components/button.tsx | 205 ++ src/components/dialog-confirm.tsx | 89 + src/components/dialog.tsx | 122 + src/components/list-button.tsx | 87 + src/components/textwindow.tsx | 66 + src/configs/uititle.ts | 136 ++ src/constants.ts | 44 + src/hooks/useFadeInOut.ts | 88 + src/index.tsx | 208 ++ src/pages/entry.tsx | 44 + src/pages/mouse_touch.tsx | 77 + src/pages/nineslice.tsx | 83 + src/pages/position.tsx | 110 + src/pages/stage.tsx | 67 + src/pages/title.tsx | 109 + tsconfig.json | 23 + yarn.lock | 3565 +++++++++++++++++++++++++++++ 27 files changed, 5337 insertions(+) create mode 100644 .editorconfig create mode 100644 .gitattributes create mode 100644 .gitignore create mode 100644 .yarnrc.yml create mode 100644 LICENSE.txt create mode 100644 README.md create mode 100644 biome.json create mode 100644 index.html create mode 100644 package.json create mode 100644 rspack.config.js create mode 100644 src/components/button.tsx create mode 100644 src/components/dialog-confirm.tsx create mode 100644 src/components/dialog.tsx create mode 100644 src/components/list-button.tsx create mode 100644 src/components/textwindow.tsx create mode 100644 src/configs/uititle.ts create mode 100644 src/constants.ts create mode 100644 src/hooks/useFadeInOut.ts create mode 100644 src/index.tsx create mode 100644 src/pages/entry.tsx create mode 100644 src/pages/mouse_touch.tsx create mode 100644 src/pages/nineslice.tsx create mode 100644 src/pages/position.tsx create mode 100644 src/pages/stage.tsx create mode 100644 src/pages/title.tsx create mode 100644 tsconfig.json create mode 100644 yarn.lock diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..1ed453a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,10 @@ +root = true + +[*] +end_of_line = lf +insert_final_newline = true + +[*.{js,json,yml}] +charset = utf-8 +indent_style = space +indent_size = 2 diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..af3ad12 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,4 @@ +/.yarn/** linguist-vendored +/.yarn/releases/* binary +/.yarn/plugins/**/* binary +/.pnp.* binary linguist-generated diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4648340 --- /dev/null +++ b/.gitignore @@ -0,0 +1,17 @@ +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/sdks +!.yarn/versions + +# Swap the comments on the following lines if you wish to use zero-installs +# In that case, don't forget to run `yarn config set enableGlobalCache false`! +# Documentation here: https://yarnpkg.com/features/caching#zero-installs + +#!.yarn/cache +.pnp.* +/node_modules + + +/assets diff --git a/.yarnrc.yml b/.yarnrc.yml new file mode 100644 index 0000000..4553d9d --- /dev/null +++ b/.yarnrc.yml @@ -0,0 +1,3 @@ +enableTelemetry: false + +nodeLinker: node-modules diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..8ae5c6a --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024-present Icemic + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..7da35c7 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# doufu-template diff --git a/biome.json b/biome.json new file mode 100644 index 0000000..7ac7a7b --- /dev/null +++ b/biome.json @@ -0,0 +1,36 @@ +{ + "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", + "vcs": { + "enabled": false, + "clientKind": "git", + "useIgnoreFile": true + }, + "files": { + "ignoreUnknown": false, + "ignore": [] + }, + "formatter": { + "enabled": true, + "indentStyle": "space", + "indentWidth": 2, + "lineWidth": 120 + }, + "organizeImports": { + "enabled": true + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true, + "a11y": { + "all": false + } + } + }, + "javascript": { + "formatter": { + "quoteStyle": "single", + "jsxQuoteStyle": "double" + } + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..b8f8563 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + + HAI no DEMO + + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..b31ea73 --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "name": "doufu-template", + "version": "0.1.0", + "description": "Base library of Hai no Engine", + "main": "src/index.tsx", + "scripts": { + "dev": "rspack dev", + "build": "rspack build", + "lint": "eslint .", + "lint:fix": "eslint . --fix", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Icemic ", + "license": "MIT", + "dependencies": { + "react": "^18.2.0", + "react-error-boundary": "^4.0.12" + }, + "devDependencies": { + "@biomejs/biome": "1.9.4", + "@hai/lib": "portal:../hai/packages/lib", + "@rspack/cli": "^1.0.14", + "@rspack/core": "^1.0.14", + "@types/node": ">=20", + "@types/react": "^18.0.27", + "typescript": "^5.6.3" + }, + "packageManager": "yarn@4.5.1" +} diff --git a/rspack.config.js b/rspack.config.js new file mode 100644 index 0000000..e63c1fa --- /dev/null +++ b/rspack.config.js @@ -0,0 +1,79 @@ +const rspack = require('@rspack/core'); +// const refreshPlugin = require("@rspack/plugin-react-refresh"); +const isDev = process.env.NODE_ENV === 'development'; +/** + * @type {import('@rspack/cli').Configuration} + */ +module.exports = { + context: __dirname, + entry: { + demo: { + import: './src/index.tsx', + }, + }, + resolve: { + symlinks: false, + extensions: ['...', '.ts', '.tsx', '.jsx'], + }, + module: { + rules: [ + { + test: /\.svg$/, + type: 'asset', + }, + { + test: /\.(jsx?|tsx?)$/, + use: [ + { + loader: 'builtin:swc-loader', + options: { + sourceMap: true, + jsc: { + parser: { + syntax: 'typescript', + tsx: true, + }, + transform: { + react: { + runtime: 'automatic', + development: isDev, + refresh: false, + }, + }, + }, + env: { + targets: ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'], + }, + }, + }, + ], + }, + ], + }, + devServer: { + hot: false, + liveReload: false, + webSocketServer: false, + static: { + publicPath: '/', + directory: './', + }, + headers: { + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS', + 'Access-Control-Allow-Headers': + 'X-Requested-With, content-type, Authorization, cache-control, pragma, upgrade-insecure-requests, user-agent', + }, + compress: true, + }, + plugins: [ + new rspack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), + }), + // new rspack.ProgressPlugin({}), + // new rspack.HtmlRspackPlugin({ + // template: './index.html', + // }), + // isDev ? new refreshPlugin() : null + ].filter(Boolean), +}; diff --git a/src/components/button.tsx b/src/components/button.tsx new file mode 100644 index 0000000..9e1c651 --- /dev/null +++ b/src/components/button.tsx @@ -0,0 +1,205 @@ +import { type HaiEvent, type HaiNodeAttributes, animated, useSpring } from '@hai/lib'; +import React, { useState } from 'react'; + +export interface ButtonProps extends HaiNodeAttributes { + fileName: string | string[]; + label?: string; + animation?: boolean; + text?: string; + fontSize?: number; + color?: string | string[]; + mode?: 'normal' | 'nineslice'; + bounds?: [number, number, number, number]; + targetWidth?: number; + targetHeight?: number; + onClick?: (e: HaiEvent) => void; +} + +export function Button(props: ButtonProps) { + const { + fileName, + label, + animation = false, + text, + fontSize, + color, + onClick, + anchor, + tint, + mode, + bounds, + targetWidth, + targetHeight, + ...restProps + } = props; + + const [pressed, setPressed] = useState(false); + + const [springs, api] = useSpring(() => ({ + from: { + idle_opacity: 1, + hover_opacity: 0, + visible: true, + click_opacity: 0, + }, + })); + + const handleEnter = (evt: HaiEvent) => { + if (evt.targetId === evt.currentTargetId) { + evt.stopPropagation(); + return; + } + + api.start({ + to: { + idle_opacity: 0, + hover_opacity: 1, + click_opacity: +pressed, + visible: !pressed, + }, + immediate: !animation, + }); + }; + + const handleLeave = () => { + setPressed(false); + api.start({ + to: { + idle_opacity: 1, + hover_opacity: 0, + click_opacity: 0, + visible: true, + }, + immediate: !animation, + }); + }; + + const handleMouseDown = () => { + setPressed(true); + api.start({ + to: { + click_opacity: 1, + visible: false, + }, + immediate: !animation, + config: { + duration: 30, + }, + }); + }; + + const handleMouseUp = () => { + setPressed(false); + api.start({ + to: { + click_opacity: 0, + visible: true, + }, + immediate: !animation, + config: { + duration: 30, + }, + }); + }; + + const filenames = Array.isArray(fileName) + ? fileName + : [`${fileName}.png`, `${fileName}_hover.png`, `${fileName}_click.png`]; + + const colors = Array.isArray(color) ? color : [color, color, color]; + + return ( + + + {text && ( + + )} + + + {text && ( + + )} + + + {text && ( + + )} + + + ); +} diff --git a/src/components/dialog-confirm.tsx b/src/components/dialog-confirm.tsx new file mode 100644 index 0000000..bfef1a6 --- /dev/null +++ b/src/components/dialog-confirm.tsx @@ -0,0 +1,89 @@ +import { type HaiNodeAttributes, animated, useSpring, useTransition } from '@hai/lib'; +import React, { useEffect } from 'react'; +import { Button } from './button'; + +export interface DialogProps extends HaiNodeAttributes { + title: string; + content: string; + mode: 'alert' | 'confirm'; + show: boolean; + onConfirm?: (yes?: boolean) => void; +} + +export function Dialog(props: DialogProps) { + const { title, content, mode, show, onConfirm } = props; + + console.log('dialog show', show); + + const transitions = useTransition(show ? [0] : [], { + keys: (item) => item, + from: { + opacity: 0, + scale: 0.3, + }, + enter: { + opacity: 1, + scale: 1, + }, + leave: { + opacity: 0, + scale: 0.8, + }, + config: { + mass: 0.5, + tension: 280, + friction: 12, + }, + }); + + return transitions((style, _) => ( + + + + + {mode === 'confirm' && ( +