Skip to Content
 

Monster Keep — Preview of the Calculator

26 replies [Last post]
Wed, 04/10/2019 - 17:24
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!

Top
Wed, 04/10/2019 - 17:45
#1
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.

Top
Wed, 04/10/2019 - 18:03
#2
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!

Top
Wed, 04/10/2019 - 18:32
#3
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!

Top
Wed, 04/10/2019 - 19:30
#4
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!

Top
Fri, 04/12/2019 - 12:11
#5
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!

Top
Fri, 04/12/2019 - 16:17
#6
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.

Top
Fri, 04/12/2019 - 16:43
#7
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...!?

Top
Fri, 04/12/2019 - 23:16
#8
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.

Top
Sat, 04/13/2019 - 18:40
#9
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!)

Top
Sun, 04/14/2019 - 11:55
#10
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).

Top
Sun, 04/14/2019 - 14:05
#11
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"!

Top
Wed, 04/17/2019 - 19:54
#12
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!

Top
Sat, 05/04/2019 - 18:56
#13
questccg
questccg's picture
Offline
Joined: 04/16/2011
I've modified the icons a bit...

If you want to SEE the new "icons" for the various "stats", head over to:

http://www.monsterkeep.com

This will re-direct cellular users to the mobile-friendly page or to the default page used by computers and tablets.

On a secondary note, I checked how the page looks on tablets (as I do not own one of these devices)... And it looks pretty decent in Safari.

BTW the "icon" change is purely aesthetic but I also modified the "Tribute" to be "Morale" in both the mobile and default pages. "Morale Points (MPs)" are the reason your minions follow you as their leader. Once it reaches 0 MPs, your minions will follow you no longer and you lose the game.

Let me know what you think and if you "prefer" these icons over the others. Thanks!

Top
Sat, 05/04/2019 - 19:03
#14
questccg
questccg's picture
Offline
Joined: 04/16/2011
Looking to design ANOTHER "tool"

While it's easy to keep score on a PAPER... I think I might just design an electronic "Score Sheet". Maybe... It might be a bit "tricky" to design and develop. I'll think about it next week and see what I can come up with as a SIMPLE but EFFECTIVE design.

From there, if the amount of effort is "reasonable", I can TRY to implement it and see if we can have another "electronic" TOOL for "Monster Keep" (MK).

Cheers...

Top
Sun, 05/05/2019 - 21:46
#15
questccg
questccg's picture
Offline
Joined: 04/16/2011
The scoresheet is in development

Well I've spent the better part of the evening coding the "scoresheet" for the game. It's pretty simple to use, plug in values, auto-calculate, clear, etc.

It has a RED "Banner" for those who thought that color looked nice from the various card samples.

Unfortunately I won't finish it tonight. I guess I'll have to get back to it tomorrow in the evening. It's just very different from the "calculator" and requires a lot of "javascript", no JQuery, no form submission and no PHP.

It's pretty much a "static" page once the page gets loaded up and from what I have implemented so far. It's just that there are a LOT of "fields" and you can enable/disable them by choosing the player count. Anyways it's going to use some Javascript features to control the overall flow of the scoresheet.

Right now, you can basically say that I have a "shell" without the dynamic code to ensure all the score keeping is done correctly. Hopefully I can get it completed tomorrow evening and then upload a sample screenshot in anticipation of the real deal being uploaded to the Monster Keep (MK) website.

Any small but COOL "tool" for the game...

Top
Sun, 05/05/2019 - 22:00
#16
questccg
questccg's picture
Offline
Joined: 04/16/2011
I am also thinking about yet ANOTHER "tool"!

With the "scoresheet" being correctly designed and all that's missing is the "plumbing" ... I am thinking about yet ANOTHER tool for the game.

You must be wondering: "What else does this game need???"

And my answer to that is the "Monster Keep Generator"!

The "Generator" will allow you to configure DECKS and SAVE your own "configurations" in the database. This would of course require a database, user management, e-mail validation, etc. A bunch of stuff that I am not super expert on. In essence this tool would allow you to validate your configurations for different game play styles.

