Fixed css/js/html

app/bloonsa_api/views.py

@@ -142,9 +142,13 @@ class GetStatusData(CSRFexemptTemplateView):
         player: Player = Player.objects.get(user=request.user)
         score: LevelScore = LevelScore.objects.filter(player=player,
                                           level=level).first()
+
         total_levels = Level.objects.count()
         level_cleared = player.has_beaten_bloonsa_level(level=level)
-
+        level_plays = level.play_count
+        level_wins = level.win_count
+        level_win_percentage = 0.00 if level_wins == 0 else level_wins / level_plays
+        dart_glitch_count = level.dart_glitch_count
         jdata = {
             "bloonsa_levels_played": player.bloonsa_levels_played_count,
             "bloonsa_levels_beaten": player.bloonsa_levels_beaten_count,
@@ -155,9 +159,17 @@ class GetStatusData(CSRFexemptTemplateView):
             "level_title": level.title,
             "level_id": level.level_id,
             "level_legacy_plays": level.plays,
-            "level_plays": level.play_count,
+            "level_legacy_rating": level.rating,
-            "level_rating": level.rating,
+            "level_darts": level.darts,
+            "level_target": level.target,
             "level_cleared": level_cleared,
+
+            "level_rating": level.stars,
+            "level_plays": level_plays,
+            "level_wins": level_wins,
+            "level_win_percentage": level_win_percentage,
+            "dart_glitch_count": dart_glitch_count,
+
         }
         if score:
             jdata.update({

app/bloonsa_game/migrations/0022_alter_levelrating_level.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.1.6 on 2025-02-17 07:14
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bloonsa_game', '0021_alter_levelscore_player'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='levelrating',
+            name='level',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='bloonsa_level_ratings', to='bloonsa_game.level'),
+        ),
+    ]

app/bloonsa_game/models.py

@@ -1,5 +1,8 @@
+import math
+
 from django.core.validators import MinValueValidator, MaxValueValidator
 from django.db import models
+from django.db.models import Avg
 
 from users.models import Player
 
@@ -28,6 +31,20 @@ class Level(models.Model):
     def play_count(self):
         return self.played_by.count()
 
+    @property
+    def win_count(self):
+        return LevelScore.objects.filter(level=self, clear=True).count()
+
+    @property
+    def dart_glitch_count(self):
+        return LevelScore.objects.filter(level=self, dart_glitch=True).count()
+
+    @property
+    def stars(self):
+        result = list(self.bloonsa_level_ratings.aggregate(Avg("rating")).values())[0]
+        return 0 if result is None else math.floor(result)
+
+
     def __str__(self):
         return f"{self.author} - {self.title}"
 
@@ -48,10 +65,11 @@ class Level(models.Model):
 
 class LevelRating(models.Model):
     player = models.ForeignKey(Player, on_delete=models.CASCADE, related_name="bloonsa_level_ratings", null=True)
-    level = models.ForeignKey(Level, on_delete=models.CASCADE)
+    level = models.ForeignKey(Level, on_delete=models.CASCADE, related_name="bloonsa_level_ratings")
     rating = models.SmallIntegerField(validators=[MinValueValidator(1),
                                                   MaxValueValidator(10)])
 
+
     def __str__(self):
         return (f"{self.player.user.username if self.player else ''}"
                 f" - [<{int(self.rating) * '★'}> - {self.level.title}]")

app/bloonsa_game/static/bloonsa_game/css/levelinfo.css

@@ -27,13 +27,12 @@
   flex-grow: 1;
 }
 
-#level-title {
+#level-title, #level-author, #level-pb-darts {
-  font-size: 24px;
+    white-space: pre;
-  white-space: pre;
 }
 
-#level-author {
+#level-title {
-  white-space: pre;
+  font-size: 24px;
 }
 
 #level-stats {
