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

fix overflow, add editor settings

Browse Source 
Signed-off-by: Rachel <508861+Ryex@users.noreply.github.com>
This commit is contained in:
Rachel
2024-03-19 22:32:43 -07:00
parent 3e4eb9d0cf
commit e0965ddcef
6 changed files with 340 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ic10lsp_wasm/Cargo.lock generated
View File

@@ -395,7 +395,7 @@ checksum = "d897f394bad6a705d5f4104762e116a75639e470d80901eed05a860a95cb1904"
[[package]]
name = "ic10lsp"
version = "0.7.4"
source = "git+https://github.com/Ryex/ic10lsp.git?branch=wasm#fe4b1177979a1260469a511f577049b0d7f3aa14"
source = "git+https://github.com/Ryex/ic10lsp.git?branch=wasm#74e948ad3d3f0d220b4ab258525afcd1b8a1548b"
dependencies = [
"clap",
"const-crc32",
@@ -1043,7 +1043,7 @@ dependencies = [
[[package]]
name = "tree-sitter-ic10"
version = "0.5.2"
source = "git+https://github.com/Ryex/tree-sitter-ic10.git?branch=wasm#8fc265c9e69da58f9e8fb2ac2840d2f55d1503a8"
source = "git+https://github.com/Ryex/tree-sitter-ic10.git?branch=wasm#143545d3053971e04ddd1fbc0ac5b18631658c5a"
dependencies = [
"cc",
"tree-sitter",

100
www/css/dark.css
View File

@@ -10,8 +10,8 @@ body {
.ace_status-indicator {
color: #dee2e6;
position: relative;
right: 10px;
left: 5px;
/* right: 10px; */
/* left: 5px; */
bottom: 4px;
border-left: 1px solid;
border-right: 1px solid;
@@ -23,23 +23,23 @@ body {
code {
color: #e685b5
}
.navbar {
position: relative;
min-height: 30px;
margin-bottom: 5px;
border: 1px solid;
padding: 0;
}
/* .navbar { */
/* position: relative; */
/* min-height: 30px; */
/* margin-bottom: 5px; */
/* border: 1px solid; */
/* padding: 0; */
/**/
/* } */
.navbar-default {
background-color: #343a40 ;
border-color: #495057;
}
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
/* @media (min-width: 768px) { */
/* .navbar { */
/* border-radius: 4px; */
/* } */
/* } */
.navbar-brand {
float: left;
padding: 5px 5px;
@@ -55,17 +55,17 @@ code {
text-decoration: none;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
flex-wrap: nowrap;
}
ol, ul {
margin-top: 0;
margin-bottom: 5px;
}
/* .nav { */
/* padding-left: 0; */
/* margin-bottom: 0; */
/* list-style: none; */
/* flex-wrap: nowrap; */
/* } */
/**/
/* ol, ul { */
/* margin-top: 0; */
/* margin-bottom: 5px; */
/* } */
.nav > li {
position: relative;
display: block;
@@ -83,25 +83,25 @@ ol, ul {
padding-right: 10px;
position: relative;
}
.navbar-nav {
display: block;
}
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
@media (min-width: 768px) {
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
@media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
}
}
/* .navbar-nav { */
/* display: block; */
/* } */
/* @media (min-width: 768px) { */
/* .navbar-header { */
/* float: left; */
/* } */
/* } */
/* @media (min-width: 768px) { */
/* .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { */
/* margin-left: -15px; */
/* } */
/* } */
/* @media (min-width: 768px) { */
/* .navbar-nav { */
/* float: left; */
/* margin: 0; */
/* } */
/* } */
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
@@ -120,17 +120,9 @@ ol, ul {
padding-top: 10px;
padding-bottom: 10px;
}
@media (min-width: 768px) {
.navbar-text {
float: left;
}
}
.navbar-nav > p {
margin-bottom: 0;
display: inline-block;
}
.navbar-nav .dropdown-menu {
position: absolute;
left: .5rem;
}
.modal-title {
color: #fff;

225
www/index.html
View File

@@ -45,17 +45,6 @@
integrity="sha512-8RxmFOVaKQe/xtg6lbscU9DU0IRhURWEuiI0tXevv+lXbAHfkpamD4VKFQRto9WgfOJDwOZ74c/s9Yesv3VvIQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/dark.css" />
<style type="text/css" media="screen">
#editor {
position: relative;
width: 100%;
height: calc(100vh - 84px);
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
@@ -63,7 +52,7 @@
<script src="./bootstrap.js"></script>
<div class="App" data-bs-theme="dark">
<div id="modelShareLink" class="modal fade" tabindex="-1" aria-hidden="true" data-bs-theme="dark">
<div class="modal-dialog">
qGZscVxOrTb9tsMA<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Share This Code!</h5>
@@ -82,86 +71,148 @@
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="d-flex flex-row justify-content-start w-100">
<div class="nav navbar-nav navbar-header dropdown">
<button class="btn btn-outline-secondary" type="button" id="mainMenu" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-bars"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="mainMenu">
<li><button id="mainMenuShare" class="dropdown-item" type="button" data-bs-toggle="modal"
data-bs-target="#modelShareLink">Share</button></li>
<li><button id="mainMenuOpenFile" class="dropdown-item" type="button">Open File</button></li>
<li><button id="mainMenuSaveAs" class="dropdown-item" type="button">Save As</button></li>
<li>
<hr class="dropdown-divider">
</li>
<li></li>
</ul>
</div>
<div class="nav navbar-nav navbar-header">
<a class="navbar-brand active" aria-current="page" href="">Stationeers IC10 Emulator</a>
</div>
<div class="flex-grow w-100">&nbsp;</div>
<ul class="nav navbar-nav d-flex flex-row flex-fill">
<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>
<p class="navbar-text mt-auto mb-auto align-self-center" style="">Official Stationeers:</p>
<li role="presentation" class="">
<a href="https://store.steampowered.com/app/544550/Stationeers/"><svg aria-hidden="true" focusable="false"
data-prefix="fab" data-icon="steam" class="svg-inline--fa fa-steam fa-w-16 " role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path fill="currentColor"
d="M496 256c0 137-111.2 248-248.4 248-113.8 0-209.6-76.3-239-180.4l95.2 39.3c6.4 32.1 34.9 56.4 68.9 56.4 39.2 0 71.9-32.4 70.2-73.5l84.5-60.2c52.1 1.3 95.8-40.9 95.8-93.5 0-51.6-42-93.5-93.7-93.5s-93.7 42-93.7 93.5v1.2L176.6 279c-15.5-.9-30.7 3.4-43.5 12.1L0 236.1C10.2 108.4 117.1 8 247.6 8 384.8 8 496 119 496 256zM155.7 384.3l-30.5-12.6a52.79 52.79 0 0 0 27.2 25.8c26.9 11.2 57.8-1.6 69-28.4 5.4-13 5.5-27.3.1-40.3-5.4-13-15.5-23.2-28.5-28.6-12.9-5.4-26.7-5.2-38.9-.6l31.5 13c19.8 8.2 29.2 30.9 20.9 50.7-8.3 19.9-31 29.2-50.8 21zm173.8-129.9c-34.4 0-62.4-28-62.4-62.3s28-62.3 62.4-62.3 62.4 28 62.4 62.3-27.9 62.3-62.4 62.3zm.1-15.6c25.9 0 46.9-21 46.9-46.8 0-25.9-21-46.8-46.9-46.8s-46.9 21-46.9 46.8c.1 25.8 21.1 46.8 46.9 46.8z">
</path>
</svg>
</a>
</li>
<li role="presentation" class="">
<a href="https://stationeers.com/">
<svg aria-hidden="true" focusable="false" data-prefix="fa" data-icon="globe"
class="svg-inline--fa fa-globe fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 496 512">
<path fill="currentColor"
d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z">
</path>
</svg>
</a>
</li>
<li role="presentation" class="">
<a href="https://twitter.com/stationeers">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter"
class="svg-inline--fa fa-twitter fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
</path>
</svg>
</a>
</li>
<li role="presentation" class="">
<a href="https://discordapp.com/invite/CxR3mRy">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord"
class="svg-inline--fa fa-discord fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path fill="currentColor"
d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z">
</path>
</svg>
</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="editorSettings" aria-labelledby="editorSettingsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="editorSettingsLabel">Editor Settings</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="p-2">
<h6>Editor Keyboard Bindings</h6>
<div class="btn-group" role="group" aria-label="Editor Keyboard Bindings">
<input type="radio" class="btn-check" name="editorKeybindRadio" id="editorSettingsKeybindAce"
autocomplete="off" checked value="ace">
<label class="btn btn-outline-secondary" for="editorSettingsKeybindAce">Ace</label>
<input type="radio" class="btn-check" name="editorKeybindRadio" id="editorSettingsKeybindVim"
autocomplete="off" value="vim">
<label class="btn btn-outline-secondary" for="editorSettingsKeybindVim">Vim</label>
<input type="radio" class="btn-check" name="editorKeybindRadio" id="editorSettingsKeybindEmacs"
autocomplete="off" value="emacs">
<label class="btn btn-outline-secondary" for="editorSettingsKeybindEmacs">Emacs</label>
<input type="radio" class="btn-check" name="editorKeybindRadio" id="editorSettingsKeybindSublime"
autocomplete="off" value="sublime">
<label class="btn btn-outline-secondary" for="editorSettingsKeybindSublime">Sublime</label>
<input type="radio" class="btn-check" name="editorKeybindRadio" id="editorSettingsKeybindVSCode"
autocomplete="off" value="vscode">
<label class="btn btn-outline-secondary" for="editorSettingsKeybindVSCode">VS Code</label>
</div>
</div>
<div class="p-2">
<h6>Editor Cursor Style</h6>
<div class="btn-group" role="group" aria-label="Editor Keyboard Bindings">
<input type="radio" class="btn-check" name="editorCursorRadio" id="editorSettingsCursorAce"
autocomplete="off" checked value="ace">
<label class="btn btn-outline-secondary" for="editorSettingsCursorAce">Ace</label>
<input type="radio" class="btn-check" name="editorCursorRadio" id="editorSettingsCursorSlim"
autocomplete="off" value="slim">
<label class="btn btn-outline-secondary" for="editorSettingsCursorSlim">Slim</label>
<input type="radio" class="btn-check" name="editorCursorRadio" id="editorSettingsCursorSmooth"
autocomplete="off" value="smooth">
<label class="btn btn-outline-secondary" for="editorSettingsCursorSmooth">Smooth</label>
<input type="radio" class="btn-check" name="editorCursorRadio" id="editorSettingsCursorSmoothSlim"
autocomplete="off" value="smooth slim">
<label class="btn btn-outline-secondary" for="editorSettingsCursorSmoothSlim">Smooth And Slim</label>
<input type="radio" class="btn-check" name="editorCursorRadio" id="editorSettingsCursorWide"
autocomplete="off" value="wide">
<label class="btn btn-outline-secondary" for="editorSettingsCursorWide">Wide</label>
</div>
</div>
<div class="input-group mb-3 p-2">
<span class="input-group-text" id="editorFontSizeLabel">Font Size</span>
<input id="editorSettingsFontSize" type="number" class="form-control" aria-label="font size"
aria-describedby="editorFontSizeLabel" value="16">
<span class="input-group-text">px</span>
</div>
<div class="p-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="editorSettingsRelativeLineNumbers">
<label class="form-check-label" for="editorSettingsRelativeLineNumbers">Relative Line Numbers</label>
</div>
</div>
</div>
</div>
<nav id="navBar" class="navbar navbar-default">
<div class="nav navbar-nav dropdown ps-2">
<button class="btn btn-outline-secondary" type="button" id="mainMenu" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-bars"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="mainMenu">
<li><button id="mainMenuShare" class="dropdown-item" type="button" data-bs-toggle="modal"
data-bs-target="#modelShareLink">Share</button></li>
<li><button id="mainMenuOpenFile" class="dropdown-item" type="button">Open File</button></li>
<li><button id="mainMenuSaveAs" class="dropdown-item" type="button">Save As</button></li>
<li>
<hr class="dropdown-divider">
</li>
<li><button id="mainMenuEditorSettings" class="dropdown-item" type="button" data-bs-toggle="offcanvas"
data-bs-target="#editorSettings" aria-controls="editorSettings">Editor Settings</button></li>
</ul>
</div>
</nav>
<div class="contianer">
<div class="row">
<div class="col w-100 d-flex flex-column align-bottom" style="position: relative">
<div id="editor" class="flex-grow-1"></div>
<div id="statusBar" class="w-100 text-body">IC10 editor!</div>
</div>
<div class="nav navbar-nav navbar-header">
<a class="navbar-brand active" aria-current="page" href="">Stationeers IC10 Emulator</a>
</div>
<div class="row">
<div class="nav navbar-nav 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>
<!-- <div class="flex-grow w-100">&nbsp;</div> -->
<ul class="nav navbar-nav navbar-right flex-row d-sm-none d-none d-md-flex">
<p class="navbar-text mt-auto mb-auto align-self-center" style="">Official Stationeers:</p>
<li role="presentation" class="">
<a href="https://store.steampowered.com/app/544550/Stationeers/"><svg aria-hidden="true" focusable="false"
data-prefix="fab" data-icon="steam" class="svg-inline--fa fa-steam fa-w-16 " role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path fill="currentColor"
d="M496 256c0 137-111.2 248-248.4 248-113.8 0-209.6-76.3-239-180.4l95.2 39.3c6.4 32.1 34.9 56.4 68.9 56.4 39.2 0 71.9-32.4 70.2-73.5l84.5-60.2c52.1 1.3 95.8-40.9 95.8-93.5 0-51.6-42-93.5-93.7-93.5s-93.7 42-93.7 93.5v1.2L176.6 279c-15.5-.9-30.7 3.4-43.5 12.1L0 236.1C10.2 108.4 117.1 8 247.6 8 384.8 8 496 119 496 256zM155.7 384.3l-30.5-12.6a52.79 52.79 0 0 0 27.2 25.8c26.9 11.2 57.8-1.6 69-28.4 5.4-13 5.5-27.3.1-40.3-5.4-13-15.5-23.2-28.5-28.6-12.9-5.4-26.7-5.2-38.9-.6l31.5 13c19.8 8.2 29.2 30.9 20.9 50.7-8.3 19.9-31 29.2-50.8 21zm173.8-129.9c-34.4 0-62.4-28-62.4-62.3s28-62.3 62.4-62.3 62.4 28 62.4 62.3-27.9 62.3-62.4 62.3zm.1-15.6c25.9 0 46.9-21 46.9-46.8 0-25.9-21-46.8-46.9-46.8s-46.9 21-46.9 46.8c.1 25.8 21.1 46.8 46.9 46.8z">
</path>
</svg>
</a>
</li>
<li role="presentation" class="">
<a href="https://stationeers.com/">
<svg aria-hidden="true" focusable="false" data-prefix="fa" data-icon="globe"
class="svg-inline--fa fa-globe fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 496 512">
<path fill="currentColor"
d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z">
</path>
</svg>
</a>
</li>
<li role="presentation" class="">
<a href="https://twitter.com/stationeers">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter"
class="svg-inline--fa fa-twitter fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
</path>
</svg>
</a>
</li>
<li role="presentation" class="">
<a href="https://discordapp.com/invite/CxR3mRy">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="discord"
class="svg-inline--fa fa-discord fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path fill="currentColor"
d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z">
</path>
</svg>
</a>
</li>
</ul>
</nav>
<div class="d-flex flex-column">
<div id="editorContainer" class="p-1 h-100">
<div id="editor" class="w-100"></div>
</div>
<div id="statusBarContainer" class="p-1 mt-auto">
<div id="statusBar" class="w-100 text-body">IC10 editor!</div>
</div>
</div>
</div>

6
www/package.json
View File

@@ -24,6 +24,7 @@
},
"homepage": "https://github.com/ryex/ic10emu#readme",
"devDependencies": {
"@oneidentity/zstd-js": "^1.0.3",
"copy-webpack-plugin": "^12.0.2",
"hello-wasm-pack": "^0.1.0",
"ts-loader": "^9.5.1",
@@ -35,8 +36,9 @@
"dependencies": {
"ace-code": "^1.32.7",
"ace-linters": "^1.1.1",
"uuid": "^9.0.1",
"ic10emu_wasm": "file:../ic10emu_wasm/pkg",
"ic10lsp_wasm": "file:../ic10lsp_wasm/pkg"
"ic10lsp_wasm": "file:../ic10lsp_wasm/pkg",
"lzma-web": "^3.0.1",
"uuid": "^9.0.1"
}
}

20
www/pnpm-lock.yaml generated
View File

@@ -17,11 +17,17 @@ dependencies:
ic10lsp_wasm:
specifier: file:../ic10lsp_wasm/pkg
version: file:../ic10lsp_wasm/pkg
lzma-web:
specifier: ^3.0.1
version: 3.0.1
uuid:
specifier: ^9.0.1
version: 9.0.1
devDependencies:
'@oneidentity/zstd-js':
specifier: ^1.0.3
version: 1.0.3
copy-webpack-plugin:
specifier: ^12.0.2
version: 12.0.2(webpack@5.90.3)
@@ -125,6 +131,12 @@ packages:
fastq: 1.17.1
dev: true
/@oneidentity/zstd-js@1.0.3:
resolution: {integrity: sha512-Jm6sawqxLzBrjC4sg2BeXToa33yPzUmq20CKsehKY2++D/gHb/oSwVjNgT+RH4vys+r8FynrgcNzGwhZWMLzfQ==}
dependencies:
'@types/emscripten': 1.39.10
dev: true
/@pkgjs/parseargs@0.11.0:
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'}
@@ -163,6 +175,10 @@ packages:
'@types/node': 20.11.28
dev: true
/@types/emscripten@1.39.10:
resolution: {integrity: sha512-TB/6hBkYQJxsZHSqyeuO1Jt0AB/bW6G7rHt9g7lML7SOF6lbgcHvw/Lr+69iqN0qxgXLhWKScAon73JNnptuDw==}
dev: true
/@types/eslint-scope@3.7.7:
resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
dependencies:
@@ -1665,6 +1681,10 @@ packages:
hasBin: true
dev: false
/lzma-web@3.0.1:
resolution: {integrity: sha512-sb5cdfd+PLNljK/HUgYzvnz4G7r0GFK8sonyGrqJS0FVyUQjFYcnmU2LqTWFi6r48lH1ZBstnxyLWepKM/t7QA==}
dev: false
/media-typer@0.3.0:
resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
engines: {node: '>= 0.6'}

144
www/src/index.js
View File

@@ -176,7 +176,8 @@ async function decompress(bytes) {
async function setDocFragment(content) {
const bytes = new TextEncoder().encode(content);
const obj = JSON.stringify({ sessions: [{ content }] })
const bytes = new TextEncoder().encode(obj);
try {
const c_bytes = await compress(bytes);
const fragment = base64url_encode(c_bytes);
@@ -185,27 +186,51 @@ async function setDocFragment(content) {
console.log("Error compressing content fragment:", e);
return;
}
}
async function decompressFragment(c_bytes) {
try {
const bytes = await decompress(c_bytes);
const content = new TextDecoder().decode(bytes);
return content;
} catch (e) {
console.log("Error decompressing content fragment:", e);
return null;
}
}
function isJsonContent(content) {
try {
const obj = JSON.parse(content);
return [true, obj];
} catch (_) {
return [false, null];
}
}
async function getContentFromFragment(editor, default_content) {
const fragment = window.location.hash.slice(1);
console.log("fragment is", fragment);
if (fragment.length > 0) {
const c_bytes = base64url_decode(fragment);
console.log("compressed", c_bytes);
try {
const bytes = await decompress(c_bytes);
console.log("bytes", bytes);
const content = new TextDecoder().decode(bytes);
console.log("content is", content);
editor.getSession().setValue(content);
} catch (e) {
console.log("Error decompressing content fragment:", e);
return;
const data = await decompressFragment(c_bytes);
if (data !== null) {
const [is_json, session] = isJsonContent(data);
if (is_json) {
try {
const content = session.sessions[0].content
editor.getSession().setValue(content);
return;
} catch (e) {
console.log("Bad session data:", e);
}
} else {
editor.getSession().setValue(data);
return;
}
}
} else {
editor.getSession().setValue(default_content);
}
editor.getSession().setValue(default_content);
}
async function setupLsp(editor, mode) {
@@ -229,6 +254,64 @@ async function setupLsp(editor, mode) {
}
function reCalcEditorSize(editor) {
const navBar = document.getElementById("navBar");
const statusBarContainer = document.getElementById("statusBarContainer");
const correction = navBar.offsetHeight + statusBarContainer.offsetHeight;
const editorContainer = document.getElementById("editor");
editorContainer.style.height = `calc( 100vh - ${correction}px - 0.5rem)`;
editor.resize(true);
}
const EditorSettings = {
keyboard: "ace",
cursor: "ace",
fontSize: 16,
relativeLineNumbers: false,
}
function loadEditorSettings(settings) {
const saved_settings = window.localStorage.getItem("editorSettings");
if (saved_settings !== null && saved_settings.length > 0) {
try {
const saved = JSON.parse(saved_settings);
const temp = Object.assign({}, settings, saved);
console.log("tmp load", temp);
Object.assign(settings, temp);
} catch (e) {
console.log("error loading editor settings", e);
}
}
}
function saveEditorSettings(settings) {
const toSave = JSON.stringify(settings);
window.localStorage.setItem("editorSettings", toSave);
}
function updateEditorSettings(editor, settings) {
if (settings.keyboard === 'ace') {
editor.setOption('keyboardHandler', null);
} else {
editor.setOption('keyboardHandler', `ace/keyboard/${settings.keyboard}`);
}
editor.setOption('cursorStyle', settings.cursor);
editor.setOption('fontSize', `${settings.fontSize}px`);
editor.setOption('relativeLineNumbers', settings.relativeLineNumbers);
}
function displayEditorSettings(settings) {
document.getElementsByName("editorKeybindRadio").forEach((el) => {
el.checked = el.value === settings.keyboard;
});
document.getElementsByName("editorCursorRadio").forEach((el) => {
el.checked = el.value === settings.cursor;
});
document.getElementById("editorSettingsFontSize").value = settings.fontSize;
document.getElementById("editorSettingsRelativeLineNumbers").checked = settings.relativeLineNumbers;
}
docReady(() => {
const mode = new IC10Mode()
var editor = ace.edit("editor", {
@@ -242,6 +325,38 @@ docReady(() => {
firstLineNumber: 0,
printMarginColumn: 52,
});
loadEditorSettings(EditorSettings);
displayEditorSettings(EditorSettings);
updateEditorSettings(editor, EditorSettings);
reCalcEditorSize(editor);
window.addEventListener('resize', (e) => { reCalcEditorSize(editor) });
document.getElementsByName("editorKeybindRadio").forEach((el) => {
el.addEventListener('change', (e) => {
EditorSettings.keyboard = e.target.value;
saveEditorSettings(EditorSettings);
updateEditorSettings(editor, EditorSettings);
})
});
document.getElementsByName("editorCursorRadio").forEach((el) => {
el.addEventListener('change', (e) => {
EditorSettings.cursor = e.target.value;
saveEditorSettings(EditorSettings);
updateEditorSettings(editor, EditorSettings);
})
});
document.getElementById("editorSettingsFontSize").addEventListener('change', (e) => {
EditorSettings.fontSize = e.target.value;
saveEditorSettings(EditorSettings);
updateEditorSettings(editor, EditorSettings);
});
document.getElementById("editorSettingsRelativeLineNumbers").addEventListener('change', (e) => {
EditorSettings.relativeLineNumbers = e.target.checked;
saveEditorSettings(EditorSettings);
updateEditorSettings(editor, EditorSettings);
})
console.log(editor.getOption('keyboardHandler'));
editor.getSession().on('change', () => {
var val = editor.getSession().getValue();
setDocFragment(val);
@@ -252,6 +367,7 @@ docReady(() => {
statusBar.updateStatus(editor);
ace_ext_keybinding_menu.init(editor);
// editor.setOption("keyboardHandler", "ace/keyboard/vim");
editor.setAutoScrollEditorIntoView(true);
editor.session.setValue(demoCode)