Game Interface Guide - MakahikiKTUH/makahiki-ktuh GitHub Wiki

Welcome to the Makahiki KTUH Game Interface Developer Guide

• 5.1. Overview
• 5.2. Makahiki KTUH Theme
• 5.2.1. Welcome Aboard!
• 5.3. Front End UI Development Setup for Mac OS X
• 5.3.1. Install Node.js
• 5.3.2. Install npm
• 5.3.3. Install LESS
• 5.3.4. Install LESS Compiler
• 5.4. Front End UI Development on Mac OS X
• 5.5. Deploying UI Revisions
• 5.6. Front End UI Documentation

5.1. Overview

The Makahiki KTUH system's UI theme is designed on top of the Makahiki game framework's user interface that utilizes technologies highlighted in Dr. Philip Johnson's ICS 691 Serious Game Development Spring 2013 course held at the University of Hawaii at Manoa. These technologies consist of LESS and Twitter Bootstrap, which are relatively new web UI design tools that adapt to mobile, tablet, and desktop web browsers. This eliminates the need to develop for multiple devices, a common practice in the past. With growth in mobile and tablet devices, there has been an increase in demand for responsive web viewing and development.

LESS is a dynamic stylesheet language that extends CSS and runs on both the server side through Node.js and modern web browsers. Twitter Bootstrap is a modern and elegant front-end framework developed by Twitter. The Makahiki serious game framework is one that allows the game interface to be viewed and played on multiple devices.

Visit makahiki-ktuh.herokuapp.com to view and resize the browser window from left to right and watch the responsive UI transformation as the window gets narrower and wider.

5.2. Makahiki KTUH Theme

The Makahiki KTUH theme is designed for the Pledge-A-Thon Serious Game with the army of KTUH volunteers and listeners in mind. The Graphical User Interface displays an immersive visual experience that simulates the atmosphere of a radio station's on-the-air room. The visual interface also assists with captivating a player's attention during the initial onboarding phase of the game through its 'air room' look and feel, geared towards the non-commercial educational radio station industry demographic.

To facilitate the KTUH theme design process, time was spent hanging out at the KTUH radio station on campus in their air room with Davey, who is also a DJ at the station. The atmosphere in the air room is a darker setting with dim lighting that hosts a dj booth, mics, equipment, turntables, and vinyl records. Similar to what one would expect to see at a radio station's on-the-air room.

5.2.1. Welcome Aboard!

Welcome Aboard! is the initial onboarding phase for the Makahiki KTUH Pledge-A-Thon® Serious Game, where the player is immersed in a visual experience that invokes the atmosphere of a radio station's on-the-air room. The visual aspects helps in getting a player's attention with its 'air room' look and feel, that is intended for the non-commercial educational radio station industry demographic. This part of the process is a crucial step in the retention of the player or user. Welcome Aboard! was derived during the serious game concept design process prior to development.

5.3. Front End UI Development Setup for Mac OS X

Upon successfully installing the makahiki-ktuh development environment on your local computer and heroku, there are a few additional steps required to get setup for front end UI development. To get started, we will install Node.js, npm, lessc, and a LESS compiler and editor.

5.3.1. Install Node.js

• We recommend using homebrew to install Node.js from the command line.

  `brew install node` 
  

• Once installed, create your server.js file.

Run this code in your terminal:

  var http = require('http');
  http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
  }).listen(8124, "127.0.0.1");
  console.log('Server running at http://127.0.0.1:8124/');

Then run the following which will save the server.js file:

   node server.js

5.3.2. Install npm

We recommend using GitHub.

 git clone http://github.com/isaacs/npm.git
 cd npm
 sudo make install

5.3.3. Install LESS

• Using npm from the command line, install lessc on the server side.

Run the following code in your terminal:

  npm install -g less

Check to make sure lessc is installed:

  lessc --version

5.3.4. Install a LESS Compiler

• We recommend Crunch as it is both a compiler and an editor for LESS stylesheets. Visit Crunch and download it free.

• You are now setup for front end UI development on the Makahiki KTUH system.
  

5.4. Front End UI Development on Mac OS X

• The first thing to always do is activate the virtual environment. More Info

Run the following code from the command line to start the virtual environment:

  export WORKON_HOME=$HOME/.virtualenvs
  export PROJECT_HOME=$HOME/Devel
  source /usr/local/bin/virtualenvwrapper.sh

Go to your makahiki directory in makahiki-ktuh, then run the makahiki virtual environment.

  cd makahiki
  workon makahiki

Verify that your virtual environment is activated. You will see the virtual environment directory in parenthesis. Or you can run workon makahiki anytime you cd if you prefer to be sure.

• Open LESS from the command line.

The file will open in the Crunch Editor:

   cd less/
   open -a Crunch theme-ktuh.less

5.5. Deploying UI Revisions

• Opening files from Finder works too. Remember to save edits, then update your instance from the makahiki directory using the command line to view any changes on the server.

Update instance from terminal:

   scripts/update_instance.py

• Then start/restart your server.

Run this from terminal, then view localhost:8000 on your web browser.

   ./manage.py run_gunicorn

• To make additional changes, always shut down your server with Ctrl-C.

Open the file, make your revsions, save your changes, update instance, and restart your server to view your changes.

   scripts/update_instance.py
   ./manage.py run_gunicorn

• If you make changes that are database related such as default settings and content, you have to initialize instance, update instance, then restart your server.

For example, editing the fixtures/default_challenge.json file, will require initializing your instance. (You can do this as much as you would like for development purposes, but keep in mind that it resets the database tables, including user information.)

  scripts/initialize_instance.py --type default
  scripts/update_instance.py
  ./manage.py run_gunicorn

5.6. Front End UI Documentation

The following files include customizations for the Makahiki KTUH front end user interface.

   fixtures/default_challenge.json
   static/css/landing.css
   static/css/theme-forest.css
   static/css/theme-ktuh.css
   static/images/favicon.ico
   static/images/forest-theme-background.jpg
   static/images/ktuh-theme-background.jpg
   static/images/old-logo.png
   static/images/login_avatar.png
   static/less/landing.less
   static/less/makahiki.less
   static/less/theme-forest.less
   static/less/theme-ktuh.less
   templates/about.html
   templates/landing.html
   templates/account/login.html
   templates/admin/index.html
   templates/admin/designer_index.html
   templates/admin/developer_index.html
   templates/admin/admin_index.html
   settings.py

• GitHub Project Management

Our team utilized the organization and team features of GitHub for the purposes of project development management. We implemented Milestones and issue-driven task management. This facilitated the development process with a clear outline and goals.