Skip to main content

News

Topic: Redesign of our Games Database (Read 4226 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.
  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
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>
  • Last Edit: March 22, 2014, 05:43:47 am by Radnen
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

  • Rahkiin
  • [*][*][*]
Re: Redesign of our Games Database
Reply #1
Nice idea!

I must say, though, that the graphical design is terrible :P

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
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

  • Rahkiin
  • [*][*][*]
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.

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
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

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
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 :)
  • Last Edit: March 22, 2014, 06:03:42 pm by N E O

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
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

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
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...

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Redesign of our Games Database
Reply #8

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

  • N E O
  • [*][*][*][*][*]
  • Administrator
  • Senior Administrator
Re: Redesign of our Games Database
Reply #9


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.

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Redesign of our Games Database
Reply #10


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...

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
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.
  • Last Edit: March 25, 2014, 02:53:45 am by Radnen
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