| 1 | // NOTE: do not use ajax() here because ajax.js requires the store |
| 2 | import params from "./parameters"; //for server URL |
| 3 | import { getRandString } from "./utils/alea"; |
| 4 | import { delCookie } from "./utils/cookie"; |
| 5 | |
| 6 | // Global store: see |
| 7 | // https://medium.com/fullstackio/managing-state-in-vue-js-23a0352b1c87 |
| 8 | export const store = { |
| 9 | state: { |
| 10 | variants: [], |
| 11 | tr: {}, |
| 12 | user: {}, |
| 13 | settings: {}, |
| 14 | lang: "" |
| 15 | }, |
| 16 | initialize() { |
| 17 | const headers = { |
| 18 | "Content-Type": "application/json;charset=UTF-8", |
| 19 | "X-Requested-With": "XMLHttpRequest" |
| 20 | }; |
| 21 | fetch( |
| 22 | params.serverUrl + "/variants", |
| 23 | { |
| 24 | method: "GET", |
| 25 | headers: headers |
| 26 | } |
| 27 | ) |
| 28 | .then(res => res.json()) |
| 29 | .then(json => { |
| 30 | if (!Array.isArray(json.variantArray)) { |
| 31 | alert("Variants loading failed: reload the page"); |
| 32 | return; |
| 33 | } |
| 34 | this.state.variants = json.variantArray |
| 35 | .sort((v1,v2) => v1.name.localeCompare(v2.name)); |
| 36 | }); |
| 37 | let mysid = localStorage.getItem("mysid"); |
| 38 | // Assign mysid only once (until next time user clear browser data) |
| 39 | if (!mysid) { |
| 40 | mysid = getRandString(); |
| 41 | localStorage.setItem("mysid", mysid); |
| 42 | } |
| 43 | // Quick user setup using local storage: |
| 44 | this.state.user = { |
| 45 | id: parseInt(localStorage.getItem("myid") || "0", 10), |
| 46 | name: localStorage.getItem("myname") || "", //"" for "anonymous" |
| 47 | email: "", //unknown yet |
| 48 | notify: false, //email notifications |
| 49 | sid: mysid |
| 50 | }; |
| 51 | // Slow verification through the server: |
| 52 | fetch( |
| 53 | params.serverUrl + "/whoami", |
| 54 | { |
| 55 | method: "GET", |
| 56 | headers: headers, |
| 57 | credentials: params.credentials |
| 58 | } |
| 59 | ) |
| 60 | .then(res => res.json()) |
| 61 | .then(json => { |
| 62 | if (!json.id) { |
| 63 | // Removed, or wrong token |
| 64 | if (this.state.user.id > 0) { |
| 65 | this.state.user.id = 0; |
| 66 | localStorage.removeItem("myid"); |
| 67 | } |
| 68 | if (!!this.state.user.name) { |
| 69 | this.state.user.name = ""; |
| 70 | localStorage.removeItem("myname"); |
| 71 | } |
| 72 | if (document.cookie.indexOf("token") >= 0) delCookie("token"); |
| 73 | } |
| 74 | else { |
| 75 | if (this.state.user.id != json.id) { |
| 76 | this.state.user.id = json.id; |
| 77 | localStorage.setItem("myid", json.id); |
| 78 | } |
| 79 | if (this.state.user.name != json.name) { |
| 80 | this.state.user.name = json.name; |
| 81 | localStorage.setItem("myname", json.name); |
| 82 | } |
| 83 | this.state.user.email = json.email; |
| 84 | this.state.user.notify = json.notify; |
| 85 | } |
| 86 | }); |
| 87 | // Settings initialized with values from localStorage |
| 88 | const getItemDefault = (item, defaut) => { |
| 89 | const value = localStorage.getItem(item); |
| 90 | if (!value) return defaut; |
| 91 | return value == "true"; |
| 92 | }; |
| 93 | this.state.settings = { |
| 94 | bcolor: localStorage.getItem("bcolor") || "lichess", |
| 95 | sound: getItemDefault("sound", true), |
| 96 | hints: getItemDefault("hints", true), |
| 97 | highlight: getItemDefault("highlight", true), |
| 98 | gotonext: getItemDefault("gotonext", true), |
| 99 | scrollmove: getItemDefault("scrollmove", false) |
| 100 | }; |
| 101 | const supportedLangs = ["en", "es", "fr"]; |
| 102 | const navLanguage = navigator.language.substr(0, 2); |
| 103 | this.state.lang = |
| 104 | localStorage["lang"] || |
| 105 | (supportedLangs.includes(navLanguage) ? navLanguage : "en"); |
| 106 | this.setTranslations(); |
| 107 | }, |
| 108 | updateSetting: function(propName, value) { |
| 109 | this.state.settings[propName] = value; |
| 110 | localStorage.setItem(propName, value); |
| 111 | }, |
| 112 | setTranslations: async function() { |
| 113 | // Import translations from "./translations/$lang.js" |
| 114 | const tModule = await import("@/translations/" + this.state.lang + ".js"); |
| 115 | this.state.tr = tModule.translations; |
| 116 | }, |
| 117 | setLanguage(lang) { |
| 118 | this.state.lang = lang; |
| 119 | this.setTranslations(); |
| 120 | } |
| 121 | }; |