powergrid-viewer 2.1.5 → 2.1.6

package/README.md

@@ -33,3 +33,25 @@ yarn lint
 ### Customize configuration
 
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+## Playable tutorials
+
+Seven independent chapters cover auctions, fuel, connections, income, plant replacement, Steps 2/3 and final scoring. They use Germany with classic rules, deterministic positions and scripted opponents. Actions go through the real engine; only the learner's filtered state reaches the board.
+
+From the repository root:
+
+```sh
+pnpm --dir engine build
+pnpm --dir viewer test:tutorial
+NODE_OPTIONS=--openssl-legacy-provider pnpm --dir viewer package
+pnpm --dir viewer test:tutorial:browser
+pnpm --dir viewer preview:tutorial
+```
+
+Open <http://127.0.0.1:5199/?chapter=auctions>. Other chapter IDs are `resources`, `network`, `income`, `upgrades`, `steps` and `final-round`.
+
+The ordinary viewer bundle exposes both `powergrid.launch` and `powergrid.launchTutorial`. Upload the usual JS/CSS and configure the tutorial chapters on the same BGS game version. `pnpm --dir viewer tutorial:manifest` prints the chapter metadata. No second bundle or engine release is required.
+
+Lessons live in `src/tutorial/lessons.ts`. Keep their IDs stable and increase a chapter's version when changing its setup or accepted actions would invalidate saved progress. Test normal board clicks, refresh, rewind and completion on desktop and mobile before release.
+
+See the [desktop and mobile screenshots](docs/tutorials/README.md) for examples of the tutorial UI.

package/dist/powergrid-viewer.css

