A website guide for Persona 4 Golden. With 23 social links, 69 quests, and countless other things to do in Persona 4, deciding how to spend time can feel overwhelming. My aim with this guide was primarily to show the user which social links are available on any given day so they so they can plan appropriately. My intention was to be as spoiler-lite as possible, but to also include other things they might otherwise miss, such as shopping channel rewards, social link openings, and general advice. I've also included test answers under a spoiler button and social link dialog 'answers' that can help the player maximize social link points.
I initially built this app using a node.js back end with express and swig, but down the line I realized that it would run much faster as an AngularJS single page application. The fullstack JavaScript version is saved as the 'node' branch.
The data for this app is from a JSON object that I partially made myself and partially pulled from other guides. Credit for calendar info to http://persona4.wikidot.com/schedule, and social link dialog to https://sites.google.com/site/persona4goldenguide
live version is at http://persona.lawlietblack.com
- AngularJS templating using ngRoute
- Responsive animations using animate.css
- How to create spoiler blocks using jQuery
- How to use page transition animations using animsition (node branch)
- How to use node.js routing with express (node branch)
- How to do templating with Swig (node branch)
- AngularJS
- JSON
- JavaScript
- jQuery APIs
- HTML5
- CSS3
- Photoshop
- git
- Full Stack JavaScript using node.js (node branch)
- express (node branch)
- swig (node branch)
- As a user, I can select any day on the calendar and see which Social Links are available.
- As a user, I can click on a social link icon and be taken to that social link's page.
- As a user, I don't see test answers unless I click the show spoiler button.
- As a user, on a date page, I can see if anything is available through the shopping channel, and who is available for bike rides.