Set the cursor to a different image depending on a variable

Authoring Twine
1

Twine Version: 2.8.1.0 Sugarcube Version: 2.36.1

I have an issue somewhat related to my previous post. I am trying to add a custom cursor system to my tile based puzzle, where whatever tile you are “holding”, as in the tile you clicked last which is the same as the value I want to set the slot to, shows up either hovering along with your cursor, or as your cursor in order to make it more clear what tile you “have” and what the slot will be filled with when you click it.

The issue has come from the fact that if I wanted to do it via CSS I would have to add around 41 CSS code blocks, each with an image path affecting the cursor while on a specific div element, along with writing 9 if/elseif statements into each puzzles passage (or 16 for a four by four puzzle). This feels WILDLY inefficient and I cant help but think there HAS to be some way to do it dynamically.

I’m at the point where I’m semi planning an idea to simply display the tile with a text caption on screen, but if I can do it the original way then i would very much so rather that.

Any help would be greatly appreciated!

1 Like
2

There is. Unfortunately, I don’t know the SugarCube side of things, but you’re not the first author to want to do this… Drag & Drop Puzzle: Check All Droppables Have Accepted a Draggable and Proceed to Next Passage

I believe that topic was inspired by… https://www.digitalocean.com/community/tutorials/js-drag-and-drop-vanilla-js …and by doing it this way, you can customize things like adding a temporary drop shadow, making the target area highlight when over, etc.

However, if those links prove a bit difficult to implement, I suggest using the built in drag-and-drop functionality of HTML/JS. It will fade the image as you move it (default OS feature), but it’s as simple as you can get… https://www.w3schools.com/html/html5_draganddrop.asp

You probably don’t want a piece to be able to be put in a spot where another piece already resides (even if it’s the right location and the other piece is incorrectly placed), and you’ll probably want to determine when the puzzle is assembled properly (and maybe even lock it from being moved around further). We can help with that too once you get the drag and drop part working.

Let us know if you have any other questions. Good luck!

BOLD PREDICTION: Greyelf will chime in with a better solution. :wink:
↑
(see what I did there)

2 Likes
3

Edit: I’m working on a simple mockup of the drag&drop system and will ask for help if I need it, thanks again!

Hello, thank you so much for these resources, they actually seem very helpful for some other portions of my game as well! (namely a paper shifting information gathering puzzle that I can use draggables for)

However, I’m pretty daunted by the prospect of fully rewriting my puzzle format from its current form to one that uses draggables and droppables.
I honestly don’t even know where to start, and I’m not certain it would be a large enough user experience improvement to warrant re-doing everything in a more complex way.


If I go through with it I will definitely use the jQuery UI method, as it actually seems less confusing to me than the html built in api . :sweat_smile:


Thank you again for the answer!



Uhhhhh I was going to include the following text and append a zip file:
P.S.: If you want to see a sample of these puzzles, and/or seeing them “in the flesh” would help to give more specific recommendations I’ve attached my test project with an example puzzle.

But it turns out my account is not old enough to upload attachments :smiling_face_with_tear:

1 Like
4

MuralSampleFixed.zip (164.6 KB)

Here’s the example of the current way I have my puzzles set up.
(Fixed as per edit below)

5

Be aware we have an automatic trust level system.

The forum software does automatic approval based on forum participation. It’s not really hard for a new user to climb from level 0 to 1. Much of this is level 1 does require a minimum time spent reading the forum. If your account is hours old and you only visit once, the forum trust level won’t let you post files since that replicates spammer/drive by behavior.

1 Like
6

Drag&DropMuralTest.zip (479.0 KB)

EDIT: Found a way to prevent more than one tile being put in a slot at once! This post on stackoverflow: jQuery UI - Droppable only accept one draggable - Stack Overflow has this chunk of code:

$('.drop-zone').droppable({
  over: function(event, ui) {

    // Enable all the .droppable elements
    $('.droppable').droppable('enable');

    // If the droppable element we're hovered over already contains a .draggable element, 
    // don't allow another one to be dropped on it
    if($(this).has('.draggable').length) {
        $(this).droppable('disable');
    }
  }
});

