[EOS] Timer save after Notification pressed and teaseStorage

[Epton]

I am trying to save how much time has passed between the start of the Timer and when I've pressed on the Notification button.
I've tried several things I could think of but with no success :c
For example:
I input into the Timer 45000
Wait 5sec
Then excepted to see after pressing on the button "You have ruined in: 5 sec"

https://ibb.co/1vjy3ps
Let me know if I should elaborate on my tests(the picture).

I haven't tried to use teaseStorage though. and on that note does anyone has a guide for dummies or time to explain how can I use teaseStorage for saving data in general and also knowing if it is first time or not and how do I load the data from the cache?

I have tried to learn it from fapnips' tease or his suggested tease I don't remember, but I can't wrap my head around it
https://milovana.com/webteases/showteas ... a3f1267a4c
Also, is it possible to test teaseStorage with the Share function on a different browser to test if I did it correctly or not?

[PlayfulGuy]

To get the elapsed time you have to capture the start time when you display the notification using an eval of

Code: Select all

startTime = new Date().getTime()

Then in the notification itself, when the button is clicked you can calculate the elapsed time using

Code: Select all

seconds = (new Date().getTime() - startTime)/1000;

TeaseStorage is fairly simple. First initialize (or retrieve) a value with an eval like

Code: Select all

lastTime = teaseStorage.getItem("lastTime") || ""

This will get the value saved under the name "lastTime", or returns an empty string ("") if there was none.

You can then use an if action to test if lastTime == "" and act accordingly.

To save a value you use an eval like

Code: Select all

teaseStorage.setItem("lastTime",seconds);

where "lastTime" is the name you are using for the saved value, and seconds is the value to be saved (which we calculated earlier).

Here's a sample tease that demonstrates: https://milovana.com/webteases/showteas ... 96aa3a3c1c

The json from that sample tease is in the spoiler below. You can save that to a .json file and then import it to a new tease to see how it works.

Good luck!

PG

Spoiler: show

Code: Select all

{
  "pages": {
    "start": [
      {
        "image": {
          "locator": "file:e4hsvy4.jpg"
        }
      },
      {
        "eval": {
          "script": "lastTime = teaseStorage.getItem(\"lastTime\") || \"\""
        }
      },
      {
        "if": {
          "condition": "lastTime != \"\"",
          "commands": [
            {
              "say": {
                "label": "<p>Last time you took <eval>lastTime</eval> seconds</p>",
                "mode": "pause"
              }
            }
          ],
          "elseCommands": [
            {
              "say": {
                "label": "<p>This is your first time trying this.</p>",
                "mode": "pause"
              }
            }
          ]
        }
      },
      {
        "eval": {
          "script": "startTime = new Date().getTime()"
        }
      },
      {
        "say": {
          "label": "<p>The timer has started...</p>",
          "mode": "instant"
        }
      },
      {
        "notification.create": {
          "id": "Timer",
          "buttonCommands": [
            {
              "eval": {
                "script": "seconds = (new Date().getTime() - startTime)/1000;"
              }
            },
            {
              "eval": {
                "script": "teaseStorage.setItem(\"lastTime\",seconds);"
              }
            },
            {
              "say": {
                "label": "<p>You took <eval>seconds</eval> seconds.</p>"
              }
            }
          ],
          "title": "Timer",
          "buttonLabel": "Done"
        }
      }
    ]
  },
  "files": {
    "e4hsvy4.jpg": {
      "id": 2170872,
      "hash": "e8acf8a50bfe8d7aaf91dbca62e8facc907fb7fa",
      "size": 89553,
      "type": "image/jpeg",
      "width": 1049,
      "height": 1280
    }
  },
  "modules": {
    "notification": {},
    "storage": {}
  },
  "init": "",
  "galleries": {},
  "editor": {
    "recentImages": []
  }
}

[Epton]

To get the elapsed time you have to capture the start time when you display the notification using an eval of

Code: Select all

startTime = new Date().getTime()

Then in the notification itself, when the button is clicked you can calculate the elapsed time using

Code: Select all

seconds = (new Date().getTime() - startTime)/1000;

TeaseStorage is fairly simple. First initialize (or retrieve) a value with an eval like

