ea-golf
Version:
demos javascript dwitter golfing
201 lines (187 loc) • 5.79 kB
HTML
<html>
<head>
<title>
Tweet Demo
</title>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: #111;
text-align: center;
}
* {
overflow: hidden;
}
#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: 15px;
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;
}
</style>
</head>
<body>
<div id=iframe-container-wrapper>
<div id=iframe-container>
</div>
</div>
<div class=share-overlay>
<code>
function u(t) {
/* Will be called 60 times per second.
* t: Elapsed time in seconds.
* S: Shorthand for Math.sin.
* C: Shorthand for Math.cos.
* T: Shorthand for Math.tan.
* R: Function that generates rgba-strings, usage ex.: R(255, 255, 255, 0.5)
* c: A 1920x1080 canvas.
* x: A 2D context for that canvas. */
<input
id=editor
autocomplete=off
autocorrect=off
autocapitalize=off
spellcheck=false
>
} // (<span id=character-count-display></span>/140)
</code>
</div>
<script>
(function() {
var initCode='c.width=2e3;x.fillRect(150,150*S(t)+150,150,150)';
var getCode = function() {
if(window.location.hash.length > 1) {
return atob(window.location.hash.slice(1));
} else {
return "";
}
}
var updateCode = function(code) {
window.location.hash=btoa(code)
}
if(!getCode()) {
updateCode(initCode);
}
/*
if(getCode().length > 140) {
alert('code too long, sorry!');
return;
}
/* */
var editor = document.querySelector('#editor');
var ccd = document.querySelector('#character-count-display');
editor.value = getCode();
var oldCode = editor.value;
replaceIframe(editor.value);
editor.size = Math.max(editor.value.length, 1);
ccd.innerText = editor.value.length;
editor.addEventListener('keyup', function() {
if(editor.value == oldCode) {
return;
}
editor.size = Math.max(editor.value.length, 1);
ccd.innerText = editor.value.length;
replaceIframe(editor.value);
oldCode = editor.value;
//window.history.replaceState('', '', prefix + btoa(oldCode));
updateCode(oldCode);
});
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);
}
})();
</script>
</body>
</html>