SixteenColors Prototype

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

dabblet.html

<style>
html,body{
  background:#000;
  color:#AAA;
  text-align:center;
}
@font-face {
  font-family: '8x16';
  src: url('http://sixteencolors.net/static/font/8x16.eot');
  src: local('☺'),url('http://sixteencolors.net/static/font/8x16.woff') format('woff'),url('http://sixteencolors.net/static/font/8x16.ttf') format('truetype'),url('http://sixteencolors.net/static/font/8x16.svg#webfontpVS4iJcr') format('svg');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: '8x16';
}
hr{
  height:8px;
  background-color:#555;
  border:0;
  margin: 24px 0px 16px 0px;
}
</style>

<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.3/es5-shim.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.18.0/es6-shim.min.js"></script>
<script src="http://fb.me/react-0.12.0-rc1.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0-rc1.js"></script>

<div id="SixteenColorsPackRoot"></div>

<script type="text/jsx;harmony=true">

var jsonp = {

  UID: 0,

  get(url, callback, callbackId){
    var sibling = document.getElementsByTagName('script')[0];
    var script = document.createElement('script');
    if (jsonp.UID == null) jsonp.UID = 0;
    if (!callbackId) callbackId = 'jsonp_' + (++ jsonp.UID);
    var done = (error, data) => {
      if (done == null) return;
      script.parentNode.removeChild(script);
      script = sibling = null;
      done = null;
      window[callbackId] = null;
      var _callback = callback;
      callback = null;
      _callback(error, data);
    };
    window[callbackId] = data => done(null, data);
    script.src = url + (url.indexOf('?') == -1 ? '?' : '&') + 'callback=' + callbackId;
    console.log(script.src);
    script.onerror = done;
    script.onload = done;
    sibling.parentNode.insertBefore(script, sibling);
  },

  getPromise(url){
    return new Promise(function(resolve, reject) {
      jsonp.get(url, function(error, data){
        if (error) {
          reject(error);
          return;
        }
        resolve(data);
      });
    });
  },
};

var SixteenColorsPack = React.createClass({
  // mixins: [],
  // statics: {},

  propTypes: {
    base: React.PropTypes.string,
    pack: React.PropTypes.string.isRequired,
  },
  getDefaultProps() {
    return {
      base: 'http://sixteencolors.net',
    };
  },
  getInitialState() {
    return {
      pack: null,
    };
  },
  
  componentWillMount() {
    jsonp.getPromise('http://api.sixteencolors.net/v0/pack/' + this.props.pack)
      .then(pack => {
        pack.files = pack.files.sort((a,b) => {
          a = a.filename.toUpperCase();
          b = b.filename.toUpperCase();
          if (a == 'file_id.diz') return -Infinity;
          if (b == 'file_id.diz') return Infinity;
          return a>b ? 1 : a==b ? 0 : -1;
        });
        this.setState({pack});
      })
      .catch(error => this.setState({error}))
    ;
  },
  // componentDidMount() {},
  // componentWillUnmount() {},

  render() {
    return (
      <div onClick={toggleFullScreen} onDoubleClick={autoScroll}>
        {this.state.pack && this.state.pack.files.map(file => (
          <div>
            <p>{file.filename}</p>
            <img src={this.props.base + file.fullsize}/>
            <hr/>
          </div>
        ))}
      </div>
    );
  },

  // componentWillReceiveProps(nextProps) {},
  // shouldComponentUpdate(nextProps, nextState) {
  //   return true;
  // },
  // componentWillUpdate(nextProps, nextState) {},
  // componentDidUpdate(prevProps, prevState) {},
});

function autoScroll(){
  requestAnimationFrame
}

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

React.render(
  <div>
    <SixteenColorsPack pack="blocktronics_1010" />
    <SixteenColorsPack pack="blocktronics_blockalypse" />
    <SixteenColorsPack pack="blocktronics_wtf4" />
    <SixteenColorsPack pack="blocktronics_1980" />
  </div>,
  document.getElementById('SixteenColorsPackRoot')
);

</script>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"result"}

http://result.dabblet.com/gist/5da0c1a18cd77c86db11/33f6b4c66e7d2db4fad6d5d78b4805154b16aae8