Eos Editor Preview - Milovana's new interactive webtease editor

[Ed_]

how does one remove pictures from a gallery?

Also, eos gave me a heart attack when I clicked a different tease, came back to teh one I worked on, and suddenly a much prior version was displayed. However, clicking on "preview" showed the version I was working in was still present. closing eos and opening it again made all the new pages reappear.

[Roundhound]

So with multiple people mentioning it looking like EOS is deleting their content it much just be a browser caching issue. If you refresh the page with CTRL+F5 it will reload your page without using the cache.

[Roundhound]

Is there a way to completely clear out EOS tease data from a browser? I just ended up encountering a bug in a tease I just published because I wasn't able to easily test it on a blank machine.

If not this might be a decent feature to build into the EOS editor. A button that will clear out all tease storage and configuration things.

[Roundhound]

Is there a way to completely clear out EOS tease data from a browser? I just ended up encountering a bug in a tease I just published because I wasn't able to easily test it on a blank machine.

If not this might be a decent feature to build into the EOS editor. A button that will clear out all tease storage and configuration things.

You mean something like this? Or 'clear out' in other way?
I use Chromium, and if i reload the page the missing stuff is back.

I am hoping for a method that wouldn't log me out of milovana and potentially other sites.

[snakelinux]

I have been playing around with it and I have found two issues.

One, if I make a change to one tease and switch to another tease and then switch back to the previous tease my changes are gone. If I exit out and come back in again then they are back. I have tested this on Google Chrome with repeated results. I have not tested making incompatible teases where I design it one way and then come back to it so it shows what it was before and then go a different way to see what would happen, and if it would try to merge both sets of changes or error on incompatible designs but it is something to watch out for, for now.

Two, when I click on a page the scrollbar wants to take me anywhere except that page. Lets say I named all of the pages 1-50. I click on page 1 then I am looking at the last 50 pages. I click on 50 and I am looking at the first pages. If I want to go page by page I have to click on one and then scroll back to that page before I can click on the next page. I have tested this on Google Chrome and Firefox with repeated results. This one is just annoying because it is user-unfriendly for no apparent reason.

Not so much a bug as a gotcha that I have fallen for a few times. If you click on rename, change the name, click on a different page, and then click save it saves the page you clicked on with the new name and not the page you were on when you changed the name. I think that it is actually working as designed but it is not what I had expected to happen.

I have not published anything so I do not know about published bugs but these are what I found from playing around with it. I first built a blackjack game and then moved on to dice games and quick decision timing games. It is much easier to build something dynamic and complicated using EOS than Nyx. It uses JSON, which is good. Everything dynamic seems to be in JSON.

I would love it if there were built in variables I could reference such as the page I am on. It would be cleaner than me adding it all in page by page myself.

P.S. is there a way to change the font size or type of font? When I put in the tags from the JSON it takes them as part of the string instead of using it as code, which is to be expected for JSON. Color change example <p><span style=\"color:#f44336\"> some text </span></p> only works when using the tool not as text.

[Triple Alfa]

I'm having a really strange issue. I'm using the same code but with different variable names and inverted boolean values in two places in my tease and one works, but the other doesn't.

This:

Code: Select all

var hasSeenVanessa = teaseStorage.getItem("hasSeenVanessa") || false
teaseStorage.setItem("hasSeenVanessa", true)

Followed by an if statement:

Code: Select all

hasSeenVanessa === false

works perfectly fine.

But this:

Code: Select all

var isNewPlayer = teaseStorage.getItem("isNewPlayer") || true
teaseStorage.setItem("isNewPlayer", false)

Followed by if statement:

Code: Select all

isNewPlayer === true

Does not.

The first code executes as if hasSeenVanessa is true. Which should be the case as I ran the tease before up to that point.
The second code executes as if isNewPlayer is true. Which shouldn't be the case beyond the first startup.

Edit: It might be relevant to note that the second(non-working) code is part of the "start"-page.

[snakelinux]

