Here is an animation I’ve done just to have fun with Pico-8.
And here’s the code:
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 ¯\_(ツ)_/¯
).
mkdir graphql-server-example
cd graphql-server-example
npm init --yes
npm install apollo-server-express express
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 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.
First here is the repository on github and the demo page.
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.
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>
);
}
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.
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
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
I’ve ported the tic-tac-toe example from the react-js documentation to haxe. You can find it here.
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:
And build the app.