difk
This commit is contained in:
mattyatea
parent
79876ab3ac
commit
120efff6c1
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue