-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
163 additions
and
131 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,83 +1,32 @@ | ||
| .tutorial-wrapper { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| bottom: 0; | ||
| right: 0; | ||
| overflow: hidden; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .tutorial { | ||
| background-color: #e64443; | ||
| width: 0; | ||
| height: 0; | ||
| border-radius: 0 0 100% 0; | ||
| transition: width 2s, height 2s; | ||
| overflow: hidden; | ||
|
|
||
| padding-top: 5px; | ||
| padding-left: 80px; | ||
| color: #ffffff; | ||
| } | ||
| .tutorial.open { | ||
| width: 150vmax; | ||
| height: 150vmax; | ||
| } | ||
| .tutorial > div { | ||
| width: calc(100vw - 80px); | ||
| height: calc(100vh - 50px); | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .tutorial h1 { | ||
| margin-top: 0; | ||
| font-family: 'Hyborian'; | ||
| font-size: 38px; | ||
| } | ||
| .tutorial p { | ||
| font-family: 'Moolbor'; | ||
| padding-right: 20px; | ||
| } | ||
| .tutorial p.last { text-align: right; } | ||
| .tutorial p.actions { text-align: center; } | ||
| .tutorial p a { | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| padding: 0 10px; | ||
| color: #fff; | ||
| border: 1px solid #fff; | ||
| border-radius: 10px; | ||
| text-decoration: none; | ||
| text-transform: uppercase; | ||
| margin: 0 10px; | ||
| white-space: nowrap; | ||
| line-height: 20px; | ||
| height: 20px; | ||
| text-align: center; | ||
| margin-left: 20px; | ||
|
|
||
| } | ||
|
|
||
| .tutorial p a:before { | ||
| font-family: 'Font Awesome 5 Free'; | ||
| font-size: 12px; | ||
| margin-right: 5px; | ||
| } | ||
|
|
||
| .tutorial p a.settings:before { | ||
| content: "\f3e0"; | ||
| } | ||
| .tutorial p a.expansions:before { | ||
| .tutorial-extensions:before { | ||
| content: "\f49e"; | ||
| font-family: 'Font Awesome 5 Free'; | ||
| } | ||
| .tutorial p a.switch:before { | ||
| .tutorial-settings:before { | ||
| content: "\f024"; | ||
| font-family: 'Font Awesome 5 Free'; | ||
| } | ||
| .tutorial p a.access:before { | ||
| content: "\f6d5"; | ||
| } | ||
| .tutorial p a.access { | ||
| background-color: #fff; | ||
| color: #e64443; | ||
|
|
||
| .blinkmenu { | ||
| position: absolute; | ||
| z-index: 1; | ||
| background-color: blue; | ||
| border-radius: 100%; | ||
| width: 0; | ||
| height: 0; | ||
| top: 31px; | ||
| left: 36px; | ||
| transform: translate(-50%,-50%); | ||
| animation-name: example; | ||
| animation-duration: 1s; | ||
| } | ||
|
|
||
| @keyframes example { | ||
| 0% {width: 0; height: 0;} | ||
| 16% {width: 80px; height: 80px;} | ||
| 32% {width: 0; height: 0;} | ||
| 48% {width: 80px; height: 80px;} | ||
| 64% {width: 0; height: 0;} | ||
| 80% {width: 80px; height: 80px;} | ||
| 100% {width: 0; height: 0;} | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,62 @@ | ||
| if (!localStorage.getItem("Welcome")) | ||
| { | ||
| Tutorial = { | ||
| _i18n: { | ||
| 'fr': { | ||
| 'welcome': "Bienvenue", | ||
| 'welcome_p1': "C'est votre premier accès au compagnon de Conan avec ce navigateur.", | ||
| 'welcome_p2': "Avant de commencer, il est recommandé de sélectionner vos extensions et régler vos préférences : Cela affectera par exemple les cartes que vous pourrez voir ou les scénarios que vous pourrez trouver.", | ||
| 'welcome_p4': "Choisir mes extensions", | ||
| 'welcome_p5': "Régler mes préférences", | ||
| 'welcome_p6': "A tout moment, le menu en haut à gauche vous permet de modifier vos préférences et extensions, et vous permet d'accéder à d'autres options.", | ||
| 'welcome_p7': "Accéder à l'application", | ||
| 'welcome_alternative': "Switch to english?" | ||
| }, | ||
| 'en': { | ||
| 'welcome': "Welcome", | ||
| 'welcome_p1': "It is your first access to the companion for Conan with this browser.", | ||
| 'welcome_p2': "Before starting, it is recommanded to select your expansions and customize your settings: This will change, for example, the boards you would see or the scenarios you could find.", | ||
| 'welcome_p4': "Select my expansions", | ||
| 'welcome_p5': "Customize my preferences", | ||
| 'welcome_p6': "At any time, the top left menu let you change your settings or expansions, and also contains other options.", | ||
| 'welcome_p7': "Access the application", | ||
| 'welcome_alternative': "Vous voulez voir ceci en français?" | ||
| } | ||
| Tutorial = { | ||
| _i18n: { | ||
| 'fr': { | ||
| 'settings_message': "L'application a été configurée en français", | ||
| 'settings_switch': "Switch to english", | ||
| 'settings_continue': "Merci", | ||
|
|
||
| 'extensions_message': "En indiquant les éléments du jeu que vous possédez vous disposerez d'une application personnalisée", | ||
| 'extensions_act': "Personnaliser", | ||
| 'extensions_continue': "Par défaut" | ||
| }, | ||
|
|
||
| access: function() { | ||
| localStorage.setItem("Welcome", true); | ||
| $('body .tutorial').removeClass('open'); | ||
| window.setTimeout("$('body .tutorial-wrapper').remove()", 1800); | ||
| }, | ||
|
|
||
| init: function() { | ||
| $('body').append("<div class='tutorial-wrapper'><div class='tutorial'><div>" | ||
| + "<h1>" + Tutorial._i18n[Language].welcome + "</h1>" | ||
| + "<p>" + Tutorial._i18n[Language].welcome_p1 + "</p>" | ||
| + "<p>" + Tutorial._i18n[Language].welcome_p2 + "</p>" | ||
| + "<p class='actions'>" | ||
| + "<a class='expansions' href='javascript:void(0)' onclick='ConanAbout._custom()'>" + Tutorial._i18n[Language].welcome_p4 + "</a>" | ||
| + "<a class='settings' href='javascript:void(0)' onclick='ConanAbout._preferences()'>" + Tutorial._i18n[Language].welcome_p5 + "</a>" | ||
| + "</p>" | ||
| + "<p>" + Tutorial._i18n[Language].welcome_p6 + "</p>" | ||
| + "<p class='last'><a class='switch' href='javascript:void(0)' onclick='Tutorial.switchLanguage()'>" + Tutorial._i18n[Language].welcome_alternative + "</a><a class='access' href='javascript:void(0)' onclick='Tutorial.access()'>" + Tutorial._i18n[Language].welcome_p7 + "</a></p>" | ||
| + "</div></div></div>"); | ||
| window.setTimeout("$('body .tutorial').addClass('open')", 1); | ||
| }, | ||
|
|
||
| switchLanguage: function() { | ||
| localStorage.setItem("Language", Language == 'fr' ? 'en' : 'fr'); | ||
| window.location.reload(true); | ||
| 'en': { | ||
| 'settings_message': "The application was configured in english", | ||
| 'settings_switch': "Passer en français", | ||
| 'settings_continue': "Thank you", | ||
|
|
||
| 'extensions_message': "By specifying the game elements you own you will obtnain a customized application", | ||
| 'extensions_act': "Customize", | ||
| 'extensions_continue': "Default" | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| $().ready(Tutorial.init); | ||
| } | ||
| init: function() { | ||
| if (localStorage.getItem("Language") == null) | ||
| { | ||
| window.setTimeout(function() { | ||
| ConanAbout.actionToast("tutorial-settings", Tutorial._i18n[Language].settings_message, [{ text: Tutorial._i18n[Language].settings_switch, act: "Tutorial._swithLanguage()" }, { text: Tutorial._i18n[Language].settings_continue, act: "Tutorial._keepLanguage()" }]); | ||
| }, 1000); | ||
| } | ||
| else if (!localStorage.getItem("Extensions")) | ||
| { | ||
| window.setTimeout(function() { | ||
| ConanAbout.actionToast("tutorial-extensions", Tutorial._i18n[Language].extensions_message, [{ text: Tutorial._i18n[Language].extensions_continue, act: "Tutorial._ignoreCustom()" }, { text: Tutorial._i18n[Language].extensions_act, act: "Tutorial._custom()" }]); | ||
| }, 1000); | ||
| } | ||
| }, | ||
| _custom: function() { | ||
| localStorage.setItem("Extensions", JSON.stringify(Extensions)); | ||
| ConanAbout.hideActionToast(); | ||
| ConanAbout._custom(); | ||
| Tutorial.init(); | ||
| }, | ||
| _ignoreCustom: function() { | ||
| localStorage.setItem("Extensions", JSON.stringify(Extensions)); | ||
| ConanAbout.hideActionToast(); | ||
| $(document.body).append("<div class=\"blinkmenu\"></div>"); | ||
| Tutorial.init(); | ||
| }, | ||
| _swithLanguage: function() { | ||
| localStorage.setItem("Language", Language == 'fr' ? 'en' : 'fr'); | ||
| $(document.body).append("<div class=\"blinkmenu\"></div>"); | ||
| window.setTimeout("window.location.reload(true);", 1000); | ||
| }, | ||
| _keepLanguage: function() { | ||
| localStorage.setItem("Language", Language); | ||
| ConanAbout.hideActionToast(); | ||
| $(document.body).append("<div class=\"blinkmenu\"></div>"); | ||
| Tutorial.init(); | ||
| } | ||
| } | ||
|
|
||
| $().ready(Tutorial.init); |