JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rot.js/0.6.0/rot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<script src="https://threejs.org/examples/js/utils/BufferGeometryUtils.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

CSS

body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

JavaScript

var Dungeon;

( function ( Dungeon ) {
    "use strict";

    var glyph = ( function () {

        function Glyph ( character , foreground , background ) {

            this._character = character || ' ';
            this._foreground = foreground || 'white';
            this._background = background || 'black';

        }

        Glyph.prototype.getCharacter = function ( ) {

            return this._character;

        };

        Glyph.prototype.getForeground = function ( ) {

            return this._foreground;

        };

        Glyph.prototype.getBackground = function ( ) {

            return this._background;

        };

        return Glyph;

    } () );

    Dungeon.Glyph = glyph;

    var tile = ( function () {

        function Tile ( glyph ) {

            this._glyph = glyph;

        }

        Tile.prototype.getGlyph = function ( ) {

            return this._glyph;

        };

        Tile.nullTile = new Tile ( new Dungeon.Glyph ( ) );
        Tile.floorTile = new Tile ( new Dungeon.Glyph ( '.' ) );
        Tile.wallTile = new Tile ( new Dungeon.Glyph ( '#' ) );

        return Tile;

    } () );

    Dungeon.Tile = tile;

    var map = ( function () {

        function Map ( tiles ) {

            this._tiles = tiles;
            this._width = tiles.length;
            this._height = tiles[0].length;

        }

        Map.prototype.getWidth = function ( ) {

            return this._width;

        };

        Map.prototype.getHeight = function ( ) {

            return this._height;

        };

        Map.prototype.getTile = function ( x , y ) {

            if ( x < 0 || x >= this._width || y < 0 || y >= this._height ) {

                return Dungeon.Tile.nullTile;

            } else {

                return this._tiles[x][y] || Dungeon.Tile.nullTile;

            }

        };

        return Map;

    } () );

    Dungeon.Map = map;

} ( Dungeon || ( Dungeon = { } ) ) );


/*global THREE, ROT, Dungeon, THREEx, dat*/

// standard...