GamesCenter - Elevating the Web Experience

June 2023

Context

GamesCenter was born out of a need for a more user-friendly alternative to the clunky default “browse files” interface commonly found on the web. This project aimed to provide a seamless and efficient browsing experience for users accessing HTML game-related content.

Quest for Improvement

The initial inspiration for GamesCenter stemmed from the frustration of navigating a cluttered web folder devoid of essential features such as search functionality, game descriptions, and appealing cover art. The objective was clear: transform this lackluster digital environment into a vibrant game hub equipped with enhanced browsing capabilities.

Here’s a screenshot of what it was like to browse, with only a little files :

Navigating Technical Challenges

The development journey of GamesCenter was not without its obstacles. Server-side scripting restrictions necessitated the use of client-side JavaScript for data manipulation. Additionally, security headers and an HTTP AUTH mechanism with token-based authentication presented further hurdles.

Despite these challenges, innovative solutions were devised to overcome technical limitations and ensure the smooth functioning of GamesCenter.

Constraints can often lead to innovative solutions, and allowed the single file “app.html” to be a stone thowards the idea of having a “Portable Web App” single file, that you could drop on any webserver and expect it to work.

Designing the Experience

A key focus of GamesCenter was to deliver a user-friendly interface that prioritized ease of navigation and accessibility. The decision to implement hash-based routing, instead of more complex JavaScript-driven SPA navigation, was made to preserve scroll positions and enhance user experience. Real-time search functionality and a streamlined details pane further enriched the browsing experience, providing users with quick access to game information.

GamesCenter could have been a small game shop, but we decided to take a different route – everything would be free and open.

Search Features

GamesCenter offers a streamlined search functionality, allowing users to quickly find their favorite games with ease. The search feature scans both the title and translated English title for comprehensive results, ensuring a double dose of convenience. With real-time filtering, there’s no need to wait around – simply type your query and watch as the results light up before your eyes.

Details Pane

The details pane in GamesCenter provides users with essential game information in a simple and easily accessible format. Rather than a separate window, the details pane functions as a popup, allowing for seamless interaction. Behind the scenes, it queries a pre-computed meta file, now represented as a JSON, which contains a wealth of details about each game.

This efficient approach not only simplifies the user experience but also reduces the need for complex backend processing. By dynamically creating content based on the meta file, GamesCenter offers users a deeper dive into game details without unnecessary clutter or complexity.

{#if gameStore?.description?.length > 0}
  <div class="description">
    {#each gameStore?.description as block}
      <div>
        {#if block?.head}
          <h3>{block?.head}</h3>
        {/if}
        {#if block?.body}
          <p>
            {#each block.body.split("\n") as line}
              {line}<br />
            {/each}
          </p>
        {/if}
      </div>
    {/each}
  </div>
{/if}

This minimalist approach highlights the importance of simplicity in web development, demonstrating that the best code is often the code that isn’t there. By prioritizing efficiency and functionality, GamesCenter steps towards new standard for web-based experiences.

Learning Through Packaging and Optimization

Exploration of Vite and packaging techniques provided valuable insights into code bundling and optimization. Leveraging these tools, GamesCenter was streamlined into a single-file application, optimized for production deployment. This approach not only simplified the deployment process but also improved the overall performance of the application.

At the end I managed to deliver the streamed down single file app that’s having everything needed, automatically packaged and ready for production. Some may call this DevOps but I’m simply assuming it’s what need to be done when building stuff that aren’t made to be PoC.

Final Result and Lessons Learned

The culmination of the GamesCenter project yielded a visually appealing and functional web application that addressed the shortcomings of traditional file browsing interfaces. Beyond its immediate utility, GamesCenter served as a learning experience, demonstrating the importance of creative problem-solving and the potential of innovative web development techniques.

The concept of a Web Portable Executable (WebPE) emerged as a promising idea, offering simplified deployment and enhanced accessibility for web applications.

Also the final UI was looking pretty good, re-using the visual UI I drafted a while ago for the where-to-be game shop :

In conclusion, GamesCenter represents a significant step forward in the evolution of web-based file browsing, showcasing the power of ingenuity and technological innovation in enhancing user experiences on the web.