pug to html

website/client/src/components/groups/questSidebarSection.vue

@@ -1,68 +1,169 @@
-<template lang="pug">
-sidebar-section(:title="$t('questDetailsTitle')")
-  .row.no-quest-section(v-if='!onPendingQuest && !onActiveQuest')
-    .col-12.text-center
-      .svg-icon(v-html="icons.questIcon")
-      h4(v-once) {{ $t('youAreNotOnQuest') }}
-      p(v-once) {{ $t('questDescription') }}
-      button.btn.btn-secondary(v-once, @click="openStartQuestModal()") {{ $t('startAQuest') }}
-  .row.quest-active-section(v-if='onPendingQuest && !onActiveQuest')
-    .col-2
-      .quest(:class='`inventory_quest_scroll_${questData.key}`')
-    .col-6.titles
-      strong {{ questData.text() }}
-      p {{acceptedCount}} / {{group.memberCount}}
-    .col-4
-      button.btn.btn-secondary(@click="openQuestDetails()") {{ $t('details') }}
-  .row.quest-active-section.quest-invite(v-if='user.party.quest && user.party.quest.RSVPNeeded')
-    span {{ $t('wouldYouParticipate') }}
-    button.btn.btn-primary.accept(@click='questAccept(group._id)') {{$t('accept')}}
-    button.btn.btn-primary.reject(@click='questReject(group._id)') {{$t('reject')}}
-  .row.quest-active-section(v-if='!onPendingQuest && onActiveQuest')
-    .col-12.text-center
-      .quest-boss(:class="'quest_' + questData.key")
-      h3(v-once) {{ questData.text() }}
-      .quest-box
-        .collect-info(v-if='questData.collect')
-          .row
-            .col-12
-              a.float-right(@click="openParticipantList()") {{ $t('participantsTitle') }}
-          .row(v-for='(value, key) in questData.collect')
-            .col-2
-              div(:class="'quest_' + questData.key + '_' + key")
-            .col-10
-              strong {{value.text()}}
-              .grey-progress-bar
-                .collect-progress-bar(:style="{width: (group.quest.progress.collect[key] / value.count) * 100 + '%'}")
-              strong {{group.quest.progress.collect[key]}} / {{value.count}}
-          div.text-right(v-if='userIsOnQuest') {{parseFloat(user.party.quest.progress.collectedItems) || 0}} items found
-        .boss-info(v-if='questData.boss')
-          .row
-            .col-6
-              h4.float-left(v-once) {{ questData.boss.name() }}
-            .col-6
-              a.float-right(@click="openParticipantList()") {{ $t('participantsTitle') }}
-          .row
-            .col-12
-              .grey-progress-bar
-                .boss-health-bar(:style="{width: bossHpPercent + '%'}")
-          .row.boss-details
-            .col-6
-              span.float-left
-                | {{ Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100 }} / {{ parseFloat(questData.boss.hp).toFixed(2) }}
-                // current boss hp uses ceil so you don't underestimate damage needed to end quest
-            .col-6(v-if='userIsOnQuest')
-              // @TODO: Why do we not sync quest progress on the group doc? Each user could have different progress.
-              span.float-right {{ user.party.quest.progress.up | floor(10) }} {{ $t('pendingDamageLabel') }}
-              // player's pending damage uses floor so you don't overestimate damage you've already done
-          .row.rage-bar-row(v-if='questData.boss.rage')
-            .col-12
-              .grey-progress-bar
-                .boss-health-bar.rage-bar(:style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}")
-          .row.boss-details.rage-details(v-if='questData.boss.rage')
-              .col-6
-                span.float-left {{ $t('rage') }} {{ parseFloat(group.quest.progress.rage).toFixed(2) }} / {{ questData.boss.rage.value }}
-      button.btn.btn-secondary(v-once, @click="questAbort()", v-if='canEditQuest') {{ $t('abort') }}
+<template>
+  <sidebar-section :title="$t('questDetailsTitle')">
+    <div
+      v-if="!onPendingQuest && !onActiveQuest"
+      class="row no-quest-section"
+    >
+      <div class="col-12 text-center">
+        <div
+          class="svg-icon"
+          v-html="icons.questIcon"
+        ></div><h4 v-once>
+          {{ $t('youAreNotOnQuest') }}
+        </h4><p v-once>
+          {{ $t('questDescription') }}
+        </p><button
+          v-once
+          class="btn btn-secondary"
+          @click="openStartQuestModal()"
+        >
+          {{ $t('startAQuest') }}
+        </button>
+      </div>
+    </div><div
+      v-if="onPendingQuest && !onActiveQuest"
+      class="row quest-active-section"
+    >
+      <div class="col-2">
+        <div
+          class="quest"
+          :class="`inventory_quest_scroll_${questData.key}`"
+        ></div>
+      </div><div class="col-6 titles">
+        <strong>{{ questData.text() }}</strong><p>{{ acceptedCount }} / {{ group.memberCount }}</p>
+      </div><div class="col-4">
+        <button
+          class="btn btn-secondary"
+          @click="openQuestDetails()"
+        >
+          {{ $t('details') }}
+        </button>
+      </div>
+    </div><div
+      v-if="user.party.quest && user.party.quest.RSVPNeeded"
+      class="row quest-active-section quest-invite"
+    >
+      <span>{{ $t('wouldYouParticipate') }}</span><button
+        class="btn btn-primary accept"
+        @click="questAccept(group._id)"
+      >
+        {{ $t('accept') }}
+      </button><button
+        class="btn btn-primary reject"
+        @click="questReject(group._id)"
+      >
+        {{ $t('reject') }}
+      </button>
+    </div><div
+      v-if="!onPendingQuest && onActiveQuest"
+      class="row quest-active-section"
+    >
+      <div class="col-12 text-center">
+        <div
+          class="quest-boss"
+          :class="'quest_' + questData.key"
+        ></div><h3 v-once>
+          {{ questData.text() }}
+        </h3><div class="quest-box">
+          <div
+            v-if="questData.collect"
+            class="collect-info"
+          >
+            <div class="row">
+              <div class="col-12">
+                <a
+                  class="float-right"
+                  @click="openParticipantList()"
+                >{{ $t('participantsTitle') }}</a>
+              </div>
+            </div><div
+              v-for="(value, key) in questData.collect"
+              class="row"
+            >
+              <div class="col-2">
+                <div :class="'quest_' + questData.key + '_' + key"></div>
+              </div><div class="col-10">
+                <strong>{{ value.text() }}</strong><div class="grey-progress-bar">
+                  <div
+                    class="collect-progress-bar"
+                    :style="{width: (group.quest.progress.collect[key] / value.count) * 100 + '%'}"
+                  ></div>
+                </div><strong>{{ group.quest.progress.collect[key] }} / {{ value.count }}</strong>
+              </div>
+            </div><div
+              v-if="userIsOnQuest"
+              class="text-right"
+            >
+              {{ parseFloat(user.party.quest.progress.collectedItems) || 0 }} items found
+            </div>
+          </div><div
+            v-if="questData.boss"
+            class="boss-info"
+          >
+            <div class="row">
+              <div class="col-6">
+                <h4
+                  v-once
+                  class="float-left"
+                >
+                  {{ questData.boss.name() }}
+                </h4>
+              </div><div class="col-6">
+                <a
+                  class="float-right"
+                  @click="openParticipantList()"
+                >{{ $t('participantsTitle') }}</a>
+              </div>
+            </div><div class="row">
+              <div class="col-12">
+                <div class="grey-progress-bar">
+                  <div
+                    class="boss-health-bar"
+                    :style="{width: bossHpPercent + '%'}"
+                  ></div>
+                </div>
+              </div>
+            </div><div class="row boss-details">
+              <div class="col-6">
+                <span class="float-left">{{ Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100 }} / {{ parseFloat(questData.boss.hp).toFixed(2) }}<!-- current boss hp uses ceil so you don't underestimate damage needed to end quest--></span>
+              </div><div
+                v-if="userIsOnQuest"
+                class="col-6"
+              >
+                <!-- @TODO: Why do we not sync quest progress on the group doc? Each user could have different progress.--><span class="float-right">{{ user.party.quest.progress.up | floor(10) }} {{ $t('pendingDamageLabel') }}</span><!-- player's pending damage uses floor so you don't overestimate damage you've already done-->
+              </div>
+            </div><div
+              v-if="questData.boss.rage"
+              class="row rage-bar-row"
+            >
+              <div class="col-12">
+                <div class="grey-progress-bar">
+                  <div
+                    class="boss-health-bar rage-bar"
+                    :style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}"
+                  ></div>
+                </div>
+              </div>
+            </div><div
+              v-if="questData.boss.rage"
+              class="row boss-details rage-details"
+            >
+              <div class="col-6">
+                <span class="float-left">{{ $t('rage') }} {{ parseFloat(group.quest.progress.rage).toFixed(2) }} / {{ questData.boss.rage.value }}</span>
+              </div>
+            </div>
+          </div>
+        </div><button
+          v-if="canEditQuest"
+          v-once
+          class="btn btn-secondary"
+          @click="questAbort()"
+        >
+          {{ $t('abort') }}
+        </button>
+      </div>
+    </div>
+  </sidebar-section>
 </template>
 
 <style lang="scss" scoped>