feat: 주사위 위젯 (1673beta#73)

CHANGELOG_CHERRYPICK.md

@@ -49,6 +49,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
   - 노트를 게시하기 전에 첨부한 파일에 캡션이 없으면 경고를 표시합니다.
   - 이 변경으로 이미지 뷰어의 파일 이름 영역에는 더 이상 캡션이 아닌 실제 파일 이름이 표시됩니다.
 - Feat: 사용자 정의 스플래시 텍스트를 설정할 수 있음 (1673beta/cherrypick#153)
+- Feat: 주사위 위젯 (1673beta/cherrypick#73)
 
 ### Client
 - Enhance: CherryPick 업데이트 페이지를 제어판 목록에 추가함

locales/en-US.yml

@@ -2495,6 +2495,7 @@ _widgets:
   clicker: "Clicker"
   birthdayFollowings: "Users who celebrate their birthday today"
   search: "Search"
+  dice: "Dice"
 _cw:
   hide: "Hide"
   show: "Show content"
@@ -3023,3 +3024,7 @@ _externalNavigationWarning:
 _altWarning:
   noAltWarning: "No alternate text is configured in the file."
   noAltWarningDescription: "You can change this setting in \"Settings - Appearance\"."
+_dice:
+  rollDice: "Roll the dice"
+  diceCount: "Number of dice"
+  diceFaces: "Number of dice faces"

locales/index.d.ts

@@ -9801,6 +9801,10 @@ export interface Locale extends ILocale {
          * 検索
          */
         "search": string;
+        /**
+         * サイコロ
+         */
+        "dice": string;
     };
     "_cw": {
         /**
@@ -11820,6 +11824,20 @@ export interface Locale extends ILocale {
          */
         "noAltWarningDescription": string;
     };
+    "_dice": {
+        /**
+         * サイコロを振る
+         */
+        "rollDice": string;
+        /**
+         * サイコロの数
+         */
+        "diceCount": string;
+        /**
+         * サイコロの面数
+         */
+        "diceFaces": string;
+    };
 }
 declare const locales: {
     [lang: string]: Locale;

locales/ja-JP.yml

@@ -2574,6 +2574,7 @@ _widgets:
   clicker: "クリッカー"
   birthdayFollowings: "今日誕生日のユーザー"
   search: "検索"
+  dice: "サイコロ"
 
 _cw:
   hide: "隠す"
@@ -3148,3 +3149,8 @@ _externalNavigationWarning:
 _altWarning:
   noAltWarning: "ファイルに代替テキストが設定されていません。"
   noAltWarningDescription: "この設定は「設定 - アピアランス」で変更できます。"
+
+_dice:
+  rollDice: "サイコロを振る"
+  diceCount: "サイコロの数"
+  diceFaces: "サイコロの面数"

locales/ko-KR.yml

@@ -2518,6 +2518,7 @@ _widgets:
   clicker: "클리커"
   birthdayFollowings: "오늘 생일인 사용자"
   search: "검색"
+  dice: "주사위"
 _cw:
   hide: "가리기"
   show: "더 보기"
@@ -3054,3 +3055,7 @@ _externalNavigationWarning:
 _altWarning:
   noAltWarning: "파일에 캡션이 설정되어 있지 않아요."
   noAltWarningDescription: "이 설정은 [설정 - 모양]에서 변경할 수 있어요."
+_dice:
+  rollDice: "주사위 던지기"
+  diceCount: "주사위 개수"
+  diceFaces: "주사위 면의 수"

packages/frontend/package.json

@@ -17,6 +17,7 @@
 		"lint": "pnpm typecheck && pnpm eslint"
 	},
 	"dependencies": {
+		"@dice-roller/rpg-dice-roller": "^5.5.0",
 		"@discordapp/twemoji": "15.1.0",
 		"@github/webauthn-json": "2.1.1",
 		"@mcaptcha/vanilla-glue": "0.1.0-alpha-3",

packages/frontend/src/components/MkDice.vue

@@ -0,0 +1,87 @@
+<template>
+<div :class="$style.root">
+	<div>
+		<MkInput v-model="diceCount" small type="text" :class="$style.input">
+			<template #label>{{ i18n.ts._dice.diceCount }}</template>
+		</MkInput>
+	</div>
+	<div>
+		<MkInput v-model="diceFaces" small type="text" :class="$style.input">
+			<template #label>{{ i18n.ts._dice.diceFaces }}</template>
+		</MkInput>
+	</div>
+	<div>
+		<MkButton large primary style="margin: 0 auto;" @click="rollDice">
+			<i class="ti ti-dice-2"></i>
+			{{ i18n.ts._dice.rollDice }}
+		</MkButton>
+	</div>
+	<div v-if="diceResult" :class="$style.result">{{ diceResult }}</div>
+	<div v-if="showMinTotal" :class="$style.option">{{ diceMinTotal }}</div>
+	<div v-if="showMaxTotal" :class="$style.option">{{ diceMaxTotal }}</div>
+	<div v-if="showAverageTotal" :class="$style.option">{{ diceAverageTotal }}</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { Ref, ref } from 'vue';
+import { DiceRoll } from '@dice-roller/rpg-dice-roller';
+import MkInput from '@/components/MkInput.vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
+
+const props = withDefaults(defineProps<{
+	showMinTotal?: boolean;
+	showMaxTotal?: boolean;
+	showAverageTotal?: boolean;
+}>(), {
+	showMinTotal: false,
+	showMaxTotal: false,
+	showAverageTotal: false,
+});
+
+const diceCount = ref(1);
+const diceFaces = ref(6);
+const diceResult: Ref<number | null> = ref(null);
+const diceMinTotal: Ref<number | null> = ref(null);
+const diceMaxTotal: Ref<number | null> = ref(null);
+const diceAverageTotal: Ref<number | null> = ref(null);
+
+const rollDice = () => {
+	let roll = new DiceRoll(`${diceCount.value}d${diceFaces.value}`);
+	if (diceCount.value > 999) {
+		return;
+	}
+
+	diceResult.value = roll.total;
+	diceMinTotal.value = roll.minTotal;
+	diceMaxTotal.value = roll.maxTotal;
+	diceAverageTotal.value = roll.averageTotal;
+};
+
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 8px 16px;
+
+	> div {
+		margin: 8px 0;
+	}
+}
+
+.input {
+	flex: 1 1 auto;
+	padding: 8px;
+}
+
+.result {
+	text-align: center;
+	margin: auto;
+}
+
+.option {
+	padding: 8px 0;
+	text-align: left;
+}
+</style>

packages/frontend/src/widgets/WidgetDice.vue

@@ -0,0 +1,63 @@
+<template>
+<MkContainer :naked="widgetProps.transparent" :showHeader="false">
+	<div class="_monospace" :class="[$style.root, {_panel: !widgetProps.transparent}]">
+		<MkDice
+			:showMinTotal="widgetProps.showMinTotal"
+			:showMaxTotal="widgetProps.showMaxTotal"
+			:showAverageTotal="widgetProps.showAverageTotal"
+		/>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
+import { GetFormResultType } from '@/scripts/form.js';
+import MkDice from '@/components/MkDice.vue';
+import MkContainer from '@/components/MkContainer.vue';
+
+const name = 'dice';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	showMinTotal: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	showMaxTotal: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	showAverageTotal: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+const props = defineProps<WidgetComponentProps<WidgetProps>>();
+const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	position: relative;
+	padding: 16px 0;
+}
+</style>

packages/frontend/src/widgets/index.ts

@@ -35,6 +35,7 @@ export default function(app: App) {
 	app.component('WidgetClicker', defineAsyncComponent(() => import('./WidgetClicker.vue')));
 	app.component('WidgetBirthdayFollowings', defineAsyncComponent(() => import('./WidgetBirthdayFollowings.vue')));
 	app.component('WidgetSearch', defineAsyncComponent(() => import('./WidgetSearch.vue')));
+	app.component('WidgetDice', defineAsyncComponent(() => import('./WidgetDice.vue')));
 }
 
 export const widgets = [
@@ -67,4 +68,5 @@ export const widgets = [
 	'clicker',
 	'birthdayFollowings',
 	'search',
+	'dice',
 ];