artie/artie.moe
1
0
Fork 0
mirror of https://github.com/artiemis/artie.moe.git synced 2026-02-14 09:01:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

svelte 5

Browse Source
This commit is contained in:
artie 2024-11-16 01:48:37 +01:00
parent 2c04aeaf87
commit 534aac5c8d
6 changed files with 322 additions and 812 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
astro.config.mjs
View File

@ -1,9 +1,9 @@
import { defineConfig } from "astro/config"; import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind"; import tailwind from "@astrojs/tailwind";
import vue from "@astrojs/vue"; import svelte from "@astrojs/svelte";
import icon from "astro-icon"; import icon from "astro-icon";
export default defineConfig({ export default defineConfig({
integrations: [tailwind(), vue(), icon()], integrations: [tailwind(), svelte(), icon()],
compressHTML: false, compressHTML: false,
}); });

13
package.json
View File

@ -10,15 +10,16 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/svelte": "^6.0.1",
"@astrojs/tailwind": "^5.1.2", "@astrojs/tailwind": "^5.1.2",
"@astrojs/vue": "^4.5.2", "@iconify-json/simple-icons": "^1.2.11",
"@iconify-json/simple-icons": "^1.2.9", "astro": "^4.16.10",
"astro": "^4.16.7", "astro-icon": "^1.1.2",
"astro-icon": "^1.1.1",
"pixi-live2d-display": "^0.4.0", "pixi-live2d-display": "^0.4.0",
"pixi.js": "^6.5.10", "pixi.js": "^6.5.10",
"tailwindcss": "^3.4.14", "svelte": "^5.1.13",
"vue": "^3.5.12" "tailwindcss": "^3.4.15",
"typescript": "^5.6.3"
}, },
"devDependencies": { "devDependencies": {
"@catppuccin/tailwindcss": "^0.1.6" "@catppuccin/tailwindcss": "^0.1.6"

1079
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

29
src/components/Model.vue → src/components/Model.svelte
View File

@ -1,4 +1,4 @@
<script setup lang="ts"> <script lang="ts">
import * as PIXI from "pixi.js"; import * as PIXI from "pixi.js";
import { import {
Live2DModel, Live2DModel,
@ -6,10 +6,11 @@
MotionPriority, MotionPriority,
} from "pixi-live2d-display"; } from "pixi-live2d-display";
import { reZeroModels } from "../utils/constants"; import { reZeroModels } from "../utils/constants";
import { onMounted, onUnmounted, ref, useTemplateRef } from "vue"; import { onDestroy, onMount } from "svelte";
const canvas = useTemplateRef<HTMLCanvasElement>("canvas"); let canvas = $state<HTMLCanvasElement>();
const isLoaded = ref(false); let isLoaded = $state(false);
let opacity = $derived(isLoaded ? "opacity-1" : "opacity-0");
let app: PIXI.Application; let app: PIXI.Application;
let model: Live2DModel; let model: Live2DModel;
@ -35,10 +36,10 @@
return choices[Math.floor(Math.random() * choices.length)]; return choices[Math.floor(Math.random() * choices.length)];
} }
onMounted(async () => { onMount(async () => {
(window as any).PIXI = PIXI; (window as any).PIXI = PIXI;
app = new PIXI.Application({ app = new PIXI.Application({
view: canvas.value, view: canvas,
autoStart: true, autoStart: true,
backgroundAlpha: 0, backgroundAlpha: 0,
width: 900, width: 900,
@ -53,7 +54,7 @@
); );
app.stage.on("childAdded", () => { app.stage.on("childAdded", () => {
isLoaded.value = true; isLoaded = true;
}); });
app.stage.addChild(model as unknown as PIXI.DisplayObject); app.stage.addChild(model as unknown as PIXI.DisplayObject);
@ -73,13 +74,15 @@
model.y = 0; model.y = 0;
}); });
onUnmounted(() => { onDestroy(() => {
app.destroy(false); app.destroy(false);
}); });
</script> </script>
<template> <canvas
<canvas ref="canvas" id="live2d" @pointerdown="model.motion('Tap')" bind:this={canvas}
class="left-0 bottom-0 fixed lg:w-96 w-44 transition-opacity" id="live2d"
:class="[isLoaded ? 'opacity-1' : 'opacity-0', { '!cursor-pointer': isLoaded }]" /> onpointerdown={() => model.motion("Tap")}
</template> class="left-0 bottom-0 fixed lg:w-96 w-44 transition-opacity {opacity}"
class:!cursor-pointer={isLoaded}
></canvas>

4
src/pages/index.astro
View File

@ -3,7 +3,7 @@ import Layout from "../layouts/Layout.astro";
import Prompt from "../components/Prompt.astro"; import Prompt from "../components/Prompt.astro";
import Centerpiece from "../components/Centerpiece.astro"; import Centerpiece from "../components/Centerpiece.astro";
import Icons from "../components/Icons.astro"; import Icons from "../components/Icons.astro";
import Model from "../components/Model.vue"; import Model from "../components/Model.svelte";
--- ---
<Layout title="artie"> <Layout title="artie">
@ -13,5 +13,5 @@ import Model from "../components/Model.vue";
<script is:inline src="/vendors/live2dcubismcore.min.js"></script> <script is:inline src="/vendors/live2dcubismcore.min.js"></script>
<script is:inline src="/vendors/live2d.min.js"></script> <script is:inline src="/vendors/live2d.min.js"></script>
<Model client:only="vue" /> <Model client:only="svelte" />
</Layout> </Layout>

5
svelte.config.js Normal file
View File

@ -0,0 +1,5 @@
import { vitePreprocess } from '@astrojs/svelte';
export default {
preprocess: vitePreprocess(),
}