pug to html
This commit is contained in:
Matteo Pagliazzi
@@ -1,23 +1,31 @@
|
||||
<template lang="pug">
|
||||
#body.section.customize-section
|
||||
sub-menu.text-center(:items="items", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
|
||||
div(v-if='activeSubPage === "size"')
|
||||
customize-options(
|
||||
:items="sizes",
|
||||
:currentValue="user.preferences.size"
|
||||
)
|
||||
div(v-if='activeSubPage === "shirt"')
|
||||
customize-options(
|
||||
:items="freeShirts",
|
||||
:currentValue="user.preferences.shirt"
|
||||
)
|
||||
customize-options(
|
||||
v-if='editing',
|
||||
:items='specialShirts',
|
||||
:currentValue="user.preferences.shirt",
|
||||
:fullSet='!userOwnsSet("shirt", specialShirtKeys)',
|
||||
@unlock='unlock(`shirt.${specialShirtKeys.join(",shirt.")}`)'
|
||||
)
|
||||
<template>
|
||||
<div
|
||||
id="body"
|
||||
class="section customize-section"
|
||||
>
|
||||
<sub-menu
|
||||
class="text-center"
|
||||
:items="items"
|
||||
:active-sub-page="activeSubPage"
|
||||
@changeSubPage="changeSubPage($event)"
|
||||
/><div v-if="activeSubPage === 'size'">
|
||||
<customize-options
|
||||
:items="sizes"
|
||||
:current-value="user.preferences.size"
|
||||
/>
|
||||
</div><div v-if="activeSubPage === 'shirt'">
|
||||
<customize-options
|
||||
:items="freeShirts"
|
||||
:current-value="user.preferences.shirt"
|
||||
/><customize-options
|
||||
v-if="editing"
|
||||
:items="specialShirts"
|
||||
:current-value="user.preferences.shirt"
|
||||
:full-set="!userOwnsSet('shirt', specialShirtKeys)"
|
||||
@unlock="unlock(`shirt.${specialShirtKeys.join(',shirt.')}`)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,25 +1,55 @@
|
||||
<template lang="pug">
|
||||
.customize-options(:class="{'background-set': fullSet}")
|
||||
.outer-option-background(
|
||||
v-for='option in items',
|
||||
:key='option.key',
|
||||
@click='option.click(option)',
|
||||
:class='{locked: option.gemLocked || option.goldLocked, premium: Boolean(option.gem), active: option.active || currentValue === option.key, none: option.none, hide: option.hide }'
|
||||
)
|
||||
.option
|
||||
.sprite.customize-option(:class='option.class')
|
||||
.redline-outer(v-if="option.none")
|
||||
.redline
|
||||
.gem-lock(v-if='option.gemLocked')
|
||||
.svg-icon.gem(v-html='icons.gem')
|
||||
span {{ option.gem }}
|
||||
.gold-lock(v-if='option.goldLocked')
|
||||
.svg-icon.gold(v-html='icons.gold')
|
||||
span {{ option.gold }}
|
||||
.purchase-set(v-if='fullSet', @click='unlock()')
|
||||
span.label {{ $t('purchaseAll') }}
|
||||
.svg-icon.gem(v-html='icons.gem')
|
||||
span.price 5
|
||||
<template>
|
||||
<div
|
||||
class="customize-options"
|
||||
:class="{'background-set': fullSet}"
|
||||
>
|
||||
<div
|
||||
v-for="option in items"
|
||||
:key="option.key"
|
||||
class="outer-option-background"
|
||||
:class="{locked: option.gemLocked || option.goldLocked, premium: Boolean(option.gem), active: option.active || currentValue === option.key, none: option.none, hide: option.hide }"
|
||||
@click="option.click(option)"
|
||||
>
|
||||
<div class="option">
|
||||
<div
|
||||
class="sprite customize-option"
|
||||
:class="option.class"
|
||||
>
|
||||
<div
|
||||
v-if="option.none"
|
||||
class="redline-outer"
|
||||
>
|
||||
<div class="redline"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="option.gemLocked"
|
||||
class="gem-lock"
|
||||
>
|
||||
<div
|
||||
class="svg-icon gem"
|
||||
v-html="icons.gem"
|
||||
></div><span>{{ option.gem }}</span>
|
||||
</div><div
|
||||
v-if="option.goldLocked"
|
||||
class="gold-lock"
|
||||
>
|
||||
<div
|
||||
class="svg-icon gold"
|
||||
v-html="icons.gold"
|
||||
></div><span>{{ option.gold }}</span>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="fullSet"
|
||||
class="purchase-set"
|
||||
@click="unlock()"
|
||||
>
|
||||
<span class="label">{{ $t('purchaseAll') }}</span><div
|
||||
class="svg-icon gem"
|
||||
v-html="icons.gem"
|
||||
></div><span class="price">5</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,38 +1,53 @@
|
||||
<template lang="pug">
|
||||
#extra.section.container.customize-section
|
||||
sub-menu.text-center(:items="extraSubMenuItems", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
|
||||
|
||||
#hair-color(v-if='activeSubPage === "glasses"')
|
||||
customize-options(
|
||||
:items="eyewear"
|
||||
)
|
||||
|
||||
#animal-ears(v-if='activeSubPage === "ears"')
|
||||
customize-options(
|
||||
:items="animalItems('headAccessory')",
|
||||
:fullSet='!animalItemsOwned("headAccessory")',
|
||||
@unlock='unlock(animalItemsUnlockString("headAccessory"))'
|
||||
)
|
||||
|
||||
#animal-tails(v-if='activeSubPage === "tails"')
|
||||
customize-options(
|
||||
:items="animalItems('back')",
|
||||
:fullSet='!animalItemsOwned("back")',
|
||||
@unlock='unlock(animalItemsUnlockString("back"))'
|
||||
)
|
||||
#headband(v-if='activeSubPage === "headband"')
|
||||
customize-options(
|
||||
:items="headbands",
|
||||
)
|
||||
|
||||
#wheelchairs(v-if='activeSubPage === "wheelchair"')
|
||||
customize-options(
|
||||
:items="chairs",
|
||||
)
|
||||
#flowers(v-if='activeSubPage === "flower"')
|
||||
customize-options(
|
||||
:items="flowers",
|
||||
)
|
||||
<template>
|
||||
<div
|
||||
id="extra"
|
||||
class="section container customize-section"
|
||||
>
|
||||
<sub-menu
|
||||
class="text-center"
|
||||
:items="extraSubMenuItems"
|
||||
:active-sub-page="activeSubPage"
|
||||
@changeSubPage="changeSubPage($event)"
|
||||
/><div
|
||||
v-if="activeSubPage === 'glasses'"
|
||||
id="hair-color"
|
||||
>
|
||||
<customize-options :items="eyewear" />
|
||||
</div><div
|
||||
v-if="activeSubPage === 'ears'"
|
||||
id="animal-ears"
|
||||
>
|
||||
<customize-options
|
||||
:items="animalItems('headAccessory')"
|
||||
:full-set="!animalItemsOwned('headAccessory')"
|
||||
@unlock="unlock(animalItemsUnlockString('headAccessory'))"
|
||||
/>
|
||||
</div><div
|
||||
v-if="activeSubPage === 'tails'"
|
||||
id="animal-tails"
|
||||
>
|
||||
<customize-options
|
||||
:items="animalItems('back')"
|
||||
:full-set="!animalItemsOwned('back')"
|
||||
@unlock="unlock(animalItemsUnlockString('back'))"
|
||||
/>
|
||||
</div><div
|
||||
v-if="activeSubPage === 'headband'"
|
||||
id="headband"
|
||||
>
|
||||
<customize-options :items="headbands" />
|
||||
</div><div
|
||||
v-if="activeSubPage === 'wheelchair'"
|
||||
id="wheelchairs"
|
||||
>
|
||||
<customize-options :items="chairs" />
|
||||
</div><div
|
||||
v-if="activeSubPage === 'flower'"
|
||||
id="flowers"
|
||||
>
|
||||
<customize-options :items="flowers" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,44 +1,65 @@
|
||||
<template lang="pug">
|
||||
#hair.section.customize-section
|
||||
sub-menu.text-center(:items="hairSubMenuItems", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
|
||||
|
||||
#hair-color(v-if='activeSubPage === "color"')
|
||||
customize-options(
|
||||
:items="freeHairColors",
|
||||
:currentValue="user.preferences.hair.color"
|
||||
)
|
||||
|
||||
div(v-if='editing && set.key !== "undefined"', v-for='set in seasonalHairColors')
|
||||
customize-options(
|
||||
:items='set.options',
|
||||
:currentValue="user.preferences.skin",
|
||||
:fullSet='!hideSet(set) && !userOwnsSet("hair", set.keys, "color")',
|
||||
@unlock='unlock(`hair.color.${set.keys.join(",hair.color.")}`)'
|
||||
)
|
||||
|
||||
#style(v-if='activeSubPage === "style"')
|
||||
div(v-for='set in styleSets')
|
||||
customize-options(
|
||||
:items='set.options',
|
||||
:fullSet='set.fullSet',
|
||||
@unlock='set.unlock()'
|
||||
)
|
||||
#bangs(v-if='activeSubPage === "bangs"')
|
||||
customize-options(
|
||||
:items='hairBangs',
|
||||
:currentValue="user.preferences.hair.bangs"
|
||||
)
|
||||
#facialhair(v-if='activeSubPage === "facialhair"')
|
||||
customize-options(
|
||||
v-if='editing',
|
||||
:items='mustacheList'
|
||||
)
|
||||
customize-options(
|
||||
v-if='editing',
|
||||
:items='beardList',
|
||||
:fullSet='isPurchaseAllNeeded("hair", ["baseHair5", "baseHair6"], ["mustache", "beard"])',
|
||||
@unlock='unlock(`hair.mustache.${baseHair5Keys.join(",hair.mustache.")},hair.beard.${baseHair6Keys.join(",hair.beard.")}`)'
|
||||
)
|
||||
<template>
|
||||
<div
|
||||
id="hair"
|
||||
class="section customize-section"
|
||||
>
|
||||
<sub-menu
|
||||
class="text-center"
|
||||
:items="hairSubMenuItems"
|
||||
:active-sub-page="activeSubPage"
|
||||
@changeSubPage="changeSubPage($event)"
|
||||
/><div
|
||||
v-if="activeSubPage === 'color'"
|
||||
id="hair-color"
|
||||
>
|
||||
<customize-options
|
||||
:items="freeHairColors"
|
||||
:current-value="user.preferences.hair.color"
|
||||
/><div
|
||||
v-for="set in seasonalHairColors"
|
||||
v-if="editing && set.key !== 'undefined'"
|
||||
>
|
||||
<customize-options
|
||||
:items="set.options"
|
||||
:current-value="user.preferences.skin"
|
||||
:full-set="!hideSet(set) && !userOwnsSet('hair', set.keys, 'color')"
|
||||
@unlock="unlock(`hair.color.${set.keys.join(',hair.color.')}`)"
|
||||
/>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="activeSubPage === 'style'"
|
||||
id="style"
|
||||
>
|
||||
<div v-for="set in styleSets">
|
||||
<customize-options
|
||||
:items="set.options"
|
||||
:full-set="set.fullSet"
|
||||
@unlock="set.unlock()"
|
||||
/>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="activeSubPage === 'bangs'"
|
||||
id="bangs"
|
||||
>
|
||||
<customize-options
|
||||
:items="hairBangs"
|
||||
:current-value="user.preferences.hair.bangs"
|
||||
/>
|
||||
</div><div
|
||||
v-if="activeSubPage === 'facialhair'"
|
||||
id="facialhair"
|
||||
>
|
||||
<customize-options
|
||||
v-if="editing"
|
||||
:items="mustacheList"
|
||||
/><customize-options
|
||||
v-if="editing"
|
||||
:items="beardList"
|
||||
:full-set="isPurchaseAllNeeded('hair', ['baseHair5', 'baseHair6'], ['mustache', 'beard'])"
|
||||
@unlock="unlock(`hair.mustache.${baseHair5Keys.join(',hair.mustache.')},hair.beard.${baseHair6Keys.join(',hair.beard.')}`)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,18 +1,28 @@
|
||||
<template lang="pug">
|
||||
#skin.section.customize-section
|
||||
sub-menu.text-center(:items="skinSubMenuItems", :activeSubPage="activeSubPage", @changeSubPage="changeSubPage($event)")
|
||||
customize-options(
|
||||
:items="freeSkins",
|
||||
:currentValue="user.preferences.skin"
|
||||
)
|
||||
|
||||
div(v-if='editing && set.key !== "undefined"', v-for='set in seasonalSkins')
|
||||
customize-options(
|
||||
:items='set.options',
|
||||
:currentValue="user.preferences.skin",
|
||||
:fullSet='!hideSet(set) && !userOwnsSet("skin", set.keys)',
|
||||
@unlock='unlock(`skin.${set.keys.join(",skin.")}`)'
|
||||
)
|
||||
<template>
|
||||
<div
|
||||
id="skin"
|
||||
class="section customize-section"
|
||||
>
|
||||
<sub-menu
|
||||
class="text-center"
|
||||
:items="skinSubMenuItems"
|
||||
:active-sub-page="activeSubPage"
|
||||
@changeSubPage="changeSubPage($event)"
|
||||
/><customize-options
|
||||
:items="freeSkins"
|
||||
:current-value="user.preferences.skin"
|
||||
/><div
|
||||
v-for="set in seasonalSkins"
|
||||
v-if="editing && set.key !== 'undefined'"
|
||||
>
|
||||
<customize-options
|
||||
:items="set.options"
|
||||
:current-value="user.preferences.skin"
|
||||
:full-set="!hideSet(set) && !userOwnsSet('skin', set.keys)"
|
||||
@unlock="unlock(`skin.${set.keys.join(',skin.')}`)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<template lang="pug">
|
||||
.sub-menu.text-center
|
||||
.sub-menu-item(
|
||||
v-for="item of items",
|
||||
:key="item.id",
|
||||
@click='$emit("changeSubPage", item.id)',
|
||||
:class='{active: activeSubPage === item.id}'
|
||||
)
|
||||
strong(v-once) {{ item.label }}
|
||||
<template>
|
||||
<div class="sub-menu text-center">
|
||||
<div
|
||||
v-for="item of items"
|
||||
:key="item.id"
|
||||
class="sub-menu-item"
|
||||
:class="{active: activeSubPage === item.id}"
|
||||
@click="$emit('changeSubPage', item.id)"
|
||||
>
|
||||
<strong v-once>{{ item.label }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user