I tested Triple Alfa's scenario. It has nothing to do with the start page. It says it is always true because it treats the statement
teaseStorage.getItem("isNewPlayer") || true
as a boolean.
If teaseStorage.getItem("isNewPlayer") is false then
(false || true)
gets passed into variable IsNewPlayer
That boolean statement
(false || true)
is true therefore IsNewPlayer is true.
Also if teaseStorage.getItem("isNewPlayer") is true then the statement passed in is
(true || true)
which is true.
Either way it is true that gets passed into IsNewPlayer.
This does not look like a bug to me but a misunderstanding as to what it is doing.

I did some more testing on the scrollbar issue I mentioned earlier. I have tried on 4 different browsers. It is not a browser issue. It also affects the up and down keys. Once you select a page and it jumps to the opposite side of the selection, due to the bug mentioned earlier, the up and down arrows stop working for selecting pages (probably because of the same bug). The arrows work again after using the mouse to get back to the page I selected.

I do not wish to sound negative because I know a lot of work went into eos but not being able to walk through the pages is such a horrible experience for me that I am going to have to wait until that is fixed before creating any teases in eos. It kind of feels like walking through spaghetti code. First I am here and then I am there. Then I am over here. Instead I should be able to go to one page right after the next like page1, page2, page3 by using either a mouse or keyboard. Obviously I would never name pages page1, page2, page3, etc. That is just for illustration purposes. I took a look at Nyx and it does not have that issue. In fact, Nyx does not change the scrollbar location at all based on page selection.

[Triple Alfa]

I tested Triple Alfa's scenario. It has nothing to do with the start page. It says it is always true because it treats the statement
teaseStorage.getItem("isNewPlayer") || true
as a boolean.
If teaseStorage.getItem("isNewPlayer") is false then
(false || true)
gets passed into variable IsNewPlayer
That boolean statement
(false || true)
is true therefore IsNewPlayer is true.
Also if teaseStorage.getItem("isNewPlayer") is true then the statement passed in is
(true || true)
which is true.
Either way it is true that gets passed into IsNewPlayer.
This does not look like a bug to me but a misunderstanding as to what it is doing.

Thank you for the testing!
This is kinda strange since I took the code literally from the tutorial and replaced the integer values with booleans expecting it to work the same.

The tutorial does:

Code: Select all

var counter = teaseStorage.getItem("counter") || 0
counter++
teaseStorage.setItem("counter", counter)

According to the tutorial the counter variable should use the storage value or default to the number after "||". How do I get this same functionality but for booleans? Of course if this works I could just use integers, but that's a less efficient workaround.

I guess I could also work around it by using if-statements and checking the return of teaseStorage.getItem("isNewPlayer"), but that seems even more cumbersome than just using integers.

Edit1:
I just changed my code over from boolean to integer. It is now exactly like the tutorial and it still doesn't work. The problem is exactly the same as before. Unless I'm doing something wrong it seems like a bug as the tutorial is telling me to do this exactly.

Edit2:
Okay I think I've isolated the bug.
This doesn't work:

Code: Select all

var isNewPlayer = teaseStorage.getItem("isNewPlayer") || 1
teaseStorage.setItem("isNewPlayer", 0)

But this does:

Code: Select all

var isNewPlayer = teaseStorage.getItem("isNewPlayer") || 1
isNewPlayer = 0
teaseStorage.setItem("isNewPlayer", isNewPlayer)

So somehow the "isNewPlayer" variable is not just an integer. And when you try to write just an integer value to the storage it doesn't accept it. But if you assign an integer value to the "isNewPlayer" variable and write that to the storage it works just fine.

Edit3:
So the problem now is that you have to change to original variable to be able to write it to storage. This is terrible since we need that to make comparisons in if statements. So I tried to do this workaround, but it failed:

Code: Select all

var isNewPlayer = teaseStorage.getItem("isNewPlayer") || 1
var isNewPlayerTemp = isNewPlayer
isNewPlayerTemp = 0
teaseStorage.setItem("isNewPlayer", isNewPlayerTemp)

