[Release] Magic the Fappering card game

[Lobster]

Thanks, I think that gives me a route to progress forward.

For reference, this is what my thrown together version looks like:

I don't plan on having it knowing anything about the cards but I do want it to have buttons for moving them around for all the required places.

I can make that version available if people want it. It does require running an exe (C# is the software I know so that's the easy way of doing it for me) so I will provide the source code as well for anyone who wants to check it.

I've subsequently added a back to cards so the deck isn't invisible (and this means I can do the flipping/rotating stuff that sounded horrible without issues) and I plan on significantly changing the buttons and allowing the user to select the field cards (which are currently broken in the new version) in order to view/discard/whatever them.

- Rather than one big library, we could release sets - Senran Kagura set, Redrock set, fetish sets, etc - to keep card numbers manageable and to make customising better

I like this idea. It would be pretty easy in my code to have a folder structure of different sets and you select a specific set, a random set, or cards from any set. So:
MTF\cards\SenranKagura\*
MTF\cards\Redrock\*
etc
Then you pick:
SenranKagura only - you'll get 30 (or however many) cards from that set
Random set - you'll get 30 cards from a single set but it could be any of them
Fully random - you'll get 30 cards scattered around all subfolders

Can probably also limit the fully random to several chosen sets too

[JeriKING]

I added the links of TypingMad and apant2222 to the original post, I still have to test the tts and look through all the generated cards in CardCraft will do soon.
Lobster I really want to check that version, looks really interesting. Could it be done something like I don't want X set to appear in the deck? Maybe someone is not into monstergirls and wants to disable them for example

And I'll sort the current cards in sets, will edit this post with the sets and card numbers as I do them

Sets:
-Senran Kagura: 1-72, 77, 78, 80-84, 103-108,317, 318, 320, 579-582
-Redrock: 299-304
-Crystalclear: 289-295
-Schemes: 73-75, 79, 85,86,87,89,117
-One piece:109-120,338-342,453,526,
-Nintendo: 143-146,576-578
-Monster girls: 125-140,149,150,542,544,546,
-Bosses: 88,90,100

[Lobster]

Lobster I really want to check that version, looks really interesting. Could it be done something like I don't want X set to appear in the deck? Maybe someone is not into monstergirls and wants to disable them for example

V1 Mega link

That link provides the files you need. I've included a readme for where to have the images (same folder as the files) and a folder with the source code in.

Yea, something where you select the ones you're interested in (or unselect the ones you're not) would be easy enough (although if you never want them, you probably just wouldn't keep the files there)

V2 progress:

The hand has 3 more cards behind it (any drawn from the draw pile or revived are added to the back of that pile).
Exile deletes the card from this game.
The buttons under the hand and discard pile allow you to search through them (or select a random one).
The back of the card on the draw pile is just a google search for MTG card back. A MTF one would be better but I have no artistic ability.

[BallsBAM]

Sorry I couldn't resist I looked at the code and downloaded everything, it's well done even the dimensions are not disproportionate, from V1 I think it would also be necessary to add the randomly discard keys from the deck to accommodate the discard effects for example of Assassin (50) It would also serve the function of putting the card under a card on the field and being able to separate the discard pile there are some cards that do this, it would be enough to create a second discard pile and choose each time, also need the function to discard cards from the field though is maybe more complicated.
Perhaps widening the view of the cards on the field a little even reducing those of the deck and discards a little could be better

[Lobster]

Sorry I couldn't resist I looked at the code and downloaded everything, it's well done even the dimensions are not disproportionate, from V1 I think it would also be necessary to add the randomly discard keys from the deck to accommodate the discard effects for example of Assassin (50).
Perhaps widening the view of the cards on the field a little even reducing those of the deck and discards a little could be better

I have a button to discard (or exile) the top card now. Along with rotating and flipping. V1 does have the issue that it's designed specifically for the first images Jeriking shared which were a set size. I've fixed that in V2 so it will scale any image to fit.

I'm still not 100% decided on how to do the field cards. They need to be discard-able (possibly via a return to play to simplify it). Clicking one to make it join the back of the hand could work. Or maybe clicking it just makes it bigger and then buttons appear to move it wherever (need to consider any cards that have been placed behind one too and what to do when there's more than 9 of them). You are right that they either need to be bigger or possible to make bigger (or both). But also, the bigger they are, the less fit on the screen. Initially, I think I had more like 15 spaces but they were even less legible.

For the more than 9, I'm thinking a couple of scroll buttons like the Prev/Next ones there already are. Maybe use that with something to say that the one in the middle of the screen is the selected one and buttons by that to do all the actions...

V2 layout tweaks:

[notSafeForDev]

Neat to see I'm not the only one intrigued enough to create a program for this.

Here's something I have been working on:

MtF.png (939.48 KiB) Viewed 5943 times

