Some fun with Pico-8  

Here is an animation I’ve done just to have fun with Pico-8.

And here’s the code:

GraphQL server example  

The goal of this exercise was for me to investigate/discover how hard/easy it would be to start using GraphQL.

Lets create an Apollo Server with NodeJS so we can play with GraphQL. The server will distribute data retrieved from the nintendo eshop (cause why not ¯\_(ツ)_/¯).

Quick setup

Create the project

mkdir graphql-server-example
cd graphql-server-example

Initialise NodeJS

npm init --yes

Add the dependencies

npm install apollo-server-express express

Create the base code

Copy/paste the following into an index.js file.

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
 
const typeDefs = gql`
  type Query {
    hello: String
  }
`;
 
const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
};
 
const server = new ApolloServer({ typeDefs, resolvers });
 
const app = express();
server.applyMiddleware({ app });
 
app.listen({ port: 3006 }, () =>
  console.log('Now browse to http://localhost:3006' + server.graphqlPath)
);

Run node index.js and you’ll have access to GraphQL Playground at http://localhost:3006/graphql

Lets play

Lets define our types now. So we need to add a type to our typeDefs:

type Game {
  id: String
  name: String
  releaseDate: String
}

And we need to change our Query to return a list of games:

type Query {
  games: [Game]!
}

For this to work we obviously need to do a http request in order to get all titles. That’s when we need to define a datasource (doc here).

First install apollo-datasource-rest:

npm install apollo-datasource-rest

const { RESTDataSource } = require('apollo-datasource-rest');

class EshopAPI extends RESTDataSource {
  constructor() {
    super();
    this.baseURL = 'https://ec.nintendo.com/api/GB/en/';
  }

  async getAllGames() {
    const { contents } = await this.get('search/sales', {
      "count": 10,
      "offset": 0,
    });
    return Array.isArray(contents) ? contents.map(game => ({
      id: game.id || 0,
      name: game.formal_name,
      releaseDate: game.release_date_on_eshop
    })) : [];
  }
}

module.exports = EshopAPI;

Now go back to the main file to specify it in the ApolloServer constructor:

const dataSources = () => ({ eshopAPI: new EshopAPI() });
const server = new ApolloServer({ typeDefs, resolvers, dataSources });

And now you can get the list of games:

If you want more GraphQL example, look at the SpaceX tutorial which uses a REST API and a SqlLite DB.

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.