Toolbar

src/App.svelte

@@ -1,14 +1,17 @@
 <script>
-	import { sortRegistrator } from './core/state/sort-registrator.js'
 	import Toolbar from './toolbar/Toolbar.svelte'
 	import Bars from './bars-mode/Bars.svelte'
-	import { SORT_TYPE } from './core/state/sort-type.js'
-	import Contacts from './toolbar/Contacts.svelte'
 	import Card from './cards/Card.svelte'
 	import Images from './image-mode/Images.svelte'
+	import { SORT_TYPE } from './core/state/sort-type.js'
 	import { createState } from './core/state/sort-state.svelte.js'
+	import { sortRegistrator } from './core/state/sort-registrator.js'
 
 	let mode = $state('bars')
+	let options = $state({
+		bars: { type: 'random' },
+		image: { type: 'dog' },
+	})
 
 	const sortTypeList = new Set(Object.keys(SORT_TYPE))
 
@@ -24,17 +27,15 @@
 <div
 	class="relative grid place-items-center gap-4 p-4 md:grid-cols-2 md:p-9 lg:h-screen lg:grid-cols-3"
 >
-	<Toolbar show={sortState.isShow} block={sortState.isBlock} {sort} bind:mode />
+	<Toolbar show={sortState.isShow} block={sortState.isBlock} {sort} bind:mode bind:options />
 
 	{#each sortState.state as sort}
 		<Card sortType={sort.id} bind:status={sort.status}>
 			{#if mode === 'bars'}
-				<Bars bind:status={sort.status} {registrator} sortType={sort.id} />
+				<Bars bind:status={sort.status} {registrator} {options} sortType={sort.id} />
 			{:else}
-				<Images bind:status={sort.status} {registrator} sortType={sort.id} />
+				<Images bind:status={sort.status} {registrator} {options} sortType={sort.id} />
 			{/if}
 		</Card>
 	{/each}
 </div>
-
-<Contacts />

src/bars-mode/Bars.svelte

@@ -8,18 +8,43 @@
 	import config from '../config.js'
 	import { delay } from '../core/animations/delay.js'
 	import { STATUS } from '../core/state/status'
+	import { shuffle } from '../core/shuffle'
 
-	let { status = $bindable(), sortType, registrator } = $props()
+	let { status = $bindable(), sortType, registrator, options } = $props()
 
-	let list = $state(randomArray(config.slider.max))
+	function fewUnique(max) {
+		const numberOfRepat = 3
+		const numeberOfUnique = max / numberOfRepat
+		const uniqueNubers = randomArray(numeberOfUnique)
+
+		return shuffle(
+			uniqueNubers.reduce((acc, curr) => {
+				Array.from({ length: numberOfRepat }, () => curr)
+				return [...acc, ...Array.from({ length: numberOfRepat }, () => curr)]
+			}, []),
+		)
+	}
+
+	function createArray(type) {
+		if (type === 'random') return randomArray(config.slider.max)
+		if (type === 'reversed') return randomArray(config.slider.max).sort((a, b) => b - a)
+		if (type === 'few-unique') return fewUnique(config.slider.max)
+		return randomArray(config.slider.max)
+	}
+
+	let list = $derived(createArray(options.bars.type))
 
 	/** @type {(value: number[]) => {id: number, value: number}[]} */
 	const createList = values =>
 		values.map((value, idx) => {
 			return { id: idx, value }
 		})
 
-	let alist = $state(createList(list))
+	let alist = $state([])
+
+	$effect(() => {
+		alist = createList(list)
+	})
 
 	async function sort() {
 		const animations = recordAnimation(sortType, list.slice())

src/cards/Card.svelte

@@ -6,7 +6,7 @@
 	let { sortType, status = $bindable(), children } = $props()
 
 	const defaultClass =
-		'relative grid h-full w-full place-content-center rounded-3xl border-2 border-black p-4 '
+		'relative grid h-full w-full place-content-center rounded-3xl border-2 border-black p-4 min-h-[300px]'
 </script>
 
 <div class={cn(defaultClass, status === STATUS.SELECTED && 'border-dashed')}>

src/core/state/sort-registrator.js

@@ -8,7 +8,6 @@ export function sortRegistrator(sortList) {
 		 * @param {() => void} cb
 		 */
 		register(type, cb) {
-			console.log('[reg] ', type)
 			entities.set(type, cb)
 		},
 		/** @param {string} type */
@@ -18,7 +17,6 @@ export function sortRegistrator(sortList) {
 		},
 		/** @param {string} type */
 		unregister(type) {
-			console.log('[un-reg] ', type)
 			entities.delete(type)
 		},
 		async runAllSorts() {

src/image-mode/Images.svelte

@@ -6,14 +6,14 @@
 	import { flip } from 'svelte/animate'
 	import { startAnimation } from '../core/animations/start-animation.js'
 	import { recordAnimation } from '../core/sorting-algorithms-fabric'
+	import { STATUS } from '../core/state/status'
 
-	let { status = $bindable(), registrator, sortType } = $props()
+	let { status = $bindable(), registrator, sortType, options } = $props()
 
 	const ANIMTAION_SPEED = 60
 
 	const cards = shuffle(generateCards())
 	const list = cards.map(c => c.id)
-
 	let alist = $state(cards)
 
 	async function sort() {
@@ -31,7 +31,7 @@
 				alist = alist
 			},
 		})
-		status = 'done'
+		status = STATUS.DONE
 	}
 
 	$effect(() => {
@@ -47,7 +47,7 @@
 			<div
 				animate:flip={{ duration: ANIMTAION_SPEED - 50, easing: sineInOut }}
 				class="card"
-				style={`border: 1px solid gray;background: url(/dog.jpg) ${card.x}px ${card.y}px`}
+				style={`border: 1px solid gray;background: url(/${options.image.type}.jpg) ${card.x}px ${card.y}px`}
 			></div>
 		{/each}
 	</div>

src/lib/ui/button/Button.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { cn } from '../../cn.js'
-	let { disabled = false, onclick, children, ...rest } = $props()
+	let { disabled = false, onclick = () => {}, children, ...rest } = $props()
 
 	const defaultClass = 'w-full rounded-lg border-2 border-black bg-secondary px-4 py-2 text-2xl'
 	const disabledClass = 'disabled:bg-gray-400'

src/lib/ui/toggle-group/ToggleGroup.svelte

@@ -2,7 +2,7 @@
 	import { cn } from '../../cn.js'
 	import { createRadioGroup, melt } from '@melt-ui/svelte'
 
-	let { options = [], value = $bindable(), disabled = false } = $props()
+	let { options = [], value = $bindable(), disabled = false, ...rest } = $props()
 
 	$effect(() => {
 		value = $radioState
@@ -17,9 +17,8 @@
 	})
 
 	const button = {
-		default: 'rounded-xl border-2 border-transparent p-4 opacity-70 text-2xl',
-		disabled: 'disabled:bg-gray-400 disabled:border-transparent',
-		focus: 'hover:border-black',
+		default: 'w-full rounded-lg border-2 border-black bg-secondary px-4 py-2 text-2xl opacity-50',
+		disabled: 'disabled:bg-gray-400 disabled:opacity-100',
 		active: 'aria-checked:opacity-100 aria-checked:border-black',
 	}
 </script>
@@ -31,7 +30,7 @@
 			disabled={option.disabled}
 			id={option.name}
 			aria-labelledby="{option.name}-label"
-			class={cn(button.default, button.active, button.focus, button.disabled)}
+			class={cn(button.default, button.active, button.focus, rest.class, button.disabled)}
 		>
 			{option.name}
 		</button>

src/toolbar/ModeSelect.svelte

@@ -1,9 +1,9 @@
 <script>
 	import ToggleGroup from '../lib/ui/toggle-group/ToggleGroup.svelte'
 
-	let { mode = $bindable() } = $props()
+	let { mode = $bindable(), ...rest } = $props()
 
 	const options = [{ name: 'bars' }, { name: 'image' }, { name: 'circle', disabled: true }]
 </script>
 
-<ToggleGroup bind:value={mode} {options} />
+<ToggleGroup bind:value={mode} {options} class={rest.class} />

src/toolbar/Toolbar.svelte

@@ -2,9 +2,9 @@
 	import ToolbarWrapper from './ToolbarWrapper.svelte'
 	import ToolbarContent from './ToolbarContent.svelte'
 
-	let { block, mode = $bindable(), show, sort } = $props()
+	let { block, mode = $bindable(), show, sort, options = $bindable() } = $props()
 </script>
 
 <ToolbarWrapper {show}>
-	<ToolbarContent bind:mode {show} {block} {sort} />
+	<ToolbarContent bind:options bind:mode {show} {block} {sort} />
 </ToolbarWrapper>

src/toolbar/ToolbarContent.svelte

@@ -1,16 +1,37 @@
 <script>
 	import ModeSelect from './ModeSelect.svelte'
 	import Button from '../lib/ui/button/Button.svelte'
+	import Icon from '../lib/ui/Icon.svelte'
+	import BarsOptions from './options/BarsOptions.svelte'
+	import ImageOptions from './options/ImageOptions.svelte'
+	import CircleOptions from './options/CircleOptions.svelte'
 
-	let { block, mode = $bindable(), show, sort } = $props()
+	let { block, mode = $bindable(), show, sort, options = $bindable() } = $props()
 </script>
 
-<div class="grid h-full w-full gap-4 md:flex md:p-8">
-	<ModeSelect bind:mode />
-
-	<div class="mx-4 h-full w-[1px] border-r-2 border-black"></div>
-
-	<Button disabled={block} onclick={sort}>
-		SORT {show ? 'SELECTED' : 'ALL'}
-	</Button>
+<div class="grid h-full w-full grid-cols-3 gap-4 p-4">
+	{#if mode === 'bars'}
+		<BarsOptions bind:options />
+	{:else if mode === 'image'}
+		<ImageOptions bind:options />
+	{:else}
+		<CircleOptions />
+	{/if}
+	<div class="grid grid-cols-2 gap-2">
+		<div class="col-span-2 grid">
+			<ModeSelect bind:mode class="px-1 py-2 text-xs" />
+		</div>
+		<Button class="col-span-2 px-2 py-2" disabled={block} onclick={sort}>
+			SORT {show ? 'SELECTED' : 'ALL'}
+		</Button>
+	</div>
+	<div class="place-content-ceter grid justify-center text-xl">
+		<div class="relative flex items-center gap-2 p-2">
+			<Icon name="github" width="30" height="30" class="text-red-300" />
+			<a
+				href="https://github.com/SavaCool122/sorting-visualizer"
+				class="after:absolute after:inset-1">Github</a
+			>
+		</div>
+	</div>
 </div>

src/toolbar/options/BarsOptions.svelte

@@ -0,0 +1,17 @@
+<script>
+	import Button from '../../lib/ui/button/Button.svelte'
+
+	let { options = $bindable() } = $props()
+</script>
+
+<div class="grid grid-cols-2 gap-2 p-2">
+	<Button onclick={() => (options.bars = { type: 'random' })} class="col-span-2 px-2 py-1 text-sm">
+		random
+	</Button>
+	<Button onclick={() => (options.bars = { type: 'reversed' })} class="px-2 py-1 text-sm "
+		>reversed</Button
+	>
+	<Button onclick={() => (options.bars = { type: 'few-unique' })} class="px-2 py-1 text-sm"
+		>few unique</Button
+	>
+</div>

src/toolbar/options/CircleOptions.svelte

@@ -0,0 +1,8 @@
+<script>
+	import Button from '../../lib/ui/button/Button.svelte'
+</script>
+
+<div class="grid grid-cols-2 place-content-center gap-4 px-8">
+	<Button class="px-1 py-4 text-sm">Color</Button>
+	<Button class="px-1 py-4 text-sm">Size</Button>
+</div>

src/toolbar/options/ImageOptions.svelte

@@ -0,0 +1,10 @@
+<script>
+	import Button from '../../lib/ui/button/Button.svelte'
+	let { options = $bindable() } = $props()
+</script>
+
+<div class="grid grid-cols-3 place-content-center gap-4 px-6">
+	<Button onclick={() => (options.image = { type: 'dog' })} class="px-1 py-4 text-base">1</Button>
+	<Button onclick={() => (options.image = { type: 'kronk' })} class="px-1 py-4 text-base">2</Button>
+	<Button disabled class="px-1 py-4 text-base">3</Button>
+</div>