Code: Select all

lastTime = teaseStorage.getItem("lastTime") || ""

This will get the value saved under the name "lastTime", or returns an empty string ("") if there was none.

You can then use an if action to test if lastTime == "" and act accordingly.

To save a value you use an eval like

Code: Select all

teaseStorage.setItem("lastTime",seconds);

where "lastTime" is the name you are using for the saved value, and seconds is the value to be saved (which we calculated earlier).

Here's a sample tease that demonstrates: https://milovana.com/webteases/showteas ... 96aa3a3c1c

The json from that sample tease is in the spoiler below. You can save that to a .json file and then import it to a new tease to see how it works.

Good luck!

PG

Spoiler: show

Code: Select all

{
  "pages": {
    "start": [
      {
        "image": {
          "locator": "file:e4hsvy4.jpg"
        }
      },
      {
        "eval": {
          "script": "lastTime = teaseStorage.getItem(\"lastTime\") || \"\""
        }
      },
      {
        "if": {
          "condition": "lastTime != \"\"",
          "commands": [
            {
              "say": {
                "label": "<p>Last time you took <eval>lastTime</eval> seconds</p>",
                "mode": "pause"
              }
            }
          ],
          "elseCommands": [
            {
              "say": {
                "label": "<p>This is your first time trying this.</p>",
                "mode": "pause"
              }
            }
          ]
        }
      },
      {
        "eval": {
          "script": "startTime = new Date().getTime()"
        }
      },
      {
        "say": {
          "label": "<p>The timer has started...</p>",
          "mode": "instant"
        }
      },
      {
        "notification.create": {
          "id": "Timer",
          "buttonCommands": [
            {
              "eval": {
                "script": "seconds = (new Date().getTime() - startTime)/1000;"
              }
            },
            {
              "eval": {
                "script": "teaseStorage.setItem(\"lastTime\",seconds);"
              }
            },
            {
              "say": {
                "label": "<p>You took <eval>seconds</eval> seconds.</p>"
              }
            }
          ],
          "title": "Timer",
          "buttonLabel": "Done"
        }
      }
    ]
  },
  "files": {
    "e4hsvy4.jpg": {
      "id": 2170872,
      "hash": "e8acf8a50bfe8d7aaf91dbca62e8facc907fb7fa",
      "size": 89553,
      "type": "image/jpeg",
      "width": 1049,
      "height": 1280
    }
  },
  "modules": {
    "notification": {},
    "storage": {}
  },
  "init": "",
  "galleries": {},
  "editor": {
    "recentImages": []
  }
}

Thank you so much! took me a little time but I figured it out

Say is there a command to reset/delete progress?

[PlayfulGuy]

Spoiler: show

To get the elapsed time you have to capture the start time when you display the notification using an eval of

Code: Select all

startTime = new Date().getTime()

Then in the notification itself, when the button is clicked you can calculate the elapsed time using

Code: Select all

seconds = (new Date().getTime() - startTime)/1000;

TeaseStorage is fairly simple. First initialize (or retrieve) a value with an eval like

Code: Select all

lastTime = teaseStorage.getItem("lastTime") || ""

This will get the value saved under the name "lastTime", or returns an empty string ("") if there was none.

You can then use an if action to test if lastTime == "" and act accordingly.

To save a value you use an eval like

Code: Select all

teaseStorage.setItem("lastTime",seconds);

where "lastTime" is the name you are using for the saved value, and seconds is the value to be saved (which we calculated earlier).

Here's a sample tease that demonstrates: https://milovana.com/webteases/showteas ... 96aa3a3c1c

The json from that sample tease is in the spoiler below. You can save that to a .json file and then import it to a new tease to see how it works.

Good luck!

PG

Spoiler: show

Code: Select all