Even making a straight duplicate variable and using that makes it stop working.

Edit4:
Okay I just realized that I'm an idiot checking the variable that I put to 0 just before and not the stored value.

Edit5:
I just tried to use Say to display the value in storage using an eval tag with

Code: Select all

teaseStorage.getItem("isNewPlayer")

and it doesn't work.

Okay now a hopefully proper attempt. Using:

Code: Select all

var isNewPlayer = teaseStorage.getItem("isNewPlayer") || 1
teaseStorage.setItem("isNewPlayer", 0)
var isNewPlayerTemp = teaseStorage.getItem("isNewPlayer")

I write the value of the storage to Say using isNewPlayerTemp. It displays as "0".
The next time the code runs it should use the stored "0" and put it in variable isNewPlayer.
That should then lead to the following if statement:

Code: Select all

isNewPlayer == 1

being false.
But this does not happen. The next time the code is run the result is the same. The if statement is true.

Edit6:
I found a very useful article talking about the problems of using || to set default values in javascript:
https://www.codereadability.com/javascr ... -operator/

I'm not sure I totally understand what constitutes falsy and truthy in this case, but the fact that I'm using "0" and it's directly mentioned as falsy is enough I think.

Edit7:
Working Solution:

Code: Select all

var isNewPlayer = teaseStorage.getItem("isNewPlayer") || 2
teaseStorage.setItem("isNewPlayer", 1)

Changing the "0" and "1" values to "1" and "2" respectively avoids the falsy problem mentioned in the above article. The code now seems to work as intended.

It is worth mentioning that the code used in the tutorial for the counter only works because the default value is set to "0". When the value of the storage is "0" it is considered falsy and is overwritten by the default value, but because the default value just so happens to be the same it all works out.

I have however encountered a problem with the preview system. It seems like the changes to the code don't always take. Even when using ctrl+F5 the result was not what was expected, but going back into the code to the code I just changed and clicking preview there gets the right result.(Without changing any code) So either the code is stuck sometimes or the memory storage is.

[Roundhound]

Edit7:
Working Solution:

Code: Select all

var isNewPlayer = teaseStorage.getItem("isNewPlayer") || 2
teaseStorage.setItem("isNewPlayer", 1)

Changing the "0" and "1" values to "1" and "2" respectively avoids the falsy problem mentioned in the above article. The code now seems to work as intended.

It is worth mentioning that the code used in the tutorial for the counter only works because the default value is set to "0". When the value of the storage is "0" it is considered falsy and is overwritten by the default value, but because the default value just so happens to be the same it all works out.

I have however encountered a problem with the preview system. It seems like the changes to the code don't always take. Even when using ctrl+F5 the result was not what was expected, but going back into the code to the code I just changed and clicking preview there gets the right result.(Without changing any code) So either the code is stuck sometimes or the memory storage is.

I have a couple things I want to mention about this post. First, about the preview code and storage. The storage does not get wiped when entering preview mode. What I would do, is for testing create a button on your start page that will reset the values. You create a function like this in your init file:

Code: Select all

