refactor: format index.html and refactor load IIFE plugin #745
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @boomwwww, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request focuses on enhancing the maintainability and structure of the WebGAL project by refactoring its core index.html file. The primary goals are to improve code organization by separating inline styles into a dedicated style block and to centralize the loading mechanism for third-party IIFE plugins into a new, dedicated JavaScript file. These changes aim to make the project easier to understand, modify, and extend, particularly for game developers integrating external libraries.
Highlights
- HTML Structure & Styling Refactor: Moved inline CSS styles from various
<body>elements inindex.htmlinto a new, centralized<style>block within the<head>. This significantly improves the HTML document's readability and separation of concerns. - Centralized IIFE Plugin Loading: Refactored the loading of third-party IIFE (Immediately Invoked Function Expression) plugins, such as the Live2D SDK, by moving the associated JavaScript logic from
index.htmlinto a new dedicated file:public/lib/index.js. This creates a cleanerindex.htmland a more organized approach for managing external plugins. - Build Process Update: Updated the
release-to-terre.shdeployment script to ensure that the newly introducedlibdirectory, which now houses the centralized plugin loading logic, is correctly copied to the targetWebGAL_Terreassets template during the build process.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments or fill out our survey to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request refactors the index.html file by moving inline CSS to an internal stylesheet and extracting the IIFE plugin loading logic into a new file (public/lib/index.js). The review suggests declaring ebg outside the if block, using console.error for error logging in the plugin loader, and ensuring the IIFE plugin loading script is placed before the main script tag.
| let transform = ''; | ||
| let ebgTransform = ''; | ||
| const root = document.getElementById('root'); // 获取根元素 | ||
| const title = document.getElementById('Title_enter_page'); | ||
| const ebg = document.getElementById('ebg'); |
There was a problem hiding this comment.
The ebg variable is declared using const within the if (w > h) block, but it's also used outside this block. To avoid potential issues when w <= h, it's better to declare ebg outside the if block's scope. This ensures ebg is always defined, even if the condition is false, preventing possible runtime errors.
| const ebg = document.getElementById('ebg'); | |
| let ebg; | |
| if (w > h) { |
packages/webgal/public/lib/index.js
Outdated
| await loadScript(pluginPath); | ||
| return true; | ||
| } catch (error) { | ||
| console.log(error); |
There was a problem hiding this comment.
Consider using console.error(error) instead of console.log(error) to indicate that an error occurred during the loading of the IIFE plugin. This will help in differentiating error messages from regular log messages in the console.
console.error(error);| } | ||
| </script> | ||
| <!-- 加载IIFE插件 --> | ||
| <script type="module" src="/lib/index.js"></script> |
There was a problem hiding this comment.
Moving the IIFE plugin loading script tag before the main script tag ensures that the plugins are loaded and initialized before the main application logic starts. This can prevent potential issues where the main application depends on the plugins being available.
</script>
<!-- 加载IIFE插件 -->
<script type="module" src="/lib/index.js"></script>
<script type="module" src="/src/main.tsx"></script>
调整代码结构
index.html文件中的样式由内联样式改为内部样式，现在<body>中的标签嵌套结构更加清晰index.html文件中导入第三方插件的代码移动到了public/lib/index.js文件中index.html文件中导入第三方插件的<script>标签，移动到，导入main的<script>标签之前，其他<script>标签之后release-to-terre.sh中追加内容cp -r dist/lib ../../../WebGAL_Terre/packages/terre2/assets/templates/WebGAL_Template，确保lib文件夹被正确复制为什么要这样做？
public/lib/index.js文件中的内容public/lib/index.js文件的同时向public/lib/文件夹下添加新文件public/lib/index.js文件中保留了原有的导入第三方插件的逻辑，游戏开发者不需要更改以前的操作方式（将插件文件放在public/lib/目录下）