{
  "pages": {
    "start": [
      {
        "image": {
          "locator": "file:e4hsvy4.jpg"
        }
      },
      {
        "eval": {
          "script": "lastTime = teaseStorage.getItem(\"lastTime\") || \"\""
        }
      },
      {
        "if": {
          "condition": "lastTime != \"\"",
          "commands": [
            {
              "say": {
                "label": "<p>Last time you took <eval>lastTime</eval> seconds</p>",
                "mode": "pause"
              }
            }
          ],
          "elseCommands": [
            {
              "say": {
                "label": "<p>This is your first time trying this.</p>",
                "mode": "pause"
              }
            }
          ]
        }
      },
      {
        "eval": {
          "script": "startTime = new Date().getTime()"
        }
      },
      {
        "say": {
          "label": "<p>The timer has started...</p>",
          "mode": "instant"
        }
      },
      {
        "notification.create": {
          "id": "Timer",
          "buttonCommands": [
            {
              "eval": {
                "script": "seconds = (new Date().getTime() - startTime)/1000;"
              }
            },
            {
              "eval": {
                "script": "teaseStorage.setItem(\"lastTime\",seconds);"
              }
            },
            {
              "say": {
                "label": "<p>You took <eval>seconds</eval> seconds.</p>"
              }
            }
          ],
          "title": "Timer",
          "buttonLabel": "Done"
        }
      }
    ]
  },
  "files": {
    "e4hsvy4.jpg": {
      "id": 2170872,
      "hash": "e8acf8a50bfe8d7aaf91dbca62e8facc907fb7fa",
      "size": 89553,
      "type": "image/jpeg",
      "width": 1049,
      "height": 1280
    }
  },
  "modules": {
    "notification": {},
    "storage": {}
  },
  "init": "",
  "galleries": {},
  "editor": {
    "recentImages": []
  }
}

Thank you so much! took me a little time but I figured it out

Say is there a command to reset/delete progress?

I don't know of an EOS command to reset progress if that's what you mean. You could add a "Reset" button to your main page (or somewhere) that just resets all the variables, but if you have a lot of them that could be a pain.

Other than that I don't know. There are probably ways for the user to reset the local storage in the browser but I did a quick search and couldn't find an answer for that. I use Firefox and couldn't even find where it stores the data. In the developer window all the local storage items said there was no data, yet that test tease I provided is certainly saving the data somehow.

PG

[Epton]

Spoiler: show

To get the elapsed time you have to capture the start time when you display the notification using an eval of

Code: Select all

startTime = new Date().getTime()

Then in the notification itself, when the button is clicked you can calculate the elapsed time using

Code: Select all

seconds = (new Date().getTime() - startTime)/1000;

TeaseStorage is fairly simple. First initialize (or retrieve) a value with an eval like

Code: Select all

lastTime = teaseStorage.getItem("lastTime") || ""

This will get the value saved under the name "lastTime", or returns an empty string ("") if there was none.

You can then use an if action to test if lastTime == "" and act accordingly.

To save a value you use an eval like

Code: Select all

teaseStorage.setItem("lastTime",seconds);

where "lastTime" is the name you are using for the saved value, and seconds is the value to be saved (which we calculated earlier).

Here's a sample tease that demonstrates: https://milovana.com/webteases/showteas ... 96aa3a3c1c

The json from that sample tease is in the spoiler below. You can save that to a .json file and then import it to a new tease to see how it works.

Good luck!

PG

Spoiler: show

Code: Select all

{
  "pages": {
    "start": [
      {
        "image": {
          "locator": "file:e4hsvy4.jpg"
        }
      },
      {
        "eval": {
          "script": "lastTime = teaseStorage.getItem(\"lastTime\") || \"\""
        }
      },
      {
        "if": {
          "condition": "lastTime != \"\"",
          "commands": [
            {
              "say": {
                "label": "<p>Last time you took <eval>lastTime</eval> seconds</p>",
                "mode": "pause"
              }
            }
          ],
          "elseCommands": [
            {
              "say": {
                "label": "<p>This is your first time trying this.</p>",
                "mode": "pause"
              }
            }
          ]
        }
      },
      {
        "eval": {
          "script": "startTime = new Date().getTime()"
        }
      },
      {
        "say": {
          "label": "<p>The timer has started...</p>",
          "mode": "instant"
        }
      },
      {
        "notification.create": {
          "id": "Timer",
          "buttonCommands": [
            {
              "eval": {
                "script": "seconds = (new Date().getTime() - startTime)/1000;"
              }
            },
            {
              "eval": {
                "script": "teaseStorage.setItem(\"lastTime\",seconds);"
              }
            },
            {
              "say": {
                "label": "<p>You took <eval>seconds</eval> seconds.</p>"
              }
            }
          ],
          "title": "Timer",
          "buttonLabel": "Done"
        }
      }
    ]
  },
  "files": {
    "e4hsvy4.jpg": {
      "id": 2170872,
      "hash": "e8acf8a50bfe8d7aaf91dbca62e8facc907fb7fa",
      "size": 89553,
      "type": "image/jpeg",
      "width": 1049,
      "height": 1280
    }
  },
  "modules": {
    "notification": {},
    "storage": {}
  },
  "init": "",
  "galleries": {},
  "editor": {
    "recentImages": []
  }
}

