a lot of new background/musiccs

app/assets/v2/css/quests.css

@@ -68,6 +68,7 @@
   margin-left: 0px;
   padding-left: 0px;
 }
+#you,
 .tags li{
   background-color: #e7f0fa;
   color: var(--gc-blue);
@@ -319,13 +320,13 @@ body.stage_3 #cta_button{
 body.stage_3 #header{
   margin-top: -5%;
 }
-body.stage_4{
+body.back0.stage_4{
   background: url('/static/v2/images/quests/backs/1.gif') repeat !important;
 }
-body.stage_4.question_number_1{
+body.back0.stage_4.question_number_1{
   background: url('/static/v2/images/quests/backs/2.gif') repeat !important;
 }
-body.stage_4.question_number_2{
+body.back0.stage_4.question_number_2{
   background: url('/static/v2/images/quests/backs/3.gif') repeat !important;
 }
 
@@ -425,9 +426,32 @@ body.quest_battle .bottom_notification{
 }
 body.quest_battle{
   font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.7em;
+}
+
+body.back0.quest_battle{
   background: url('/static/v2/images/quests/backs/0.gif') repeat;
   background-size: 150%;
-  font-size: 0.7em;
+}
+body.back1.quest_battle{
+  background: url('/static/v2/images/quests/backs/back1.png') repeat;
+  background-size: 100%;
+}
+body.back2.quest_battle{
+  background: url('/static/v2/images/quests/backs/back2.png') repeat;
+  background-size: 170%;
+}
+body.back3.quest_battle{
+  background: url('/static/v2/images/quests/backs/back3.png') repeat;
+  background-size: 160%;
+}
+body.back4.quest_battle{
+  background: url('/static/v2/images/quests/backs/back4.png') repeat;
+  background-size: 160%;
+}
+body.back5.quest_battle{
+  background: url('/static/v2/images/quests/backs/back5.png') repeat;
+  background-size: 160%;
 }
 #background { 
   position: absolute;
@@ -460,7 +484,7 @@ body.quest_battle{
   background-color: #0c0861;
 }
 #desc li.selected{
-  background-color: #3E00FF;
+  background-color: #3E00FF !important;
 }
 
 #breadcrumbs, #breadcrumbs a{
@@ -485,7 +509,7 @@ body.quest_battle{
     margin-top: -230px;
   }
   .demo{
-    width: 400px;
+    max-width: 400px;
   }
   .tr{
     position: absolute;
@@ -583,7 +607,7 @@ body.quest_battle{
     font-size: 12px;
   }
   .demo{
-    width: 300px;
+    max-width: 300px;
   }  
   .back_gradient {
     background-size: 100% 400px !important;
@@ -606,11 +630,14 @@ body.quest_battle{
     left: 80px;
   }
   .demo{
-    width: 500px;
+    max-width: 500px;
   }  
   .row.indent_on_mobile{
     margin-left: 5%;
   }
+  .quests-hero .hero-p-mobile{
+    margin-left: 20px;
+  }
   .button{
     padding: 10px;
     font-size: 5px;
@@ -633,4 +660,25 @@ body.quest_battle{
   }
 
 }
+@media (max-width: 550px) {
+  .back_gradient {
+    background-size: 100% 600px !important;
+  }
+  .demo{
+    max-width: 90%;
+    margin-left: 5%;
+  }
+  #desc{
+    height: 100px;
+  }
+  #announce{
+    margin-top: 150px;
+  }
+  #announce img{
+    margin-bottom: 30px;
+  }
+  #leaderboard .inner_row {
+    height: 130px;
+  }
+}
 

app/assets/v2/js/pages/quests.js

