Skip to content

Commit f3b1d3d

Browse files
Ivan SemochkinIvan Semochkin
Ivan Semochkin
authored and
Ivan Semochkin
committed
update nav
1 parent d74e9bb commit f3b1d3d

File tree

7 files changed

+90
-68
lines changed

7 files changed

+90
-68
lines changed

‎src/app.css

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,14 +158,18 @@ body.dark {
158158
--bg-not-visited: hsla(220, 9%, 27%, 0.302);
159159
--bg-visited: hsla(359, 94%, 55%, 0.3);
160160
--bg-wall: hsl(0, 5%, 75%);
161-
--bg-nav: hsl(240, 10%, 20%, 0.7);
161+
162+
--bg-nav: hsl(240, 10%, 20%, 1);
162163
}
163164

164165
body.light {
166+
--bg-body: hsl(229, 26%, 8%);
165167
--bg-not-visited: hsla(0, 0%, 100%, 1);
166168
--bg-visited: hsla(359, 94%, 55%, 0.3);
167169
--bg-body: hsl(220, 3%, 21%);
168170
--bg-player: hsl(240, 10%, 30%);
169171
--bg-wall: hsla(0, 0%, 55%, 1);
170-
--bg-nav: hsl(240, 10%, 20%, 0.9);
172+
173+
174+
--bg-nav: hsl(240, 10%, 30%, 1);
171175
}

‎src/app.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6+
<link rel="manifest" href="manifest.json" />
67
<meta
78
name="viewport"
89
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

‎src/lib/Components/Icon.svelte

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@
5656
><path
5757
d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm-32 288h-32V176h32zm96 0h-32V176h32z"
5858
></path></svg
59-
>{:else if name === 'playBack'}
59+
>
60+
{:else if name === 'playBack'}
6061
<svg
6162
stroke="currentColor"
6263
fill="currentColor"

‎src/lib/Components/Nav.svelte

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,51 @@
1111
};
1212
</script>
1313

