fix: 排行榜样式调整

This commit is contained in:
streakingman 2022-10-12 23:44:47 +08:00
parent a8a6312e2a
commit 639b1a3db1
3 changed files with 15 additions and 6 deletions

View File

@ -71,6 +71,10 @@
top: 0; top: 0;
background-color: gray; background-color: gray;
} }
td.username {
word-break: break-all;
}
} }
} }

View File

@ -98,7 +98,7 @@ const Score: FC<{
setTimeout(() => { setTimeout(() => {
const rankEl = document.getElementById(_userId + 'el'); const rankEl = document.getElementById(_userId + 'el');
rankEl?.scrollIntoView({ behavior: 'smooth' }); rankEl?.scrollIntoView({ behavior: 'smooth' });
}); }, 1000);
} }
}) })
.catch((e) => { .catch((e) => {
@ -107,7 +107,7 @@ const Score: FC<{
}; };
const onConfirmNameClick = () => { const onConfirmNameClick = () => {
const inputUsername = usernameInputRef.current?.value; const inputUsername = usernameInputRef.current?.value.trim();
if (!inputUsername) return; if (!inputUsername) return;
const newUserId = randomString(8); const newUserId = randomString(8);
setUsername(inputUsername); setUsername(inputUsername);
@ -174,7 +174,11 @@ const Score: FC<{
return ( return (
<div className={style.modal}> <div className={style.modal}>
<Suspense fallback={<span>fireworks</span>}> <Suspense
fallback={
<span style={{ position: 'absolute' }}>🎆fireworks🎆</span>
}
>
{success && <Fireworks />} {success && <Fireworks />}
</Suspense> </Suspense>
<div className={style.inner}> <div className={style.inner}>
@ -203,6 +207,7 @@ const Score: FC<{
<input <input
className={style.nameInput} className={style.nameInput}
ref={usernameInputRef} ref={usernameInputRef}
maxLength={12}
placeholder={'留下大名进行排行榜pk!'} placeholder={'留下大名进行排行榜pk!'}
/> />
<button <button
@ -236,7 +241,7 @@ const Score: FC<{
{rankList.map((rank, idx) => ( {rankList.map((rank, idx) => (
<tr <tr
key={idx} key={idx}
id={rank.userId} id={rank.userId + 'el'}
style={{ style={{
background: background:
rank.userId === userId rank.userId === userId
@ -245,7 +250,7 @@ const Score: FC<{
}} }}
> >
<td>{idx + 1}</td> <td>{idx + 1}</td>
<td> <td className={style.username}>
{rank.username} {rank.username}
{rank.userId === userId && {rank.userId === userId &&
'(你)'} '(你)'}

View File

@ -25,7 +25,7 @@ export const getDefaultTheme: () => Theme<DefaultSoundNames> = () => {
title: '有解的羊了个羊', title: '有解的羊了个羊',
desc: '真的可以通关~', desc: '真的可以通关~',
dark: true, dark: true,
maxLevel: 10, maxLevel: 20,
backgroundColor: '#8dac85', backgroundColor: '#8dac85',
icons: icons.map((icon) => ({ icons: icons.map((icon) => ({
name: icon, name: icon,