extern/kalker
1
0
Fork 0
mirror of https://github.com/PaddiM8/kalker.git synced 2025-01-19 03:38:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Moved kalk_web span styles into the component

Browse Source
This commit is contained in:
PaddiM8 2021-01-02 20:45:04 +01:00
parent fd0583f5a5
commit 85ec5e523f
3 changed files with 34 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
kalk_web/src/App.svelte
View File

@ -2,4 +2,13 @@
import Calculator from "./Calculator.svelte"; import Calculator from "./Calculator.svelte";
</script> </script>
<Calculator /> <style>
#calculator {
width: 800px;
height: 600px;
}
</style>
<div id="calculator">
<Calculator />
</div>

40
kalk_web/src/Calculator.svelte
View File

@ -1,6 +1,14 @@
<script lang="ts"> <script lang="ts">
import { afterUpdate } from "svelte"; import { afterUpdate } from "svelte";
export let identifierColor = "cornflowerblue";
export let operatorColor = "darkorange";
export let promptColor = "mediumseagreen";
export let errorColor = "tomato";
export let hintColor = "#9c9c9c";
export let linkColor = "cornflowerblue";
export let backgroundColor = "#424242";
let outputLines: string[] = []; let outputLines: string[] = [];
let outputElement: HTMLElement; let outputElement: HTMLElement;
let kalkContext; let kalkContext;
@ -19,8 +27,9 @@
let output: string; let output: string;
if (input.trim() == "help") { if (input.trim() == "help") {
output = output = `<a style="color: ${linkColor}"
"<a href='https://kalk.netlify.app/#usage' target='blank'>Link to usage guide</a>"; href="https://kalk.netlify.app/#usage"
target="blank">Link to usage guide</a>`;
} else { } else {
// Calculate // Calculate
if (!kalkContext) kalkContext = new kalk.Context(); if (!kalkContext) kalkContext = new kalk.Context();
@ -28,11 +37,11 @@
const result = kalkContext.evaluate(input); const result = kalkContext.evaluate(input);
if (result) output = result.toString(); if (result) output = result.toString();
} catch (err) { } catch (err) {
output = `<span class="error">${err}</span>`; output = `<span style="color: ${errorColor}">${err}</span>`;
} }
} }
const inputHTML = `<span class="prompt">&gt;&gt;&nbsp;</span>${target.innerHTML}`; const inputHTML = `<span style="color: ${promptColor}">&gt;&gt;&nbsp;</span>${target.innerHTML}`;
outputLines = output outputLines = output
? [...outputLines, inputHTML, output] ? [...outputLines, inputHTML, output]
: [...outputLines, inputHTML]; : [...outputLines, inputHTML];
@ -112,7 +121,7 @@
/(?<identifier>[^!-@\s_|^⌊⌋⌈⌉]+(_\d+)?)|(?<op>[+\-/*%^!])/g, /(?<identifier>[^!-@\s_|^⌊⌋⌈⌉]+(_\d+)?)|(?<op>[+\-/*%^!])/g,
(substring, identifier, _, op) => { (substring, identifier, _, op) => {
if (identifier) { if (identifier) {
let newSubstring: string; let newSubstring: string = substring;
switch (substring) { switch (substring) {
case "sqrt": { case "sqrt": {
newSubstring = "√"; newSubstring = "√";
@ -142,11 +151,11 @@
offset += substring.length - newSubstring.length; offset += substring.length - newSubstring.length;
return `<span class="identifier">${substring}</span>`; return `<span style="color: ${identifierColor}">${newSubstring}</span>`;
} }
if (op) { if (op) {
return `<span class="operator">${substring}</span>`; return `<span style="color: ${operatorColor}">${substring}</span>`;
} }
return substring; return substring;
@ -160,19 +169,18 @@
</script> </script>
<style lang="scss"> <style lang="scss">
$background-color: #424242;
$font: "Hack", monospace, Consolas, sans-serif; /* TODO: import font */ $font: "Hack", monospace, Consolas, sans-serif; /* TODO: import font */
.calculator { .calculator {
width: 600px; width: 100%;
height: 350px; height: 100%;
} }
.output { .output {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
background-color: #424242; background-color: inherit;
padding: 10px; padding: 10px;
padding-bottom: 0; padding-bottom: 0;
box-sizing: border-box; box-sizing: border-box;
@ -192,7 +200,7 @@
} }
.input-area { .input-area {
background-color: $background-color; background-color: inherit;
display: flex; display: flex;
padding-left: 10px; padding-left: 10px;
font-size: 1.4em; font-size: 1.4em;
@ -201,7 +209,7 @@
.prompt, .prompt,
.input { .input {
background-color: $background-color; background-color: inherit;
font-family: $font; font-family: $font;
} }
@ -212,11 +220,11 @@
} }
</style> </style>
<div class="calculator"> <div class="calculator" style="background-color: {backgroundColor}">
<div class="output" bind:this={outputElement}> <div class="output" bind:this={outputElement}>
<p class="consoleLine">kalk</p> <p class="consoleLine">kalk</p>
<p class="consoleLine"> <p class="consoleLine">
<span class="hint">Type 'help' for instructions.</span> <span style="color: {hintColor}">Type 'help' for instructions.</span>
</p> </p>
{#each outputLines as line} {#each outputLines as line}
<p class="consoleLine"> <p class="consoleLine">
@ -225,7 +233,7 @@
{/each} {/each}
</div> </div>
<div class="input-area"> <div class="input-area">
<span class="prompt">&gt;&gt;&nbsp;</span> <span class="prompt" style="color: {promptColor}">&gt;&gt;&nbsp;</span>
{#await import('@paddim8/kalk') then kalk} {#await import('@paddim8/kalk') then kalk}
<div <div
contenteditable="true" contenteditable="true"

20
kalk_web/src/styles/index.scss
View File

@ -2,24 +2,4 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #212121; background-color: #212121;
}
span.identifier {
color: cornflowerblue;
}
span.operator {
color: darkorange;
}
span.prompt {
color: mediumseagreen;
}
span.error {
color: tomato;
}
span.hint {
color: #9c9c9c;
} }