Dragon Heist – Session #1

This series of posts will summarise the D&D campaign that I started running in Stockholm. This campaign is based on the published adventure Waterdeep: Dragon Heist (spoilers)!

Image result for waterdeep dragonheist
Cover of the Waterdeep: Dragon Heist book

Meet the party!

  • Uthemar Aelar Margaster (a.k.a Sev) / Male High Elf / Rogue (70 years old).
  • Xanaphia Dara Sylvaranth / Female Wood Elf / Druid (303 years old).
  • Morgran Foamtankard / Male Hill Dwarf / Monk (120 years old).

Uthemar is a teenager from the Margasters, a noble family from Waterdeep. His family house is located in the North Ward. Uthemar has seven siblings, but he doesn’t get along very well with them. Over the time, he has grown tired of all those family ceremonies and dinners with other noble families (to the disappointment of his father). Fortunately, he found a way to escape his daily routine: Sev often sneaks out of his bedroom via the window and adventures in the streets. For this purpose, he has created a second identity and usually introduces himself as Sev.

 Xanaphia  is the youngest of a family of four wood-elves. She works for the Margaster family as Guardian of the garden. She took residence in a tree and literally lives in the family garden. From this position, it didn’t took her long to notice the sneaky expeditions of the young Uthemar. Although she chose not to denounce him to his parents, she feels responsible to keep an eye on him and sometimes accompany him out in the streets of Waterdeep.

Morgran is a former war veteran. When his life as an accomplished soldier started to feel a little too dull, he decided to find shelter in a monastery to try another path in life. The teachings of the monastery are a little unclear to him. However, he did become a little bit stronger in martial arts (and much stronger at drinking beer!). This new learnings (especially the drinking part) make members of his clan (Foamtankard) proud of him.

Yet another day at the Yawning Portal

Once again Uthemar decided to sneak out of the family domain. This time he had to play sick to avoid another boring brunch invitation with the whole family. While moving through the corridors, Uthemar heard from a servant that somebody had brought an uncommon creature in the city (an elephant). The beast was now parked in the street near the Yawning Portal, an iconing tavern in the Dock ward featuring a massive well in the center of the main room. Xana saw Uthemar once again climbing down by the window. She took him through to a secret passage she maintains hidden between bushes. The two of them made their way to the Yawning Portal.

Image result for yawning portal
The Yawning Portal

Arriving at the Yawning Portal, the elephant was drawing a lot of attention. Xana went closer and successfully appeased it. Meanwhile Sev entered the tavern and started catching up with her female half-orc friend Yagra. As Sev went out to find Xana, the group saw five individuals in black outfits entering the tavern. A few seconds later, a fight broke. Yagra was being beaten down by the newcomers. Sev decided that this was the perfect opportunity to search the pockets of people in the audience…

The brawl was interrupted by a growling sound coming out from the central well. People started screaming and running out of the place, as a TROLL came out of the well! The bartender Durnan took out a massive sword from behind the counter and charged the monster. Xana and Sev joined the fight. A group of stirges attacked the group and went back sucking the troll’s blood after having tasted a bit of Sev. The troll was managed without too much trouble.

Image result for volothamp geddarm
Volothamp Geddarm

Xana and Sev’s performance in the fight brought the attention of Volothamp Geddarm, who introduced himself as a successful author and researcher. Volo went to find Sev and said that he was looking for help. His friend Floon had been missing since last night. The last time he was sawn was at another tavern called the Skewered Dragon. Volo promised 100 dragons (gold pieces in Waterdeep) as a reward to each adventurer who would take part in this quest. Sev accepted the quest without even telling Xana about it. He also invited his friend Morgran to join the party.

Looking for Floon at the Skewered Dragon

The group decided to investigate at the Skewered Dragon. On their way there, they passed a street that was blocked by members of the City Watch. It appeared that a fight had occurred between  members of two factions. Xana questioned the guards but they would not give any more information. “Get out of the way”! Sev entered a shop nearby (the Xoblob Shop). The only thing he found was a weird gnome trying to sell him some random purple trinkets for an outrageously expensive price. Morgran asked a passerby and learnt that a conflict had been escalating recently between the Black Network and another group.

