During stressful times, I’ve often turned to Animal Crossing for a relaxing escape from reality. Although I enjoy all the fishing, bug-catching, and more recently terraforming, my favorite part has always been the anthropomorphic animal neighbors or villagers. With over 300 options, there are a lot of them, and, furthermore, they constantly move out with new ones taking their place.
For this project, I wanted to build something cute and fun. With all the time I‘ve spent on the game, an Animal Crossing app to track all the villagers just made sense. And I couldn’t wait to get started because building an Animal Crossing app meant styling an Animal Crossing app.
First things first: essential files
Knowing what files I needed made the starting process easier. Similar to the CLI app, the Sinatra app needs a Gemfile as well as the config folder with an environment.rb file, which establishes the database connection with set :database, { :adapter => ‘sqlite3’, :database => ‘database_name.db’ }. However, it also needs several other files.
Rakefile, which defines the deployment environment. In addition, it also require_relative/loads the environment.rb file and requires “sinatra/activerecord/rake.”
config.ru, that also loads the environment.rb file and specifies to use Rack::MethodOverride, all the controllers, and run the ApplicationController, which responds to requests from the client.
db folder, where I created and migrated tables for data.
Next, MVC framework
The Model-View-Controller framework separates the app’s files into three distinct components:
Models, where data is saved or manipulated.
Views, the part of the app in which the user sees and interacts with directly - consists of HTML, CSS, and Javascript.
Controllers, which transfers data between the browser and app and acts as an interface between model and view.
I created two models with their own validations, a user that has_many villagers, and villagers who belong_to users, by running rake db:create_migration NAME=create_table.
Because I’m using ActiveRecord, each class inherits from ActiveRecord::Base. In addition to the application controller, I have a users controller as well as a villagers controller to keep things clean and separated. In the application controller, I enable :sessions, define helpers methods in a helpers do block, and include the get route to display the index or homepage. The villagers controller handles the app’s main functionality/restful routes to create, read, update, and delete (CRUD).
Each component is built to handle different aspects of an app, making the framework ideal for developing complex but lightweight projects.
Lastly, Styling
Because, Sinatra uses the ERB templating engine, I can code in HTML. If I want the same HTML/CSS on every page, like a stylized scrollbar, I include that in the layout.erb and render that on every page with a yield <%= yield %>. When a controller action is triggered with an erb called, it’ll check to see if there’s a layout.erb. If there is, it’ll load and render the content in the desired erb file.
With a relatively simple project, a little styling can go a long way. Since I love styling and design, I made sure to reserve ample time to play around with CSS. I’ve designed mock websites just for fun, but until this project, I’ve never experienced anything so time consuming and laborious, yet so satisfying and rewarding, at the same time. Needless to say, I may or may not be able to look at Animal Crossing the same again.
Top comments (0)