It displays:
* Total number of strokes for the drawn card (15)
* Total cards remaining in deck (15)
* Total cards in discard pile (36)
* Cards in hand (3)
* Active cards along with any added strokes for each of them (7)

Hovering over any drawn card scales it up, to make it easier to read.

It uses a json file to define what each card does, for example:

Code: Select all

{
        "name": "bloom",
        "color": "green",
        "strokes": 15,
        "effects": {
            "addStrokes": {
                "turns": 3,
                "value": "(turn - self.lastPlayedTurn) * 5"
            }
        }
    },

Each card can have a set of effects, in this case, the bloom card has the addStrokes effect, which will last for 3 turns and add strokes based on the current turn value and the turn the bloom card was drawn.

It uses javascript eval to calculate values, so pretty much any valid javascript can be used.

I got quite a lot on my plate, so I'm not sure how much more I will be able to work on this, but I thought it would be useful to share for inspiration.

Here's the source code along with a readme:

MtF.zip

(421.05 KiB) Downloaded 521 times

[BallsBAM]

Sorry I couldn't resist I looked at the code and downloaded everything, it's well done even the dimensions are not disproportionate, from V1 I think it would also be necessary to add the randomly discard keys from the deck to accommodate the discard effects for example of Assassin (50).
Perhaps widening the view of the cards on the field a little even reducing those of the deck and discards a little could be better

I have a button to discard (or exile) the top card now. Along with rotating and flipping. V1 does have the issue that it's designed specifically for the first images Jeriking shared which were a set size. I've fixed that in V2 so it will scale any image to fit.

I'm still not 100% decided on how to do the field cards. They need to be discard-able (possibly via a return to play to simplify it). Clicking one to make it join the back of the hand could work. Or maybe clicking it just makes it bigger and then buttons appear to move it wherever (need to consider any cards that have been placed behind one too and what to do when there's more than 9 of them). You are right that they either need to be bigger or possible to make bigger (or both). But also, the bigger they are, the less fit on the screen. Initially, I think I had more like 15 spaces but they were even less legible.

For the more than 9, I'm thinking a couple of scroll buttons like the Prev/Next ones there already are. Maybe use that with something to say that the one in the middle of the screen is the selected one and buttons by that to do all the actions...

V2 layout tweaks:

And for the barrier skill, did you think about putting the random from deck button which then goes into the hand and then sends it back to the deck with shuffle?

[Lobster]

Here's something I have been working on

Neat, you've gone for the card-knowledge approach which has the advantage of dealing with everything for the player but the disadvantage of every new card needing to be configured instead of my approach of having the software able to do each of the things but the player has to click the right one and work out how many strokes etc which means new cards just work (unless they require weird new features).
Have you manually renamed the images? Because the set I downloaded are all numbers and, from what I understand of your code, then need to be named.

And for the barrier skill, did you think about putting the random from deck button which then goes into the hand and then sends it back to the deck with shuffle?

I was planning on doing that but you get functionally the same effect by drawing another card, doing it and then shuffling it back in. The only thing that messes with is anything that puts the card on top or just under the top of the deck but then they'll already be broken by shuffling it back in so it might not matter.
Edit: thinking further about it, it's possibly still worth it because it could put it on top of the "hand" pile instead of at the back....

[BallsBAM]

Neat to see I'm not the only one intrigued enough to create a program for this.

Here's something I have been working on:

MtF.png

It displays:
* Total number of strokes for the drawn card (15)
* Total cards remaining in deck (15)
* Total cards in discard pile (36)
* Cards in hand (3)
* Active cards along with any added strokes for each of them (7)

Hovering over any drawn card scales it up, to make it easier to read.

It uses a json file to define what each card does, for example:

Code: Select all

{
        "name": "bloom",
        "color": "green",
        "strokes": 15,
        "effects": {
            "addStrokes": {
                "turns": 3,
                "value": "(turn - self.lastPlayedTurn) * 5"
            }
        }
    },

Each card can have a set of effects, in this case, the bloom card has the addStrokes effect, which will last for 3 turns and add strokes based on the current turn value and the turn the bloom card was drawn.

It uses javascript eval to calculate values, so pretty much any valid javascript can be used.

I got quite a lot on my plate, so I'm not sure how much more I will be able to work on this, but I thought it would be useful to share for inspiration.

Here's the source code along with a readme:

MtF.zip

it is certainly interesting, even if I must say that I tried and when I open it in the browser it doesn't let me start anything, I copied the first 60 cards I don't know what the problem is

[BallsBAM]

I was planning on doing that but you get functionally the same effect by drawing another card, doing it and then shuffling it back in. The only thing that messes with is anything that puts the card on top or just under the top of the deck but then they'll already be broken by shuffling it back in so it might not matter.
Edit: thinking further about it, it's possibly still worth it because it could put it on top of the "hand" pile instead of at the back....

Yes, I thought about it too, more than anything else randomly taking from the deck is different from drawing the next one, maybe for the future, I don't know, anyway is working fine :)

