{"id":17283720,"url":"https://github.com/prettymuchbryce/roguelikeboard","last_synced_at":"2025-04-14T10:20:52.017Z","repository":{"id":66163094,"uuid":"32841302","full_name":"prettymuchbryce/roguelikeboard","owner":"prettymuchbryce","description":"roguelikeboard.jsx is a simple react.js component for rendering ASCII inspired roguelike boards on the web","archived":false,"fork":false,"pushed_at":"2018-01-29T22:21:02.000Z","size":539,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T16:57:02.884Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prettymuchbryce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-03-25T03:51:23.000Z","updated_at":"2024-11-03T09:15:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"adceabd9-a02e-4784-b2fb-a8f3b60a585a","html_url":"https://github.com/prettymuchbryce/roguelikeboard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prettymuchbryce%2Froguelikeboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prettymuchbryce%2Froguelikeboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prettymuchbryce%2Froguelikeboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prettymuchbryce%2Froguelikeboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prettymuchbryce","download_url":"https://codeload.github.com/prettymuchbryce/roguelikeboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248860005,"owners_count":21173343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T09:52:03.349Z","updated_at":"2025-04-14T10:20:51.997Z","avatar_url":"https://github.com/prettymuchbryce.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[\u003cimg src=\"http://prettymuchbryce.s3.amazonaws.com/rlblogo.png\"\u003e](http://bryce.is/building/roguelikeboard)\n\n#### Summary\nroguelikeboard.jsx is a simple react.js component for rendering ASCII inspired roguelike boards on the web. A roguelike is a style of computer game usually characterized by procedural generation, permanent death, and ASCII graphics. If you want to learn more about roguelikes, visit [wikipedia](http://en.wikipedia.org/wiki/Roguelike).\n\n#### Installation\nFirst grab the source via `npm install roguelikeboard`, or download the project from github and snag `src/roguelikeboard.jsx`\n\nNext, include `roguelikeboard.jsx` into your project. It supports require.js, browserify, or no dependency management system. (i.e. React should be a global)\n\n### Setup\nIn your parent component you should add the board to your `render()` method, and maintain a `ref` to it.\n```\nvar RoguelikeBoard = require('roguelikeboard');\nReact.createClass({\n        render: function() {\n                return (\n                    \u003cRoguelikeBoard ref=\"roguelikeboard\" /\u003e\n                )\n        }\n})\n```\n### API\nThere are a few different operations you can perform on the board. Each will trigger a re-render (for now).\n```\nroguelikeboard.setViewportSize(widthInTiles, heightInTiles) [required]\nroguelikeboard.setTileMap(2dArrayOfKeys) [required]\nroguelikeboard.setCSSClassForTile(key, cssClassName)\nroguelikeboard.setCSSClassForObject(key, cassClassName)\nroguelikeboard.setObjects(array)\nroguelikeboard.setCameraPosition(x, y)\n```\n\nBefore jumping into details, there are a couple of concepts to explain.\n\n#### TileMaps vs Objects\nThe tilemap is the \"level\" of your board. It is the background. It is assumed to be a 2D array, e.g.\n```\nvar map = [[0,0,0],\n           [0,1,0],\n           [0,0,0]];\n```\n\nObjects are the players, items, monsters, in your game. It is assumed to be an array with objects that contain a `x` `y` and `type` properties.\n```\nvar objects = [{x: 0, y: 0, type: 'player'}];\n```\nWe could then call `setObjects(objects)`, and `setTileMap(map)` on our ref to render.\n\n#### Symbols and colors\nTo render symbols and colors we just use regular css. In order to do this we need to associate our tiles, and objects with css classes. We can do this with `setCSSClassForObject('player', 'symbol-player')` and `setCSSClassForTile(0, 'symbol-grass')`.\n\nNow we simply create some CSS to style these items.\n\n```\n.symbol-tree {\n    background-color: green;\n    color: green;\n}\n.symbol-tree:after {\n    content: \" \";\n}\n.symbol-grass {\n    background-color: green;\n    color: #ffffff;\n}\n.symbol-grass:after {\n    content: \"@\";\n}\n```\n\nYou can also style `.rb-renderer` with styles that should affect the entire board such as a font. Speaking of font, make sure you use a fixed-width font, or things will get pretty ugly. I've used `Courier New` in the example as it is a common fixed-width font included in popular operating systems.\n\n#### Running the demo\n```\nnpm install\nmake rundemo\nhttp://127.0.0.1:3006\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprettymuchbryce%2Froguelikeboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprettymuchbryce%2Froguelikeboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprettymuchbryce%2Froguelikeboard/lists"}