update layout

Author: Ivan Semochkin

src/app.css

@@ -170,6 +170,5 @@ body.light {
 	--bg-player: hsl(240, 10%, 30%);
 	--bg-wall: hsla(0, 0%, 55%, 1);
 
-
     --bg-nav: hsl(240, 10%, 30%, 1);
 }

src/lib/Components/AlgoSelect.svelte

@@ -40,17 +40,16 @@
 <style>
 	.wrapper {
 		height: 100%;
-		min-width: 160px;
+		grid-area: select;
+		/* max-width: 160px; */
+		width: 100%;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		font-size: 24px;
 		color: white;
 		position: relative;
 		font-weight: bold;
-		border: 2px solid var(--bg-body);
-		border-top: none;
-		border-left: none;
 	}
 
 	ul {

src/lib/Components/Player.svelte

@@ -20,6 +20,7 @@
 	import { player, cancelFunction } from '$lib/stores/player';
 	import { history, trackAtTheEnd } from '$lib/stores/history';
 	import { algorithms } from '$lib/algorithms';
+	import AlgoSelect from './AlgoSelect.svelte';
 
 	const playAlgorithm = async () => {
 		const drawShortestPath = async (node: Node | undefined): Promise<void> => {
@@ -241,32 +242,37 @@
 	style="--height:{$layout.player.height}px;--width:{$layout.player.width}px;"
 	id="player"
 >
+	<AlgoSelect />
 	<Tools />
 	<Controls {playAlgorithm} />
 </div>
 
 <style>
 	.wrapper {
 		transition: background-color ease-in-out 0.5s;
-
 		position: absolute;
 		left: 0;
 		bottom: 0;
 		height: var(--height);
 		min-height: var(--height);
-		width: var(--width);
+		width: 100%;
 		background-color: var(--bg-player);
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
+
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: 1fr 1fr;
+		grid-template-areas: 'select tools' 'controls controls';
 		gap: 10px;
+		padding-bottom: 10px;
 	}
 
-	/* @media (min-width: 1024px) {
+	@media (min-width: 1024px) {
 		.wrapper {
 			left: 0;
-			width: 576px;
+			grid-template-columns: 1fr 1fr 1fr;
+			grid-template-rows: 1fr;
+			grid-template-areas: 'select controls tools';
 			height: var(--height);
 		}
-	} */
+	}
 </style>

src/lib/Components/PlayerControls/Controls.svelte

@@ -57,8 +57,8 @@
 
 <style>
 	.wrapper {
-		flex: 1;
-		width: 100%;
+		/* width: 100%; */
+		grid-area: controls;
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -74,7 +74,6 @@
 		align-items: center;
 		border: none;
 		color: inherit;
-		font-size: 32px;
 	}
 
 	button.disabled:hover {
@@ -88,7 +87,7 @@
 
 	.play {
 		color: white;
-		font-size: 68px;
+		font-size: 64px;
 	}
 
 	.play:hover {

src/lib/Components/Tools.svelte

@@ -1,30 +1,28 @@
 <script lang="ts">
-	import AlgoSelect from '$lib/Components/AlgoSelect.svelte';
 	import Wall from '$lib/Components/Tools/Wall.svelte';
 	import Weight from '$lib/Components/Tools/Weight.svelte';
 	import Reset from '$lib/Components/Tools/Reset.svelte';
 </script>
 
 <div class="wrapper">
-	<AlgoSelect />
-	<div class="tools">
-		<Weight name="weight" />
-		<Wall name="wall" />
-		<Reset name="reset" />
-	</div>
+	<Weight name="weight" />
+	<Wall name="wall" />
+	<Reset name="reset" />
 </div>
 
 <style>
 	.wrapper {
-		flex: 0.8;
+		/* flex: 0.8; */
 		display: flex;
-		justify-content: space-between;
+		justify-content: center;
+		align-items: center;
+		gap: 10px;
 	}
 
-	.tools {
-		flex: 1;
+	.wrapper {
+		grid-area: tools;
 		height: 100%;
-		width: 100%;
+		/* width: 100%; */
 		display: flex;
 		align-items: center;
 		justify-content: space-evenly;

src/lib/stores/layout.ts

@@ -35,16 +35,26 @@ const createLayoutStore = () => {
     };
 
     const getPlayerLayout = (screenHeight: number, screenCols: number, screenRows: number) => {
-        let playerRows;
+        let playerRows = 4;
         let playerCols;
 
         const emptyVerticalSpace = (screenHeight % 32) - 1;
 
-        if (screenRows <= 22) {
-            playerRows = 4;
-        } else {
-            playerRows = 6;
-        }
+        console.log('screenRows', screenRows);
+
+        // if (screenRows <= 22) {
+        //     playerRows = 4;
+        // } else if (screenRows <= 35) {
+        //     playerRows = 2;
+        // } else {
+        //     playerRows = 4
+        // }
+
+        // if (screenRows <= 22) {
+        //     playerRows = 4;
+        // } else {
+        //     playerRows = 4;
+        // }
 
         if (screenCols <= 30) {
             playerCols = screenCols;