dave/ic10emu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better Layout

Browse Source
This commit is contained in:
Rachel
2024-03-28 14:22:11 -07:00
parent 88e37d23cf
commit 8d62cf407e
4 changed files with 117 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
www/src/index.html
View File

@@ -141,10 +141,13 @@
Shortcuts</button></li>
</ul>
</div>
<div class="nav navbar-nav navbar-header">
<div class="nav navbar-nav navbar-header ms-2">
<a class="navbar-brand active" aria-current="page" href="">Stationeers IC10 Emulator</a>
</div>
<div class="nav navbar-nav navbar-right d-flex flex-row">
<div class="nav navbar-nav ms-2">
</div>
<div class="nav navbar-nav ms-auto navbar-right d-flex flex-row">
<a class="navbar-text mt-auto mb-auto align-self-center" href="https://github.com/ryex/ic10emu">View on Github
<i class="fa-brands fa-github"></i></a>
</div>
@@ -185,34 +188,82 @@
</div>
</div>
<div class="d-flex flex-column flex-shrink-1">
<div id="virtualMachine" >
<div id="vmActiveIC">
<div class="p-2 d-flex flex-row justify-content-center">
<div class="d-flex flex-column">
<div id="vmControls" class="btn-group-vertical btn-group-sm " role="group"
aria-label="Virtual Machine Controls">
<div id="virtualMachine">
<div id="vmActiveIC" class="container ">
<div class="ms-1 pb-2 row border border-secondary rounded bg-secondary bg-opacity-10">
<div class="mt-2 col">
<div id="vmControls" class="btn-group-vertical btn-group-sm " role="group" aria-label="Virtual Machine Controls">
<button id="vmControlRun" type="button" class="btn btn-primary">Run</button>
<button id="vmControlStep" type="button" class="btn btn-secondary">Step</button>
<button id="vmControlReset" type="button" class="btn btn-warning">Reset</button>
</div>
</div>
<div id="vmActiveICState" class="mt-2 col-2 col-sm-4 col-md-10">
<div class="card ms-2">
<div class="card-header">State</div>
<div id="vmActiveICState" class="card-body">
<div class="hstack g-0">
<div>Instruction Pointer</div>
<div class="ms-auto" id="vmActiveICStateIP"></div>
</div>
</div>
</div>
<div class="p-2 ms-2 d-flex flex-row">
<div class="card ms-2">
<div class="card-header">Registers</div>
<div id="vmActiveRegisters" class="vm_reg">
<hr />
<div class="hstack g-0">
<div>Last Run Operations</div>
<div class="ms-auto" id="vmActiveICStateICount"></div>
</div>
<hr />
<div class="hstack g-0">
<div>Last State</div>
<div class="ms-auto" id="vmActiveICStateLastRun"></div>
</div>
</div>
<div id="vmActiveStack">
</div>
</div>
<div class="row mt-2">
<div class="accordion" id="vmActiveIC">
<!-- <div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseState" aria-expanded="true" aria-controls="collapseState">
State
</button>
</h2>
<div id="collapseState" class="accordion-collapse collapse show">
<div class="accordion-body">
</div>
</div>
</div> -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseReg" aria-expanded="true" aria-controls="collapseReg">
Registers
</button>
</h2>
<div id="collapseReg" class="accordion-collapse collapse show">
<div class="accordion-body">
<div id="vmActiveRegisters" class="vm_reg">
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseStack" aria-expanded="false" aria-controls="collapseStack">
Stack
</button>
</h2>
<div id="collapseStack" class="accordion-collapse collapse">
<div class="accordion-body">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

28
www/src/js/virtual_machine/index.js
View File

