From 97189cf90f9b3da8b5beb6ca94415b7f72d82615 Mon Sep 17 00:00:00 2001
From: Patrick <patrick.wieth@googlemail.com>
Date: Fri, 15 Mar 2024 12:52:49 +0100
Subject: [PATCH] cropper onboard preview

---
 src/assets/onboard/OBActionMask.png | Bin 0 -> 2357 bytes
 src/assets/onboard/OBEntityMask.png | Bin 0 -> 2278 bytes
 src/assets/onboard/OBHQMask.png     | Bin 0 -> 2857 bytes
 src/assets/onboard/OBPlaceMask.png  | Bin 0 -> 2284 bytes
 src/views/CardCreatorPage.vue       |  77 +++++++++++++++++++---------
 5 files changed, 54 insertions(+), 23 deletions(-)
 create mode 100644 src/assets/onboard/OBActionMask.png
 create mode 100644 src/assets/onboard/OBEntityMask.png
 create mode 100644 src/assets/onboard/OBHQMask.png
 create mode 100644 src/assets/onboard/OBPlaceMask.png

diff --git a/src/assets/onboard/OBActionMask.png b/src/assets/onboard/OBActionMask.png
new file mode 100644
index 0000000000000000000000000000000000000000..68b1507cd0e7c335bb09f6f71bec633b75232ab9
GIT binary patch
literal 2357
zcmcguX>b!|7!F#X#}pMEw6vXBQ!Z^cdn8S=OG8PUv`rx#ZMc+cv->4k+w6wjrAe#O
zf*>ek5k#mK@ka%9WN->h+Yu0`3?SDJTM!92GKFFAXt4<5l(v338j4eu@rRk&{r3I#
zdEWPX&&?aNW)vnTj!jglRLQm?O9@=-;k7UR(a_zxdl6iQ$t8t(s@-SPZa^W<ZMK_L
zs>TgT_n6^O9x-dW!`k294<F~Wwyl86BTC7P(tg#oX1o|m3BIBQvPzZoWat{EdVkw9
zkdwkY<}35<(`i=pY8Xy*0!_f{gJ_j1CpX|@*fO9XPT=MRle%mFAvMBtCiT2*J8t*o
z0}o$RC4tha84k9pjHNhr?v&)joB$0qc!9zo0dKh=(*ct@teA$+p>0f!gds|qNo@{U
zMCRLPA^D;N5K4oiERN%dfzl8Lf+Y<u#+ikXI7wo-5hL^{Nz&SET1Oz!pBh?3kQ|9~
z(Iu9Gs6{B5)E-6g(HQ3U`!#;8MwHwbK~WTjlNd>&5P`~-g2Dt)LC%OMiK?*xnU#2-
z!ixeDQp-5S<%&rS4;}Hw>$BTq+66fpG#EZC!1ypigJWKA$i*;PR!YGAvkZxr9hE+S
zl>k{>F0lZ@GwzeE70`0jk%u5#D}bQH=r9ZaOdhbqu`!%)xl|sG6~|(r9C)EV8Tv%T
z9P)WYMU*|_->8ng4hJG+07i?RDe<s?m~xBAE)S`+Sxjp9M#J$OO>)^JMdBPvWM}J8
zor?k}!*LAia=CPdY*I_QwB&%EA^C;^E0ss-%v!CPAgor(Y|XY9j0QbbkY8XnQUhF@
zAS;Z(f&tq+v~AD<SY;H85~S0B>hvUs8jT!*;;d7z)#?FbG!kJxoi71K5haHxmJbx|
ztbs@%q)vk)lk5!33!&INH;4i(i~>w*Sim|Ihl+KMNCA_0CT^f{JOZ_g9Pg?e5=zm8
z@c}4oAdXR(e+6?a?Ghy~0}F`vGH!tR1h*QA<%iA}%S8zqhNsgG)IaQiNWv^Y;wu1G
zAc<ZiT*5RzMEG<p1xTZwL1AM7R7W@&l+w8f)TzZ;9mz19-pQ(?eC|J|9t(GPsNJK7
zE8=CCiptn_v~NqnvO!zX&2k>vhh0Q7Y^b44YMFt4g$@<k9LlMOtBDBT?*UNdUy?gG
zV-c7vx)eVn0ka#{{=<|{gvNRp!42TJh0S+A2+%PsG?oUtn}bEt_F!ZpxIyDAGAhGt
zI4hw9c>}XLB*o@E5TI2FPV<hH{_XHHvc_gHI|7S;IlExfYxv`FvwQlsZm*kgP&NAb
zxEIo9cdb=@)cH!z^=nPE@L5OfCKm=XRxa7PFfGqEV(m+dT4qiiwzjPOd$4zP=Evt2
zai7+{eBE)$dD*sbO2=>MbLT9r>AaeJ-r-#LV|(S?g@=(d@3oyi^!kFt-mJYCyKU-}
zlUFC>jYT;p+UxOsmdVFY2l1w<^s%Fpi9g<!)-C(pd1qsHitBRiuOr_qtZP>#br(;p
zYm3X=lQ^>OoA_x`ZNIi5<vf?x=gP~^Do(vrabUYU@!Ozt-pM1m8pE+YoA2dz>W_c1
z`e#h2INW+L;bM0}PIJro;hBCix8+>IwC0_jQ`VacJBkgvF4r}nrAOp7N$HIN^!B^A
z7ByB~JATo4Ipx%$-npsn{cP{k&9)2ujXkYLhQ;5#yF-6A+1y$m)QvlEroE}`O2Vk*
zyrb)b4#(2olN*^6H9-e=*h|u5a@&rrTp7Qh#a?it)l24$5#D)XPu(u>2VZG#R*x%Q
z6;w9IHQ$(&AhgXMeQ9UIxE6b%%~xN$=?8uK_#<BW{|8LS;I8OXo?U+?=uxsRO=w_=
zd8sKEz8qyedaCo)abp)Zb!Bu+3e<n{R?UW^Tg~(P$KU4Tw^UDCky>*u^Xm=0KV8_r
zrSBqDyW_?0y3!k^i9HQV(tGZ7SNAR35A*cYipL(Prdv&>5375E<7+=JAZ~{Ko7k)~
KEW7iTuKE)iwL*9R

literal 0
HcmV?d00001

diff --git a/src/assets/onboard/OBEntityMask.png b/src/assets/onboard/OBEntityMask.png
new file mode 100644
index 0000000000000000000000000000000000000000..2984c997abbb2e7dcb8680a680a833f09958f394
GIT binary patch
literal 2278
zcmdT`eQXnD7%zf+FBoTpEod$W1aMsMt6z7n%(8ZDhR(TlF#HPd?%r#UwY~1{wsw;&
z1S0|6M1u^`0Y(CdD8>w-XyO9s3=lzr5+j3wbHV~l!Dt}N&G-7nFjI;D+2s1(^S-~|
z^SsYzySA)!Vb;Xli6)aNtEAXnj@CBx>>WQEeJ|eh@l3Rg(#jVuFzq=$y$=av{4TG{
zWcp~`qyca*lE;=U@_B}ahR|!}p;Jw0xkoQAtr#-(?x!9{(u7FyQq5$Vlx;ktOmDVL
zL!2DhSEW~Z7x97;G6PYmhUQo(g3u;YenBh(gc_)0)zB}8o%qk6cHo#SI`Jh|FXfFC
z!hl@dsKScIQlHRRBXA;KFh6TzevC&NLQn@-EEEiDe9Va_6!Yla*d}o-0nuxmxXZAJ
zRe8&>LPdobXQl{&qA1MHnQ1#MFm?%4&%+psVMxkB(l&x&c-G2WXe{-?kwpy4S4D|0
zcNe8BBFTvdbUnh8WHcHzM_IF?`bnDOIFe#Wh9MAw&>F%zh!J6JMp8*ijT>r$Do1o#
z31fy@P_5MIP8?l2=}jo&^=7n(wN%hh_{bQDkhGa1Lm|V(1X|O};qAMOh}L`!5lEIp
zO{r4_h~P7BlRfpwa>|jrAbaXzSkKT=7XF!>wj&A|T%=A7CSoNDBn-k3(x)Mx=!`>=
zfTAl}K=~Whnd3wt3<D@y{1d8-3J3(<icn{$EO9$=bYd1|k!M6J!!eXd&{nI3ut*#v
zfG7e&k|c}W%CL;YGHE>{^6f<)ZUN_Tv8;=xJs!^GvAXRJyNxR<EOI%xG`A$I=^!k?
zv~3yL23E!{Iv_=`Hr7s91i%nLq9Fk#TI3j-rLB@9!RHHA2y{jDDM~P1v}Nf?V2s5~
zVRO7dki$l7<_@DkH_)LIM+IylD4L)wzGMMg={(BLQ&bY_RYX~87!k_xG<ydWHIN8&
z@ULJ|;3Y*30aQS82>2lx3Hxy@lOMiN2`VZwjBdxK>mPMMGGT70%JonzQk4*vC}Cb6
zA$%5rgN(xl2-H}Ru+Y_j;4BhNRI`*|VE_<q)dHU4i~l+GWTL~3c28ZdSk_P~8Zz6d
zzO8_@!?seJK^fUcUBm;yXlN&{0pyo)DPwaar|zyMlKf}@B9(th?(mEyVVWZ8QJ_MX
zAJzWdluwc-1VGpi(YQs;cRL8kG13@I!`;m%lWDs%GD+O9ah4pF2{xLQNJ6~ytTv>~
zyoX_ARYlVr6IXqPenxC1ZkI3i+|}bH^*z*mZr82Bjs4#5S{*y)+`so0yfS`e<xtPB
zQ){}OY<cv(+J)BscRL^YHok3eXMCMKC%dulK$b#3a{Z{#(=As0@Z$c}9bd&C8~o-{
z_Ov+JB>ytExog9G%kMK+_fP1~Y0MR(;)&+`*AAX}XUW(tM=yDg%;+hVZnU0n0Xx~I
z!-Lt|%*zgba(3$2XAiwp`TUgT18Zj0)c0o{Xtw6<`>-Ycs^^$Z$%?;T`SL#VA5HYJ
z)?nAoo9bzzs^j`)(}Tx9ICrCVe4hWbdBC=2dqv*Grrgf&*Y*k>lf`T8UsM!KhQF=f
zUU*_$`@qRVo4!1}bZA-Ak9}EV2Hw~li%pu)y<^;#v+mC~c06$LWJvrv-ZnXR<9b(*
z$^@P%9ous3$lJACj>SCth0fmp%i+NG_*<9VD>gNCKQ;TpnJecz`B4Qw&5rgi9Srnc
zY2|lso%is$GXJ&q-cuLqPM5wveafD8efiZDfz2D(-BU+jp4awtN6upZ*;OsOZ>5u-
k8};?Pvb>Alx^>7jYuBt@`wG~V#-E82PpNy)f@Q1z1YL6<lK=n!

literal 0
HcmV?d00001

diff --git a/src/assets/onboard/OBHQMask.png b/src/assets/onboard/OBHQMask.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0b7e7ee3e563c5347a0c9159fcdf1931195d6a5
GIT binary patch
literal 2857
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
IRYu`I0A4RHw*UYD

literal 0
HcmV?d00001

diff --git a/src/assets/onboard/OBPlaceMask.png b/src/assets/onboard/OBPlaceMask.png
new file mode 100644
index 0000000000000000000000000000000000000000..18789296b7ea1dffdcad1c38ff2db1898bf73fa8
GIT binary patch
literal 2284
zcmdT`d2AF_7+;Wr6e}c6M2f~?Y61o3+}YjE*tKqVTUubZrCqTN9=x4-yE~yfvz?iC
zw+#>@Q6Wf-@hCz$5;P)#D)tXf1u+y2rXmO!Yb3RR(nAV~1_7yW_M(`o#Q)r6j_<wS
z@B7|&&aSEQ&CAKo%eGi7IThueYV>SFSI52gp!<Th7foS|UOlhG(%$vZB_xasxx6lm
zW%sL-Zh|Z%kFQ$jFC88pMz2pEIkgf!#v0YWnqkX@J@kAeO^lY;=@!eRT=N=Z+0gbN
z;!KnMwMMOXp&+Ue5=d$QlJQ6sp)Ho8;&>E@%b<Y;U`SS+_~iqKa7>n*_)|77?Txx&
zST1kTU`>n9FSaZbc?mCmJSV#-E+7pNXaFo8saJF%?!*&{1@vw%Q#h7@7|Wcv%e08q
zdaE$EszHn=X+orF8guX@<6uPA5d?v`7)!G(MHf<xonTqPY7;mHOZ{+U5yOf!DJWEX
z%2F1Q<ix{<5fvyZ7K@QFE2(NBis5;lqFIV%34|c@X2k$;LecY+N>XY(P!}~hYRIaB
znQB2mZ8V%XI&{*TNYv}iXjk-9&`|iOIEYdVNmG%C>0$z{8`bdkSw=<c{^ls8s-dnn
zY9d7N{M+QxCS*C~$X$?2o1kK3=qL;SOitU8#0)OlsMRN8C5aTQhY_StM?NtbhoWKC
zQ1!6-H>xw+i9nbJP_%?fO-2O->OHF1XsWF6IB~Q?O0p!dl8xnAS|S*mjU%`q4+$Vi
zfCvVIoWsUi*`Sq8>lux2E8|!P&w5-|YYD@Ymh!Gro5xY;u=8c^GFKs==2j@W0TdCY
zZOh2E4RAIlz%Yb0=%5LXvvLG4!a^dz1_C_fB+&*O3BKUgATU(Tud4OwqOD3t0%JLn
z#%6heC@W@c3Pw<%2N=+aqXOm#njvV;Zx*m!VEH+;L!jv-)T>Hzuz6G{FVNOIps0Z)
zV1R!GOQH}|wFp23Bu799Qc)#@W10L2Zna+3kYRK>Yr6hX2P6~bftuU|r7}&8V2KhI
z<Wa)Mi9BQr?SMdy1qqG`0D|X&3=y!>BF6$C*#jb;;!FQI^;Dw6&2~>6u3XkpDw;FP
zslKg&4I`FPi}f<HkGe<zqS??+TnET6^HApEXinW-O(glTFhnZ<lH8FQOTu(DXvBa9
zT_IHacT+w|nivL32%>R|n(uZHkYkiNmPWc;L?zR9XJnGN5#ua5DidrpE0KhF=~-<`
znRyQtWK~1ceD;yS0rVLus_?k{@n;9S7HQq|6p!o1tyW)K->kRF=ewuin|55HCXQ=5
zckHLhXZ9{yH~n<xX0!d$>nMJ2ec`~I!L^5S7fye7VDh||y?O8SbzX7Rbk5q}dum4R
zOWW&)et-V6{5N)L@Y_$v%(m~d|9nEvs@x}>KP+}Xr>!_VRI@RE^ML)@i8Jd%kL5T!
z8m3mprp2XhW%K0^Z>;gUUs*l4eCcsoEIH8L9bLWXwTD~1#b54yV)^Ow1+OeGI2i8Z
zIzO56jJ09*wk_G@+xAUYDi0nEoLo}7`_j>@njbnh<Wv@K99q11SIgC}`}cGxM=#E#
zD#3*#ofAIriG!<7i<A%ky6H{#p32Z4j<xv?YDUk+p2NG2f4;SWpT?0hS9M;HPV8;F
zFR%4=SFgr~pZ1Mkcl?Y0$>y~!Ka%aaSI+hhFX(^t`?>d%J9CG=x_bU2q5n`Fzkhqz
z)yrqP$oD(0clGsTH9l}|NwM?euJ0yHKQ{Ah-Su$)&2NM`Q|-lVwV|GqzqLNHwP9PH
jV@KxJH{sZdmAA%b=M>a!Flh8=!(yo@^?BM$mcH;OYv3F)

literal 0
HcmV?d00001

diff --git a/src/views/CardCreatorPage.vue b/src/views/CardCreatorPage.vue
index 673a4a46..b2bb3509 100644
--- a/src/views/CardCreatorPage.vue
+++ b/src/views/CardCreatorPage.vue
@@ -182,7 +182,7 @@
           @paste="onPaste"
         >
           <div
-            class="pl-[4rem] pt-5 pb-4 h-[26.5rem]"
+            class="pl-[4rem] pt-5 pb-4 w-[26.5rem]"
           >
             <div v-if="cropImage==''">
               <label for="dropzone-file" class="">
@@ -191,27 +191,29 @@
                   </div>
                 <input id="dropzone-file" type="file" class="hidden" @change="inputFile"/>
               </label>
-            </div> 
-            <cropper
-              v-if="!designateArtist || artistMode"
-              class="cropper"
-              :src="cropImage"
-              :auto-zoom="true"
-              :stencil-size="{
-                width: cardBounds.x,
-                height: model.fullArt ? cardBounds.y : cardBounds.x,
-              }"
-              :canvas="{
-                height: model.fullArt ? cardBounds.y : cardBounds.x,
-                width: cardBounds.x,
-              }"
-              :default-size="{
-                width: cardBounds.x,
-                height: model.fullArt ? cardBounds.y : cardBounds.x,
-              }"
-              image-restriction="fit-area"
-              @change="changeCrop"
-            />
+            </div>
+            <div class="w-full">
+              <cropper
+                v-if="!designateArtist || artistMode"
+                class="cropper"
+                :src="cropImage"
+                :auto-zoom="true"
+                :stencil-size="{
+                  width: cardBounds.x,
+                  height: model.fullArt ? cardBounds.y : cardBounds.x,
+                }"
+                :canvas="{
+                  height: model.fullArt ? cardBounds.y : cardBounds.x,
+                  width: cardBounds.x,
+                }"
+                :default-size="{
+                  width: cardBounds.x,
+                  height: model.fullArt ? cardBounds.y : cardBounds.x,
+                }"
+                image-restriction="fit-area"
+                @change="changeCrop"
+              />
+            </div>
           </div>
           <div
             v-if="true || artistMode"
