chore'
This commit is contained in:
Ra-Liz
parent
cd62ab6c9d
commit
0b93ccd0a5
@ -218,19 +218,26 @@ export default function Home() {
|
||||
}, []);
|
||||
|
||||
// 换肤/换背景相关
|
||||
const [skinOpen, setSkinOpen] = useState(false);
|
||||
const [bgOpen, setBgOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<main className="w-full h-full bg-blue-200">
|
||||
// TODO: 背景状态
|
||||
<main className="w-full h-full bg-[url('http://picdown.jchysoft.com/live2d/beijing/bj1%20%281%29.webp')] bg-center bg-cover">
|
||||
{typeof window !== "undefined" &&
|
||||
typeof window.Live2DCubismCore !== "undefined" && (
|
||||
<div className="flex w-full flex-col h-full items-center justify-center relative text-white">
|
||||
{/* live2d */}
|
||||
{/* TODO: live2d模型状态 */}
|
||||
<canvas className="w-full " id="canvas"></canvas>
|
||||
|
||||
{/* 角色信息 */}
|
||||
<div className="absolute left-[4vw] top-8 bg-gradient-to-r from-start-color to-end-color rounded-full w-[36vw] h-auto text-sm flex flex-nowrap px-2 py-1 gap-2">
|
||||
<div className="w-10 h-10 rounded-full bg-white"></div>
|
||||
<div className="text-xl">昵称</div>
|
||||
{/* <div className="flex flex-col justify-evenly">
|
||||
<div className="text-xs">亲密度</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* 消息泡泡 */}
|
||||
@ -243,7 +250,7 @@ export default function Home() {
|
||||
{opList.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="bg-gradient-to-r from-end-color to-start-color rounded-l-full w-full h-auto text-sm flex flex-col flex-nowrap items-center pl-1 py-1"
|
||||
className="bg-gradient-to-r from-end-color to-start-color rounded-l-full w-full h-auto text-sm flex flex-col flex-nowrap items-center p-1"
|
||||
>
|
||||
<div className="w-6 h-6 overflow-hidden">
|
||||
<img
|
||||
@ -258,8 +265,26 @@ export default function Home() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 皮肤/背景列表 */}
|
||||
<SkinOrBgList type="skin" list={fakeList} />
|
||||
{/* 皮肤列表 */}
|
||||
{skinOpen && (
|
||||
<SkinOrBgList
|
||||
type="skin"
|
||||
list={fakeList}
|
||||
onSelect={(type, selectedItem) => {
|
||||
console.log("选中的新的皮肤", type, selectedItem);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{/* 背景列表 */}
|
||||
{bgOpen && (
|
||||
<SkinOrBgList
|
||||
type="bg"
|
||||
list={fakeList2}
|
||||
onSelect={(type, selectedItem) => {
|
||||
console.log("选中的新的背景", type, selectedItem);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 底部换肤 & 换背景 */}
|
||||
<div className="absolute w-[90vw] bottom-14 left-1/2 -translate-x-1/2 flex flex-nowrap items-center justify-between">
|
||||
@ -267,6 +292,10 @@ export default function Home() {
|
||||
className="w-12 h-12 overflow-hidden"
|
||||
onClick={() => {
|
||||
console.log("换肤");
|
||||
if (bgOpen && !skinOpen) {
|
||||
setBgOpen(false);
|
||||
}
|
||||
setSkinOpen(!skinOpen);
|
||||
}}
|
||||
>
|
||||
<img
|
||||
@ -279,6 +308,10 @@ export default function Home() {
|
||||
className="w-12 h-12 overflow-hidden"
|
||||
onClick={() => {
|
||||
console.log("换背景");
|
||||
if (skinOpen && !bgOpen) {
|
||||
setSkinOpen(false);
|
||||
}
|
||||
setBgOpen(!bgOpen);
|
||||
}}
|
||||
>
|
||||
<img
|
||||
@ -347,34 +380,73 @@ export default function Home() {
|
||||
}
|
||||
|
||||
const fakeList = [
|
||||
{ id: 1, src: "", name: "皮肤1" },
|
||||
{ id: 2, src: "", name: "皮肤2" },
|
||||
{ id: 3, src: "", name: "皮肤3" },
|
||||
{ id: 4, src: "", name: "皮肤4" },
|
||||
{ id: 5, src: "", name: "皮肤5" },
|
||||
{ id: 6, src: "", name: "皮肤6" },
|
||||
{ id: 7, src: "", name: "皮肤7" },
|
||||
{ id: 8, src: "", name: "皮肤8" },
|
||||
{ id: 9, src: "", name: "皮肤9" },
|
||||
{ id: 10, src: "", name: "皮肤10" },
|
||||
{ id: 1, src: "", name: "皮肤1", state: 1 },
|
||||
{ id: 2, src: "", name: "皮肤2", state: 1 },
|
||||
{ id: 3, src: "", name: "皮肤3", state: 0 },
|
||||
{ id: 4, src: "", name: "皮肤4", state: 0 },
|
||||
{ id: 5, src: "", name: "皮肤5", state: 0 },
|
||||
{ id: 6, src: "", name: "皮肤6", state: 0 },
|
||||
{ id: 7, src: "", name: "皮肤7", state: 0 },
|
||||
{ id: 8, src: "", name: "皮肤8", state: 0 },
|
||||
{ id: 9, src: "", name: "皮肤9", state: 0 },
|
||||
{ id: 10, src: "", name: "皮肤10", state: 0 },
|
||||
];
|
||||
const fakeList2 = [
|
||||
{ id: 1, src: "", name: "背景1", state: 1 },
|
||||
{ id: 2, src: "", name: "背景2", state: 1 },
|
||||
{ id: 3, src: "", name: "背景3", state: 0 },
|
||||
{ id: 4, src: "", name: "背景4", state: 0 },
|
||||
{ id: 5, src: "", name: "背景5", state: 0 },
|
||||
{ id: 6, src: "", name: "背景6", state: 0 },
|
||||
{ id: 7, src: "", name: "背景7", state: 0 },
|
||||
{ id: 8, src: "", name: "背景8", state: 0 },
|
||||
{ id: 9, src: "", name: "背景9", state: 0 },
|
||||
{ id: 10, src: "", name: "背景10", state: 0 },
|
||||
];
|
||||
|
||||
type listItem = { id: number; src: string; name: string };
|
||||
type listItem = { id: number; src: string; name: string; state: number };
|
||||
export const SkinOrBgList = ({
|
||||
type,
|
||||
list,
|
||||
onSelect,
|
||||
}: {
|
||||
type: "skin" | "bg";
|
||||
list: listItem[];
|
||||
onSelect: (type: "skin" | "bg", item: listItem) => void;
|
||||
}) => {
|
||||
function handleSelect(selectedItem: listItem) {
|
||||
if (selectedItem.state == 0) {
|
||||
console.log("未解锁，不可用");
|
||||
// TODO: 解锁操作
|
||||
return;
|
||||
}
|
||||
onSelect(type, selectedItem);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="absolute left-1/2 -translate-x-1/2 bottom-24 mb-4 w-[90vw] h-32 bg-white bg-opacity-30 rounded-2xl py-4 px-6 flex flex-nowrap gap-2 overflow-x-auto">
|
||||
{list.map((item) => (
|
||||
<div
|
||||
onClick={() => handleSelect(item)}
|
||||
key={item.id}
|
||||
className="h-full w-24 rounded-2xl border-4 border-dashed border-[#FCD161] bg-orange-100 bg-opacity-10 flex-shrink-0"
|
||||
className="h-full w-24 rounded-2xl border-4 border-dashed border-[#FCD161] bg-orange-100 bg-opacity-10 flex-shrink-0 relative overflow-hidden"
|
||||
>
|
||||
{item.name}
|
||||
<img
|
||||
className="absolute top-0 left-0 w-full h-full object-cover"
|
||||
src="https://iconfont.alicdn.com/p/illus/preview_image/eZQFvSX6g8f1/70d91c51-e6b0-408c-84c5-50174d24a059.png"
|
||||
alt={`${item.name}图片`}
|
||||
/>
|
||||
{item.state == 0 && (
|
||||
<>
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-white bg-opacity-30"></div>
|
||||
<img
|
||||
className="absolute top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 z-10 w-1/2 h-auto"
|
||||
src="http://picdown.jchysoft.com/uiIcon/weijiesuo.png"
|
||||
alt="未解锁"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user