1berry/wokada-voice-changer
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add vctype in portrait and slot selector

Browse Source
This commit is contained in:
wataru 2023-06-25 17:33:08 +09:00
parent 73a96c654a
commit 21967880c4
4 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/demo/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

11
client/demo/src/components/demo/components2/100_ModelSlotArea.tsx
View File

@ -28,8 +28,15 @@ export const ModelSlotArea = (_props: ModelSlotAreaProps) => {
const tileContainerClass = index == serverSetting.serverSetting.modelSlotIndex ? "model-slot-tile-container-selected" : "model-slot-tile-container"
const name = x.name.length > 8 ? x.name.substring(0, 7) + "..." : x.name
const iconElem = x.iconFile.length > 0 ?
<img className="model-slot-tile-icon" src={x.iconFile} alt={x.name} /> :
<div className="model-slot-tile-icon-no-entry">no image</div>
<>
<img className="model-slot-tile-icon" src={x.iconFile} alt={x.name} />
<div className="model-slot-tile-vctype">{x.voiceChangerType}</div>
</>
:
<>
<div className="model-slot-tile-icon-no-entry">no image</div>
<div className="model-slot-tile-vctype">{x.voiceChangerType}</div>
</>
const clickAction = async () => {
const dummyModelSlotIndex = (Math.floor(Date.now() / 1000)) * 1000 + index

1
client/demo/src/components/demo/components2/101_CharacterArea.tsx
View File

@ -61,6 +61,7 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
<div className="portrait-container">
<img className="portrait" src={icon} alt={selected.name} />
<div className="portrait-area-status">
<p><span className="portrait-area-status-vctype">{selected.voiceChangerType}</span></p>
<p>vol: <span id="status-vol">0</span></p>
<p>buf: <span id="status-buf">0</span> ms</p>
<p>res: <span id="status-res">0</span> ms</p>

20
client/demo/src/css/App.css
View File

@ -1191,15 +1191,29 @@ body {
width: 5rem;
height: 5rem;
padding-top: 4px;
position: relative;
}
.model-slot-tile-icon {
width: 5rem;
height: 5rem;
object-fit: contain;
border-radius: 10px;
position: absolute;
}
.model-slot-tile-vctype {
position: absolute;
font-size: 0.6rem;
font-weight: 800;
top: 5px;
left: 2px;
background: RGBA(10, 200, 100, 0.6);
border-radius: 5px;
padding: 0px 2px 0px 2px;
}
.model-slot-tile-icon-no-entry {
color: gray;
position: absolute;
top: 2rem;
}
.model-slot-tile-dscription {
font-size: 0.7rem;
@ -1231,11 +1245,15 @@ body {
background: rgba(100, 100, 100, 0.5);
color: white;
position: absolute;
paddig: 2px;
padding: 0px 0px 0px 3px;
font-size: 0.7rem;
left: 5px;
top: 5px;
border-radius: 2px;
.portrait-area-status-vctype {
font-weight: 800;
color: #866;
}
}
.portrait-area-terms-of-use {
width: 5rem;