It definitely would be COOL too! It'll be a longer-type project since I have to add all kind of things to make THIS tool work. One of the "interesting" PERKS of this kind of tool, I don't need to BEG people for their e-mail. In order to register for the MK toolbox, you need to supply a valid e-mail and a confirmation e-mail will be sent to validate the account.

From there you can use the "Calculator" or "Scoresheet" with a minimal footprint and the "Generator" off-hours when you are at home to see what kind of decks you can build.

If have to think about this TOOL. It's going to be a MASSIVE undertaking. But it could definitely be cool too!

Top
Mon, 05/06/2019 - 16:36
#17
questccg
questccg's picture
Offline
Joined: 04/16/2011
Here's a screen capture of

Here's a screen capture of the PC web page (for the scoresheet):

As you can see it's not too complicated, features a scrollable region so that the form can stay "nice" to look at on mobile devices (Think SmartPhones).

I just got wrapped up with the last tid-bits of code that were missing. Things like "automated re-calculation", clearing the sheet, manual calculation, etc.

Tell me what you think!?

Top
Mon, 05/06/2019 - 23:18
#18
questccg
questccg's picture
Offline
Joined: 04/16/2011
New LANDING PAGE!

Now that I have enabled HTTPS/SSL on my "Monster Keep" (MK) website, I took the time to configure a re-direction from the base URL to an SSL version which insures that the browser doesn't give off a warning concerning FORM DATA... It basically used to say something like: "This site is insecure... Do not submit any password or credit cards information."

Which is bogus because the forms don't do anything, it's all AJAX.

But fair enough it was TRUE that the website's URLs was not secure. So I took the time to configure SSL and modify the redirection URL to be HTTPS.

Now BOTH the MK Calculator and MK Scoresheet work without any issues!

Good stuff...

Note: If you want to TEST the new landing page use this LINK/URL:

http://www.monsterkeep.com

Top
Fri, 05/10/2019 - 00:33
#19
questccg
questccg's picture
Offline
Joined: 04/16/2011
Evaluation of mathematical formulas

Well I did a very simple "tweak" to the Scoresheet:

Now it is possible to INPUT "mathematical" formulas and the score will be computed (providing it is a VALID formula/equation)

Examples: 1+2 or 15-5 or +1+2 or -1-1

You just need to be certain that the SYNTAX is valid. I did this because of the Morale value adjustments. Namely if you had "-10" and next earned "+3" morale during the same round, the logical input is: "-10+3".

And NOW that works!

Top
Fri, 05/10/2019 - 21:48
#20
questccg
questccg's picture
Offline
Joined: 04/16/2011
Going to ADD a "printer-friendly" option for the "Scoresheet"

I've been thinking about adding another option to the "Scoresheet" that could be beneficial. Specifically it could produce a "text" document which is printer friendly, so you can keep track of the evolution of the games you play.

This could be a dandy way of ensuring that tournament matches are easy to score via a simple "text" document as opposed to trying to re-write the information on a piece of paper.

Ideally you could TEXT the document to the person keeping track of the games during the tournament event. A special "text the results to SCORE (or 72673)"

Very interesting OPTION to be added to the "Scoresheet". I will work on this some time soon (maybe next week since Sunday is Mother's Day and I'm busy on Saturday also...)

But soon to come, cheers!

Note: It is also great for "sharing" among the players the results of a game. This is indeed a very POSITIVE option that must be required by the "Scoresheet".

Top
Wed, 05/15/2019 - 22:56
#21
questccg
questccg's picture
Offline
Joined: 04/16/2011
Modified to a "Save Results" .TXT file

I've currently managed to code a SAVE function. As of tonight, it prints the template for the "Scoresheet" but not all the fields, nor the scores. What it does NOW is return the number of players and the format of the .TXT file which can be saved locally on your OWN "device".

It should be friendly with all devices (PC, Laptop, Tablet, and Smartphone). It uses the "attachment" format to return a text (.TXT) document which has no HTML markup, only "textual" data.

Once you SAVE the attachment locally to your device, on a PC, Laptop or Tablet, you can e-mail the file to the Score Master who would then review the file and ensure that the results are accurate. From the Smartphone it might be possible to use an SMS text message with an attachment.

Of course this is not implemented YET... Just some concept-work/ideas concerning how the "Scoresheet" can be used for local tournament play...

