sigonasr2
/
projectdivar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update colors displayed around song frames for FC/PFCs

Browse Source
changes
sigonasr2 5 years ago
parent f2fa1aad51
commit e578f352cf
2 changed files with 60 additions and 31 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 25
      frontend/src/App.css
  2. 66
      frontend/src/App.js

25
frontend/src/App.css
Unescape View File

@ -23,6 +23,10 @@ badge-danger {exex}*/
top:-16px; top:-16px;
} }
.cursor:hover{
cursor:pointer;
}
.fadein{ .fadein{
animation-name: fadein; animation-name: fadein;
animation-duration: 1s; animation-duration: 1s;
@ -116,6 +120,27 @@ table th {
background-color:rgba(160,160,255,0.5); background-color:rgba(160,160,255,0.5);
} }
.fchighlight{
background: rgb(238,238,255);
background: linear-gradient(0deg, rgba(241,255,115,0) 0%, rgba(169,238,255,0.5) 25%, rgba(241,255,115,0) 100%);
}
.pfchighlight{
background: linear-gradient(0deg, rgba(241,255,115,0) 0%, rgba(255,230,180,0.5) 25%, rgba(241,255,115,0) 100%);
}
.pfc{
animation-name:colorchange;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;
}
@keyframes colorchange {
0% {background: rgba(160,18,18,1);}
100% {background: rgba(250,100,100,1);}
}
.tinytext{ .tinytext{
font-size:10px; font-size:10px;
/*z-index:-10000;*/ /*z-index:-10000;*/

66
frontend/src/App.js
Unescape View File

@ -337,41 +337,45 @@ function Play(p) {
return ( return (
<> <>
<div className="d-none d-md-block"> <div className="d-none d-md-block">
<div className={"row align-middle "+((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfc":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fc":"")}> <div className={((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfchighlight":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fchighlight":"")}>
<div className="col-md-2 order-1 order-md-1 text-center border-right align-middle text-nowrap overflow-hidden">{Math.floor(p.play.score)} pts<br/>{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}<Difficulty play={p.play} song={p.song}/></div> <div className={"row align-middle"}>
<div className="col-md-3 order-3 order-md-2 text-center border-right align-middle text-nowrap overflow-hidden">{GetDateDisplay()}</div> <div className="col-md-2 order-1 order-md-1 text-center border-right align-middle text-nowrap overflow-hidden">{Math.floor(p.play.score)} pts<br/>{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}<Difficulty play={p.play} song={p.song}/></div>
<div className="col-md-5 order-2 order-md-3"> <div className="col-md-3 order-3 order-md-2 text-center border-right align-middle text-nowrap overflow-hidden">{GetDateDisplay()}</div>
<div className="row"> <div className="col-md-5 order-2 order-md-3">
<div className="col-12 order-1 order-md-1 col-md-6 text-center"> <div className="row">
{p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst} <div className="col-12 order-1 order-md-1 col-md-6 text-center">
</div> {p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst}
<div className="col-6 order-3 order-md-2 col-md-3 text-left text-md-left"> </div>
{(p.play.mod!==null&&p.play.mod.length>0)? <div className="col-6 order-3 order-md-2 col-md-3 text-left text-md-left">
<ModDisplay side={true} badge={CalculateBadge(p.play.difficulty)} diff={GetModifiedDiff(p.play.difficulty)} {(p.play.mod!==null&&p.play.mod.length>0)?
hs={p.play.mod=="HS"?1:0} hd={p.play.mod=="HD"?1:0} sd={p.play.mod=="SD"?1:0}/> <ModDisplay side={true} badge={CalculateBadge(p.play.difficulty)} diff={GetModifiedDiff(p.play.difficulty)}
:<></> hs={p.play.mod=="HS"?1:0} hd={p.play.mod=="HD"?1:0} sd={p.play.mod=="SD"?1:0}/>
} :<></>
</div> }
<div className="col-6 order-2 order-md-3 col-md-3 text-right text-md-left"> </div>
<b>{p.play.percent}%</b> <div className="col-6 order-2 order-md-3 col-md-3 text-right text-md-left">
<b>{p.play.percent}%</b>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="d-block d-small d-md-none"> <div className="d-block d-small d-md-none">
{<div className="row"><div className="offset-4 col-4 text-center">{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}<Difficulty play={p.play} song={p.song}/></div></div>} <div className={((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfchighlight":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fchighlight":"")}>
<div className="row"> {<div className="row"><div className="offset-4 col-4 text-center">{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}<Difficulty play={p.play} song={p.song}/></div></div>}
<div className="offset-2 col-4 text-center"> <div className="row">
{Math.floor(p.play.score)} pts <div className="offset-2 col-4 text-center">
<br/> {Math.floor(p.play.score)} pts
{p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst} <br/>
</div> {p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst}
<div className="col-4 text-center"> </div>
<b>{p.play.percent}%</b> <ModDisplay side={true} badge={CalculateBadge(p.play.difficulty)} diff={GetModifiedDiff(p.play.difficulty)} <div className="col-4 text-center">
hs={p.play.mod=="HS"?1:0} hd={p.play.mod=="HD"?1:0} sd={p.play.mod=="SD"?1:0}/> <b>{p.play.percent}%</b> <ModDisplay side={true} badge={CalculateBadge(p.play.difficulty)} diff={GetModifiedDiff(p.play.difficulty)}
<br/> hs={p.play.mod=="HS"?1:0} hd={p.play.mod=="HD"?1:0} sd={p.play.mod=="SD"?1:0}/>
{GetDateDisplay(true)} <br/>
{GetDateDisplay(true)}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -381,7 +385,7 @@ function Play(p) {
} else { } else {
return ( return (
<> <>
<div className={"row align-middle "+((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfc":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fc":"")}> <div className={"row align-middle "+((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfchighlight":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fchighlight":"")}>
{(p.index!==undefined)?<div className=" col-md-1 text-center border-right align-middle text-nowrap overflow-hidden"><span className="d-none d-md-block">{p.index+1}</span>{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}</div>:<></>} {(p.index!==undefined)?<div className=" col-md-1 text-center border-right align-middle text-nowrap overflow-hidden"><span className="d-none d-md-block">{p.index+1}</span>{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}</div>:<></>}
<div className="col-md-3 text-center border-right align-middle text-nowrap overflow-hidden"><SongName song={p.song}/><span className="tinytime">{GetDateDiff()}</span></div> <div className="col-md-3 text-center border-right align-middle text-nowrap overflow-hidden"><SongName song={p.song}/><span className="tinytime">{GetDateDiff()}</span></div>
<div className="col-md-2 text-center border-right align-middle text-nowrap overflow-hidden">{Math.floor(p.play.score)} pts<br/><Difficulty play={p.play} song={p.song}/></div> <div className="col-md-2 text-center border-right align-middle text-nowrap overflow-hidden">{Math.floor(p.play.score)} pts<br/><Difficulty play={p.play} song={p.song}/></div>
@ -669,7 +673,7 @@ function HoverSongName(p) {
var [toggle,setToggle] = useState(false) var [toggle,setToggle] = useState(false)
return ( return (
<> <>
<tr key={p.song.id} className="lighthover" onClick={()=>{ <tr key={p.song.id} className="lighthover cursor" onClick={()=>{
if (!toggle) { if (!toggle) {
setExpand(<tr className="fadein"> setExpand(<tr className="fadein">
<td colSpan="6"><PlayData song={p.song} username={p.username}/></td> <td colSpan="6"><PlayData song={p.song} username={p.username}/></td>

Write Preview
Loading…
Cancel
Save