Skip to content

Commit

Permalink
Manual input number of wishes #62
Browse files Browse the repository at this point in the history
  • Loading branch information
AguzzTN54 committed Feb 13, 2023
1 parent 90753cb commit 6a7fb75
Show file tree
Hide file tree
Showing 14 changed files with 215 additions and 56 deletions.
57 changes: 27 additions & 30 deletions src/lib/components/menu/MainMenu.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
import Sidebar from './_sidebar.svelte';
import RemoveAds from './RemoveAds.svelte';
export let show = false;
let activeContent = 'options';
const selectMenu = (menu) => {
Expand All @@ -29,36 +28,34 @@
};
</script>

{#if show}
<section transition:fade={{ duration: 200 }} style="height: {$viewportHeight}px;">
<div class="head">
<h1>{$t('menu.text')} / {$t(`menu.${activeContent}`)}</h1>
<button class="close" on:click={handleClose}>
<i class="gi-close" />
</button>
<section transition:fade={{ duration: 200 }} style="height: {$viewportHeight}px;">
<div class="head">
<h1>{$t('menu.text')} / {$t(`menu.${activeContent}`)}</h1>
<button class="close" on:click={handleClose}>
<i class="gi-close" />
</button>
</div>
<div class="container">
<Sidebar {activeContent} />

<div class="content">
{#if activeContent === 'options'}
<Options />
{:else if activeContent === 'updates'}
<Updates />
{:else if activeContent === 'removeAds'}
<RemoveAds />
{/if}

{#if $isMobile && !$mobileMode}
<div class="rotate">
<i class="gi-rotate-phone" />
<span>{$t('menu.rotate')} </span>
</div>
{/if}
</div>
<div class="container">
<Sidebar {activeContent} />

<div class="content">
{#if activeContent === 'options'}
<Options />
{:else if activeContent === 'updates'}
<Updates />
{:else if activeContent === 'removeAds'}
<RemoveAds />
{/if}

{#if $isMobile && !$mobileMode}
<div class="rotate">
<i class="gi-rotate-phone" />
<span>{$t('menu.rotate')} </span>
</div>
{/if}
</div>
</div>
</section>
{/if}
</div>
</section>

<style>
section {
Expand Down
30 changes: 23 additions & 7 deletions src/lib/components/menu/OptionMenu.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script>
import { browser } from '$app/environment';
import { getContext, onMount, setContext } from 'svelte';
import { fade } from 'svelte/transition';
import { fade, fly } from 'svelte/transition';
import { locale, t } from 'svelte-i18n';
import OverlayScrollbars from 'overlayscrollbars';
import { localConfig } from '$lib/store/localstore';
Expand All @@ -22,7 +22,6 @@
const optionValue = selected === 'yes';
localConfig.set(option, optionValue);
if (option === 'fates') return unlimitedFates.set(optionValue);
if (option === 'muted') return muted.set(optionValue);
if (option === 'animeoff') return animeoff.set(optionValue);
};
Expand All @@ -37,12 +36,20 @@
handleAnimatedBG();
};
// WishAmount
let selectedAmount = localConfig.get('wishAmount') || 'default';
const handleSelectAmount = ({ detail }) => {
selectedAmount = detail;
localConfig.set('wishAmount', detail);
unlimitedFates.set(detail === 'unlimited');
};
// Reset
let showResetModal = false;
let clearCache = false;
let showToast = false;
let storageSize = '..B';
// Reset
const getSize = async () => {
const { usage } = await navigator.storage.estimate();
const size = (usage / 1000000).toFixed(2);
Expand All @@ -59,6 +66,7 @@
showResetModal = false;
await factoryReset({ clearCache });
showToast = true;
selectedAmount = 'default';
};
const cancelReset = () => {
Expand Down Expand Up @@ -116,13 +124,21 @@
<OptionMenu text={$t('menu.currency')} name="currency" showOption={optionToShow === 'currency'} />

<OptionMenu
name="fates"
name="wishAmount"
text={$t('menu.fates')}
activeIndicator={$unlimitedFates}
on:select={(e) => handleSelect('fates', e)}
showOption={optionToShow === 'fates'}
showOption={optionToShow === 'wishAmount'}
activeIndicator={selectedAmount}
on:select={handleSelectAmount}
/>

{#each ['intertwined', 'acquaint', 'starglitter', 'stardust', 'primogem'] as item, i}
{#if selectedAmount === 'manual'}
<div in:fly|local={{ y: -10, delay: Math.sqrt(i * 10000) }} out:fly|local={{ y: -10 }}>
<OptionMenu sub name={item} text={$t(`shop.item.${item}`)} />
</div>
{/if}
{/each}

<OptionMenu
name="audio"
text={$t('menu.mute')}
Expand Down
140 changes: 133 additions & 7 deletions src/lib/components/menu/_options.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,26 @@
import { createEventDispatcher, getContext } from 'svelte';
import { fly } from 'svelte/transition';
import { locales, locale, t } from 'svelte-i18n';
import { bannerPhase, pageActive, patchVersion } from '$lib/store/stores';
import {
acquaint,
bannerPhase,
intertwined,
pageActive,
patchVersion,
primogem,
stardust,
starglitter
} from '$lib/store/stores';
import { playSfx } from '$lib/helpers/audio/audio.svelte';
import { localeName, flags } from '$lib/data/country.json';
import browserState from '$lib/helpers/browserState';
import { availableCurrencies, userCurrencies } from '$lib/helpers/currencies';
import { localConfig } from '$lib/store/localstore';
import { localBalance, localConfig } from '$lib/store/localstore';
import Icon from '../utility/Icon.svelte';
export let text;
export let name;
export let sub = false;
export let activeIndicator = null;
export let showOption = false;
Expand Down Expand Up @@ -47,6 +58,7 @@
handleOption(name);
};
// Currency
$: currencyIndicator = $locale ? userCurrencies.checkUsedCurrency().currency : '';
const setCurrency = (selected) => {
playSfx();
Expand All @@ -55,12 +67,83 @@
userCurrencies.init(selected);
handleOption('');
};
// Wish Amount
const selectAmount = (val) => {
playSfx();
handleOption('');
dispatch('select', val);
};
const getValue = (value) => {
let result = 0;
switch (value) {
case 'primogem':
result = $primogem;
break;
case 'intertwined':
result = $intertwined;
break;
case 'acquaint':
result = $acquaint;
break;
case 'starglitter':
result = $starglitter;
break;
case 'stardust':
result = $stardust;
break;
default:
break;
}
return result;
};
const setValues = (e) => {
let val = parseInt(e.target.value);
const value = !isNaN(val) ? val : 0;
switch (name) {
case 'primogem':
primogem.set(value);
break;
case 'intertwined':
intertwined.set(value);
break;
case 'acquaint':
acquaint.set(value);
break;
case 'starglitter':
starglitter.set(value);
break;
case 'stardust':
stardust.set(value);
break;
default:
break;
}
localBalance.set(name, value);
};
</script>

<div class="option">
<div class="option-name">{text}</div>
<div class="option" class:sub>
<div class="option-name">
{#if sub}
<Icon type={name} style="margin: -1% 2% -1% 0" />
{/if}
{text}
</div>

{#if name === 'locale'}
{#if sub}
<input
type="number"
class="option-select"
on:change={setValues}
min="0"
value={getValue(name) || 0}
/>
{:else if name === 'locale'}
<div class="option-select locale">
<button
class="selected"
Expand Down Expand Up @@ -127,6 +210,28 @@
</div>
{/if}
</div>
{:else if name === 'wishAmount'}
<div class="option-select wishAmount">
<button
class="selected"
style="width: 100%; height:100%"
on:click|stopPropagation={openOption}
>
{activeIndicator === 'default' ? $t('outfit.default') : $t(`menu.${activeIndicator}`)}
</button>
<i class="gi-caret-{showOption ? 'up' : 'down'}" />
{#if showOption}
<div class="select" in:fly={{ duration: 200, y: -10 }}>
{#each ['default', 'unlimited', 'manual'] as item}
<button class:selected={activeIndicator === item} on:click={() => selectAmount(item)}>
<span style="text-align:center;width:100%;padding: 3%">
{item === 'default' ? $t('outfit.default') : $t(`menu.${item}`)}
</span>
</button>
{/each}
</div>
{/if}
</div>
{:else if name === 'switchBanner'}
<button class="option-select" on:click={openPrevious}>
<i class="gi-caret-down" />
Expand Down Expand Up @@ -174,14 +279,32 @@
}
.option-name {
background-color: #eae5d9;
width: 75%;
width: 100%;
padding: 0.35rem 1rem;
border-top-left-radius: 5rem;
border-bottom-left-radius: 5rem;
border: solid transparent;
border-width: 0.2rem 0 0.2rem 0.2rem;
white-space: nowrap;
}
.sub .option-name {
width: 87%;
margin-left: 10%;
position: relative;
}
.sub .option-name::before {
content: '';
position: absolute;
left: -13%;
width: 15%;
height: 148%;
z-index: -1;
bottom: 50%;
border-bottom: #dcd4c2 dashed 0.12rem;
border-left: #dcd4c2 dashed 0.12rem;
opacity: 0.5;
}
.option-select {
background-color: #dcd4c2;
Expand Down Expand Up @@ -215,7 +338,10 @@
.option-select button,
.option-select {
font-size: 0.7rem !important;
font-size: 0.7rem;
}
input.option-select {
font-size: 0.8rem;
}
.select {
Expand Down
4 changes: 3 additions & 1 deletion src/lib/components/wish/_parts/Header.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,9 @@
</script>
<EpitomizedModal />
<MainMenu show={showMenu} on:close={handleMenu} />
{#if showMenu}
<MainMenu on:close={handleMenu} />
{/if}
<div id="header" style={headerHeightstyle}>
<div class="top" in:fly={{ y: -20, duration: 800 }}>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/helpers/importLocalData.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const importLocalBalance = () => {
if (localAcquaint !== null) acquaint.set(localAcquaint);

// Setting
unlimitedFates.set(!!localConfig.get('fates'));
unlimitedFates.set(localConfig.get('wishAmount') === 'unlimited');
muted.set(!!localConfig.get('muted'));
animeoff.set(!!localConfig.get('animeoff'));
noticeMark.onLoadCheck();
Expand Down
4 changes: 3 additions & 1 deletion src/locales/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,9 @@
"updates": "Update History",
"language": "Language",
"currency": "Currency",
"fates": "Unlimited Fates",
"fates": "Number of Wishes",
"unlimited": "Unlimited",
"manual": "Manual Input",
"mute": "Mute Audio and Sound Effect",
"switchBanner": "Switch Banner",
"showAllitems": "Show all items on Inventory",
Expand Down
4 changes: 3 additions & 1 deletion src/locales/id-ID.json
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,9 @@
"updates": "Riwayat Pembaruan",
"language": "Bahasa",
"currency": "Mata Uang",
"fates": "Permohonan Tak Terbatas",
"fates": "Jumlah Permohonan",
"unlimited": "Unlimited",
"manual": "Manual Input",
"mute": "Matikan Audio dan Musik",
"switchBanner": "Ganti Banner",
"showAllitems": "Tampilkan Semua Item pada Inventaris",
Expand Down
4 changes: 3 additions & 1 deletion src/locales/it-IT.json
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,9 @@
"updates": "Aggiorna la Cronologia",
"language": "Lingua",
"currency": "Moneta",
"fates": "Fates Illimitati",
"fates": "Numero di desideri",
"unlimited": "Illimitata",
"manual": "Manuale",
"mute": "Muta Audio ed Effetti Sonori",
"switchBanner": "Cambia Banner",
"showAllitems": "Mostra tutti gli oggetti nell'inventario",
Expand Down
Loading

0 comments on commit 6a7fb75

Please sign in to comment.