valtech-components 4.0.477 → 4.0.478

package/src/lib/assets/games/christianity/card-template-reference/front.html

@@ -0,0 +1,114 @@
+<head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet" crossorigin="anonymous">
+
+
+    {{!-- Icons --}}
+    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.3.0/uicons-bold-rounded/css/uicons-bold-rounded.css'>
+    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.3.0/uicons-solid-rounded/css/uicons-solid-rounded.css'>
+    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.3.0/uicons-solid-straight/css/uicons-solid-straight.css'>
+    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.3.0/uicons-solid-rounded/css/uicons-solid-rounded.css'>
+
+
+
+</head>
+
+<div class="border-container">
+    <div class="card">
+        <div class="header-container">
+            <div class="name-container">
+                <div class="icon">
+                    <img src="{{index assets card.type}}"/>
+                </div>
+                <div class="header">{{card.name}}</div>
+            </div>
+            {{!-- <span style="color: black;">{{card.type}}</span> --}}
+            <div class="cost-container">
+                {{#if (eq card.type "lugar")}}
+                    <div class="header-cost">{{card.cost}}</div>
+                {{/if}}
+                {{#if (eq card.type "evento")}}
+                    <div class="header-cost">{{card.cost}}</div>
+                {{/if}}
+                {{#if (eq card.type "ofrenda")}}
+                    <div class="header-cost">{{card.cost}}</div>
+                {{/if}}
+                {{#if (eq card.type "personaje")}}
+                    <div class="header-cost">{{card.cost}}</div>
+                {{/if}}
+                {{#if (eq card.type "sabiduría")}}
+                    <div class="header-cost">{{card.cost}}</div>
+                {{/if}}
+                {{#if (eq card.type "acción")}}
+                    <div class="header-cost">{{card.cost}}</div>
+                {{/if}}
+                {{#if (eq card.type "herramienta")}}
+                    <div class="header-cost">{{card.cost}}</div>
+                {{/if}}
+                {{#if (gte card.ofrendas 1)}}
+                    {{#repeat card.ofrendas}}
+                        <div class="header-cost"></div>
+                    {{/repeat}}
+                {{/if}}
+            </div>
+        </div>
+        <div class="content">
+            <div class="image">
+                <div class="type-box">
+                    {{uppercase card.type}}
+                </div>
+            </div>
+        </div>
+        <div class="legend">
+            <div class="verse"><p>{{card.verse}}</p></div>
+            <div class="version"><p>{{card.book}} {{card.bible-verse}} {{card.version}}</p></div>
+        </div>
+        <div class="hability-container">
+            <div class="character-container">
+                <div class="statistic-container">
+                    {{#if (eq card.type 'personaje')}}
+                    <div class="character-text">{{card.atack}}</div>
+                    <div class="character-text">{{card.restriction}}</div>
+                    <div class="character-text">{{card.life}}</div>
+                    {{/if}}
+                </div>
+                <div class="rarity-container">
+                    <div class="rarity-box {{card.rarity}}"></div>
+                    {{#if (eq card.rarity 'normal')}}
+                    {{/if}}
+                </div>
+            </div>
+            <div class="text-container">
+                <p class="hability-title">{{card.hability-title}}</p>
+                <p class="hability-text">{{card.hability-text}}</p>
+                <p class="hability-title">{{card.hability-title-2}}</p>
+                <p class="hability-text">{{card.hability-text-2}}</p>
+            </div>
+            <div class="hero-stadistic-container">
+                {{#if (eq card.type 'líder')}}
+                <div class="hero-stadistic">{{card.hero-life}}</div>
+                {{/if}}
+            </div>
+        </div>
+        <div class="footer">
+            <div class="edition-container">
+                <div class="number">
+                    <div class="edition-box">
+                        <img src="{{index assets card.edition}}"/>
+                    </div>
+                    <p>{{#padZeros card.id 3}}{{/padZeros}}/{{card.edition-qty}}</p>
+                </div>
+                <div class="rights">{{card.year}} CHRISTIANITY</div>
+                <div class="author">{{card.author}}</div>
+            </div>
+        </div>
+    </div>
+    <div class="permissions">
+        <p>Nueva Biblia Viva © 2006, 2008 por Biblica, Inc.® Usado con permiso de Biblica, Inc.® Reservados todos los derechos en todo el mundo.</p>
+    </div>
+</div>

package/src/lib/assets/games/christianity/card-template-reference/front.style.css

@@ -0,0 +1,352 @@
+.border-container {
+    background: rgb(154,166,191);
+    background: linear-gradient(180deg, rgba(154,166,191,1) 11%, rgba(202,206,209,1) 33%, rgba(159,158,187,1) 71%, rgba(157,164,170,1) 100%);
+    padding: 45px;
+}
+
+.card {
+    width: 825px;
+    height: 1225px;
+    border-radius: 25px;
+    background-color: #f2f2f2;
+    padding: 18px;
+}
+
+.header {
+    color: #35353d;
+    font-size: 50px;
+    font-weight: 700;
+}
+
+.cost-container {
+    display: flex;
+}
+
+.header-cost {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffd800;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    color: #454545;
+    font-weight: 700;
+    font-size: 50px;
+    margin-left: 8px;
+}
+
+.header-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.name-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: start; 
+}
+
+.icon {
+    padding-top: 4px;
+    width: 60px;
+    height: 60px;
+    color: #35353d;
+    background-color: #c7ccd2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    font-size: 28px;
+    margin-right: 8px;
+}
+
+.icon img {
+    width: 36px;
+}
+
+.content {
+    padding: 8px 0px;
+    height: 610px;
+}
+
+.image {
+    background-image: url({{index assets card.name}});
+    background-position: center;
+    background-position-y: {{card.positiony}}px;
+    background-position-x: {{card.positionx}}px;
+    background-size: 100%;
+    background-size: {{card.size}}%;
+
+    /* background-position-y: -150px;
+    background-position-x: -150px;
+    background-size: 120%; */
+
+    border-radius: 20px;
+    background-repeat: no-repeat;
+    height: 100%;
+    -webkit-box-shadow: 0px 2px 30px -11px rgba(71,71,71,0.58);
+    -moz-box-shadow: 0px 2px 30px -11px rgba(71,71,71,0.58);
+    box-shadow: 0px 2px 30px -11px rgba(71,71,71,0.58);
+    position: relative;
+
+    display: flex;
+    align-items: start;
+    justify-content: flex-end;
+}
+
+.type-box {
+    margin-top: -1px;
+    margin-right: -1px;
+    color : #282828;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 600;
+    font-family: "Nunito Sans", sans-serif;
+    font-optical-sizing: auto;
+    font-style: italic;
+    width: 180px;
+    height: 35px;
+    border-radius: 0px 20px;
+    border: 2px outset #e0e0e0;
+    text-shadow: 1px 1px rgba(43, 43, 43, 0.2);
+    box-shadow: -5px 7px 16px rgba(6, 6, 5, 0.5);
+    letter-spacing: 1px;
+
+    background: rgb(223,222,226);
+    background: linear-gradient(180deg, rgba(223,222,226,1) 30%, rgba(237,237,239,1) 51%, rgba(255,255,255,1) 80%);
+}
+
+
+.footer {
+    height: 34px;
+    padding: 0px 8px;
+    color: #000000;
+    display: flex;
+    justify-content: space-between;
+}
+
+.edition-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 30px;
+}
+
+.edition {
+    background-image: url({{index assets card.edition}});
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    width: 50px;
+    height: 100%;
+}
+
+.number {
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+}
+
+.number p {
+    padding-left: 8px;
+}
+
+.edition-box img {
+    width: 40px;
+    margin: 0;
+    padding: 0;
+    margin-top: 4px;
+}
+
+.permissions {
+    position: fixed;
+    bottom: 0;
+    height: 45px;
+    width: 92%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 8px;
+}
+
+.permissions p {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0 auto;
+    padding: 0;
+    color: #000000;
+    font-size: 13px;
+    font-weight: 400;
+}
+
+.legend {
+    min-height: 172px;
+    max-height: 172px;
+    margin-top: -4px;
+}
+
+.verse {
+    font-family: "Noto Serif", serif;
+    font-optical-sizing: auto;
+    margin: 0;
+    padding: 0;
+    color: #000000;
+    font-size: 18px;
+    font-weight: 300;
+    max-width: 760px;
+    line-height: normal;
+}
+
+.version {
+    font-family: "Open Sans", sans-serif;
+    font-optical-sizing: auto;
+    margin: 0;
+    padding: 0;
+    color: #000000;
+    font-size: 20px;
+    font-weight: 800;
+    max-width: 740px; 
+    line-height: normal;
+    margin-top: -8px;
+}
+
+.hability-container {
+    width: 100%;
+    height: 320px;
+    background-image: url({{index assets card.legend}});
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    border-radius: 20px;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+}
+
+.character-container {
+    display: flex;
+    width: 100%;
+    height: 40px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.statistic-container {
+    display: flex;
+    width: 160px;
+    height: 40px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.character-text {
+    margin: 0;
+    padding: 0;
+    color: #000000;
+    font-size: 32px;
+    font-weight: 800;
+    line-height: normal;
+}
+
+
+.rarity-container {
+    display: flex;
+    width: 200px;
+    height: 40px;
+    align-items: center;
+    justify-content: end;
+}
+
+.rarity-box {
+    width: 24px;
+    height: 24px;
+    /* transform: rotate(45deg);
+    border-radius: 5px; */
+    border-radius: 100%;
+    -webkit-box-shadow: 0px 2px 30px -11px rgba(71,71,71,0.58);
+    -moz-box-shadow: 0px 2px 30px -11px rgba(71,71,71,0.58);
+    box-shadow: 0px 2px 30px -11px rgba(71,71,71,0.58);
+}
+
+.normal {
+    background-color: #3a80e9;
+    background: rgb(58,128,233);
+    background: linear-gradient(180deg, rgba(58,128,233,1) 40%, rgba(15,89,199,1) 90%);
+    /* border: 1px outset #3a80e9; */
+}
+
+.destacado {
+    background-color: #4ee93a;
+    background: rgb(78,233,58);
+    background: linear-gradient(180deg, rgba(78,233,58,1) 40%, rgba(25,176,5,1) 90%);
+    /* border: 3px outset #4ee93a; */
+}
+
+.excelente {
+    background-color: #e9ce3a;
+    background: rgb(233,206,58);
+    background: linear-gradient(180deg, rgba(233,206,58,1) 40%, rgba(199,168,0,1) 90%);
+    /* border: 3px outset #e9ce3a; */
+}
+
+.extraordinario {
+    background-color: #e03ae9;
+    background: rgb(224,58,233);
+    background: linear-gradient(180deg, rgba(224,58,233,1) 40%, rgba(155,30,162,1) 90%);
+    /* border: 3px outset #e03ae9; */
+}
+
+.text-container {
+    height: 210px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding-right: 16px;
+}
+
+.hability-title {
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 700;
+    margin: 0;
+    padding: 0;
+    color: #000000;
+    font-size: 24px;
+    margin-bottom: 8px;
+}
+
+.hability-text {
+    font-family: "Inter", Tahoma, Geneva, Verdana, sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    margin: 0;
+    padding: 0;
+    color: #000000;
+    font-size: 24px;
+}
+
+.hero-stadistic-container {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: end;
+}
+
+.hero-stadistic {
+    margin: 0;
+    padding: 0;
+    color: #000000;
+    font-size: 32px;
+    font-weight: 800;
+    line-height: normal;
+}
+
+