Merge pull request #891 from tsg-ut/feature/achievement-progress-scaling-7820949080073161408

Feat: Add scaling toggle to achievement progress

Author: hakatashi

app/pages/achievements/[id]/index.vue

@@ -35,6 +35,10 @@
 				</li>
 			</ul>
 			<h1 class="title is-3">実績の達成状況</h1>
+			<div class="field">
+				<input id="scaleSwitch" v-model="scaleToMaxUser" type="checkbox" name="scaleSwitch" class="switch">
+				<label for="scaleSwitch">最大ユーザを基準にする</label>
+			</div>
 			<div class="table-container">
 				<table class="table">
 					<thead>
@@ -57,7 +61,7 @@
 									class="progress is-success"
 									:class="(user.count || 0) >= value ? 'is-success' : 'is-warning'"
 									:value="user.count || 0"
-									:max="value"
+									:max="scaleToMaxUser ? maxCount : value"
 								/>
 							</td>
 							<td :style="{whiteSpace: 'nowrap'}">
@@ -80,6 +84,7 @@ export default {
 	data() {
 		return {
 			isLoading: true,
+			scaleToMaxUser: false,
 		};
 	},
 	async fetch({store}) {
@@ -137,6 +142,9 @@ export default {
 					id: user.id,
 				}));
 		},
+		maxCount() {
+			return Math.max(...this.sortedUserList.map((user) => user.count));
+		},
 		sameCounterAchievements() {
 			if (this.counter === null) {
 				return [];

nuxt.config.js

@@ -24,6 +24,7 @@ export default defineNuxtConfig({
 		'bulma-o-steps/bulma-steps.css',
 		'bulma-timeline/dist/css/bulma-timeline.min.css',
 		'remixicon/fonts/remixicon.css',
+		'bulma-switch-control/css/main.css',
 	],
 
 	postcss: {

package-lock.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "bulma": "^1.0.2",
     "bulma-o-steps": "^1.1.0",
+    "bulma-switch-control": "^1.2.2",
     "bulma-timeline": "^3.0.5",
     "chart.js": "^4.5.1",
     "core-js": "^3.47.0",