Soccer Worlde

Soccer Wordle is an experience for avid football fans to test thier knowlege of player names all across the world. The application has been created using HTML, CSS and Javascript, incorporating the bootstrap UI library for styling.

Table of contents

• Introduction
• Features
• Technologies Used
• Setup
• Project status

Introduction

The application chooses a random player from a list of 15,000 global soccer plays. The goal of the game is to guess the player's name (optionally, within 1 minute) and score the maximum points in order to climb the leaderboards. The application features a settings menu, points based rewards, a hints page and a timer, which combined allow for various strategies to win the game.

Inspiration

I drew much inspiration from the game "Who are ya" (https://playfootball.games/who-are-ya/big-5) which displays a blurry photo and gives the user a certain number of guesses. My passion for Football led me to combine wordle, along with elements of the prior game to create a hybrid. The limitation of daily wordles and slow pacing, led to the complete overhaul of the rules and motivations for the user (e.g. fast paced gameplay).

Goals and Phillosophy

From the perspective of self-development, I wanted to implement all the knowledge learnt as part of Unit 1 at General assembly. Along with this, I attempted to incorporate various other learnings from the past few weeks. This led to a list of game/design requirements as per below.

• Repeatable game that allows users to score points over thier "career"
• Element of urgency - win, loss and foregone rewards, and ability/framework to "monetise the game"
• Mobile first approach - By nature, this game would most likely be played on a phone, thus it should be designed for small screens and then scaled to add responsiveness for larger monitors.
• Using objects and functions, write code such that is easily readable
• Design the code such that it can scale easily and features can be implemented post launch

Challenges

• Visualising CSS with many objects proved to be difficult. Learning a CSS framework was also difficult but gave me a much better understanding of vanilla CSS
• Obtaining, converting, filtering, and hosting player profile data was a very time consuming process as I was unfamilair with the entire process.

Features

Soccer wordle uses a different set of rules as compared to the original wordle games. Due to the difficulty of the game, the ruleset was modified to accept any string of letters as this constitutes a fair guess. The base game will alter users to correct letters and partially correct letters. Upon successfull guess of the player name, the game is reset.

• Fully functional Wordle game that generates a random player name from a database of over 15,000 profiles.
• Friendly on every monitor size from low-budget mobiles to ultra-wide monitors. Dynamic scaling to ensure readibility and functionality.
• Fully functional buttons as well as keyboard input accepted.
• Pop up instructions on first site load. Pop up help available on click of help button.
• Settings pop up, which allows for the user to change difficulities (number of attempts)
• Points and Gem based scoring systems which rewards guessing correct letters, and correct words, with bonuses awarded for timely completion
• Resetable and allows users to give up
• Upon win/loss/give up, a brief player information summary is presented for educational purposes
• Local storage of user profile, which includes default name, points and gems balance
• Functionality to add monetisation (i.e. purchase of points which can be redeemed for hints)

Technologies Used

• HTML5 - Used as a backbone to the website. This is an mandatory requirement for webpages. Many Bootstrap templates, sections, headers, footers have been organised using HTML rather than generated by Javascript (JS).

• CSS - Vanilla CSS was used during the initial construction of the site, but later phased out to Bootstrap. The main grid for guess' continues to use vanilla CSS grid and styling.

• Bootstrap 5.0 - The primary purpose of was to enable the use of Modal forms (pop up windows). As a mobile first approach was used, a smaller screen size limited space available on the page, hence the use of Modals would allow for extra menu options such as hints, settings, displays etc. Due to the overwhelingmly positive impact of bootstrap on the layout and visual appear, over time, almost the entire application was converterd to use modal templates over vanilla CSS.

• Javascript/ES6 was used for dynamic functionality of the site. Various functions within JS are impleneted,

  • Variables, loops, functions
  • Async data import
    • FIFA23 database used to extract player information to XML file,
    • Amending all diacritics to standard english letters via excel VBA.
    • Converting XLSM file to JSON file format
    • Hosted it onto gitHub
    • Called into soccerWordle by function to import on start up.
  • Local storage object was used to store user profiles
  • Function used to create profile "objects".
  • Timer function to display stopwatch, as well as implement feature to add gems on "quick" wins.

Setup

Option 1 - Easiest

The application runs directly from the link https://nikhilmahashabde.github.io/Football-Wordle/ All relevant data and game file are hosted on gitHub. All personal files and profiles are specific to the user's browser.

Option 2 -

https://github.com/NikhilMahashabde/Football-Wordle

Using the above link, the files can be downloaded to your local machine. Access to the internet is still required to access player Data. Start the game using index.html

Project status

Current version 2.2

Completed in Full

• Database filtering
• Dynamic array/letter generation
• Full functional game logic
• Settings menu
• Help menu
• Help player card
• Win/Loss player card pop up
• Timer 1 - Pop up instruction panel on startup
• Timer 2 - Show current time
• Local storage of Score
• win or lose condition - show player name, picture,
• close box
• CSS styling and page layout
• Keyboard layout alignment
• Dynamic scaling for bigger screens

Partially complete

• how to play instructions
• User profile generator
• User profile object - add gems
• local storage of stats

To add

• Optional monetisation
• Statistics