change colour if voted

Author: notbakaneko

resources/css/bem/user-tag.less

@@ -22,5 +22,10 @@
     &--name {
       background: hsl(var(--hsl-b2));
     }
+
+    &--voted {
+      background: hsl(var(--hsl-h1));
+      color: hsl(var(--hsl-b5));
+    }
   }
 }

resources/js/beatmapsets-show/controller.ts

@@ -72,6 +72,11 @@ export default class Controller {
     return this.beatmaps.get(this.currentBeatmap.mode) ?? [];
   }
 
+  @computed
+  get currentUserTagIds() {
+    return new Set(this.currentBeatmap.current_user_tag_ids);
+  }
+
   @computed
   get relatedTags() {
     const map = new Map<number, TagJson>();

resources/js/beatmapsets-show/info.tsx

@@ -195,7 +195,7 @@ export default class Info extends React.Component<Props> {
                 </h3>
                 <div className='beatmapset-info__tags'>
                   {this.controller.tags.userTags.map((tag) => (
-                    <UserTag key={tag.name} tag={tag} />
+                    <UserTag key={tag.name} tag={tag} voted={this.controller.currentUserTagIds.has(tag.id)} />
                   ))}
                 </div>
               </div>

resources/js/beatmapsets-show/user-tag.tsx

@@ -5,12 +5,18 @@ import { TagJsonWithCount } from 'interfaces/tag-json';
 import { route } from 'laroute';
 import * as React from 'react';
 import { makeSearchQueryOption } from 'utils/beatmapset-helper';
+import { classWithModifiers } from 'utils/css';
 
 interface Props {
   tag: TagJsonWithCount;
+  voted: boolean;
 }
 
 export default class UserTag extends React.PureComponent<Props> {
+  static defaultProps = {
+    voted: false,
+  };
+
   private readonly category;
   private readonly name;
 
@@ -35,7 +41,9 @@ export default class UserTag extends React.PureComponent<Props> {
       >
         <span className='user-tag__item user-tag__item--category'>{this.category}</span>
         <span className='user-tag__item user-tag__item--name'>{this.name}</span>
-        <span className='user-tag__item user-tag__item--count'>{this.props.tag.count}</span>
+        <span className={classWithModifiers('user-tag__item', 'count', { voted: this.props.voted })}>
+          {this.props.tag.count}
+        </span>
       </a>
     );
   }

resources/js/interfaces/beatmap-json.ts

@@ -14,6 +14,7 @@ interface BeatmapFailTimesArray {
 interface BeatmapJsonAvailableIncludes {
   beatmapset: BeatmapsetJson | null;
   checksum: string | null;
+  current_user_tag_ids: number[];
   failtimes: BeatmapFailTimesArray;
   max_combo: number;
   owners: BeatmapOwnerJson[];