forked from PolarisPyra/daphnis
added segment tab view for chuni and added boilperplate css code for avatar customization
This commit is contained in:
Polaris
parent
1accfb6f62
commit
e557e55972
@ -1,9 +1,19 @@
|
||||
import ChunithmScorePlaylog from "@/components/scoreplaylog/page";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
||||
const ChunithmPage = () => {
|
||||
return (
|
||||
<div className="p-10">
|
||||
<ChunithmScorePlaylog />
|
||||
<Tabs defaultValue="account">
|
||||
<TabsList>
|
||||
<TabsTrigger value="scores">Scores</TabsTrigger>
|
||||
<TabsTrigger value="customize">Customize</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="scores">
|
||||
<ChunithmScorePlaylog />
|
||||
</TabsContent>
|
||||
<TabsContent value="customize">Change your password here.</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
268
app/globals.css
268
app/globals.css
@ -75,3 +75,271 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
g,
|
||||
video {
|
||||
max-width: revert;
|
||||
height: revert;
|
||||
}
|
||||
|
||||
.rainbow-text {
|
||||
background: linear-gradient(
|
||||
to left,
|
||||
violet,
|
||||
indigo,
|
||||
blue,
|
||||
green,
|
||||
yellow,
|
||||
orange,
|
||||
red
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
* CHUSAN AVATAR
|
||||
*/
|
||||
|
||||
.avatar_group {
|
||||
width: 420px;
|
||||
height: 330px;
|
||||
margin: 0px auto 0px auto;
|
||||
/* background-color: red; */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Mobile Styles */
|
||||
@media screen and (max-width: 480px) {
|
||||
.avatar_group {
|
||||
width: 100%; /* Adjust width for mobile */
|
||||
height: auto; /* Adjust height as needed */
|
||||
/* You can also adjust other properties as needed */
|
||||
}
|
||||
}
|
||||
/* アバター土台 */
|
||||
.avatar_base {
|
||||
width: 272px;
|
||||
height: 330px;
|
||||
padding: 10px 0 0 0;
|
||||
position: relative;
|
||||
margin: 0px auto 0px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 背景 */
|
||||
.avatar_back {
|
||||
display: block;
|
||||
width: 272px;
|
||||
height: 330px;
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* 右足 */
|
||||
.avatar_skinfoot_r {
|
||||
display: block;
|
||||
width: 42px;
|
||||
height: 52px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 101;
|
||||
top: 280px;
|
||||
left: 84px;
|
||||
}
|
||||
.avatar_skinfoot_r img {
|
||||
transform: translate(0px, -204px);
|
||||
}
|
||||
|
||||
/* 左足 */
|
||||
.avatar_skinfoot_l {
|
||||
display: block;
|
||||
width: 42px;
|
||||
height: 52px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 102;
|
||||
top: 280px;
|
||||
left: 147px;
|
||||
}
|
||||
.avatar_skinfoot_l img {
|
||||
transform: translate(-42px, -204px);
|
||||
}
|
||||
|
||||
/* デフォルト髪の毛 */
|
||||
.avatar_hair {
|
||||
display: block;
|
||||
width: 46px;
|
||||
height: 78px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 103;
|
||||
top: 21px;
|
||||
left: 110px;
|
||||
}
|
||||
.avatar_hair img {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
/* 体色 */
|
||||
.avatar_skin {
|
||||
display: block;
|
||||
width: 128px;
|
||||
height: 204px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 104;
|
||||
top: 93px;
|
||||
left: 72px;
|
||||
}
|
||||
.avatar_skin img {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
/* 衣装 */
|
||||
.avatar_wear {
|
||||
display: block;
|
||||
width: 258px;
|
||||
height: 218px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 105;
|
||||
top: 106px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.avatar_wear img {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
/* 表情 */
|
||||
.avatar_face {
|
||||
display: block;
|
||||
width: 58px;
|
||||
height: 64px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 106;
|
||||
top: 100px;
|
||||
left: 107px;
|
||||
}
|
||||
|
||||
.avatar_face img {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
/* 表情 */
|
||||
.avatar_face_static {
|
||||
display: block;
|
||||
width: 58px;
|
||||
height: 64px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 106;
|
||||
top: 100px;
|
||||
left: 107px;
|
||||
}
|
||||
|
||||
.avatar_face img {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
/* フェイスカバー */
|
||||
.avatar_face {
|
||||
display: block;
|
||||
width: 116px;
|
||||
height: 104px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 107;
|
||||
top: 96px;
|
||||
left: 78px;
|
||||
}
|
||||
|
||||
.avatar_faceCover img {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
/* 頭 */
|
||||
.avatar_head {
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 108;
|
||||
top: 28px;
|
||||
left: 37px;
|
||||
}
|
||||
|
||||
.avatar_head img {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
/* 右手 */
|
||||
.avatar_hand_r {
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 72px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 108;
|
||||
top: 178px;
|
||||
left: 52px;
|
||||
}
|
||||
|
||||
.avatar_hand_r img {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
/* 左手 */
|
||||
.avatar_hand_l {
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 72px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 109;
|
||||
top: 178px;
|
||||
left: 184px;
|
||||
}
|
||||
|
||||
.avatar_hand_l img {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
/* 右アイテム */
|
||||
.avatar_item_r {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 272px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 109;
|
||||
transform: rotate(-5deg);
|
||||
top: 50px;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.avatar_item_r img {
|
||||
transform: translate(0px, 0px);
|
||||
}
|
||||
|
||||
/* 左アイテム */
|
||||
.avatar_item_l {
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 272px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
z-index: 110;
|
||||
transform: rotate(5deg);
|
||||
top: 50px;
|
||||
left: 163px;
|
||||
}
|
||||
|
||||
.avatar_item_l img {
|
||||
transform: translate(-100px, 0px);
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@ import { ArrowUpDown, MoreHorizontalIcon } from "lucide-react";
|
||||
import { chuni_score_playlog } from "@/prisma/schemas/artemis/generated/artemis";
|
||||
import { chuni_static_music } from "@/prisma/schemas/artemis/generated/artemis";
|
||||
import { getGrade } from "@/lib/helpers";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
|
||||
type chunithm = chuni_score_playlog &
|
||||
chuni_static_music & { playCount: number };
|
||||
@ -30,9 +31,12 @@ export const columns: ColumnDef<chunithm>[] = [
|
||||
|
||||
cell: ({ row }) => {
|
||||
const jacketPath = row.original.jacketPath?.replace(".dds", ".png");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
return (
|
||||
<div className="font-medium w-[200px] truncate">
|
||||
{jacketPath && (
|
||||
<div className="font-medium w-[300px] truncate">
|
||||
{isLoading || !jacketPath ? (
|
||||
<Skeleton className="w-8 h-8 inline-block mr-2" />
|
||||
) : (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={`/jacketArt/${jacketPath}`}
|
||||
@ -40,7 +44,7 @@ export const columns: ColumnDef<chunithm>[] = [
|
||||
className="w-8 h-8 inline-block mr-2"
|
||||
/>
|
||||
)}
|
||||
{row.original.title}
|
||||
<div className="flex-1">{row.original.title}</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
@ -90,6 +90,8 @@
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.4",
|
||||
"postcss": "^8",
|
||||
"prettier": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.5",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.5.2"
|
||||
}
|
||||
|
||||
3
prettier.config.json
Normal file
3
prettier.config.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"plugins": ["prettier-plugin-tailwindcss"]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user