elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-22 11:08:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

draw above background

Browse Source
This commit is contained in:
Felix Roos 2022-03-21 19:44:48 +01:00
parent 9af6a779f2
commit 2efbb68627
3 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
repl/public/global.css
View File

@ -11,6 +11,7 @@ body {
height: 100% !important; height: 100% !important;
background-color: transparent !important; background-color: transparent !important;
font-size: 15px; font-size: 15px;
z-index:20
} }
.CodeMirror-line > span { .CodeMirror-line > span {

8
repl/src/App.tsx
View File

@ -78,7 +78,7 @@ function App() {
id="header" id="header"
className={cx( className={cx(
'flex-none w-full h-14 px-2 flex border-b border-gray-200 justify-between z-[10]', 'flex-none w-full h-14 px-2 flex border-b border-gray-200 justify-between z-[10]',
uiHidden ? 'bg-transparent text-white' : 'bg-white' uiHidden ? 'bg-transparent text-white' : 'bg-white',
)} )}
> >
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@ -135,7 +135,7 @@ function App() {
className={cx( className={cx(
'h-full transition-opacity', 'h-full transition-opacity',
error ? 'focus:ring-red-500' : 'focus:ring-slate-800', error ? 'focus:ring-red-500' : 'focus:ring-slate-800',
uiHidden ? 'opacity-0' : 'opacity-100' uiHidden ? 'opacity-0' : 'opacity-100',
)} )}
> >
<CodeMirror <CodeMirror
@ -169,7 +169,9 @@ function App() {
style={{ fontFamily: 'monospace' }} style={{ fontFamily: 'monospace' }}
/> />
</section> </section>
<button className="fixed right-4 bottom-2 z-[11]" onClick={() => playStatic(code)}>static</button> <button className="fixed right-4 bottom-2 z-[11]" onClick={() => playStatic(code)}>
static
</button>
</div> </div>
); );
} }

2
repl/src/draw.mjs
View File

@ -8,7 +8,7 @@ export const getDrawContext = (id = 'test-canvas') => {
canvas.id = id; canvas.id = id;
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0'; canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0;z-index:5';
document.body.prepend(canvas); document.body.prepend(canvas);
} }
return canvas.getContext('2d'); return canvas.getContext('2d');