forum.webdiplomacy.net

webDip dev coordination forum / public access todo list
It is currently Mon Oct 23, 2017 4:58 pm

All times are UTC




Post new topic Reply to topic  [ 49 posts ]  Go to page 1, 2, 3, 4, 5  Next
Author Message
PostPosted: Wed May 22, 2013 7:19 pm 
Offline

Joined: Tue Nov 15, 2011 2:54 pm
Posts: 44
Hello everybody!

I'd like to present the current project I'm working on: An interactive Map, on which the user can enter his orders directly by clicking on the map. In addition to that the orders are immediately drawn on the map.

The purpose of this mod:
- avoiding misorders
- an easier/quicker way to enter moves

Features:
- direct order-input on the map
- direct order-output on the map / orders are directly drawn on the map (also orders which were set via the regular order-interface)
- many specific error messages if the user tries to set a wrong order on the map (which couldn't be set via the regular order-interface)
- if a unit should support the move of another unit, the move of the other unit is set as well, if it wasn't set this way before.
- convoy-orders are set in a different way: The user first selects the army that should be convoyed and then the fleets that should convoy the army and then the target territory for the army. All orders for the army and the fleet are set in one step!
- if a fleet should move to a territory with different coasts or should be build on such a territory, it will be automatically detected if there is only one possibility or if there are different coasts possible. In the second case the correct coast is detected by the distance between the coordinates of the coasts and the position the user clicked on.

How it works:
A user select a unit by clicking on its occupied territory on the map. Then he selects the order he want to give via a button . If the order is possible for this unit, the user can select more territories, if needed for the order. After the order is complete, it is drawn on the map and the user can set the next order. Each step of the order-setting is documented by an extra text-area I called "Order-Line" and by the drop-down lists in the regular order-interface (e.g. after the button "MOVE" is pushed, 'move' will be selected as 'type' for the selected unit).

The mod definitely works with the classic variant and definitely not works with FoW variants

How I implement(ed) it:
The whole code is written in JavaScript using many of the prototype functions. Many of the global objects declared somewhere else in the existing code are used as well. (e.g. Territories, Units, context ...)
When a user activates the InteractiveMap-Interface, the image for the map is a replaced by a canvas. On the canvas the same map is displayed but without orders (I used the "hideMap"-feature of vdip for this; if it isn't available, the code should work as well, but the map would still display the moves from last turn which could be annoying during the order-input).
If a user now clicks on the map, the coordinates of the mouse are detected. Now a function compares the color at this coordinate of the map with the color at the coordinates of the territories until it gets a matching results. For this an extra image is loaded, which represents the map with different colors for each territory. For the classic variant you could simply use the FoW-map, in which the sea-territories are colored as well.
After the territory is detected the user can now click on one of the order buttons. It is checked if the order is valid, the selected order type is set in the right drop-down list and the is updated to existing javascript via the inputValue-function in order.js. The same happens for the selected territories to complete the order. After the complete order is set, it'll be drawn, or better said, the whole map will be redrawn using the Data stored in MyOrders.
I copied functions of drawMap.php into my js-file, so the arrows and symbols will look the same as if I had reload the whole page with updated orders.
Finally the user have to press the "SAVE" as normal to save his entered moves.

When I decided to create this mod 1 1/2 weeks ago, I didn't know anything about JavaSkript, but with the help of a nice tutorial and a good reference at w3schools.com and my best friend google, I was able to understand enough to build this mod. But this and less programming experience in general lead to a code, which is over-worked many times and probably don't have a good structure. The whole thing could probably be better implemented as well, but at least its working. :)

The mod isn't finished. It should work for the Diplomacy-Phase, but the Retreat-Phase is still missing and the Build-Phase I plan to over-work another time. So the following is, what is still to do:
- implementing the Retreat-Phase (inclusive draw-function)
- over-working the Build-Phase
- comment the code and make it more readable
-TESTING

The first two points I will have finished by the weekend, most functions already exist. The third point hopefully as well
For the testing I'd like to ask you. I've tried to test every possible situation but of course this will never be possible. Also I have only tested the code on Firefox and Safari. I don't know if there will be any browser-issues. @Oli/Sleepcap: It would be awesome if I could test it on your lab.diplomacy-site with real players in a "real game".
The code should work with all webdip-versions, with the restrictions of the hideMove feature, but I can't be sure about this as well (maybe the global objects I used aren't available in earlier versions).
I haven't take the time to prepare maps, so I haven't tested other variants so far. I think as it is now, the code won't work for maps with scrollbars, but that should be easily adjusted.

To install the mod, you have to extract the interactive.zip as a folder into javascript, so the files are stored in javascript/interactive.
Then the following have to be added into board/orders/orderinterface.php in the jsLoadBoard() function:
Code:
protected function jsLoadBoard() {
      libHTML::$footerIncludes[] = 'board/model.js';
      libHTML::$footerIncludes[] = 'board/load.js';
      libHTML::$footerIncludes[] = 'orders/order.js';
      libHTML::$footerIncludes[] = 'orders/phase'.$this->phase.'.js';
      libHTML::$footerIncludes[] = '../'.libVariant::$Variant->territoriesJSONFile();
                //added
                libHTML::$footerIncludes[] = 'interactive/interactiveMap.js';
                libHTML::$footerIncludes[] = 'interactive/interactiveMapDraw.js';
                libHTML::$footerIncludes[] = 'interactive/interactiveMapOrders.js';
                libHTML::$footerIncludes[] = 'interactive/interactiveMapButtons.js';

      libHTML::$footerScript[] = '
      loadTerritories();
      loadBoardTurnData();
      loadModel();
      loadBoard();
      loadOrdersModel();
      loadOrdersForm();
      loadOrdersPhase();
                loadIA();
      ';//^added
   }