Which I was able to implement. :smiley:

After a somewhat embarrassing amount of time, I have finally implemented the VERY BASICS of the drag and drop version of my puzzle system!

In a funny twist because of needing to assign each slot of the actual puzzle a background image, it’ll actually use more CSS than doing what I was initially going to. :sweat_smile:
That really doesn’t matter much though, as it’s a lot more intuitive and fun!

As you predicted, I have just about zero clue how to go about not letting a slot accept more than one tile at a time, or how to check the solution, so if you or anyone else could provide a method for either problem or even just point out some examples I could look over, that would be wonderful!

Oh, I’m also having trouble with the “cursor” option for draggables, setting it to one of the basic cursors works just fine, but I cant figure out a way to set a custom cursor, trying to use a filepath whether relative or not just returns an “unexpected string” error.

Thanks again for the resources and the idea to use draggables and droppables for the puzzle, this version is way closer to what I envisioned when I came up with the original idea, and as I said before, is a lot more fun and easy to understand.

1 Like
7

You’re going to hate me for this, but I looked at the original code you posted and couldn’t make heads or tails of it. Maybe it was incomplete? So I made something from scratch before you posted your latest code (I just got busy today and didn’t finish it until now). I think my stuff follows the fundamentals of what you were using though.

All I know is that it works, it outputs a story variable $puzzleComplete that you can check to see if the puzzle was assembled correctly on another passage. It’s flexible and you can use background images in the cells and change the pieces to <img> tags if you want. Use any classes or styling you prefer. (The data- attributes control the code.)

⫸ Puzzle.zip (156.2 KB)

Take the time to go over the Start passage (the custom data- attributes flag elements as cells, pieces, the tray, and even flag where pieces are supposed to go), then see how things are styled in the # Stylesheet and lastly, look through the { } JavaScript to see how it adds the logic to the pieces afterwards through the enablePuzzle() function. The <<link>> to check the puzzle contains all the verification logic before going to the passage.

I used as little SugarCube code as possible because, well, I know very little about it. I’ll leave you with this zipped project and let you try to decipher it. If you like what you see and need some help customizing it further, I’ll be glad to help in that regard. I had a lot of fun figuring it out. I’ve never done anything like this before so there might be a better way. I don’t know. Also, there’s no error checking in the JavaScript function I created, meaning that if you create the HTML for the puzzle components incorrectly, you will get errors in the browser.

(Edit: Actually, I think it just won’t work right, I don’t think you’ll get errors.)

Note: The one thing I realize now is that by using the built in browser drag-and-drop (which I used), you can’t change the cursor while it’s dragging. The reason is that it’s now a system level drag-and-drop action. Drag the piece into the text field and it outputs the id value. It even works across windows and applications. The only way I can think of to fix the cursor while it’s dragging is to rewrite the drag and drop code from scratch in JavaScript or use an existing code base that ignores the built in drag-and-drop. I guess the question is, how important is the custom cursor while dragging?

1 Like
8

Thank you very much!

I’m glad it was fun to write, and I will go over it with a fine-toothed comb to figure out how you implemented the logic in order to understand what makes it tick. (it’s greek to me right now :wink:)

As long as I’m able to use the same logic system with the jQuery ui draggables and droppables I think I have all the other basics figured out for that format, and since it has a cursor option I know there just HAS to be a way to attribute a custom cursor to it, but since you can visually see what piece you’re dragging now, that is a much much less important issue!

That’s weird that my code was that esoteric, did it at least function when you ran it from the html file? It may have been because the method I used to implement jQuery ui calls files from a relative path, so I haven’t been able to make it work while running in Twine.

(EDIT: Figured out the issue, was just a broken file path after I isolated it from my main project. I’ll update the link to provide one that actually works sorry!)


Regardless, thank you again and I'll reach out if I need help figuring something out!
1 Like