Ayman Bagabas


Contact me

© 2020 Ayman Bagabas

Minesweeper using HTML5

13 May 2018 0 Comments
Table of Contents

Obviously, everyone was born before the year 2000 knows the famous classic game ‘Minesweeper’. To me, I knew this game when I was little at the time where Windows XP was ruling everywhere. It is funny because at that time I did not know exactly how the game is played. That time the game was some kind of a luck game to me where you try to eliminate all the squares except the ones with mines until you either win or lose :laughing:.

Until recently, a friend pointed out that they saw a video of a guy who made a fully perfect AI to solve the game. I liked the idea so I decided to make one. I started by learning how the game works and it turned out to be very simple. There is a certain number of mines in the game and the player has to discover where these mines are to win the game. Every square has a weight that shows how many mines they are within the surrounding 8 squares of that particular square. If the weight was zero the game will reveal all the surrounding squares except the ones with the mines, otherwise, it will reveal the square itself. Although things did not go very well with the idea, I ended up making the game only.

How does it work?

With the help of HTML5 canvas element, you can draw geometric objects. We can achieve this dynamically using JavaScript. First, we create a canvas element in the page:

<canvas id="example" width="500" height="500">Any text here will get displayed if the browser does not support HTML5 canvas</canvas>

Then we use JavaScript to create objects and control their properties:

var canvas = document.getElementById("example");
var context = canvas.getContext("2d");
context.fillStyle = 'red';
context.fillRect(0, 0, 10, 10);

This will create a square with side equals to 10 and a position of (0, 0). Easy and simple.


Coming from an Object-Oriented Programming mentality, I wanted the ability to create classes just because I am used to it this way :smiley:. I was surprised when I knew that you can mimic creating classes in JavaScript .

I started by questioning what attributes each square has? And I came up with these: isMine, isFlagged, isDown, x, y, and weight. isMine tells if a square is a mine. isFlagged is when a square is being flagged or marked. isDown if a square is revealed. x and y hold the location in the game. weight is a number greater than zero where it holds how many mines within its surrounding squares. With these attributes I came with this JS class:

