GamesCenter - Elevating the Web Experience

June 2023

Context

Ever found yourself stuck in the clunky interface of a default “browse files” setup, desperately craving a more user-friendly environment? Well, I certainly did and I was not the only one. Let me tell you the story through the creation of GamesCenter – a definitely better “files listing” page.

Quest to a better file listing

Picture this: a web folder bursting with HTML game-related treasures, but buried beneath a sea of nothingness – no search function, no game descriptions, not even a cover to hint at the gaming wonders within. The need for a swift and user-friendly solution sparked the inception of GamesCenter. The goal? To transform this seemingly barren digital realm into a vibrant game hub, complete with a “play now” button, detailed descriptions, and eye-catching covers.

Can’t ? Well, here’s a screenshot of what it was like to browse, with only a little files :

Navigating Technical Hurdles with Creativity

The path to GamesCenter was not without its twists and turns. You see, I was restricted from running server-side scripts, leaving me with only client-side JavaScript as my trusty companion. This limitation birthed an AJAX-powered extravaganza, where data fetching danced gracefully on the client-side stage.

To further complicate matters, I faced security headers that barred the entry of external JS or CSS, and an intricate HTTP AUTH with a token in the URL for temporary sessions. These challenges, while seemingly daunting, only fueled my determination to conquer them.

But the journey didn’t end there. The security headers that guarded the gates of external JS and CSS posed a fresh conundrum. In response, I adopted a strategy of inlining styles and scripts, allowing GamesCenter to flourish within the bounds of its limited environment.

This creative workaround proved to be a testament to the idea that constraints can often lead to the birth of innovative solutions,and alloed 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. I could in the future develop some more tools like this, thiking about like a base 64 decoder or many little utilities looking alike.

Designing the Experience: Choosing the Right Path

GamesCenter could have been a small game shop, but we decided to take a different route – everything would be free and open. With a focus on creating a seamless user experience, I embarked on crafting an interface that encapsulated the essence of file browsing delight.

The most exhilarating challenge arrived when it came to navigation. A world of possibilities lay before me, including the allure of “virtual” navigation to existing pages enhanced with JavaScript. However, I opted for an old-school hash-based router. Why, you ask? It was all about preserving that precious scroll position. In a world where most JS-generated SPAs tend to toss aside scroll positions when transitioning, I wasn’t about to repeat that mistake. So, hash-based routing became my secret weapon, ensuring that users could glide through GamesCenter file list without losing their place.

Search Features

You can find your favorite games in a flash – it scans both the title and even the translated English title for a double dose of convenience. It’s not just about finding games; it’s about finding them right away. With real-time filtering, there’s no waiting around. Just type and watch the magic happen as the results light up before your eyes.

Details pane

The details pane in GamesCenter isn’t a window; it’s more like the original popup idea, simple and easily closable. Behind the scenes, it’s querying a nifty pre-computed meta file that we originally planned for the store’s backend. But here’s the twist – that meta file is now a JSON, another simple static file brimming with details.

It’s not just about showing text; it’s about crafting paragraphs that weave together titles and descriptions like an interactive storybook. This neat trick allows the webpage to dynamically create content, giving you a deeper dive into the games details. It is deadly simple working internally, yet fully functionnal :

{#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}

Next time you want Markdown and all the fuzz, think about how simple things could be. Best code is not having code at all !

Learning Through Packaging and Vite

As the final pieces of GamesCenter fell into place, I stumbled upon an interesting revelation. I delved into the enchanting realm of Vite and packaging, a journey that turned out to be an unexpected learning opportunity. The intricacies of bundling and optimizing code showed me a new side of web development, giving me insights into how to make GamesCenter as swift and efficient as possible. 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, Lessons Learned and a Faster Path Forward

Through the adventure of crafting GamesCenter, I gathered valuable insights that go beyond just making a cool space for file browsing. I discovered that challenges aren’t hurdles to block us, but chances to get creative and find new solutions. It taught me how to think in unique ways and turn limits into possibilities, showing that every problem is a chance to learn and grow.

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 :

One exciting lesson I take with me is the idea of a Web Portable Executable (WebPE). Imagine having all the stuff a website needs bundled into a single file – the code, the style, even the pictures. You can drop this file onto any server, and bam! Your website’s up and running. It’s like having a magic box that holds everything you need. This idea opens up doors for simpler and faster ways to share and use websites, making the future of the web even brighter.