Skip to content
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/parser/src/config/scriptConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export const SCRIPT_CONFIG = [
{ scriptString: 'applyStyle', scriptType: commandType.applyStyle },
{ scriptString: 'wait', scriptType: commandType.wait },
{ scriptString: 'callSteam', scriptType: commandType.callSteam },
{ scriptString: 'setStatusBar', scriptType: commandType.setStatusBar },
Comment thread
SoraStr marked this conversation as resolved.
];
export const ADD_NEXT_ARG_LIST = [
commandType.bgm,
Expand Down
1 change: 1 addition & 0 deletions packages/parser/src/interface/sceneInterface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export enum commandType {
applyStyle,
wait,
callSteam, // 调用Steam功能
setStatusBar, // 设置顶部状态框
}

/**
Expand Down
2 changes: 2 additions & 0 deletions packages/webgal/public/game/scene/demo_zh_cn.txt
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
bgm:s_Title.mp3 -volume=80 -enter=3000;
unlockBgm:s_Title.mp3 -name=雲を追いかけて;
intro:你好|欢迎来到 {egine} 的世界;
setStatusBar:Chapter 0 欢迎来到 {egine};
changeBg:WebGalEnter.webp -next;
setTransition: -target=bg-main -exit=shockwaveOut;
:你好|欢迎来到 {egine} 的世界;
Expand All @@ -23,6 +24,7 @@ pixiPerform:snow;
比如,这个下起小雪的特效。 -v6.wav;
除此以外,分支选择的功能也必不可少。 -v7.wav;
pixiInit;
setStatusBar:none;
WebGAL:接下来介绍一些新版本功能!
WebGAL:比如这个[注](zhù)[音](yīn)功能,可以为游戏带来更好的体验!
WebGAL:我们也支持了[文本拓展语法](style=color:#B5495B\;),可以为[文](wen)[本](ben)带来[富文本支持](style-alltext=font-style:italic\; style=color:#66327C\;)、交互等特性。
Expand Down
2 changes: 2 additions & 0 deletions packages/webgal/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Menu from '@/UI/Menu/Menu';
import GlobalDialog from '@/UI/GlobalDialog/GlobalDialog';
import PanicOverlay from '@/UI/PanicOverlay/PanicOverlay';
import DevPanel from '@/UI/DevPanel/DevPanel';
import { StatusBar } from '@/UI/StatusBar/StatusBar';

export default function App() {
useEffect(() => {
Expand All @@ -31,6 +32,7 @@ export default function App() {
<GlobalDialog />
<PanicOverlay />
<DevPanel />
<StatusBar />
</div>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export enum commandType {
applyStyle,
wait,
callSteam, // 调用Steam功能
setStatusBar, // 设置顶部状态框
}

/**
Expand Down
2 changes: 2 additions & 0 deletions packages/webgal/src/Core/parser/sceneParser.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import { showVars } from '../gameScripts/showVars';
import { defineScripts, IConfigInterface, ScriptConfig, ScriptFunction, scriptRegistry } from './utils';
import { applyStyle } from '@/Core/gameScripts/applyStyle';
import { wait } from '@/Core/gameScripts/wait';
import { setStatusBar } from '@/Core/gameScripts/setStatusBar';
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

请确认是否有提交该文件


export const SCRIPT_TAG_MAP = defineScripts({
say: ScriptConfig(commandType.say, say),
Expand Down Expand Up @@ -74,6 +75,7 @@ export const SCRIPT_TAG_MAP = defineScripts({
applyStyle: ScriptConfig(commandType.applyStyle, applyStyle, { next: true }),
wait: ScriptConfig(commandType.wait, wait),
callSteam: ScriptConfig(commandType.callSteam, callSteam, { next: true }),
setStatusBar: ScriptConfig(commandType.setStatusBar, setStatusBar, { next: true }),
});

export const SCRIPT_CONFIG: IConfigInterface[] = Object.values(SCRIPT_TAG_MAP);
Expand Down
27 changes: 27 additions & 0 deletions packages/webgal/src/UI/StatusBar/StatusBar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.status-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10vh;
min-height: 50px;
Comment on lines +6 to +7
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

状态栏高度设置为 10vh(在 1080p 屏幕上约为 108px),对于一个仅显示单行文本的状态栏来说可能占据了过多的垂直空间。建议考虑减小高度,例如使用固定的像素值或更小的 vh 值。

background: linear-gradient(180deg, rgba(200, 220, 240, 0.85) 0%, rgba(180, 200, 230, 0.75) 100%);
z-index: 8;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
user-select: none;
}

.status-bar-content {
color: #2c3e50;
font-size: 3rem;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

font-size: 3rem 对于状态栏文本来说可能过大,通常状态栏建议使用较小的字体以保持界面简洁。建议将其调整为更合适的尺寸,例如 1.2rem1.5rem 之间。

Suggested change
font-size: 3rem;
font-size: 1.5rem;

font-weight: 500;
text-align: center;
padding: 0 20px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
21 changes: 21 additions & 0 deletions packages/webgal/src/UI/StatusBar/StatusBar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { useSelector } from 'react-redux';
import { RootState } from '@/store/store';
import './StatusBar.scss';

export function StatusBar() {
const statusBarText = useSelector((state: RootState) => state.stage.statusBarText);
const showTitle = useSelector((state: RootState) => state.GUI.showTitle);
const showMenuPanel = useSelector((state: RootState) => state.GUI.showMenuPanel);
const showExtra = useSelector((state: RootState) => state.GUI.showExtra);

// 在标题、菜单、鉴赏模式时不显示状态框
if (showTitle || showMenuPanel || showExtra || !statusBarText) {
return null;
}

return (
<div className="status-bar">
<div className="status-bar-content">{statusBarText}</div>
</div>
);
}
1 change: 1 addition & 0 deletions packages/webgal/src/store/stageInterface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -237,6 +237,7 @@ export interface IStageState {
isDisableTextbox: boolean;
replacedUIlable: Record<string, string>;
figureMetaData: figureMetaData;
statusBarText: string; // 顶部状态框文本
}

/**
Expand Down
1 change: 1 addition & 0 deletions packages/webgal/src/store/stageReducer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export const initState: IStageState = {
isDisableTextbox: false,
replacedUIlable: {},
figureMetaData: {},
statusBarText: '',
};

/**
Expand Down