class square {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.isDown = false;
        this.isMine = false;
        this.isDown = false;
        this.weight = 0;
    get x() { return this._x; }
    set x(value) { this._x = value; }
    get y() { return this._y; }
    set y(value) { this._y = value; }
    get weight() { return this._weight; }
    set weight(value) { this._weight = value; }
    get isDown() { return this._isDown; }
    set isDown(value) {
        this._isDown = value;
        if (this.isMine) {
            end = true;
    get isMine() { return this._isMine; }
    set isMine(value) { this._isMine = value; }
    get isFlagged() { return this._isFlagged; }
    set isFlagged(value) {
        this._isFlagged = value;
        if (value)
            numberofmines = (numberofmines <= 0) ? 0: numberofmines - 1;

The game does not have a loop, it contains two main functions. The first one is called to initialize the game environment like setting mouse event handler. Here is where all the magic happens, whenever the user clicks the first click the timer starts and it passes the click to the game. If it was inside the game frame where the squares are located it will register a click for that square. Otherwise, it will start a new game. Which is the second function, the previous function is only called once. This one is called to clear all the previous data in the game and create a start a new game. Obviously, this is done with the help of other functions to make it a little more organized.

Source code

The source code is available at JSMinesweeper or you can try it out here .

Leave a Comment

Sync Google calendar using Vdirsyncer and Orage

08 Apr 2018 0 Comments
Table of Contents

For a long time I wanted to have all my calendars and todo lists synchronized with my current desktop setup. Currently, I am using XFCE software, like Thunar, with Openbox to manage everyday stuff. Yes, I know with Gnome DE you can achieve that easily, but Gnome has a HUGE package dependencies. XFCE on the other hand is very light-weight and simple.

The other wonderful piece of software is vdirsyncer. It supports CalDAV protocol which is also supported by Google calendar. With simple configurations we can synchronize Google calendar locally. Then we can use Orage to view/modify our calendar files. Orage is a time-managing application that can manage your calendars, appointments, alarms, and todo lists.

First, make sure we have all the needed packages. Orage and Vdirsyncer should exist in most distros official repositories. In Archlinux, the installation can be done with sudo pacman -S vdirsyncer orage. It would be similar for other distros as well. Ubuntu/Debian sudo apt-get install vdirsyncer orage.


Here you can see how orage highlights dates with events attached to them. For example, April 1st is Easter Sundy. That was pulled from my Google United States holidays calendar.


Vdirsyncer setup

First, we start by configuring Vdirsyncer to sync Google calendars. My configuration file looks like this:

status_path = "~/.vdirsyncer/status/"

[pair calendar]
a = "google_calendar"
b = "local_calendar"
collections = ["from a", "from b"]
metadata = ["color"]

[storage local_calendar]
type = "singlefile"
path = "~/.calendars/%s.ics"

[storage google_calendar]
type = "google_calendar"
token_file = "~/.vdirsyncer/google_token"
client_id = "CLIENT_ID"
client_secret = "CLIENT_SECRET"

Here, we specified were the status for Vdirsyncer should be located. Mine is located under ~/.vdirsyncer/status. Then we tell Vdirsyncer to create a pair of calendars for bidirectional syncing, where a is the actual Google calendar, and b is the local files pulled from the cloud. Then we define the two calendars as storages.

  • storage local_calendar, here we specify what the type of this storage which is “singlefile” meaning Vdirsyncer would have a single file for each calendar that you have.
  • storage google_calendar, here where it gets interested. The type here is “google_calendar” which means use Google cloud to fetch the calendars. With this type you have to specify a token file, client id, and client secret. All of these are essential for synchronizing.

Now we have to enable CalDAV API for our Google account.

  1. Go here and create a new project. This is required so that you can enable CalDAV API for that project.
  2. Click on “Enable APIs and Services” or on the left side click on Library, then search for “CalDAV” and enable it.
  3. Now we need to get our credentials, client secret and id, for the API. Click on “create credentials” then choose “CalDAV API” for your API and select “Other” for Application type. Click next and choose a name e.g. “vdirsyncer” then click continue.
  4. You will get your client id, stick it into your configuration file.
  5. We still missing the client secret. Click done after you get the client id then click on the credentials name and get the client secret from there.

Now we have Vdirsyncer config setup, we need to authorize it to access our Google account.

$ vdirsyncer discover calendar

This will try to authorize the pair ‘calendar’ defined in the config file. A browser window or a link should pop up to complete the authorization and that would create the access token defined in the config. Now we can synchronize Google calendar by

$ vdirsyncer sync

Read more about Vdirsyncer.

Orage setup

Now we need to tell Orage where are the calendar ics files so that we can view them in Orage. Run Orage then go to File -> Exchange data, and add all the pulled ics files from ~/.calendar. Notice the read only check mark, if you want to modify your Google calendar you have to make sure to uncheck that when you add your calendar file which is the same as your Google account name “[email protected]”. You should see all your calendars events highlighted within Orage. You can play with Orage settings to hide the window borders and tray icon. When double click on a date an events window should pop up then you can add events, todo, etc, but make sure you select your Google account file from the top bar in order to have it synchronized.

Using Cron to synchronize periodically

You can add a cron to automate the sync command. crontab -e

@hourly vdirsyncer sync

This will sync calendars every hour. Make sure you have a cron service running. I am using “cronie” for my setup and with Archlinux, I had to enable the cronie service for that to happen.

$ sudo systemctl enable cronie
$ sudo systemctl start cronie

Leave a Comment

Dropbox client on Ubuntu server 16.04

06 Aug 2017 0 Comments

Dropbox, in my opinion, is the best cloud service available. I wanted to have one shared dropbox folder that is accessible from all my virtual machines running on the server. I am using a ZFS drive as a storage drive, the dropbox folder is located in the ZFS drive. Dropbox service is running as a normal user, not the root, and the server is using systemd to start the service after booting the system.

First, you have to have the libxxf86vm library, in Ubuntu 16.04 you can install it using sudo apt install libxxf86vm1 then download Dropbox.

wget -O dropbox-x86_64.tar.gz https://www.dropbox.com/download?plat=lnx.x86_64

and if you are running a 32-bit system use:

wget -O dropbox-x86.tar.gz https://www.dropbox.com/download?plat=lnx.x86

Now choose where you want to put Dropbox binaries and extract the files, in my case I used /opt/dropbox

sudo mkdir -p /opt/dropbox
sudo tar xzfv dropbox-x86_64.tar.gz --strip 1 -C /opt/dropbox

and because we are using a /opt/dropbox we have to link it to ~/.dropbox-dist

ln -s /opt/dropbox ~/.dropbox-dist

Run dropbox as a normal user /opt/dropbox/dropboxd this will give you a link to login to your account or if you are running a GUI it will open your default browser with a link to authenticate your account. Ctrl-c to stop dropboxd. As I said earlier, I want to put my Dropbox files on my storage drive. In my case I am using a ZFS drive located at /pool/shared/ I moved the Dropbox folder from my home folder to /pool/shared/Dropbox then linked the Dropbox folder to my home folder.

mv ~/Dropbox /pool/shared/Dropbox
ln -s /pool/shared/Dropbox ~/Dropbox

Now if you want to control dropbox from the command-line you can use this tool

wget -O dropbox-cli.py https://www.dropbox.com/download?dl=packages/dropbox.py

You can move it to your PATH for easy access. You have to have ~/.dropbox-dist, ~/.dropbox, and ~/Dropbox to use this tool. You can start/stop and check the status of the Dropbox service. The ~/.dropbox folder is created after you start dropboxd. For systemd to autostart Dropbox service simply create a new service at /etc/systemd/system/[email protected] with these configurations:

After=local-fs.target network.target

ExecStart=/opt/dropbox/dropboxd -p /home/%I/.dropbox/dropbox.pid
ExecReload=/bin/kill -HUP $MAINPID


This is basically a systemd service that can control Dropbox daemon from command-line. You can enable/start Dropbox from systemd sudo systemctl start [email protected]$USER.service or if you want to enable it to start on boot sudo systemctl enable [email protected]$USER.service

Leave a Comment

What is Jekyll?

09 Jun 2017 0 Comments

Jekyll is a static website builder, it assembeles and combines multiple pages to form one unified HTML page. Jekyll uses YAML language to organize the structure of the page. Markdown language, which is a text-to-HTML converter, makes webpages easy to write and adapt.

Jekyll is writen in Ruby and can be installed using gem. On a Linux machine that already has Ruby installed, Jekyll can be installed as the following:

gem install jekyll bundler
jekyll new my-awesome-site
cd my-awesome-site
bundle exec jekyll serve

Now you can visualize the page using http://localhost:4000

Leave a Comment