At the Skewered Dragon, the group learnt from the bartender and some patrons that Floon stayed later that night, after Volo had left. He was accompanied by Lord Renaer Neverember (the son of the previous Open Lord of Waterdeep, Lord Degault Neverember). When the two of them went out, a group of individuals (probably from the Black Network) followed them. Nobody knew what happened after this. However the bartender told the group that these individuals were often seen hanging around a warehouse in Candle Line, a shady alley in the Dock ward. “Look for the symbol of a snake on the door”, he said.

How not to sneak into the warehouse…

The warehouse had to be explored. But how to make sure that nobody would be suspicious when a random group would approach it in this silent alley? The group decided to play drunkards and approach the place while making as much noise as possible. In Candle Lane, the warehouse was easy to spot. It was surrounded by a fence. Xana had a closer look at the portal which opened instantaneously as soon as she put some weight on it. Although the windows had been darkened with some black paint, Xana noticed some movement behind the window (nat 20!) and under the door slit. Sev went to the main door to try and pick up the lock. At the same time Morgran approached the window and used his quarterstaff to try and quietly break it open and… (nat 1!) Morgran misjudged his strength and shattered the window, his weapon falling into the warehouse. He immediately jumped in to get his weapon back and was ambushed by a bird-like creature. Kenkus!

Image result for dragon heist zhentarim warehouse

Fighting the kenkus

The kenkus were (not surprisingly!) expecting some visit. The group quickly defeated the first one but three others hidden behind boxes started firing at them with their shortbows. Sev created the illusion of a box and hid within it to avoid the next volley of arrows. Unfortunately the kenkus saw him casting the spell and got lucky enough to hit Sev while shooting blindly at the fake wooden container. Sev felt unconscious. The fight was tight and the situation was definitely not under control. Fortunately Morgran turned into a killing machine and got rid of another kenku, before throwing a dart right into the butt of a third one who started shooting arrows further down the warehouse. Xana used her magic to bring Sev back on his feet. Meanwhile the two remaining kenkus were trying to escape via the main door. One ran away in the streets of Waterdeep, but the party managed to knock out the other one.

Image result for dnd kenku mimicry
Kenku with shortsword and shortbow.

After the fight

The adventurers decided to bring the unconscious kenku back into the warehouse to avoid attracting too much attention. Morgran investigated the second floor and found a note written in an unknown language. The note was written on an orange paper and folded into the shape of a bird. Morgran also took four rapiers with him.

Sev checked a storage closet and found… Lord Renaer Neverember! Renaer was hiding there. He thanked the group for saving his life and shared that he was feeling guilty. According to him, the Zhentarim (also known as the Black Network) had mistaken Floon for him.

Image result for renaer neverember
Lord Renaer Neverember, son of the former Open Lord of Waterdeep (Lord Degault Neverember).

As the group was packing the kenku into a bag to bring it out with them, Captain Staget burst into the warehouse, accompanied by a dozen members of the City Watch. The captain questioned the group. They tried to lie about the content of the bag but the Captain could feel that there was something fishy. The kenku was discovered. Captain Staget advised to leave the scene. For this time, the adventurers would not get into troubles (he still gave them a copy of the Code Legal and warned them about future misbehaviours).

Members of the City Watch

Just as the party was leaving, the kenku started convulsing and started repeating: “The Xanathar sends its regards! Tie up the pretty boy in the back room! Follow the yellow signs in the sewers. No time to loot the place. Just get him to the boss!”

Morgran, Xana, Sev and Renaer made their way to another tavern. On their way, Morgran sold the rapiers to a merchant (for what he believes was a good price!) and used the dragons to buy a healing potion from another store (he tried to seduce the human shop owner and failed big time).

Once at the inn, Renaer explained: “The Zhentarim think that my father had embezzled a large amount of gold while he was Open Lord of Waterdeep, and that he had hid the dragons somewhere in the city. They think that they can find it by using an artefact called the Stone of Golorr, which was in the hands of the Xanathar Guild until recently. But apparently, someone stole it.” When asked if there was any reward for saving his life, Renaer answered that he would be ready to help in the quest of finding Floon.




