Skip to Content

Monster Keep — Preview of the Calculator

12 replies [Last post]
questccg
questccg's picture
Offline
Joined: 04/16/2011

Here is a "preview" of the "Monster Keep" (MK) Calculator. I know it looks rather simple... But it's taken me about 8 hours to get the web page to look like this. As usual HTML is not the easiest language to format, especially when working with CSS 3.0 and trying to do most of the formatting in the CSS file...

It you click on the IMAGE, that will bring you the calculator's page on BGDF. From there you can learn HOW the page will work and how I hope to improve on the "Look & Feel" of the webpage too...

Cheers!

let-off studios
let-off studios's picture
Offline
Joined: 02/07/2011
Everything is Pre-Loaded

Something that would make this kind of tool very useful for a player is a way to select the card from a drop-down list, and " + " and " - " buttons next to each of the attributes.

When clicking on the "Card #1" box all card types are listed, and the player can scroll through the list to select the proper card. The same can be done for "Card #2." Modifier buttons next to each attribute can be tapped after the default values are displayed, or maybe there can be icons in the blank area at the center of the screen to modify all attributes with a single click. Imagine having an icon that indicates "higher ground," or "opponent is stunned," or whatever status types you have in the game that call for modifers.

So instead of having to type in anything, you simply tap a few buttons, including those for the modifiers, and the encounter is resolved.

The technology is there. It seems to me just a matter of being able to configure and link a database to your web application.

questccg
questccg's picture
Offline
Joined: 04/16/2011
Those are some good IDEAS!

I like where you are going with the "listing of cards" and the "+/- spinners" ... I'll look into those options to see how difficult and how compatible those HTML elements are.

That's the problem sometimes with "technology": it's not always BACKWARDS compatible for all browsers. Now I know IE 8 and below probably don't support HTML 5 ... and I will examine those "controls" you've suggested.

But I am planning to use AJAX and the asynchronous updating of the stats and so forth as "refresh-able" controls that you can tweak manually.

I'll take a look into those details further. But I like what you mean!

questccg
questccg's picture
Offline
Joined: 04/16/2011
Okay an UPDATE!

I've checked and the "Drop-down Lists" are HTML compatible and good for all browsers. So I've implemented those in the dummy table and it should be good and compatible for all browsers.

I'll dynamically load the list based on the PHP source CSV file which contains all the "different cards and stats". So this is very possible.

HOWEVER your "+1/-1" Spinners are only HTML 5 compatible. So because of this, I will NOT be implementing the spinners. I know most people are using HTML 5 compatible browsers but IE 8 is NOT compatible and there are still some people using that browser today.

So 50% of your suggestions is better than none... And quite frankly I'm a bit disappointed that the SPINNERS were not IE 8 compatible.

Oh well ... we live with what we have.

Cheers!

questccg
questccg's picture
Offline
Joined: 04/16/2011
Modified the form a bit

I created some bit-maps (16 x 16 pixels) icons for the STATS. It looks a bit more presentable. In the screenshot, I feature let-off's request for drop-down lists for the cards. I could not implement spinners (+/-) at a glance because they are for HTML 5 only and it's not supported by IE 8.0.

Anyhow if anyone has additional comments, feel free to post.

Thank you!

questccg
questccg's picture
Offline
Joined: 04/16/2011
AJAX for asynchronicity

Now the calculator refreshes when you select a card from the dropdown list and uses an ASYNC call (AJAX) to get the card information and then plugs in the values into each text box (automatically).

When you modify a value in the text boxes, it will turn that value GREEN to indicate you have modified a stat. If the input is non-numeric, it will turn RED (to indicate a bad value) and now that stat will be treated as a 0.

The RESET button restores the card's default values before editing.

Although the calculator re-calculates selections automatically, when you plug in custom "Tribute" adjustments (+/-), you must click on "Calculate" to get the correct amount.

It's taken me about 1 day to get it all working (8 hours). I wanted something that has a TINY "footprint" and this webpage does exactly that. No need to "refresh the page continually", requires only ONE loading (initial)... After that it can operate with minimal amount of bandwidth.

So it's not a HOG on your DATA PLAN when you use it via your MOBILE device (SmartPhone).

Over the weekend ... I plan to put it ONLINE. And try it out!

Fri
Offline
Joined: 09/06/2017
Thoughts/Recomendations

You can probably embed the data you are retrieving from your AJAX call in a JSON on the page. This would increase the foot print some, but has the advantages of being more responsive and being able to work even the internet connection is broken.

You can also bind an event to the onkeyup event to make so that the user does not have to click on the calculate button.
https://www.w3schools.com/jsref/event_onkeyup.asp

You may also want to look at input html elements with a type=number. These are not supported by IE8, however they gracefully degrade into a regular type=text input html input
https://www.w3schools.com/tags/att_input_type_number.asp

Feel free to reach out via PM if I can be of assistance.

Good luck with your page.

questccg
questccg's picture
Offline
Joined: 04/16/2011
Thanks for your input!

Fri wrote:
You can probably embed the data you are retrieving from your AJAX call in a JSON on the page. This would increase the foot print some, but has the advantages of being more responsive and being able to work even the internet connection is broken.

Cool. But I've already implemented the data file as a CSV. To update the calculator, all I need to do is update the CSV and the website can compute more values. But kudos to you about thinking about using JSON. I looked it up and yeah I could put all the SERVER-SIDE code into the CLIENT... But then that's probably not a good "best practice".

Fri wrote:
You can also bind an event to the onkeyup event to make so that the user does not have to click on the calculate button.
https://www.w3schools.com/jsref/event_onkeyup.asp

