difk

packages/frontend/src/components/MkClickerGame.vue

@@ -4,29 +4,35 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div>
+	<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>
+			<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="/client-assets/cookie.png" :class="$style.img">
+				<img src="https://cdn.discordapp.com/attachments/1153099592863334431/1160169965568143391/dihk_cossack.gif"
+						 :class="$style.img">
 			</button>
 		</div>
 		<div v-else>
 			<MkLoading/>
 		</div>
-</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>

packages/frontend/src/pages/clicker.vue

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

packages/frontend/src/store.ts

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

packages/frontend/src/ui/_common_/common.ts

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

packages/frontend/src/widgets/WidgetClicker.vue

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