@ -336,7 +336,7 @@ function Play(p) {
if ( p . mini ) {
return (
< >
< div className = "d-none d-md-block" >
< div className = "d-none d-md-block below " >
< 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 align-middle" } >
< 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 < / s p a n > : ( p . p l a y . s a f e = = 0 & & p . p l a y . s a d = = 0 & & p . p l a y . w o r s t = = 0 ) ? < s p a n c l a s s N a m e = " b a d g e f c " > ★ F C < / s p a n > : < > < / > ) } < D i f f i c u l t y p l a y = { p . p l a y } s o n g = { p . s o n g } / > < / d i v >
@ -656,7 +656,7 @@ function PlayData(p) {
return (
< >
< div className = "text-center background-songs" >
< div className = "text-center background-songs below " >
< h5 > Individual Plays for { p . song . name } from { p . username } < / h 5 >
< div className = "border rounded" >
{ data . map ( ( play , i ) => < Play key = { i } play = { play } mini = { true } song = { p . song } / > ) }
@ -674,19 +674,21 @@ function HoverSongName(p) {
return (
< >
< tr key = { p . song . id } className = "lighthover cursor" onClick = { ( ) => {
if ( ! toggle ) {
setExpand ( < tr className = "fadein" >
< td colSpan = "6" > < PlayData song = { p . song } username = { p . username } / > < / t d >
< / t r > )
setToggle ( true )
} else {
setExpand ( < > < / > )
setToggle ( false )
if ( ( p . song . report . ecount + p . song . report . ncount + p . song . report . hcount + p . song . report . excount + p . song . report . exexcount > 0 ) ) {
if ( ! toggle ) {
setExpand ( < tr className = "fadein" >
< td colSpan = "6" > < PlayData song = { p . song } username = { p . username } / > < / t d >
< / t r > )
setToggle ( true )
} else {
setExpand ( < > < / > )
setToggle ( false )
}
}
}
} >
< td >
{ ( toggle ) ? < > ⯆ < />:<>⯈</ > } { name } < span className = "tinytext" > { ( p . song . romanized _name . length > 0 ) ? < > { ( p . song . romanized _name !== p . song . name ) ? < > { p . song . romanized _name } < />:<></ > } < />:<>{(p.song.english_name!==p.song.name)?<>{p.song.english_name}</ > : < > < />}</ > } < / s p a n >
< td className = "overflow-hidden" >
{ ( p . song . report . ecount + p . song . report . ncount + p . song . report . hcount + p . song . report . excount + p . song . report . exexcount > 0 ) ? ( ( toggle ) ? < > ⯆ < />:<>⯈</ > ) : < > < />} {name} <span className="tinytext">{(p.song.romanized_name.length>0)?<>{(p.song.romanized_name!==p.song.name)?<>{p.song.romanized_name}</ > : < > < />}</ > : < > { ( p . song . english _name !== p . song . name ) ? < > { p . song . english _name } < />:<></ > } < / > } < / s p a n >
< / t d >
< PlayDetail song = { p . song } / >
< / t r >
@ -697,6 +699,9 @@ function HoverSongName(p) {
function CompletionPanel ( p ) {
const [ report , setReport ] = useState ( [ ] )
const [ song , setSong ] = useState ( "" )
const [ filter , setFilter ] = useState ( { } )
const [ style , setStyle ] = useState ( true )
const [ update , setUpdate ] = useState ( false )
useEffect ( ( ) => {
axios . get ( "http://projectdivar.com/completionreport/" + p . username )
@ -706,35 +711,36 @@ function CompletionPanel(p) {
return (
< >
< SongSearch songs = { p . songs } song = { song } setSong = { setSong } setStyle = { setStyle } filteredSongs = { filter } setFilteredSongs = { setFilter } / >
< table className = "table table-sm" >
< thead >
< tr id = "headerbar" >
< th scope = "col" >
< th scope = "col" className = { ( style ) ? "scrollingHeader" : "" } >
Song Name
< / t h >
< th >
< th className = { ( style ) ? "scrollingHeader" : "" } >
Ranking
< / t h >
< th >
< th className = { ( style ) ? "scrollingHeader" : "" } >
Score
< / t h >
< th >
< th className = { ( style ) ? "scrollingHeader" : "" } >
%
< / t h >
< th >
< th className = { ( style ) ? "scrollingHeader" : "" } >
Play Count
< / t h >
< th >
< th className = { ( style ) ? "scrollingHeader" : "" } >
Mods
< / t h >
< / t r >
< / t h e a d >
< tbody >
{ report . map ( ( song , i ) => { return < HoverSongName song = { song } key = { song . id } username = { p . username } / >
{ report . filter ( ( report ) => Object . keys ( filter ) . length == 0 || report . id in filter ) . map ( ( song , i ) => { return < HoverSongName song = { song } key = { song . id } username = { p . username } / >
} ) }
< / t b o d y >
< tfoot >
< tr > < td colSpan = "8" id = "footer" >
< tr > < td colSpan = "8" id = "footer" className = { ( style ) ? "scrollingFooter" : "" } >
< span className = "badge badge-primary" > Easy < / s p a n > < s p a n c l a s s N a m e = " b a d g e b a d g e - i n f o " > N o r m a l < / s p a n > < s p a n c l a s s N a m e = " b a d g e b a d g e - s u c c e s s " > H a r d < / s p a n > < s p a n c l a s s N a m e = " b a d g e b a d g e - w a r n i n g " > E x t r e m e < / s p a n > < s p a n c l a s s N a m e = " b a d g e b a d g e - d a n g e r " > E x t r a E x t r e m e < / s p a n > < s p a n c l a s s N a m e = " b a d g e b a d g e - l i g h t " > ★ = F C < / s p a n > < s p a n c l a s s N a m e = " b a d g e b a d g e - l i g h t " > ✪ = P e r f e c t F C s < / s p a n >
< / t d > < / t r >
< / t f o o t >
@ -947,22 +953,53 @@ function ImageUpload(p) {
}
function SongSearch ( p ) {
//Requires: p.song / p.setSong
//Requires: p.songs / p.song / p.setSong / p.filteredSongs / p.setFilteredSongs
const [ song , setSong ] = useState ( "" )
const [ focused , setFocused ] = useState ( false )
useEffect ( ( ) => {
if ( p . setStyle ) {
if ( focused ) {
p . setStyle ( false )
} else {
p . setStyle ( true )
}
}
} , [ focused ] )
return (
< >
< input className = "form-control form-control-lg" value = { song } placeholder = { p . song } onFocus = { ( ) => { setFocused ( true ) } } onChange = { ( e ) => {
< input className = "form-control form-control-lg" value = { song } placeholder = { "🔍 Search by Song,Artist,Vocaloid" } onKeyDown = { ( e ) => { if ( e . key === "Enter" ) { setFocused ( false ) ; e . target . blur ( ) } } } onFocus = { ( ) => { setFocused ( true ) } } onChange = { ( e ) => {
if ( p . setFilteredSongs ) { p . setFilteredSongs ( { } ) }
setSong ( e . target . value )
}
} onBlur = { ( ) => {
setTimeout ( ( ) => { setFocused ( false ) } , 250 )
}
} / >
{ ( focused ) ?
< div className = "overflow-auto rounded-lg" style = { { background : "#eef" , position : "absolute" , width : "95%" , height : "240px" } } > { Object . keys ( p . songs ) . filter ( ( key ) =>
< div className = "overflow-auto rounded-lg" style = { { background : "#eef" , position : "absolute" , width : "95%" , height : "240px" } } > {
Object . keys ( p . songs ) . filter ( ( key ) =>
{
var s = p . songs [ key ]
return s . name . toLowerCase ( ) . includes ( song . toLowerCase ( ) ) || s . romanized _name . toLowerCase ( ) . includes ( song . toLowerCase ( ) ) || s . english _name . toLowerCase ( ) . includes ( song . toLowerCase ( ) ) || s . artist . toLowerCase ( ) . includes ( song . toLowerCase ( ) ) || s . vocaloid . toLowerCase ( ) . includes ( song . toLowerCase ( ) )
} ) . map ( ( key ) => < div className = "pb-1 homelink" onClick = { ( ) => { setSong ( p . songs [ key ] . name ) ; setFocused ( false ) } } > < h4 > { p . songs [ key ] . name } < / h 4 > { ( p . s o n g s [ k e y ] . r o m a n i z e d _ n a m e ) ? p . s o n g s [ k e y ] . r o m a n i z e d _ n a m e : p . s o n g s [ k e y ] . e n g l i s h _ n a m e } < / d i v > ) } < / d i v > : < > < / > }
} ) . map ( ( key ) => {
if ( p . setFilteredSongs && p . filteredSongs ) {
var obj = p . filteredSongs ;
obj [ key ] = true
//console.log(obj)
p . setFilteredSongs ( obj )
}
return < div key = { key } className = "pb-1 homelink highest" onClick = { ( ) => { setSong ( p . songs [ key ] . name ) ; p . setSong ( p . songs [ key ] . name ) ; setFocused ( false ) ; if ( p . setFilteredSongs && p . filteredSongs ) { var obj = { } ; obj [ key ] = true ; p . setFilteredSongs ( obj ) } } } >
< div className = "d-flex flex-row" >
< div className = "p-2" >
< img className = "centered" src = { p . songs [ key ] . album _art . replace ( "album_art" , "album_art/small" ) } / >
< / d i v >
< div className = "p-8" >
< h4 > { p . songs [ key ] . name } < / h 4 > { ( p . s o n g s [ k e y ] . r o m a n i z e d _ n a m e ) ? p . s o n g s [ k e y ] . r o m a n i z e d _ n a m e : p . s o n g s [ k e y ] . e n g l i s h _ n a m e }
< / d i v >
< / d i v >
< / d i v > } ) } < / d i v > : < > < / > }
More stuff goes here .
< / >
@ -1001,19 +1038,9 @@ function Submit(p) {
< div className = "card" >
< Link to = "/submitplay/simple" className = "nostyle" >
< div className = "card-body" >
< h5 className = "card-title" > Simple Submit < / h 5 >
< h5 className = "card-title" > Manual Submit < / h 5 >
< p className = "card-text" > Submit your plays by entering the clear % of a song < / p >
< p className = "card-text" > < small className = "text-muted" > The simplest way to submit plays , it won ' t be entirely accurate , but it lets you submit plays very quickly . < / s m a l l > < / p >
< / d i v >
< / L i n k >
< / d i v >
< br / >
< div className = "card" >
< Link to = "/submitplay/detail" className = "nostyle" >
< div className = "card-body" >
< h5 className = "card-title" > Detailed Submit < / h 5 >
< p className = "card-text" > Submit your plays by entering all the information about a play < / p >
< p className = "card-text" > < small className = "text-muted" > You can submit as many songs as you like , but you will have to provide details for each play . < / s m a l l > < / p >
< p className = "card-text" > < small className = "text-muted" > The simplest way to submit plays , type in a % , tweak the other values quickly , then submit your play ! Optionally include a screenshot . < / s m a l l > < / p >
< / d i v >
< / L i n k >
< / d i v >
