:recycle: simplify card view further

backend/lib/schemas/profiles.js

     user_name: Joi.string(),
     user_email: Joi.string(),
     responses: surveyResponseSchema.list,
+    reveal: Joi.array().items(),
     tags: Joi.array().items(),
     user_type: Joi.any(),
     user: userSchema.single,

backend/lib/services/profile.js

         }
         composite.push(prescoreLookup[mKey(aRes)][mKey(bRes)])
     }
+    const scoreAvg = composite.reduce((a, b) => a + b) / composite.length
     return {
-        total: Math.round(composite.reduce((a, b) => a + b) / composite.length),
+        total: Math.round(scoreAvg),
         aspects: composite,
     }
 }
         this.user_name = profile.user.user_name // string user_name
         this.user_email = profile.user.user_email
         this.responses = []
-        this.tags = profile.tags // [] of all tags
         this.user_type = type
+        this.tags = profile.tags.filter(t => t.category != 'reveal')
+        this.reveal = profile.tags.filter(t => t.category == 'reveal')
 
         // TODO: generalize this for multiple images, and languages
         this.profile_description = ''
         this.profile_media = []
         this.profile_languages = []
         this.profile_prefs = {}
+
+        // TODO: filter these correctly
         if (profile?.responses?.length) {
             // [] of all "profile" responses
             this.responses = profile.responses
                     r => r.response_key_id === prefsKeys[i]
                 )[0]
             })
