zouhir

html, body {
	font: 14px 'Helvetica Neue', arial, sans-serif;
	font-weight: 400;
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

zouhir

//unistore connector
@connect(
  ["level", "tiles"],
  actions
)
export default class GameRoute extends Component {
  componentDidMount() {
    let level = this.props.matches.level
    // actions has a mathod called startGame
    this.props.startGame( {level} )

zouhir

Node.js

Get the current version from here

Git

Download Git from here

Git desktop client (optional)

You can get a client to work with Git more easily:

• https://desktop.github.com/
• https://www.sourcetreeapp.com/

zouhir

# Maaatch Release Notes
- v 1.0.0 first major
- https://maaatch.games

### Features
- No grid lock, flip as fast as you can, thanks @kennethrohde.
- Mute sounds button, thanks @kennethrohde.
- Timer starts when flipping the first tile, not when game is loaded, thanks @jaffathecake.
- Better offline support via offline-plugin, thanks @nekrtemplar.
- Better font caching and game font fallback, thanks @patrickkettner.

zouhir

import Preact from 'preact'
// props: already existing variable contains props from host dom
// hostElement: is the div we want to render in

Preact.render(Preact.h(HelloWidget, props), hostElement) //TADA! 🎉

zouhir

import Preact from 'preact'
let props = { name: "Zouhir" }
Preact.h(HelloWidget, props) // this is equal to: <HelloWidget {...props} />

zouhir

let script = hostElement.querySelector("script");
let scriptType = script.hasAttribute("type") || null;
let props = {};
if (scriptType && scriptType === "text/props") {
  try {
    props = JSON.parse(script.textContent); // logs { name: "Zouhir"}
  } catch (e) {
    throw new Error(e);
  }
}

zouhir

<!-- container with specific styles -->
<div class="container">
  <script type="text/props">
    {
      "name": "Zouhir"
    }
  </script>
  <script async src="cdn.../hello-widget.js"> </script>
</div>

zouhir

<!-- container with specific styles -->
<div class="container">
  <div class="loading-animation">
    <!-- habitat will clear this animation when widget will mount -->
    Loading...
  </div>
  <script async src="cdn.../hello-widget.js"> </script>
</div>

zouhir

helloWidgetHabitat.render({
  inline: true,
  clean: true,
});