Thank you so much! took me a little time but I figured it out

Say is there a command to reset/delete progress?

I don't know of an EOS command to reset progress if that's what you mean. You could add a "Reset" button to your main page (or somewhere) that just resets all the variables, but if you have a lot of them that could be a pain.

Other than that I don't know. There are probably ways for the user to reset the local storage in the browser but I did a quick search and couldn't find an answer for that. I use Firefox and couldn't even find where it stores the data. In the developer window all the local storage items said there was no data, yet that test tease I provided is certainly saving the data somehow.

PG

Shame guess only the long way then np, thanks.

-------

I've been trying to deduct time from the last one saved(after load) and I can't understand why my Time value jumps from 100000 to 1670532120 or even higher or is in negative value, no matter what way I tried it always ended at the same result lol
https://milovana.com/webteases/showteas ... 7f4a7c9b10

https://ibb.co/2cfzSp5

[PlayfulGuy]

I've been trying to deduct time from the last one saved(after load) and I can't understand why my Time value jumps from 100000 to 1670532120 or even higher or is in negative value, no matter what way I tried it always ended at the same result lol
https://milovana.com/webteases/showteas ... 7f4a7c9b10

https://ibb.co/2cfzSp5

I can't totally tell from your screenshot, and Milovana won't let me look at the json for the tease, but a couple things to look at.

Date().getTime() returns the time in milliseconds since Jan 1 1969 or something like that. So keep in mind that all those values are in milliseconds. So a time value of 100000 is way in the past. The other numbers you quote look like more ligitimate Date().getTime() values. The code I provided calculated the seconds elapsed by subtracting one time value from another and dividing by 1000 to get seconds.

Also, in your Timer actions I see

Code: Select all

time //= time*1000

Not sure if that's the full code being evaluated there, but the "//" marks the beginning of a comment so everything after that is ignored. Not sure what your intent was, but it looks like that may not be doing what you think it is.

If you need more post the json code for your sample and I can have a more in depth look.

Hope that helps,

PG

[Epton]

Yes I know that // is comment, I was using it while testing different variations instead of deleting and rewriting it.
So wait, Date().getTime() returns the time in milliseconds all passed milliseconds from 69' to date today?
Edit:
Oh, I think I figured it in theory, I need to add 'time2= teaseStorage.getItem("time2") || ""' and IF for it and only then it will capture the real elapsed time and then i'll be able to do
time = time - time2 and deduct from 'time' 10sec for example?
Edit2:
Seems I figured it out, thanks for the help.

Code: Select all