14-
<div class="nav left" on:pointerdown|stopPropagation={changeTheme}>
15-
{#if $theme === 'light'}
16-
<Icon name="moon" />
17-
{:else}
18-
<Icon name="sun" />
19-
{/if}
20-
</div>
21-
<div class="nav right">
22-
<div><Icon name="help" /></div>
23-
<div><Icon name="git" /></div>
14+
<div class="wrapper">
15+
<div class="nav left" on:pointerdown|stopPropagation={changeTheme}>
16+
{#if $theme === 'light'}
17+
<Icon name="moon" />
18+
{:else}
19+
<Icon name="sun" />
20+
{/if}
21+
</div>
22+
<div class="nav right">
23+
<div><Icon name="help" /></div>
24+
<div><Icon name="git" /></div>
25+
</div>
2426
</div>
2527

2628
<style>
29+
.wrapper {
30+
top: 0;
31+
left: 0;
32+
height: 63px;
33+
background-color: var(--bg-nav);
34+
position: absolute;
35+
width: 100%;
36+
}
2737
.nav {
2838
position: absolute;
2939
display: flex;
3040
align-items: center;
3141
justify-content: space-evenly;
3242
color: var(--color-nav);
33-
background-color: var(--bg-nav);
43+
/* background-color: var(--bg-nav); */
3444
}
3545
3646
.left {
3747
left: 0;
3848
top: 0;
3949
padding: 8px 0;
40-
height: 64px;
50+
height: 100%;
4151
width: 64px;
4252
}
4353
4454
.right {
4555
right: 0;
4656
top: 0;
4757
padding: 8px 0;
48-
height: 64px;
58+
height: 100%;
4959
width: 128px;
5060
}
5161

‎src/lib/Components/Tools.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
<style>
1818
.wrapper {
19-
flex: 0.6;
19+
flex: 0.8;
2020
display: flex;
2121
justify-content: space-between;
2222
}

‎src/lib/stores/layout.ts

Lines changed: 49 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,70 +2,68 @@ import { writable } from 'svelte/store';
22
import { tick } from 'svelte';
33

44
const INITIAL_STATE = {
5-
screen: { row: 0, col: 0 },
6-
player: { row: 0, col: 0, height: 0, width: 0 },
7-
isCalculating: true
5+
screen: { row: 0, col: 0 },
6+
player: { row: 0, col: 0, height: 0, width: 0 },
7+
isCalculating: true
88
};
99

1010
const createLayoutStore = () => {
11-
const { subscribe, update } = writable(INITIAL_STATE);
11+
const { subscribe, update } = writable(INITIAL_STATE);
1212

13-
const setLayout = () => {
14-
const screenWidth = window.innerWidth;
15-
const screenHeight = window.innerHeight;
16-
const screenCols = Math.round(screenWidth / 32);
17-
const screenRows = Math.round(screenHeight / 32);
13+
const setLayout = () => {
14+
const screenWidth = window.innerWidth;
15+
const screenHeight = window.innerHeight;
16+
const screenCols = Math.round(screenWidth / 32);
17+
const screenRows = Math.round(screenHeight / 32);
1818

19-
const player = getPlayerLayout(screenHeight, screenCols, screenRows);
19+
const player = getPlayerLayout(screenHeight, screenCols, screenRows);
2020

21-
update((current) => {
22-
current.screen.row = screenRows;
23-
current.screen.col = screenCols;
24-
current.player = player;
25-
current.isCalculating = true;
26-
return current;
27-
});
21+
update((current) => {
22+
current.screen.row = screenRows;
23+
current.screen.col = screenCols;
24+
current.player = player;
25+
current.isCalculating = true;
26+
return current;
27+
});
2828

29-
tick().then(() => {
30-
update((current) => {
31-
current.isCalculating = false;
32-
return current;
33-
});
34-
});
35-
};
29+
tick().then(() => {
30+
update((current) => {
31+
current.isCalculating = false;
32+
return current;
33+
});
34+
});
35+
};
3636

37-
const getPlayerLayout = (screenHeight: number, screenCols: number, screenRows: number) => {
38-
let playerRows;
39-
let playerCols;
37+
const getPlayerLayout = (screenHeight: number, screenCols: number, screenRows: number) => {
38+
let playerRows;
39+
let playerCols;
4040

41-
const emptyVerticalSpace = (screenHeight % 32) - 1;
41+
const emptyVerticalSpace = (screenHeight % 32) - 1;
4242

43-
if (screenRows <= 10) {
44-
playerRows = 4;
45-
} else if (screenRows <= 22) {
46-
playerRows = 5;
47-
} else {
48-
playerRows = 6;
49-
}
43+
if (screenRows <= 22) {
44+
playerRows = 4;
45+
} else {
46+
playerRows = 6;
47+
}
5048

51-
if (screenCols <= 30) {
52-
playerCols = screenCols;
53-
} else {
54-
playerCols = 18;
55-
}
49+
if (screenCols <= 30) {
50+
playerCols = screenCols;
51+
} else {
52+
playerCols = 18;
53+
}
5654

57-
return {
58-
row: screenRows - playerRows,
59-
col: playerCols,
60-
height: playerRows * 32 + emptyVerticalSpace,
61-
width: playerCols * 32 - 2
62-
};
63-
};
55+
return {
56+
row: screenRows - playerRows,
57+
col: playerCols,
58+
height: playerRows * 32 + emptyVerticalSpace,
59+
width: playerCols * 32 - 2
60+
};
61+
};
6462

65-
return {
66-
subscribe,
67-
setLayout
68-
};
63+
return {
64+
subscribe,
65+
setLayout
66+
};
6967
};
7068

7169
export const layout = createLayoutStore();

‎static/manifest.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "Pathfinding Visualizer",
3+
"short_name": "Pathfinding Visualizer",
4+
"start_url": ".",
5+
"display": "standalone",
6+
"background_color": "red",
7+
"description": "Pathfinding algorithms visualizer"
8+
}

0 commit comments

Comments
 (0)