修改UI按钮及动画

testitok · Oct 25, 2021 · f63edb4 · f63edb4
1 parent 1db6761
commit f63edb4
Show file tree

Hide file tree

Showing 6 changed files with 11,607 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@icon-park/react": "^1.3.5",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",

diff --git a/public/Static_CSS/main.css b/public/Static_CSS/main.css
@@ -89,17 +89,44 @@
 }
 
 .controlButton{
-    border-bottom: 3px solid #FEDFE1;
+    /*border-bottom: 3px solid #FEDFE1;*/
     /*background-color: #FEDFE1;*/
     padding: 3px 7px 3px 7px;
-    margin: 0 5px 0 5px;
+    margin: 0 10px 0 10px;
     /*border-radius: 5px;*/
     color: #f5f5f7;
     text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
+    border-radius: 8px;
+    -webkit-animation: controlButtonHoverBack 0.5s;
 }
 .controlButton:hover{
-    background-color: rgba(0,0,0,0.3);
+    -webkit-animation: controlButtonHover 0.5s;
+    background-color: rgba(255,255,255,0.25);
+    box-shadow: 5px 5px 15px rgba(0,0,0,0.65);
+}
+
+@-webkit-keyframes controlButtonHover {
+    from{
+        background-color: rgba(0,0,0,0);
+        box-shadow: none;
+    }
+    to{
+        background-color: rgba(255,255,255,0.25);
+        box-shadow: 5px 5px 15px rgba(0,0,0,0.65);
+    }
 }
+
+@-webkit-keyframes controlButtonHoverBack {
+    from{
+        background-color: rgba(255,255,255,0.25);
+        box-shadow: 5px 5px 15px rgba(0,0,0,0.65);
+    }
+    to{
+
+    }
+}
+
+
 .singleWord{
     -webkit-animation: showSoftly 0.5s;
 }
@@ -159,24 +186,27 @@
 }
 
 #TitleModel{
+    padding: 60px 0 0 0 ;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     /*width: 100vw;*/
     /*height: 13%;*/