@@ -227,6 +229,15 @@
               COPYRIGHT
             </div>
 
+            <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
+              <mask id="maskImage">
+              <!-- Embed image from variable -->
+                <image :xlink:href="OBActionMask"  width="400" height="300" />
+              </mask>
+              <image :xlink:href="model.image" width="400" height="290" mask="url(#maskImage)" />
+              <image :xlink:href="OBAction" width="400" height="300" />
+            </svg>
+
             <div
               v-if="!artistMode"
               class="flex flex-col"
@@ -725,6 +736,14 @@ import MysticismIcon from "@/assets/figma/MysticismIcon.svg";
 import TechnologyIcon from "@/assets/figma/TechnologyIcon.svg";
 import CultureIcon from "@/assets/figma/CultureIcon.svg";
 import NatureIcon from "@/assets/figma/NatureIcon.svg";
+import OBAction from "@/assets/onboard/OBAction.png";
+import OBEntity from "@/assets/onboard/OBEntity.png";
+import OBPlace from "@/assets/onboard/OBPlace.png";
+import OBHQ from "@/assets/onboard/OBHQ.png";
+import OBActionMask from "@/assets/onboard/OBActionMask.png";
+import OBEntityMask from "@/assets/onboard/OBEntityMask.png";
+import OBPlaceMask from "@/assets/onboard/OBPlaceMask.png";
+import OBHQMask from "@/assets/onboard/OBHQMask.png";
 
 import "vue-advanced-cropper/dist/style.css";
 import { ButtonType } from "@/components/elements/CCButton/ButtonType";
@@ -802,6 +821,14 @@ export default {
 
     return {
       CCLogoSmallInvert,
+      OBAction,
+      OBEntity,
+      OBPlace,
+      OBHQ,
+      OBActionMask,
+      OBEntityMask,
+      OBPlaceMask,
+      OBHQMask,
       typeIcons,
       classIcons,
       cardCreatorEditCard: editCard.card,
@@ -861,6 +888,10 @@ export default {
               : "active";
       });
     },
+    cropImage() {
+      console.log("cropperino")
+      //this.model.image = this.cropImage;
+    },
     model() {
       if (this.mode === Mode.EDIT) {
         this.cardCreatorEditCard = this.model;
@@ -987,7 +1018,7 @@ export default {
       }
     },
     changeCrop({ canvas }) {
-      mergeImages(["/BG.png", canvas.toDataURL("image/jpeg", 0.9)]).then(
+      mergeImages([canvas.toDataURL("image/jpeg", 0.9)]).then(
         (b64) => {
           this.srcToFile(b64, "image.jpg", "image/jpeg").then((file) => {
             uploadImg(file, env.cardImgMaxKB, (result) => {