@@ -128,27 +128,11 @@ class VirtualMachineUI {
class VMStateUI {
constructor(ui) {
this.ui = ui;
const stateDom = document.getElementById("vmActiveICState");
this.tbl = document.createElement("table");
this.tbl.classList.add("table");
this.ipRow = this.tbl.insertRow();
this.counterRow = this.tbl.insertRow()
this.stateRow = this.tbl.insertRow()
const ipTh = document.createElement("th");
ipTh.appendChild(document.createTextNode("Instruction Pointer"));
this.ipRow.appendChild(ipTh);
this.instructionPointer = this.ipRow.insertCell();
const conuterTh = document.createElement("th");
conuterTh.appendChild(document.createTextNode("Last Run Operations"));
this.counterRow.appendChild(conuterTh);
this.instructionCounter = this.counterRow.insertCell();
const stateTh = document.createElement("th");
stateTh.appendChild(document.createTextNode("Last State"));
this.stateRow.appendChild(stateTh);
this.lastState = this.stateRow.insertCell();
this.instructionPointer = document.getElementById("vmActiveICStateIP");
this.instructionCounter = document.getElementById("vmActiveICStateICount");
this.lastState = document.getElementById("vmActiveICStateLastRun");
stateDom.appendChild(this.tbl);
}
update(ic) {
@@ -165,11 +149,11 @@ class VMRegistersUI {
this.ui = ui;
const regDom = document.getElementById("vmActiveRegisters");
this.tbl = document.createElement("div");
this.tbl.classList.add("d-flex", "flex-wrap", "justify-content-start", "align-items-start", "align-self-center");
this.tbl.classList.add("d-flex", "flex-wrap", "justify-content-start", "align-items-end",);
this.regCels = [];
for (var i = 0; i < 18; i++) {
const container = document.createElement("div");
container.classList.add("vm_reg_cel");
container.classList.add("vm_reg_cel", "align-self-stretch");
const cell = document.createElement("div");
cell.classList.add("input-group", "input-group-sm")
// cell.style.width = "30%";
@@ -183,7 +167,7 @@ class VMRegistersUI {
input.dataset.index = i;
cell.appendChild(input);
const aliasesLabel = document.createElement("span");
aliasesLabel.classList.add("input-group-text")
aliasesLabel.classList.add("input-group-text", "reg_label")
aliasesLabel.innerText = "\xa0";
cell.appendChild(aliasesLabel);
this.regCels.push({

76
www/src/scss/dark.scss
View File

@@ -288,41 +288,10 @@ code {
color: #e685b5
}
.navbar-default {
background-color: #343a40;
border-color: #495057;
}
.navbar-brand {
float: left;
padding: 5px 5px;
font-size: 18px;
}
.navbar-default .navbar-brand {
color: #fff;
text-wrap: nowrap;
white-space: nowrap;
}
.navbar-brand a {
text-decoration: none;
}
.nav>li {
position: relative;
display: block;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
}
.navbar-default .navbar-text {
color: #fff;
text-wrap: nowrap;
white-space: nowrap;
}
.navbar-text {
padding: 0;
@@ -336,12 +305,12 @@ code {
line-height: 20px;
}
@media (min-width: 768px) {
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
}
// @media (min-width: 768px) {
// .navbar-nav>li>a {
// padding-top: 15px;
// padding-bottom: 15px;
// }
// }
.nav>li>a {
position: relative;
@@ -419,8 +388,9 @@ code {
.vm_reg {
overflow-x: auto;
overflow-y: auto;
max-width: 1200px;
max-height: 400px;
max-width: 180rem;
max-height: 20rem;
align-content: flex-end
}
// .vm_unset_reg .input-group {
@@ -428,15 +398,37 @@ code {
// }
.vm_reg_cel {
max-width: 300px;
height: 32px;
max-width: 20rem;
height: 24px;
}
.vm_reg_cel span {
min-width: 2.5rem;
height: 22px;
}
.vm_reg_cel span.reg_label {
width: 6rem;
height: 22px;
overflow-x: auto;
overflow-y: auto;
}
.vm_reg_cel input {
width: 6rem;
max-width: 8rem;
min-width: 3rem;
background-color: var(--bs-body-bg);
height: 22px;
}
#vmActiveIC {
min-width: 28rem;
}
#editor {
min-width: 32em;
}
#vmActiveICState hr {
margin: 0.25rem 0;
}

10
www/src/scss/styles.scss
View File

@@ -1,4 +1,3 @@
// Toggle global options
// $enable-gradients: true;
$enable-shadows: true;
@@ -14,6 +13,11 @@ $body-bg: #fff;
$border-radius: .4rem;
$success: rgb(121, 82, 179);
$accordion-button-active-bg: #343a40;
$accordion-button-active-color: #dee2e6;
$accordion-icon-color-dark: #dee2e6;
$accordion-icon-active-color-dark: #dee2e6;
// Required
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@@ -38,6 +42,7 @@ $success: rgb(121, 82, 179);
@import "bootstrap/scss/card";
// @import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/accordion";
// @import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@@ -63,5 +68,4 @@ $success: rgb(121, 82, 179);
//
// Custom styles
//
//