@@ -81,7 +80,7 @@
 }
 
 .level-wins-img, .level-glitches-img {
-    filter: invert(75%) sepia(23%) saturate(6404%) hue-rotate(355deg) brightness(98%) contrast(107%);  // orange
+    filter: invert(75%) sepia(23%) saturate(6404%) hue-rotate(355deg) brightness(98%) contrast(107%) !important;  // orange
 }
 .level-plays-img {
     filter: invert(17%) sepia(2%) saturate(72%) hue-rotate(66deg) brightness(94%) contrast(89%);  // grey
@@ -92,4 +91,12 @@
 .level-darts-img {
     filter: invert(0%) sepia(96%) saturate(15%) hue-rotate(246deg) brightness(105%) contrast(105%);  // black
 }
-
+.filter-black {
+    filter: invert(0%) sepia(96%) saturate(15%) hue-rotate(246deg) brightness(105%) contrast(105%);  // black
+}
+.filter-softblue {
+    filter: invert(53%) sepia(93%) saturate(488%) hue-rotate(182deg) brightness(103%) contrast(103%);
+}
+.filter-orange {
+    filter: invert(75%) sepia(23%) saturate(6404%) hue-rotate(355deg) brightness(98%) contrast(107%) !important;  // orange
+}

app/bloonsa_game/static/bloonsa_game/img/levelinfo/star.svg

@@ -1,11 +1,3 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
+<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 47.94 47.94" xml:space="preserve">
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<path style="fill:#000000;" d="M26.285,2.486l5.407,10.956c0.376,0.762,1.103,1.29,1.944,1.412l12.091,1.757  c2.118,0.308,2.963,2.91,1.431,4.403l-8.749,8.528c-0.608,0.593-0.886,1.448-0.742,2.285l2.065,12.042  c0.362,2.109-1.852,3.717-3.746,2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403,0l-10.814,5.685  c-1.894,0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528  c-1.532-1.494-0.687-4.096,1.431-4.403l12.091-1.757c0.841-0.122,1.568-0.65,1.944-1.412l5.407-10.956  C22.602,0.567,25.338,0.567,26.285,2.486z"/>
-<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 47.94 47.94" xml:space="preserve">
-<path style="fill:#ED8A19;" d="M26.285,2.486l5.407,10.956c0.376,0.762,1.103,1.29,1.944,1.412l12.091,1.757
-	c2.118,0.308,2.963,2.91,1.431,4.403l-8.749,8.528c-0.608,0.593-0.886,1.448-0.742,2.285l2.065,12.042
-	c0.362,2.109-1.852,3.717-3.746,2.722l-10.814-5.685c-0.752-0.395-1.651-0.395-2.403,0l-10.814,5.685
-	c-1.894,0.996-4.108-0.613-3.746-2.722l2.065-12.042c0.144-0.837-0.134-1.692-0.742-2.285l-8.749-8.528
-	c-1.532-1.494-0.687-4.096,1.431-4.403l12.091-1.757c0.841-0.122,1.568-0.65,1.944-1.412l5.407-10.956
-	C22.602,0.567,25.338,0.567,26.285,2.486z"/>
 </svg>

app/bloonsa_game/static/bloonsa_game/js/flash_handler.js

@@ -30,19 +30,63 @@ function bloonsa_update_data(level_id) {
     }));
 }
 