-    background-color: rgba(0,0,0,0.6);
-    /*background-image: linear-gradient(rgba(255,255,255,1) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0)100%);*/
+    /*background-color: rgba(255,255,255,0.3);*/
+    background-image: linear-gradient(rgba(255,255,255,0) 0%,rgba(255,255,255,0.35) 50%,rgba(255,255,255,0.5)100%);
     z-index: 12;
 }
 
 .TitleSingleButton{
+    font-family: Georgia;
+    /*font-weight: bold;*/
     padding: 10px 10px 10px 10px;
-    text-shadow: 2px 2px 8px rgba(255,255,255,0.5);
+    text-shadow: 0 0 5px rgba(255,255,255,1);
     margin: 0 0 20px 0;
-    border-left: 2px solid #FEDFE1;
+    border-left: 2px solid #8E354A;
     /*background-color: #f5f5f7;*/
-    color: #f5f5f7;
+    color: #8E354A;
     width: 15%;
     text-align: center;
     -webkit-animation: TitleButtonNoneChoose 0.75s;
@@ -413,6 +443,12 @@ a:visited{
     font-size: 85%;
 }
 
+.backlog_interact_button:hover{
+    background:  #8E354A;
+    /*color: #8E354A;*/
+    border: 1px solid #FEDFE1;
+}
+
 .vocalIcon{
     padding: 2px 0 0 0;
     height: 25px;
@@ -425,11 +461,7 @@ a:visited{
     width: 22px;
 }
 
-.backlog_interact_button:hover{
-    /*background: #FEDFE1;*/
-    /*color: #8E354A;*/
-    border: 1px solid #8E354A;
-}
+
 
 .backlog_singleElement:hover{
     /*background-color: rgba(255,255,255,0.2);*/

diff --git a/src/Components/Stage/mainStage.js b/src/Components/Stage/mainStage.js
@@ -17,6 +17,17 @@ import closeB from "../../assests/img/closeBlack.svg"
 import closeW from "../../assests/img/closeWhite.svg"
 import up from "../../assests/img/up.svg";
 import cross from "../../assests/img/cross.svg";
+import '@icon-park/react/styles/index.css';
+import {
+    DoubleRight,
+    FolderDownload,
+    FolderUpload,
+    Home,
+    PlayOne,
+    ReplayMusic,
+    Save,
+    SettingTwo
+} from "@icon-park/react";
 
 window.onload = function () {
     loadCookie();
@@ -33,11 +44,11 @@ function Stage() {
             <div id="Title">
                 <div id="TitleModel">
                     <div id="setButtonBottom">
-                        <div className="TitleSingleButton" id="leftTitleButton" onClick={userInteract.hideTitle}>开始游戏</div>
-                        <div className="TitleSingleButton" onClick={userInteract.continueGame}>继续游戏</div>
-                        <div className="TitleSingleButton" onClick={userInteract.onLoadGame}>读取存档</div>
-                        <div className="TitleSingleButton" onClick={userInteract.onSetting}>设置界面</div>
-                        <div className="TitleSingleButton" onClick={userInteract.exit}>退出游戏</div>
+                        <div className="TitleSingleButton" id="leftTitleButton" onClick={userInteract.hideTitle}>START</div>
+                        <div className="TitleSingleButton" onClick={userInteract.continueGame}>CONTINUE</div>
+                        <div className="TitleSingleButton" onClick={userInteract.onLoadGame}>LOAD</div>
+                        <div className="TitleSingleButton" onClick={userInteract.onSetting}>CONFIG</div>
+                        <div className="TitleSingleButton" onClick={userInteract.exit}>EXIT</div>
                     </div>
 
                 </div>
@@ -105,13 +116,27 @@ function Stage() {
                     <div id="SceneText"/>
                 </div>
                 <div id="controlBar">
-                    <div className="controlButton" onClick={WG_ViewControl.playVocal}>重播</div>
-                    <div className="controlButton" onClick={userInteract.autoNext} id="autoButton">自动</div>
-                    <div className="controlButton" onClick={userInteract.fastNext} id="fastButton">快进</div>
-                    <div className="controlButton" onClick={userInteract.onSaveGame} id="saveButton">存档</div>
-                    <div className="controlButton" onClick={userInteract.onLoadGame} id="loadButton">读档</div>
-                    <div className="controlButton" onClick={userInteract.onSetting}>设置</div>
-                    <div className="controlButton" onClick={userInteract.Title} id="titleButton">标题</div>
+                    <div className="controlButton" onClick={WG_ViewControl.playVocal}>
+                        <ReplayMusic theme="outline" size="28" fill="#f5f5f7"/>
+                    </div>
+                    <div className="controlButton" onClick={userInteract.autoNext} id="autoButton">
+                        <PlayOne theme="outline" size="28" fill="#f5f5f7"/>
+                    </div>
+                    <div className="controlButton" onClick={userInteract.fastNext} id="fastButton">
+                        <DoubleRight theme="outline" size="28" fill="#f5f5f7"/>
+                    </div>
+                    <div className="controlButton" onClick={userInteract.onSaveGame} id="saveButton">
+                        <FolderDownload theme="outline" size="28" fill="#f5f5f7"/>
+                    </div>
+                    <div className="controlButton" onClick={userInteract.onLoadGame} id="loadButton">
+                        <FolderUpload theme="outline" size="28" fill="#f5f5f7"/>
+                    </div>
+                    <div className="controlButton" onClick={userInteract.onSetting}>
+                        <SettingTwo theme="outline" size="28" fill="#f5f5f7"/>
+                    </div>
+                    <div className="controlButton" onClick={userInteract.Title} id="titleButton">
+                        <Home theme="outline" size="28" fill="#f5f5f7"/>
+                    </div>
                 </div>
             </div>
             <div id="bgm"/>

diff --git a/src/Core/InteractController/UserInteract.js b/src/Core/InteractController/UserInteract.js
@@ -125,7 +125,7 @@ class userInteract {
             getScene("game/scene/start.txt");
             getStatus("all")["SceneName"] = 'start.txt';
         }
-        WG_ViewControl.loadButton();
+        // WG_ViewControl.loadButton();
     }
 
 // 分支选择（请求getScene）
@@ -286,7 +286,7 @@ class userInteract {
             getStatus("all")["SceneName"] = 'start.txt';
         }
         document.getElementById('Title').style.display = 'none';
-        WG_ViewControl.loadButton();
+        // WG_ViewControl.loadButton();
     }
 
 // 关闭存档界面

diff --git a/src/Core/ViewController/ViewControl.js b/src/Core/ViewController/ViewControl.js
@@ -16,6 +16,8 @@ import {nextSentenceProcessor} from "../WG_core";
 import React from "react";
 import returnIcon from "../../assests/img/return.svg";
 import vocalIcon from "../../assests/img/vocal.svg"
+import {Return, VolumeNotice} from "@icon-park/react";
+import '@icon-park/react/styles/index.css';
 
 class WG_ViewControl {
     static VC_changeBG(bg_name){
@@ -278,15 +280,27 @@ class WG_ViewControl {
         document.getElementById('bottomBox').style.display = 'none';
         let showBacklogList = [];
         for (let i = 0 ; i<getRuntime().CurrentBacklog.length ; i++){
-            let temp = <div className={'backlog_singleElement'} key={i} onClick={()=>{
-                // userInteract.jumpFromBacklog(i);
-            }}>
+            let temp = <div className={'backlog_singleElement'} key={i}>
                 <div className={"backlog_interact"}>
-                    <div className={"backlog_interact_button"}>
-                        <img src={vocalIcon} alt={"vi"} className={"vocalIcon"}/>
+                    <div className={"backlog_interact_button"} onClick={()=>{
+                        let vocalName = getRuntime().CurrentBacklog[i].vocal;
+                        if(vocalName !== ''){
+                            let url = './game/vocal/'+vocalName;
+                            let elementAudio = <audio src={url} id={"backlogVocalAudio-"+i} />
+                            console.log("Playing! now url is"+url);
+                            ReactDOM.render(elementAudio,document.getElementById("backlogVocal-"+i));
+                            let singleControlBacklogAudio = document.getElementById("backlogVocalAudio-"+i);
+                            singleControlBacklogAudio.oncanplay = function (){
+                                singleControlBacklogAudio.play();
+                            }
+                        }
+                    }}>
+                        <VolumeNotice theme="outline" size="24" fill="#f5f5f7"/>
                     </div>
-                    <div className={"backlog_interact_button"}>
-                        <img src={returnIcon} alt={"ri"} className={"returnIcon"}/>
+                    <div className={"backlog_interact_button"} onClick={()=>{
+                        userInteract.jumpFromBacklog(i);
+                    }}>
+                        <Return theme="outline" size="24" fill="#f5f5f7"/>
                     </div>
                 </div>
                 <div className={"backlog_name"}>{getRuntime().CurrentBacklog[i].showName}</div>
@@ -295,7 +309,9 @@ class WG_ViewControl {
 
                     <div className={"backlog_text"}>{getRuntime().CurrentBacklog[i].showText}</div>
                 </div>
+                <div id={"backlogVocal-"+i}>
 
+                </div>
             </div>
             showBacklogList.push(temp)
         }