Skip to main content ↑ ↓
Topic: Redesign of our Games Database (Read 91525 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Redesign of our Games Database

Possibly even a redesign for this Website in it's entirety.

So, guys, I've been playing around with Angular.js and I have made a really nice website for finding your favorite games. I made this for my personal website and I think I can expand this easily to include all games made for Sphere.

Website is here: http://radnen.tengudev.com/testsite

Angular.js made the above possible in only a few dozen lines of js and annotated html. It's really a miracle-worker in terms of programming your website. I have tags, a database, pagination, images, plus soon the ability to link into a personalized game page. What do you guys think?

How to use:
Click on tags to filter to the genre/tag of the game. Use the searchbar to do '*' searching on everything within the designated tag. Click on the tag on the search-bar to remove it (it'll highlight red).

Planned feature: a quick download button off to the side of each entry. Multi-tag searching.

The current games database exists as a JSON object, like this:
Code: (json) [Select]

[{"name":"Blockman", "desc":"fghfgh",...}];


I guess it wouldn't be hard to make a moderator-level entry view in angular so moderators can input games straight into the JSON db through a web frontend. It's so small now I've just been manually adding entries to it.

I am using my link.js library to do lazy evaluation on pagination so I don't have to splice large datasets. I feel like it makes things faster. <shrugs>
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

Re: Redesign of our Games Database

Reply #2 –
I'm not a graphic designer! :P

But I must say, angular makes it really easy to do all of that, from scratch! Otherwise I'd end up using a lot of jQuery and various messy libraries or plugins to achieve that. This I can tweak all day.
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

Re: Redesign of our Games Database

Reply #3 –
Make full width about 90%, use smaller corner radius. Use softer colors. Create a body around all the items, so that they don't seem to fly. And the black text shadow is annoying, maybe don't use black, but a darker green (for the green text) and a gray for the white text, to keep the retro style.

Re: Redesign of our Games Database

Reply #4 –
Ok, I changed up some things.
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

Re: Redesign of our Games Database

Reply #5 –
It's got that same outer border-radius + inner border-radius inconsistency I once told you about long ago, and I'd personally put the total count at the top near the Num Per Page picker and set it off more prominently. Otherwise, good idea!

Design-wise, if I were to implement that on this site I'd go closer to DaVince's SpheRun game list visual design, which also jives with the visual design on the custom forum theme I haven't yet finished.

Implementation-wise, I want to finish the forum theme first (I know, I've been promising that for months :( ) and then modify the main site to match. I myself have been playing with Angular.js and Firebase with much preliminary success and am almost certain that I'd be using the combo for an official games database. In the meantime, people are free to use whatever design and distribution system for their projects on their own sites as they please and that they can continue to choose to do so even after the existence of an official games database on Spherical :)

Re: Redesign of our Games Database

Reply #6 –
Having the forums themed would certainly help with consistency. Changing the design of an angular app is really very easy, so I'm sure I can tweak it to match really anything.

If this isn't used for the official database, I still made it for my website, because I tend to make a lot of games. :P
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

Re: Redesign of our Games Database

Reply #7 –
Nice! Would be nice if you made the URL change accordingly whenever you switch to a specific category or do a search.

Quote
Design-wise, if I were to implement that on this site I'd go closer to DaVince's SpheRun game list visual design, which also jives with the visual design on the custom forum theme I haven't yet finished.

I'm looking forward to your custom forum theme. Think I could still improve the design I have in SpheRun, myself...

Re: Redesign of our Games Database

Reply #8 –
Quote from: DaVince – on

Nice! Would be nice if you made the URL change accordingly whenever you switch to a specific category or do a search.


I don't know how with Angular.js, it's definitely not like php where I cold do something like "/site/?search="";"

I'm messing around with the color theme, trying out themes from https://kuler.adobe.com/create/color-wheel/
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

Re: Redesign of our Games Database

Reply #9 –
Quote from: Radnen – on

Quote from: DaVince – on

Nice! Would be nice if you made the URL change accordingly whenever you switch to a specific category or do a search.


I don't know how with Angular.js, it's definitely not like php where I cold do something like "/site/?search="";"


Search for ngRoute examples to make URL handling happen. If I was on my PC right now I'd paste how I'm doing it in my NFora scripts.

Re: Redesign of our Games Database

Reply #10 –
Quote from: Radnen – on

Quote from: DaVince – on

Nice! Would be nice if you made the URL change accordingly whenever you switch to a specific category or do a search.


I don't know how with Angular.js, it's definitely not like php where I cold do something like "/site/?search="";"

Is there no way to do /site/#search=a and rely on window.location.hash? I used that successfully in a few jQuery-based scripts...
 

Re: Redesign of our Games Database

Reply #11 –
There is a way, yes I've looked into it. But angular won't inject $locationProvider into my controller. Otherwise I have the code theoretically working. I'm not sure I can do it your way DaVince since I think Angular needs to be particular about the path. I could try that out of course... we'll see.

Edit:
I was able to get that working, plus a whole lot more. Now you can switch pages to the games' page (only the first 3 games work in the list).

The Url does contain an extra '#' in it and I don't know enough angular to remove it. I did have it removed but page-routing got screwed up. It seems angular is very choosy in things and hard to get right.
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here