Crystal Topup Bonus #62

src/lib/components/shop/GenesisCrystal.svelte

@@ -3,19 +3,45 @@
 	import { fade } from 'svelte/transition';
 	import { t } from 'svelte-i18n';
 	import { playSfx } from '$lib/helpers/audio/audio.svelte';
+	import { genesisBonus } from '$lib/data/pricelist.json';
 
 	import ColumnParent from './parts/_column-parent.svelte';
 	import Column from './parts/_column.svelte';
 	import PaymentModal from './PaymentModal.svelte';
-	import { assets, priceList } from '$lib/store/stores';
+	import { assets, patchVersion, priceList } from '$lib/store/stores';
+	import { localConfig } from '$lib/store/localstore';
+	import Icon from '../utility/Icon.svelte';
 
-	let activeGenesisIndexforModal; // undefined
+	let priceToBuy; // undefined
+	let qtyToBuy;
+	let doubleBonus;
+	let bonusAmount;
 	let showPaymentModal = false; //false
+	const localset = () => localConfig.get('topupBonus') || {};
+	let enableFirstBonus = !localset()?.disabled;
+
+	const toggleHandle = (e) => {
+		playSfx();
+		const setting = localset();
+		setting.disabled = !e.target.checked;
+		localConfig.set('topupBonus', setting);
+	};
+
+	const { versionReset, topupBonus } = genesisBonus;
+	const localTopup = localset();
+	const filterVersion = (arr) => {
+		return arr.filter((v) => v <= parseFloat($patchVersion)).sort((a, b) => b - a)[0] || 0;
+	};
+	const defaultVersionBase = filterVersion(versionReset);
+	const localVersionBase = filterVersion(Object.keys(localTopup));
+	const versionBase = defaultVersionBase > localVersionBase ? defaultVersionBase : localVersionBase;
 
 	const genesisList = [];
-	$: genesis = $priceList.genesis;
-	$: Object.keys(genesis).forEach((key) => {
-		const item = { qty: parseInt(key), price: genesis[key] };
+	const genesis = $priceList.genesis;
+	Object.keys(genesis).forEach((key) => {
+		const list = Array.isArray(localTopup[versionBase]) ? localTopup[versionBase] : [];
+		const doubleBonus = !list.includes(parseFloat(key));
+		const item = { qty: parseInt(key), price: genesis[key], doubleBonus };
 		genesisList.push(item);
 	});
 
@@ -24,7 +50,10 @@
 	};
 
 	const selectGenesis = (i) => {
-		activeGenesisIndexforModal = i;
+		priceToBuy = genesisList[i].price;
+		qtyToBuy = genesisList[i].qty;
+		doubleBonus = genesisList[i].doubleBonus;
+		bonusAmount = doubleBonus && enableFirstBonus ? qtyToBuy : topupBonus[qtyToBuy] || 0;
 		showPaymentModal = true;
 		playSfx('exchange');
 	};
@@ -34,6 +63,13 @@
 		showPaymentModal = false;
 		const { status, item } = e.detail;
 		if (status === 'failed') return;
+		if (doubleBonus && enableFirstBonus) {
+			localTopup[versionBase] = localTopup[versionBase] || [];
+			if (!localTopup[versionBase].includes(qtyToBuy)) localTopup[versionBase].push(qtyToBuy);
+			localConfig.set('topupBonus', localTopup);
+			const i = genesisList.findIndex(({ qty }) => qty === qtyToBuy);
+			genesisList[i].doubleBonus = false;
+		}
 		handleObtained(item.itemToBuy, item.value);
 	};
 </script>
