Make statistics menu less sad - decorations and colour

app/src/main/java/de/westnordost/streetcomplete/screens/user/profile/ProfileFragment.kt

@@ -21,12 +21,15 @@ import de.westnordost.streetcomplete.util.ktx.createBitmap
 import de.westnordost.streetcomplete.util.ktx.tryStartActivity
 import de.westnordost.streetcomplete.util.ktx.viewLifecycleScope
 import de.westnordost.streetcomplete.util.viewBinding
+import de.westnordost.streetcomplete.view.LaurelWreath
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import org.koin.android.ext.android.inject
 import org.koin.core.qualifier.named
 import java.io.File
+import java.lang.Math.max
+import java.lang.Math.min
 import java.util.Locale
 
 /** Shows the user profile: username, avatar, star count and a hint regarding unpublished changes */
@@ -147,12 +150,21 @@ class ProfileFragment : Fragment(R.layout.fragment_profile) {
         val daysActive = statisticsSource.daysActive
         binding.daysActiveContainer.isGone = daysActive <= 0
         binding.daysActiveText.text = daysActive.toString()
+        binding.daysActiveText.background = LaurelWreath(resources, min(daysActive + 20, 100))
     }
 
     private fun updateGlobalRankText() {
+        // note that global rank merges multiple people with the same score
+        // in case that 1000 people made 11 edits all will have the same rank (say, 3814)
+        // in case that 1000 people made 10 edits all will have the same rank (in this case - 3815)
         val rank = statisticsSource.rank
         binding.globalRankContainer.isGone = rank <= 0 || statisticsSource.getEditCount() <= 100
         binding.globalRankText.text = "#$rank"
+        val rankEnoughForFullMarks = 1000
+        val rankEnoughToStartGrowingReward = 3800
+        val ranksAboveThreshold = max(rankEnoughToStartGrowingReward - rank, 0)
+        val scaledRank = (ranksAboveThreshold * 100.0 / (rankEnoughToStartGrowingReward - rankEnoughForFullMarks)).toInt()
+        binding.globalRankText.background = LaurelWreath(resources, min(scaledRank, 100))
     }
 
     private suspend fun updateLocalRankText() {
@@ -164,15 +176,19 @@ class ProfileFragment : Fragment(R.layout.fragment_profile) {
             val shouldShow = statistics.rank != null && statistics.rank > 0 && statistics.count > 50
             val countryLocale = Locale("", statistics.countryCode)
             binding.localRankContainer.isGone = !shouldShow
-            binding.localRankText.text = "#${statistics.rank}"
-            binding.localRankLabel.text = getString(R.string.user_profile_local_rank, countryLocale.displayCountry)
+            if (shouldShow) {
+                binding.localRankText.text = "#${statistics.rank}"
+                binding.localRankLabel.text = getString(R.string.user_profile_local_rank, countryLocale.displayCountry)
+                binding.localRankText.background = LaurelWreath(resources, min(100 - statistics.rank!!, 100))
+            }
         }
     }
 
     private suspend fun updateAchievementLevelsText() {
         val levels = withContext(Dispatchers.IO) { achievementsSource.getAchievements().sumOf { it.second } }
         binding.achievementLevelsContainer.isGone = levels <= 0
         binding.achievementLevelsText.text = "$levels"
+        binding.achievementLevelsText.background = LaurelWreath(resources, min(levels / 2, 100))
     }
 
     private fun openUrl(url: String): Boolean {

app/src/main/java/de/westnordost/streetcomplete/util/ktx/Bitmap.kt

@@ -0,0 +1,9 @@
+package de.westnordost.streetcomplete.ktx
+
+import android.graphics.Bitmap
+import android.graphics.Matrix
+
+fun Bitmap.flipHorizontally(): Bitmap {
+    val matrix = Matrix().apply { postScale(-1f, 1f, width/2f, width/2f) }
+    return Bitmap.createBitmap(this, 0, 0, width, height, matrix, true)
+}

app/src/main/java/de/westnordost/streetcomplete/view/LaurelWreath.kt

@@ -0,0 +1,94 @@
+package de.westnordost.streetcomplete.view
+
+import android.content.res.Resources
+import android.graphics.Canvas
+import android.graphics.ColorFilter
+import android.graphics.Paint
+import android.graphics.PixelFormat
+import android.graphics.RectF
+import android.graphics.drawable.Drawable
+import androidx.core.graphics.withRotation
+import de.westnordost.streetcomplete.R
+import de.westnordost.streetcomplete.ktx.flipHorizontally
+import de.westnordost.streetcomplete.util.ktx.getBitmapDrawable
+
+/*
+Drawable providing decoration, suitable for a circular background
+100 and more: fully grown wreath with all pretty elements
+99 to 10: may be losing elements as it gets smaller
+below: no decorative styling at all
+ */
+class LaurelWreath(val resources: Resources, private val percentageOfGrowth: Int) : Drawable() {
+    val laurelLeafOnStalk = resources.getBitmapDrawable(R.drawable.ic_laurel_leaf_rotated)
+    val laurelStalk = resources.getBitmapDrawable(R.drawable.ic_laurel_leaf_stalk)
+    val horizontalEndingLeaf = resources.getBitmapDrawable(R.drawable.ic_laurel_leaf_ending)
+
+    private val antiAliasPaint: Paint = Paint().apply {
+        isAntiAlias = true
+        isFilterBitmap = true
+    }
+
+    override fun draw(canvas: Canvas) {
+        // Get the drawable's bounds
+        val canvasWidth: Int = bounds.width()
+        val canvasHeight: Int = bounds.height()
+        val circleRadius: Float = Math.min(canvasWidth, canvasHeight).toFloat() / 2f
+
+        val niceSubtleGreen: Paint = Paint().apply { setARGB(255, 152, 184, 126) }
+        canvas.drawCircle((canvasWidth / 2).toFloat(), (canvasHeight / 2).toFloat(), circleRadius, niceSubtleGreen)
+
+        if (percentageOfGrowth < 10) {
+            return
+        }
+
+        val decorationSegmentImageWidth = laurelLeafOnStalk.intrinsicWidth // width is the same as intrinsicWidth
+
+        val regularSegmentCount = 11f
+
+        val circleCenterX = canvasWidth / 2f
+        val shownSegments = ((regularSegmentCount - 1) * percentageOfGrowth / 100).toInt()
+        val locationBetweenCenterAndEdge = 0.78f
+        for (i in 1..shownSegments) {
+            // https://developer.android.com/reference/kotlin/androidx/core/graphics/package-summary#(android.graphics.Canvas).withRotation(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Function1)
+
+            var bitmap = laurelLeafOnStalk.bitmap
+            if (i == shownSegments) {
+                bitmap = horizontalEndingLeaf.bitmap
+            }
+            val stalkPaint = Paint()
+            stalkPaint.isAntiAlias = true
+            stalkPaint.setARGB(255, 0, 106, 0)
+            stalkPaint.style = Paint.Style.STROKE
+            stalkPaint.strokeWidth = 3f
+            val stalkCircleSize = circleRadius * locationBetweenCenterAndEdge * 1.1f
+            val frame = RectF(canvasWidth.toFloat() / 2 - stalkCircleSize, canvasHeight.toFloat() / 2 - stalkCircleSize, canvasWidth.toFloat() / 2 + stalkCircleSize, canvasHeight.toFloat() / 2 + stalkCircleSize)
+            val stalkLengthInDegrees = 180f * percentageOfGrowth / 100f - 10f
+            canvas.drawArc(frame, 90f, stalkLengthInDegrees, false, stalkPaint )
+            val upperLimitOfRightStalk = (90f - stalkLengthInDegrees + 360) % 360
+            canvas.drawArc(frame, upperLimitOfRightStalk, stalkLengthInDegrees, false, stalkPaint )
+            // left side
+            canvas.withRotation(i * 180.0f / regularSegmentCount, canvasWidth / 2f, canvasHeight / 2f) {
+                // drawBitmap takes corner of the bitmap, we care about centering segments
+                canvas.drawBitmap(bitmap, circleCenterX - decorationSegmentImageWidth / 2f, canvasHeight * locationBetweenCenterAndEdge, antiAliasPaint)
+            }
+
+            // right side
+            val flippedBitmap = bitmap.flipHorizontally()
+            canvas.withRotation(-i * 180.0f / regularSegmentCount, canvasWidth / 2f, canvasHeight / 2f) {
+                canvas.drawBitmap(flippedBitmap, circleCenterX - decorationSegmentImageWidth / 2f, canvasHeight * locationBetweenCenterAndEdge, antiAliasPaint)
+            }
+        }
+    }
+
+    override fun setAlpha(alpha: Int) {
+        // This method is required
+    }
+
+    override fun setColorFilter(colorFilter: ColorFilter?) {
+        // This method is required
+    }
+
+    override fun getOpacity(): Int =
+        // Must be PixelFormat.UNKNOWN, TRANSLUCENT, TRANSPARENT, or OPAQUE
+        PixelFormat.OPAQUE
+}

app/src/main/res/drawable/ic_laurel_leaf_ending.xml

@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16.7dp"
+    android:height="14.774dp"
+    android:viewportWidth="16.7"
+    android:viewportHeight="14.774">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="m3.532,12.369h10.748v0.048h-10.748z"
+      android:strokeWidth="0.713252"
+      android:strokeColor="#065006"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.244816"/>
+  <path
+      android:pathData="m15.784,12.776c-0.92,0.493 -0.3,0.145 -1.049,0.625 -1.515,0.97 -4.763,1.159 -6.519,1.021 -2.601,-0.205 -7.299,-2.103 -7.299,-2.103 0,0 1.664,-0.673 3.317,-1.132 1.264,-0.351 2.585,-0.763 3.913,-0.751 2.447,0.023 6.172,0.913 7.184,1.518 0.562,0.105 0.443,0.033 0.443,0.033z"
+      android:strokeLineJoin="miter"
+      android:strokeWidth="0.14293"
+      android:fillColor="#006a00"
+      android:strokeColor="#00000000"
+      android:strokeLineCap="butt"/>
+</vector>

app/src/main/res/drawable/ic_laurel_leaf_rotated.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16.7dp"
+    android:height="14.774dp"
+    android:viewportWidth="16.7"
+    android:viewportHeight="14.774">
+  <path
+      android:pathData="m13.761,12.048c-0.801,-1.117 -0.944,-1.372 -1.022,-2.259 -0.157,-1.792 -1.992,-4.479 -3.174,-5.785 -1.751,-1.934 -6.933,-4.019 -6.933,-4.019 0,0 1.293,1.252 1.939,2.842 0.494,1.216 1.01,2.788 1.493,3.572 0.989,1.606 1.703,2.689 3.154,3.857 1.871,1.506 2.126,0.406 3.037,0.952 0.477,0.286 1.203,1.123 1.203,1.123z"
+      android:strokeLineJoin="miter"
+      android:strokeWidth="0.14293"
+      android:fillColor="#006a00"
+      android:strokeColor="#00000000"
+      android:strokeLineCap="butt"/>
+</vector>

app/src/main/res/drawable/ic_laurel_leaf_stalk.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16.7dp"
+    android:height="14.774dp"
+    android:viewportWidth="16.7"
+    android:viewportHeight="14.774">
+  <path
+      android:pathData="M2.976,12.355h10.748v0.048h-10.748z"
+      android:strokeWidth="0.713252"
+      android:fillColor="#f9006b"
+      android:strokeColor="#065006"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.244816"/>
+</vector>

app/src/main/res/layout/fragment_profile.xml

@@ -128,8 +128,8 @@
 
                         <TextView
                             android:id="@+id/localRankText"
-                            android:layout_width="64dp"
-                            android:layout_height="64dp"
+                            android:layout_width="84dp"
+                            android:layout_height="84dp"
                             android:background="@drawable/background_inverted_text_circle"
                             android:gravity="center"
                             android:padding="8dp"
@@ -164,8 +164,8 @@
 
                         <TextView
                             android:id="@+id/globalRankText"
-                            android:layout_width="64dp"
-                            android:layout_height="64dp"
+                            android:layout_width="84dp"
+                            android:layout_height="84dp"
                             android:background="@drawable/background_inverted_text_circle"
                             android:gravity="center"
                             android:padding="8dp"
@@ -198,8 +198,8 @@
 
                         <TextView
                             android:id="@+id/daysActiveText"
-                            android:layout_width="64dp"
-                            android:layout_height="64dp"
+                            android:layout_width="84dp"
+                            android:layout_height="84dp"
                             android:background="@drawable/background_inverted_text_circle"
                             android:gravity="center"
                             android:padding="8dp"
@@ -232,8 +232,8 @@
 
                         <TextView
                             android:id="@+id/achievementLevelsText"
-                            android:layout_width="64dp"
-                            android:layout_height="64dp"
+                            android:layout_width="84dp"
+                            android:layout_height="84dp"
                             android:background="@drawable/background_inverted_text_circle"
                             android:gravity="center"
                             android:padding="8dp"

res/graphics/authors.txt

@@ -195,6 +195,10 @@ lanes/
     car4.svg
     car5.svg
 
+laurel_wreath/
+    laurel_leaf_rotated.svg        CC0               Mateusz Konieczny (if even copyright is applicable here)
+    laurel_leaf_ending.svg         CC0               Mateusz Konieczny (if even copyright is applicable here)
+
 links/
     link_neis_one.svg