|
1 | | -import React, { useEffect, useState } from 'react' |
2 | | -import Canvas from './components/Canvas/Canvas' |
3 | | -import Header from './components/Header/Header' |
4 | | -import './index.css' |
5 | | -import './App.css' |
| 1 | +import React, { useEffect, useState } from 'react'; |
| 2 | + |
| 3 | +import Canvas from './components/Canvas/Canvas'; |
| 4 | +import Header from './components/Header/Header'; |
| 5 | +import './index.css'; |
| 6 | +import './App.css'; |
6 | 7 |
|
7 | 8 | const defaultBlocks = [ |
8 | 9 | { |
@@ -74,92 +75,91 @@ const defaultBlocks = [ |
74 | 75 | width: 256, |
75 | 76 | height: 96, |
76 | 77 | }, |
77 | | -] |
| 78 | +]; |
78 | 79 |
|
79 | 80 | export default function App() { |
80 | | - const [presets, setPresets] = useState({}) |
81 | | - const [currentPreset, setCurrentPreset] = useState('default') |
82 | | - const [showSaveField, setShowSaveField] = useState(false) |
83 | | - const [saveName, setSaveName] = useState('') |
84 | | - const [isLoaded, setIsLoaded] = useState(false) |
85 | | - const [canvasKey, setCanvasKey] = useState(0) |
| 81 | + const [presets, setPresets] = useState({}); |
| 82 | + const [currentPreset, setCurrentPreset] = useState('default'); |
| 83 | + const [showSaveField, setShowSaveField] = useState(false); |
| 84 | + const [saveName, setSaveName] = useState(''); |
| 85 | + const [isLoaded, setIsLoaded] = useState(false); |
| 86 | + const [canvasKey, setCanvasKey] = useState(0); |
86 | 87 |
|
87 | 88 | useEffect(() => { |
88 | | - const stored = JSON.parse(localStorage.getItem('presets') || '{}') |
| 89 | + const stored = JSON.parse(localStorage.getItem('presets') || '{}'); |
89 | 90 |
|
90 | 91 | if (!stored.default) { |
91 | | - stored.default = defaultBlocks |
| 92 | + stored.default = defaultBlocks; |
92 | 93 | } |
93 | 94 |
|
94 | 95 | if (!stored.current || !stored[stored.current]) { |
95 | | - stored.current = 'default' |
| 96 | + stored.current = 'default'; |
96 | 97 | } |
97 | 98 |
|
98 | | - localStorage.setItem('presets', JSON.stringify(stored)) |
99 | | - setPresets(stored) |
100 | | - setCurrentPreset(stored.current) |
101 | | - setTimeout(() => setIsLoaded(true), 60) |
102 | | - }, []) |
| 99 | + localStorage.setItem('presets', JSON.stringify(stored)); |
| 100 | + setPresets(stored); |
| 101 | + setCurrentPreset(stored.current); |
| 102 | + setTimeout(() => setIsLoaded(true), 60); |
| 103 | + }, []); |
103 | 104 |
|
104 | 105 | const handlePresetChange = e => { |
105 | | - const name = e.target.value |
106 | | - const updated = { ...presets, current: name } |
107 | | - setPresets(updated) |
108 | | - setCurrentPreset(name) |
109 | | - localStorage.setItem('presets', JSON.stringify(updated)) |
110 | | - } |
| 106 | + const name = e.target.value; |
| 107 | + const updated = { ...presets, current: name }; |
| 108 | + setPresets(updated); |
| 109 | + setCurrentPreset(name); |
| 110 | + localStorage.setItem('presets', JSON.stringify(updated)); |
| 111 | + }; |
111 | 112 |
|
112 | 113 | const handleDeletePreset = () => { |
113 | 114 | if (currentPreset === 'default') { |
114 | | - alert('Нельзя удалить пресет default') |
115 | | - return |
| 115 | + alert('Нельзя удалить пресет default'); |
| 116 | + return; |
116 | 117 | } |
117 | 118 |
|
118 | | - const updated = { ...presets } |
119 | | - delete updated[currentPreset] |
120 | | - updated.current = 'default' |
| 119 | + const updated = { ...presets }; |
| 120 | + delete updated[currentPreset]; |
| 121 | + updated.current = 'default'; |
121 | 122 |
|
122 | | - setPresets(updated) |
123 | | - setCurrentPreset('default') |
124 | | - setCanvasKey(prev => prev + 1) |
125 | | - localStorage.setItem('presets', JSON.stringify(updated)) |
126 | | - } |
| 123 | + setPresets(updated); |
| 124 | + setCurrentPreset('default'); |
| 125 | + setCanvasKey(prev => prev + 1); |
| 126 | + localStorage.setItem('presets', JSON.stringify(updated)); |
| 127 | + }; |
127 | 128 |
|
128 | 129 | const handleSaveClick = () => { |
129 | | - setShowSaveField(true) |
130 | | - setSaveName('') |
131 | | - } |
| 130 | + setShowSaveField(true); |
| 131 | + setSaveName(''); |
| 132 | + }; |
132 | 133 |
|
133 | 134 | const handleSaveConfirm = () => { |
134 | | - if (!saveName.trim()) return |
| 135 | + if (!saveName.trim()) return; |
135 | 136 | const updated = { |
136 | 137 | ...presets, |
137 | 138 | [saveName]: presets[currentPreset] || [], |
138 | 139 | current: saveName, |
139 | | - } |
140 | | - setPresets(updated) |
141 | | - setCurrentPreset(saveName) |
142 | | - localStorage.setItem('presets', JSON.stringify(updated)) |
143 | | - setShowSaveField(false) |
144 | | - setSaveName('') |
145 | | - } |
| 140 | + }; |
| 141 | + setPresets(updated); |
| 142 | + setCurrentPreset(saveName); |
| 143 | + localStorage.setItem('presets', JSON.stringify(updated)); |
| 144 | + setShowSaveField(false); |
| 145 | + setSaveName(''); |
| 146 | + }; |
146 | 147 |
|
147 | 148 | const handleBlocksChange = newBlocks => { |
148 | | - if (currentPreset === 'default') return |
| 149 | + if (currentPreset === 'default') return; |
149 | 150 | const updated = { |
150 | 151 | ...presets, |
151 | 152 | [currentPreset]: newBlocks, |
152 | 153 | current: currentPreset, |
153 | | - } |
154 | | - setPresets(updated) |
155 | | - localStorage.setItem('presets', JSON.stringify(updated)) |
156 | | - } |
| 154 | + }; |
| 155 | + setPresets(updated); |
| 156 | + localStorage.setItem('presets', JSON.stringify(updated)); |
| 157 | + }; |
157 | 158 |
|
158 | 159 | return ( |
159 | 160 | <> |
160 | 161 | <Header onSave={handleSaveClick} /> |
161 | 162 |
|
162 | | - |
163 | 163 | <div className="preset-bar"> |
164 | 164 | <select |
165 | 165 | className="preset-select" |
@@ -208,5 +208,5 @@ export default function App() { |
208 | 208 | </div> |
209 | 209 | )} |
210 | 210 | </> |
211 | | - ) |
| 211 | + ); |
212 | 212 | } |
0 commit comments