JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="board"></div>
<div id="buttons"><span id="startButton">Start</span><span id="stopButton">Stop</span></div>

CSS

@charset "utf-8";body{background-color:black}.board{position:relative;margin:auto;margin-top:80px;border:1px solid #808080}.divider,.paddle,.ball,.scoreLabel,.nameLabel,.messageLabel{position:absolute}.divider{width:1px;background-color:#808080}.paddle{width:3px;background-color:white}.ball{background-image:url("../img/ball-white.png")}.scoreLabel,.nameLabel,.messageLabel,#buttons span{text-align:center;font-family:Helvetica,Arial,sans-serif;color:white}.scoreLabel{top:10px;font-size:2em}.left{text-align:left}.right{text-align:right}.nameLabel{top:-45px;font-size:1.5em}.messageLabel{top:65px;font-size:3em}#buttons{margin-top:17.5px;text-align:center}#buttons span{font-size:1.5em;cursor:pointer}#startButton{margin-right:30px}

JavaScript

var Expand=function(a){var b=a.text;for(var c in a.substs)b=b.replace(new RegExp(c,"g"),a.substs[c]);return b};
eval(Expand({text:'var _19=_01(){_01 d(c){if(!(_00 _1b d)){var e=new j;d.apply(e,_08);_02 e}_00._07=0;if(_08._07==1&&(c _1b Array||c _1b d))for(e=0;e<c._07;e++){_00[e]=c[e];_00._07++}else for(e=0;e<_08._07;e++){_00[e]=_08[e];_00._07++}}_01 m(){for(var c=a(_08[0]._07,0),e=0;e<_08[0]._07;e++)for(var g=0;g<_08._07;g++)c[e]+=_08[g][e];_02 d(c)}_01 k(c,e){_02 m(c,h(e))}_01 n(c,e){for(var g=\n[],i=0;i<c._07;i++)g[i]=e*c[i];_02 d(g)}_01 h(c){_02 n(c,-1)}_01 a(c,e){for(var g=[],i=0;i<c;i++)g[i]=e;_02 d(g)}_01 b(c,e){if(c._07!=e._07)_02 false;for(var g=0;g<c._07;g++)if(c[g]!==e[g])_02 false;_02 true}_01 f(c){for(var e=[],g=0;g<c._07;g++)e[g]=c[g];_02 d(e)}_01 j(){}d._03.add=_01(){_02 m.apply(null,Array._03.slice.call(_08).concat([_00]))};d._03.subtract=_01(c){_02 k(_00,c)};d._03.scale=\n_01(c){_02 n(_00,c)};d._03.negate=_01(){_02 h(_00)};d._03.equals=_01(c){if(!(c _1b d))_02 false;_02 b(_00,c)};d._03.clone=_01(){_02 f(_00)};d._03.toArray=_01(){for(var c=[],e=0;e<_00._07;e++)c[e]=_00[e];_02 c};d._03.toString=_01(c){c=c||3;for(var e="",g=0;g<_00._07;g++)e+=(g>0?", ":"")+_00[g].toPrecision(c);_02"_19 ("+e+")"};j._03=d._03;d.add=m;d.subtract=k;d.scale=n;d.negate=h;d.fill=\na;d.equals=b;d.clone=f;_02 d}();var Pong=_01(){_01 d(a,b,f){_00.players=[new k(_00,0,a[0].name,a[0]._14),new k(_00,1,a[1].name,a[1]._14)];a=f||{};f=n.defaults;var j={};for(var c in f)j[c]=typeof a[c]!="undefined"?a[c]:f[c];_00._04=j;_00._09=h._1a;_00._11();_00._06={node:b};_00.createGraphics()}_01 m(){var a=_00;if(!(_00._09==h._1a||_00._09==h.over)){for(var b=0;b<2;b++)_00.players[b].updatePaddle();if(_00._09!=h.wait){b=_00.ball;b.pos=b.pos.add(b.vel.scale(1/\n_00._04._16));if(_00._09!=h._17){if(_05.abs(b.pos[0])+_00._04._12>=1&&_05._0f(b.pos[0],true)==_05._0f(b.vel[0],true)){var...