ea-route-dwitter
Version:
app.use('/mountpoint', require('ea-route-dwitter')) in your express app - edit and live-preview dwitter golfing code.
254 lines (225 loc) • 10.9 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>dwitter</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" type="image/png" href="data:image/png;base64,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">
<meta author="https://github.com/hagb4rd">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="fp:profile_id" content=""/>
<meta property="og:url" content="https://f-u-c-k-u-p.github.io"/>
<meta property="og:type" content="editor"/>
<meta property="og:title" content="ea-route-dwitter"/>
<meta property="og:description" content="Edit and preview animated javascript golfing dweets and post your version to dwitter.net"/>
<meta property="og:image" content="thumb.png"/>
<!-- <script src="webkit.min.js"></script> //-->
<script src="ace-builds/src/ace.js"></script>
<!-- <script src="uglify.js"></script> //-->
<style>
* {
/* overflow: hidden; */
}
html, body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: #111;
text-align: center;
}
#iframe-container-wrapper {
width: 100%;
padding: 0 0 56.25% 0;
/* 16:9 */
position: relative;
background: black;
}
#iframe-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
iframe {
width: 100%;
height: 100%;
border: 0;
outline: 0;
margin: 0;
padding: 0;
}
.share-overlay {
text-align: left;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
transition: opacity 0.1s;
z-index: 1;
color: grey;
padding: 0px;
font-size: 20px;
font-family: monospace;
}
.share-overlay input {
margin-left: 15px;
background: transparent;
font-family: monospace;
color: white;
border: 0;
outline: 0;
font-size: 20px;
border-bottom: 1px solid white;
}
html:hover .share-overlay, body:hover .share-overlay, .share-overlay:hover {
opacity: 1;
}
code {
white-space: pre;
}
canvas {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 100%;
display: none;
}
#editor {
/**/
position: absolute;
/**/
margin: 0 auto;
width: 100%;
height: 300px;
backgroundColor: grey;
}
</style>
</head>
<body>
<div id=iframe-container-wrapper>
<div id=iframe-container></div>
</div>
<div class=share-overlay>
<div id="editor" width="100%" width="100%"></div>
<code>
// (<span id=character-count-display></span>
/140)
</code>
</div>
<script>
var main = async function main() {
var e, c;
e = c = window.editor = ace.edit("editor");
c.setTheme("ace/theme/monokai");
c.session.setMode("ace/mode/javascript");
c.session.on('change', (e)=>{
//var prefix="#";
//oldCode = editor.getvalue();
var code = c.getValue()
replaceIframe(code)
window.location.hash = "#" + encodeURIComponent(code);
});
// Actions
// --
// (no fckn paramater functions, easy to bind to basic user actions clicks keys blah)
var loadRandomDweet = async()=>{
var dweet = await fetch("random?i=" + Math.random()).then(resp=>resp.json());
setDweet(dweet);
}
//--
//TEMP_ON:
var fetchDweet = async(id)=>{
var dweet = await fetch("id/" + id).then(resp=>resp.json());
setDweet(dweet);
}
var setDweet = async(dweet)=>{
try {
//add heading comment with meta info about dweet
dweet.code = `//${dweet.author} ${dweet.posted.slice(0, 10)} ID:${dweet.id}`
+ "\n"
+ dweet.code;
/*
dweet.code += dweet.code || ` t:elapsed time in s S:sin C:cos T:tan R:rgba c:canvas x:canvas context
for (i = 2e3; i--; )
x.fillStyle = 'hsl(' + 200 * C(t * .5) * S(i * .005) + ',99%,50%)',
x.fillRect(i * 5 + 200 * S(t) - 200, 1070, 5, 9);
x.drawImage(c, 0, -9, 1920, 1080);`;
/* */
console.log(dweet);
c.session.setValue(dweet.code)
} catch (ex) {
console.log(ex);
throw (ex)
}
}
c.commands.addCommand({
name: "random-dweet",
bindKey: {
win: "Ctrl-Alt-d",
mac: "Command-Shift-d"
},
exec: loadRandomDweet
});
c.commands.addCommand({
name: "help",
bindKey: {
win: "Ctrl-Shift-h",
mac: "Command-Alt-h"
},
exec: function(e) {
ace.config.loadModule("ace/ext/keybinding_menu", function(t) {
t.init(e),
e.showKeyboardShortcuts()
})
}
});
/*
c.commands.addCommand({
name: "save-file",
bindKey: {
win: "Alt-s",
mac: "Command-Alt-s"
},
exec: function(e) {
page.downloadText(editor.session.getValue());
}
});
c.commands.addCommand({
name: "minify",
bindKey: {
win: "Alt-m",
mac: "Command-Alt-m"
},
exec: function(e) {
var code = editor.session.getValue();
var minified = UglifyJS.minify(code).code;
editor.setValue(minified);
}
});
/* */
loadRandomDweet();
};
function replaceIframe(code) {
var iframe = document.createElement('iframe');
iframe.sandbox = 'allow-scripts';
var iframeContent = encodeURIComponent('<!DOCTYPE html>' + '<head>' + '<style>' + '* {padding:0;margin:0;border:0;outline:0;overflow:hidden}' + 'canvas {' + 'width: 100%;' + 'background: white;' + '}' + '</style>' + '</head>' + '<body>' + '<canvas id=c></canvas>' + '<script>' + 'var c = document.querySelector("#c");' + 'c.width = 1920;' + 'c.height = 1080;' + 'var S = Math.sin;' + 'var C = Math.cos;' + 'var T = Math.tan;' + 'var R = function(r,g,b,a) {' + 'a = a === undefined ? 1 : a;' + 'return "rgba("+(r|0)+","+(g|0)+","+(b|0)+","+a+")";' + '};' + 'var x = c.getContext("2d");' + 'var startT = +new Date(); ' + 'function u(t) {' + code + '};' + 'function loop() {' + 'requestAnimationFrame(loop);' + 'u((new Date() - startT) / 1000);' + '};' + 'loop();' + '</scr' + 'ipt>');
iframe.src = 'data:text/html;charset=utf-8,' + iframeContent;
var container = document.querySelector('#iframe-container');
container.innerHTML = '';
container.appendChild(iframe)
}
main();
</script>
</body>
</html>