GUI skinning, scripting, and other stuff 26 1

everyone talks about the bugs and priorities when it comes to the enhancement of the site, but i wanna show you guys how important would be to have nicer graphical interface. i'm new to scripting so forgive me the hardcoded lines and bugs what i made myself :)

i've created the first userscript for vNations, which doesn't do much but modifies the events and the citizenbox look. it's not finished, though if i can make it fast enough (i'm planning to get a domain for it so i can host all the files there instead of public servers) i'll update it further.

here's a screenshot to see what you get if you install it:





if you wanna try look here: http://userscripts.org/scripts/show/163618
a short video tutorial how to install Tampermonkey and vNhanced under Chrome: http://www.youtube.com/watch?v=k-5MEjAUtT8

it's developed and tested in Chrome (Tampermonkey), if you wanna make it work under different browsers feel free to explore, just let me know what to correct.



the possibilities are endless including:

- fully customizable interface, you could choose what you wanna see (even it could be different in every page if you'd want to)

- implementing user themes (if a good framework is presented to the users i'm sure there would be enough enthusiats who would create such things)

- implementing custom functionality (if a good api is presented for this the same goes here)



in other words you could have your personal vnations, customized for your own taste.



UPDATE:

currency and vbux added, just hover over the button and you can see how much you got
military rank icon added
name added

instead of hover clicking on the button brings up the money panel
opening pocket shrinks the Global News L!ve accordingly

1.0.5.3 the script saves your settings in cookies (for some reason can't read the cookie in military pages, further improvement needed)




UPDATE2:

v1.0.5.7 Alien Invaders added back to the nation selection and the move selection dropdown menus, so you can move to their territory and also able to check their nation (Thiago Santiago's request)



UPDATE3:

due to the limitations of public web space some of the images are missing. vnhub.net is already working, once the script is transferred there i'll continue working on it

 
z78sabjan 93 Unread
13:59:10, 27/05/13 0
see UPDATE3
 
Ricsko 66 Unread
01:27:53, 25/04/13 0
really nice job, thanks. ;)
 
z78sabjan 93 Unread
08:51:39, 13/04/13 0
look, this would happen in 1024x768



you wouldn't be able to read half of it, and also you couldn't even use the scrollbar because of the overlap, only if you close it.

oh, one more, all the animations are done in jquery and css, this is how the template itself works
(Last Edited 08:57:08, 13/04/13)
 
z78sabjan 93 Unread
08:43:54, 13/04/13 0
if you mean how the GNL get resized that's the smartest i could come up with but correct me if i'm wrong:

- 1 container div for positioning on the page (that's raw_fluid, it's already there ingame i just used what the template using anyway)

- citizenbox fixed width float-right with a left margin
- global news live just fills the rest of the space

- when you open the pocket i don't actually resize GNL, instead changing the left margin of citizenbox

- this way because GNL is set to auto width it's changing it's size accordingly

this is the simplest and fastest way to achieve the next goals:

- make sure the two divs never overlap each other
- make sure the GNL is filling the empty space automatically
- make sure the gap is the same between them

besides z-index works only if the divs position set to relative, which is not always can be done in this template except if i delete and rewrite half of the page.

note: i've just tried and it works flawless in firefox too, though i'm not sure about slow pc's but keep in mind, the modal windows animations (such as when you click on the mail icon and it flies in) require more processing, in other words this margin resize will always be faster than the game's native animations anyway

note 2: i'm not testing in other browsers, it's written to Chrome, it would just take tremendous time to figure out how to make it really cross-browser, but if someone provides me suggestions with code snippets too then i'll implement it as soon as i have some time

ps. nearly forgot the most important part, the reason why i'm using auto width instead of overlaps is because of the different screen resolutions. not everyone using 1920x1080, and in smaller screens if you use overlap, the pocket and the future planned details simply cover part of the GNL, which makes it unreadable and useless, that's why i'm making the citizenbox as small as possible and avoiding overlaps
(Last Edited 08:49:28, 13/04/13)
 
SirDude 72 Unread
08:14:45, 13/04/13 0
Massino please be smart and don't resize blocks of the DOM like that. Instead just use z-Index and position: fixed. On slower pcs or mozilla I am in serious doubt this would be performance-likey to anyone.
 
z78sabjan 93 Unread
17:56:32, 11/04/13 0
short video tutorial how to install Tampermonkey and vNhanced under Chrome: http://www.youtube.com/watch?v=k-5MEjAUtT8
(Last Edited 17:56:59, 11/04/13)
 
Thiago Santiago 84 Unread
18:30:22, 10/04/13 0
Thanks.
 
z78sabjan 93 Unread
22:27:54, 06/04/13 0
o7
 
BLACK FOX 13 Unread
22:23:08, 06/04/13 0
http://prntscr.com/zifai
 
z78sabjan 93 Unread
18:02:10, 06/04/13 0
Artis15 depending on what browser you're using you must first install a plugin (Tampermonkey under Chrome, Violentmonkey under Maxthon, Greasemonkey under Firefox) then you can install the script
 
Artis15 22 Unread
17:05:58, 06/04/13 0
Cant install!
 
z78sabjan 93 Unread
20:59:35, 05/04/13 0
yeah they are perfect, they can be fully customized and written in jquery / pure css, the guy who wrote that code knows something :)
http://anthonyterrien.com/knob/
 
elnef 82 Unread
19:33:35, 05/04/13 0
I like it too!
 
Darkmyre 87 Unread
15:05:22, 05/04/13 0
I really like those circle-progress-bars
 
CheDavid 76 Unread
13:45:23, 05/04/13 0
Nice Sir! :D
 
Witze 22 Unread
03:14:34, 05/04/13 0
great!
 
z78sabjan 93 Unread
00:38:28, 05/04/13 0
new hover effect added see example image above
 
z78sabjan 93 Unread
20:10:28, 04/04/13 0
lol thx guys but i think xav can handle these things, besides i tend to ping-pong with myself, sometimes i play with graphics, sometimes i do coding and stuff, and sometimes i just too lazy to move my ass. this way at least no one can blame me for anything :P

just now that i'm learning user scripts i really understood how great the framework what vnat is using, easily changeable clean code, if we had some good scripters we could do amazing things with the site, i hope others will try it too
 
Maguilao 89 Unread
19:06:47, 04/04/13 0
Massino to vnations devteam! [2]
I think it is nice to have a team with mixed abilities.
(Last Edited 19:07:56, 04/04/13)
 
z78sabjan 93 Unread
18:07:54, 04/04/13 0
yeah man i'm still messing with it, i've tried @font-face a googlefonts public api already with no luck, probably i just use incorrect syntax but thanks! if i won't be able to call an external one i'll just stick to the already used fonts for now
 
SirDude 72 Unread
18:00:02, 04/04/13 0
Massino just google 'font-face' or 'embedding fonts' css3.


Or otherwise use this tip from me
@font-face is the way to embed fonts
the tricky part is that you have to have your font in several formats to work under every major web-browser - IE 7,8,9, Opera, Chrome, Firefox.

Read this blog post for more info http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
 
Diabl0 73 Unread
16:45:11, 04/04/13 0
Massino to vnations devteam!
 
z78sabjan 93 Unread
14:48:06, 04/04/13 0
:)) i used to go up just lazy lately
 
