Skip to content

Commit 7c5b3ed

Browse files
Ivan SemochkinIvan Semochkin
Ivan Semochkin
authored and
Ivan Semochkin
committed
update layout
1 parent cc8a77e commit 7c5b3ed

File tree

17 files changed

+300
-399
lines changed

17 files changed

+300
-399
lines changed

‎src/app.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,16 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5+
56
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6-
<link rel="manifest" href="manifest.json" />
7+
<link rel="manifest" href="webmanifest.json" />
8+
<!-- <meta name="theme-color" id="theme-color" content="#22192B"> -->
79
<meta
810
name="viewport"
911
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
1012
/>
13+
<!-- <meta name="theme-color" content="#319197" /> -->
14+
1115
%sveltekit.head%
1216
</head>
1317
<body data-sveltekit-preload-data="hover" class="light">

‎src/lib/Components/Grid.svelte‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -178,18 +178,14 @@
178178
style="--col:{$layout.screen.col};--row:{$layout.screen
179179
.row};--cell-size:{CELL_SIZE}px;--grid-gap:{GRID_GAP}px"
180180
>
181-
<Nav />
182181
{#each $gridSnapshot as { key, node } (key)}
183182
<Node {key} {node} />
184183
{/each}
185-
186-
<Player />
187184
</div>
188185

189186
<style>
190187
.wrapper {
191188
position: relative;
192-
height: 100%;
193189
padding-top: 1px;
194190
gap: var(--grid-gap);
195191
display: grid;

‎src/lib/Components/Nav.svelte‎

Lines changed: 9 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,62 +12,35 @@
1212
</script>
1313

1414
<div class="wrapper">
15-
<div class="nav left" on:pointerdown|stopPropagation={changeTheme}>
15+
<div class="nav" on:pointerdown|stopPropagation={changeTheme}>
1616
{#if $theme === 'light'}
1717
<Icon name="moon" />
1818
{:else}
1919
<Icon name="sun" />
2020
{/if}
2121
</div>
22-
<div class="nav right">
22+
<div class="nav">
2323
<div><Icon name="help" /></div>
2424
<div><Icon name="git" /></div>
2525
</div>
2626
</div>
2727

2828
<style>
2929
.wrapper {
30-
top: 0;
31-
left: 0;
3230
height: 63px;
33-
background-color: var(--bg-interface);
34-
position: absolute;
31+
padding: 10px 20px;
3532
width: 100%;
33+
display: flex;
34+
justify-content: space-between;
35+
align-items: center;
36+
background-color: var(--bg-interface);
37+
color: var(--color-nav);
3638
}
3739
.nav {
38-
position: absolute;
3940
display: flex;
4041
align-items: center;
4142
justify-content: space-evenly;
42-
color: var(--color-nav);
43-
/* background-color: var(--bg-nav); */
44-
}
45-
46-
.left {
47-
left: 0;
48-
top: 0;
49-
padding: 8px 0;
5043
height: 100%;
51-
width: 64px;
44+
gap: 20px;
5245
}
53-
54-
.right {
55-
right: 0;
56-
top: 0;
57-
padding: 8px 0;
58-
height: 100%;
59-
width: 128px;
60-
}
61-
62-
/* .wrapper {
63-
position: absolute;
64-
top: 0;
65-
left: 0;
66-
width: 100%;
67-
height: 64px;
68-
display: flex;
69-
align-items: center;
70-
justify-content: space-between;
71-
color: white;
72-
} */
7346
</style>

‎src/lib/Components/Player.svelte‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -62,14 +62,6 @@
6262
getWeight: (node) => {
6363
return $weight.get(toMapKey(node)) || 0;
6464
},
65-
hitBoundary: (node) => {
66-
if (node.row > $layout.player.row && node.col <= $layout.player.col) {
67-
console.log('Hit...', node.row, node.col);
68-
// console.log($layout.player);
69-
return true;
70-
}
71-
return false;
72-
},
7365
intercept: intercept
7466
});
7567
@@ -237,24 +229,16 @@
237229
});
238230
</script>
239231

240-
<div
241-
class="wrapper"
242-
style="--height:{$layout.player.height}px;--width:{$layout.player.width}px;"
243-
id="player"
244-
>
232+
<div class="wrapper" id="player">
245233
<AlgoSelect />
246234
<Tools />
247235
<Controls {playAlgorithm} />
248236
</div>
249237

250238
<style>
251239
.wrapper {
240+
flex-grow: 1;
252241
transition: background-color ease-in-out 0.5s;
253-
position: absolute;
254-
left: 0;
255-
bottom: 0;
256-
height: var(--height);
257-
min-height: var(--height);
258242
width: 100%;
259243
background-color: var(--bg-interface);
260244
@@ -263,16 +247,13 @@
263247
grid-template-rows: 1fr 1fr;
264248
grid-template-areas: 'select tools' 'controls controls';
265249
gap: 10px;
266-
padding-bottom: 10px;
267250
}
268251
269252
@media (min-width: 1024px) {
270253
.wrapper {
271-
left: 0;
272254
grid-template-columns: 1fr 1fr 1fr;
273255
grid-template-rows: 1fr;
274256
grid-template-areas: 'select controls tools';
275-
height: var(--height);
276257
}
277258
}
278259
</style>

‎src/lib/Components/Tools.svelte‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212