@@ -1 +1 @@
-.canClick{cursor:pointer}.inline-game-log[data-v-2f8b51a2]{box-sizing:border-box;width:100%;padding:10px 14px;border:1px solid #a2aa82;border-radius:3px;background:#f3f0dc;color:#263521;font:14px Arial,sans-serif}summary[data-v-2f8b51a2]{cursor:pointer;font-weight:600}.journal-feed[data-v-2f8b51a2]{max-height:220px;overflow:auto;-ms-scroll-chaining:chained;overscroll-behavior:auto;margin-top:8px}.journal-plant[data-v-2f8b51a2]{width:76px;height:52px;vertical-align:middle;margin:1px 4px;overflow:visible}.journal-entry[data-v-2f8b51a2]{padding:5px 0;border-bottom:1px solid rgba(117,129,141,.2)}.calculator{fill:#333}.calculator .button{cursor:pointer}.calculator .visor{font-family:"system-ui"}.canClick[data-v-a8c53bc0]{cursor:pointer}ul{-webkit-margin-before:0;margin-block-start:0}.game{display:flex;align-items:center;flex-direction:column}.fitToScreen #scene{max-height:calc(100vh - 40px)}.statusBar{height:40px;width:100%;background-color:#000;color:#fff;text-align:center;line-height:40px;font-size:20px;position:sticky;top:0;z-index:10;flex-shrink:0}#scene{display:block;height:auto;flex:none;margin:0 auto}.game.stacked{height:auto;align-items:stretch}.game.stacked #scene{max-height:none;flex-grow:0;margin-top:0}body,html{background:#e7ebda;color:#263521;height:100%;width:100%;margin:0;padding:0}text{font-family:Arial;pointer-events:none;dominant-baseline:central;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button.highlightButton rect{stroke:#00f;stroke-width:4px}.button.enabled{cursor:pointer}.button.enabled:hover circle,.button.enabled:hover rect{fill:silver;stroke:#fff}.button.enabled:hover line{stroke:#fff}.button.enabled:hover image{filter:invert(1)}.button.enabled:hover text{fill:#fff}.button:not(.enabled) circle,.button:not(.enabled) line,.button:not(.enabled) rect{stroke:silver}.button:not(.enabled) image{filter:invert(.75)}.button:not(.enabled) text{fill:silver}.modal{display:none;position:fixed;z-index:1;padding-top:10vh;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.4)}.modal.visible{display:block}.modal-content{border-radius:5px;background-color:#fefefe;margin:auto;padding:10px 20px 20px 20px;border:1px solid #888;box-sizing:border-box;max-width:100%}@media only screen and (min-width:1240px){.modal-content{position:absolute;left:50%;transform:translate(-50%)}}.modal-body{max-height:calc(80vh - 64px);overflow:auto}.modal-log{max-height:calc(80vh - 75px);overflow:auto;border:1px solid #000}.log-line{padding:5px}.log-line:nth-last-child(2n){background:#ccc}.log-line:nth-last-child(odd){background:#fff}.modal-title{text-align:center;margin-bottom:10px}.close,.modal-title{font-size:28px;font-weight:700}.close{color:#aaa;float:right}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer}.map-specific-rules{display:block;white-space:pre-wrap;overflow-wrap:anywhere}.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.payment-table{border:1px solid #000;margin:5px auto}.payment-table tr td{border:1px solid #000;text-align:center;padding:0 10px 0 10px}.final-score-table,.spending-table{margin:auto;border:1px solid #000}.final-score-table tr td,.final-score-table tr th,.spending-table tr td,.spending-table tr th{border:1px solid #000;text-align:center;overflow:hidden;text-overflow:ellipsis}.final-score-table tr td div,.final-score-table tr th div,.spending-table tr td div,.spending-table tr th div{width:120px;line-height:38px}.final-score-table tr td:first-child,.final-score-table tr th:first-child,.spending-table tr td:first-child,.spending-table tr th:first-child{position:sticky;left:0;background-color:#fefefe;box-shadow:2px 0 3px -1px rgba(0,0,0,.3)}.final-score-table tr td:first-child div,.final-score-table tr th:first-child div,.spending-table tr td:first-child div,.spending-table tr th:first-child div{width:250px}@media only screen and (max-width:700px){.modal-content{padding:10px}.final-score-table tr td div,.final-score-table tr th div,.spending-table tr td div,.spending-table tr th div{width:auto;min-width:60px;padding:0 6px;line-height:32px}.final-score-table tr td:first-child div,.final-score-table tr th:first-child div,.spending-table tr td:first-child div,.spending-table tr th:first-child div{width:auto;min-width:0;max-width:38vw;text-align:left}.payment-table tr td{padding:0 6px}}.confirm-message{font-size:18px;padding:10px}.confirm-buttons{text-align:center}.confirm-button{margin:15px 0 0 15px}.journal-and-chat{width:100%;display:grid;gap:8px;margin:8px 0;padding-bottom:env(safe-area-inset-bottom);align-items:start}.journal-and-chat>*{min-width:0}.journal-and-chat .bgs-game-chat{margin:0}@media (min-width:1000px){.journal-and-chat{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
+.canClick{cursor:pointer}.inline-game-log[data-v-2f8b51a2]{box-sizing:border-box;width:100%;padding:10px 14px;border:1px solid #a2aa82;border-radius:3px;background:#f3f0dc;color:#263521;font:14px Arial,sans-serif}summary[data-v-2f8b51a2]{cursor:pointer;font-weight:600}.journal-feed[data-v-2f8b51a2]{max-height:220px;overflow:auto;-ms-scroll-chaining:chained;overscroll-behavior:auto;margin-top:8px}.journal-plant[data-v-2f8b51a2]{width:76px;height:52px;vertical-align:middle;margin:1px 4px;overflow:visible}.journal-entry[data-v-2f8b51a2]{padding:5px 0;border-bottom:1px solid rgba(117,129,141,.2)}.calculator{fill:#333}.calculator .button{cursor:pointer}.calculator .visor{font-family:"system-ui"}.canClick[data-v-a8c53bc0]{cursor:pointer}ul{-webkit-margin-before:0;margin-block-start:0}.game{display:flex;align-items:center;flex-direction:column}.fitToScreen #scene{max-height:calc(100vh - 40px)}.statusBar{height:40px;width:100%;background-color:#000;color:#fff;text-align:center;line-height:40px;font-size:20px;position:sticky;top:0;z-index:10;flex-shrink:0}#scene{display:block;height:auto;flex:none;margin:0 auto}.game.stacked{height:auto;align-items:stretch}.game.stacked #scene{max-height:none;flex-grow:0;margin-top:0}body,html{background:#e7ebda;color:#263521;height:100%;width:100%;margin:0;padding:0}text{font-family:Arial;pointer-events:none;dominant-baseline:central;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button.highlightButton rect{stroke:#00f;stroke-width:4px}.button.enabled{cursor:pointer}.button.enabled:hover circle,.button.enabled:hover rect{fill:silver;stroke:#fff}.button.enabled:hover line{stroke:#fff}.button.enabled:hover image{filter:invert(1)}.button.enabled:hover text{fill:#fff}.button:not(.enabled) circle,.button:not(.enabled) line,.button:not(.enabled) rect{stroke:silver}.button:not(.enabled) image{filter:invert(.75)}.button:not(.enabled) text{fill:silver}.modal{display:none;position:fixed;z-index:20;padding-top:10vh;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.4)}.modal.visible{display:block}.modal-content{border-radius:5px;background-color:#fefefe;margin:auto;padding:10px 20px 20px 20px;border:1px solid #888;box-sizing:border-box;max-width:100%}@media only screen and (min-width:1240px){.modal-content{position:absolute;left:50%;transform:translate(-50%)}}.modal-body{max-height:calc(80vh - 64px);overflow:auto}.modal-log{max-height:calc(80vh - 75px);overflow:auto;border:1px solid #000}.log-line{padding:5px}.log-line:nth-last-child(2n){background:#ccc}.log-line:nth-last-child(odd){background:#fff}.modal-title{text-align:center;margin-bottom:10px}.close,.modal-title{font-size:28px;font-weight:700}.close{color:#aaa;float:right}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer}.map-specific-rules{display:block;white-space:pre-wrap;overflow-wrap:anywhere}.table-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.payment-table{border:1px solid #000;margin:5px auto}.payment-table tr td{border:1px solid #000;text-align:center;padding:0 10px 0 10px}.final-score-table,.spending-table{margin:auto;border:1px solid #000}.final-score-table tr td,.final-score-table tr th,.spending-table tr td,.spending-table tr th{border:1px solid #000;text-align:center;overflow:hidden;text-overflow:ellipsis}.final-score-table tr td div,.final-score-table tr th div,.spending-table tr td div,.spending-table tr th div{width:120px;line-height:38px}.final-score-table tr td:first-child,.final-score-table tr th:first-child,.spending-table tr td:first-child,.spending-table tr th:first-child{position:sticky;left:0;background-color:#fefefe;box-shadow:2px 0 3px -1px rgba(0,0,0,.3)}.final-score-table tr td:first-child div,.final-score-table tr th:first-child div,.spending-table tr td:first-child div,.spending-table tr th:first-child div{width:250px}@media only screen and (max-width:700px){.modal-content{padding:10px}.final-score-table tr td div,.final-score-table tr th div,.spending-table tr td div,.spending-table tr th div{width:auto;min-width:60px;padding:0 6px;line-height:32px}.final-score-table tr td:first-child div,.final-score-table tr th:first-child div,.spending-table tr td:first-child div,.spending-table tr th:first-child div{width:auto;min-width:0;max-width:38vw;text-align:left}.payment-table tr td{padding:0 6px}}.confirm-message{font-size:18px;padding:10px}.confirm-buttons{text-align:center}.confirm-button{margin:15px 0 0 15px}.journal-and-chat{width:100%;display:grid;gap:8px;margin:8px 0;padding-bottom:env(safe-area-inset-bottom);align-items:start}.journal-and-chat>*{min-width:0}.journal-and-chat .bgs-game-chat{margin:0}@media (min-width:1000px){.journal-and-chat{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.powergrid-tutorial{max-width:1600px;margin:auto;padding:16px;color:#233745;background:#f0f1e9;font:16px/1.5 system-ui,sans-serif;box-sizing:border-box}.powergrid-tutorial .bgs-tutorial-guide{background:#fffef5;border:1px solid #c6cbc4;border-top:4px solid #3c758a;border-radius:8px;padding:16px 20px}.powergrid-tutorial .bgs-tutorial-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.powergrid-tutorial .bgs-tutorial-heading strong{font-size:20px}.powergrid-tutorial .bgs-tutorial-body p{max-width:90ch;margin:12px 0}.powergrid-tutorial .bgs-tutorial-body small{color:#566870;display:block;margin:12px 0}.powergrid-tutorial .bgs-tutorial-body [role=alert]{color:#a3311d;font-weight:600}.powergrid-tutorial .bgs-tutorial-feedback{background:#e0f0df;border-left:4px solid #45824b;padding:10px 14px;margin:12px 0}.powergrid-tutorial .bgs-tutorial-controls,.powergrid-tutorial .bgs-tutorial-help,.powergrid-tutorial .bgs-tutorial-playback,.powergrid-tutorial .tutorial-answers{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.powergrid-tutorial .bgs-tutorial-playback{flex-wrap:nowrap}.powergrid-tutorial .bgs-tutorial-help:empty{display:none}.powergrid-tutorial button{font:inherit;border:1px solid #96afb5;border-radius:6px;padding:8px 12px;min-height:40px;background:#edf3f2;color:#234250;cursor:pointer}.powergrid-tutorial button:hover:not(:disabled){background:#d8e8ea}.powergrid-tutorial button:focus-visible{outline:3px solid #267f9f;outline-offset:2px}.powergrid-tutorial button:disabled{opacity:.45;cursor:default}.powergrid-tutorial .bgs-tutorial-transport{display:inline-flex;align-items:center;justify-content:center;width:40px;flex:0 0 40px;padding:0}.powergrid-tutorial .bgs-tutorial-next-chapter{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;white-space:nowrap}.powergrid-tutorial .bgs-tutorial-guide [hidden],.powergrid-tutorial .tutorial-answers[hidden]{display:none}.powergrid-tutorial .tutorial-answers{margin-top:12px}.powergrid-tutorial .tutorial-summary{display:flex;flex-wrap:wrap;gap:8px 24px;padding:14px 4px;font-size:13px;color:#536568}.powergrid-tutorial .tutorial-board{background:#fff;border-radius:8px;overflow:hidden}.powergrid-tutorial .bgs-tutorial-highlight{outline:3px solid #d28913;outline-offset:3px}@media (max-width:600px){.powergrid-tutorial{padding:8px;font-size:14px}.powergrid-tutorial .bgs-tutorial-guide{padding:12px}.powergrid-tutorial .bgs-tutorial-heading strong{font-size:17px}.powergrid-tutorial .tutorial-summary{gap:5px 12px}}