[notSafeForDev]

it is certainly interesting, even if I must say that I tried and when I open it in the browser it doesn't let me start anything, I copied the first 60 cards I don't know what the problem is

Did you put the cards inside the starter_set folder? So, the decks folder should only include 2 items, the starter_set folder and json file.

If you see card 1 appear on the page, then you just need to click on it to draw the next one.

If it's still not working, please open the developer console in the browser and let me know what appears.

[BallsBAM]

Yes exactly I copied the cards in the decks/starter_set folder
in the decks folder there are only Starter_set.json and the starter_set folder with the 60 cards inside, when I open index.html I only see the backs
in the panel it says:
Cross-origin (cross-origin) request blocked: Origin matching policy does not allow reading remote resource from file:///C:/Users/Desktop/MTG/index.js. Reason: CORS request not http.
The source URI of the module is not allowed in this document: "file:///C:/Users/Desktop/MTG/index.js"

[Lobster]

I was planning on doing that but you get functionally the same effect by drawing another card, doing it and then shuffling it back in. The only thing that messes with is anything that puts the card on top or just under the top of the deck but then they'll already be broken by shuffling it back in so it might not matter.
Edit: thinking further about it, it's possibly still worth it because it could put it on top of the "hand" pile instead of at the back....

Yes, I thought about it too, more than anything else randomly taking from the deck is different from drawing the next one, maybe for the future, I don't know, anyway is working fine :)

I've added it to v2 now. Turns out it was easy enough.

If it's still not working, please open the developer console in the browser and let me know what appears.

Code: Select all

Access to script at 'file:///<location>/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

(<location> is correct) then

Code: Select all

Failed to load resource: net::ERR_FAILED

[notSafeForDev]

Yes exactly I copied the cards in the decks/starter_set folder
in the decks folder there are only Starter_set.json and the starter_set folder with the 60 cards inside, when I open index.html I only see the backs
in the panel it says:
Cross-origin (cross-origin) request blocked: Origin matching policy does not allow reading remote resource from file:///C:/Users/Desktop/MTG/index.js. Reason: CORS request not http.
The source URI of the module is not allowed in this document: "file:///C:/Users/Desktop/MTG/index.js"

Code: Select all

Access to script at 'file:///<location>/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

(<location> is correct) then

Code: Select all

Failed to load resource: net::ERR_FAILED

Right, thanks for the info! I forgot that you would get cors errors from opening the html file directly. To run it, I use VSCode with the Live Server extension.

So, the updated instructions would be:
1. Open the folder in VSCode
2. Install the Live Server extension
3. Right click index.html from VSCode and select 'Open with Live Server'

I just wanted to create something quick and dirty as a proof of concept.

[Lobster]

Right, thanks for the info! I forgot that you would get cors errors from opening the html file directly. To run it, I use VSCode with the Live Server extension.

Yep, can confirm that works.

I have got a stable V2 now:


This adds a bunch more features:
- Card set selection options. Can choose between 30/45/60 cards from:
- - All cards
- - Random sets (it will gradually add sets to its collection until it has enough to meet the number of cards so you should tend to get most cards from any set you play with provided your sets are reasonably small)
- - Specific chosen sets only (it will list all your sets and you can select the ones you want to play with
- Exiling is now a thing, can do that from deck/hand/discard pile
- Can hold multiple cards in your hand - they appear behind it so you can work through them
- Field cards can now be selected (the larger one in the middle) - this card (and any behind it) can be returned to play by the button at the bottom. There is a tick box in the bottom left to swap which way round the arrows move things based on if you want to think of it as moving the row of cards or moving the selection
- Field cards can have cards put behind them. Either a random one or the selected one. Currently there's no indication of how many cards are behind a field card. I can reasonably easily add a display for that for the selected one if that would be useful.
- Discarded cards can be revived (back of the hand pile)
- There's a special button for barrier. This will draw a random card from the deck and put it at the front of your hand. You will then need to send it back to the deck after facing it. For barrier 2 or 3, just click the button multiple times.
- There are rotate and flip buttons for the hand card. These will maintain their affect when moved somewhere else (deck/discard/field). The only exception to this is that any that have been flipped that are drawn from the deck are flipped back over to save having to click the button again (it felt especially frustrating because you would have just seen it the right way up on the top of the draw pile)
- Some of the other things are probably new, I haven't really been keeping track
- Edit: Card files need to be .jfif or .png (because those are the 2 formats that have been used). It's easy for me to add more formats but each one needs to be done manually

Version 2 download

Known issues to be resolved for 2.1:
- It loads all the images it's randomising between, not just the ones in the random deck. If you have a lot of (or big) images, this can cause it to use lots of RAM
- Currently the window size is fixed at 1438x960 which is fine on a 1080p monitor but can cause issues on a smaller laptop screen so some form of scaling is needed