+function set_stars(rating) {
+    for (let i = 0; i < 10; i++) {
+        let star = document.getElementById(`level-star${i}`);
+        if (i < rating) {
+            star.classList.add("filter-orange")
+        } else {
+            star.classList.remove("filter-orange")
+        }
+    };
+}
+
 function bloonsa_update_html(r) {
-    document.getElementById("level_title").textContent = r.level_title;
+    // Level Infobox
-    document.getElementById("level_id").textContent = `(${r.level_id})`;
+    document.getElementById("level-name").textContent = r.level_title;
-    document.getElementById("level_author").textContent = `by ${r.level_author_name}`;
+    document.getElementById("level-id").textContent = `${r.level_id}`;
-    document.getElementById("level_author_id").textContent = `(${r.level_author_id})`;
+    document.getElementById("level-author-name").textContent = r.level_author_name;
-    if (r.level_cleared) {
+    document.getElementById("level-author-id").textContent = `${r.level_author_id}`;
-        document.getElementById("level_clear_state").textContent = `✅`;
+
+    set_stars(r.level_rating);
+
+    document.getElementById("level-wins-number").textContent = r.level_wins;
+    document.getElementById("level-wins-percentage").textContent = (r.level_win_percentage * 100).toFixed(2) + "%";
+    document.getElementById("level-plays-number").textContent = r.level_plays;
+    document.getElementById("level-glitch-number").textContent = r.dart_glitch_count;
+
+    // Personal best
+    var darts_img = document.getElementById("level-pb-darts-img");
+    if ("score_pops" in r) {
+        document.getElementById("level-pb-pops-number").textContent = r.score_pops;
+        document.getElementById("level-target").textContent = r.level_target;
+        document.getElementById("level-pb-darts-number").textContent = r.score_darts_left;
+        document.getElementById("level-pb-darts-glitch").textContent = r.score_dart_glitch ? "+1": "";
+
+        if (r.score_dart_glitch) {
+            darts_img.classList.add("level-glitches-img");
+        } else {
+            darts_img.classList.remove("level-glitches-img");
+        }
+
     } else {
-        document.getElementById("level_clear_state").textContent = ``;
+        document.getElementById("level-pb-pops-number").textContent = "0";
+        document.getElementById("level-target").textContent = r.level_target;
+        document.getElementById("level-pb-darts-number").textContent = "-";
+        document.getElementById("level-pb-darts-glitch").textContent = "";
+        darts_img.classList.remove("level-glitches-img");
     }
-    document.getElementById("levels_played").textContent = `${r.bloonsa_levels_played}`;
+
-    document.getElementById("levels_beaten").textContent = `${r.bloonsa_levels_beaten}`;
+
-    document.getElementById("total_levels").textContent = `${r.bloonsa_total_levels}`;
+
+
+    //if (r.level_cleared) {
+
+
+    // Profile
+    document.getElementById("levels_played").textContent = r.bloonsa_levels_played;
+    document.getElementById("levels_beaten").textContent = r.bloonsa_levels_beaten;
+    document.getElementById("total_levels").textContent = r.bloonsa_total_levels;
 
 
 

app/bloonsa_game/templates/bloonsa_game/modules/levelinfo.html

@@ -17,7 +17,10 @@
 
             <div id=level-stars>
                 {% for i in '0123456789' %}
-                    <object data="{% static 'bloonsa_game/img/levelinfo/star.svg' %}" class="level-star-img level-star{{i}}" type="image/svg+xml"></object>
+                    <object data="{% static 'bloonsa_game/img/levelinfo/star.svg' %}"
+                            class="level-star-img filter-softblue"
+                            id="level-star{{i}}"
+                            type="image/svg+xml"></object>
                 {% endfor %}
             </div>
 
@@ -25,7 +28,8 @@
                 <div id="level-wins">
                     <object data="{% static 'bloonsa_game/img/levelinfo/wins.svg' %}" class="level-wins-img" type="image/svg+xml"></object>
                     <span id="level-wins-number">7</span>
-                    <span id="level-wins-percentage"> (2.87%)</span>
+                    <span> </span>
+                    <span id="level-wins-percentage">(2.87%)</span>
                 </div>
                 <div id="level-plays">
                     <object data="{% static 'bloonsa_game/img/levelinfo/plays.svg' %}" class="level-plays-img" type="image/svg+xml"></object>
@@ -44,12 +48,13 @@
                     <object data="{% static 'bloonsa_game/img/levelinfo/bloon.svg' %}" class="level-pops-img" type="image/svg+xml"></object>
                     <span id="level-pb-pops-number">126</span>
                     <span id="level-pb-pops-separator"> / </span>
-                    <span id="level-pops-required">120</span>
+                    <span id="level-target">120</span>
                 </div>
                 <div id="level-pb-darts">
-                    <object data="{% static 'bloonsa_game/img/levelinfo/dart.svg' %}" class="level-darts-img"></object>
+                    <object data="{% static 'bloonsa_game/img/levelinfo/dart.svg' %}" class="level-darts-img" id="level-pb-darts-img"></object>
                     <span id="level-pb-darts-number">2</span>
-                    <span id="level-pb-darts-glitch"> +1</span>
+                    <span> </span>
+                    <span id="level-pb-darts-glitch">+1</span>
                 </div>
             </div>
         </div>