Add execution table component

CHANGELOG.md

@@ -12,10 +12,12 @@ and this project adheres to [Semantic Versioning](https://semver.org).
 - Real-time register values update highlighting.
 - Real-time execution highlighting.
 - Clear button for logs and registers.
+- Execution table for instructions.
 
 ### Changed
 - States management for better performance and reactivity.
 - Functions for server communication.
+- Styles for screen adaptability.
 
 ### Fixed
 - Fixed bugs in code sending and execution.

apps/web/src/routes/(components)/execution_table.svelte

+<script lang="ts">
+	import * as Table from '$lib/components/ui/table';
+	import { code } from '$lib/stores/store';
+
+	const zeroPad = (num: number, places: number) => String(num).padStart(places, '0');
+</script>
+
+{#if $code}
+	<Table.Root>
+		<Table.Header>
+			<Table.Row>
+				<Table.Head class="text-left">Address</Table.Head>
+				<Table.Head class="text-center">Code</Table.Head>
+				<Table.Head class="text-center">Basic</Table.Head>
+				<Table.Head class="text-right">Source</Table.Head>
+			</Table.Row>
+		</Table.Header>
+		<Table.Body>
+			{#each $code.split('\n') as line, i}
+				<Table.Row class={i % 2 === 0 ? 'bg-muted' : ''}>
+					<Table.Cell class="text-left text-xs leading-[calc((100vh-46rem)/32)]">
+						0x{zeroPad(400000 + i * 4, 8)}
+					</Table.Cell>
+					<Table.Cell class="text-center text-xs leading-[calc((100vh-46rem)/32)]">
+						0x00000000
+					</Table.Cell>
+					<Table.Cell class="text-left text-xs leading-[calc((100vh-46rem)/32)]">
+						{line}
+					</Table.Cell>
+					<Table.Cell class="text-left text-xs leading-[calc((100vh-46rem)/32)]">
+						{line}
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+{/if}
+

apps/web/src/routes/(components)/index.ts

@@ -4,3 +4,4 @@ export { default as Editor } from './editor.svelte';
 export { default as Console } from './console.svelte';
 export { default as RegistersTable } from './registers_table.svelte';
 export { default as ControlPanel } from './control_panel.svelte';
+export { default as ExecutionTable } from './execution_table.svelte';
\ No newline at end of file

apps/web/src/routes/+page.svelte

@@ -7,7 +7,8 @@
 		Editor,
 		Console,
 		RegistersTable,
-		ControlPanel
+		ControlPanel,
+		ExecutionTable
 	} from './(components)/index';
 	import { connect } from '../socket';
 	import { onMount } from 'svelte';
@@ -39,7 +40,20 @@
 			<Resizable.PaneGroup direction="vertical" class="p-4">
 				<Resizable.Pane defaultSize={50} minSize={40}>
 					<div class="max-h-full overflow-auto">
+						<Tabs.Root value="edit">
+							<div class="flex justify-center">
+								<Tabs.List class="inline-flex w-auto">
+									<Tabs.Trigger value="edit">Edit</Tabs.Trigger>
+									<Tabs.Trigger value="execute">Execute</Tabs.Trigger>
+								</Tabs.List>
+							</div>
+							<Tabs.Content value="edit">
 								<Editor bind:code={$code} />
+							</Tabs.Content>
+							<Tabs.Content value="execute">
+								<ExecutionTable />
+							</Tabs.Content>
+						</Tabs.Root>
 					</div>
 				</Resizable.Pane>
 				<Resizable.Handle withHandle />