Lightemerald/windows-user-space-emulator
2
0
Fork 0
mirror of https://github.com/momo5502/emulator.git synced 2026-01-30 16:11:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI progress

Browse Source
This commit is contained in:
momo5502
2025-04-28 21:02:13 +02:00
parent c2916cde59
commit 312c8aeeaf
4 changed files with 64 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
page/index.html
View File

@@ -12,6 +12,8 @@
<title>Sogen - Windows User Space Emulator</title> <title>Sogen - Windows User Space Emulator</title>
<meta name="color-scheme" content="dark">
<meta <meta
name="description" name="description"
content="Sogen is a high-performance Windows user space emulator that can emulate windows processes. It is ideal for security-, DRM- or malware research." content="Sogen is a high-performance Windows user space emulator that can emulate windows processes. It is ideal for security-, DRM- or malware research."

21
page/src/App.css
View File

@@ -4,35 +4,44 @@ html {
@media (pointer: fine) { @media (pointer: fine) {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 20px; width: 14px;
height: 14px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: transparent; background: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: rgba(97, 97, 97, 0.7); background-color: rgba(97, 97, 97, 0.7);
border-radius: 20px; border-radius: 20px;
min-height: 50px; border: 4px solid transparent;
border: 6px solid transparent;
background-clip: content-box; background-clip: content-box;
transition: all 0.1s linear; transition: all 0.1s linear;
min-height: 50px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: rgba(97, 97, 97, 0.9); background-color: rgba(97, 97, 97, 0.9);
} }
::-webkit-scrollbar-corner {
background: transparent;
}
} }
button { button {
cursor: pointer; cursor: pointer;
} }
.resizable-cell,
.terminal-output span {
padding: 4px;
}
.terminal-output { .terminal-output {
line-height: 1.5;
font-weight: 600; font-weight: 600;
font-size: 1.05em; font-size: 1.0em;
font-family: monospace; font-family: monospace;
height: 100%; height: 100%;
} }

60
page/src/Playground.tsx
View File

@@ -8,7 +8,7 @@ import {
SidebarProvider, SidebarProvider,
SidebarTrigger, SidebarTrigger,
} from "@/components/ui/sidebar"; } from "@/components/ui/sidebar";
import { Button } from "./components/ui/button"; import { Button } from "@/components/ui/button";
import { Emulator, UserFile, EmulationState } from "./emulator"; import { Emulator, UserFile, EmulationState } from "./emulator";
import { getFilesystem } from "./filesystem"; import { getFilesystem } from "./filesystem";
@@ -18,14 +18,19 @@ import {
Popover, Popover,
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "./components/ui/popover"; } from "@/components/ui/popover";
import { createDefaultSettings } from "./settings"; import { createDefaultSettings } from "./settings";
import { SettingsMenu } from "./components/settings-menu"; import { SettingsMenu } from "@/components/settings-menu";
import { PlayFill, StopFill, GearFill, PauseFill } from "react-bootstrap-icons"; import { PlayFill, StopFill, GearFill, PauseFill } from "react-bootstrap-icons";
import { StatusIndicator } from "./components/status-indicator"; import { StatusIndicator } from "@/components/status-indicator";
import { Header } from "./Header"; import { Header } from "./Header";
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable";
function selectAndReadFile(): Promise<UserFile> { function selectAndReadFile(): Promise<UserFile> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@@ -117,19 +122,19 @@ export function Playground() {
<SidebarProvider defaultOpen={false}> <SidebarProvider defaultOpen={false}>
<AppSidebar /> <AppSidebar />
<SidebarInset className="h-[100dvh]"> <SidebarInset className="h-[100dvh]">
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 overflow-y-auto"> <header className="flex shrink-0 items-center gap-2 border-b p-2 overflow-y-auto">
<SidebarTrigger className="-ml-1" /> <SidebarTrigger />
<Separator orientation="vertical" className="mr-2 h-4" /> <Separator orientation="vertical" className="h-4" />
<Button onClick={() => createEmulator()}> <Button size="sm" onClick={() => createEmulator()}>
<PlayFill /> Run Sample <PlayFill /> Run Sample
</Button> </Button>
<Button onClick={() => loadAndRunUserFile()}> <Button size="sm" onClick={() => loadAndRunUserFile()}>
<PlayFill /> Run your .exe <PlayFill /> Run your .exe
</Button> </Button>
<Button variant="secondary" onClick={() => emulator?.stop()}> <Button size="sm" variant="secondary" onClick={() => emulator?.stop()}>
<StopFill /> Stop Emulation <StopFill /> Stop Emulation
</Button> </Button>
<Button variant="secondary" onClick={toggleEmulatorState}> <Button size="sm" variant="secondary" onClick={toggleEmulatorState}>
{isEmulatorPaused() ? ( {isEmulatorPaused() ? (
<> <>
<PlayFill /> Resume Emulation <PlayFill /> Resume Emulation
@@ -143,7 +148,7 @@ export function Playground() {
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button variant="secondary"> <Button size="sm" variant="secondary">
<GearFill /> Settings <GearFill /> Settings
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
@@ -157,8 +162,35 @@ export function Playground() {
/> />
</div> </div>
</header> </header>
<div className="flex flex-1 flex-col gap-4 p-4 overflow-auto"> <div className="flex flex-1 flex-col overflow-auto">
<Output ref={output} /> <ResizablePanelGroup direction="horizontal" autoSaveId="debugger-panel-group">
{/* Left */}
<ResizablePanel className="resizable-cell">Disassembly</ResizablePanel>
<ResizableHandle />
{/* Middle */}
<ResizablePanel>
<ResizablePanelGroup direction="vertical" autoSaveId="debugger-panel-middle-group">
{/* Middle - Top */}
<ResizablePanel>
<Output ref={output} />
</ResizablePanel>
<ResizableHandle />
{/* Middle - Bottom */}
<ResizablePanel className="resizable-cell">Memory</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
<ResizableHandle />
{/* Right */}
<ResizablePanel>
<ResizablePanelGroup direction="vertical" autoSaveId="debugger-panel-right-group">
{/* Right - Top */}
<ResizablePanel className="resizable-cell">Registers</ResizablePanel>
<ResizableHandle />
{/* Right - Bottom */}
<ResizablePanel className="resizable-cell">Stack</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
</div> </div>
</SidebarInset> </SidebarInset>
</SidebarProvider> </SidebarProvider>

2
page/src/components/output.tsx
View File

@@ -238,7 +238,7 @@ export class Output extends React.Component<OutputProps, FullOutputState> {
width={this.state.width} width={this.state.width}
height={this.state.height} height={this.state.height}
itemCount={this.state.lines.length} itemCount={this.state.lines.length}
itemSize={20} itemSize={16}
> >
{({ index, style }) => { {({ index, style }) => {
const line = this.state.lines[index]; const line = this.state.lines[index];