ashe
/
advent-of-code-2022
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add code preview, update layout

Browse Source
main
Ashelyn Dawn 1 year ago
parent 6007343b59
commit 78839306c1
6 changed files with 94 additions and 26 deletions
Show Stats Download Patch File Download Diff File

5
days/1/code.wat
Unescape Escape View File

@ -1,3 +1,8 @@
(;
; Advent of Code 2022: Day 1, in wasm
; by Ashelyn Dawn
;)
(module
(memory (export "memory") 10)

52
index.html
Unescape Escape View File

@ -2,35 +2,43 @@
<html>
<head>
<title>Ashelyn's AOC 2022</title>
<link rel="stylesheet" href="/resources/prism.min.css"/>
<link rel="stylesheet" href="/resources/style.css"/>
</head>
<body>
<div class="selector">
<label for="day-selector">
Select a day to run its entry:
</label>
<select value="">
<option class="loading" selected value="">Loading days...</option>
</select>
</div>
<p class="output">
</p>
<div class="ui">
<p>input:</p>
<textarea class="input"></textarea>
<div class="layout">
<div class="selector">
<label for="day-selector">
Day:
</label>
<select value="">
<option class="loading" selected value="">Loading days...</option>
</select>
</div>
<div class="centerSplit">
<div class="leftPanel">
<p>input:</p>
<textarea class="input"></textarea>
<p>output (part 1):</p>
<textarea disabled readonly class="output1"></textarea>
<p>output (part 2):</p>
<textarea disabled readonly class="output2"></textarea>
<button>Run</button>
<p>output (part 1):</p>
<textarea disabled readonly class="output1"></textarea>
<p>output (part 2):</p>
<textarea disabled readonly class="output2"></textarea>
<button>Run</button>
</div>
<div class="rightPanel">
<p>Source viewer:</p>
<pre><code class="code-view language-wasm line-numbers match-braces"></code></pre>
</div>
</div>
<div class="status">
<p class="output">Select a day to run its entry</p>
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/wabt@1.0.29/index.js"></script>
<script type="text/javascript" src="/resources/prism.min.js"></script>
<script type="text/javascript" src="/resources/loader.js"></script>
</body>
</html>

13
resources/loader.js
Unescape Escape View File

@ -4,10 +4,11 @@ const textEncoder = new TextEncoder()
const textDecoder = new TextDecoder()
const daySelector = document.querySelector('.selector select')
const output = document.querySelector('.output')
const inputTextArea = document.querySelector('.ui textarea.input')
const outputTextArea1 = document.querySelector('.ui textarea.output1')
const outputTextArea2 = document.querySelector('.ui textarea.output2')
const runButton = document.querySelector('.ui button')
const inputTextArea = document.querySelector('textarea.input')
const outputTextArea1 = document.querySelector('textarea.output1')
const outputTextArea2 = document.querySelector('textarea.output2')
const codeView = document.querySelector('.code-view')
const runButton = document.querySelector('button')
async function getDayList() {
const days = []
@ -30,6 +31,7 @@ async function getDayList() {
}
document.querySelector('.loading').innerText = "Select a day"
document.querySelector('.loading').disabled = true
}
async function loadDay(dayNum) {
@ -53,6 +55,9 @@ async function loadDay(dayNum) {
const { instance } = await WebAssembly.instantiate(codeBuffer)
wasmInstance = instance
codeView.innerHTML = wasmText
Prism.highlightElement(codeView)
} catch (err) {
output.className = 'error'
output.innerText = 'Error: ' + err.message

5
resources/prism.min.css vendored
Unescape Escape View File

@ -0,0 +1,5 @@
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=wasm&plugins=line-numbers+match-braces */
code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
.token.punctuation.brace-hover,.token.punctuation.brace-selected{outline:solid 1px}.rainbow-braces .token.punctuation.brace-level-1,.rainbow-braces .token.punctuation.brace-level-5,.rainbow-braces .token.punctuation.brace-level-9{color:#e50;opacity:1}.rainbow-braces .token.punctuation.brace-level-10,.rainbow-braces .token.punctuation.brace-level-2,.rainbow-braces .token.punctuation.brace-level-6{color:#0b3;opacity:1}.rainbow-braces .token.punctuation.brace-level-11,.rainbow-braces .token.punctuation.brace-level-3,.rainbow-braces .token.punctuation.brace-level-7{color:#26f;opacity:1}.rainbow-braces .token.punctuation.brace-level-12,.rainbow-braces .token.punctuation.brace-level-4,.rainbow-braces .token.punctuation.brace-level-8{color:#e0e;opacity:1}

6
resources/prism.min.js vendored
View File

File diff suppressed because one or more lines are too long

39
resources/style.css
Unescape Escape View File

@ -1,3 +1,42 @@
body, html {
padding: 0;
margin: 0;
}
.error {
color: red;
}
.layout {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
}
.centerSplit {
flex: 1;
display: flex;
flex-direction: row;
min-height: 1px;
}
.leftPanel, .rightPanel {
width: 50%;
display: flex;
flex-direction: column;
}
.rightPanel pre {
flex: 1;
overflow-y: scroll;
}
.leftPanel textArea {
min-height: 100;
}
.leftPanel .input {
flex: 1;
}

Write Preview
Loading…
Cancel
Save