I actually WANT to force clicking the "Calculate" button when Tribute values are specified. So for DEFAULT cards and NO "tribute", the computation is already AUTOMATIC. Therefore I am already doing something similar (I am capturing the 'onchange' events from the combo boxes).

Fri wrote:
You may also want to look at input html elements with a type=number. These are not supported by IE8, however they gracefully degrade into a regular type=text input html input
https://www.w3schools.com/tags/att_input_type_number.asp

I saw the Number HTML 5 element. Did not know that they can "degrade" into just regular text fields... Again thanks for the "heads-up"... It's good to know. But I tried to keep it as BACKWARDS compatible as possible.

But thank you for your advice... I've pretty much considered all except the JSON and I don't want to embed "server-side" data into the client. The AJAX calls are relatively FAST. And they protect the content from malicious editing (like if we used Johnny's HACKED version, the computations might be different than the GENUINE version...) Never know...!

Update: Concerning the Number Input element... Just as a FYI, I found:

"Note: < input > elements with type="number" are not supported in Internet Explorer 9 and earlier versions."

This to me doesn't sound like "backward compatibility" or "degrade" support. But I could be wrong...!?

questccg
questccg's picture
Offline
Joined: 04/16/2011
Mouhaha!

Well I uploaded the most RECENT version of the "Monster Keep" (MK) Online Calculator!!!

What is EXCITING, is now the calculator has "Spinners". Those Up/Down arrows which allow you to increment the values without needing to ENTER text in the input boxes...

What is COOL about this is?

I programmed it all from CSS/HTML/Javascript using a couple 9 x 9 PNG images.

I also condensed the Javascript functions and tightened up the HTML/PHP markup... I am real proud of this, because I don't use HTML 5 to make it happen. This version of the calculator MAKES it happen and it's backward compatible to IE 8.0!!!

Cheers.

questccg
questccg's picture
Offline
Joined: 04/16/2011
Golly Gosh Darnit!!!

Well I created the domain, configured the NameServers and uploaded ALL of my "Monster Keep" (MK) calculator files. When I browse the page it looks all great from my laptop or PC. BUT when I view the site on my SmartPhone... It's a bit of a different story. Let me explain.

While the "spinners" work great on the laptop or PC, they are so freaken SMALL on the SmartPhone, you need to constantly Zoom In/Zoom Out to be able to use those buttons. The other point is that the "textboxes" are rather SMALL too! It's like the AWESOME design on laptop or PC is GREAT ... but is a HORROR STORY on the "SmartPhone".

It's just NOT a "functional" design.

I've seen that on some "websites" you have the OPTION of choosing PC or Mobile versions of a website/web page. I am thinking this is what I NEED. I will KEEP the laptop/PC version intact (because it's pretty darn cool and it works perfectly AS-IS) and create a MOBILE version with LARGER controls (textboxes, spinners, dropdowns, etc.)

It should be possible with some CSS corrections and maybe a "re-formatting" of the PHP page too (for the "SmartPhone")...

One thing that I learned today is DEFINITELY a DIFFERENCE between what you SEE on your PHONE and what you see on your laptop/PC. I don't think this will INFLUENCE the "core" of the site... You'll still use AJAX and there will still be two (2) buttons. But everything will be LARGER and there will be a NARROWER page (let's see IF I can design something that will look reasonable on the "SmartPhone").

This will be my project for NEXT week (starting on Monday). I'll sit down and get a few LAYOUT ideas and see what works best. I have some ideas that seem cool ... but I'll need to see what is FEASIBLE and what is too "creative" for HTML 4.01.

So this is my project for the week and I'll think about layout tonight and during the day tomorrow (Since the Master's has been "cancelled" ... or the usual coverage which was in the afternoon!)

questccg
questccg's picture
Offline
Joined: 04/16/2011
I finished up the "mobile" version of the calculator

Here's a screen capture of the mobile web page (for the calculator):

Looks great on my SmartPhone! I of course had to muck around with the code locally versus on the web server...

But I finally worked out the files and the Mobile-vs-PC code to ensure that I could automate everything via the web.

Cool beans!

Update: This mobile-friendly version is also compatible with IE 8.0 ... but I doubt such an OLD browser will be installed with most modern day "SmartPhones". Maybe the old Blackberries may require compatibility.

In any event... They should be COMPATIBLE because I ensured no HTML 5 elements and very generic code (Javascript and JQuery).

questccg
questccg's picture
Offline
Joined: 04/16/2011
One additional FIX

I found it STRANGE that the browser would OPEN and the mobile page would be so SMALL! I Googled a bit and found the missing piece: on mobile devices you require a viewport up in the HEAD of the HTML (or PHP) page.

I modified the SERVER's files and ... VOILA it now appears BIG (Full Screen almost) and you can of course Zoom In more (which is okay). But you can't shrink the page any smaller (which is what I wanted).

Pretty darn cool all this "technology"!

questccg
questccg's picture
Offline
Joined: 04/16/2011
An additional COMMENT

I really think this TOOL is good for the game (and its players). But moreover, it allows me to DESIGN "New" cards and TEST them out "locally" on my computer before even releasing them to the public ... I mean, yes the cards need artwork but just the STATS alone can be compared to the "existing" cards and see how they interact (well or not) with the other cards in the collection.

Really, really am happy that I took last week to design, code, test and deploy this tool. It's been helping me out (playtesting) and designing stretch goal cards too!

Syndicate content


forum | by Dr. Radut