CMSC 22000 Final report

Quarter: Spring 2025

Feature: Frontend

Design and Implementation

Why we chose vue:

We selected Vue.js for the ChiGame frontend due to its easy learning curve, dynamic capabilities, and strong community support. Vue’s architecture is component-based, which allows for modular and maintainable code, which is ideal for a project that will be handed off to future teams in upcoming quarters. Its clean rendering and data binding simplify the development of dynamic, interactive user interfaces. Additionally, Vue’s documentation and tools (such as Vue CLI and Vite) makes everything run smoother, making fixes easier.

How it works:

The frontend is organized into multiple files and directories, each serving a specific purpose. Major pages of the ChiGame website (Home, Games, Lobbies, Tournaments, Forums, and Profile) are each implemented as individual Vue components located in frontend/vue/src/pages. These page components are responsible for rendering the main content for each route and often contain or import additional child components for specific UI elements.

Reusable UI elements, such as the navigation bar, footer, and various form components, are stored in frontend/vue/src/components. This separation ensures that common interface elements remain consistent across the site and can be easily updated in one place.

We also utilize Vue composables, which are JavaScript functions that leverage Vue’s Composition API to encapsulate reusable logic. These are stored in frontend/vue/src/composables. A key example is the composable responsible for checking user authentication status, which can be imported and used across multiple components without duplicating code.

Routing between pages is handled by Vue Router, with all routes defined in frontend/vue/src/router.js. Vue Router enables us to map URLs to specific components and manage navigation guards (such as requiring login before accessing certain pages). The nav bar and footer are present on all pages, providing a consistent and clear way for users to move throughout the site.

Most of our scripts are written using Vue’s Composition API, which provides a more flexible and powerful way to organize logic compared to the older Options API. This makes it easier to share logic between components and adapt to future changes in Vue’s ecosystem.

Dependencies:

Our Vue implementation is designed to be fully decoupled from the Django backend, communicating exclusively through RESTful API calls. This separation allows frontend and backend teams to work more independently and makes it easier to test and deploy each part of the system. The frontend relies on API endpoints provided by the Django server for tasks such as user authentication, fetching forum posts, and managing tournaments. As a result, the Django server must be running in a separate terminal window alongside the Vue development server.

In addition to core Vue dependencies, we use Axios for making HTTP requests to the backend APIs. Axios is a promise-based HTTP client that simplifies sending requests and handling responses, including error handling and token management for authentication. For our image carousel feature, we use the Swiper library, which provides a responsive, touch-friendly slider that enhances the visual appeal of the site.

How to run:

To run the frontend of ChiGame, we do it locally through Vue. Currently, this version has a massive visual difference from the base Django server of ChiGame.

To run the Vue frontend locally from the ChiGame directory in Linux:

1. Install Node.js and npm Download Node.js from [nodejs.org]. npm is included by default.

2. Navigate to the Vue directory

cd frontend/vue

3. Install dependencies

npm install

4. Start the development server

npm run dev

By default, the app will be available at [http://localhost:5173] and will auto-reload as you make changes.

To connect to the backend, you must also start the Django server in another terminal window. The frontend will communicate with the backend via API calls, and CORS settings in Django ensure that this works smoothly during development. Authentication Our authentication system is built on Django’s simple-jwt library, which issues JWT tokens for secure, stateless authentication. We have a set of API endpoints (defined in the loginpatterns section of src/chigame/api/urls.py) that handle login, logout, user registration, and token validation. On the frontend, authentication logic is encapsulated in a Vue composable (frontend/vue/src/composables/auth.js), which manages token storage, checks login status, and updates the UI accordingly.

Pages:

Currently, we have created the following pages. Almost all of these need to be linked to the backend to be made fully functional: AboutPage.vue ForumsPage.vue GameLibrary.vue HomePage.vue LobbiesPage.vue LoginPage.vue ProfilePage.vue SignupPage.vue TournamentPage.vue How to change things

• Adding New Pages: Create a new .vue file in frontend/vue/src/components/pages/, then import and add it to the routes in frontend/vue/src/router.js. If you want the page in the navbar or footer, update those components as well.

• Styling: Use <style scoped> within your Vue files for local styles. Shared styles can be placed in a global stylesheet.

• Images and Assets: Place images in frontend/vue/public, frontend/vue/src/pages/images/, or frontend/vue/src/components/images/ as appropriate.

• Routing: Update frontend/vue/src/router.js to register new routes or modify existing ones.

• Troubleshooting: Common issues, such as running npm commands in the wrong directory or port conflicts, are documented in the project wiki. Always ensure you are in the correct directory before running commands.

Next Steps

The next steps for the ChiGame frontend involve implementing functionality, increasing user activity, and creating new features. Some new improvements/features that we have identified that could be implemented in the future are as follows:

Collaborate with API team: In order to connect the front end features to the backend logic and functionality of Chigame, we need to utilize API’s. Communication between our team and the API team will allow for a smoother integration of functionality, potentially requesting the API team for a specific API to be implemented and then using that in our frontend implementation.

Implement Game Screens: There isn’t a UI design for playing games yet. Design a UI for how Chigame looks when you are playing games, and use iframes(?) to embed the game into the screen. Reference the logic that the game teams have used to embed their games into the Django fronted.

Game Creation Page (Issue #973 - Make game creation page): Users should be able to create their own Interactive Fiction games in Twine and upload it to the site. Make a game creation page referencing the one that the IF team uses in the Django backend for creating and uploading Twine IF games to the site.

Search Bar Functionality (Issue #1060 - Add functionality to search bar): There is currently a search bar in the navigation bar once a user is logged in. This search bar takes text input, but unfortunately we did not get to making it functional. A future improvement could be to implement this functionality so users can search for other users, games, tournaments, etc.

Create User Inbox (Issue #1160 - Create Inbox for User Profiles Team): We created an inbox idea based upon a rough outline from the Users and Profiles Team, but their team decided to add new features that were not included in the original prototype. Due to this, in future courses, this team should collaborate with the User and Profiles team to re-prototype the inbox, implement the page, and work on functionality.

Create Pop-Up Notifications (Issue #713 - Create Pop-up Notifications for User Profiles and Friending Team): This quarter, we were able to create a pop-up notification prototype that the User Profiles and Friending Team approved, but we were unable to actually implement this. So in future quarters, this team could collaborate again with Users and Friending in order to bring this idea to life.

Making the site Mobile Friendly: Right now, everything looks best on desktop. There is not yet been time dedicated to making the site optimized on mobile devices, which we think, could be a task for future programmers.

Saved/Favorite Game list: Lets users bookmark/save games. Perhaps, storing it locally, then later link it to their profile with backend support.

404/Error Pages: Right now, routing to unknown paths only gives an error page. Adding a simple “Page not Found” (maybe, with a Chigame design) and route to it on fallback.

Dark Mode Toggle: Gamers love dark mode. Use Vue state or local storage to toggle it from light to dark.

Adding Animations: Adding animations and transitions, especially loading screens, could add some engagement and polish to the site. Use @vueuse/motion or just basic CSS to help page-switching look more polished.