It would be great if you have time to test it on your system and report some issues. :)


Attachments:
interactive.zip [16.98 KiB]
Downloaded 254 times
Top
 Profile  
 
PostPosted: Wed May 22, 2013 7:21 pm 
Offline

Joined: Tue Nov 15, 2011 2:54 pm
Posts: 44
Some screenshots of the interface:

Attachment:
IA_displayEnteredOrders.png
IA_displayEnteredOrders.png [ 98.26 KiB | Viewed 4526 times ]


Attachment:
IA_displaySavedOrders.png
IA_displaySavedOrders.png [ 105.23 KiB | Viewed 4526 times ]


Top
 Profile  
 
PostPosted: Wed May 22, 2013 7:26 pm 
Offline

Joined: Tue Nov 15, 2011 2:54 pm
Posts: 44
And another two screenshots:

Attachment:
IA_enteringOrders.png
IA_enteringOrders.png [ 142.64 KiB | Viewed 4526 times ]


Attachment:
IA_alert.png
IA_alert.png [ 199.17 KiB | Viewed 4526 times ]


Top
 Profile  
 
PostPosted: Wed May 22, 2013 7:44 pm 
Offline

Joined: Wed Jul 29, 2009 10:22 am
Posts: 841
Very cool.
Will test this as soon as possible...


Top
 Profile  
 
PostPosted: Thu May 23, 2013 8:40 pm 
Offline

Joined: Tue Nov 15, 2011 2:54 pm
Posts: 44
An adjusted version of the code. I missed a "=", which caused some problems. Now the code should work again. :)

The second file is the map, you have to add in the variants/classic/resources-directory, so the mod can detect the right territory.


Attachments:
IA_smallmap.png
IA_smallmap.png [ 18.33 KiB | Viewed 4516 times ]
interactive.zip [16.99 KiB]
Downloaded 219 times
Top
 Profile  
 
PostPosted: Fri May 24, 2013 4:55 pm 
Offline
Site Admin

Joined: Sat Jun 28, 2008 6:24 am
Posts: 892
Wow, that's not bad as a first javascript project. Double points because the order generation code was my first javascript too, so writing on top of that won't be easy. Hope you didn't pick up any bad practices.

Very interested to see what sleepcap makes of it, as it does seem a bit experimental at the moment, but I'm very interested to see where this goes, and could definitely see it becoming part of the official code.

Congrats!


Top
 Profile  
 
PostPosted: Sat May 25, 2013 5:39 am 
Offline

Joined: Wed Jul 29, 2009 10:22 am
Posts: 841
I've released this as "OptIn" on the vDip website.
It works for Modern2 and Classic games at the moment.

I used this for some time on my dev-server and will post my thoughts after some more players tried this.


Top
 Profile  
 
PostPosted: Sat May 25, 2013 4:27 pm 
Offline

Joined: Wed Jul 29, 2009 10:22 am
Posts: 841
In order to load different IA_smallmap.png's I changed the orderinterface.php->jscreate.
Code:
libHTML::$footerScript[]   = 'loadIA("variants/'.$Game->Variant->name.'/resources/IA_smallmap.png");';

And in your JS-code:
Code:
function loadIA(IAmapPNG) {
...
    loadIAmap(IAmapPNG);
}

function loadIAmap(IAmapPNG) {
...
    imgIAmap.src = IAmapPNG;
}


Top
 Profile  
 
PostPosted: Sun May 26, 2013 7:36 am 
Offline

Joined: Wed Jul 29, 2009 10:22 am
Posts: 841
Hi tobi1,

I've send you the old SVG-files from figlesquidge, check your PMs, please.


Top
 Profile  
 
PostPosted: Sun May 26, 2013 6:55 pm 
Offline

Joined: Tue Nov 15, 2011 2:54 pm
Posts: 44
Hi!

I completed the code for the Retreat- and Build-Phase today.
I also inserted the suggestions of Sleepcap for different variants. To get it running I had to add "global $Game" in jscreate-function.

The updated code:
Attachment:
interactive.zip [18.84 KiB]
Downloaded 253 times



My TODO-list for the next days:
- overwork the whole code (e.g. many functions work with the territory name instead of the unique id) and make it easier to understand
- implement a large map for entering orders on an extra window
- implement a function for Sea-Territories so no extra map has to be prepared for every variant
- ...

Sleepcap wrote:
Hi tobi1,

I've send you the old SVG-files from figlesquidge, check your PMs, please.

Thanks!
I have looked at the files, but as SVG is completely different to canvas I don't think, I will find much that could be useful for this project.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 49 posts ]  Go to page 1, 2, 3, 4, 5  Next

All times are UTC


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB® Forum Software © phpBB Group