BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

faster loading, broken interface

Browse Source
This commit is contained in:
Raphaël Forment
2023-08-27 16:32:14 +02:00
parent f9bf616c50
commit 369bc538c7
2 changed files with 38 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
index.html
View File

@ -49,45 +49,43 @@
<svg id="share_button" title="Share button" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-black p-2 bg-white rounded-full" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
</svg>
<span id="universe-viewer" class="hidden xl:block ml-4 text-2xl text-white">Topos</span>
</a>
<nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
<a title="Play button (Ctrl+P)" id="play-button-1" class="flex flex-row hover:bg-gray-800 px-2 py-2 rounded-lg">
<p class="text-xl pr-2 text-white inline-block">Play</p>
<p class="hidden lg:block text-xl pr-2 text-white inline-block">Play</p>
<svg class="w-7 h-7" fill="currentColor" viewBox="0 0 14 16">
<path d="M0 .984v14.032a1 1 0 0 0 1.506.845l12.006-7.016a.974.974 0 0 0 0-1.69L1.506.139A1 1 0 0 0 0 .984Z"/>
</svg>
</a>
<a title="Pause button (Ctrl+S)" id="pause-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
<p class="text-xl pr-2 text-white inline-block">Pause</p>
<svg class="fill-orange-300 w-7 h-7 text-gray-800 text-white" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9 13a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Zm4 0a1 1 0 0 1-2 0V7a1 1 0 0 1 2 0v6Z"/>
</svg>
</a>
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
<p class="text-xl pr-2 text-white inline-block">Stop</p>
<svg class="w-7 h-7 text-gray-800 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 12 16">
<path d="M10.819.4a1.974 1.974 0 0 0-2.147.33l-6.5 5.773A2.014 2.014 0 0 0 2 6.7V1a1 1 0 0 0-2 0v14a1 1 0 1 0 2 0V9.3c.055.068.114.133.177.194l6.5 5.773a1.982 1.982 0 0 0 2.147.33A1.977 1.977 0 0 0 12 13.773V2.227A1.977 1.977 0 0 0 10.819.4Z"/>
<p class="hidden lg:block text-xl pr-2 text-white inline-block">Stop</p>
<svg class="w-7 h-7 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Z"/>
<rect x="6.5" y="6.5" width="7" height="7" fill="black" rx="1" ry="1"/>
</svg>
</a>
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
<p class="text-xl pr-2 text-white inline-block">Eval</p>
<p class="hidden lg:block text-xl pr-2 text-white inline-block">Eval</p>
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"/>
</svg>
</a>
<a title="Clear button" id="clear-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
<p class="text-xl pr-2 text-white inline-block">Clear</p>
<svg class="w-7 h-7 text-gray-800 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 17 20">
<path d="M7.958 19.393a7.7 7.7 0 0 1-6.715-3.439c-2.868-4.832 0-9.376.944-10.654l.091-.122a3.286 3.286 0 0 0 .765-3.288A1 1 0 0 1 4.6.8c.133.1.313.212.525.347A10.451 10.451 0 0 1 10.6 9.3c.5-1.06.772-2.213.8-3.385a1 1 0 0 1 1.592-.758c1.636 1.205 4.638 6.081 2.019 10.441a8.177 8.177 0 0 1-7.053 3.795Z"/>
<p class="hidden lg:block text-xl pr-2 text-white inline-block">Clear</p>
<svg class="w-7 h-7 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
<path d="M17 4h-4V2a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v2H1a1 1 0 0 0 0 2h1v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6h1a1 1 0 1 0 0-2ZM7 2h4v2H7V2Zm1 14a1 1 0 1 1-2 0V8a1 1 0 0 1 2 0v8Zm4 0a1 1 0 0 1-2 0V8a1 1 0 0 1 2 0v8Z"/>
</svg>
</svg>
</a>
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
<p class="text-xl pr-2 text-white inline-block">Docs</p>
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
<path d="M9 1.334C7.06.594 1.646-.84.293.653a1.158 1.158 0 0 0-.293.77v13.973c0 .193.046.383.134.55.088.167.214.306.366.403a.932.932 0 0 0 .5.147c.176 0 .348-.05.5-.147 1.059-.32 6.265.851 7.5 1.65V1.334ZM19.707.653C18.353-.84 12.94.593 11 1.333V18c1.234-.799 6.436-1.968 7.5-1.65a.931.931 0 0 0 .5.147.931.931 0 0 0 .5-.148c.152-.096.279-.235.366-.403.088-.167.134-.357.134-.55V1.423a1.158 1.158 0 0 0-.293-.77Z"/>
<p class="hidden lg:block text-xl pr-2 text-white inline-block">Docs</p>
<svg class="w-7 h-7 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
</svg>
</a>
@ -118,7 +116,7 @@
</div>
</div>
<div class="space-y-2">
<h2 class="font-semibold dark:text-gray-400">More</h2>
<h2 class="font-semibold text-gray-400">More</h2>
<div class="flex flex-col">
<a rel="noopener noreferrer" id="docs_about" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">About Topos</a>
</div>
@ -174,8 +172,8 @@
<input id="bordered-radio-1" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-600">
<label id="normal-mode" for="bordered-radio-1" class="w-full py-4 ml-2 text-sm font-medium text-black">Normal Mode</label>
</div>
<div class="flex items-center pl-4 border border-gray-200 rounded dark:border-gray-700 w-full">
<input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<div class="flex items-center pl-4 border rounded border-gray-700 w-full">
<input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 focus:ring-blue-600 ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label id="vim-mode" for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Mode</label>
</div>
</div>
@ -202,25 +200,6 @@
</div>
</div>
<!-- This modal pops up when the page is first loaded and then disappears forever -->
<div id="modal-container" class="motion-safe:animate-pulse flex min-h-screen flex flex-col">
<div id="modal" class="bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
<div id="start-button" class="bg-white px-2 py-2 lg:px-12 lg:py-12 rounded-md text-center">
<h1 class="text-xl mb-4 font-bold text-white rounded bg-gray-800 py-4 mb-6">Topos Alpha v0.1</h1>
<div class="flex ml-0 lg:flex-row landscape:space-y-0 portrait:space-y-2 lg:space-y-4 lg:space-y-0 portrait:flex-col landscape:flex-row lg:flex-col w-auto min-w-screen px-0 lg:space-x-8 landscape:space-x-2">
<a href="https://github.com/Bubobubobubobubo/Topos" class="block max-w-sm lg:p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
<h5 class="sm:pt-2 mb-2 lg:text-2xl text-xl font-bold tracking-tight text-white">GitHub</h5>
<p class="sm:pb-2 font-normal text-white">Get involved in the dev process and or file an issue for a broken feature</p>
</a>
<a href="https://discord.gg/aPgV7mSFZh" class="block max-w-sm lg:p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
<h5 class="sm:pt-2 mb-2 lg:text-2xl text-xl font-bold tracking-tight text-white">Discord</h5>
<p class="sm:pb-2 font-normal text-white">Join the community on the official Topos/Sardine Discord Server.</p>
</a>
</div>
</div>
</div>
<div class="flex flex-row max-h-fit">
<!-- This is a lateral bar that will inherit the header buttons if the window is too small. -->
@ -232,16 +211,13 @@
dark:border-neutral-700 border-none"
>
<nav class="flex flex-col space-y-6">
<a title="Local Scripts (Ctrl + L)" id="local-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 hover:bg-gray-800">
<!--
<p class="grid font-mono font-semibold text-4xl content-center justify-center">L</p>
-->
<a title="Local Scripts (Ctrl + L)" id="local-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
<svg class="w-8 h-8 text-orange-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-11a1 1 0 0 0 1-1V1a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1Zm0 12a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1ZM4.343 5.757a1 1 0 0 0 1.414-1.414L4.343 2.929a1 1 0 0 0-1.414 1.414l1.414 1.414Zm11.314 8.486a1 1 0 0 0-1.414 1.414l1.414 1.414a1 1 0 0 0 1.414-1.414l-1.414-1.414ZM4 10a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h2a1 1 0 0 0 1-1Zm15-1h-2a1 1 0 1 0 0 2h2a1 1 0 0 0 0-2ZM4.343 14.243l-1.414 1.414a1 1 0 1 0 1.414 1.414l1.414-1.414a1 1 0 0 0-1.414-1.414ZM14.95 6.05a1 1 0 0 0 .707-.293l1.414-1.414a1 1 0 1 0-1.414-1.414l-1.414 1.414a1 1 0 0 0 .707 1.707Z"/>
</svg>
</a>
<a title="Global Script (Ctrl + G)" id="global-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 hover:bg-gray-800">
<a title="Global Script (Ctrl + G)" id="global-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
<!--
<p class="grid font-mono font-semibold text-4xl content-center justify-center">G</p>
-->
@ -250,7 +226,7 @@
</svg>
</a>
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 bg-gray-800">
<a title="Initialisation Script (Ctrl + I)" id="init-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg text-white bg-gray-800">
<!--
<p class="grid font-mono font-semibold text-4xl content-center justify-center">I</p>
-->
@ -259,9 +235,9 @@
</svg>
</a>
<a title="Project notes (Ctrl + N)" id="note-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 hover:bg-gray-800">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 16 20">
<path d="M16 14V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 0 0 0-2h-1v-2a2 2 0 0 0 2-2ZM4 2h2v12H4V2Zm8 16H3a1 1 0 0 1 0-2h9v2Z"/>
<a title="Project notes (Ctrl + N)" id="note-button" class="pl-2 p-1.5 text-gray-700 focus:outline-nones transition-colors duration-200 rounded-lg text-white hover:bg-gray-800">
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="m13.835 7.578-.005.007-7.137 7.137 2.139 2.138 7.143-7.142-2.14-2.14Zm-10.696 3.59 2.139 2.14 7.138-7.137.007-.005-2.141-2.141-7.143 7.143Zm1.433 4.261L2 12.852.051 18.684a1 1 0 0 0 1.265 1.264L7.147 18l-2.575-2.571Zm14.249-14.25a4.03 4.03 0 0 0-5.693 0L11.7 2.611 17.389 8.3l1.432-1.432a4.029 4.029 0 0 0 0-5.689Z"/>
</svg>
</a>
@ -306,7 +282,7 @@
</ul>
<!-- Here comes the editor itself -->
<div id="editor" class="invisible relative flex flex-row h-screen overflow-y-hidden">
<div id="editor" class="relative flex flex-row h-screen overflow-y-hidden">
</div>
<p id="error_line" class="hidden text-red-400 w-screen bg-neutral-900 font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
</div>

