Save user solutions and show them on page #231
Conversation
Click a solution to fill it in the editor
Minor typo :)
…Only your solutions. Items in menu also don't have selectors in them.
…hen your input is clear
… game will load them before triggering Win
…let you pass level 6 because the game actually checks the selector on html different from HTML Editor window. Now it properly parses html from level.boardMarkup
| .display-help solution { | ||
| display: inline-block; | ||
| color: #AAA; | ||
| background: rgba(255,255,255,.1); | ||
| border: none; | ||
| padding: 0 6px 0 6px; | ||
| margin: 2px 4px 2px 0; | ||
| font-size: 13px; | ||
| font-family: menlo,monospace; | ||
| font-weight: normal; | ||
| } | ||
|
|
There was a problem hiding this comment.
Copy paste from tag but with slighlty different margins to look good inline
| solution { | ||
| cursor: pointer; | ||
| padding: 0 3px; | ||
| color: #AAA; | ||
| font-size: 13px; | ||
| font-weight: bold; | ||
| } | ||
|
|
There was a problem hiding this comment.
Show it's clickable via pointer cursor
| <h4 class="solutions-title">Solutions</h4> | ||
| <div class="solutions"></div> |
There was a problem hiding this comment.
Add Sulotions title and container much like examples
| var solutions = [] | ||
| if (progress.guessHistory[currentLevel]) { | ||
| if (progress.guessHistory[currentLevel].solutions) { | ||
| solutions = progress.guessHistory[currentLevel].solutions; | ||
| } | ||
| } |
There was a problem hiding this comment.
Get solutions from progress. If the progress exists it will populate its solutions. But additional check is needed because level progress might exist without solutions and in that case progress.guessHistory[currentLevel].solutions will return undefined which is obviously not iterable
| if (progress.guessHistory[currentLevel]) { | ||
| if (progress.guessHistory[currentLevel].solutions) { | ||
| if (!progress.guessHistory[currentLevel].solutions.includes(rule)) { | ||
| $(".display-help .solutions-title").show(); | ||
| let solution = $("<solution>" + rule + "</solution>"); | ||
| $(".display-help .solutions").append(solution); | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| console.log('shit') | ||
| $(".display-help .solutions-title").show(); | ||
| let solution = $("<solution>" + rule + "</solution>"); | ||
| $(".display-help .solutions").append(solution); | ||
| } | ||
|
|
There was a problem hiding this comment.
If there are solutions check the input rule if it matches existing solution. If it's new then add it to solutions container.
If there were no solutions previously you need to show solutions-title also
| if (progress.guessHistory[currentLevel]) { | ||
| if (progress.guessHistory[currentLevel].solutions) { | ||
| if (!progress.guessHistory[currentLevel].solutions.includes(rule)) { | ||
| $(".display-help .solutions-title").show(); |
There was a problem hiding this comment.
Actually this line is redundant since if we have solutions the title should have been shown
| if (localStorage.getItem("hardcore") === "1" && progress.guessHistory[currentLevel]) { | ||
| for (let s of document.querySelectorAll('.display-help .solutions *')) { | ||
| if (s.textContent === rule) { | ||
|
|
||
| $(".strobe").removeClass("strobe"); | ||
| ruleSelected.removeClass("strobe"); | ||
| ruleSelected.addClass("shake"); | ||
|
|
||
| s.classList.add("shake") | ||
| setTimeout(function(){ | ||
| s.classList.remove("shake"); | ||
| $(".shake").removeClass("shake"); | ||
| $(".strobe").removeClass("strobe"); | ||
| levelSelected.addClass("strobe"); | ||
| },500); | ||
|
|
||
| $(".result").fadeOut(); | ||
|
|
||
| return; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
If the solution exists find it in the solutions container and shake it to indicate it's there
| if (progress.guessHistory[currentLevel]) { | ||
| $(".display-help .solutions-title").show(); | ||
| let solution = $("<solution>" + rule + "</solution>"); | ||
| $(".display-help .solutions").show(); | ||
| if (progress.guessHistory[currentLevel].solutions) { | ||
| if (!progress.guessHistory[currentLevel].solutions.includes(rule)) { | ||
| $(".display-help .solutions-title").show(); | ||
| let solution = $("<solution>" + rule + "</solution>"); | ||
| $(".display-help .solutions").append(solution); | ||
| } | ||
| } | ||
| else { | ||
| $(".display-help .solutions").append(solution); | ||
| } |
There was a problem hiding this comment.
Okay this fixes the redundancy from previous commit
Click a solution to fill it in the editor