Playing the guitar – Wish You Were Here

The very first recording of me singing and playing the guitar. I started learning on June 13rd 2019, so this is 10 days in. I love this song and I wish I can play it better in the future.

Recently I found that I wanted to start practicing an artistic activity. It’s a good way to relax and spend time alone without having to think too much. After months of indecision about which instrument to go for, I just went for that old guitar store next to my office and acquired the cheapest acoustic guitar they had. It’s not the best guitar, but it’s perfect to learn and I love it!

Second-hand Yamaha C45. Nylon strings. Made in Indonesia. 95€

Since I don’t know anything about guitar, the plan so far is to go on Youtube and find exercises or song tutorials to follow along. So far I’ve learnt:

  • The basics of music theory (see Paul Davids’ playlist)
  • Some basic fingerpicking exercises (see video from Justin Johnson)
  • Some basic chords from simple songs (see Marty Music channel). To be more precise, I know 8 chords: E, Em, A, Am, G (in 4 different ways), D, C, B7
  • The pentatonic scale. The name sounds cool and I’ve heard it’s useful.
  • Some practice on simple songs like La poupée qui fait nonWish you were here, Boulevard of Broken Dreams, Take Me To Church, Creep. I want to practice more the songs I like the best and record myself, possibly singing as well. I’ve also created a Spotify playlist for songs I’m learning or would like to learn in the future (see guitar wish list).

After 10 days of practice I have to say that this is a lot of fun! Learning lyrics of Wish You Were Here and Take Me To Church has also completely changed the way I listen to songs. Now I really want to understand the songs’ meaning. I also found myself listening to more music and I developed new habits like singing in the shower.

Book review – The Will to Change

The Will to Change: Men, Masculinity, and Love

By Bell Hooks


The Will to Change by Bell Hooks was an important book for me. During the past few months I’ve been reading and thinking a lot about gender equality, feminism, love, sexuality and masculinity. This book helped me tremendously on this path.

The book starts by recognising the existence of male suffering and its sad consequences on society. Hooks provides practical advice to help us men out of this suffering. By doing so, the author becomes a model for her own thesis: in order to end patriarchy and change society for the better, men and women need to work together. Men must be willing to change and learn the art of love, and women must accompany them on this difficult journey.

This review tries to be a summary of The Will to Change, based around six key topics that are logically related to one another.

1. The need to end Patriarchy

The central concept of The Will to Change is patriarchy. Here is Hooks’ definition:

Patriarchy is a political-social system that insists that males are inherently dominating, superior to everything and everyone deemed weak, especially females, and endowed with the right to dominate and rule over the weak and maintain that dominance through various forms of psychological terrorism and violence.

The strength of Hooks’ thinking lies in recognising males as victims of patriarchy:

To indoctrinate boys into the rules of patriarchy, we force them to feel pain and to deny their feelings.

The logical way to stop male pain is then to end patriarchy:

To end male pain, to respond effectively to male crisis, we have to name the problem. We have to both acknowledge that the problem is patriarchy and work to end patriarchy.

Patriarchy is the single most life-threatening social disease assaulting the male body and spirit in our nation.

Ending patriarchy would increase the well being of our society as a whole:

Life has shown me that any time a single male dares to transgress patriarchal boundaries in order to love, the lives of women, men, and children are fundamentally changed for the better.

2. Men’s longing for love and psychic self-mutilation

The following quotes explain how men’s suffering originates from forced acts of “psychic self-mutilation”. This was a hard but instructive read for me as I could easily relate my personal experiences. Hooks knows that we men must first identify and understand our pain in order to address it.

The reality is that men are hurting and that the whole culture responds to them by saying, “Please do not tell us what you feel”.

The first act of violence that patriarchy demands of males is not violence toward women. Instead patriarchy demands of all males that they engage in acts of psychic self-mutilation, that they kill off the emotional parts of themselves.