I will hopefully FINISH off the SAVE functionality tomorrow. I still want to playtest it on a mobile (Smartphone) ... Just to ensure it behaves and works identically to the PC/Laptop/Tablet version.

Top
Thu, 05/16/2019 - 14:15
#22
questccg
questccg's picture
Offline
Joined: 04/16/2011
Continuation of the SAVE feature

Well I've managed to STORE in the .TXT file all the "row data" (From the twelve rounds). This includes equations/formulas AS-IS. A couple loops with some "massaging" of the input data was required to ensure that whatever gets sent, is automatically filtered and shortened (to 9 characters).

Next step is to get the calculations working (scores).

Although this too sounds like a couple of simple loops the function is already created but the calculation is hard-coded to return a "-1" for the time being. It works as all scores are reported as 38 points (50 - 12).

Most likely the calculations will be implemented tomorrow.

But we are definitely CLOSE to a working SAVE feature!

Update: I've removed some trailing spaces from the final column of detailed data. This makes the .TXT look a bit more presentable and therefore less "coded", more like a user written file.

Top
Fri, 05/17/2019 - 02:28
#23
questccg
questccg's picture
Offline
Joined: 04/16/2011
Here is the UPDATED version of the "Scoresheet"

Here is the UPDATED version of the "Scoresheet". It includes the Disk on the Right-Hand Side which allows players to EXPORT/SAVE the score into a local file on your device (PC, Laptop, Tablet or Smartphone).

I've done quite a bit of testing in both the client-side and server-side code (because the Regular Expressions "RegEx" are different).

Generally the RED = Error, BLUE = Formula, BLACK = Integer.

Top
Fri, 05/17/2019 - 15:53
#24
questccg
questccg's picture
Offline
Joined: 04/16/2011
Tools available on our website!

Just wanted to add that to access these FREE to use tools, simply visit:

http://www.monsterkeep.com

From the landing page, you can choose which of the tools you would like to use. If you select one, it will be opened in a "new" page and you can return to the landing page to select the other too.

For the time being, these will be the TWO (2) tools made available to players of our game. I hope these "electronic aids" may attract some people to the game... because of the "extra content" delivered by our game.

Cheers!

Update: I am now using the date/time as a timestamp for filenames. This is because on my mobile device (Smartphone), it doesn't give me the OPTION to "choose my filename". It just downloads the .TXT file directly to my phone. The problem with this is if you have several files, they will probably get overwritten.

So to fix this problem, I get the TIME() and use it for the timestamp of the .TXT file and the end timestamp within the .TXT results file.

Top
Fri, 05/17/2019 - 17:18
#25
questccg
questccg's picture
Offline
Joined: 04/16/2011
Sample .TXT file (from above)

Here is a sample .TXT file from the "Save Results" feature from the online "Scoresheet":

From the details you can see all twelve (12) Rounds and the content of each field (some were hidden because of the scrollable area).

Note: And yes I was up until 3:00 AM this morning working on the SAVE feature of the "Scoresheet". I was progressing well and I did not want to stop (before finishing). So I wrapped up the development and testing around 2:30 AM!

Top
Fri, 05/17/2019 - 23:42
#26
questccg
questccg's picture
Offline
Joined: 04/16/2011
Last playtest ... was quite "revealing"...

The final score was Player #1: 5, Player #2: 3!!! The game was an amazing epic battle until the very END!

The "Calculator" performs marvelously and allows players to avoid making any manual calculation mistakes, which is fantastic because that is what it was designed for.

However the "Scoresheet" was a bit confusing to use. I couldn't figure out where to input the score changes and needed to resolve to Pen & Paper just to figure out what had gone wrong with using the "Scoresheet"!

The SAVE feature was GREAT! But how some of the places where the bonuses and penalties occurred cause some confusion. I guess it needs more TESTING from an end-user's perspective. From the functionality, it works 100%. But I fail to see the advantage of the current design... I MAY (hope not) have to re-work the "Scoresheet" if my next playtest tomorrow fails to clear up the issues I am having with it.

I will let you all know how the results of the NEXT playtest go!

Top
Syndicate content


forum | by Dr. Radut