feat: 주사위 위젯 (1673beta/cherrypick#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',
 ];

pnpm-lock.yaml

@@ -794,6 +794,9 @@ importers:
 
   packages/frontend:
     dependencies:
+      '@dice-roller/rpg-dice-roller':
+        specifier: ^5.5.0
+        version: 5.5.0
       '@discordapp/twemoji':
         specifier: 15.1.0
         version: 15.1.0
@@ -1968,6 +1971,10 @@ packages:
   '@cypress/xvfb@1.2.4':
     resolution: {integrity: sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==}
 
+  '@dice-roller/rpg-dice-roller@5.5.0':
+    resolution: {integrity: sha512-ip318MKhfRvqzpXNQaMyqJkOWbeOlaiIopfyluantEVF706fRP4Jy0WsTZrnKhRvhJTZTJa5dTTWqcoPmt1Xww==}
+    engines: {node: '>=18.0'}
+
   '@digitalbazaar/http-client@3.4.1':
     resolution: {integrity: sha512-Ahk1N+s7urkgj7WvvUND5f8GiWEPfUw0D41hdElaqLgu8wZScI8gdI0q+qWw5N1d35x7GCRH2uk9mi+Uzo9M3g==}
     engines: {node: '>=14.0'}
@@ -6063,6 +6070,9 @@ packages:
   compare-versions@6.1.1:
     resolution: {integrity: sha512-4hm4VPpIecmlg59CHXnRDnqGplJFrbLG4aFEl5vl6cK1u76ws3LLvX7ikFnTDl5vo39sjWD6AaDPYodJp/NNHg==}
 
+  complex.js@2.1.1:
+    resolution: {integrity: sha512-8njCHOTtFFLtegk6zQo0kkVX1rngygb/KQI6z1qZxlFI3scluC+LVTCFbrkWjBv4vvLlbQ9t88IPMC6k95VTTg==}
+
   compress-commons@6.0.2:
     resolution: {integrity: sha512-6FqVXeETqWPoGcfzrXb37E50NP0LXT8kAMu5ooZayhWWdgEY4lBEEcbQNXtkuKQsGduxiIcI4gOTsxTmuq/bSg==}
     engines: {node: '>= 14'}
@@ -6697,6 +6707,9 @@ packages:
   escape-html@1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
+  escape-latex@1.2.0:
+    resolution: {integrity: sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==}
+
   escape-regexp@0.0.1:
     resolution: {integrity: sha512-jVgdsYRa7RKxTT6MKNC3gdT+BF0Gfhpel19+HMRZJC2L0PufB0XOBuXBoXj29NKHwuktnAXd1Z1lyiH/8vOTpw==}
 
@@ -7174,6 +7187,9 @@ packages:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
 
