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)

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):

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.

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.