Enuk

An interactive webpage to play Enuk boardgame in a browser. This project is my second milestone in obtaining the Full Stack Web Development diploma from Code Institute

Game Classification

• Category: [ Animals, Children's Game, Memory ]
• Age - 5 years and up

Publisher's description:

The small Eskimo child Enuk is already excited. Today he may go with his large brothers on a journey into the ice. Finally he may see the wild polar bears on their way, watch the seals fishing and fish through the ice holes. He looks forward to building an igloo with the others. However, the day goes by too fast...

The children have to build the igloo and to observe as many animals as possible at the same time. Who collects the most animal tiles and builds the igloo successfully, will win!

Description of the mechanics:

Enuk is a mixture of memory and push-your-luck. Players turn over animal tiles, until they want to quit or one of the animals is scared and flees: the herring flee from the salmon, salmon flees from the seal, the seal flees from the polar bear and the polar bear flees from the Eskimo. How many tiles dare you turn over?

Contents

• 1. UX design
  • 1.1 Strategy Plane
  • 1.2 Scope plane
  • 1.3 User Stories
  • 1.4 Structure plane
  • 1.5 Skeleton plane
  • 1.6 Surface plane
• 2. Program design
• 3. Features Left to Implement
• 4. Technologies and Tools Used
• 5. Issues solved during development
• 6. Testing
• 7. Deployment
• 8. Credits
• 9. Disclaimer

1. UX design

1.1 Strategy Plane

Stakeholders of the website:

• children from age 5 who want to play Arctic themed memory game in a browser
• adults letting children play on a computer
• game designers of the original board game

1.1.1 Goals and Objectives of Stakeholders (users)

G#	User	Goals, Needs, Objectives
G1	child	wants to play on computer
G2	child	wants to be able to play without the need of adult constantly present or other players
G3	child	wants engaging game
G4	adult	the game should be educative
G5	adult	the game should be playable without reading skills
G6	designer	the computer game should preserve the original design, characters, rules as close as possible

1.2 Scope plane

It has been decided to create an interactive webpage written in HTML, CSS and JavaScript. The webpage will feature Enuk board game, closely resembling the visual experience of the original game, enhanced with built-in rules and sound effects.

Note: Although much effort made to satisfy responsivity criteria, this game is playable on computer screen only. On other screens the tiles on the game area overflows on smaller screens, so the player needs to scroll and during scrolling in the brain the stored visual references of known tiles gets destroyed so the game degrades to a push-your-luck game which is not the intention of the desiger/artist/developer.

The following table lists the planned features, each feature referenced with original goal(s):

F#	Goal	Feature
F1	G5	Rules are explained separate from the game
F1	G5	The game play incorporates every rule, restricts actions and decision to the immediately available ones
F2	G2	moves and feedbacks in the game are graphical and audible, understandable without text
F3	G4	situations, characters, objects, sounds exists in nature
F4	G6	design and graphical elements are to be taken from original game
F5	G3	game is repeatable with variability and the challenge level is adjustable

1.3 User Stories

• As a child I want to play a game on the computer, so I am entertained and challenged.
• As a child I want to play without an adult reading in-play instructions off the screen, so I am not dependent on others.
• As an adult I want a game for my child which can be played without help, so I can do something else.
• As an adult I want a game about arctic animals, so my child can learn about them and their relationships.
• As an adult I want a game with rules built into the game play, so my help is not needed during the play.
• As the original game designer, I want to see my product extended into digital space, so my recogition extends further.

1.4 Structure plane

The structure of the website to be built consist of a Rules and a Game page. The website loads the Rules page first, the Games page is accessible from the Rules page only. At the end of a game play the Rules page becomes accessible again.

1.5 Skeleton plane

Features and Wireframe of Rules page

Rules page with Navbar and responsive Body of text and images and Input fields

Section	Feature / Content description
Navbar	ENUK logo
Navbar	start game button for linking to the Game page
Header	colorful summary about the game
Game Materials	Toggle Switch for sound on/off
Game Materials	Toggle Switch for test mode on/off
Game Materials	toggle radio buttons to chose own color
Game Materials	3 toggle buttons to chose number of opponents [0-3]
Game Materials	5 animal tiles with multipliers to show how many of them goes into the game
Game Materials	sliding meter [2-14] to select number of animal tiles from each type (bear,seal,salmon,herring)
Game Materials	sliding meter [3-9] to select number of sun positions on the board which is tied to the number of reindeer tiles
Game Materials	save chosen game parameters to browser's local storage at every user interactions for persistance
Game Materials	Read game parameters at page refresh and set up the input fields to the last saved state, so game can be repeated with same settings
Game Materials	game board, so it's structure can be explained
Game Materials	each of the 9 igloo tiles is a pice of a whole igloo. The image of the 9 igloo tiles helps to explain their placement on the board on the 3x3 placeholder area
Game Materials	figure explaining fleeing order, so the rule can be loaded into player's visual memory
Game Materials	for each player, placeholder for stack of collected tiles with 4 meeples underneath, so game state can be explained
First Phase	explain a small First Phase game play through several steps, illustrated with images
Rules of First Phase	explain detailed rules for First Phase illustrated with images
Finishing Phase	explain a short Finishing Phase game play through several steps, illustrated with images
Rules of Finishing Phase	explain detailed rules for Finishing Phase illustrated with images
End of the Game	rules for when the game ends
Credits	give credit to the authors of the original board game

there are 3 phases in the Game:

• flipping and collecting tiles, building the igloo
• player declares next tile before flipping it, if correct, collects the tile
• announcing the winner

Features and wireframes of Game page during First Phase

Game area with Navbar and Tiles

Section	Feature / Content description
Navbar	ENUK logo
Navbar	set up sun positions as circles as many were set on the Rules page as a parameter. The arrangement of the circles form an arc starting from left-bottom corner of the Navbar up to the top-horizontal midpoint and down to the right-bottom corner. The arc mimics the sun's low path over the horizon
Navbar	put up a Sun icon into the left-most sun position and advance it (with animation) to the next (to right) when a player turns a reindeer tile
Navbar	put up an eskimo glove icon, so when player can indicate that they want to collect face-up tiles from the board, by clicking on this icon
Game area	if player clicks on the collect button (eskimo glove icon), remove the face-up tiles from board and move them into the player's stack (with sound effect)
Game area	change the background color of the game area to the actual player's color, so it is evident, who's turn it is
Game area	put up tiles face down onto the game area in rows in a grid structure. The number of each tile types are set by parameters from the Rules page. If the test parameter is On, label each tile so the tester can know what the tiles' backs are hiding. Every tile remaining on the area face-down retains their place, so the player can visually memorize their position. Every tile can be flipped back and forth (restricted by game rules)
Game area	when a player clicks on a face-down tile, flip the tile, revealing the face image, if sound is switched on, play a sound effect in sync with the flip animation
Game area	when a player flips an igloo tile, after the face image is revealed, the tile is moved to the board onto the igloo placeholder and a meeple is placed on top of this tile. The meeple is taken from underneath the player's stack (if there is left). If sound is switched on, play a sound effect in sync with the tile removal
Game area	each animal (except the reindeer) fears of one other animal: herring fears salmon, salmon fears seal, seal fears polar bear, polar bear fears reindeer (with eskimo), when player flips a tile, check if the flipped animal fears any face-up animals on the board OR any face-up animal fears the flipped animal. If there is fear, the fleeing animals's tile turned back face-down (with sound effect), remaining face-up tiles are removed to the player's stack (with sound effect)

Game area with Navbar and temporary pull-down Board

Section	Feature / Content description
Navbar	if player hovers over the Navbar, bring the GameBoard forward, on top of the game area. If the hovering over the Navbar ends, push the board back into the background
Board	There is a 3x3 tile placeholder area for 9 igloo tiles in the mid-bottom of the board. The 9 igloo pieces gives out the whole igloo
Board	Each player to have a tile stack at the bottom of the board. A stack consists of tiles collected by the player, each collected tile is represented by a tile edge image, same way as in physical form. The height of the stacks are comparable visually between players. The stack grows upwards with each collected tile.
Board	Under each tile stack 4 meeples are stored in the player's color. If a player flips an igloo tile, the tile goes onto the 3x3 igloo placeholder grid at its right place. The tile is then covered with a meeple on top, taken from the player's stack. If there are no more meeples left for the player, then that tile will not be covered with meeple.

Features and wireframe of Game page during Finishing Phase

Section	Feature / Content description
Navbar	ENUK logo
Navbar	put up 6 toggle radio buttons with icons of (reindeer, bear, seal, salmon, herring, igloo), so player can declare their prediction what their next flip will be
Board	if actual player has a meeple on a tile on the 3x3 igloo area, then that one meeple is removed from the tile a placed back under their stack and the tile is collected into their stack (with sound effect)
Game area	upon receiving one meeple back into the stack, the player is allowed to make a prediction of their next flip by choosing a tile type in the Navbar. Clicking on a tile type gives out a sound effect, the tile type gets marked (they are radio buttons)
Game area	if player successfully predicts their next flip, the flipped tile is collected into their stack (with sound effect)
Game area	wrongly predicted and flipped tile remains face-up and can not be flipped again

Game area covered with remaining tiles and pulled-down Board,

Features and wireframe of Game page at the End Of Game Phase

Game area with Navbar and permanent pull-down Board

Section	Feature / Content description
Navbar	ENUK logo
Navbar	put up a Replay button, so player can restart the game immediatelly without changing the game parameters
Navbar	put up a Rules button, so player can go back to the Rules page for studying the rules or changing parameters
Board	Mark the winners stack with a crown, announce the end of the game with a sound effect
Board	bring forward the board, but remain 1 level below of the remaining tiles
Board	Make every tiles flippable

1.6 Surface plane

Chose font Roboto for the headers.

The images, tiles and icons are digital reproduction of the physical board game. Most of them are photgraphed and transformed in an image editor. This method preserves the original look and style.

Sound effect had been added to certain screen actions to give audio feedback.

2. Program design

The interactivity is provided with JavaScript program running in the browser on the client side. It has 3 theoretically distinct parts:

1. Viewer - responsible for visual representation of data and and game elements - governed by the UX design,
2. Model-Controller - responsible for logic and decisions in the game. It is abstracted away from the visual representation. Also responsible for triggering changes in the Viewer.

2.1 Generating HTML code with Viewer

The Rules page is a usual static HTML code styled with Bootstrap classes. The Game page is built from HTML elements generated by JavaScript routines. The syling is done with CSS.

2.2 Pseudo code of Model-Controller

The following states describe the game play stages from rendering the game board until declaring the winner.

A state BeforePhase1 (generate game area for Phase 1)

1. generate game table with 74 tiles face down, random order in matrix layout (rows and columns)
   • 9 igloo pieces
   • 14 herring
   • 14 salmon,
   • 14 seal,
   • 14 polarbears,
   • 9 reindeer (with eskimo)
2. generate game board with
   • empty tile stack of player(s),
   • 4 meeples for each player under their stack,
   • empty 3x3 tile holder over the igloo,
   • empty 3x3 meeple holder on top of the 3x3 tile holder
   • place the sun piece on the first of 9 positions
   • place invisible icons of herring, salmon, seal, polarbear, reindeer, igloo
3. determine order of player moves
4. set ActualPlayer to the first player
5. continue to state InPhase1-BeforeMove

B state InPhase1-BeforeMove (prepare actual player’s move)

1. instruct ActualPlayer to move (flip or collect)
2. wait for request

C state InPhase1-ProcessMove (collecting tiles and building the igloo)

• receive move from ActualPlayer (ClickedTile, Request)

1. If Request is RequestToFlip to flip a face-down tile up, then
   • -> set flag RequestToFlip
   • -> flip the tile face-up
   • If ClickedTile is reindeer -> move the sun piece to the next position. if there is no next position (already on the final), then do not move sun
2. If Request is CollectTiles to collect face-up tiles from table -> set flag RequestToCollect
3. If Request is something else -> continue to state InPhase1-BeforeMove
4. continue to state InPhase1-Evaluation

D state InPhase1-Evaluation (evaluate game state after move)

1. clear evaluation flags
2. check face-up tiles on table:
   • determine the list of animals fleeing from any other animal
     ( rank order: herring < salmon < seal < polarbear < reindeer.
     An animal flees from the next higher ranked animal only, e.g. salmon flees from seal, but not from polarbear or from any others)
   • If any flees -> set flag AnimalFled
   • determine the list of igloo tiles to be removed to the board
   • determine the list of other face-up tiles
3. If NOT flag AnimalFled AND all tiles are face-up -> set flags EndOfPhase2, EndOfPhase1
4. Else If ClickedTile is reindeer AND the sun piece is on the last position -> set flag EndOfPhase1
5. If flag EndOfPhase1
   OR flag EndOfPhase2
   OR ClickedTile is igloo
   OR flag AnimalFled
   OR flag RequestToCollect
   -> set flag EndOfMove
6. continue to state InPhase1-Execution

E state InPhase1-Execution (execute actions based on evaluation)

1. If ClickedTile -> wait some time that each player can memorize the last tile flip
2. turn tiles of fleeing animals back face-down
3. move igloo tiles onto the board's 3x3 igloo and mark each tile with the player's one (of 4) meeples under its stack. If there are no meeples left, do not mark.
4. If EndOfMove -> collect remaining face-up tiles into player’s stack
5. wait some time that each player can memorize the actions (if there was)
6. If flag EndOfPhase2 -> continue to state EndOfGame
7. If flag EndOfMove -> set ActualPlayer to the next player
8. If flag EndOfPhase1 -> continue to state BeforePhase2
9. Else continue to state InPhase1-BeforeMove

F state BeforePhase2 (set up board for Phase 2)

1. set invisible the CollectTiles icon on board
2. set visible the icons for each tile type on the board for getting tile type declaration from players:
   (herring, salmon, seal, polarbear, reindeer, igloo)
3. continue to state InPhase2-CollectOneIgloo

G state InPhase2-CollectOneIgloo (collect one tile from the igloo)

1. If ActualPlayer hasn’t got meeple on igloo -> continue to state InPhase2-Evaluation
2. remove ActualPlayer’s one meeple from igloo
3. remove tile underneath the removed meeple and move it to the tile stack of the ActualPlayer
4. continue to state InPhase2-BeforeDeclaration

H state InPhase2-BeforeDeclaration

1. instruct ActualPlayer to declare its next flip, choose one of the following:
   (herring, salmon, seal, polarbear, reindeer, igloo)
2. wait for request

I state InPhase2-BeforeMove

1. instruct ActualPlayer to flip one tile
2. wait for request

J state InPhase2-ProcessMove

• receive move from player: (ClickedElement (Tile or Icon), Request)

1. If Request is DeclareNextTileType AND ClickedElement is valid:
   • -> set Declaration
   • -> mark Declaration on board
   • -> continue to state InPhase2-BeforeMove
2. If Request is to flip a face-down tile up AND Declaration is set
   • -> flag RequestToFlip
   • -> flip the clicked tile face-up
   • -> continue to state InPhase2-Evaluation
3. If Declaration is set -> continue to state InPhase2-BeforeMove
4. Else -> continue to state InPhase2-BeforeDeclaration

K state InPhase2-Evaluation (evaluate game state after move)

1. clear evaluation flags
2. If all tiles on table are face-up
   OR ClickedElement tile is the last reindeer
   OR there is no more meeple on the igloo
   -> set flag EndOfPhase2
3. If NOT ClickedElement tile -> set flag EndOfMove
4. Else If ClickedElement tile is the same as Declaration -> set flag CorrectDeclaration
5. Else -> set flag EndOfMove
6. continue to state InPhase2-Execution

L state InPhase2-Execution (execute actions based on evaluation)

1. If ClickedElement tile -> wait some time that each player can memorize the last tile flip
2. If flag CorrectDeclaration -> move tile ClickedElement to player’s stack
3. wait some time that each player can memorize the actions (if there was)
4. If flag EndOfPhase2 -> continue to state EndOfGame
5. Else If flag EndOfMove -> set ActualPlayer to the next player
6. continue to state InPhase2-CollectOneIgloo

M state EndOfGame

1. Announce winner (most collected tiles)
2. Allow free tile flipping on tiles remaining on the table
3. Offer to restart the game
4. wait for request

N state EndOfGame-ProcessMove

• receive move from player: (ClickedElement, Request)

1. If Request is RequestToRestart -> continue to state BeforePhase1
2. If Request is RequestToFlip -> flip ClickedElement

3. Features Left to Implement

• develop a program agent for playing one player's part, so the human player and program agent take turns during the game until one wins
• integrate the program agent into the game play with same visualization as for human player, so the human player can follow the agent's move

4. Technologies and Tools Used

• The project's product (the website) was written in HTML, CSS and JavaScript, utilising Bootstrap 5.0 Beta framework (which itself uses CSS and JavaScript). Bootstrap is used for its responsive utilities.
• Manipulated images with program Paint.NET. Mainly used for cropping, resizing, background removal and format conversion.
• downloaded youtube videos with youtube-dl
• extracted and cut sound clips with Audacity
• Created wireframes with program from balsamiq
• Written study notes on Google Docs
• Disassembled a PDF file with Adobe Acrobat PRO
• Edited the code with Visual Studio Code, the page preview was provided via Live Server VS Code extension.
• Managed code versions with Git
• Stored the code and project deliverables cloud service Github repository with versions.
• Deployed the website on GitHub Pages
• The development machine run Windows 10 operating system.
• The website was tested on desktop on Chrome and Firefox web browsers, also on a Asus Google Nexus 7 (2013) tablet running Android OS and mobile Chrome browser.
• Generated favicon with Favicon & App Icon Generator
• Generated one image (on top of this Readme) of how the website looks on different size devices with Am I Responsive
• Chose font using Google Fonts
• Run CSS code through Autoprefixer CSS online to supplement suggested vendor prefixes
• Searched the internet to find content, documentation and solution for issues using Google's search service.
• connected to the internet using Vodafone's broadband service.

5. Issues solved during development

See my study notes/development journal with lots of issues and bugs solved.

6. Testing

First step in testing was the validation of HTML, CSS and JS code with Markup Validation Service, CSS Validation Service, JS Hint respectively. I performed the validations a couple of times during development and once at the end. Now the index.html page validates to "Document checking completed. No errors or warnings to show.". The style.css file validates to "Congratulations! No Error Found." All 3 *.js file validates to one type of warning that variables are unknown or unused. They are due to the split of JavaScript code into three separate files.

The whole testing was conducted manually on Windows 10 desktop device running Chrome browser on a 1920x1080 resolution screen and on an Android tablet. Not tested on mobile phone, because the limited sceen estate does not allow game play in a way as intended.

See the whole test log in a webpage or here as a pdf.

No additional bugs were discovered during the final testing.

Conclusion: The website performs on desktop and tablet as intended.

7. Deployment

Deployment to GitHub Pages

The website is deployed to GitHub Pages automatically by GitHub. The assigned web address is ruszkipista.github.io/cims02-enuk/. I followed this tutorial to deploy the project on GitHub Pages, these were the steps:

1. On GitHub navigate to the repository's main page
2. Under your repository name, click Settings
   
3. Under "GitHub Pages", use the None or Branch drop-down menu and select a publishing source
   
4. Optionally, use the drop-down menu to select a folder for your publishing source
   
5. Click Save
   
6. After a while you are presented whith this status message at the same place
   

Deployment to a different hosting solution

If you want to deploy this project to a different hosting solution, you need to copy all the files from this repository. Follow the repository cloning steps from this tutorial. After you have your local copies of these files, you copy them into the home folder of the webserver, keeping the folder structure as is. Just because this is a static website, you can even start up the Home page by double clicking on the index.html file in your local file system - effectively launching you default browser with the starting page.

8. Credits

Original Boardgame Designers

• Stefan Dorra
• Manfred Reindl

Original Boardgame Artist

• Alexander Jung

Original Boardgame Publishers

• Queen Games
• Piatnik

Acknowledgements

My inspiration for this project came from the assessment booklet mentioning memory game as a possible project and this board game jumped into my mind immediatelly. We played this game with our kids many times, even recently during the pandemic lockdown.

I thank Nishant Kumar for mentoring me during the project. He suggested to make the gameboard stowaway so all tiles can be accessed without scrolling and emphasize the Play button on the Rules page.

My family had several suggestions on the UI and how to avoid the use of written information during play.

Victor Navas Santajuana gave me a code rewiew half way through the project

Media

See the exact source of images in the code comments. Here is the short list of sources:

• BoardGameGeek's webpage about the game, especially this pdf,
• my own photos of the boardgame's board, tiles, meeples
• youtube videos for sound effects, see the list of sources in gameviewer.js

9. Disclaimer

The content of this website is for entertainment and educational purposes only.