-            // TODO: filter these correctly
             this.profile_description = this.responses.filter(r => r.response_key_id === config.blurbKey).map(r => r.val)[0]
             this.profile_media = this.responses.filter(r => r.response_key_id === config.mediaKey).map(r => r.val)
             this.profile_languages = this.responses.filter(r => r.response_key_id === config.langKey).map(r => r.val)
 module.exports = class ProfileService extends Schmervice.Service {
     constructor(...args) {
         super(...args)
+        /** Scores available in the db to map against score indices*/
         this.scoreLookup = {}
+        /** Tags available in the db to map against tagg_associations*/
         this.tagLookup = {}
         // this.responseKeyLookup = ResponseKey.query()
     }

frontend/src/components/ProfileCardList.vue

 <template lang="pug">
-section.profile_card_list.w-full
-    .profile_card_list_container.w-full
-        .swipe(
-            v-if="!isGrid"
-            :config="config"
-            :key="profile.pid"
-            @throwout="swipped(profile)"
-            v-for="(profile, i) in loadedProfiles"
-            :style="{ 'z-index': 1000-i }"
+section.profile-card-list.w-full
+    .swipe(
+        v-if="!isGrid"
+        :config="config"
+        :key="profile.pid"
+        @throwout="swipped(profile)"
+        v-for="(profile, i) in loadedProfiles"
+        :style="{ 'z-index': 1000-i }"
+    )
+        .card.b-solid.bg-cover.randomize(
+            :style="{ 'background-image': `url(${profile.avatar})`, 'top': `${randomize(10)}px`, 'right': `${randomize(20)}px`, 'transform': `rotate(${randomize(7)}deg)` }"
         )
-            .card.b-solid.rounded.bg-cover.randomize(
-                :style="{ 'background-image': `url(${profile.avatar})`, 'top': `${randomize(10)}px`, 'right': `${randomize(20)}px`, 'transform': `rotate(${randomize(7)}deg)` }"
+            .card--content.f-col.between
+                p(style="color: magenta;").f-grow profile: {{ profile.pid }}
+                .card--content--lower.ph-1.w-full.f-col.between
+                    h4.w-full.pv-1 {{ profile.name }}
+                    nav.swipe_icons.pv-1.w-full.f-grow.f-row
+                        //- Accept
+                        button(@click="accept") Accept
+                        button(@click="view(profile.pid)") view
+                        //- Pass
+                        button(@click="pass") Pass
+    
+    .match-layout(
+        v-else
+        :key="profile.pid"
+        v-for="(profile, i) in loadedProfiles"
+    ).f-row
+            .card.b-solid.bg-cover(
+                :style="{ 'background-image': `url(${profile.avatar})` }"
             )
-                .card__content
-                    h3.p-1.mv-0.b-solid.rounded {{ profile.pid  }} {{ profile.name }}
-                nav.swipe_icons.w-full.f-row.between
-                    //- Accept
-                    button.p-1(@click="accept") Accept
-                    //- Hold
-                    button.p-1(@click="view(profile.pid)") view
-                    //- Pass
-                    button.p-1(@click="pass") Pass
-        
-        .match-layout(
-            v-else
-            :key="profile.pid"
-            v-for="(profile, i) in loadedProfiles"
-        )
-                .card.b-solid.rounded.bg-cover(
-                    :style="{ 'background-image': `url(${profile.avatar})` }"
-                )
-                .card__content
-                    button(@click="view(profile.pid)").p-1.mv-0.b-solid.rounded {{ profile.pid  }} {{ profile.name }}
+                .card--content.f-col.between
+                    p(style="color: magenta;").f-grow profile: {{ profile.pid }}
+                    .card--content--lower.ph-1.w-full.f-col.between
+                        h4.w-full.pv-1 {{ profile.name }}
+                        nav.swipe_icons.pv-1.w-full.f-grow.f-row
+                            button(@click="view(profile.pid)") view
 </template>
 
 <script setup>
 
 const router = useRouter()
 const emit = defineEmits(['reload'])
-// TODO: Please review this conversion from script to script setup
-// converted from the props section
+
 const props = defineProps({
     profiles: {
         type: [Object, Array],
         type: Boolean,
     },
 })
+
 const swipped = profile => {
     const index = loadedProfiles.findIndex(u => u.pid == profile.pid)
     loadedProfiles.splice(index, 1)
     router.push({ path: `/matches/${pid}` })
 }
 const pass = () => {
-    // const charmander = await db.get(`/profile/{profile_id}/queue/{target_id}/delete?include_profile=true&reinsert=true`)
-    const profileId = props.pid
     const targetId = props.profiles[0].pid
-    updateQueueByProfileId(profileId, targetId, true)
+    updateQueueByProfileId(props.pid, targetId, true)
     emit('reload')
 }
 
 </script>
 
 <style lang="postcss">
-.profile_card_list_container
+.profile-card-list
     display: flex
     justify-content: center
 
 .card
     position: relative
     background-color: #fff
-    width: 250px
-    max-width: 85vw
-    height: 50vh
+    height: 60vw
+    width: 40vw
+    max-height: 600px
+    max-width: 400px
     background-position: center
-    &_content
+    &--content
         width: 100%
         height: 100%
-    h3
-        position: absolute
-        bottom: 0
+        font-size: 3vw
+        &--lower
+            background-color: goldenrod
+            nav > button
+                font-size: 2vw
+
 
-.swipe_icons
-    position: fixed
-    bottom: 5vh
-    width: 250px
 </style>

frontend/src/entities/profile/profile.schema.js

         /** fields that should match backend service*/
         user_name: Joi.string(),
         user_id: Joi.number(),
+        user_email: Joi.string(),
         profile_id: Joi.number(),
         profile_description: Joi.string(),
         profile_media: Joi.array().items(Joi.string()),
         profile_languages: Joi.array().items(Joi.string()),
         profile_prefs: Joi.object(),
         responses: Joi.array().items(responseSchema), // response entity schema goes here
+        reveal: Joi.array().items(),
         tags: Joi.array().items(),
         user_type: Joi.string(),
 

frontend/src/router/guards.js

 
 
 const checkLoginStatus = (destination, nextCb) => {
-    console.warn(`profile: ${currentProfile.id.value} | login:${currentProfile.isLoggedIn} | completed: ${currentProfile.isComplete}`)
-    
+    if(!currentProfile.isLoggedIn || !currentProfile.isComplete) {
+        console.warn(`profile: ${currentProfile.id.value} | login: ${currentProfile.isLoggedIn} | completed: ${currentProfile.isComplete}`)
+    }
     if (
         destination.meta.requiresCompleteProfile &&
         !currentProfile.isLoggedIn &&

frontend/src/views/ProfileView.vue

  
     article(v-if="!loading")
         h3 name: {{ profile.user_name }}
-            span(v-if="profile.user_email") | email: {{ profile.user_email }}
-        h5(v-if="profile.profile_prefs.pronouns") My pronouns are {{ profile.profile_prefs.pronouns.val }}
+            span(v-if="profile.profile_prefs.pronouns")  ({{ profile.profile_prefs.pronouns.val }})
+        p(v-if="profile.user_email") {{ profile.user_email }}
         
         p I am looking for a 
             span {{ profile.profile_prefs.presence.val }} 
             span no further than {{ profile.profile_prefs.distance.val }} miles away 
             span from {{ profile.profile_prefs.zipcode.val }}
 
-        p About: {{ profile.profile_description}}
         p I am {{ profile.profile_prefs.urgency.val.split("_").join(" ") }}.
+        
+        img(v-if="profile.reveal.map(t => t.description).includes('image')" :src="profile.profile_media[0]" alt="profile-avatar" style="max-height: 200px; width: auto;")
+        h3(v-else) image not revealed
+        
+        p About: {{ profile.profile_description}}
 
-        p tags: {{ profile.tags }}
+        p reveal: {{ profile.reveal.map(t => t.description) }}
+        p tags: {{ profile.tags.map(t => t.description) }}
         p images: {{ profile.profile_media }}
         p responses: {{ profile.responses.length }}
         button(@click="$router.go(-1)") back

frontend/src/views/SurveyView.vue

     props: {
         pid: {
             type: Number,
-            required: true,
         },
     },
     data() {