Simple calendar component for React  

First here is the repository on github and the demo page.

Why a new component?

Quite simple answer, I needed a calendar that could be customized easily for multiple small projects.

This component handles the display of the calendar, and you can give it a custom element for the cells and/or the title (meaning name of the days). You could also don’t use this custom component and just display the date (for a date picker for example - see below).

The main callback is onDateSelected which will be called - as you would guess - when a cell has been clicked with the date as parameter, so you can do anything, like displaying a modal to create lets say an event.

More information on the documentation.

Quick demo

function DatePicker() {
	var date = new Date('08/05/2018');
	return (
		<div>
			<div>
				{/* you could add buttons to navigate between months */}
				<h1>August</h1>
			</div>
			<Calendar
				className="minimal-calendar"
				currentMonth={date}
				onDateSelected={date => console.log(date)}
				cellContainerStyle=
				showMonthName={false}
				titleComponent={CustomTitleCell}
			/>
		</div>
	);
}

Create a node module with Haxe  

In this post, I’m not going to talk about npm (except for the initialisation part), but about how to code your module with Haxe.

Project setup

First thing to do is to create our npm project.

npm init --yes

--yes because I’m lazy and I don’t want to enter the default value for each prompt.

My default package.json file looks like:

{
  "name": "test-node-package",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "build": "haxe build.hxml",
    "dev": "npm run build -- -debug"
  },
  "keywords": [],
  "author": "RevoluGame",
  "license": "ISC",
  "files": ["dist"]
}

The files parameter will tell npm which file/directory to import while installing the module. I only specify the dist directory, because for a production usage, the Haxe sources are not needed. But still, if you want to publish everything, just forget about the files parameter.

My project looks like:

- test-node-package
  - dist
    - index.js
  - src
    - Main.hx
  - package.json
  - build.hxml

The Haxe part

Now that we have our project setup, we can start working on our module.

Let’s say we want to do the following in another project:

var test = require('test-node-package');
test.foo("world");

In Haxe you will have to:

class Main
{
    @:expose("foo")
    public static function foo(bar: String)
    {
        trace('Hello $bar');
    }

    public static function main() {}
}

The @expose metadata will make your method available in Javascript with the name you specified (in our case: foo).

You will probably need to use the nodejs lib, so don’t forget to add it in your build.hxml:

-lib hxnodejs

Haxe React - tic tac toe example  

I’ve ported the tic-tac-toe example from the react-js documentation to haxe. You can find it here.

What is different:

I’ve changed the event handling in order to use msignal instead of passing a function down to the right component.

I’ve created an History/HistoryItem component to get a cleaner code.

To test it, just checkout the repo, install the dependancies:

• haxelib install react
• haxelib install msignal

And build the app.

Pico8 tools for haxe  

I’m prototyping a lot for the Pico-8 console with haxe (using the hxpico8 library), so in order to help my productivity, I’ve built some tools.

What for?

The first aim was to initialize a new project quickly so you don’t lose time and you can start coding right away.

Once the project is built, the tool will take care of the compilation/deployment. Because I’m using haxe, I can’t code directly into the pico8 console and test right away. So the tool will do it for you by:

• compiling your code
• backing up the pico8 file used by the console
• copying the code (the one generated by the hxpico8 lib) into your p8 file and keeping all graphics/sounds…
• copying the file to where the console can read it.

Once that’s done, you just have to reload your game in the Pico8 console, and test it.

For more information, please take a look at the github repository.

Pico-8 debut  

Quick post to help you start with pico-8 and haxe.

What is Pico-8 ?

If you never heard of it:

PICO-8 is a fantasy console for making, sharing and playing tiny games and other computer programs. When you turn it on, the machine greets you with a shell for typing in Lua commands and provides simple built-in tools for creating your own cartridges.

For more info, please check the official website.

How to use haxe for pico-8 ?

The easiest way to use haxe, is to use YellowAfterlife’s library in order to build lua code. Here is the Github repository.

I’ve created an empty project (as a gist) which you can find below :