Introduction

One of my first interactions with web development was making a game websites so I wasn't bored in class. But eventually someone goes OH what's that? How are you playing games without them getting blocked? And then its everywhere then I'm in the principles office and then its blocked and gone. Anyways that was a while ago and I want to go back and revisit how I wrote this website since I was at the start of my fascination with coding and software in general. And I also want to try and go back to clean up that code as well.

First look

The games

Ok first we have to clone the repo which is gonna take a while (3GB).

git clone https://github.com/awsome-webdev/awsome-webdev.github.io

I open it into vscode and it is a mess... i have styles for different things in different folders, I have some games in other folders. In the scripts folder there are just random scripts. along with all of this it is just so messy like I don't have just one function for opening games I have one function for each game! which is sooo terrible. I also have hard-set styles for each game icon instead of a script for rendering background game previews like WHAT. so currently my typical style for rendering game icons look like this:

    #crossyroad:hover{
        background-size: cover;
        background-image: url( animations/crossyroad.png);
        background-position: center;
    }

And for actually opening games my typical function has this:

     function basketballstars(){
        const nparent = document.getElementById("nparent");
        const parent = document.getElementById("parent");
        const app = document.getElementById("app");
        app.src = " gamepages/htmlgames/html5/basketballstars/index.html";
        app.style.display = "block";
        parent.style.display = "none";
        document.getElementById('sidebar').style.display = "none";
        document.getElementById('x').style.display = "block";
        close = 1;
    }

I literally have a 1664 line html document full of these functions and styles.

The movies

For a while I had a movie page that used vidora.su as an API to movies without popups. Awesome! until Vidora came down and now it just doesn't work, so I have already been working on my own Fronted where I can interchange stream aggregators.

Refactoring

The games

so first I am going to start replacing these stupid game function with this one function:

    function opengame(path=null){
        if (path){
            try{
                if (type == 'path'){
                const nparent = document.getElementById("nparent");
                const parent = document.getElementById("parent");
                const app = document.getElementById("app");
                app.src = path;
                app.style.display = "block";
                parent.style.display = "none";
                document.getElementById('sidebar').style.display = "none";
                document.getElementById('x').style.display = "block";
                close = 1;
                }
            }
            catch(e){
                console.log(e)
                alert(`an error occured: ${e}`)
            }
        }


    } 

This already deletes sooooo many lines of code it is insane went from 1679 lines to 853! For all of the styles I am just going to leave them because if anything i would just change them to inline but their really isn't a point since I am not going to make a JSON system for finding and rendering all of the games on the homepage.

Movies

For the movies I am just going to put in a UI I made for Videasy and Vidking. But the thing is I made it as a flask app so I will have have to redirect API calls using a service worker to make the TMDB calls. Now this UI isn't even fully working like I still need to add in the search and The series button does not work. But where just gonna give a little warning about redirects from the streaming provider and call it good.

That's It

That's pretty much all I can do at the moment without reorganizing the folder structure and breaking things. But here is the repo and this is the website.