Skip to content

Commit a73fb20

Browse files
DeeAyDanDeeAyDan
committed
final fixes
1 parent 4f68acf commit a73fb20

13 files changed

+875
-1061
lines changed

‎src/algorithms/CoinChange.svelte

Lines changed: 75 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,38 @@
1515
import Controls from '../routes/Controls.svelte';
1616
import { get } from 'svelte/store';
1717
import { algorithmDisplayNames } from '../stores/algorithmMap.js';
18+
import { waitUntilResume, delay, pauseIfNeeded, log } from '../stores/utils.js';
19+
20+
const displayName = algorithmDisplayNames[get(selectedAlgorithm)];
1821
1922
// ==== Alapadatok ====
2023
21-
currentStep.set(0);
22-
algorithmStatus.set('idle');
23-
consoleLog.set([]);
24-
activeLine.set(-1);
2524
let exchangeCoins = [1, 4, 6, 10];
26-
const displayName = algorithmDisplayNames[get(selectedAlgorithm)];
2725
let dpTable: { index: number; value: number; coin: number }[] = [];
2826
let lastCoinTable = [];
29-
3027
let moneyToExchange = 29;
3128
3229
let newCoin = 0;
3330
let showInsertForm = false;
3431
let showDeleteList = false;
3532
33+
// ==== Előkalkulált lépésszám ====
34+
onMount(() => {
35+
totalSteps.set(Math.floor(moneyToExchange));
36+
resetParameters();
37+
});
38+
39+
function resetParameters() {
40+
algorithmStatus.set('idle');
41+
currentStep.set(0);
42+
consoleLog.set([]);
43+
44+
usedCoins = [];
45+
dpTable = [];
46+
47+
activeLine.set({ start: -1, end: -1 });
48+
}
49+
3650
function openInsertForm() {
3751
showInsertForm = !showInsertForm;
3852
showDeleteList = false;
@@ -63,53 +77,18 @@
6377
showDeleteList = false;
6478
}
6579
66-
// ==== Előkalkulált lépésszám ====
67-
onMount(() => {
68-
totalSteps.set(0);
69-
});
70-
7180
// ==== Késleltetés és vezérlés ====
72-
function log(message: string) {
73-
consoleLog.update((logs) => [...logs, message]);
74-
currentStep.update((n) => n + 1);
75-
}
76-
function delay(ms: number) {
77-
return new Promise((resolve) => setTimeout(resolve, ms));
78-
}
79-
function waitUntilResume(): Promise<void> {
80-
return new Promise((resolve) => {
81-
const unsub = resumeSignal.subscribe(() => {
82-
if (get(algorithmStatus) === 'running') {
83-
unsub();
84-
resolve();
85-
}
86-
});
87-
});
88-
}
89-
function waitUntilRestart(): Promise<void> {
90-
return new Promise((resolve) => {
91-
const unsub = resumeSignal.subscribe(() => {
92-
if (get(algorithmStatus) === 'idle') {
93-
consoleLog.set([]);
94-
currentStep.set(0);
95-
96-
usedCoins = [];
97-
dpTable = [];
98-
99-
unsub();
100-
resolve();
101-
}
102-
});
103-
});
104-
}
105-
async function pauseIfNeeded() {
106-
if (get(algorithmStatus) === 'paused') {
107-
await waitUntilResume();
108-
}
109-
}
11081
async function restartAlgorithm() {
11182
if (get(algorithmStatus) === 'finished') {
112-
await waitUntilRestart();
83+
return new Promise((resolve) => {
84+
const unsub = resumeSignal.subscribe(() => {
85+
if (get(algorithmStatus) === 'idle') {
86+
resetParameters();
87+
unsub();
88+
resolve();
89+
}
90+
});
91+
});
11392
}
11493
}
11594
@@ -125,11 +104,13 @@
125104
showDeleteList = false;
126105
127106
let amount = Math.floor(moneyToExchange);
107+
totalSteps.set(amount);
128108
let coins = exchangeCoins.map((c) => Math.floor(c));
129-
dpTable = [];
130109
131110
await coinExchange(amount, coins);
132111
112+
activeLine.set({ start: -1, end: -1 });
113+
133114
consoleLog.update((logs) => [...logs, 'A futás befejeződött!']);
134115
algorithmStatus.set('finished');
135116
await restartAlgorithm();
@@ -144,30 +125,31 @@
144125
145126
dp[0] = 0;
146127
147-
totalSteps.set(amount);
148-
149128
for (let i = 1; i <= amount; i++) {
150-
activeLine.set(6);
151-
await pauseIfNeeded();
129+
activeLine.set({ start: 7, end: 7 });
152130
await delay(700 - get(speed) * 8);
131+
await pauseIfNeeded();
132+
153133
for (let coin of coins) {
154-
activeLine.set(7);
155-
await pauseIfNeeded();
134+
activeLine.set({ start: 8, end: 8 });
156135
await delay(700 - get(speed) * 8);
136+
await pauseIfNeeded();
137+
157138
if (i - coin >= 0 && dp[i - coin] + 1 < dp[i]) {
158139
dp[i] = dp[i - coin] + 1;
159140
lastCoin[i] = coin;
160-
activeLine.set(9);
161-
await pauseIfNeeded();
141+
activeLine.set({ start: 10, end: 13 });
162142
await delay(700 - get(speed) * 8);
143+
await pauseIfNeeded();
163144
}
164145
}
165146
166147
dpTable = [...dpTable, { index: i, value: dp[i], coin: lastCoin[i] }];
167148
168-
activeLine.set(12);
169-
await pauseIfNeeded();
149+
activeLine.set({ start: 16, end: 16 });
170150
await delay(700 - get(speed) * 8);
151+
await pauseIfNeeded();
152+
171153
log(`Összeg: ${i}, Minimum érme: ${dp[i]}, Utolsó érme: ${lastCoin[i]}`);
172154
}
173155
@@ -176,18 +158,17 @@
176158
while (current > 0) {
177159
let coin = lastCoin[current];
178160
if (coin === -1) {
179-
activeLine.set(20);
180-
await pauseIfNeeded();
161+
activeLine.set({ start: 24, end: 26 });
181162
await delay(700 - get(speed) * 8);
163+
await pauseIfNeeded();
164+
182165
consoleLog.update((logs) => [...logs, 'Nem lehet pontosan felváltani!']);
183166
break;
184167
}
185168
usedCoins.push(coin);
186169
current -= coin;
187170
}
188171
189-
activeLine.set(-1);
190-
191172
consoleLog.update((logs) => [...logs, `Minimum érme szám: ${usedCoins.length}`]);
192173
consoleLog.update((logs) => [...logs, `Felhasznált érmék: ${usedCoins}`]);
193174
}
@@ -199,18 +180,22 @@
199180
let dp = Array(amount + 1).fill(Infinity);
200181
let lastCoin = Array(amount + 1).fill(-1);
201182
dp[0] = 0;
183+
202184
for (let i = 1; i <= amount; i++) {
203185
for (let coin of coins) {
186+
204187
if (i - coin >= 0 && dp[i - coin] + 1 < dp[i]) {
205188
dp[i] = dp[i - coin] + 1;
206189
lastCoin[i] = coin;
207190
}
191+
208192
}
209193
dpTable = [...dpTable, { index: i, value: dp[i], coin: lastCoin[i] }];
210194
}
211195
212196
usedCoins = [];
213197
let current = amount;
198+
214199
while (current > 0) {
215200
let coin = lastCoin[current];
216201
if (coin === -1) {
@@ -219,6 +204,7 @@
219204
usedCoins.push(coin);
220205
current -= coin;
221206
}
207+
222208
}`
223209
);
224210
</script>
@@ -227,22 +213,27 @@
227213
<div class="custom-input">
228214
<div>
229215
<label for="order">Felváltandó:</label>
230-
<input id="order" bind:value={moneyToExchange} />
216+
<input
217+
id="order"
218+
type="number"
219+
disabled={$algorithmStatus !== 'idle'}
220+
bind:value={moneyToExchange}
221+
/>
231222
</div>
232223

233224
<div class="custom-buttons">
234225
<div class="button-group">
235-
<button on:click={openInsertForm}>Beszúrás</button>
226+
<button disabled={$algorithmStatus !== 'idle'} on:click={openInsertForm}>Beszúrás</button>
236227
{#if showInsertForm}
237-
<div class="dropdown">
228+
<div class="dropdown insert-dropdown">
238229
<input type="number" placeholder="Érme értéke" bind:value={newCoin} />
239230
<button on:click={insertNewCoin}>Hozzáadás</button>
240231
</div>
241232
{/if}
242233
</div>
243234

244235
<div class="button-group">
245-
<button on:click={openDeleteList}>Kivétel</button>
236+
<button disabled={$algorithmStatus !== 'idle'} on:click={openDeleteList}>Kivétel</button>
246237
{#if showDeleteList}
247238
<div class="dropdown">
248239
{#each exchangeCoins as coin, index}
@@ -260,7 +251,6 @@
260251
<!-- ==== Komponens markup ==== -->
261252
<div class="algorithm-container">
262253
<Controls {currentStep} {totalSteps} on:start={startAlgorithm} />
263-
<div class="tag">Vászon</div>
264254
<div class="coin-visual">
265255
<div class="left-container">
266256
<div>Felhasználható</div>
@@ -309,14 +299,6 @@
309299

310300
<!-- ==== Stílus ==== -->
311301
<style>
312-
.tag {
313-
display: inline-block;
314-
top: 0;
315-
left: 0;
316-
background-color: #484848;
317-
color: white;
318-
padding: 3px;
319-
}
320302
.coin-visual {
321303
display: flex;
322304
gap: 40px;
@@ -353,13 +335,19 @@
353335
border-bottom: 3px solid #505050;
354336
}
355337
.custom-input input {
338+
text-align: center;
339+
font-size: 1rem;
356340
width: 55px;
357341
padding: 0.5rem;
358-
margin-right: 10px;
359342
border-radius: 5px;
360343
background-color: #2f2f2f;
361344
border: 3px solid #505050;
362345
}
346+
.custom-input input:disabled {
347+
opacity: 0.6;
348+
cursor: not-allowed;
349+
border-color: #3a3a3a;
350+
}
363351
.custom-input button {
364352
padding: 0.5rem 1rem;
365353
background-color: #444;
@@ -371,6 +359,11 @@
371359
.custom-input button:hover {
372360
background-color: #5cb85c;
373361
}
362+
.custom-input button:disabled {
363+
opacity: 0.6;
364+
cursor: not-allowed;
365+
border-color: #3a3a3a;
366+
}
374367
.custom-input label {
375368
width: 150px;
376369
text-align: center;
@@ -415,6 +408,9 @@
415408
color: white;
416409
border: 1px solid #666;
417410
}
411+
.insert-dropdown {
412+
align-items: center;
413+
}
418414
.delete-item {
419415
display: flex;
420416
flex-direction: column;

0 commit comments

Comments
 (0)