Asked to give up the true self in order to realise the patriarchal ideal, boys learn self-betrayal early and are rewarded for these acts of soul murder.

When males are required to wear the mask of a false self, their capacity to live fully and freely is severely diminished. They cannot experience joy and they can never truly love.

The truth we do not tell is that men are longing for love.

Forbidden to express their longing for love, men suffer and find shelter in addictions:

Even though they have been socialised to create and maintain false selves, most men remember the true self that once existed. And it is that memory of loss, — coupled with rage at the world, which encouraged the surrender of the self — that engenders depression. This suffering […] leads many men to addiction […].

Men victims of patriarchy develop two common addictions. Personally, I went through both of them for many years, at various level, without being aware of it.

Addiction to work (workaholism)

The following quote about workaholism was quite enlightening for me:

Workaholism is the most common addiction in men because it is usually rewarded and not taken seriously as detrimental to their emotional well-being.

Hooks uses a insights on workaholism borrowed from Zukav and Francis (authors of The Heart of the Soul: Emotional Awareness): 

Zukav and Francis describe workaholism as a flight from emotions: “It is a drug that is as effective as the most powerful anaesthetic… workaholism is a deep sleep. It is a self-induced trance that temporarily keeps painful emotions away from your awareness.”

Hooks explicits the inherent contradiction of workaholism:

If the intention behind the work is to seek recognition and power […] then you are setting yourself apart from others as a way of trying to feel connected to them.

– Dean Ornish, Love and Survival

This thinking on workaholism helped me to validate a recent learning: work should always be part of life, and never life itself.

Addiction to sex

Realising how men’s addiction to sex works and its consequences helped me understand how anger and violence can germinate within men’s mind and end up hurting others (especially women) psychologically and/or physically. On a personal plan, it helped me understand the contradictions I was facing and the mistakes I did when interacting with women in the context of actual or would-be romantic relationships:

Sex, then, becomes for most men a way of self solacing. It is not about connecting to someone else, but rather about releasing their own pain.

Hooks gives an insightful note about how linguistics tells a lot about male’s alienated conception of sex. Quoting Robert Jensen:

To fuck a woman is to have sex with her. To fuck someone in another context… means to hurt or cheat a person. […] That we live in a world in which people continue to use the same word for sex and violence, and then resist the notion that sex is routinely violent and claim to be outraged when sex becomes overtly violent, is testament to the power of patriarchy.

The next quote helped me to better differentiate what I would call healthy or responsible pornography compared to the type of pornography I feel guilty about watching: patriarchal pornography:

Often men use perverse sexual fantasy (particularly the consumption of patriarchal pornography) as a hiding place for depression and grief.

Finally, hooks hints at an alternative way that can be followed by men:

While masses of men continue to use patriarchal sex and pornography to numb themselves, many men are weary of numbing and are trying to find a way to reclaim selfhood.

3. Learning the art of loving

Men are longing for love. But “Men cannot love if they are not taught the art of loving”. But what is love? Hooks gives the following definition:

Working with men who wanted to know love, I have advised them to think about it as a combination of care, commitment, knowledge, responsibility, respect and trust.

Learning the art of loving requires an active attitude by men. Our society must make time for this activity:

Working men must make time to get in touch with their emotional selves if they are to become men of feeling.

In order to know love, men must go beyond the barriers of patriarchy:

Love cannot coexist with domination.

Men need to find an alternative way of thinking and living their sexuality:

Many men fear  learning to love because they cannot imagine a sexuality beyond the patriarchal model.

“In loving sexual intimacy, sexual partners are not interchangeable. They are unique in their histories, aptitudes, struggles, and joys. they know each other and care for each other. […] They use physical intimacy to deepen their emotional intimacy. […] They are committed to growing together.”

– Zukav and Francis

Hooks insists on the fact that men shouldn’t be afraid to engage in the quest for love by fear of not pleasing to women:

Men are on the path to love when they chose to become emotionally aware. […] Women want men to be more emotionally aware.

4. Healing men’s wound by the practice of integrity