@@ -42,21 +78,40 @@
 {#if showPaymentModal}
 	<PaymentModal
 		show={showPaymentModal}
-		price={genesisList[activeGenesisIndexforModal].price}
-		qty={genesisList[activeGenesisIndexforModal].qty}
+		price={priceToBuy}
+		qty={qtyToBuy}
+		bonus={bonusAmount}
 		on:confirm={handleConfirmModal}
 		on:cancel={handleCloseModal}
 	/>
 {/if}
 <!-- Genesis Pop Up End -->
 
 <ColumnParent>
-	{#each genesisList as { qty, price }, i}
+	{#each genesisList as { qty, price, doubleBonus }, i}
 		<Column style="padding:0">
 			<button
 				on:click={() => selectGenesis(i)}
 				in:fade={{ duration: 300, delay: Math.sqrt(i * 5000) }}
 			>
+				{#if doubleBonus && enableFirstBonus}
+					<div class="bonus firstBonus" style="background-image: url({$assets['bg-bonus.webp']})">
+						<div class="wrap">
+							<Icon type="genesis" style="position: absolute; top:-50%;" width="35%" />
+							<span>{$t('shop.bonus')}!</span>
+							<span class="amount">+{qty}</span>
+						</div>
+					</div>
+				{:else if qty !== 60}
+					<div class="topup-bonus bonus">
+						<div class="wrap">
+							<span>{$t('shop.bonus')}</span>
+							<Icon type="genesis" />
+							<span>{topupBonus[qty]}</span>
+						</div>
+					</div>
+				{/if}
+
 				<div class="content" style="background-image: url({$assets['genesis-bg.webp']})">
 					<div class="picture">
 						<picture>
@@ -72,6 +127,19 @@
 		</Column>
 	{/each}
 </ColumnParent>
+<div class="toggle">
+	<input
+		type="checkbox"
+		name="showAll"
+		id="showAll"
+		bind:checked={enableFirstBonus}
+		on:change={toggleHandle}
+	/>
+	<label for="showAll">
+		<i>✔</i>
+		{$t('shop.initialBonus')}
+	</label>
+</div>
 
 <style>
 	button {
@@ -80,11 +148,72 @@
 		width: 100%;
 		height: 100%;
 		display: block;
+		position: relative;
 	}
 	button:not(.nav-link-item):active {
 		transform: scale(0.95);
 	}
 
+	.firstBonus {
+		left: -5%;
+		top: -5%;
+		width: 35%;
+		aspect-ratio: 1/1;
+		background-size: cover;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+	}
+
+	.bonus {
+		color: #fff6d2;
+		text-shadow: 0.05em 0.05em 0.2em rgba(0, 0, 0, 0.5);
+		font-size: 80%;
+		filter: drop-shadow(0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.5));
+		position: absolute;
+		z-index: +1;
+	}
+
+	.wrap {
+		width: 100%;
+		position: relative;
+		display: flex;
+	}
+
+	.firstBonus .wrap {
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+	}
+
+	.firstBonus .amount {
+		color: #fefdf2;
+		font-size: initial;
+	}
+
+	:global(.mobile) .amount {
+		font-size: 140%;
+	}
+
+	.topup-bonus {
+		background-color: #fb9095;
+		top: 0;
+		left: -3%;
+		padding: 0.15rem 1rem 0.15rem 0.7rem;
+		border-bottom-left-radius: 1rem;
+		border-top-left-radius: 1rem;
+		border-bottom-right-radius: 2rem;
+	}
+	:global(.mobile) .topup-bonus {
+		padding: 0 10% 0 8%;
+	}
+	.topup-bonus .wrap {
+		align-items: center;
+	}
+
 	.content {
 		width: 100%;
 		height: 100%;
@@ -142,4 +271,34 @@
 		line-height: calc(16 / 100 * var(--column-width));
 		font-size: calc(9 / 100 * var(--column-width));
 	}
+
+	.toggle {
+		margin: 1%;
+		color: var(--tertiary-color);
+		text-transform: capitalize;
+	}
+	label {
+		cursor: inherit;
+	}
+	.toggle input + label i {
+		color: white;
+		display: inline-block;
+		padding: 0.1rem 0.2rem 0.1rem 0.1rem;
+		line-height: 1rem;
+		background-color: #fff;
+		border: 1px solid transparent;
+		transition: all 0.2s;
+	}
+	.toggle input:checked + label i {
+		background-color: #06bbff;
+	}
+
+	.toggle:hover input + label i {
+		border: 1px solid #06bbff;
+		box-shadow: rgba(106, 168, 230, 0.6) 0px 0px 7px 5px;
+	}
+
+	.toggle input {
+		display: none;
+	}
 </style>

src/lib/components/shop/MainShop.svelte

@@ -67,6 +67,7 @@
 	let outfitsData = [];
 	let recentlyBuyIndex;
 	let outfitOwner = '';
+	let contentHeight;
 
 	$: itemData = [{ rarity: outfitRarity, outfitName: outfitToBuy }];
 	let showObtainedOutfit = false;
@@ -197,7 +198,12 @@
 		<div class="items-container">
 			<ShopHeader {activeShop} {showNavbar} {showNavbarButton} on:showNavbar={showNavbarHandle} />
 
-			<div class="item-body" in:fade={{ duration: 300 }}>
+			<div
+				class="item-body"
+				in:fade={{ duration: 300 }}
+				bind:clientHeight={contentHeight}
+				style="--content-height:{contentHeight}px"
+			>
 				{#if activeShop === 'genesis'}
 					<GenesisCrystal />
 

src/lib/components/shop/PaymentModal.svelte

@@ -12,6 +12,7 @@
 	export let show;
 	export let qty;
 	export let price;
+	export let bonus = 0;
 
 	let autoConvert = false;
 
@@ -22,19 +23,19 @@
 	};
 
 	const convertToPrimogem = () => {
-		const afterBuy = $primogem + qty;
+		const afterBuy = $primogem + qty + bonus;
 		primogem.set(afterBuy);
 		localBalance.set('primogem', afterBuy);
-		dispatch('confirm', { status: 'ok', item: { itemToBuy: 'primogem', value: qty } });
+		dispatch('confirm', { status: 'ok', item: { itemToBuy: 'primogem', value: qty + bonus } });
 	};
 
 	const genesisBuy = () => {
 		playSfx();
 		if (autoConvert) return convertToPrimogem();
-		const afterBuy = $genesis + qty;
+		const afterBuy = $genesis + qty + bonus;
 		genesis.set(afterBuy);
 		localBalance.set('genesis', afterBuy);
-		dispatch('confirm', { status: 'ok', item: { itemToBuy: 'genesis', value: qty } });
+		dispatch('confirm', { status: 'ok', item: { itemToBuy: 'genesis', value: qty + bonus } });
 	};
 </script>
 

src/lib/components/shop/parts/_column-parent.svelte

@@ -7,13 +7,12 @@
 <style>
 	/* List */
 	.item-list {
-		/* height: calc(100vh - 155px); */
+		height: calc(var(--content-height) * 0.78);
 		margin: 15px 0;
 		overflow-y: auto;
 		overflow-x: hidden;
 	}
 	:global(.mobile) .item-list {
-		/* height: calc(100vh - 60px); */
 		margin: 5px 0 0;
 		padding: 0;
 	}

src/lib/data/currencies.json → src/lib/data/pricelist.json

@@ -204,5 +204,15 @@
 				}
 			}
 		}
