Tons of changes
This commit is contained in:
parent
46c06773cd
commit
0c5747e0bf
|
|
@ -36,3 +36,7 @@ npm run build
|
|||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@
|
|||
"name": "openbirchmockupsite",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"svelte-parallax": "^0.6.0"
|
||||
"linq": "^4.0.3",
|
||||
"svelte-parallax": "^0.6.0",
|
||||
"theme-change": "^2.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fontsource/fira-mono": "^4.5.10",
|
||||
|
|
@ -1748,6 +1750,15 @@
|
|||
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/linq": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/linq/-/linq-4.0.3.tgz",
|
||||
"integrity": "sha512-dP0w2ERJXfVUk6VmmAK+Tz/SxFHwyY7VM6Mrq4fnJmeQf9JNEYFH6qJfV6Qn0N91mfwz2GEE/4S+RDkmDNyUJw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/locate-character": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
|
||||
|
|
@ -2831,6 +2842,12 @@
|
|||
"node": ">=10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/theme-change": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/theme-change/-/theme-change-2.5.0.tgz",
|
||||
"integrity": "sha512-B/UdsgdHAGhSKHTAQnxg/etN0RaMDpehuJmZIjLMDVJ6DGIliRHGD6pODi1CXLQAN9GV0GSyB3G6yCuK05PkPQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/thenify": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
|
||||
|
|
|
|||
|
|
@ -28,6 +28,8 @@
|
|||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"svelte-parallax": "^0.6.0"
|
||||
"linq": "^4.0.3",
|
||||
"svelte-parallax": "^0.6.0",
|
||||
"theme-change": "^2.5.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
|
|||
|
||||
// Adds window.runEval into typescript env
|
||||
declare function runEval(expression: string, stopAssignments?: boolean): any;
|
||||
declare function resetOpenBirch(): any;
|
||||
|
||||
const OpenBirchHistory: OpenBirchConsoleEntry[] = [];
|
||||
|
||||
|
|
@ -28,7 +29,16 @@ function createOpenBirchInstance(){
|
|||
} catch (e) {
|
||||
return '';
|
||||
}
|
||||
}, // TODO: Replace with actual implimentation
|
||||
},
|
||||
resetState: () => {
|
||||
resetOpenBirch();
|
||||
},
|
||||
getHistory: (filter: ConsoleSender | undefined = undefined): OpenBirchConsoleEntry[] => {
|
||||
if (filter == undefined)
|
||||
return OpenBirchHistory;
|
||||
|
||||
return OpenBirchHistory.filter(x=>x.sender == filter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +54,7 @@ class OpenBirchConsoleEntry {
|
|||
}
|
||||
}
|
||||
|
||||
enum ConsoleSender {
|
||||
export enum ConsoleSender {
|
||||
User,
|
||||
System
|
||||
}
|
||||
|
|
@ -4,6 +4,8 @@
|
|||
import welcome_fallback from '$lib/images/svelte-welcome.png';
|
||||
import differencialBackgroundVideo from '$lib/videos/DifferentialEquation.gif';
|
||||
import "tailwindcss/tailwind.css";
|
||||
import ConsoleText from './console/ConsoleText.svelte';
|
||||
import { OpenBirch } from "$lib/OpenBirchService";
|
||||
|
||||
const sleep = (ms: number) => {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
|
|
@ -12,17 +14,46 @@
|
|||
let isAutoTyping = true;
|
||||
let textField: HTMLInputElement;
|
||||
async function startTyping(){
|
||||
for (let charecter of "testing..."){
|
||||
if (!isAutoTyping) break;
|
||||
textField.value += charecter;
|
||||
await sleep(200);
|
||||
for (var example of exampleInputs) {
|
||||
for (let charecter of example){
|
||||
if (!isAutoTyping) break;
|
||||
textField.value += charecter;
|
||||
await sleep(200);
|
||||
}
|
||||
try {OpenBirch.sendCommand(textField.value);} catch (_) {}
|
||||
resetFeild();
|
||||
}
|
||||
}
|
||||
|
||||
const exampleInputs: readonly string[] = [
|
||||
"2+2",
|
||||
"69*420+50",
|
||||
"sin(2+4)",
|
||||
"sqrt(9)",
|
||||
"nroot(27, 3)",
|
||||
"f(x):=2*x",
|
||||
"f(5)",
|
||||
"pi",
|
||||
"e",
|
||||
"myvar := 5",
|
||||
"15 + myvar",
|
||||
"myfunctionvar := f",
|
||||
"myfunctionvar(10)",
|
||||
"d/dx x",
|
||||
"d/dx x^2",
|
||||
"d/dx 69*x^2",
|
||||
"d/dx sin(x)*x^2"
|
||||
];
|
||||
|
||||
async function resetFeild() {
|
||||
textField.value = "";
|
||||
}
|
||||
|
||||
async function onInputClicked() {
|
||||
OpenBirch.resetState();
|
||||
window.location.href = "/console";
|
||||
}
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
|
||||
onMount(() => {
|
||||
|
|
@ -50,23 +81,50 @@
|
|||
</h1>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="h-80 flex items-end justify-center">
|
||||
<input bind:this={textField} type="text" class="input input-bordered w-3/4 max-w-screen-xl text-neutral-content">
|
||||
<div class="join join-vertical pt-10">
|
||||
<div class="join-item bg-primary-content">
|
||||
<div class="h-40 overflow-auto flex flex-col-reverse p-4">
|
||||
<ConsoleText/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input join-item input-bordered flex items-center grow gap-2" style="cursor: text;">
|
||||
<div class="w-full">
|
||||
<div class="flex">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
class="h-8 w-8 opacity-70 block m-auto fill-primary">
|
||||
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
|
||||
</svg>
|
||||
<input autofocus type="text" class="text-primary grow" placeholder="" bind:this={textField} on:click={onInputClicked}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ParallaxLayer>
|
||||
<ParallaxLayer rate={0.1} offset={0.575} span={1} class="bg-base-100">
|
||||
<div class="double_centered_boxes py-16">
|
||||
<div>
|
||||
<h1 class="text-neutral-content">
|
||||
Welcome to<br/>
|
||||
<b class="text-primary">OpenBirch</b>
|
||||
</h1>
|
||||
<ParallaxLayer rate={0} offset={0.575} span={2} class="bg-base-100">
|
||||
<div class="flex-container">
|
||||
<div class="card lg:card-side bg-base-100 sylvesterTest">
|
||||
<div class="card-body shadow-xl">
|
||||
<h1 class="text-primary">What is it?</h1>
|
||||
<p class="text-neutral-content">I love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love </p>
|
||||
</div>
|
||||
<figure>
|
||||
<img src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp" alt="Album" />
|
||||
</figure>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="h-80 flex items-end justify-center">
|
||||
|
||||
<div class="card lg:card-side bg-base-100 sylvesterTest">
|
||||
<figure>
|
||||
<img src="https://img.daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.webp" alt="Album" />
|
||||
</figure>
|
||||
<div class="card-body shadow-xl">
|
||||
<h1 class="text-primary">What is our mission?</h1>
|
||||
<p class="text-neutral-content">I love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love the colour of yellow and I also love </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ParallaxLayer>
|
||||
|
|
@ -87,6 +145,22 @@
|
|||
// border: red 1mm solid;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sylvesterTest {
|
||||
max-width: 64rem;
|
||||
min-width: 32rem;
|
||||
width: 100%;
|
||||
padding: 50px;
|
||||
margin: 0 auto;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.backgroundVideoContainer{
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,21 @@
|
|||
import { page } from '$app/stores';
|
||||
import goku from '$lib/images/goku.webp';
|
||||
import "tailwindcss/tailwind.css";
|
||||
|
||||
import { onMount } from 'svelte'
|
||||
import { themeChange } from 'theme-change'
|
||||
|
||||
// NOTE: the element that is using one of the theme attributes must be in the DOM on mount
|
||||
onMount(() => {
|
||||
themeChange(false)
|
||||
// 👆 false parameter is required for svelte
|
||||
})
|
||||
|
||||
let isDarkMode = true;
|
||||
function toggleTheme(){
|
||||
isDarkMode = !isDarkMode;
|
||||
console.log("Darkmode: " + isDarkMode);
|
||||
}
|
||||
</script>
|
||||
|
||||
<header class="navbar bg-base-100">
|
||||
|
|
@ -15,10 +30,50 @@
|
|||
<div class="flex-1"/>
|
||||
<div class="flex-none">
|
||||
<ul class="menu menu-horizontal px-1">
|
||||
<li><a href="/console">Console</a></li>
|
||||
<li>
|
||||
<!-- <button class="btn btn-outline btn-accent" on:click={toggleTheme}>Change theme test</button> -->
|
||||
<select data-choose-theme>
|
||||
<option value="light">Default</option>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="cupcake">Cupcake</option>
|
||||
<option value="bumblebee">Bumblebee</option>
|
||||
<option value="emerald">Emerald</option>
|
||||
<option value="corporate">Corporate</option>
|
||||
<option value="synthwave">Synthwave</option>
|
||||
<option value="retro">Retro</option>
|
||||
<option value="cyberpunk">Cyberpunk</option>
|
||||
<option value="valentine">Valentine</option>
|
||||
<option value="halloween">Halloween</option>
|
||||
<option value="garden">Garden</option>
|
||||
<option value="forest">Forest</option>
|
||||
<option value="aqua">Aqua</option>
|
||||
<option value="lofi">Lofi</option>
|
||||
<option value="pastel">Pastel</option>
|
||||
<option value="fantasy">Fantasy</option>
|
||||
<option value="wireframe">Wireframe</option>
|
||||
<option value="black">Black</option>
|
||||
<option value="luxury">Luxury</option>
|
||||
<option value="dracula">Dracula</option>
|
||||
<option value="cmyk">CMYK</option>
|
||||
<option value="autumn">Autumn</option>
|
||||
<option value="business">Business</option>
|
||||
<option value="acid">Acid</option>
|
||||
<option value="lemonade">Lemonade</option>
|
||||
<option value="night">Night</option>
|
||||
<option value="coffee">Coffee</option>
|
||||
<option value="winter">Winter</option>
|
||||
<option value="dim">Dim</option>
|
||||
<option value="nord">Nord</option>
|
||||
<option value="sunset">Sunset</option>
|
||||
</select>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="/console">Console</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/pricing">Pricing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<script lang="ts">
|
||||
import { OpenBirch } from "$lib/OpenBirchService";
|
||||
|
||||
var test: string[] = ["> bruh", "bruh", "> Ping", "Pong"];
|
||||
test = test.concat(test);
|
||||
test = test.concat(test);
|
||||
test = test.concat(test);
|
||||
test = test.concat(test);
|
||||
import { OpenBirch, ConsoleSender } from "$lib/OpenBirchService";
|
||||
import ConsoleText from "./ConsoleText.svelte";
|
||||
import Enumerable from 'linq'
|
||||
|
||||
let inputField: HTMLInputElement;
|
||||
async function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Enter') {
|
||||
pushCommand();
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
goBackInCommandHistory();
|
||||
} else if (event.key === 'ArrowDown'){
|
||||
goForwardInCommandHistory();
|
||||
}
|
||||
|
||||
if (inputField.value == '' && event.key !== 'Enter') return;
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
// Locally start sending command
|
||||
function pushCommand(){
|
||||
OpenBirch.sendCommand(inputField.value)
|
||||
currentBackSelect = 0;
|
||||
inputField.value = '';
|
||||
}
|
||||
|
||||
|
|
@ -30,20 +31,32 @@
|
|||
function updatePreviewCommand(){
|
||||
previewText.innerHTML = OpenBirch.speculateCommand(inputField.value);
|
||||
}
|
||||
|
||||
let currentBackSelect = 0;
|
||||
function goBackInCommandHistory(){
|
||||
currentBackSelect++;
|
||||
updateInput();
|
||||
}
|
||||
function goForwardInCommandHistory(){
|
||||
if (currentBackSelect > 0)
|
||||
currentBackSelect--;
|
||||
updateInput();
|
||||
}
|
||||
|
||||
function updateInput(){
|
||||
let history = OpenBirch.getHistory(ConsoleSender.User);
|
||||
// let distinctHistory = Array.from(new Map(history.map(entry => [entry.message, entry])).values()); // .distinctBy(x=>x.message)
|
||||
let distinctHistory = Enumerable.from(history).distinct(x=>x.message).toArray();
|
||||
currentBackSelect = Math.min(distinctHistory.length, currentBackSelect); // Clamp to num of distinct history
|
||||
inputField.value = distinctHistory[distinctHistory.length - currentBackSelect].message;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="consoleContainer p-4">
|
||||
<div class="p-4 flex grow flex-col bg-primary-content rounded-xl overflow-auto">
|
||||
<div class="">
|
||||
<ul class="prose">
|
||||
{#each $OpenBirch as consoleEntry}
|
||||
{#if consoleEntry.sender == 0}
|
||||
<li class=""><b>></b> {" " + consoleEntry.message}</li>
|
||||
{:else}
|
||||
<li class="text-accent opacity-75"><b><i>{consoleEntry.message}</i></b></li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
<div class="flex flex-col-reverse">
|
||||
<ConsoleText/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<script>
|
||||
import { OpenBirch } from "$lib/OpenBirchService";
|
||||
</script>
|
||||
|
||||
<ul class="prose">
|
||||
{#each $OpenBirch as consoleEntry}
|
||||
{#if consoleEntry.sender == 0}
|
||||
<li class=""><b>></b> {" " + consoleEntry.message}</li>
|
||||
{:else}
|
||||
<li class="text-accent opacity-75"><b><i>{consoleEntry.message}</i></b></li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
// Script
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<!-- html -->
|
||||
</div>
|
||||
|
||||
<style>
|
||||
main{
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"topbar topbar topbar"
|
||||
"ads content sidebar"
|
||||
"footer footer footer";
|
||||
|
||||
grid-template-columns: 1fr 3fr 1fr;
|
||||
grid-template-rows: 50px auto 70px;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -32,3 +32,7 @@ window.runEval = function (inputText, stopAssignments = false) {
|
|||
|
||||
return resultString;
|
||||
}
|
||||
|
||||
window.resetOpenBirch = function () {
|
||||
Module._resetState();
|
||||
}
|
||||
|
|
@ -6,7 +6,39 @@ export default {
|
|||
},
|
||||
plugins: [require("@tailwindcss/typography"), require('daisyui')],
|
||||
daisyui: {
|
||||
themes: ["coffee"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
|
||||
themes: [
|
||||
"light",
|
||||
"dark",
|
||||
"cupcake",
|
||||
"bumblebee",
|
||||
"emerald",
|
||||
"corporate",
|
||||
"synthwave",
|
||||
"retro",
|
||||
"cyberpunk",
|
||||
"valentine",
|
||||
"halloween",
|
||||
"garden",
|
||||
"forest",
|
||||
"aqua",
|
||||
"lofi",
|
||||
"pastel",
|
||||
"fantasy",
|
||||
"wireframe",
|
||||
"black",
|
||||
"luxury",
|
||||
"dracula",
|
||||
"cmyk",
|
||||
"autumn",
|
||||
"business",
|
||||
"acid",
|
||||
"lemonade",
|
||||
"night",
|
||||
"coffee",
|
||||
"winter",
|
||||
"dim",
|
||||
"nord",
|
||||
"sunset",], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
|
||||
base: true, // applies background color and foreground color for root element by default
|
||||
styled: true, // include daisyUI colors and design decisions for all components
|
||||
utils: true, // adds responsive and modifier utility classes
|
||||
|
|
|
|||
Loading…
Reference in New Issue