1313
<style>
1414
.wrapper {
15-
/* flex: 0.8; */
1615
display: flex;
1716
justify-content: center;
1817
align-items: center;
@@ -22,7 +21,6 @@
2221
.wrapper {
2322
grid-area: tools;
2423
height: 100%;
25-
/* width: 100%; */
2624
display: flex;
2725
align-items: center;
2826
justify-content: space-evenly;

‎src/lib/algorithms/aStar.ts‎

Lines changed: 36 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,56 +4,55 @@ import { minQueue } from '../utils/collections';
44
import type { AlgorithmOptions, Node } from '$lib/types';
55

66
const getHeuristic = (node: Node, endNode: Node) => {
7-
return Math.abs(endNode.row - node.row) + Math.abs(endNode.col - node.col);
7+
return Math.abs(endNode.row - node.row) + Math.abs(endNode.col - node.col);
88
};
99

1010
export const aStar = async ({
11-
startNode,
12-
endNode,
13-
isWall,
14-
isEndNode,
15-
getNode,
16-
getWeight,
17-
screen,
18-
hitBoundary,
19-
intercept
11+
startNode,
12+
endNode,
13+
isWall,
14+
isEndNode,
15+
getNode,
16+
getWeight,
17+
screen,
18+
intercept
2019
}: AlgorithmOptions) => {
21-
const q = minQueue();
20+
const q = minQueue();
2221

23-
q.enqueue({ node: startNode, weight: getHeuristic(startNode, endNode) });
22+
q.enqueue({ node: startNode, weight: getHeuristic(startNode, endNode) });
2423

25-
while (!q.isEmpty()) {
26-
const current = q.dequeue();
27-
if (!current) {
28-
return;
29-
}
24+
while (!q.isEmpty()) {
25+
const current = q.dequeue();
26+
if (!current) {
27+
return;
28+
}
3029

31-
const { node: currentNode } = current;
30+
const { node: currentNode } = current;
3231

33-
if (isEndNode(currentNode)) {
34-
return;
35-
}
32+
if (isEndNode(currentNode)) {
33+
return;
34+
}
3635

37-
await intercept();
36+
await intercept();
3837

39-
const neibhours = getGridNeibhours(currentNode, screen, getNode, hitBoundary);
38+
const neibhours = getGridNeibhours(currentNode, screen, getNode);
4039

41-
for (let nextNode of neibhours) {
42-
if (!nextNode || nextNode.visited) {
43-
continue;
44-
}
40+
for (let nextNode of neibhours) {
41+
if (!nextNode || nextNode.visited) {
42+
continue;
43+
}
4544

46-
if (isWall(nextNode)) {
47-
grid.visitNode(nextNode);
48-
} else {
49-
const neibhourWeight = getWeight(nextNode) + getHeuristic(nextNode, endNode) + 1;
45+
if (isWall(nextNode)) {
46+
grid.visitNode(nextNode);
47+
} else {
48+
const neibhourWeight = getWeight(nextNode) + getHeuristic(nextNode, endNode) + 1;
5049

51-
grid.visitNode(nextNode, currentNode);
50+
grid.visitNode(nextNode, currentNode);
5251

53-
q.enqueue({ node: getNode(nextNode), weight: neibhourWeight });
54-
}
55-
}
56-
}
52+
q.enqueue({ node: getNode(nextNode), weight: neibhourWeight });
53+
}
54+
}
55+
}
5756

58-
return;
57+
return;
5958
};

‎src/lib/algorithms/bfs.ts‎

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,47 +4,46 @@ import { queue } from '../utils/collections';
44
import type { AlgorithmOptions } from '$lib/types';
55

66
export const bfs = async ({
7-
startNode,
8-
isWall,
9-
isEndNode,
10-
getNode,
11-
screen,
12-
intercept,
13-
hitBoundary
7+
startNode,
8+
isWall,
9+
isEndNode,
10+
getNode,
11+
screen,
12+
intercept,
1413
}: AlgorithmOptions) => {
15-
const q = queue();
14+
const q = queue();
1615

17-
q.enqueue(startNode);
16+
q.enqueue(startNode);
1817

19-
while (!q.isEmpty()) {
20-
const currentNode = q.dequeue();
18+
while (!q.isEmpty()) {
19+
const currentNode = q.dequeue();
2120

22-
if (!currentNode) {
23-
return;
24-
}
21+
if (!currentNode) {
22+
return;
23+
}
2524

26-
if (isEndNode(currentNode)) {
27-
return;
28-
}
25+
if (isEndNode(currentNode)) {
26+
return;
27+
}
2928

30-
await intercept();
29+
await intercept();
3130

32-
const neibhours = getGridNeibhours(currentNode, screen, getNode, hitBoundary);
31+
const neibhours = getGridNeibhours(currentNode, screen, getNode);
3332

34-
for (let nextNode of neibhours) {
35-
if (!nextNode || nextNode.visited || hitBoundary(nextNode)) {
36-
continue;
37-
}
33+
for (let nextNode of neibhours) {
34+
if (!nextNode || nextNode.visited) {
35+
continue;
36+
}
3837

39-
if (isWall(nextNode)) {
40-
grid.visitNode(nextNode);
41-
} else {
42-
grid.visitNode(nextNode, currentNode);
38+
if (isWall(nextNode)) {
39+
grid.visitNode(nextNode);
40+
} else {
41+
grid.visitNode(nextNode, currentNode);
4342

44-
q.enqueue(getNode(nextNode));
45-
}
46-
}
47-
}
43+
q.enqueue(getNode(nextNode));
44+
}
45+
}
46+
}
4847

49-
return;
48+
return;
5049
};

0 commit comments

Comments
 (0)