Thiago Santiago 84 Unread
13:39:32, 04/04/13 0
If I knew web stuff, I'd "troll" you to go to irc to discuss the problem, 'cause I know you wouldn't.
 
z78sabjan 93 Unread
13:25:57, 04/04/13 0
btw perhaps one of you could help me out a bit since i'm new to this stuff, i need to include an external font to the page, i'd need a simple way with js. i've tried google web fonts but besides it doesn't has the font what i need i couldn't get it to work either

http://www.dafont.com/good-times.font

this is the font i wanna inject
(Last Edited 13:26:31, 04/04/13)
 
CheDavid 76 Unread
12:04:25, 04/04/13 0
Hoppá 1 hiba: a te képed szerepel ezen a gmonkey kiegészítőn miután FFre felraktam magamnak.Ez nem túl jó :D:D:D
 
CheDavid 76 Unread
11:59:24, 04/04/13 0
Maxhtonra nem akarod megcsinálni? Vagy pmben meg tudnád írni,h miként tudnám arra átformázni?

 
Emilinero 94 Unread
11:09:30, 04/04/13 0
Great job, Massino!

I think the game is too graphic-static, since it is programmed almost exclusively in php. Many MMORPG sucessful games have got their GUI animated, real-timed and dinamic, with emerging windows and so. For example, if the War Module was implemented in a animated style, it would be great; or the simple Fishing Module too, with an animated shallow or deep waters alongside a coast, and a fishing rod instead the mouse pointer inside the fishing frame...
 

 
©2018 Darkmyre Gaming
Page generated in 0.0746s (70 SQL).
Sidebar switch