Hooks explains that “the practice of intimacy is healing“:

“When we love someone and feel loved by them, somehow along the way our suffering subsides, our deepest wounds begin healing, our hearts start to feel safe enough to be vulnerable and open a little wider. We begin experiencing our own emotions and the feelings of those around us.”

– Dean Ornish, Love and Survival

The following quote shows the responsibility of women partners in helping or preventing men from healing:

“To heal, men must learn to feel again. They must learn to break the silence, to speak the pain. Often men, to speak the pain, first turn to the women in their lives and are refused a hearing.

Hooks uses the concept of integrity to show how men can heal the wound caused by the splitting of their soul:

This wound in the male spirit, caused by learned acts of splitting, disassociation and disconnection, can only be healed by the practice of integrity.

Hooks borrows a definition of integrity:

Integrity means being whole, unbroken, undivided. It describes a person who has united the different parts of his or her personality, so that there is no longer a split in the soul.

– Rabbi Harold Kushner, Living a life that matters

I found the next quote helpful to give us ideas about many areas in which we can try and grow our integrity by working on reducing our obsession with sex:

Obsession with sex can be healed when we reclaim all the essential aspects of the human experience that we have learned to manage without: our affinity for one another, caring connections with people of all ages and backgrounds and genders, sensual enjoyments of our bodies, passionate self-expression, exhilarating desire, tender love for ourselves and for another, vulnerability, help with our difficulties, gentle rest, getting and staying close with may people in many kinds of relationships.

– Bearman, Why Men Are So Obsessed With Sex

This last powerful quote is my favorite:

A culture of healing that empowers males to change is in the making. Healing does not take place in isolation. Men who love and men who long to love know this. We need to stand by them, with open hearts and open arms. We need to stand ready to hold them, offering love that can shelter their wounded spirits as they seek to find their way home, as they exercise the will to change.

5. Feminist masculinity

One of the first revolutionary acts of visionary feminism must be to restore maleness and masculinity as an ethical biological category divorced from the dominator model.

In my understanding, feminist masculinity is the new ideal of maleness that needs to be celebrated so that man can become who they are outside of the patriarchal model.

Here are three quotes about feminist masculinity. I found the first one particularly instructive:

Feminist masculinity presupposes that it is enough for males to be to have value, that they do not have to “do”, to “perform”, to be affirmed and loved.

Feminist masculinity defines strength as one’s capacity to be responsible for self and others.

Feminist masculinity would have as its chief constituents integrity, self-love, emotional awareness, assertiveness, and relational skill, including the capacity to be empathic, autonomous and connected. 

6. Reimagine family as a place for resistance

What can we do as individuals to help undermining the fundamentals of patriarchy? Hooks gives a clear answer:

Since we have yet to end patriarchal culture, our struggles to end domination must begin where we live, in the communities we call home.

If we are to create a culture in which all men can learn to love, we must first reimagine family in all its diverse forms as a place of resistance.

To create the culture that will enable boys to love, we must see the family as having as its primary function the giving of love.

As we’ve seen in part two, boys are assaulted by patriarchy since their youngest age. Hooks gives extra advice about how to help our boys:

Progressive parents who strive to be vigilant about the mass media their boys have access to must constantly intervene and offer teachings to counter the patriarchal pedagogy that is deemed “normal”.

To truly protect and honour the emotional lives of boys we must challenge patriarchal culture. And until that culture changes, we must create the subcultures, the sanctuaries where boys can learn to be who they are uniquely, without being forced to conform to patriarchal masculine visions.

Caring fathers with bold strength and integrity shield the open, tender hearts of their sons, protecting them from patriarchy’s hardhearted assaults. 

Let’s finish this review with this quote full of hope for men ready to exercise the will to change:

Ultimately the men who choose against violence, against death, do so because they want to live fully and well, because they want to know love. These are men who are true heroes, the men whose lives we need to know about, honour, and remember.

Pet project: chessboard UI – Day 5/6/7