@@ -5,7 +5,7 @@ var start_quiz = async function() {
   var question_number = 0;
   var should_continue = true;
 
-  start_music_midi('boss-battle');
+  start_music_midi(document.music);
   await sleep(1500);
 
   while (should_continue) {
@@ -150,15 +150,17 @@ var advance_to_state = async function(new_state) {
   }
   $('body').addClass('stage_' + new_state);
 
+  // force login
+  if (!document.contxt['github_handle']) {
+    document.location.href = document.location.href.replace('#', '') + '?login=1';
+  }
+
 
   // -- individual transitions callbacks --
 
   // 0 to 1
   if (old_state == 0 && new_state == 1) {
     await sleep(1000);
-    if (!document.contxt['github_handle']) {
-      document.location.href = document.location.href.replace('#', '') + '?login=1';
-    }
     await $('#header').html('Quest Intro');
     await $('#header').fadeIn();
     await sleep(1000);
@@ -303,8 +305,8 @@ $(document).ready(function() {
   // force the music to load
   setTimeout(function() {
     if (document.quest) {
-      start_music_midi('boss-battle');
-      pause_music_midi('boss-battle');
+      start_music_midi(document.music);
+      pause_music_midi(document.music);
     }
   }, 100);
 
@@ -380,7 +382,7 @@ $(document).ready(function() {
       }
     };
 
-    preload_backgrounds();
+    preload_assets();
   }
 
   $('#protagonist h3').html(trim_dots($('#protagonist h3').text(), 8));
@@ -389,6 +391,7 @@ $(document).ready(function() {
     e.preventDefault();
     $(this).toggleClass('selected');
   });
+
   if (document.quest) {
     start_quest();
   }

app/quests/models.py

@@ -47,14 +47,26 @@ def enemy_img_name(self):
     @property
     def background(self):
         backgrounds = [
-            'camping',
-            'back_city',
-            'city',
-            'night',
+            'back0',
+            'back1',
+            'back2',
+            'back3',
         ]
         which_back = self.pk % len(backgrounds)
         return backgrounds[which_back]
 
+    @property
+    def music(self):
+        musics = [
+            'boss-battle',
+            'boss-battle1',
+            'boss-battle2',
+            'boss-battle3',
+            'boss-battle4',
+        ]
+        idx = self.pk % len(musics)
+        return musics[idx]
+
     @property
     def success_count(self):
         return self.attempts.filter(success=True).count()

app/quests/templates/quests/base.html

@@ -23,7 +23,7 @@
     <link rel="stylesheet" href="{% static "v2/css/quests.css" %}" />
     {% include 'shared/cards_pic.html' %}
   </head>
-  <body class="g-font-muli {{body_class}}">
+  <body class="g-font-muli {{body_class}} {{quest.background}}">
     {% include 'shared/tag_manager_2.html' %}
     {% include 'shared/top_nav.html' with class='d-md-flex' %}
     <div class="container-fluid header dash">

app/quests/templates/quests/index.html

@@ -25,11 +25,11 @@
           <img class="mr-1 demo" src="{% static "v2/images/quests/demo.gif" %}">
         </div>
         <div class="m-auto col-12 col-md-6 offset-lg-1 col-lg-5">
-          <h1 class="font-title-xl font-weight-semibold">A New Way to Explore the Web3 Ecosystem</h1>
-          <p class="my-4 pt-1 font-header">
+          <h1 class="font-title-xl font-weight-semibold hero-p-mobile">A New Way to Explore the Web3 Ecosystem</h1>
+          <p class="hero-p-mobile my-4 pt-1 font-header">
             Gitcoin Quests is a fun, gamified way to learn about the web3 ecosystem, compete with your friends, earn rewards, and level up your decentralization-fu!
           </p>
-          <a id=explore_quests class="btn btn-gc-blue" href="#available_quests">
+          <a id=explore_quests class="hero-p-mobile btn btn-gc-blue" href="#available_quests">
             <img class="mr-1 white-icon" src="{% static "v2/images/products/quests-symbol.svg" %}">
             Explore Quests
           </a>
@@ -208,9 +208,12 @@ <h4><strong>The Devcon 5 Challenge is Live!</strong></h4>
 <div class="row indent_on_mobile">
   <div id=leaderboard>
     {% for item in leaderboard %}
-    <div class="inner_row" style="{% cycle 'background-color: #fafafa;' '' %}";>
+    <div class="inner_row" style="{% if item.0 == github_handle %}background-color: #edf5fc;{%else%}{% cycle 'background-color: #fafafa;' '' %}{%endif%}";>
       <div class="float-left mr-2 ml-2">{{ forloop.counter }}</div>
       <div class="float-left mr-2 ml-2"><img src="/dynamic/avatar/{{item.0}}"><a style="margin-left: 10px; width: 120px;" href="/profile/{{item.0}}">@{{item.0}}</a></div>
+      {% if item.0 == github_handle %}
+        <div id=you style="margin-top: 10px;" class="float-left mr-4 ml-2">You</div>
+      {% endif %}
       <div style="float: right; width: 500px; text-align: right;">
       {% for btr in item.2%}
       <img src="{{btr.0}}" title="{{btr.1}}" style="height: 50px; width: 50px; border-radius: 0px;">

app/quests/templates/quests/quest.html

@@ -101,6 +101,8 @@ <h3>@{% if user and user.username %}{{ user.username }}{% else %}me{% endif %}</
       'name': '{{quest.kudos_reward.ui_name}}',
       'img': '{{quest.kudos_reward.preview_img_url}}'
     };
+
+    document.music = '{{quest.music}}';
     document.quest = {{quest_json|safe}};
     document.attempts = {
       'success_count': parseInt('{{success_count}}'),