Add Koopa chess, fix Apocalypse and Dice variants
[vchess.git] / client / src / views / Faq.vue
1 <template lang="pug">
2 main
3 .row
4 .col-sm-12.col-md-8.col-md-offset-2.col-lg-6.col-lg-offset-3
5 div#faqDiv(v-html="content")
6 </template>
7
8 <script>
9 import { store } from "@/store";
10 export default {
11 name: "my-faq",
12 data: function() {
13 return { st: store.state };
14 },
15 computed: {
16 content: function() {
17 // (AJAX) Request to get FAQ content (plain text, HTML)
18 return (
19 require("raw-loader!@/translations/faq/" + this.st.lang + ".pug")
20 // Next two lines fix a weird issue after last update (2019-11)
21 .replace(/\\n/g, " ")
22 .replace(/\\"/g, '"')
23 .replace('module.exports = "', "")
24 .replace(/"$/, "")
25 );
26 }
27 },
28 mounted: function() {
29 this.re_setListeners();
30 },
31 updated: function() {
32 this.re_setListeners();
33 },
34 methods: {
35 re_setListeners: function() {
36 document.querySelectorAll(".answer").forEach(a => {
37 a.style.display = "none";
38 });
39 document.querySelectorAll(".question").forEach(q => {
40 q.addEventListener("click", (e) => {
41 let answerDiv = e.target.nextSibling;
42 const answerVisible = (answerDiv.style.display == "block");
43 answerDiv.style.display = (answerVisible ? "none" : "block");
44 });
45 });
46 }
47 }
48 };
49 </script>
50
51 <style lang="sass">
52 #faqDiv
53 margin-bottom: 10px
54 @media screen and (max-width: 767px)
55 margin-left: var(--universal-margin)
56 margin-right: var(--universal-margin)
57
58 .question
59 color: darkblue
60 font-size: 1.1em
61 margin-top: 15px
62 cursor: pointer
63
64 .answer
65 margin-bottom: 10px
66 ol, ul
67 margin-top: 0
68 margin-bottom: 0
69 </style>