zjt/live2d_test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore'

Browse Source
This commit is contained in:
Ra-Liz
2024-07-15 11:25:31 +08:00
parent cd62ab6c9d
commit 0b93ccd0a5
1 changed files with 88 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/app/helper.tsx
View File

@@ -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>