js13kgames.com

# js13kgames website

The source of the js13kgames.com website.

Installation

1. Ensure Node 5 is installed, then go to the project folder and execute on a shell:

npm install

2. Install Imagemagick

3. Copy the .sqlite database in the root folder of the project

4. Copy config.js.example as config.js and update fields as needed (for example: domain and the mailing section)

5. Edit the migrations table (just once) in the .sqlite file:

ALTER TABLE migrations ADD COLUMN name varchar;

Note: Node 5 is used because of sqlite. To upgrade node, a new package for sqlite needs to be used.

Running

After installing, run all the migrations executing:

./node_modules/.bin/sequelize db:migrate

Then compile the assets with:

npm run compile

And finally, start the app with:

npm start

Then go to http://localhost:3000 and enjoy.

Development

To precompile your assets during development run:

gulp watch

This will process the SASS files in the source folder and write them to the public/assets folder of the site ready to
be used. Each change to the SASS file will trigger a new build.

To clean the assets:

gulp clean

Create new database migration

./node_modules/.bin/sequelize migration:create --name <name-of-your-migration>

Where <name-of-your-migration> is the name you want for your new migration file. Sequelize will create a new file at
the migrations folder with a name similar to 20170729220958-name-of-your-migration.js. Open that file and edit the
up and down sections accordingly.

CSS Methodology

The files are pre-processed SASS files. These are not processed at run time via express for performance reasons.

The files are arranged based on recommendations - http://thesassway.com/beginner/how-to-structure-a-sass-project and
generate a single main.css file.

The CSS is structured around 12 column grid bootstrap grid. Additional
styles use the BEM (block element modifier) methodology. In short this means styles are component based and do not
cascade preventing issues around importance.
See https://en.bem.info/methodology/ for more details.

Available Routes

js13kgames.com/                         -> index page for the current year
js13kgames.com/<year>                   -> index page for the given year
js13kgames.com/entries                  -> list of entries for the current year
js13kgames.com/<year>/entries           -> list of entries for the given year
js13kgames.com/<year>/entries/<slug>    -> details of the entry for the given year
js13kgames.com/submit                   -> form to submit a game. This form must be active only when the compo is running. It requires authentication
js13kgames.com/admin                    -> admin panel. It needs super user authentication
js13kgames.com/admin/login              -> admin login interface
js13kgames.com/admin/submissions        -> list of submissions for the current competition
js13kgames.com/admin/submissions/<id>   -> interface to interact with the submission (comment, vote, etc)
js13kgames.com/admin/editions           -> list of editions and options to close and delete the active edition
js13kgames.com/admin/editions/new       -> open a new edition

Tech Stack

• Node JS
• Express
• Handle Bars View Engine
• SASS (Bootstrap Grid + BEM Methodology)