Last Sunday I went to a meet-up in Stockholm where developers gather in a Starbucks to work on personal projects. By speaking with a more experienced JS developer I realised that it would be nice to improve and refresh my knowledge about the raw JavaScript language. So I spent most of my programming time going through the official documentation and reading through a nice book, Eloquent Javascript. (The YDKJS series is also good, I read it a year ago but I find Eloquent Javascript to be better organised and more practical). Still, some decent progress has been made on the chess project!

Drag & Drop

Moving pieces via Drag & Drop has been successfully implemented. In react-dnd jargon, I decided to make <Piece /> a DragSource and <Square /> a DragTarget.

When a Piece is dropped on a Square, a MOVE action is dispatched to update the game position:

Screen Shot 2018-08-29 at 18.14.00

Move validation

As you might have noticed in the previous screenshot, the MOVE action is actually only dispatched if the index of the destination square is included in the props legalMoves, which is an array of all legal (valid) index moves.

I decided that those legalMoves would be calculated at the square level and passed to each piece as a prop. This way, we always know where a piece can move before it is actually moved by the user, improving the speed and the overall UX. This will also be helpful if we decide to help the user by highlighting the possible moves when a piece is being dragged.

To do so, the <Square /> container gets the legalMoves from the redux store via a selector, getLegalMoves. But since the moves are specific to a square index, I had to pass the square index to the selector. To be sure that everything was correctly memoized, I followed ideas from this article:  Computing Derived Data.

Screen Shot 2018-08-29 at 18.25.28.png
The getLegalMoves selector takes the square index as argument

Then the fun began with writing the logic of the findLegalMoves function. After quite a few Jest tests and calculations, the basic chess rules have been implemented. The code of the chess logic is not completely DRY for now: it would be good to refactor some parts. But at least it is tested, which will facilitates a lot the implementation of more advanced chess rules and the refactoring work.

Screen Shot 2018-08-29 at 18.01.00.png
All green!

There is one part of the code that I was quite satisfied with: the function to find the valid queen moves reuses the functions to find bishop and rook moves. This represents nicely the fact that a queen in chess has the combined abilities of a bishop and a rook:

Screen Shot 2018-08-29 at 18.29.33

Live demo

I deployed a demo of the app on Heroku with this handy buildpack. Feel free to try it out!

Screen Shot 2018-08-29 at 18.36.41

Next steps

I might slow down on this project to continue reading Eloquent Javascript and go through the codebase of my former project (ChineseMe) to prepare some job interviews.

Still, there are some simple ways to improve this app:

  • Complete the chess logic
  • Add basic user actions (start a new game, go to previous / next move)

I’m not that far from completing all the TODOs to achieve the simple vision I had for this pet app. I’ll make an update in the future when significant progress is done. Cheers!

Pet project: chessboard UI – Day 4

Today was a short programming session. The objective was to move pieces on the board by dispatching MOVE actions.

Handle MOVE actions in the game reducer

This is the first implementation of a move. I update the position as well as the fullMoveNumber. Note that I use a function called calculateNextPosition() to find the next position based on the origin (from) and destination (to) squares.

Screen Shot 2018-08-25 at 11.55.13

The calculateNextPosition() function was not existing yet. So I wrote a test for it:

Screen Shot 2018-08-25 at 11.53.44

Thanks to the two util functions developed yesterday (positionToArrayOfPieces() and arrayOfPiecesToPosition()), making this test pass wasn’t too difficult:

Screen Shot 2018-08-25 at 11.54.02

And with that in place, all the tests are now passing!

Screen Shot 2018-08-25 at 12.08.29

Playing around in Redux devtools

According to the tests everything should be working properly. Still, it’s fun to see the pieces moving on the board! Below is a small demo recorded live.

Note: don’t try this in an actual chessgame…

Tomorrow I’ll try to implement moves via Drag & Drop using React DnD.

Pet project: chessboard UI – Day 3

Today was a really poor day for the user of our chessboard (no new feature!). BUT I’m quite satisfied with the progress made on the app structure and the development experience. Almost everything I mentioned yesterday has been implemented.

Redux and ducks

