New client creator (#8841)

* Added initial creator

* Added initial styles and functionality for creator

* More style changes

* Translations and styles

* More active classes

* Removed extra locales

website/client/assets/svg/accessories.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="23" viewBox="0 0 40 23">
+    <g fill="none" fill-rule="evenodd" stroke="#A5A1AC" stroke-width="2.4">
+        <path d="M23.324 10.53h14.621M2.248 10.53h21.946M16.804 15.667s1.501-.742 3.293-.742a7.57 7.57 0 0 1 3.197.742"/>
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.838 10.53v3.878c0 3.879-3.22 7.052-7.154 7.052H8.359c-3.497 0-6.36-2.822-6.36-6.269v-4.968l8.289-7.205c2.02-1.756 4.63-1.113 6.482.958M23.26 10.53v3.878c0 3.879 3.219 7.052 7.154 7.052h1.325c3.497 0 6.359-2.822 6.359-6.269v-4.968L29.81 3.018c-2.02-1.756-4.63-1.113-6.482.958"/>
+    </g>
+</svg>

website/client/assets/svg/body.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="34" viewBox="0 0 32 34">
+    <g fill="none" fill-rule="evenodd">
+        <path class='path' stroke="#6133B4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="M2.124 20.456S2.854 2 15.734 2c12.88 0 13.61 18.456 13.61 18.456"/>
+        <path class='path' stroke="#6133B4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="M10.29 32.388s-1.725-7.96-1.725-14.681c0-6.722 2.382-14.682 2.382-14.682M21.064 32.388s1.724-7.96 1.724-14.681c0-6.722-2.382-14.682-2.382-14.682"/>
+        <path class='path' stroke="#6133B4" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="M8.957 22.65s3.372-.64 6.933-.64c3.563 0 6.54.64 6.54.64M7.003 32.388h3.29M21.144 32.388h3.289"/>
+        <path fill="#6133B4" d="M3.784 21.533a1.893 1.893 0 1 1-3.785 0 1.893 1.893 0 0 1 3.785 0M31.237 21.533a1.893 1.893 0 1 1-3.786 0 1.893 1.893 0 0 1 3.786 0"/>
+    </g>
+</svg>

website/client/assets/svg/for-css/tutorial-border.svg

@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="144" viewBox="0 0 400 144">
+    <defs>
+        <path id="a" d="M0 0h400v144H0z"/>
+        <path id="b" d="M0 0h10v10H0z"/>
+        <path id="c" d="M0 0h10v10H0z"/>
+        <path id="d" d="M0 0h10v10H0z"/>
+        <path id="e" d="M0 0h10v10H0z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <use fill="#FFF" xlink:href="#a"/>
+            <path stroke="#FFA623" stroke-width="4" d="M2 2h396v140H2z"/>
+            <path stroke="#B36213" stroke-width="2" d="M1 1h398v142H1z"/>
+        </g>
+        <g transform="translate(0 134)">
+            <use fill="#FFBE5D" xlink:href="#b"/>
+            <path stroke="#FFA623" stroke-width="4" d="M2 2h6v6H2z"/>
+            <path stroke="#B36213" stroke-width="2" d="M1 1h8v8H1z"/>
+        </g>
+        <g transform="translate(390 134)">
+            <use fill="#FFBE5D" xlink:href="#c"/>
+            <path stroke="#FFA623" stroke-width="4" d="M2 2h6v6H2z"/>
+            <path stroke="#B36213" stroke-width="2" d="M1 1h8v8H1z"/>
+        </g>
+        <g transform="translate(390)">
+            <use fill="#FFBE5D" xlink:href="#d"/>
+            <path stroke="#FFA623" stroke-width="4" d="M2 2h6v6H2z"/>
+            <path stroke="#B36213" stroke-width="2" d="M1 1h8v8H1z"/>
+        </g>
+        <g>
+            <use fill="#FFBE5D" xlink:href="#e"/>
+            <path stroke="#FFA623" stroke-width="4" d="M2 2h6v6H2z"/>
+            <path stroke="#B36213" stroke-width="2" d="M1 1h8v8H1z"/>
+        </g>
+    </g>
+</svg>

website/client/assets/svg/hair.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#A5A1AC" d="M22.688 0a7.222 7.222 0 0 0-5.12 2.12L2.12 17.569a7.241 7.241 0 0 0 0 10.24l2.538 2.538L30.346 4.66 27.809 2.12A7.222 7.222 0 0 0 22.688 0m0 2.414c1.289 0 2.502.502 3.413 1.414l.832.83L4.659 26.934l-.831-.831a4.793 4.793 0 0 1-1.415-3.414c0-1.29.502-2.501 1.415-3.414L19.275 3.828a4.793 4.793 0 0 1 3.413-1.414"/>
+        <path stroke="#A5A1AC" stroke-width="2.4" d="M4.385 28.385l5.746 5.747M28.36 4.41l5.746 5.746M16.372 16.398l5.746 5.746M7.382 25.389l5.746 5.746M10.379 22.392l5.746 5.746M13.376 19.395l5.746 5.746M19.37 13.4l5.745 5.747M22.366 10.404l5.746 5.746M25.363 7.407l5.746 5.746"/>
+    </g>
+</svg>

website/client/assets/svg/logo-purple.svg

@@ -0,0 +1,49 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="191" height="42" viewBox="0 0 191 42">
+    <defs>
+        <path id="a" d="M.666 28.718h22.448V.606H.666v28.112z"/>
+        <path id="c" d="M.558 40.74h24.35V.077H.557z"/>
+        <path id="e" d="M0 40.74h24.03V.077H0V40.74z"/>
+        <path id="g" d="M19.379.077H.279v40.662h19.1z"/>
+        <path id="i" d="M6.59.077H.558v6.01H6.59V.077z"/>
+        <path id="k" d="M6.59.077H.558v6.01H6.59V.077z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(138.726 12.613)">
+            <mask id="b" fill="#fff">
+                <use xlink:href="#a"/>
+            </mask>
+            <path fill="#4F2A93" d="M21.94 19.774a3.025 3.025 0 0 0-4.23.545 6.115 6.115 0 0 1-4.87 2.389c-3.249 0-5.934-2.519-6.131-5.743-.007-.465-.012-3.793-.012-4.226 0-3.376 2.756-6.122 6.144-6.122a6.1 6.1 0 0 1 4.456 1.907 3.023 3.023 0 0 0 4.263.11 2.997 2.997 0 0 0 .11-4.249A12.248 12.248 0 0 0 12.84.606C6.128.606.667 6.048.667 12.739c0 .041.001 4.206.018 4.512.35 6.43 5.69 11.467 12.157 11.467a12.11 12.11 0 0 0 9.645-4.728 2.999 2.999 0 0 0-.546-4.216" mask="url(#b)"/>
+        </g>
+        <path fill="#4F2A93" d="M178.606 35.32c-3.249 0-5.933-2.518-6.131-5.74-.007-.467-.012-3.81-.012-4.229 0-3.375 2.756-6.122 6.143-6.122 3.388 0 6.144 2.747 6.144 6.122 0 .434-.005 3.763-.012 4.223-.195 3.226-2.88 5.746-6.132 5.746m9.16-22.621a3.007 3.007 0 0 0-2.911 2.259 12.12 12.12 0 0 0-6.249-1.74c-6.713 0-12.174 5.444-12.174 12.133 0 .043.002 4.205.017 4.513.35 6.43 5.69 11.467 12.157 11.467 2.341 0 4.53-.667 6.392-1.815a3.014 3.014 0 0 0 2.768 1.815 3.01 3.01 0 0 0 3.015-3.006V15.704a3.01 3.01 0 0 0-3.015-3.005M40.6 35.32c-3.25 0-5.934-2.519-6.13-5.742-.008-.464-.013-3.793-.013-4.227 0-3.375 2.756-6.122 6.144-6.122 3.387 0 6.143 2.747 6.143 6.122 0 .434-.005 3.763-.012 4.223-.195 3.226-2.88 5.746-6.131 5.746m9.159-22.621a3.007 3.007 0 0 0-2.91 2.259 12.12 12.12 0 0 0-6.25-1.74c-6.713 0-12.175 5.444-12.175 12.133 0 .043.002 4.206.019 4.513.35 6.43 5.69 11.467 12.157 11.467 2.34 0 4.53-.667 6.392-1.815a3.014 3.014 0 0 0 2.767 1.815 3.01 3.01 0 0 0 3.016-3.006V15.704A3.01 3.01 0 0 0 49.76 12.7M94.159 12.699a3.01 3.01 0 0 0-3.016 3.005v22.621a3.01 3.01 0 0 0 3.016 3.006 3.01 3.01 0 0 0 3.016-3.006v-22.62a3.01 3.01 0 0 0-3.016-3.006M129.678 12.699a3.01 3.01 0 0 0-3.016 3.005v22.621a3.01 3.01 0 0 0 3.016 3.006 3.01 3.01 0 0 0 3.016-3.006v-22.62a3.01 3.01 0 0 0-3.016-3.006"/>
+        <g transform="translate(59.646 .591)">
+            <mask id="d" fill="#fff">
+                <use xlink:href="#c"/>
+            </mask>
+            <path fill="#4F2A93" d="M18.864 28.99c-.198 3.221-2.883 5.739-6.131 5.739-3.25 0-5.935-2.519-6.132-5.746-.008-.464-.012-3.79-.012-4.223 0-3.376 2.756-6.122 6.144-6.122 3.386 0 6.143 2.746 6.143 6.122 0 .419-.005 3.762-.012 4.23m-6.131-16.363c-2.242 0-4.338.618-6.144 1.676V3.083A3.01 3.01 0 0 0 3.574.076 3.01 3.01 0 0 0 .558 3.082v34.653a3.01 3.01 0 0 0 3.016 3.005c1.24 0 2.304-.748 2.767-1.815a12.149 12.149 0 0 0 6.392 1.815c6.466 0 11.806-5.037 12.157-11.478.015-.297.017-4.46.017-4.502 0-6.69-5.462-12.133-12.174-12.133" mask="url(#d)"/>
+        </g>
+        <g transform="translate(0 .591)">
+            <mask id="f" fill="#fff">
+                <use xlink:href="#e"/>
+            </mask>
+            <path fill="#4F2A93" d="M11.855 12.627c-2.08 0-4.07.52-5.823 1.47V3.082A3.01 3.01 0 0 0 3.016.077 3.01 3.01 0 0 0 0 3.082v34.652a3.01 3.01 0 0 0 3.016 3.006 3.01 3.01 0 0 0 3.016-3.006V22.201c.23-.196.442-.416.612-.684a6.12 6.12 0 0 1 5.211-2.879c3.387 0 6.143 2.746 6.143 6.122 0 .55-.005 12.23-.013 12.9a3.01 3.01 0 0 0 3.018 3.08 3.012 3.012 0 0 0 3.01-2.853c.014-.297.016-12.999.016-13.127 0-6.69-5.46-12.133-12.174-12.133" mask="url(#f)"/>
+        </g>
+        <g transform="translate(101.867 .591)">
+            <mask id="h" fill="#fff">
+                <use xlink:href="#g"/>
+            </mask>
+            <path fill="#4F2A93" d="M16.363 12.108h-3.518V3.082A3.01 3.01 0 0 0 9.829.077a3.01 3.01 0 0 0-3.016 3.005v9.026H3.295a3.01 3.01 0 0 0-3.016 3.005 3.01 3.01 0 0 0 3.016 3.005h3.518v19.616a3.01 3.01 0 0 0 3.016 3.005 3.01 3.01 0 0 0 3.016-3.005V18.118h3.518a3.01 3.01 0 0 0 3.016-3.005 3.01 3.01 0 0 0-3.016-3.005" mask="url(#h)"/>
+        </g>
+        <g transform="translate(90.474 .591)">
+            <mask id="j" fill="#fff">
+                <use xlink:href="#i"/>
+            </mask>
+            <path fill="#FF6066" d="M6.59 3.082a3.01 3.01 0 0 1-3.016 3.005A3.01 3.01 0 0 1 .558 3.082 3.01 3.01 0 0 1 3.574.077 3.01 3.01 0 0 1 6.59 3.082" mask="url(#j)"/>
+        </g>
+        <g transform="translate(125.993 .591)">
+            <mask id="l" fill="#fff">
+                <use xlink:href="#k"/>
+            </mask>
+            <path fill="#4FB5E8" d="M6.59 3.082a3.01 3.01 0 0 1-3.016 3.005A3.01 3.01 0 0 1 .558 3.082 3.01 3.01 0 0 1 3.574.077 3.01 3.01 0 0 1 6.59 3.082" mask="url(#l)"/>
+        </g>
+    </g>
+</svg>

website/client/assets/svg/skin.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="33" viewBox="0 0 37 33">
+    <g fill="none" fill-rule="evenodd" stroke="#A5A1AC" stroke-linejoin="round" stroke-width="2.4">
+        <path stroke-linecap="round" d="M13.782 21.846s1.794 3.682 0 5.454c-1.793 1.773-5.957 0-8.327.938C3.085 29.175 2 31.65 2 31.65M23.744 21.846s-1.794 3.682 0 5.454c1.793 1.773 5.957 0 8.327.938 2.37.937 3.455 3.412 3.455 3.412"/>
+        <path d="M27.939 12.642c0 6.321-5.755 11.445-9.277 11.445-2.98 0-9.277-5.124-9.277-11.445C9.385 6.32 13.089 2 18.662 2c5.572 0 9.277 4.32 9.277 10.642z"/>
+    </g>
+</svg>

website/client/components/creatorIntro.vue

@@ -0,0 +1,451 @@
+<template lang="pug">
+#creator-background
+  #creator-modal
+    .section.row.welcome-section(v-if='modalPage == 1')
+      .col-6.offset-3.text-center
+        h3(v-once) {{$t('welcomeTo')}}
+        .svg-icon.logo(v-html='icons.logoPurple')
+
+    .section.row
+      .col-6.offset-3
+        .user-creation-bg
+        avatar(:member='user')
+
+    div(v-if='modalPage == 2')
+      .section.row
+        .col-12.text-center
+          button.btn.btn-secondary(v-once) {{$t('randomize')}}
+      .section.row.text-center.customize-menu
+        .col-3
+          .menu-item(@click='changeTopPage("body", "size")')
+            .svg-icon(v-html='icons.bodyIcon')
+          strong(v-once) {{$t('body')}}
+        .col-3
+          .menu-item(@click='changeTopPage("skin", "color")')
+            .svg-icon(v-html='icons.skinIcon')
+          strong(v-once) {{$t('skin')}}
+        .col-3
+          .menu-item(@click='changeTopPage("hair", "color")')
+            .svg-icon(v-html='icons.hairIcon')
+          strong(v-once) {{$t('hair')}}
+        .col-3
+          .menu-item(@click='changeTopPage("extra", "glasses")')
+            .svg-icon(v-html='icons.accessoriesIcon')
+          strong(v-once) {{$t('extra')}}
+      .section.customize-section(v-if='activeTopPage === "body"')
+        .row.sub-menu
+            .col-2.offset-4.sub-menu-item(@click='changeSubPage("size")', :class='{active: activeSubPage === "size"}')
+              strong(v-once) {{$t('size')}}
+            .col-2.sub-menu-item(@click='changeSubPage("shirt")', :class='{active: activeSubPage === "shirt"}')
+              strong(v-once) {{$t('shirt')}}
+        .row(v-if='activeSubPage === "size"')
+          .col-12.customize-options.size-options
+            .slim_shirt_black.option(@click='set({"preferences.size":"slim"})', :class='{active: user.preferences.size === "slim"}')
+            .broad_shirt_black.option(@click='set({"preferences.size":"broad"})', :class='{active: user.preferences.size === "broad"}')
+        .row(v-if='activeSubPage === "shirt"')
+          .col-12.customize-options
+            .slim_shirt_black.option(@click='set({"preferences.shirt":"black"})', :class='{active: user.preferences.shirt === "black"}')
+            .slim_shirt_blue.option(@click='set({"preferences.shirt":"blue"})', :class='{active: user.preferences.shirt === "blue"}')
+            .slim_shirt_green.option(@click='set({"preferences.shirt":"green"})', :class='{active: user.preferences.shirt === "green"}')
+            .slim_shirt_pink.option(@click='set({"preferences.shirt":"pink"})', :class='{active: user.preferences.shirt === "pink"}')
+            .slim_shirt_white.option(@click='set({"preferences.shirt":"white"})', :class='{active: user.preferences.shirt === "white"}')
+            .slim_shirt_yellow.option(@click='set({"preferences.shirt":"yellow"})', :class='{active: user.preferences.shirt === "yellow"}')
+
+      .section.customize-section(v-if='activeTopPage === "skin"')
+        .row.sub-menu
+            .col-6.offset-3.text-center.sub-menu-item(:class='{active: activeSubPage === "color"}')
+              strong(v-once) {{$t('color')}}
+        .row
+          .col-12.customize-options
+            .skin_ddc994.option(@click='set({"preferences.skin":"ddc994"})', :class='{active: user.preferences.skin === "ddc994"}')
+            .skin_f5a76e.option(@click='set({"preferences.skin":"f5a76e"})', :class='{active: user.preferences.skin === "f5a76e"}')
+            .skin_ea8349.option(@click='set({"preferences.skin":"ea8349"})', :class='{active: user.preferences.skin === "ea8349"}')
+            .skin_c06534.option(@click='set({"preferences.skin":"c06534"})', :class='{active: user.preferences.skin === "c06534"}')
+            .skin_98461a.option(@click='set({"preferences.skin":"98461a"})', :class='{active: user.preferences.skin === "98461a"}')
+            .skin_915533.option(@click='set({"preferences.skin":"915533"})', :class='{active: user.preferences.skin === "915533"}')
+            .skin_c3e1dc.option(@click='set({"preferences.skin":"c3e1dc"})', :class='{active: user.preferences.skin === "c3e1dc"}')
+            .skin_6bd049.option(@click='set({"preferences.skin":"6bd049"})', :class='{active: user.preferences.skin === "6bd049"}')
+
+      .section.customize-section(v-if='activeTopPage === "hair"')
+        .row.sub-menu
+            .col-2.offset-3.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color"}')
+              strong(v-once) {{$t('color')}}
+            .col-2.text-center.sub-menu-item(@click='changeSubPage("bangs")', :class='{active: activeSubPage === "bangs"}')
+              strong(v-once) {{$t('bangs')}}
+            .col-2.text-center.sub-menu-item(@click='changeSubPage("ponytail")', :class='{active: activeSubPage === "ponytail"}')
+              strong(v-once) {{$t('ponytail')}}
+        .row(v-if='activeSubPage === "color"')
+          .col-12.customize-options
+            .hair_bangs_1_white.option(@click='set({"preferences.hair.color": "white"})', :class='{active: user.preferences.hair.color === "white"}')
+            .hair_bangs_1_brown.option(@click='set({"preferences.hair.color": "brown"})', :class='{active: user.preferences.hair.color === "brown"}')
+            .hair_bangs_1_blond.option(@click='set({"preferences.hair.color": "blond"})', :class='{active: user.preferences.hair.color === "blond"}')
+            .hair_bangs_1_red.option(@click='set({"preferences.hair.color": "red"})', :class='{active: user.preferences.hair.color === "red"}')
+            .hair_bangs_1_black.option(@click='set({"preferences.hair.color": "black"})', :class='{active: user.preferences.hair.color === "black"}')
+        .row(v-if='activeSubPage === "bangs"')
+          .col-12.customize-options
+            .head_0.option(@click='set({"preferences.hair.bangs": 0})', :class="[{ active: user.preferences.hair.bangs === 0 }, 'hair_bangs_0_' + user.preferences.hair.color]")
+            .option(@click='set({"preferences.hair.bangs": 1})', :class="[{ active: user.preferences.hair.bangs === 1 }, 'hair_bangs_1_' + user.preferences.hair.color]")
+            .option(@click='set({"preferences.hair.bangs": 2})',:class="[{ active: user.preferences.hair.bangs === 2 }, 'hair_bangs_2_' + user.preferences.hair.color]")
+            .option(@click='set({"preferences.hair.bangs": 3})', :class="[{ active: user.preferences.hair.bangs === 3 }, 'hair_bangs_3_' + user.preferences.hair.color]")
+            .option(@click='set({"preferences.hair.bangs": 4})', :class="[{ active: user.preferences.hair.bangs === 4 }, 'hair_bangs_4_' + user.preferences.hair.color]")
+        .row(v-if='activeSubPage === "ponytail"')
+          .col-12.customize-options
+            .head_0.option(@click='set({"preferences.hair.base": 0})', :class="[{ active: user.preferences.hair.base === 0 }, 'hair_base_0_' + user.preferences.hair.color]")
+            .hair_base_1_blond.option(@click='set({"preferences.hair.base": 1})', :class="[{ active: user.preferences.hair.base === 1 }, 'hair_base_1_' + user.preferences.hair.color]")
+            .hair_base_3_blond.option(@click='set({"preferences.hair.base": 3})', :class="[{ active: user.preferences.hair.base === 3 }, 'hair_base_3_' + user.preferences.hair.color]")
+
+      .section.container.customize-section(v-if='activeTopPage === "extra"')
+        .row.sub-menu
+            .col-4.text-center.sub-menu-item(@click='changeSubPage("glasses")', :class='{active: activeSubPage === "glasses"}')
+              strong(v-once) {{$t('glasses')}}
+            .col-4.text-center.sub-menu-item(@click='changeSubPage("wheelchair")', :class='{active: activeSubPage === "wheelchair"}')
+              strong(v-once) {{$t('wheelchair')}}
+            .col-4.text-center.sub-menu-item(@click='changeSubPage("flower")', :class='{active: activeSubPage === "flower"}')
+              strong(v-once) {{$t('flower')}}
+        .row(v-if='activeSubPage === "glasses"')
+          .col-12.customize-options
+            .eyewear_special_blackTopFrame.option(@click='equip("eyewear_special_blackTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_blackTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_blackTopFrame"}')
+            .eyewear_special_blueTopFrame.option(@click='equip("eyewear_special_blueTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_blueTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_blueTopFrame"}')
+            .eyewear_special_greenTopFrame.option(@click='equip("eyewear_special_greenTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_greenTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_greenTopFrame"}')
+            .eyewear_special_pinkTopFrame.option(@click='equip("eyewear_special_pinkTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_pinkTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_pinkTopFrame"}')
+            .eyewear_special_redTopFrame.option(@click='equip("eyewear_special_redTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_redTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_redTopFrame"}')
+            .eyewear_special_whiteTopFrame.option(@click='equip("eyewear_special_whiteTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_whiteTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_whiteTopFrame"}')
+            .eyewear_special_yellowTopFrame.option(@click='equip("eyewear_special_yellowTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_yellowTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_yellowTopFrame"}')
+        .row(v-if='activeSubPage === "wheelchair"')
+          .col-12.customize-options.weelchairs
+            .option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}')
+              | None
+            .option(@click='set({"preferences.chair": "black"})', :class='{active: user.preferences.chair === "black"}')
+              .button_chair_black
+            .option(@click='set({"preferences.chair": "blue"})', :class='{active: user.preferences.chair === "blue"}')
+              .button_chair_blue
+            .option(@click='set({"preferences.chair": "green"})', :class='{active: user.preferences.chair === "green"}')
+              .button_chair_green
+            .option(@click='set({"preferences.chair": "pink"})', :class='{active: user.preferences.chair === "pink"}')
+              .button_chair_pink
+            .option(@click='set({"preferences.chair": "red"})', :class='{active: user.preferences.chair === "red"}')
+              .button_chair_red
+            .option(@click='set({"preferences.chair": "yellow"})', :class='{active: user.preferences.chair === "yellow"}')
+              .button_chair_yellow
+        .row(v-if='activeSubPage === "flower"')
+          .col-12.customize-options
+            .head_0.option(@click='set({"preferences.hair.flower":0})', :class='{active: user.preferences.hair.flower === 0}')
+            .hair_flower_1.option(@click='set({"preferences.hair.flower":1})', :class='{active: user.preferences.hair.flower === 1}')
+            .hair_flower_2.option(@click='set({"preferences.hair.flower":2})', :class='{active: user.preferences.hair.flower === 2}')
+            .hair_flower_3.option(@click='set({"preferences.hair.flower":3})', :class='{active: user.preferences.hair.flower === 3}')
+            .hair_flower_4.option(@click='set({"preferences.hair.flower":4})', :class='{active: user.preferences.hair.flower === 4}')
+            .hair_flower_5.option(@click='set({"preferences.hair.flower":5})', :class='{active: user.preferences.hair.flower === 5}')
+            .hair_flower_6.option(@click='set({"preferences.hair.flower":6})', :class='{active: user.preferences.hair.flower === 6}')
+
+    .container.interests-section(v-if='modalPage == 3')
+      .section.row
+        .col-12.text-center
+          h2 I want to work on:
+      .section.row
+        .col-4.offset-2
+          div
+            label.custom-control.custom-checkbox
+              input.custom-control-input(type="checkbox")
+              span.custom-control-indicator
+              span.custom-control-description(v-once) {{ $t('work') }}
+          div
+            label.custom-control.custom-checkbox
+              input.custom-control-input(type="checkbox")
+              span.custom-control-indicator
+              span.custom-control-description(v-once) {{ $t('excercise') }}
+          div
+            label.custom-control.custom-checkbox
+              input.custom-control-input(type="checkbox")
+              span.custom-control-indicator
+              span.custom-control-description(v-once) {{ $t('health') }}
+          div
+            label.custom-control.custom-checkbox
+              input.custom-control-input(type="checkbox")
+              span.custom-control-indicator
+              span.custom-control-description(v-once) {{ $t('school') }}
+        .col-4
+          div
+            label.custom-control.custom-checkbox
+              input.custom-control-input(type="checkbox")
+              span.custom-control-indicator
+              span.custom-control-description(v-once) {{ $t('chores') }}
+          div
+            label.custom-control.custom-checkbox
+              input.custom-control-input(type="checkbox")
+              span.custom-control-indicator
+              span.custom-control-description(v-once) {{ $t('creativity') }}
+          div
+            label.custom-control.custom-checkbox
+              input.custom-control-input(type="checkbox")
+              span.custom-control-indicator
+              span.custom-control-description(v-once) {{ $t('budgeting') }}
+
+    .section.row.justin-message-section(:class='{top: modalPage > 1}')
+      .col-9
+        .justin-message(v-if='modalPage == 1')
+          p(v-once) {{$t('justinIntroMessage1')}}
+          p(v-once) {{$t('justinIntroMessage2')}}
+        .justin-message(v-if='modalPage > 1')
+          p(v-once) {{$t('justinIntroMessage3')}}
+
+    .section.container.footer
+      .row
+        .col-3.offset-1.text-center
+          div(v-if='modalPage > 1', @click='prev()')
+            .prev-arrow
+            .prev(v-once) {{$t('prev')}}
+        .col-4.text-center.circles
+          .circle(:class="{active: modalPage === 1}")
+          .circle(:class="{active: modalPage === 2}")
+          .circle(:class="{active: modalPage === 3}")
+        .col-3.text-center
+          div(v-if='modalPage < 3', @click='next()')
+            .next(v-once) {{$t('next')}}
+            .next-arrow
+</template>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  #creator-background {
+    background-color: $purple-200;
+  }
+
+  #creator-modal {
+    width: 448px;
+    height: 670px;
+    border-radius: 8px;
+    background-color: #ffffff;
+    box-shadow: 0 2px 16px 0 rgba(26, 24, 29, 0.32);
+    margin: 0 auto;
+    padding-top: 1em;
+    position: relative;
+  }
+
+  .section {
+    margin-top: 2em;
+  }
+
+  .welcome-section {
+    margin-top: 5em;
+    margin-bottom: 5em;
+  }
+
+  .logo {
+    width: 190px;
+  }
+
+  .user-creation-bg {
+    background-image: url('~client/assets/creator/creator-hills-bg.png');
+    height: 105px;
+    width: 219px;
+  }
+
+  .avatar {
+    position: absolute;
+    top: -23px;
+    left: 48px;
+  }
+
+  .justin-message {
+    background-image: url('~client/assets/svg/for-css/tutorial-border.svg');
+    height: 144px;
+    width: 400px;
+    padding: 2em;
+    margin-left: 1.5em;
+  }
+
+  .justin-message-section {
+    margin-top: 6em;
+    margin-bottom: 6em;
+  }
+
+  .justin-message-section.top {
+    position: absolute;
+    top: -15em;
+  }
+
+  .circles {
+    padding-left: 2em;
+  }
+
+  .circle {
+    width: 8px;
+    height: 8px;
+    background-color: #d8d8d8;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 1em;
+  }
+
+  .circle.active {
+    background-color: #bda8ff;
+  }
+
+  .customize-menu {
+    .menu-item .svg-icon {
+      width: 32px;
+      height: 32px;
+      margin: 0 auto;
+    }
+
+    .menu-item:hover {
+      cursor: pointer;
+      svg path, strong {
+        stroke: purple !important;
+      }
+    }
+  }
+
+  .sub-menu:hover {
+    cursor: pointer;
+  }
+
+  .sub-menu-item {
+    text-align: center;
+  }
+
+  .sub-menu .sub-menu-item:hover, .sub-menu .sub-menu-item.active {
+    color: $purple-200;
+    border-bottom: 2px solid $purple-200;
+  }
+
+  .customize-options .option {
+    display: inline-block;
+    padding: 2em;
+    vertical-align: bottom;
+  }
+
+  .size-options {
+    padding-left: 9em;
+  }
+
+  .weelchairs .option {
+    width: 90px;
+    height: 90px;
+  }
+
+  .option.active {
+    border: 4px solid $purple-200;
+    border-radius: 4px;
+    margin-top: 1em;
+  }
+
+  .option:hover {
+    cursor: pointer;
+  }
+
+  .customize-section {
+    background-color: #f9f9f9;
+    padding-top: 1em;
+    height: 250px;
+  }
+
+  .interests-section {
+    margin-top: 7em;
+  }
+
+  .footer {
+    position: absolute;
+    padding-bottom: 1em;
+    bottom: 0;
+    width: 100%;
+
+    .prev {
+      color: #a5a1ac;
+      font-weight: bold;
+      display: inline-block;
+      padding: 0.4em;
+      margin-left: 1em;
+    }
+
+    .prev:hover, .prev-arrow:hover {
+      cursor: pointer;
+    }
+
+    .prev-arrow {
+      background-image: url('~client/assets/creator/prev.png');
+      width: 32px;
+      height: 32px;
+      display: inline-block;
+      vertical-align: bottom;
+    }
+
+    .next {
+      color: #6133b4;
+      font-weight: bold;
+      display: inline-block;
+      padding: 0.4em;
+      margin-right: 1em;
+    }
+
+    .next:hover, .next-arrow:hover {
+      cursor: pointer;
+    }
+
+    .next-arrow {
+      background-image: url('~client/assets/creator/arrow.png');
+      width: 32px;
+      height: 32px;
+      display: inline-block;
+      vertical-align: bottom;
+    }
+  }
+</style>
+
+<script>
+// @TODO: Wait for my other PR (login/register) to fix the background and hiding the header
+
+import { mapState } from 'client/libs/store';
+import avatar from './avatar';
+
+import logoPurple from 'assets/svg/logo-purple.svg';
+import bodyIcon from 'assets/svg/body.svg';
+import accessoriesIcon from 'assets/svg/accessories.svg';
+import skinIcon from 'assets/svg/skin.svg';
+import hairIcon from 'assets/svg/hair.svg';
+
+export default {
+  components: {
+    avatar,
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        logoPurple,
+        bodyIcon,
+        accessoriesIcon,
+        skinIcon,
+        hairIcon,
+      }),
+      modalPage: 1,
+      activeTopPage: 'body',
+      activeSubPage: 'size',
+    };
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
+  methods: {
+    prev () {
+      this.modalPage -= 1;
+    },
+    next () {
+      this.modalPage += 1;
+    },
+    changeTopPage (page, subpage) {
+      this.activeTopPage = page;
+      if (subpage) this.activeSubPage = subpage;
+    },
+    changeSubPage (page) {
+      this.activeSubPage = page;
+    },
+    set (settings) {
+      this.$store.dispatch('user:set', settings);
+    },
+    equip (key) {
+      this.$store.dispatch('common:equip', {key, type: 'costume'});
+    },
+  },
+};
+</script>

