This commit is contained in:
mattyatea 2023-10-13 07:26:27 +09:00
parent 79876ab3ac
commit 120efff6c1
5 changed files with 59 additions and 21 deletions

View File

@ -4,29 +4,35 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div>
<div v-if="game.ready" :class="$style.game">
<div :class="$style.cps" class="">{{ number(cps) }}cps</div>
<div :class="$style.count" class=""><i class="ti ti-cookie" style="font-size: 70%;"></i> {{ number(cookies) }}</div>
<button v-click-anime class="_button" @click="onClick">
<img src="/client-assets/cookie.png" :class="$style.img">
</button>
<div>
<div v-if="game.ready" :class="$style.game">
<div :class="$style.cps" class="">{{ number(cps) }}cps</div>
<div :class="$style.count" class=""><img :class="[$style.icon,{[$style.dark]:darkMode}]" alt="Cosaque daihuku"
src="https://media.discordapp.net/attachments/1153099592863334431/1162139796647448576/AfovawbDhjHYAAAAAElFTkSuQmCC.png"/>
{{ number(cookies) }}
</div>
<button v-click-anime class="_button" @click="onClick">
<img src="https://cdn.discordapp.com/attachments/1153099592863334431/1160169965568143391/dihk_cossack.gif"
:class="$style.img">
</button>
</div>
<div v-else>
<MkLoading/>
</div>
</div>
<div v-else>
<MkLoading/>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, onMounted, onUnmounted } from 'vue';
import {computed, onMounted, onUnmounted} from 'vue';
import MkPlusOneEffect from '@/components/MkPlusOneEffect.vue';
import * as os from '@/os.js';
import { useInterval } from '@/scripts/use-interval.js';
import {useInterval} from '@/scripts/use-interval.js';
import * as game from '@/scripts/clicker-game.js';
import number from '@/filters/number.js';
import { claimAchievement } from '@/scripts/achievements.js';
import {claimAchievement} from '@/scripts/achievements.js';
import {defaultStore} from "@/store.js";
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
const saveData = game.saveData;
const cookies = computed(() => saveData.value?.cookies);
let cps = $ref(0);
@ -35,7 +41,7 @@ let prevCookies = $ref(0);
function onClick(ev: MouseEvent) {
const x = ev.clientX;
const y = ev.clientY;
os.popup(MkPlusOneEffect, { x, y }, {}, 'end');
os.popup(MkPlusOneEffect, {x, y}, {}, 'end');
saveData.value!.cookies++;
saveData.value!.totalCookies++;
@ -92,4 +98,16 @@ onUnmounted(() => {
.img {
max-width: 90px;
}
$color-scheme: var(--color-scheme);
.icon {
width: 1.3em;
vertical-align: -24%;
}
.dark {
filter: invert(1);
}
</style>

View File

@ -17,8 +17,8 @@ import MkClickerGame from '@/components/MkClickerGame.vue';
import { definePageMetadata } from '@/scripts/page-metadata.js';
definePageMetadata({
title: '🍪👈',
icon: 'ti ti-cookie',
title: '👈',
icon: 'ti ti-circle',
});
</script>

View File

@ -272,6 +272,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: true,
},
gamingType: {
where: 'device',
default: 'dark',
},
bannerUrl:{
where: 'device',
default: bannerDark
@ -442,6 +446,7 @@ export const defaultStore = markRaw(new Storage('base', {
}
}));
// TODO: 他のタブと永続化されたstateを同期
const PREFIX = 'miux:' as const;

View File

@ -60,8 +60,8 @@ export function openInstanceMenu(ev: MouseEvent) {
}, {
type: 'link',
to: '/clicker',
text: '🍪👈',
icon: 'ti ti-cookie',
text: '👈',
icon: 'ti ti-circle',
}, ($i && ($i.isAdmin || $i.policies.canManageCustomEmojis)) ? {
type: 'link',
to: '/custom-emojis-manager',

View File

@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkContainer :showHeader="widgetProps.showHeader" class="mkw-clicker">
<template #icon><i class="ti ti-cookie"></i></template>
<template #icon><img :class="[$style.icon,{[$style.dark]:darkMode}]" alt="Cosaque daihuku"
src="https://media.discordapp.net/attachments/1153099592863334431/1162139796647448576/AfovawbDhjHYAAAAAElFTkSuQmCC.png"/></template>
<template #header>Clicker</template>
<MkClickerGame/>
</MkContainer>
@ -16,7 +17,9 @@ import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExp
import { GetFormResultType } from '@/scripts/form.js';
import MkContainer from '@/components/MkContainer.vue';
import MkClickerGame from '@/components/MkClickerGame.vue';
import {computed} from "vue";
import {defaultStore} from "@/store.js";
const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
const name = 'clicker';
const widgetPropsDef = {
@ -43,3 +46,15 @@ defineExpose<WidgetComponentExpose>({
id: props.widget ? props.widget.id : null,
});
</script>
<style lang="scss" module>
.icon {
width: 1.3em;
vertical-align: -24%;
}
.dark {
filter: invert(1);
}
</style>