-	]
+	],
+	"genesisBonus": {
+		"versionReset": [1.0, 2.1, 3.1],
+		"topupBonus": {
+			"300": 30,
+			"980": 110,
+			"1980": 260,
+			"3280": 600,
+			"6480": 1600
+		}
+	}
 }

src/lib/helpers/assets.svelte

@@ -82,6 +82,7 @@
 				'bg-claymore.webp',
 				'bg-polearm.webp',
 				'bg-sword.webp',
+				'bg-bonus.webp',
 				'bow-white.svg',
 				'catalyst-white.svg',
 				'claymore-white.svg',

src/lib/helpers/currencies.js

@@ -1,6 +1,6 @@
 import { priceList } from '$lib/store/stores';
 import { localConfig } from '$lib/store/localstore';
-import { currencies } from '$lib/data/currencies.json';
+import { currencies } from '$lib/data/pricelist.json';
 import { checkLocale } from './i18n';
 
 export const availableCurrencies = currencies.map(({ symbol, currency }) => ({ symbol, currency }));

src/locales/en-US.json

@@ -277,6 +277,8 @@
 		"qty": "Qty",
 		"insufficient": "Insufficient Funds",
 		"crystalTopup": "Crystal Top-Up",
+		"initialBonus": "Initial Topup Bonus",
+		"bonus": "Bonus",
 		"buyGenesisHeading": "Buy Genesis Crystal",
 		"recomendedHeading": "Recommended Items",
 		"paimonHeading": "Paimon's Bargains",

src/locales/id-ID.json

@@ -277,6 +277,8 @@
 		"qty": "Qty",
 		"insufficient": "Saldo Tidak Cukup",
 		"crystalTopup": "Top Up Crystal",
+		"initialBonus": "Bonus Topup Perdana",
+		"bonus": "Bonus",
 		"buyGenesisHeading": "Beli Genesis Crystal",
 		"recomendedHeading": "Item Rekomendasi",
 		"paimonHeading": "Penukaran Paimon",

src/locales/it-IT.json

@@ -277,6 +277,8 @@
 		"qty": "Qty",
 		"insufficient": "Fondi Insufficienti",
 		"crystalTopup": "Crystal Top-Up",
+		"initialBonus": "Bonus prima ricarica",
+		"bonus": "Bonus",
 		"buyGenesisHeading": "Compra Genesis Crystal",
 		"recomendedHeading": "Oggetti Consigliati",
 		"paimonHeading": "Paimon's Bargains",

src/locales/ja-JP.json

@@ -277,6 +277,8 @@
 		"qty": "数量",
 		"insufficient": "アイテム不足",
 		"crystalTopup": "結晶凝結",
+		"initialBonus": "Initial Topup Bonus",
+		"bonus": "Bonus",
 		"buyGenesisHeading": "創世結晶を購入",
 		"recomendedHeading": "おすすめ",
 		"paimonHeading": "スター交換",

src/locales/pt-BR.json

@@ -277,6 +277,8 @@
 		"qty": "Qtd",
 		"insufficient": "Fundos Insuficientes",
 		"crystalTopup": "Recarga de Cristal",
+		"initialBonus": "Initial Topup Bonus",
+		"bonus": "Bonus",
 		"buyGenesisHeading": "Comprar Cristais Genesys",
 		"recomendedHeading": "Recomendado",
 		"paimonHeading": "Barganhas da Paimon",