{
  "pages": {
    "start": [
      {
        "say": {
          "label": "<p>Welcome</p>"
        }
      },
      {
        "eval": {
          "script": "lastTime = teaseStorage.getItem(\"lastTime\") || \"\"\r\n"
        }
      },
      {
        "eval": {
          "script": "virginState = teaseStorage.getItem(\"virginState\") || \"\""
        }
      },
      {
        "eval": {
          "script": "bpm = teaseStorage.getItem(\"bpm\") || \"\";\r\ntime = teaseStorage.getItem(\"time\") || \"\""
        }
      },
      {
        "if": {
          "condition": "lastTime != \"\"",
          "commands": [
            {
              "say": {
                "label": "<p>This is your second time</p>"
              }
            },
            {
              "if": {
                "condition": "virginState != \"\"",
                "commands": [
                  {
                    "if": {
                      "condition": "virginState == true",
                      "commands": [
                        {
                          "say": {
                            "label": "<p>Virgin</p>"
                          }
                        },
                        {
                          "goto": {
                            "target": "page2"
                          }
                        }
                      ],
                      "elseCommands": [
                        {
                          "say": {
                            "label": "<p>Not Virgin</p>"
                          }
                        },
                        {
                          "goto": {
                            "target": "page2"
                          }
                        }
                      ]
                    }
                  }
                ]
              }
            }
          ],
          "elseCommands": [
            {
              "say": {
                "label": "<p>This is your first time</p>"
              }
            }
          ]
        }
      },
      {
        "noop": {
          "if": {
            "condition": "virginState != \"\"",
            "commands": [
              {
                "if": {
                  "condition": "virginState == true",
                  "commands": [
                    {
                      "say": {
                        "label": "<p>Virgin</p>"
                      }
                    }
                  ],
                  "elseCommands": [
                    {
                      "say": {
                        "label": "<p>Not Virgin</p>"
                      }
                    }
                  ]
                }
              }
            ],
            "elseCommands": [
              {
                "say": {
                  "label": "<p>This is your first time</p>"
                }
              }
            ]
          }
        }
      },
      {
        "say": {
          "label": "<p>Virgin?</p>"
        }
      },
      {
        "choice": {
          "options": [
            {
              "label": "Yes",
              "commands": [
                {
                  "eval": {
                    "script": "virginState = true"
                  }
                }
              ]
            },
            {
              "label": "No",
              "commands": [
                {
                  "eval": {
                    "script": "virginState = false"
                  }
                }
              ]
            }
          ]
        }
      },
      {
        "eval": {
          "script": "teaseStorage.setItem(\"lastTime\",lastTime);\r\nteaseStorage.setItem(\"virginState\",virginState);"
        }
      },
      {
        "end": {}
      },
      {
        "noop": {
          "if": {
            "condition": "teaseStart == 1",
            "commands": [
              {
                "goto": {
                  "target": "page3"
                }
              }
            ]
          }
        }
      },
      {
        "noop": {
          "eval": {
            "script": "teaseStart = 1"
          }
        }
      },
      {
        "noop": {
          "eval": {
            "script": "// Get the first time player was here, or right now if never\r\nvar teaseStart = teaseStorage.getItem('ts') || 0 //|| Date.now()\r\n// Now store that\r\nteaseStorage.setItem('ts', teaseStart)"
          }
        }
      },
      {
        "eval": {
          "script": "if"
        }
      },
      {
        "noop": {
          "eval": {
            "script": "if (teaseStorage.getItem('ts')){\r\npages.goto('page3')\r\n} else if (!teaseStorage.getItem('ts')){\r\npages.goto('page2')\r\n}"
          }
        }
      },
      {
        "noop": {
          "eval": {
            "script": "if (teaseStorage.getItem('ts')){\r\npages.goto('page3')\r\n} else if (!teaseStorage.getItem('ts')){\r\npages.goto('page2')\r\n}"
          }
        }
      },
      {
        "noop": {
          "eval": {
            "script": "// Get the first time player was here, or right now if never\r\nvar teaseStart = teaseStorage.getItem('ts') || Date.now()\r\n// Now store that\r\nteaseStorage.setItem('ts', teaseStart)"
          }
        }
      }
    ],
    "page2": [
      {
        "eval": {
          "script": "time2 = new Date().getTime()"
        }
      },
      {
        "if": {
          "condition": "bpm != \"\"",
          "commands": [
            {
              "if": {
                "condition": "bpm == 30",
                "commands": [
                  {
                    "say": {
                      "label": "<p>plays <eval>bpm</eval></p>"
                    }
                  }
                ]
              }
            },
            {
              "if": {
                "condition": "bpm == 60",
                "commands": [
                  {
                    "say": {
                      "label": "<p>plays <eval>bpm</eval></p>"
                    }
                  }
                ]
              }
            }
          ]
        }
      },
      {
        "if": {
          "condition": "time != \"\"",
          "commands": [
            {
              "timer": {
                "duration": "$time //= time*1000",
                "isAsync": true
              }
            },
            {
              "notification.create": {
                "buttonCommands": [
                  {
                    "eval": {
                      "script": "time2 = (new Date().getTime() - time)/1000;\r\n//time = time - time2;\r\n//time = time/1000;"
                    }
                  },
                  {
                    "say": {
                      "label": "<p>time2 = <eval>time2</eval></p>"
                    }
                  },
                  {
                    "eval": {
                      "script": "time3 = time - time2;"
                    }
                  },
                  {
                    "say": {
                      "label": "<p>time3 = <eval>time3</eval></p>"
                    }
                  },
                  {
                    "eval": {
                      "script": "time = time3;"
                    }
                  },
                  {
                    "say": {
                      "label": "<p>time = <eval>time</eval></p>"
                    }
                  },
                  {
                    "noop": {
                      "eval": {
                        "script": "time = 100000"
                      }
                    }
                  },
                  {
                    "eval": {
                      "script": "teaseStorage.setItem(\"time\",time);"
                    }
                  },
                  {
                    "eval": {
                      "script": "time = teaseStorage.getItem(\"time\");"
                    }
                  },
                  {
                    "say": {
                      "label": "<p>Your new time is <eval>time</eval> seconds</p>",
                      "mode": "pause"
                    }
                  }
                ],
                "buttonLabel": "Ruin",
                "title": "Time"
              }
            },
            {
              "say": {
                "label": "<p>FASTER</p><p>Your time is: <eval>time = time*1</eval> seconds</p>",
                "mode": null
              }
            },
            {
              "choice": {
                "options": [
                  {
                    "label": "Stop tease",
                    "commands": []
                  }
                ]
              }
            },
            {
              "choice": {
                "options": [
                  {
                    "label": "30",
                    "commands": [
                      {
                        "eval": {
                          "script": "bpm = 30;\r\nteaseStorage.setItem(\"bpm\",bpm);"
                        }
                      },
                      {
                        "say": {
                          "label": "<p>beat plays</p>",
                          "mode": "instant"
                        }
                      }
                    ]
                  },
                  {
                    "label": "60",
                    "commands": [
                      {
                        "eval": {
                          "script": "bpm = 60;\r\nteaseStorage.setItem(\"bpm\",bpm);"
                        }
                      }
                    ]
                  }
                ]
              }
            }
          ]
        }
      },
      {
        "say": {
          "label": "<p>choose BPM</p>"
        }
      },
      {
        "choice": {
          "options": [
            {
              "label": "30",
              "commands": [
                {
                  "eval": {
                    "script": "bpm = 30;\r\nteaseStorage.setItem(\"bpm\",bpm);"
                  }
                },
                {
                  "say": {
                    "label": "<p>beat plays</p>",
                    "mode": "instant"
                  }
                }
              ]
            },
            {
              "label": "60",
              "commands": [
                {
                  "eval": {
                    "script": "bpm = 60;\r\nteaseStorage.setItem(\"bpm\",bpm);"
                  }
                }
              ]
            }
          ]
        }
      },
      {
        "say": {
          "label": "<p>Determine Time</p>"
        }
      },
      {
        "eval": {
          "script": "startTime = new Date().getTime()"
        }
      },
      {
        "notification.create": {
          "buttonCommands": [
            {
              "eval": {
                "script": "time = (new Date().getTime() - startTime)/1000;\r\nteaseStorage.setItem(\"time\",time);"
              }
            }
          ],
          "buttonLabel": "Ruin",
          "title": "Time"
        }
      }
    ],
    "page3": [
      {
        "say": {
          "label": "<p>This is your second time here</p>"
        }
      }
    ]
  },
  "modules": {
    "audio": {},
    "storage": {},
    "notification": {}
  },
  "init": "//var teaseStart = null\r\n/*if (teaseStorage.getItem('ts')){\r\npages.goto('page3')\r\n} else if (!teaseStorage.getItem('ts')){\r\npages.goto('start')\r\n}*/\r\n\r\nteaseStorage.getItem(\"lastTime\")",
  "files": {},
  "galleries": {},
  "editor": {
    "recentImages": []
  }
}

[PlayfulGuy]

Glad you got it sorted.

Good luck on whatever you're building.

PG