+  fraction.js@4.3.4:
+    resolution: {integrity: sha512-pwiTgt0Q7t+GHZA4yaLjObx4vXmmdcS0iSJ19o8d/goUGgItX9UZWKWNnLHehxviD8wU2IWRsnR8cD5+yOJP2Q==}
+
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -8060,6 +8076,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  javascript-natural-sort@0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+
   jest-changed-files@29.7.0:
     resolution: {integrity: sha512-fEArFiwf1BpQ+4bXSprcDc3/x4HSzL4al2tozwVpDFpsxALjLYdyiIK4e5Vz66GQJIbXJ82+35PtysofptNX2w==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -8604,6 +8623,11 @@ packages:
     engines: {node: '>= 12'}
     hasBin: true
 
+  mathjs@11.12.0:
+    resolution: {integrity: sha512-UGhVw8rS1AyedyI55DGz9q1qZ0p98kyKPyc9vherBkoueLntPfKtPBh14x+V4cdUWK0NZV2TBwqRFlvadscSuw==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
   matter-js@0.19.0:
     resolution: {integrity: sha512-v2huwvQGOHTGOkMqtHd2hercCG3f6QAObTisPPHg8TZqq2lz7eIY/5i/5YUV8Ibf3mEioFEmwibcPUF2/fnKKQ==}
 
@@ -10089,6 +10113,9 @@ packages:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
 
+  random-js@2.1.0:
+    resolution: {integrity: sha512-CRUyWmnzmZBA7RZSVGq0xMqmgCyPPxbiKNLFA5ud7KenojVX2s7Gv+V7eB52beKTPGxWRnVZ7D/tCIgYJJ8vNQ==}
+
   random-seed@0.3.0:
     resolution: {integrity: sha512-y13xtn3kcTlLub3HKWXxJNeC2qK4mB59evwZ5EkeRlolx+Bp2ztF7LbcZmyCnOqlHQrLnfuNbi1sVmm9lPDlDA==}
     engines: {node: '>= 0.6.0'}
@@ -11050,6 +11077,9 @@ packages:
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
+  tiny-emitter@2.1.0:
+    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -11295,6 +11325,10 @@ packages:
     resolution: {integrity: sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==}
     engines: {node: '>= 0.4'}
 
+  typed-function@4.2.1:
+    resolution: {integrity: sha512-EGjWssW7Tsk4DGfE+5yluuljS1OGYWiI1J6e8puZz9nTMM51Oug8CD5Zo4gWMsOhq5BI+1bF+rWTm4Vbj3ivRA==}
+    engines: {node: '>= 18'}
+
   typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
 
@@ -12939,6 +12973,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@dice-roller/rpg-dice-roller@5.5.0':
+    dependencies:
+      mathjs: 11.12.0
+      random-js: 2.1.0
+
   '@digitalbazaar/http-client@3.4.1(web-streams-polyfill@3.2.1)':
     dependencies:
       ky: 0.33.3
@@ -17629,6 +17668,8 @@ snapshots:
 
   compare-versions@6.1.1: {}
 
+  complex.js@2.1.1: {}
+
   compress-commons@6.0.2:
     dependencies:
       crc-32: 1.2.2
@@ -18574,6 +18615,8 @@ snapshots:
 
   escape-html@1.0.3: {}
 
+  escape-latex@1.2.0: {}
+
   escape-regexp@0.0.1: {}
 
   escape-string-regexp@1.0.5: {}
@@ -19271,6 +19314,8 @@ snapshots:
 
   forwarded@0.2.0: {}
 
+  fraction.js@4.3.4: {}
+
   fresh@0.5.2: {}
 
   from@0.1.7: {}
@@ -20257,6 +20302,8 @@ snapshots:
       filelist: 1.0.4
       minimatch: 3.1.2
 
+  javascript-natural-sort@0.7.1: {}
+
   jest-changed-files@29.7.0:
     dependencies:
       execa: 5.1.1
@@ -21024,6 +21071,18 @@ snapshots:
 
   marked@4.3.0: {}
 
+  mathjs@11.12.0:
+    dependencies:
+      '@babel/runtime': 7.23.4
+      complex.js: 2.1.1
+      decimal.js: 10.4.3
+      escape-latex: 1.2.0
+      fraction.js: 4.3.4
+      javascript-natural-sort: 0.7.1
+      seedrandom: 3.0.5
+      tiny-emitter: 2.1.0
+      typed-function: 4.2.1
+
   matter-js@0.19.0: {}
 
   mdast-util-find-and-replace@3.0.1:
@@ -22695,6 +22754,8 @@ snapshots:
 
   quick-lru@5.1.1: {}
 
+  random-js@2.1.0: {}
+
   random-seed@0.3.0:
     dependencies:
       json-stringify-safe: 5.0.1
@@ -23844,6 +23905,8 @@ snapshots:
 
   through@2.3.8: {}
 
+  tiny-emitter@2.1.0: {}
+
   tiny-invariant@1.3.3: {}
 
   tinybench@2.6.0: {}
@@ -24090,6 +24153,8 @@ snapshots:
       is-typed-array: 1.1.13
       possible-typed-array-names: 1.0.0
 
+  typed-function@4.2.1: {}
+
   typedarray@0.0.6: {}
 
   typeorm@0.3.20(ioredis@5.4.1)(pg@8.13.0):