Raphaël Forment
115
index.html
115
index.html
@ -46,43 +46,58 @@
|
||||
<header class="py-2 block text-white bg-neutral-900">
|
||||
<div class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center">
|
||||
<a class="flex title-font font-medium items-center text-black mb-0">
|
||||
<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">
|
||||
<svg 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="hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-8 h-8" 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 title="Play button (Ctrl+P)" id="play-button-1" class="flex flex-row mr-2 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg id="play-icon" 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>
|
||||
<svg id="pause-icon" class="hidden w-7 h-7 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 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>
|
||||
<p id="play-label" class="hidden lg:block text-xl pl-2 text-white inline-block">Play</p>
|
||||
</a>
|
||||
<a title="Pause button (Ctrl+S)" id="pause-button-1" class="mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="fill-orange-300 w-8 h-8 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 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">
|
||||
<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>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Stop</p>
|
||||
</a>
|
||||
<a title="Stop button (Ctrl+R)" id="stop-button-1" class="mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-8 h-8 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"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a title="Eval button (Ctrl+Enter)" id="eval-button-1" class="mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-8 h-8 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
|
||||
<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">
|
||||
<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>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Eval</p>
|
||||
</a>
|
||||
|
||||
<a title="Clear button" id="clear-button-1" class="mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-8 h-8 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"/>
|
||||
</svg>
|
||||
<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">
|
||||
<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>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Clear</p>
|
||||
</a>
|
||||
<a title="Open Documentation (Ctrl+D)" id="doc-button-1" class="mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-8 h-8 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"/>
|
||||
</svg>
|
||||
|
||||
|
||||
<a title="Share button" id="share-button" class="flex flex-row mr-2 hover:text-gray-900 hover:bg-gray-800 px-2 py-2 rounded-lg">
|
||||
<svg class="w-7 h-7 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 19 19">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"/>
|
||||
</svg>
|
||||
<p class="hidden lg:block text-xl pl-2 text-white inline-block">Share</p>
|
||||
</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="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>
|
||||
|
||||
</nav>
|
||||
@ -112,7 +127,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>
|
||||
@ -168,8 +183,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>
|
||||
@ -196,25 +211,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. -->
|
||||
@ -226,38 +222,29 @@
|
||||
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">
|
||||
<!--
|
||||
<p class="grid font-mono font-semibold text-4xl content-center justify-center">G</p>
|
||||
-->
|
||||
<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">
|
||||
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 18 20">
|
||||
<path d="M17.8 13.75a1 1 0 0 0-.859-.5A7.488 7.488 0 0 1 10.52 2a1 1 0 0 0 0-.969A1.035 1.035 0 0 0 9.687.5h-.113a9.5 9.5 0 1 0 8.222 14.247 1 1 0 0 0 .004-.997Z"/>
|
||||
</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">
|
||||
<!--
|
||||
<p class="grid font-mono font-semibold text-4xl content-center justify-center">I</p>
|
||||
-->
|
||||
<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">
|
||||
<svg class="w-8 h-8 text-white " fill="none" viewBox="0 0 21 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.487 1.746c0 4.192 3.592 1.66 4.592 5.754 0 .828 1 1.5 2 1.5s2-.672 2-1.5a1.5 1.5 0 0 1 1.5-1.5h1.5m-16.02.471c4.02 2.248 1.776 4.216 4.878 5.645C10.18 13.61 9 19 9 19m9.366-6h-2.287a3 3 0 0 0-3 3v2m6-8a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
|
||||
</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"/>
|
||||
</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 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>
|
||||
|
||||
<a title="Open settings" id="settings-button" class="lg:block sm:hidden p-2 text-gray-200 ml-1 absolute bottom-2 focus:outline-nones transition-colors duration-200 rounded-lg text-gray-200 bg-gray-800">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
@ -300,7 +287,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>
|
||||
|
||||
@ -62,10 +62,10 @@ export const documentation_factory = (application: Editor) => {
|
||||
|
||||
return `
|
||||
<details ${open ? "open" : ""}>
|
||||
<summary>${description}
|
||||
<button class="inline-block pl-2" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶</button>
|
||||
<button class="inline-block pl-2" onclick="stop()">❚❚</button>
|
||||
<button class="inline-block pl-2" onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">copy</button>
|
||||
<summary >${description}
|
||||
<button class="py-1 align-top text-base rounded-lg pl-2 pr-2 hover:bg-green-700 bg-green-600 inline-block" onclick="app.api._playDocExample(app.api.codeExamples['${codeId}'])">▶️ Play</button>
|
||||
<button class="py-1 text-base rounded-lg pl-2 pr-2 hover:bg-neutral-600 bg-neutral-500 inline-block pl-2" onclick="stop()">⏸️ Pause</button>
|
||||
<button class="py-1 text-base rounded-lg pl-2 pr-2 hover:bg-neutral-900 bg-neutral-800 inline-block " onclick="navigator.clipboard.writeText(app.api.codeExamples['${codeId}'])">📎 Copy</button>
|
||||
</summary>
|
||||
\`\`\`javascript
|
||||
${code}
|
||||
@ -82,11 +82,11 @@ Welcome to the Topos documentation. These pages are offering you an introduction
|
||||
)}. Press again to make the documentation disappear. All your contributions are welcome!
|
||||
|
||||
${makeExample(
|
||||
"Welcome! Eval to get started",
|
||||
`mod([1/4,1/8,1/16].div(8)):: sound('sine')
|
||||
.freq([100,50].div(16) + 50 * ($(1)%10))
|
||||
.gain(0.5).room(0.9).size(0.9)
|
||||
.sustain(0.1).out()
|
||||
"Welcome! Eval to get started", `
|
||||
mod([1/4,1/8,1/16].div(8)):: sound('sine')
|
||||
.freq([100,50].div(16) + 50 * ($(1)%10))
|
||||
.gain(0.5).room(0.9).size(0.9)
|
||||
.sustain(0.1).out()
|
||||
mod(1) :: sound('kick').out()`,
|
||||
true
|
||||
)}
|
||||
|
||||
94
src/main.ts
94
src/main.ts
@ -33,18 +33,19 @@ import showdown from "showdown";
|
||||
showdown.setFlavor("github");
|
||||
import showdownHighlight from "showdown-highlight";
|
||||
const classMap = {
|
||||
h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-8 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
|
||||
h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-8 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
|
||||
h1: "text-white lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
|
||||
h2: "text-white lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 bg-neutral-900 rounded-lg py-2 px-2",
|
||||
ul: "text-underline pl-6",
|
||||
li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
|
||||
p: "lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 leading-normal",
|
||||
p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
|
||||
a: "lg:text-2xl text-base text-orange-300",
|
||||
code: "lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden",
|
||||
icode:
|
||||
"lg:my-1 my-1 lg:text-xl sm:text-xs text-white font-mono bg-neutral-600",
|
||||
blockquote: "text-neutral-200 border-l-4 border-neutral-500 pl-4 my-4 mx-4",
|
||||
details:
|
||||
"lg:mx-12 py-1 px-6 lg:text-2xl text-white rounded-lg bg-neutral-600",
|
||||
"lg:mx-12 py-2 px-6 lg:text-2xl text-white rounded-lg bg-neutral-600",
|
||||
summary: "font-semibold text-xl",
|
||||
table:
|
||||
"justify-center lg:my-8 my-2 lg:mx-8 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse",
|
||||
thead:
|
||||
@ -84,6 +85,7 @@ export class Editor {
|
||||
view: EditorView;
|
||||
clock: Clock;
|
||||
manualPlay: boolean = false;
|
||||
isPlaying: boolean = false;
|
||||
|
||||
// Mouse position
|
||||
public _mouseX: number = 0;
|
||||
@ -92,11 +94,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,
|
||||
@ -174,7 +171,7 @@ export class Editor {
|
||||
|
||||
// Share button
|
||||
share_button: HTMLElement = document.getElementById(
|
||||
"share_button"
|
||||
"share-button"
|
||||
) as HTMLElement;
|
||||
|
||||
// Error line
|
||||
@ -414,9 +411,16 @@ export class Editor {
|
||||
|
||||
this.play_buttons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
this.setButtonHighlighting("play", true);
|
||||
this.clock.start();
|
||||
});
|
||||
if (this.isPlaying) {
|
||||
this.setButtonHighlighting("pause", true);
|
||||
this.isPlaying = !this.isPlaying;
|
||||
this.clock.pause();
|
||||
} else {
|
||||
this.setButtonHighlighting("play", true);
|
||||
this.isPlaying = !this.isPlaying;
|
||||
this.clock.start();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.clear_buttons.forEach((button) => {
|
||||
@ -450,12 +454,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", () => {
|
||||
@ -515,11 +513,6 @@ export class Editor {
|
||||
});
|
||||
|
||||
this.share_button.addEventListener("click", () => {
|
||||
this.share_button.classList.add("animate-spin");
|
||||
setInterval(
|
||||
() => this.share_button.classList.remove("animate-spin"),
|
||||
1000
|
||||
);
|
||||
// trigger a manual save
|
||||
this.currentFile().candidate = app.view.state.doc.toString();
|
||||
this.currentFile().committed = app.view.state.doc.toString();
|
||||
@ -800,10 +793,26 @@ export class Editor {
|
||||
button: "play" | "pause" | "stop" | "clear",
|
||||
highlight: boolean
|
||||
) {
|
||||
document.getElementById('play-label')!.textContent = button !== "pause" ? "Pause" : "Play";
|
||||
if (button !== "pause") {
|
||||
document.getElementById('pause-icon')!.classList.remove('hidden');
|
||||
document.getElementById('play-icon')!.classList.add('hidden');
|
||||
} else {
|
||||
document.getElementById('pause-icon')!.classList.add('hidden');
|
||||
document.getElementById('play-icon')!.classList.remove('hidden');
|
||||
}
|
||||
|
||||
if (button === "stop") {
|
||||
this.isPlaying == false;
|
||||
document.getElementById('play-label')!.textContent = "Play";
|
||||
document.getElementById('pause-icon')!.classList.add('hidden');
|
||||
document.getElementById('play-icon')!.classList.remove('hidden');
|
||||
}
|
||||
|
||||
|
||||
this.flashBackground("#2d313d", 200);
|
||||
const possible_selectors = [
|
||||
'[id^="play-button-"]',
|
||||
'[id^="pause-button-"]',
|
||||
'[id^="clear-button-"]',
|
||||
'[id^="stop-button-"]',
|
||||
];
|
||||
@ -825,7 +834,6 @@ export class Editor {
|
||||
document
|
||||
.querySelectorAll(possible_selectors[selector])
|
||||
.forEach((button) => {
|
||||
if (highlight) button.children[0].classList.add("fill-orange-300");
|
||||
if (highlight) button.children[0].classList.add("animate-pulse");
|
||||
});
|
||||
// All other buttons must lose the highlighting
|
||||
@ -834,10 +842,8 @@ export class Editor {
|
||||
possible_selectors.filter((_, index) => index != selector).join(",")
|
||||
)
|
||||
.forEach((button) => {
|
||||
button.children[0].classList.remove("fill-orange-300");
|
||||
button.children[0].classList.remove("text-orange-300");
|
||||
button.children[0].classList.remove("bg-orange-300");
|
||||
button.children[0].classList.remove("animate-pulse");
|
||||
button.children[1].classList.remove("animate-pulse");
|
||||
});
|
||||
}
|
||||
|
||||
@ -965,36 +971,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
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user