function resetValues() {
teaseStorage("newPlayer", 0);
teaseStorage("myOtherValues", "relevant Values);
}

You can then call this from the button by having it do an eval action with:

Code: Select all

resetValues();

Now you can easily reset anything to test the newPlayer/returningPlayer scenarios.

Secondly, this is more of a general rant from a software developer than specifically at you so please don't take it personally. I really hate it when people in languages like Javascript, Java, C# use integer values like 0, 1, 2 for true or false booleans. Especially in Javascript because it makes problems like the above happen. This isn't assembly where you need to monitor every bit yourself. Just use true or false if a value only has two possibilities like "isNewPlayer". This is also problematic when sharing code with others. Looking at your solution I now have to really think "what does 1 and 2 mean for isNewPlayer?" while true or false is pretty self-explanatory.

Basically, make your code easy to read even for your future self. If you come back to this is one year will you remember exactly why you used 1 and 2? Also tight efficient code is not really a thing to worry about in todays web applications (especially in EOS). If you are using a loop then be concerned a bit (infinite loops are a problem or ones with a lot going on inside of it) but storing one more variable or using a longer variable name to make it more descriptive isn't anything to worry about.

As I said this isn't specifically at you, Triple Alfa. It's just something I have noticed a few times here with people asking for help.

[Triple Alfa]

@RoundHound:
I know that storage does not get wiped. I reset it manually when needed for testing. I didn't expect it to take so long to troubleshoot so I didn't bother trying to figure out how to setup some debug buttons.

Also this whole mess started with me using boolean values instead of integers. I switched to integers out of necessity, not desire. You can read all about that in my first post and snakelinux's reply to that. If you can figure out a way to make it work nicely with booleans I'd love to use your alternative.

Edit1:
I tried to implement your debug button solution, but ran into two problems.
1) Your code was missing the .setItem part after teaseStorage.
2) After I've reset the values with the new function the "isNewPlayer" stored variable does not change during the playthrough as it should. I can reset the tease over and over with the same result. But if I go into any code editor and trigger a save(with no changes made to the code) it suddenly works properly.

Just to clarify what I'm doing:
1) Reset the variables
2) Run through the tease. It shows me as a new player that hasn't seen Vanessa, as it should.
3) Reset the tease and run through it again. It shows me as a new player that has seen Vanessa. I should not be a new player.
4) Any extra tease reset is the same as #3.
5) Go into any code editor. Press space, press backspace.
6) A save is triggered, but the code remains the same.
7) Run through the tease again. It shows me as a returning player that has seen Vanessa. This is correct.

[snakelinux]

Using a trinary expression you can set it to true if undefined or whatever the value is if not.
Here is the code solution for defaulting to true. To properly test this you will need to set isNewPlayer to undefined, which is the starting value when using teaseStorage.getItem before the value has been set.

var test = teaseStorage.getItem("isNewPlayer") === undefined ? true : teaseStorage.getItem("isNewPlayer") ;
...
say something based on isNewPlayer being true or not
...
//change to false
teaseStorage.setItem("isNewPlayer",false);
//run tease again


You cannot default to true using regular boolean expressions such as
teaseStorage.getItem("isNewPlayer") || true
This is because if isNewPlayer is false the boolean expression is true.
If isNewPlayer is undefined the boolean expression is true.
If isNewPlayer is true than the boolean expression is true.
The example used in the training only works for false.

As Roundhound mentioned it is best to avoid using numbers as booleans unless you are coding in an old language that does not know what booleans are because in some languages 0 can be seen as true, and trying to keep up with what is actually true and false becomes more trouble than it is worth. Many languages convert numbers into string behind the scenes and then it is checking the boolean value of string "0", which is much more likely to be seen as true. This is very hard to track down because it is not your code that is doing the string conversion. Once you have spent several hours trying to track down a code bug like that you will never use numbers again for booleans if you have any choice. Using ambiguous code can work sometimes and not work other times. It depends on how the interpreter interprets it this time around but once the code is written and if it and the interpreter have not been changed then it will behave the same way each time. Once you change the code or update to a newer version of JavaScript all bets are off. Writing safe code is a skill-set in itself.

EDIT 1:
After playing around with the eos editor I finally figured out what is causing the scrollbar bug. When you select a page it jumps to the position of the page when the page was created. Example, I have 50 pages and I create a new page. This means that the new page's position is page 51 but will be re-positioned based on the name as all of the pages are alphabetized. If I give page 51 the name AAA it is put at the top below start but when I select the page AAA I am now put back into position page 51 because the scrollbar is in page reference order and visually it is ranked in alphabetical order. This disconnect is what causes the scrollbar to jump all over the place when trying to view a new page and it is what forces the user to keep scrolling back to where they selected. This also means that my page 1-50 example I mentioned earlier is a bad example because you would not see this bug in that example.