website/client/router.js

@@ -12,6 +12,9 @@ import Page from './components/page';
 const Home = () => import(/* webpackChunkName: "static" */'./components/static/home');
 const RegisterLogin = () => import(/* webpackChunkName: "auth" */'./components/auth/registerLogin');
 
+const CreatorIntro = () => import(/* webpackChunkName: "creator" */'./components/creatorIntro');
+
+// Except for tasks that are always loaded all the other main level
 // All the main level
 // components are loaded in separate webpack chunks.
 // See https://webpack.js.org/guides/code-splitting-async/
@@ -50,6 +53,7 @@ const router = new VueRouter({
   },
   // requiresLogin is true by default, isStatic false
   routes: [
+    { name: 'creator', path: '/creator', component: CreatorIntro },
     { name: 'home', path: '/home', component: Home, meta: {requiresLogin: false} },
     { name: 'register', path: '/register', component: RegisterLogin, meta: {requiresLogin: false} },
     { name: 'login', path: '/login', component: RegisterLogin, meta: {requiresLogin: false} },

website/common/locales/en/newClient.json

@@ -127,6 +127,24 @@
   "gotIt": "Got it!",
   "welcomeStable": "Welcome to the Stable!",
   "welcomeStableText": "I'm Matt, the Beast Master. Starting at level 3, you can hatch Pets from Eggs by using Potions you find! When you hatch a Pet from your Inventory, it will appear here! Click a Pet's to add it to your avatar. Feed them with the Food you find in your Inventory after level 3, and they'll grow into hardy Mounts.",
+  "excercise": "Excercise",
+  "creativity": "Creativity",
+  "budgeting": "Budgeting",
   "petLikeToEatText": "Pets will grow no matter what you feed them, but they'll grow faster if you feed them the one food that they like best. Experiment to find out the pattern, or see the answers here: <br/> <a href=\"http://habitica.wikia.com/wiki/Food_Preferences\" target=\"_blank\">http://habitica.wikia.com/wiki/Food_Preferences</a>",
-  "petLikeToEat": "What does my pet like to eat?"
+  "petLikeToEat": "What does my pet like to eat?",
+  "welcomeTo": "Welcome to",
+  "justinIntroMessage1": "Hello there! You must be new here. My name is Justin, I’ll be your guide in Habitica.",
+  "justinIntroMessage2": "To start, you’ll need to create an avatar.",
+  "justinIntroMessage3": "Great! Now, what are you interested in working on throughout this journey?",
+  "prev": "Prev",
+  "next": "Next",
+  "randomize": "Randomize",
+  "skin": "Skin",
+  "hair": "Hair",
+  "extra": "Extra",
+  "size": "Size",
+  "shirt": "Shirt",
+  "bangs": "Bangs",
+  "ponytail": "Ponytail",
+  "glasses": "Glasses"
 }