47
src/main.ts
View File

@ -84,6 +84,7 @@ export class Editor {
view: EditorView;
clock: Clock;
manualPlay: boolean = false;
isPlaying: boolean = false;
// Mouse position
public _mouseX: number = 0;
@ -92,11 +93,6 @@ export class Editor {
// Transport elements
play_buttons: HTMLButtonElement[] = [
document.getElementById("play-button-1") as HTMLButtonElement,
//document.getElementById("play-button-2") as HTMLButtonElement,
];
pause_buttons: HTMLButtonElement[] = [
document.getElementById("pause-button-1") as HTMLButtonElement,
//document.getElementById("pause-button-2") as HTMLButtonElement,
];
stop_buttons: HTMLButtonElement[] = [
document.getElementById("stop-button-1") as HTMLButtonElement,
@ -414,8 +410,13 @@ export class Editor {
this.play_buttons.forEach((button) => {
button.addEventListener("click", () => {
if (this.isPlaying) {
this.setButtonHighlighting("pause", true);
this.clock.pause();
} else {
this.setButtonHighlighting("play", true);
this.clock.start();
}
});
});
@ -450,12 +451,6 @@ export class Editor {
this.flashBackground("#2d313d", 200);
});
this.pause_buttons.forEach((button) => {
button.addEventListener("click", () => {
this.setButtonHighlighting("pause", true);
this.clock.pause();
});
});
this.stop_buttons.forEach((button) => {
button.addEventListener("click", () => {
@ -965,36 +960,6 @@ export class Editor {
// Creating the application
const app = new Editor();
// Starting the clock after displaying a modal
function startClock() {
document.getElementById("editor")!.classList.remove("invisible");
document.getElementById("modal")!.classList.add("hidden");
document
.getElementById("modal-container")!
.classList.remove("motion-safe:animate-pulse");
document
.getElementById("start-button")!
.removeEventListener("click", startClock);
document.removeEventListener("click", startClock);
document.removeEventListener("keydown", startOnEnter);
document.removeEventListener("click", startOnClick);
app.clock.start();
app.view.focus();
app.setButtonHighlighting("play", true);
}
function startOnEnter(e: KeyboardEvent) {
if (e.code === "Enter" || e.code === "Space") startClock();
}
function startOnClick(e: MouseEvent) {
if (e.button === 0) startClock();
}
document.addEventListener("keydown", startOnEnter);
document.addEventListener("click", startOnClick);
// document.getElementById("start-button")!.addEventListener("click", startClock);
/**
* @param event The mouse event
*/