I started the day by setting up Redux. I decided to do this early because…

  • it is much more convenient to hold the state of the application in one single store.
  • it will be more convenient to handle user actions.
  • it will allow time-travel between moves (something that chess.js doesn’t support).
  • it allows me to conveniently test the app logic (by dispatching actions and comparing the expected state to the actual state.

To do so I installed the following libraries: redux, react-redux, immutable, redux-immutable, reselect, redux-devtools-extension. Then I refactored the currently very simple codebase to match the ‘ducks’ organisation, which I previously used on the ChineseMe project and found very convenient when scaling up.

Screen Shot 2018-08-24 at 16.23.54
Up and running with Redux and Redux Devtools

Improved Game State

Instead of saving the full FEN string in the store, I decided to cut it into it’s six distinct parts. This will make it easier later to update the game situation based on user actions:

Screen Shot 2018-08-24 at 15.36.41

I use Reselect to recreate the full FEN string based on those six elements:

Screen Shot 2018-08-24 at 16.29.42

Testing the app logic

With this first ‘duck’ in place I can now develop the logic following a TDD approach. With Redux, the idea is quite simple: the only thing that can happen is user actions resulting in redux actions, which are handled by reducers, which update the state in the storeThe UI then displays components by querying the store’s state via selectors.

Image result for redux action reducer store selector image
Diagram taken from this article


This means that we can test that every part of the flow works as expected by creating tests that:

  1. Generate an action using an action creator
  2. Calculate the next state by passing the action to the reducer
  3. Get the next state via the appropriate selector
  4. Compare the next state to the expected state

With that in mind I wrote a failing test for a future ‘MOVE’ action:

Screen Shot 2018-08-24 at 15.38.20
A useful pattern to test the logic of a redux app

As expected the test is currently failing since the position is not yet updated. I’ll handle the logic of the ‘MOVE’ action tomorrow:

Screen Shot 2018-08-24 at 15.38.36.png
As expected, it’s a fail! So far so good.

Useful util functions

When handling user actions it will be more convenient to work at the square level. If we represent the board by an array of 64 strings, it’s easy to understand what ‘moving a piece’ means: moving elements within the array.

However as far of the app state is concern, it’s much more convenient to keep track of the position as a string. And it would be more convenient if a server was added to this project (a simple string is easier to save in a database than a JS array.

With that in mind I developed two useful util functions:

  • positionToArrayOfPieces
  • arrayOfPiecesToPosition

I followed a TDD approach to facilitate the development of those functions:

Screen Shot 2018-08-24 at 10.47.28



Pet project: chessboard UI – Day 2

Today was a rather short session. I started by adding a <Game /> component that will be responsible for handling the data of the whole game (mainly the data from the FEN notation). That way we can keep track of the whole game situation, and the <Board /> only has to care about the position.

Then I played a little bit with the chess.js library. I went for a basic test implementation (there are cleaner ways to integrate third party libraries in React components).  Still, this demonstrated the possibilities offered by this library:

Screen Shot 2018-08-24 at 08.47.55
Initiating an instance of Chess in the componentDidMount() method of the <Game /> component.

With this code the board now displays the game, here after the first move ‘e4’:

Screen Shot 2018-08-24 at 08.51.52
One move in!

Now here are a few things I realised and will have in mind for the coming days:

  • Using chess.js sort sof defeat the purpose of this pet project. I’ll learn more by developing the chess logic myself, gradually adding more rules.
  • React DnD (Drag & Drop) looks like a promising option for allowing the user to move pieces. And the official tutorial even showcase this very chess example.
  • I need to start separating the react components between components (responsible for rendering UI elements) and containers (responsible for handling the data and passing it as props to the components). This distinction is sometimes called dumb vs. smart or presentational vs. container components. Here is an explanation from Dan Abramov.
  • I will soon need redux to have the whole state of the app in one place and handle user actions in a more manageable way. This article explains how to add redux.
  • Redux will also allow me to follow a TDD approach when developing the chess logic. For example, I can write a test to see if the game data is updated (using selectors) when a user move a piece (a redux action). This article looks like a good reference.