Merge pull request #11780 from bdach/daily-challenge-completion-marker

Add completion marker to daily challenge profile counter
ppy · Jan 16, 2025 · d9f4860 · d9f4860
2 parents f7d0f0b + 3c70a3c
commit d9f4860
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/resources/css/bem/daily-challenge.less b/resources/css/bem/daily-challenge.less
@@ -5,9 +5,31 @@
   background: hsl(var(--hsl-b4));
   border-radius: @border-radius-large;
   min-width: 0;
+  position: relative;
   display: flex;
   align-items: center;
-  padding: 3px;
+  padding: 1px;
+  border: 2px solid transparent;
+
+  &--played-today {
+    border-color: @osu-colour-lime-1;
+
+    &::before {
+      .fas();
+      .center-content();
+      background-color: @osu-colour-lime-1;
+      border-radius: 50%;
+      color: @osu-colour-b6;
+      content: @fa-var-check;
+      font-size: 8px; // icon size
+      height: 16px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      transform: translate(50%, -50%);
+      width: $height;
+    }
+  }
 
   &__name {
     font-size: @font-size--normal;
@@ -20,7 +42,7 @@
   }
 
   &__value-box {
-    border-radius: @border-radius-large;
+    border-radius: @border-radius-small;
     background: hsl(var(--hsl-b6));
     padding: 5px 10px;
   }

diff --git a/resources/js/profile-page/daily-challenge.tsx b/resources/js/profile-page/daily-challenge.tsx
@@ -4,6 +4,8 @@
 import DailyChallengeUserStatsJson from 'interfaces/daily-challenge-user-stats-json';
 import { autorun } from 'mobx';
 import { observer } from 'mobx-react';
+import * as moment from 'moment';
+import core from 'osu-core-singleton';
 import * as React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { classWithModifiers, Modifiers } from 'utils/css';
@@ -122,10 +124,13 @@ export default class DailyChallenge extends React.Component<Props> {
       return null;
     }
 
+    const playedToday = this.props.stats.last_update !== null && moment.utc(this.props.stats.last_update).isSame(Date.now(), 'day');
+    const userIsOnOwnProfile = this.props.stats.user_id === core.currentUser?.id;
+
     return (
       <div
         ref={this.valueRef}
-        className='daily-challenge'
+        className={classWithModifiers('daily-challenge', { 'played-today': playedToday && userIsOnOwnProfile })}
         onMouseOver={this.onMouseOver}
       >
         <div className='daily-challenge__name'>