ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

Added in an emulator for coding extensions

Browse Source 
no more exiting the instance just to constantly reupload your extension to see if it works.
write many times, test once. :)
This commit is contained in:
itsskaiya
2025-11-24 12:47:33 -05:00
parent 27a98598bd
commit 76492b492b
6 changed files with 610 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
views/emulator.html Normal file
View File

@@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WaifuBoard Extension Emulator</title>
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/emulator.css">
</head>
<body>
<aside class="sidebar">
<a href="index.html" class="nav-button" title="Image Boards">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
<span>Back To Home</span>
</a>
<button class="nav-button active" title="Emulator">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
<span>Emulator</span>
</button>
<button class="nav-button" title="Reset" onclick="window.location.reload()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
<span>Reset</span>
</button>
</aside>
<div class="main-wrapper">
<header class="top-header">
<h3>Extension Emulator</h3>
</header>
<div class="emulator-container">
<div class="editor-pane">
<div class="control-bar" style="background: transparent; border: none; padding: 0;">
<h4 style="margin:0">Extension Code</h4>
<span style="font-size: 0.8rem; color: var(--text-tertiary); margin-left: auto;">Paste your .js file
here</span>
</div>
<textarea id="code-input" class="code-editor" spellcheck="false"
placeholder="// Paste your extension class here..."></textarea>
</div>
<div class="preview-pane">
<div class="control-bar">
<div class="control-group">
<label>Function</label>
<select id="func-select" class="control-input">
<option value="fetchSearchResult">fetchSearchResult (Search)</option>
<option value="fetchInfo">fetchInfo (Image Details)</option>
<option value="findChapters">findChapters (Manga/Novel)</option>
<option value="findChapterPages">findChapterPages (Read)</option>
</select>
</div>
<div class="control-group">
<label>Query / ID / URL</label>
<input type="text" id="arg-input" class="control-input" value=""
placeholder="Search query or ID">
</div>
<div class="control-group" style="max-width: 80px;">
<label>Page</label>
<input type="number" id="page-input" class="control-input" value="1" min="1">
</div>
<button class="btn-run" id="run-btn">Run</button>
</div>
<div style="display: flex; flex-direction: column; flex: 1; overflow: hidden; position: relative;">
<div class="tabs">
<button class="tab-btn active" onclick="switchTab('visual')">Visual</button>
<button class="tab-btn" onclick="switchTab('json')">JSON</button>
<button class="tab-btn" onclick="switchTab('console')">Console</button>
</div>
<div id="output-visual" class="output-area">
<div class="loading-state hidden">Loading...</div>
<div id="visual-container"></div>
</div>
<div id="output-json" class="output-area hidden">
<pre id="json-content"></pre>
</div>
<div id="output-console" class="output-area hidden">
<div id="console-content"></div>
</div>
</div>
</div>
</div>
</div>
<script src="../src/emulator/emulator.js"></script>
</body>
</html>

4
views/index.html
View File

@@ -43,6 +43,10 @@
</nav>
<nav style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto;">
<a href="emulator.html" class="nav-button" title="Emulator">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
<span>Emulator</span>
</a>
<a href="marketplace.html" class="nav-button" title="Marketplace">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
<span>Marketplace</span>

196
views/styles/emulator.css Normal file
View File

@@ -0,0 +1,196 @@
.emulator-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
height: calc(100vh - var(--header-height));
padding: 1rem 2rem 2rem 2rem;
overflow: hidden;
}
.editor-pane,
.preview-pane {
display: flex;
flex-direction: column;
gap: 1rem;
height: 100%;
overflow: hidden;
}
.code-editor {
flex: 1;
background: var(--bg-sidebar);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: #d4d4d8;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 14px;
padding: 1rem;
resize: none;
line-height: 1.5;
tab-size: 4;
}
.code-editor:focus {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent-glow);
}
.control-bar {
display: flex;
gap: 0.5rem;
background: var(--bg-surface);
padding: 1rem;
border-radius: var(--radius-md);
border: 1px solid var(--border);
align-items: center;
flex-wrap: wrap;
}
.control-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
flex: 1;
}
.control-group label {
font-size: 0.75rem;
color: var(--text-secondary);
border: none;
padding: 0;
margin: 0;
}
.control-input {
background: var(--bg-base);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 0.5rem;
border-radius: var(--radius-md);
font-size: 0.9rem;
width: 100%;
}
.btn-run {
background: var(--accent);
color: white;
border: none;
padding: 0.6rem 1.5rem;
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
height: 40px;
align-self: flex-end;
transition: 0.2s;
}
.btn-run:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.tabs {
display: flex;
gap: 0.5rem;
border-bottom: 1px solid var(--border);
margin-bottom: 0.5rem;
}
.tab-btn {
background: transparent;
border: none;
color: var(--text-secondary);
padding: 0.5rem 1rem;
cursor: pointer;
border-bottom: 2px solid transparent;
font-weight: 500;
}
.tab-btn.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.output-area {
flex: 1;
background: var(--bg-sidebar);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: auto;
padding: 1rem;
position: relative;
}
pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
color: #a5b4fc;
}
.visual-card {
display: inline-flex;
flex-direction: column;
width: 150px;
margin: 0.5rem;
background: var(--bg-surface);
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--border);
vertical-align: top;
}
.visual-card img {
width: 100%;
height: 200px;
object-fit: cover;
background: #27272a;
}
.visual-card .title {
padding: 0.5rem;
font-size: 0.8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.visual-chapter {
padding: 0.5rem;
border-bottom: 1px solid var(--border);
cursor: pointer;
}
.visual-chapter:hover {
background: var(--bg-surface-hover);
}
.log-entry {
font-family: monospace;
border-bottom: 1px solid var(--border);
padding: 2px 0;
}
.log-info {
color: #60a5fa;
}
.log-warn {
color: #facc15;
}
.log-error {
color: #f87171;
}
.loading-state {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--text-secondary);
}
.loading-state.hidden {
display: none;
}