The only workaround for this is to not rename your pages but keep them with the default names so that the reference order and name order are the same. It is kind of a crappy work around because it means we cannot rename our pages if we want to be able to walk through them, but it is better than nothing for now. Nyx does not put pages in alphabetical order so this bug is new to that feature.

EDIT 2:
I found a second work around however it is risky. You can download the code and then change it manually yourself (make sure to validate with a json validator like https://jsonlint.com/). Then you upload it back. You can move everything into alphabetical order (remember upper case letters need to be moved higher than lower case letters). This makes it so the reference and the names have matching orders. As long as you continue to fix it manually you will not have to worry about the scrollbar bug. I recommend outlining the pages that you want. You should create more pages then you think you will need. Then name them all properly and fix them manually by reorganizing them through the download and upload process I just mentioned. I also recommend making a copy of the backup before you make any changes just in case.

Here are some other observations.
1) You can run console.log() to log data to the console. This could be useful debugging information.
Here is an example
function debug(message) {
console.log("message: " + message);
console.log("storedVariable1: " + storedVariable1);
console.log("storedVariable2: " + storedVariable2);
}
You might consider having this executed right after you get the stored variables. This way if someone is having issues they can see what their stored variable values are in case the values somehow get screwed up.

2) You should give users the ability to reset their stored variables. This is especially useful if there is a bug in your code. Setup a page that when a user clicks the button to reset it runs this function with the variable names changed to your stored variable names.
function refresh() {
teaseStorage.setItem("storedVariable1",undefined);
teaseStorage.setItem("storedVariable2",undefined);
}

3) Setting a location when a person goes to a page is a nice feature to have. You can then give them a button at the beginning that is visible if the variable is not undefined. This way a user can pickup where they left off just by clicking continue. Here is an example of the function that would need to be called on pages where users could continue from. Take advantage of the copy paste functionality for eval statements but you will have to change the name to the current page name on each one.
function setLocation(loc) {
teaseStorage.setItem("location",loc);
}
When the user clicks the continue button it would simply go to a page (probably called continue) that has a goto in it that goes to the variable location.

4) Page naming conventions.
It is recommended that you group sections of your tease and give each group a group name. That name should be a prefix to all of your pages that belong to that group. This will make finding and managing your pages much easier. You will also want to do this for random pages where you could jump to any of several pages if it matches a certain prefix.

5) Galleries.
These allow the randomization of images automatically for you based on the images put in that gallery group and the group selected. Galleries are easy to use and will easily handle any random image functionality you might want to use.

EDIT 3:
function refresh() {
teaseStorage.setItem("storedVariable1",undefined);
teaseStorage.setItem("storedVariable2",undefined);
}
This function will not work because the function breaks when the second parameter is undefined. I found that out while testing it. So it would look something like this

function refresh() {
teaseStorage.setItem("storedVariable1",0);
teaseStorage.setItem("storedVariable2","");
storedVariable1 = 0;
storedVariable2 = "";
}
Will have to set to default values that are not undefined. This means if you want to test what it is like for someone who does not have the persistent variables in storage you will have to change the code by replacing the teaseStorage.getItem functions with undefined. If developers are curious, the error message I get when using teaseStorage.setItem with a second parameter of undefined is "Unexpected token u in JSON at position 0"
index.js 52

[itslate]

Found an error in the system. When a notification closes, either with a button or a timer, any timer active in the tease, at that moment, instantly ends and goes to the next action.

This. A closing notification also makes the tease progress, if it should be waiting for a "Say" command, etc, as said in viewtopic.php?f=4&t=21718&p=261607&hili ... on#p261607.

[itslate]

Am I doing something wrong, or is it not possible to use the storage function in the preview mode? I don't wanna publish yet to try it out...

EOS is amazing, by the way.

[Shattered]

Am I doing something wrong, or is it not possible to use the storage function in the preview mode? I don't wanna publish yet to try it out...

EOS is amazing, by the way.

It works for me in preview.

[Shattered]

Anyone know if theres anyway to find the current page number and store it as a variable when a button on a notification is clicked?