|
1 | 1 | <script lang="ts"> |
2 | | - import debounce from 'lodash/debounce' |
| 2 | + import debounce from 'lodash/debounce'; |
3 | 3 |
|
4 | | - import type { Character } from '@/types' |
| 4 | + import type { Character } from '@/types'; |
5 | 5 |
|
6 | | - import BackgroundSelector from '@/components/common/BackgroundSelector.svelte' |
7 | | - import RangeInput from '@/shared/components/forms/RangeInput.svelte' |
| 6 | + import BackgroundSelector from '@/components/common/BackgroundSelector.svelte'; |
| 7 | + import RangeInput from '@/shared/components/forms/RangeInput.svelte'; |
8 | 8 |
|
9 | | - export let backgroundBrightness: number |
10 | | - export let backgroundSaturation: number |
11 | | - export let character: Character |
12 | | - export let selected: number |
| 9 | + export let backgroundBrightness: number; |
| 10 | + export let backgroundSaturation: number; |
| 11 | + export let character: Character; |
| 12 | + export let selected: number; |
13 | 13 |
|
14 | | - let first = true |
15 | | - let status = '' |
16 | | -
|
17 | | - $: debouncedSave(selected, backgroundBrightness, backgroundSaturation) |
18 | | -
|
19 | | - const getValue = (value: number): string => value === -1 ? 'Def' : `${value * 10}%` |
| 14 | + let first = true; |
| 15 | + let status = ''; |
20 | 16 |
|
21 | 17 | const debouncedSave = debounce(async (id: number, brightness: number, saturation: number) => { |
22 | 18 | if (first) { |
23 | | - first = false |
24 | | - return |
| 19 | + first = false; |
| 20 | + return; |
25 | 21 | } |
26 | 22 |
|
27 | | - status = 'Saving...' |
| 23 | + status = 'Saving...'; |
28 | 24 |
|
29 | 25 | const form = { |
30 | 26 | backgroundId: id, |
31 | 27 | backgroundBrightness: brightness, |
32 | 28 | backgroundSaturation: saturation, |
33 | | - } |
34 | | - const xsrf = document.getElementById('app').getAttribute('data-xsrf') |
35 | | - |
| 29 | + }; |
| 30 | + const xsrf = document.getElementById('app').getAttribute('data-xsrf'); |
| 31 | +
|
36 | 32 | const response = await fetch(`/api/character/${character.id}/configuration`, { |
37 | 33 | method: 'POST', |
38 | 34 | headers: { |
39 | 35 | 'Content-Type': 'application/json', |
40 | | - 'RequestVerificationToken': xsrf, |
| 36 | + RequestVerificationToken: xsrf, |
41 | 37 | }, |
42 | 38 | body: JSON.stringify(form), |
43 | | - }) |
| 39 | + }); |
44 | 40 |
|
45 | 41 | if (response.ok) { |
46 | | - status = 'Saved!' |
| 42 | + status = 'Saved!'; |
| 43 | + } else { |
| 44 | + status = 'ERROR!'; |
47 | 45 | } |
48 | | - else { |
49 | | - status = 'ERROR!' |
50 | | - } |
51 | | - }, 500) |
| 46 | + }, 500); |
| 47 | +
|
| 48 | + $: debouncedSave(selected, backgroundBrightness, backgroundSaturation); |
| 49 | +
|
| 50 | + const getValue = (value: number): string => (value === -1 ? 'Def' : `${value * 10}%`); |
52 | 51 | </script> |
53 | 52 |
|
54 | 53 | <style lang="scss"> |
|
96 | 95 | <span class="status">{status}</span> |
97 | 96 | </div> |
98 | 97 |
|
99 | | - <BackgroundSelector |
100 | | - bind:selected |
101 | | - showDefault={true} |
102 | | - /> |
103 | | - |
104 | | - <p>You can change your default background in <a href="#/settings/characters">Settings > Characters</a></p> |
| 98 | + <BackgroundSelector bind:selected showDefault={true} /> |
| 99 | + |
| 100 | + <p> |
| 101 | + You can change your default background in <a href="#/settings/characters" |
| 102 | + >Settings > Characters</a |
| 103 | + > |
| 104 | + </p> |
105 | 105 | </div> |
0 commit comments