Version 1.0
This commit is contained in:
EisiBaer committed
commit
a4b0db9118
102 files changed
+16343
No files matched your search
@@ -0,0 +1,25 @@
|
||||
<script setup>
|
||||
import { RouterView } from "vue-router";
|
||||
import Navbar from "./components/common/Navbar.vue";
|
||||
import { useUserStore } from "@/stores/UserStore";
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
userStore.initialUserPromise
|
||||
.then( ( userData ) => {
|
||||
userStore.setUser( userData );
|
||||
})
|
||||
.catch( ( err ) => {
|
||||
console.debug( err );
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Navbar />
|
||||
<div class="full-height-wrapper">
|
||||
<RouterView />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Binary file not shown.
@@ -0,0 +1,64 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="103.44236mm"
|
||||
height="80.726883mm"
|
||||
viewBox="0 0 103.44236 80.726882"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
sodipodi:docname="logo_draft2_thicker_thick_q_white.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#ffffff"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="1"
|
||||
inkscape:deskcolor="#505050"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="1.4142136"
|
||||
inkscape:cx="90.156115"
|
||||
inkscape:cy="38.890873"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1355"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" /><defs
|
||||
id="defs2" /><g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-51.241626,-83.781469)"><image
|
||||
width="133.08542"
|
||||
height="125.14792"
|
||||
preserveAspectRatio="none"
|
||||
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfcAAAHZCAYAAACb03JhAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAg AElEQVR4Xuy927MsWXrY9ftWZlXtfc4+l+7pnu4eyeORNB5LYWSNLMLYOECyIXggHP5veCPAELwS RPBGBA888YBeMChwYIxvgMJGYGEbhSVLFh6PRpr2zHRPn8u+VGWuj4dV397fXmetzKyqrH32OX1+ 3Scyc12+61q5MrOyaouqKo5f+bd/hWfPniMivhgAVUVEaNv2en8uYoyEEIgxVmVbuYgU21iZyQkh 3Kq/z0z1P4RQ9d8Yqz8Ek5sNm3vP1Ni948uFjYWheXdMXud4HJvLvj7GWLTxTT7njjF2Tj527kx2 13VVParK48eP+Dt/7+/kVYi6zP7FX/4VXrw4n5TIYzLkiMj44n4oNfnHxE+kmu5auTEWnznYR/YU 34yx+n1RTYv7O95RYsrYrDHWb2he+rlx18wxL4d8OzZ3GbuSb3elv3ZxATfntbOzB/ztv/t3btVd L+5/5S//Ff7oj75fFJCzr1PW79hXeYfaNzZQx+pfN/v6P4TJbJpmdt+9vXPLzjlGbN7x5jLHXJ56 3ihh7fu+37nvoexj710yNlePfd44ND5jd/5j7KJfVfnaJx/z137tf7guE1XV//Sv/if82q/9T7ca DjFFWYmpho5Rc7pUtgvWvyb/mPiBOkbNvlLZXBwzNt73uWV7jiX3HW8+U+ZdjUPmxl2N/TFKuuc4 Jx2Tu4xdSf4u8Sn1n8qYfC/3L//lf5//6K/+x6lcVfUXf+EXadvFdYO7SlRutOk89p19jak+31V8 7hM+H4f4Pha7obp3vOM+MjRmxxYA3/d1nPPuM2Ox8wzl4FiM3Znnx3NTik/XbfjNf/SbAMif/zf+ vK7Xm1uNj7G47pKgEEIxWMekFKicY8bnPuNjcoycWNyPIfsd77grppxDahx7jr2JjC2entdxDjF9 U+wzprSZSi0+y+WCX//7v057dbW+1cEG2ZxGQJJbMiRv87qYOjisfqzd20TJ111zZbEtXRiVTool ne94x30jH7P5OaR2Aja+jOeTqeSxGYpRKbZ3hWr6WKBEft6b00aTZbpte3W15lf/u19F/sy3f+na Km/IIZQGuXe+5uRc+seo2WflNVTvxxvXJfth+gCf2s4YislUfG6H9E/Jw5eVWsyMsZiN9T+UMf1v I7W5aFhdbXEvMaXNXEy1qdTuLudqbc0wSnm4K/uGcqta/wruXPaV9SutF2z7JUN2Je9rTpohJebU P0Yu2we6pvsu7RujpHvKQBFJL/7sQp67XfvDTewsvjXuQ2zvM36cGrvEbCj2++B1T9H/tlHKh2fK uDcZx7i7G8N01WwzSjZZWaluDnxsa/b5sZfPgftin283p31j+ttcsDWG8YTXqDniE5HrNebQvw+5 zTX74PaEfR3kthqlshJT2xl5THbp6xnKrbcpr3vHDaXc2/GUuO2buxq76H4b8eM5z4vhy0v1cPjc 2hezbUxvybe7yL3JHrLRz4lj2lLikNzOYfOQ/rb0mHlfpV5R3lckPZoKIRR/4c7rtHa5jEMxHaXP fT15kAzv2z7xOZSh+FpZ7RGQ1du/vG4IP3h26ecZ6/e6Y3vfUVWaprmVC49I/dGvH/d53RyYzL7v jyL/PmNjdcrcqNX78lqbY+HHRj52/FyMMbpeN/W2zfvOgY/trudqGH/f4VDMvpptntJ57dD4jem/ 9VjeMCW7KoPbC0De347NGY931Cd1brzs3IYpDPl3F4zp93HMsbJSvyEOiVdOLbdWNuTbl51abvO8 lmI3V/5y8nlb0v22Yz4Pjespsa/NjWPibc9tnJJbX1aqPxRv367k8TyWfWO2+djlNhwavyH9rzyW nwM/KHJ8md+vOT8nuezcPhsIY3f2r5tafGux9WX5gJ/C3LkpySmVveOGodzmdXksfd7nxo/Fku4v EyXfd507U9vNhR8b+fjIc1uiVj43pbiM3Zn747xuTmqyp8y7obqp1PS3ecG+THVEpPzyQ6lfzeh9 KMkvsetkvCt2iW+NUtzfcf/x8wZeHZt27MeIb1Mqm4vcpmPpecf85ONlKG9D5x047hir4cdeyb5S 2V3a5+M7FptjxG/Wxd22Q0b6djnW7xhvjaqOv/Fdsum+MDX5tfj6ifCON4tSznx+x3Kbl+dj4xC8 7FzPO+43pXz5seHPJSLji/9Q/bGpjeljriljmK7aOdnKfLs57at+5r6rIp/8kkyYbry1q8kZo2S/ 7Y/J9XVD7Q6hZB8Mx2dKTMb63wU13w5lqsyp7d4kxnJXqvcxKNXPRUn2mxb/ucbMPnKmzOv7wBT7 cv/vwjfV+kcGhtlUy81Y/0Mw2XlsPCLDF077Uv3MvVZewyeyFixfXmpjZaU3N3cl7zvVPtV0h3+o /jFKsq3M22rYvtlY6l9q74+tz7HfJSjZdig+NkMcQ/frxsbk2FMnkfIdikh6k963m5Mh3W8C+Vzb B5H9TtDWZ5++hzL2mXV+zikxlPtj+2a6zf4S3va8jeX92PaNxc+3m9OWWe/cbWv/Svi6UhvTDa8m Yyol+3ex71D9hzAUn5I/OVP6H9OvUuznwGSOyT2G7tdNns+af0P1U8bOIQzpvu/MNWb2keNP7HeN 6R3L3ZT61+WHPy8M2Vfy4S5sniO++/LKL9RZIHYdqN7Apmmy2lcpybayfYPubc77ep/G7NtX/xgm t/Y2vt1d1ep9zIbil+/nx3P7BcOxnwOTWfp78j5f+d3D24D5IzJ8Aivt52WlukMZ033fUR3+fYgh rL39PfZdsT6q9Sdyx8L7W9IrcvPbJKWnmRY3m3f5+WrsycChePtr5/Tcv9wG8/GY9uVxqbGrfrO5 Nu5eeSxfC8IYY4p2YV8bIPWp9bfjMRtr/efAYlSLVU2371Pq5/E6DH+cy56LodjPQc1/O859flsY Gi85pdzD+Jifg5ru+46P7a5xsvaHjHvfZ5/+h2D6SnnLY1KKjS/L6/PxkMufgynzomb/HLkbY4p9 8GqspjBm92xvy48puktqyTT2CeQc5Ppy+1Snfz6Uy8rJ6/PjY1Gz/1C8vFy21/k68npspubcKLUr lR2Du9IzJ0Nja4x87O3Dvv3mpJS3fNzlbWyu1Xz37fO+czJVttlq5PtT5ezKVLlT2xk+/iVmW9xf N2OOwk0ba7drMA9hyC6PtRtq/zrsH2JK7A/FZJd8tjLb3qfYvON+488JUB5fU1AtL3C78KbN67Fz Van8Ln0r6ffk54v7FPspeLtLtr9Vi7ttS44ah07ifVGd9sazffYHdRtr/V8XdzUx/EDOy0v773jH GKXxko+vIazt2Jydwl3MoV2YMq+tzt4XyrH+pbfpj83YOXeOnL1OcvtzP4qLuw3YXQb5LkwZNLsi cnP1XbM7Xxhq7Q6l5J+VjTE19mP1x6Lk21SbD8Fkl8bMMfW+4x1TyM8t+1KaW1PPHceipnuXeZ/7 5cum9N8Hf64q6SiV5TaOUfIrp6RnLmzclXRcvy3vA1E6gc/N3LJ9EkuOwk0gSm9+zk0u2/Tu+51M KxOpv21/V4z5ltfPgY/HfY7NO94sDn2j28/X0ricQj52vQ22v6tdczAWmym+W/nr8M1sHrOvFvsp WHuvy9eV4jYXJru2ptx6W94b6rdzcwyn/UCxfyV8Au7Sv7xsyD7bltp4Oceyf1em+nYoPiYlHfcx Nu+438wxdn2fffrD/Ry7U2Nj83KoPj8fQnlBnBuTPWaf3+6C+VCTcRf+1XRfL+6qr35ncW6jvCFD smuDYQjvYO07j8axBtWQfyI33xkt+edtqt15etnHsH8I01m7M7YyGzc13/K6qfg+pf6vMzbveHPx c7E0rsawPkP9vfx8/Ku+et71jN09H5Ox2IjcnNPatn3FPj8XS2uK7R9yXhjC25/H1fA699E/lNtj 524sP8XP3I1Sh0PIDRmSP1RXwg+kMabo34cx/7x9uZ2+3CctbzMk/9h4u3L74VWfDN+n1mYq9zU2 73hzsbFSGldjDM0Hw+qGxq61yeXkffK+x2YoNrnvue2+vGb/kPw58PKHyOM8hdy/vH/u8y6yp+Lj n/PKL9TBcYyAVwNdM6oUqDGOGcCpTPWvVD/F/qG6Y5Przn3zYyevy/OZy9qVUv9S2TvesQv7jKGp Y9rPgfyca2X5vIHbcsd0HJOS7rws9w1unyfyOl+Wy5qbKfKntPH43Ndy6/d3lT+VmtzZflt+jJLz OdbmGPqPzaH+lfrdF/9LttVQLZ+kjJLv73jH28rYeaFWbpTq78vcKdnm8b6Pzfk38bwwNbe+3V36 98rPz8JxrjKmOmf1Y+3uGz6RQ376djnWb983N4+F6vjb8OaPfbZVagPHGVvveMd9Zcp5T6T+xjO8 ueeF/FxX8s/3K8m4z3i/SrbbcV5+VxTv3KGciKmUnDHnh+TmdfnxHJRsyyklagyRmzvyGlPkmowx WYcwZkPOLjbZQB9irP7LjI/1VKbmBnbP/Ri76P4yU4tPrTzH8jaUv9q4mapjV3Y9L5RsM4bqjsVU 22uM2VySO9anREnOFF75zF2k/kb0VEpBs33V8lWO1cE8f899iJJ9fqDuo9fLrCWjFA+PlXlb7gOq 076jb9tSG/Pn0LH1ZWDXvFv7XfvNwevU/SYw9sb02LyB23V5mynnrVr5oZjemu1TffP7x7K1xKFj 1+wdOy9abmptavjc7sMrj+W9wF2NMWpB88d5neH17qt/CAu07ed1sN8gy2XW+g/pN47pP9T11rCc iEz/SklJh5dzLN/e8Y77hB/zdpwz5Zww1MaOa+etY841kz0050v7nppfx2aOc9FYbmE4d0Mcat+t r8Llg2RXoX4BKN2djSX6UP1jqKY70JLine truncated
|
||||
id="image140"
|
||||
x="27.046398"
|
||||
y="61.828457"
|
||||
style="display:none;opacity:0.4039" /><path
|
||||
style="opacity:1;fill:#e86a92;fill-opacity:1;stroke:#e86a92;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
|
||||
d="m 89.597943,161.46239 c 4.957603,-11.31418 10.365454,-13.95841 18.872727,-16.46612 l -0.969,2.23271 10.17543,-3.72589 -1.44748,2.89495 c 7.77057,-2.08212 9.96019,-3.12838 17.29351,-0.22855 8.26326,-4.46932 15.33088,-3.99272 18.58862,-16.15077 0.39797,-1.48523 0.47248,-3.46705 -16.76023,-13.25582 0.6718,-1.59948 -0.64483,-6.30424 -1.44747,-7.69446 -11.87841,-11.878406 -22.82609,-9.786559 -25.14034,-11.122693 -5.10133,-2.945257 -5.77849,-9.894901 -10.741782,-10.89415 -6.64933,-1.781683 -10.639666,-0.422382 -8.015124,7.302597 -4.755054,-0.07748 -19.311199,0.225543 -19.311199,0.225543 l 4.218975,2.479364 -10.418322,0.541411 4.479459,2.526958 c -6.00567,0.93796 -10.085508,3.02646 -13.849528,6.19633 l 3.879167,3.25675 c 11.896264,-8.5256 27.407274,-7.5637 31.986403,1.85066 8.053096,14.19441 -5.364775,20.05902 -11.44594,30.07143 1.070396,5.80331 1.412146,7.38337 3.627235,11.42304 1.414891,2.45066 5.193343,11.34733 6.424889,8.53671 z"
|
||||
id="path919"
|
||||
sodipodi:nodetypes="sccccccccccccccccccccs" /><path
|
||||
style="opacity:1;fill:none;stroke:#ffffff;stroke-width:8;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 57.671788,111.83817 c 4.776043,-5.45079 12.940609,-7.24498 19.118918,-7.24498 13.656487,0 13.875779,8.51413 14.475615,10.75275 0,14.09963 -13.925936,15.13618 -10.506511,27.69217 0.653123,2.43749 0.932727,3.34729 2.242618,6.17334"
|
||||
id="path2566"
|
||||
sodipodi:nodetypes="ccccc" /><ellipse
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.80661;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path2620"
|
||||
cy="182.73756"
|
||||
cx="-0.050881278"
|
||||
rx="3.2998796"
|
||||
ry="3.4343019"
|
||||
transform="rotate(-29.11515)" /></g></svg>
|
||||
|
After Width: | Height: | Size: 230 KiB |
@@ -0,0 +1,65 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="115.22386mm"
|
||||
height="33.715347mm"
|
||||
viewBox="-3 -2 131.8969 38.594"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#ffffff"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="1"
|
||||
inkscape:deskcolor="#505050"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false" />
|
||||
<defs
|
||||
id="defs2" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-21.975686,-21.052838)">
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:0.5;stroke-dasharray:none;stroke-dashoffset:0"
|
||||
d="m 20.975686,39.361128 c 9.393449,0 9.778022,-6.732235 13.656397,-6.732235 4.363505,0 3.215481,10.942656 6.656914,10.942656 4.076696,0 5.680598,-13.656727 9.582053,-13.656727 3.267077,0 5.734719,17.064777 8.985079,17.064777 3.368218,0 3.259782,-20.961349 7.580609,-20.961349 4.594301,0 3.440897,24.535907 7.075557,24.535907 3.635658,-0.08378 2.929635,-30.251319 7.849764,-30.251319 4.946458,0 4.18451,36.473046 9.161492,36.473046 5.325714,0 3.671731,-36.100712 10.078299,-36.100712 5.62464,0 2.28344,36.429035 9.69084,36.429035 6.41649,-0.002 5.18604,-28.905808 10.34433,-28.905808 5.20636,0 2.08351,21.387216 6.14903,21.385359 3.86298,-0.0018 5.29683,-11.873254 9.19071,-11.873254 1.64054,0 5.03504,4.164663 11.47819,4.164663"
|
||||
id="path846"
|
||||
sodipodi:nodetypes="ccccccccccccscc" />
|
||||
</g>
|
||||
<metadata
|
||||
id="metadata1368">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<cc:license
|
||||
rdf:resource="http://artlibre.org/licence/lal" />
|
||||
</cc:Work>
|
||||
<cc:License
|
||||
rdf:about="http://artlibre.org/licence/lal">
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Reproduction" />
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#Distribution" />
|
||||
<cc:permits
|
||||
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
|
||||
<cc:requires
|
||||
rdf:resource="http://creativecommons.org/ns#ShareAlike" />
|
||||
<cc:requires
|
||||
rdf:resource="http://creativecommons.org/ns#Notice" />
|
||||
<cc:requires
|
||||
rdf:resource="http://creativecommons.org/ns#Attribution" />
|
||||
</cc:License>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 308 B |
Whitespace-only changes.
@@ -0,0 +1,187 @@
|
||||
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
|
||||
@import "~bootstrap/scss/functions";
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "Urbanist";
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: auto;
|
||||
unicode-range: U+000-5FF;
|
||||
src: local("Urbanist"), url(@/assets/fonts/Urbanist-Regular.woff2) format("woff2");
|
||||
}
|
||||
|
||||
/* COLOR THEME */
|
||||
|
||||
/* SCSS HEX */
|
||||
$raisin-black: #272838ff;
|
||||
$teal: #0e7b81ff;
|
||||
$teal-darkened: #0d6064;
|
||||
$tiffany-blue: #7dded9ff;
|
||||
$light-coral: #eb8a90ff;
|
||||
$cyclamen: #e86a92ff;
|
||||
|
||||
$space-cadet: #2b2d42ff;
|
||||
$cool-gray: #8d99aeff;
|
||||
$celadon: #95d7aeff;
|
||||
$green-active: #158a42;
|
||||
$tangerine: #f28f3bff;
|
||||
$sandy-brown: #ee964bff;
|
||||
$prussian-blue: #0b3954ff;
|
||||
$oxfort-blue: #13273eff;
|
||||
|
||||
$mint: #21D19F;
|
||||
$malachite: #53DD6C;
|
||||
$rusty-red: #D33F49;
|
||||
$amaranth: #DF3B57;
|
||||
$scarlet: #FF331F;
|
||||
$rusty-scarlet: #E53A35;
|
||||
|
||||
// /* SCSS RGB */
|
||||
// $raisin-black: rgba(39, 40, 56, 1);
|
||||
// $teal: rgba(14, 123, 129, 1);
|
||||
// $tiffany-blue: rgba(125, 222, 217, 1);
|
||||
// $light-coral: rgba(235, 138, 144, 1);
|
||||
// $cyclamen: rgba(232, 106, 146, 1);
|
||||
|
||||
// /* SCSS Gradient */
|
||||
// $gradient-top: linear-gradient(0deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
|
||||
// $gradient-right: linear-gradient(90deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
|
||||
// $gradient-bottom: linear-gradient(180deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
|
||||
// $gradient-left: linear-gradient(270deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
|
||||
// $gradient-top-right: linear-gradient(45deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
|
||||
// $gradient-bottom-right: linear-gradient(135deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
|
||||
// $gradient-top-left: linear-gradient(225deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
|
||||
// $gradient-bottom-left: linear-gradient(315deg, #272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
|
||||
// $gradient-radial: radial-gradient(#272838ff, #0e7b81ff, #7dded9ff, #eb8a90ff, #e86a92ff);
|
||||
|
||||
$primary: $prussian-blue;
|
||||
$secondary: $tiffany-blue;
|
||||
$danger: #a41522;
|
||||
$tertiary: $teal-darkened;
|
||||
$accent-primary: $teal;
|
||||
$accent-secondary: $teal-darkened;
|
||||
$pink-accent-primary: $cyclamen;
|
||||
$pink-accent-secondary: $light-coral;
|
||||
$dark-primary: $oxfort-blue;
|
||||
$dark-secondary: $space-cadet;
|
||||
$dark-blue: $prussian-blue;
|
||||
|
||||
$body-bg: $dark-primary;
|
||||
$body-color: #f0dcdc;
|
||||
$link-color: #f0dcdc;
|
||||
|
||||
//Form Control
|
||||
$form-file-button-bg: shade-color($prussian-blue, 10%);
|
||||
$input-disabled-bg: shade-color($oxfort-blue, 10%);
|
||||
|
||||
//Accordion
|
||||
$accordion-button-active-bg: shade-color($body-bg, 5%);
|
||||
$accordion-button-active-color: #f0dcdc;
|
||||
|
||||
|
||||
//Modal
|
||||
$modal-content-bg: $dark-blue;
|
||||
|
||||
|
||||
|
||||
$font-family-base: "Urbanist";
|
||||
|
||||
|
||||
|
||||
// 2. Include any default variable overrides here
|
||||
// $form-select-indicator-color: $primary;
|
||||
// $form-select-border-color: $primary;
|
||||
// $input-border-color: $dark-blue;
|
||||
// $input-box-shadow: $pink-accent-primary;
|
||||
|
||||
// 3. Include remainder of required Bootstrap stylesheets
|
||||
@import "~bootstrap/scss/variables";
|
||||
|
||||
|
||||
|
||||
$custom-colors: (
|
||||
"dark-primary": $dark-primary,
|
||||
"dark-secondary": $dark-secondary,
|
||||
"dark-blue": $dark-blue,
|
||||
"tertiary": $tertiary,
|
||||
"accent-primary": $accent-primary,
|
||||
"accent-secondary": $accent-secondary,
|
||||
"pink-accent-primary": $pink-accent-primary,
|
||||
"pink-accent-primary-disabled": shade-color( $pink-accent-primary, 40%),
|
||||
"pink-accent-secondary": $pink-accent-secondary,
|
||||
"correct-accent-primary": $malachite,
|
||||
"correct-accent-secondary": $mint,
|
||||
"wrong-accent-primary": $rusty-scarlet,
|
||||
"wrong-accent-secondary": $scarlet,
|
||||
"gray": $gray-500,
|
||||
);
|
||||
|
||||
// Merge the maps
|
||||
$theme-colors: map-merge($theme-colors, $custom-colors);
|
||||
|
||||
// 4. Include any default map overrides here
|
||||
|
||||
// 5. Include remainder of required parts
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
// @import "~bootstrap/scss/mixins";
|
||||
// @import "~bootstrap/scss/root";
|
||||
|
||||
// // 6. Optionally include any other parts as needed
|
||||
@import "~bootstrap/scss/utilities";
|
||||
// @import "~bootstrap/scss/reboot";
|
||||
// @import "~bootstrap/scss/type";
|
||||
// @import "~bootstrap/scss/images";
|
||||
// @import "~bootstrap/scss/containers";
|
||||
// @import "~bootstrap/scss/grid";
|
||||
// @import "~bootstrap/scss/helpers";
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"border-color": map-merge(
|
||||
map-get($utilities, "border-color"),
|
||||
(
|
||||
state: hover,
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
// "rounded-start": (
|
||||
// property: border-bottom-left-radius border-top-left-radius,
|
||||
// class: rounded-start,
|
||||
// values: (null: var(--#{$prefix}border-radius))
|
||||
// ),
|
||||
|
||||
|
||||
|
||||
// // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
|
||||
@import "~bootstrap/scss/utilities/api";
|
||||
|
||||
// // 8. Add additional custom code here
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.buzzer{
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
cursor: pointer;
|
||||
background-color: $pink-accent-primary;
|
||||
}
|
||||
|
||||
.buzzer:active{
|
||||
background-color: shade-color( $pink-accent-primary, 10% );
|
||||
transform: translateY( 3px );
|
||||
transition: transform ease 0.1s;
|
||||
}
|
||||
|
||||
.buzzer-answering{
|
||||
background-color: $green-active;
|
||||
}
|
||||
|
||||
.buzzer-answering:active{
|
||||
background-color: shade-color( $green-active, 10% );
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
boardName: String,
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["boardCardClicked"]);
|
||||
|
||||
function boardCardClicked(_event) {
|
||||
emit("boardCardClicked");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card bg-primary border-1 border-pink-accent-primary-hover board-card m-3 pointer" :class="[ { 'border-pink-accent-primary' : isSelected } ]" @click="boardCardClicked">
|
||||
<div class="card-header" :class="[{ 'bg-pink-accent-primary': isSelected }, { 'text-dark': isSelected }]">
|
||||
<h5 class="mb-0 text-truncate">{{ props.boardName }}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-column align-items-center justify-content-center h-100">
|
||||
<font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-border-all" size="2x" />
|
||||
<h5>
|
||||
Edit Board
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.board-card {
|
||||
width: 12em;
|
||||
height: 9em;
|
||||
max-width: 90vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
boardEntry: Object,
|
||||
isHost: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isBeingPlayed: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["boardEntryCardClicked", "boardEntryAnsweredClicked", "boardEntryAnsweredRevertClicked" ]);
|
||||
|
||||
const showingSetAnswered = computed( () => {
|
||||
return props.isHost && props.isBeingPlayed;
|
||||
})
|
||||
|
||||
function questionCardClicked(){
|
||||
if( !props.boardEntry.isAnswered ){
|
||||
emit("boardEntryCardClicked");
|
||||
}
|
||||
}
|
||||
|
||||
function boardEntryAnsweredClicked(){
|
||||
emit("boardEntryAnsweredClicked");
|
||||
}
|
||||
function boardEntryAnsweredRevertClicked(){
|
||||
emit("boardEntryAnsweredRevertClicked");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="card border-1 mb-1 flex-fill board-entry-card bg-primary"
|
||||
:class="[
|
||||
{ 'border-pink-accent-primary-disabled' : props.boardEntry.isAnswered },
|
||||
{ 'border-pink-accent-primary' : !props.boardEntry.isAnswered },
|
||||
{ 'bg-dark-primary': props.boardEntry.isAnswered },
|
||||
{ 'pointer': !props.boardEntry.isAnswered && props.isHost },
|
||||
]"
|
||||
@click="questionCardClicked"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-center align-items-center h-100">
|
||||
<div v-if="showingSetAnswered" class="position-absolute start-0 top-0 ms-1 mt-1">
|
||||
<button v-if="!boardEntry.isAnswered" class="btn btn-sm btn-pink-accent-primary" @click.stop="boardEntryAnsweredClicked">
|
||||
<font-awesome-icon icon="fa-solid fa-square-check" size="lg" />
|
||||
</button>
|
||||
<button v-else class="btn btn-sm btn-pink-accent-primary" @click.stop="boardEntryAnsweredRevertClicked">
|
||||
<font-awesome-icon icon="fa-solid fa-square-minus" size="lg" />
|
||||
</button>
|
||||
</div>
|
||||
<h5 class="mb-0 user-select-none">
|
||||
{{ props.boardEntry.points }}
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.board-entry-card{
|
||||
max-height: 20%;
|
||||
max-width: 90vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
boardName: String,
|
||||
categoryAmount: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
questionAmount: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(["boardCardClicked"]);
|
||||
|
||||
function boardCardClicked(_event) {
|
||||
if( !props.isSelected ) {
|
||||
emit("boardCardClicked");
|
||||
};
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card bg-primary border-1 border-pink-accent-primary-hover board-card m-3 pointer" :class="[ { 'border-pink-accent-primary': props.isSelected } ]" @click="boardCardClicked">
|
||||
<div class="card-body">
|
||||
<h5 class="mb-0 overflow-auto">{{ props.boardName }}</h5>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.board-card {
|
||||
width: 12em;
|
||||
height: 9em;
|
||||
max-width: 90vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
category: Object,
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["categoryCardClicked"]);
|
||||
|
||||
function categoryCardClicked(_event) {
|
||||
emit("categoryCardClicked");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card bg-primary border-1 border-pink-accent-primary-hover category-card m-3 pointer" :class="[ { 'border-pink-accent-primary' : isSelected } ]" @click="categoryCardClicked">
|
||||
<div class="card-header" :class="[{ 'bg-pink-accent-primary': isSelected }, { 'text-dark': isSelected }]">
|
||||
<h5 class="mb-0 text-truncate">{{ category.categoryName }}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-column align-items-center justify-content-center h-100">
|
||||
<h5>
|
||||
Edit Category
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.category-card {
|
||||
width: 12em;
|
||||
height: 9em;
|
||||
max-width: 90vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
categoryName: String,
|
||||
categoryDescription: String,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card bg-pink-accent-primary mb-1 flex-fill category-header-card" :title="props.categoryDescription">
|
||||
<div class="card-body text-center">
|
||||
<div class="d-flex justify-content-center align-items-center h-100">
|
||||
<h4 class="mb-0 user-select-none">
|
||||
{{ props.categoryName }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.category-header-card{
|
||||
max-height: 20%;
|
||||
max-width: 90vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
saveRequestInProgress: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
saveAndExitRequestInProgress: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits( [ "save", "saveAndExit", "discardAndExit" ] );
|
||||
|
||||
function saveButtonClicked( _event ){
|
||||
emit("save");
|
||||
}
|
||||
|
||||
function saveAndExitButtonClicked( _event ){
|
||||
emit("saveAndExit");
|
||||
}
|
||||
|
||||
function discardAndExitButtonClicked( _event ){
|
||||
emit("discardAndExit");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="m-3">
|
||||
<div class="row">
|
||||
<div class="col-xl-4 col-12 px-1">
|
||||
<button class="btn btn-pink-accent-primary text-center w-100 h-100" @click="saveButtonClicked">
|
||||
<span v-show="!props.saveRequestInProgress">
|
||||
Save
|
||||
</span>
|
||||
<span v-show="props.saveRequestInProgress">
|
||||
<font-awesome-icon icon="fa-solid fa-spinner" spin />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-xl-4 col-12 px-1">
|
||||
<button class="btn btn-pink-accent-primary text-center w-100 h-100" @click="saveAndExitButtonClicked">
|
||||
<span v-show="!props.saveAndExitRequestInProgress">
|
||||
Save & Exit
|
||||
</span>
|
||||
<span v-show="props.saveAndExitRequestInProgress">
|
||||
<font-awesome-icon icon="fa-solid fa-spinner" spin />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-xl-4 col-12 px-1">
|
||||
<button class="btn btn-danger text-center w-100 h-100" @click="discardAndExitButtonClicked">Discard & Exit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
saveText: {
|
||||
type: String,
|
||||
default: "Save",
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: "Cancel",
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="m-3">
|
||||
<div class="d-flex justify-content-end align-items-center">
|
||||
<button class="btn btn-pink-accent-primary me-3">{{ props.saveText }}</button>
|
||||
<button class="btn btn-danger">{{ props.cancelText }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
player: Object,
|
||||
isHost: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
acceptAnswers: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(["manualPointsAdjustment", "answerRuled", "revealPlayerAnswer"]);
|
||||
|
||||
function revealAnswer(){
|
||||
emit("revealPlayerAnswer", props.player._id);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card bg-primary my-1 player-card">
|
||||
<div class="card-body p-2">
|
||||
<h5 class="mb-0 text-truncate">
|
||||
<template v-if="props.player.isAnswering">
|
||||
<font-awesome-layers :title="'Player is answering'">
|
||||
<font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-square" size="lg" fade style="--fa-animation-duration:2s" />
|
||||
<font-awesome-icon class="text-white" icon="fa-solid fa-angle-right" size="sm" />
|
||||
</font-awesome-layers>
|
||||
</template>
|
||||
{{ props.player.name }}
|
||||
</h5>
|
||||
|
||||
<div v-if="props.isHost || props.player.currentTextAnswer" class="row mt-2">
|
||||
<div class="col-sm-2 text-nowrap">
|
||||
Answer
|
||||
</div>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control form-control-sm border-0" :value="props.player.currentTextAnswer" readonly>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="props.isHost && !props.acceptAnswers" class="row mt-2">
|
||||
<div class="col-sm-2 text-nowrap d-flex justify-content-start align-items-center">
|
||||
Reveal
|
||||
</div>
|
||||
<div class="col-sm-10">
|
||||
<button class="btn btn-sm btn-pink-accent-primary" @click="revealAnswer">Reveal Answer</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-sm-2 d-flex justify-content-start align-items-center">
|
||||
<span>Points</span>
|
||||
</div>
|
||||
<div class="col-sm-10 d-flex">
|
||||
<input type="text" class="form-control form-control-sm border-0" readonly :value="props.player.points">
|
||||
<template v-if="props.isHost">
|
||||
<button class="btn btn-sm btn-pink-accent-primary mx-1" @click="emit('manualPointsAdjustment', true )">
|
||||
<font-awesome-icon class="text-black" icon="fa-solid fa-plus"/>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-pink-accent-primary" @click="emit('manualPointsAdjustment', false )">
|
||||
<font-awesome-icon class="text-black" icon="fa-solid fa-minus"/>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="props.isHost && props.player.isAnswering" class="row mt-2">
|
||||
<div class="col-sm-2 d-flex justify-content-start align-items-center">
|
||||
Award
|
||||
</div>
|
||||
<div class="col-sm-10">
|
||||
<div class="d-flex justify-content-evenly align-items-center">
|
||||
<div class="flex-fill d-grid me-1">
|
||||
<button class="btn btn-sm btn-correct-accent-primary flex-fill-1" @click="emit('answerRuled', true )">Correct Answer</button>
|
||||
</div>
|
||||
<div class="flex-fill d-grid ms-1">
|
||||
<button class="btn btn-sm btn-wrong-accent-primary flex-fill-1" @click="emit('answerRuled', false )">Wrong Answer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,83 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { QUESTION_TYPES } from '../../services/GameService';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
boardEntry: Object,
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
});
|
||||
const emit = defineEmits(["questionCardClicked", "questionCardDeleteClicked"]);
|
||||
|
||||
let questionTypes = computed( () => {
|
||||
let uniqueArray = [ ...new Set( props.boardEntry.questions.map( question => question.questionType ) ) ].map( uniqueType => QUESTION_TYPES[uniqueType] );
|
||||
return uniqueArray.join("; ");
|
||||
});
|
||||
let questionTexts = computed( () => {
|
||||
return props.boardEntry.questions.map( question => question.questionText ).join("; ");
|
||||
});
|
||||
|
||||
function questionCardClicked(_event){
|
||||
emit("questionCardClicked");
|
||||
}
|
||||
|
||||
function deleteCardClicked(_event){
|
||||
emit("questionCardDeleteClicked");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card bg-primary border-1 border-pink-accent-primary-hover question-card m-3 pointer" :class="[ { 'border-pink-accent-primary' : isSelected } ]" @click="questionCardClicked">
|
||||
<div class="card-header px-2" :class="[ { 'bg-pink-accent-primary': isSelected }, { 'text-dark': isSelected } ]">
|
||||
<div class="w-100 d-flex justify-content-between">
|
||||
<h5 class="text-truncate mb-0">
|
||||
{{ questionTypes }}
|
||||
</h5>
|
||||
<span class="px-1 pointer" @click.stop="deleteCardClicked">
|
||||
<font-awesome-icon class="text-danger" icon="fa-solid fa-trash"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-1">
|
||||
<div class="d-flex align-items-center justify-content-center h-100">
|
||||
<div class="text-center question-card-body-text mb-0">
|
||||
{{ questionTexts }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer py-1">
|
||||
<div class="w-100 d-flex justify-content-between">
|
||||
<span class="text-truncate">
|
||||
{{ props.boardEntry.answer.answerText }}
|
||||
</span>
|
||||
<span class="px-1 pointer" @click.stop="deleteCardClicked">
|
||||
{{ props.boardEntry.points }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.question-card{
|
||||
width: 16em;
|
||||
height: 9em;
|
||||
max-width: 90vw;
|
||||
}
|
||||
.question-card-title{
|
||||
width: 13em;
|
||||
}
|
||||
.question-card-footer{
|
||||
max-width: 13em;
|
||||
}
|
||||
.question-card-body-text {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,130 @@
|
||||
<script setup>
|
||||
import { useUserStore } from '@/stores/UserStore';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
function logoutButtonClicked(_event){
|
||||
userStore.logout()
|
||||
.then( res => {
|
||||
if( res.data.success ){
|
||||
userStore.$reset();
|
||||
}else{
|
||||
console.debug( res );
|
||||
}
|
||||
})
|
||||
.catch( err => {
|
||||
console.debug(err);
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav id="navbar" class="navbar navbar-dark navbar-expand-md bg-dark-blue text-light">
|
||||
<div class="container">
|
||||
<div class="d-md-none d-block">
|
||||
<RouterLink to="/">
|
||||
<img src="../../assets/icons/jeobeardy_logo.svg" alt="Logo" class="nav-logo my-1">
|
||||
</RouterLink>
|
||||
</div>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNavContainer"
|
||||
aria-controls="navbarNavContainer"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavContainer">
|
||||
<div class="navbar-nav w-100 justify-content-center align-items-center">
|
||||
<div class="row w-100">
|
||||
<div class="col-md-4 col-12 mb-md-0 mb-3">
|
||||
<div class="d-flex justify-content-md-end justify-content-center align-items-center h-100 fs-4">
|
||||
<RouterLink class="text-light text-decoration-none px-3" to="/">
|
||||
Home
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-12 d-none d-md-inline">
|
||||
<div class="d-flex justify-content-center align-items-center h-100">
|
||||
<RouterLink to="/" class="text-center">
|
||||
<img src="../../assets/icons/jeobeardy_logo.svg" alt="Logo" class="nav-logo my-1">
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-12 mb-md-0 mb-3">
|
||||
<div class="d-flex justify-content-md-start justify-content-center align-items-center h-100 fs-4">
|
||||
<RouterLink class="text-light text-decoration-none px-3" to="/about">
|
||||
About
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-12 d-md-none d-inline mb-md-0 mb-3">
|
||||
<div class="d-flex justify-content-center align-items-center h-100 fs-4">
|
||||
<div v-if="userStore.loggedIn">
|
||||
<div class="dropdown text-center">
|
||||
<a class="dropdown-toggle text-decoration-none" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{{ userStore.username }}
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark bg-dark-blue">
|
||||
<li>
|
||||
<RouterLink class="dropdown-item" to="/profile">
|
||||
Profile
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#" @click="logoutButtonClicked">Logout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<RouterLink class="text-light text-decoration-none px-3" to="/login">
|
||||
Login
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-absolute end-0 top-50 translate-middle d-md-inline d-none">
|
||||
<div class="d-flex justify-content-start align-items-center h-100 fs-5">
|
||||
<div v-if="userStore.loggedIn">
|
||||
<div class="dropdown">
|
||||
<a class="dropdown-toggle text-decoration-none" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{{ userStore.username }}
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark bg-dark-blue">
|
||||
<li>
|
||||
<RouterLink class="dropdown-item" to="/profile">
|
||||
Profile
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li>
|
||||
<a class="dropdown-item" href="#" @click="logoutButtonClicked">Logout</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<RouterLink class="text-light text-decoration-none px-3" to="/login">
|
||||
Login
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-logo{
|
||||
height: 3.75em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container pt-5">
|
||||
<div class="row pt-3">
|
||||
<div class="col">
|
||||
<h1 class="text-center">What is Jeobeardy?</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="d-flex h-100 justify-content-evenly align-items-top w-100">
|
||||
<div class="d-flex flex-column w-100 m-5 justify-content-start align-items-center fs-3">
|
||||
<span>
|
||||
Jeobeardy is very similiar to Jeopardy.
|
||||
</span>
|
||||
<span>
|
||||
But for you!
|
||||
</span>
|
||||
<span>
|
||||
To play with your Friends!
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column h-100 justify-content-center align-items-center w-100 pt-5 border-top border-light">
|
||||
<h4>
|
||||
Privacy Policy
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Jeobeardy's privacy policy is really simple: we don't collect or store any of your data, or track your usage in any way.
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
Only cookies that are essential to run the site are used.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-5 mb-3">
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column h-100 justify-content-center align-items-center w-100 pt-5 border-top border-light">
|
||||
<h4>
|
||||
Contact
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
e-mail:
|
||||
<a href="mailto:jeobeardy@proton.me">
|
||||
jeobeardy@proton.me
|
||||
</a>
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
Source Code:
|
||||
<a href="https://github.com/EisiBaer/Jeobeardy" target="_blank">
|
||||
GitHub
|
||||
</a>
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
License:
|
||||
<a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank">
|
||||
GNU General Public License v3 (GPL-3)
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-card {
|
||||
height: 20rem;
|
||||
width: 25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,360 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, computed, nextTick } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { Modal } from "bootstrap";
|
||||
|
||||
import BoardEntryEditView from '@/components/views/BoardEntryEditView.vue';
|
||||
import CategoryEditView from '@/components/views/CategoryEditView.vue';
|
||||
import BoardEditView from '@/components/views/BoardEditView.vue';
|
||||
import BoardCard from '@/components/blocks/BoardCard.vue';
|
||||
import GameQuestionsView from '@/components/views/GameQuestionsView.vue';
|
||||
import BoardCategoriesView from '@/components/views/BoardCategoriesView.vue';
|
||||
import GameView from '@/components/views/GameView.vue';
|
||||
import { useGameCreationStore } from '@/stores/GameCreationStore';
|
||||
import { useUserStore } from '@/stores/UserStore';
|
||||
import Board from '@/models/Board';
|
||||
import Category from '@/models/Category';
|
||||
import BoardEntry from '@/models/BoardEntry';
|
||||
import CreateActions from '@/components/blocks/CreateActions.vue';
|
||||
import GenericMultiButtonModal from '@/components/views/GenericMultiButtonModal.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const gameCreationStore = useGameCreationStore();
|
||||
const userStore = useUserStore();
|
||||
let navbarHeight = ref(0);
|
||||
let boardIsLoading = ref( true );
|
||||
let showingBottomView = ref( true );
|
||||
let showingAnswer = ref( true );
|
||||
let showingQuestion = ref( true );
|
||||
|
||||
let categoryIndex = ref( -1 );
|
||||
let boardEntryIndex = ref( -1 );
|
||||
let questionIndex = ref(0);
|
||||
let selectedObject = ref( null );
|
||||
let saveRequestInProgress = ref( false );
|
||||
let saveAndExitRequestInProgress = ref( false );
|
||||
let audioInstance = ref(null);
|
||||
|
||||
const isBoardSelected = computed( () => {
|
||||
return selectedObject.value instanceof Board;
|
||||
});
|
||||
const getEditComponent = computed( () => {
|
||||
if( selectedObject.value instanceof BoardEntry ){
|
||||
return BoardEntryEditView;
|
||||
}
|
||||
if( selectedObject.value instanceof Category ){
|
||||
return CategoryEditView;
|
||||
}
|
||||
if( selectedObject.value instanceof Board ){
|
||||
return BoardEditView;
|
||||
}
|
||||
return null;
|
||||
});
|
||||
const getPropsForSelectedObjectEditView = computed( () => {
|
||||
if( selectedObject.value instanceof Category ){
|
||||
return {
|
||||
categoryIndex: categoryIndex.value,
|
||||
};
|
||||
}
|
||||
if( selectedObject.value instanceof BoardEntry ){
|
||||
return {
|
||||
categoryIndex: categoryIndex.value,
|
||||
boardEntryIndex: boardEntryIndex.value,
|
||||
questionIndex: questionIndex.value,
|
||||
}
|
||||
}
|
||||
return {};
|
||||
});
|
||||
const getSelectedObjectType = computed( () => {
|
||||
if( selectedObject.value instanceof BoardEntry ){
|
||||
return "BoardEntry";
|
||||
}
|
||||
return "Board";
|
||||
});
|
||||
|
||||
function boardSelected(){
|
||||
selectedObject.value = gameCreationStore.board;
|
||||
categoryIndex.value = -1;
|
||||
boardEntryIndex.value = -1;
|
||||
showingQuestion.value = true;
|
||||
showingAnswer.value = true;
|
||||
}
|
||||
function categorySelected( cIndex ){
|
||||
selectedObject.value = gameCreationStore.board.categories[cIndex];
|
||||
categoryIndex.value = cIndex;
|
||||
boardEntryIndex.value = -1;
|
||||
}
|
||||
function boardEntrySelected( entryIndex ){
|
||||
selectedObject.value = gameCreationStore.board.categories[categoryIndex.value].boardEntries[entryIndex];
|
||||
boardEntryIndex.value = entryIndex;
|
||||
}
|
||||
function selectBoardEntryWithCategory( cIndex, entryIndex ){
|
||||
categoryIndex.value = cIndex;
|
||||
boardEntryIndex.value = entryIndex;
|
||||
selectedObject.value = gameCreationStore.board.categories[cIndex].boardEntries[entryIndex];
|
||||
}
|
||||
function addNewBoardEntry(){
|
||||
if( !isBoardSelected.value ){
|
||||
gameCreationStore.addEmptyBoardEntryToCategoryOnIndex( categoryIndex.value );
|
||||
boardEntrySelected( gameCreationStore.board.categories[categoryIndex.value].boardEntries.length - 1 );
|
||||
}
|
||||
}
|
||||
function deleteBoardEntry( bEIndex ){
|
||||
if( !isBoardSelected.value ){
|
||||
gameCreationStore.deleteBoardEntry( categoryIndex.value, bEIndex );
|
||||
|
||||
let boardEntriesLen = gameCreationStore.board.categories[categoryIndex.value].boardEntries.length;
|
||||
if( boardEntriesLen === 0 ){
|
||||
categorySelected( categoryIndex.value );
|
||||
} else {
|
||||
let newIdx = bEIndex;
|
||||
if( bEIndex === boardEntriesLen ){
|
||||
newIdx--;
|
||||
}
|
||||
boardEntryIndex.value = newIdx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function specificQuestionLayerSelected( index ){
|
||||
questionIndex.value = index;
|
||||
}
|
||||
|
||||
function playAudio( cIndex, bEIndex, qIndex ){
|
||||
let audio = gameCreationStore.audios.find( audioEntry => audioEntry.cIndex === cIndex && audioEntry.bEIndex === bEIndex && audioEntry.qIndex === qIndex.value );
|
||||
|
||||
if( audio && !audioInstance.value ){
|
||||
audioInstance.value = new Audio( audio.url );
|
||||
audioInstance.value.play();
|
||||
}
|
||||
}
|
||||
|
||||
function stopAudio(){
|
||||
if( audioInstance.value ){
|
||||
audioInstance.value.pause();
|
||||
audioInstance.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function showQuestion(){
|
||||
showingQuestion.value = true;
|
||||
}
|
||||
function showAnswer(){
|
||||
showingAnswer.value = true;
|
||||
}
|
||||
function hideQuestion(){
|
||||
showingQuestion.value = false;
|
||||
}
|
||||
function hideAnswer(){
|
||||
showingAnswer.value = false;
|
||||
}
|
||||
|
||||
function saveBoard(){
|
||||
saveRequestInProgress.value = true;
|
||||
gameCreationStore.saveBoard()
|
||||
.catch( ( error ) => {
|
||||
console.error( error );
|
||||
openModal("failedSavingModal")
|
||||
})
|
||||
.finally( () => {
|
||||
saveRequestInProgress.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function saveBoardAndExit(){
|
||||
saveAndExitRequestInProgress.value = true;
|
||||
gameCreationStore.saveBoard()
|
||||
.then( () => {
|
||||
exitCreatePage();
|
||||
})
|
||||
.catch( ( error ) => {
|
||||
console.error( error );
|
||||
openModal("failedSavingModal")
|
||||
})
|
||||
.finally( () => {
|
||||
saveAndExitRequestInProgress.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function handleModalButtonClick( buttonIndex ){
|
||||
switch( buttonIndex ){
|
||||
case 0:
|
||||
exitCreatePage();
|
||||
break;
|
||||
case 1:
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function exitCreatePage(){
|
||||
router.push("/profile");
|
||||
}
|
||||
|
||||
//Maybe extract
|
||||
function openModal( modalId ){
|
||||
let modalElement = document.getElementById( modalId );
|
||||
let modalInstance = Modal.getOrCreateInstance( modalElement );
|
||||
modalInstance.show();
|
||||
}
|
||||
|
||||
function toggleBottomView(){
|
||||
showingBottomView.value = !showingBottomView.value;
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
navbarHeight.value = document.getElementById("navbar").clientHeight;
|
||||
});
|
||||
|
||||
if( route.params.boardId !== undefined ){
|
||||
userStore.userService.getBoardFromUser( route.params.boardId )
|
||||
.then( ( res ) => {
|
||||
if( res.data.success ){
|
||||
gameCreationStore.setBoardWithConversion( res.data.board );
|
||||
selectedObject.value = gameCreationStore.board;
|
||||
} else {
|
||||
console.debug( res );
|
||||
}
|
||||
})
|
||||
.catch( ( error ) => {
|
||||
console.error(error);
|
||||
})
|
||||
.finally( () => {
|
||||
boardIsLoading.value = false;
|
||||
});
|
||||
} else {
|
||||
gameCreationStore.board = new Board( undefined, "New Board", [] );
|
||||
selectedObject.value = gameCreationStore.board;
|
||||
boardIsLoading.value = false;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container-fluid px-0" :style="{'height': 'calc(100vh - ' + navbarHeight + 'px)'}">
|
||||
<div v-if="boardIsLoading" class="h-100 w-100 d-flex justify-content-center align-items-center">
|
||||
<font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-spinner" spin size="4x"/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="row h-100 w-100 mx-0">
|
||||
<div class="col-9 px-0 position-relative">
|
||||
<div class="d-flex flex-column w-100">
|
||||
<GameView
|
||||
:objToDisplay="getSelectedObjectType"
|
||||
:board="gameCreationStore.board"
|
||||
:cIndex="categoryIndex"
|
||||
:bEIndex="boardEntryIndex"
|
||||
:isQuestionRevealed="showingQuestion"
|
||||
:isAnswerRevealed="showingAnswer"
|
||||
:showingBottomView="showingBottomView"
|
||||
:isHost="true"
|
||||
@showBoard="boardSelected"
|
||||
@showQuestion="showQuestion"
|
||||
@showAnswer="showAnswer"
|
||||
@hideQuestion="hideQuestion"
|
||||
@hideAnswer="hideAnswer"
|
||||
@boardEntryClicked="selectBoardEntryWithCategory"
|
||||
@specificQuestionLayerSelected="specificQuestionLayerSelected"
|
||||
@playAudio="playAudio"
|
||||
@stopAudio="stopAudio"
|
||||
/>
|
||||
<div v-if="showingBottomView" id="bottom-view" class="d-flex border-top border-2 border-pink-accent-primary">
|
||||
|
||||
<div class="border-end border-1 border-pink-accent-primary">
|
||||
<BoardCard
|
||||
:boardName="gameCreationStore.board.boardName"
|
||||
:isSelected="isBoardSelected"
|
||||
@boardCardClicked="boardSelected"
|
||||
/>
|
||||
</div>
|
||||
<div class="d-flex border-end border-1 border-pink-accent-primary" :class="[{ 'overflow-auto': isBoardSelected }]">
|
||||
<div class="d-flex">
|
||||
<BoardCategoriesView
|
||||
:categories="gameCreationStore.board.categories"
|
||||
:selectedCategoryIndex="categoryIndex"
|
||||
:isSelected="!isBoardSelected && boardEntryIndex === -1"
|
||||
@categorySelected="categorySelected"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="!isBoardSelected" >
|
||||
<GameQuestionsView
|
||||
:entries="gameCreationStore.board.categories[categoryIndex].boardEntries"
|
||||
:selectedEntryIndex="boardEntryIndex"
|
||||
:isEditable="true"
|
||||
@boardEntrySelected="boardEntrySelected"
|
||||
@addNewBoardEntry="addNewBoardEntry"
|
||||
@deleteBoardEntry="deleteBoardEntry"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-absolute bottom-0 end-0 me-5">
|
||||
<div class="border border-2 border-pink-accent-primary border-bottom-0 py-2 px-3 rounded-top bg-primary pointer" @click="toggleBottomView">
|
||||
<font-awesome-icon v-if="showingBottomView" class="text-pink-accent-primary" icon="fa-solid fa-angle-down"/>
|
||||
<font-awesome-icon v-else class="text-pink-accent-primary" icon="fa-solid fa-angle-up"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 border-start border-2 border-pink-accent-primary px-0 h-100">
|
||||
<div class="d-flex flex-column w-100 justify-content-between h-100">
|
||||
<div class="overflow-auto">
|
||||
<component :is="getEditComponent" v-bind="getPropsForSelectedObjectEditView" @questionIndexChanged="specificQuestionLayerSelected"/>
|
||||
</div>
|
||||
<div id="save-cancel-button-div" class="w-100 border-top border-pink-accent-primary">
|
||||
<CreateActions
|
||||
:saveRequestInProgress="saveRequestInProgress"
|
||||
:saveAndExitRequestInProgress="saveAndExitRequestInProgress"
|
||||
@save="saveBoard"
|
||||
@saveAndExit="saveBoardAndExit"
|
||||
@discardAndExit="openModal('discardConfirmModal')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<GenericMultiButtonModal
|
||||
:id="'discardConfirmModal'"
|
||||
:hasTitle="true"
|
||||
:title="'Are you sure?'"
|
||||
:modalText="'Are you sure you want to discard any changes made to the Board?'"
|
||||
:buttonList="[
|
||||
{
|
||||
text: 'Yes, discard!',
|
||||
emitsEvent: 'discardClicked',
|
||||
bgColorClass: 'btn-danger',
|
||||
},
|
||||
{
|
||||
text: 'Cancel',
|
||||
bgColorClass: 'btn-pink-accent-primary',
|
||||
},
|
||||
]"
|
||||
@buttonClicked="handleModalButtonClick"
|
||||
/>
|
||||
|
||||
<GenericMultiButtonModal
|
||||
:id="'failedSavingModal'"
|
||||
:hasTitle="true"
|
||||
:title="'Failed to save'"
|
||||
:modalText="'Something went wrong while saving!'"
|
||||
:buttonList="[
|
||||
{
|
||||
text: 'Ok',
|
||||
bgColorClass: 'btn-pink-accent-primary',
|
||||
},
|
||||
]"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.height-bottom-view{
|
||||
height: 9rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,457 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, computed, onUnmounted } from 'vue';
|
||||
import { onBeforeRouteLeave, useRoute } from 'vue-router';
|
||||
|
||||
import PlayersView from '@/components/views/PlayersView.vue';
|
||||
import PlayerInteractionView from '@/components/views/PlayerInteractionView.vue';
|
||||
import HostInteractionView from '@/components/views/HostInteractionView.vue';
|
||||
import GameView from '@/components/views/GameView.vue';
|
||||
import { useGameStore } from '@/stores/GameStore';
|
||||
import Board from '@/models/Board';
|
||||
import BoardEntry from '@/models/BoardEntry';
|
||||
|
||||
import BuzzerSound from "../../assets/sounds/buzzbuzz.mp3";
|
||||
import NoBuzzerSound from "../../assets/sounds/dingdongy.mp3";
|
||||
import CorrectAudio from "../../assets/sounds/correct.mp3";
|
||||
import WrongAudio from "../../assets/sounds/wrong.mp3";
|
||||
|
||||
const gameStore = useGameStore();
|
||||
const route = useRoute();
|
||||
let navbarHeight = ref(0);
|
||||
let boardIsLoading = ref( true );
|
||||
let buzzBuzz = new Audio( BuzzerSound );
|
||||
buzzBuzz.volume = 0.3
|
||||
let buzzNoBuzz = new Audio( NoBuzzerSound );
|
||||
buzzNoBuzz.volume = 0.7
|
||||
let answerCorrectAudio = new Audio( CorrectAudio );
|
||||
let answerWrongAudio = new Audio( WrongAudio );
|
||||
|
||||
|
||||
let protocol = ('https:' == document.location.protocol ? 'https://' : 'http://');
|
||||
let hostname = window.location.hostname;
|
||||
if( window.location.hostname.includes("localhost" ) ){
|
||||
hostname += ':3000';
|
||||
}
|
||||
|
||||
const API_URL = `${protocol}${hostname}/api`;
|
||||
|
||||
|
||||
let categoryIndex = ref( -1 );
|
||||
let boardEntryIndex = ref( -1 );
|
||||
let selectedObject = ref( null );
|
||||
let questionIndexForAudio = ref(0);
|
||||
let audioInstance = ref(null);
|
||||
let showingAnswer = ref( false );
|
||||
let showingQuestion = ref( false );
|
||||
|
||||
|
||||
const isBoardSelected = computed( () => {
|
||||
return selectedObject.value instanceof Board;
|
||||
});
|
||||
|
||||
const getSelectedObjectType = computed( () => {
|
||||
if( selectedObject.value instanceof BoardEntry ){
|
||||
return "BoardEntry";
|
||||
}
|
||||
return "Board";
|
||||
});
|
||||
|
||||
const playerIsAnswering = computed( () => {
|
||||
return gameStore.players.findIndex( playerEntry => playerEntry.isAnswering && playerEntry._id === gameStore.playerId ) !== -1;
|
||||
});
|
||||
|
||||
const anyPlayerIsAnswering = computed( () => {
|
||||
return gameStore.players.findIndex( playerEntry => playerEntry.isAnswering ) !== -1;
|
||||
});
|
||||
|
||||
|
||||
function boardSelected(){
|
||||
selectedObject.value = gameStore.board;
|
||||
categoryIndex.value = -1;
|
||||
boardEntryIndex.value = -1;
|
||||
}
|
||||
function selectBoardEntryWithCategory( cIndex, entryIndex ){
|
||||
categoryIndex.value = cIndex;
|
||||
boardEntryIndex.value = entryIndex;
|
||||
selectedObject.value = gameStore.board.categories[cIndex].boardEntries[entryIndex];
|
||||
}
|
||||
|
||||
function setUpListeners(){
|
||||
gameStore.addSocketListener("boardEntrySelected", ( data ) => {
|
||||
showingAnswer.value = false;
|
||||
showingQuestion.value = false;
|
||||
selectBoardEntryWithCategory( data.payload.categoryIndex, data.payload.boardEntryIndex );
|
||||
});
|
||||
gameStore.addSocketListener("boardSelected", ( _data ) => {
|
||||
showingAnswer.value = false;
|
||||
showingQuestion.value = false;
|
||||
if( !gameStore.isHost ){
|
||||
for( let i in gameStore.players ){
|
||||
delete gameStore.players[i].currentTextAnswer;
|
||||
}
|
||||
}
|
||||
boardSelected();
|
||||
});
|
||||
gameStore.addSocketListener("pointsAdjusted", ( data ) => {
|
||||
gameStore.players = data.payload.players;
|
||||
let self = data.payload.players.find( playerEntry => playerEntry._id === gameStore.playerId );
|
||||
if( self ){
|
||||
gameStore.acceptAnswers = data.payload.acceptAnswers && self.acceptAnswers;
|
||||
} else {
|
||||
gameStore.acceptAnswers = data.payload.acceptAnswers;
|
||||
}
|
||||
});
|
||||
gameStore.addSocketListener("playerAnswerRevealed", ( data ) => {
|
||||
gameStore.setAnswersForPlayers( data.payload.revealedAnswers );
|
||||
});
|
||||
gameStore.addSocketListener("playerAnswerTextUpdated", ( data ) => {
|
||||
let playerIndex = gameStore.players.findIndex( playerEntry => playerEntry._id === data.payload.playerId );
|
||||
if( playerIndex !== -1 ){
|
||||
gameStore.players[playerIndex].currentTextAnswer = data.payload.updatedText;
|
||||
}
|
||||
});
|
||||
gameStore.addSocketListener("audioPlaying", ( _data ) => {
|
||||
if( !audioInstance.value ){
|
||||
let audioUrl = API_URL + '/game/file/' + gameStore.board.categories[categoryIndex.value].boardEntries[boardEntryIndex.value].questions[questionIndexForAudio.value].filename;
|
||||
audioInstance.value = new Audio( audioUrl );
|
||||
audioInstance.value.onended = (_event) => {
|
||||
audioInstance.value = null;
|
||||
}
|
||||
audioInstance.value.play();
|
||||
}
|
||||
});
|
||||
gameStore.addSocketListener("audioStopped", ( _data ) => {
|
||||
if( audioInstance.value ){
|
||||
audioInstance.value.pause();
|
||||
audioInstance.value = null;
|
||||
}
|
||||
});
|
||||
gameStore.addSocketListener("playerBuzzered", ( data ) => {
|
||||
playerBuzzered( data );
|
||||
if( audioInstance.value ){
|
||||
audioInstance.value.pause();
|
||||
audioInstance.value = null;
|
||||
}
|
||||
});
|
||||
gameStore.addSocketListener("questionRevealed", ( _data ) => {
|
||||
gameStore.acceptAnswers = true;
|
||||
showingQuestion.value = true;
|
||||
});
|
||||
gameStore.addSocketListener("questionHidden", ( _data ) => {
|
||||
gameStore.acceptAnswers = false;
|
||||
showingQuestion.value = false;
|
||||
});
|
||||
gameStore.addSocketListener("answerRevealed", ( _data ) => {
|
||||
gameStore.acceptAnswers = false;
|
||||
gameStore.board.categories[categoryIndex.value].boardEntries[boardEntryIndex.value].isAnswered = true;
|
||||
showingAnswer.value = true;
|
||||
});
|
||||
gameStore.addSocketListener("answerHidden", ( _data ) => {
|
||||
showingAnswer.value = false;
|
||||
});
|
||||
gameStore.addSocketListener("questionLocked", ( _data ) => {
|
||||
gameStore.acceptAnswers = false;
|
||||
});
|
||||
gameStore.addSocketListener("playerAnswersRevealed", ( data ) => {
|
||||
for( let playerAnswer of data.payload.revealedAnswers ){
|
||||
let playerIndex = gameStore.players.findIndex( playerEntry => playerEntry._id === playerAnswer.playerId );
|
||||
if( playerIndex !== -1 ) {
|
||||
gameStore.players[playerIndex].currentTextAnswer = playerAnswer.answer;
|
||||
}
|
||||
}
|
||||
});
|
||||
gameStore.addSocketListener("questionAnswered", ( data ) => {
|
||||
let cIndex = data.payload.categoryIndex;
|
||||
let bEIndex = data.payload.boardEntryIndex;
|
||||
gameStore.board.categories[cIndex].boardEntries[bEIndex].isAnswered = true;
|
||||
});
|
||||
gameStore.addSocketListener("questionNotAnswered", ( data ) => {
|
||||
let cIndex = data.payload.categoryIndex;
|
||||
let bEIndex = data.payload.boardEntryIndex;
|
||||
gameStore.board.categories[cIndex].boardEntries[bEIndex].isAnswered = false;
|
||||
});
|
||||
gameStore.addSocketListener("playerLeft", ( data ) => {
|
||||
let playerId = data.payload.player._id;
|
||||
let playerName = data.payload.player.name;
|
||||
let playerPoints = data.payload.player.points;
|
||||
if( gameStore.isHost ){
|
||||
alert( `${playerName} left the game (Points: ${playerPoints})`);
|
||||
}
|
||||
console.info(`${playerName} left the game (Points: ${playerPoints})`);
|
||||
let playerIndex = gameStore.players.findIndex( playerEntry => playerEntry._id === playerId );
|
||||
if( playerIndex !== -1 ){
|
||||
gameStore.players.splice( playerIndex, 1 );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function playerBuzzered( data ){
|
||||
gameStore.acceptAnswers = false;
|
||||
if( gameStore.playerId === data.payload.playerId ){
|
||||
buzzBuzz.play();
|
||||
} else {
|
||||
if( !gameStore.isHost ){
|
||||
buzzNoBuzz.play();
|
||||
}
|
||||
}
|
||||
let playerIndex = gameStore.players.findIndex( playerEntry => playerEntry._id === data.payload.playerId );
|
||||
if( playerIndex !== -1 ){
|
||||
gameStore.players[playerIndex].isAnswering = true;
|
||||
}
|
||||
}
|
||||
|
||||
function removeListeners(){
|
||||
gameStore.removeSocketListener("boardEntrySelected");
|
||||
gameStore.removeSocketListener("boardSelected");
|
||||
gameStore.removeSocketListener("pointsAdjusted");
|
||||
gameStore.removeSocketListener("playerAnswerRevealed");boardIsLoading
|
||||
gameStore.removeSocketListener("playerAnswerTextUpdated");
|
||||
gameStore.removeSocketListener("audioPlaying")
|
||||
gameStore.removeSocketListener("audioStopped")
|
||||
gameStore.removeSocketListener("playerBuzzered");
|
||||
gameStore.removeSocketListener("questionRevealed");
|
||||
gameStore.removeSocketListener("questionHidden");
|
||||
gameStore.removeSocketListener("answerRevealed");
|
||||
gameStore.removeSocketListener("answerHidden");
|
||||
gameStore.removeSocketListener("questionLocked");
|
||||
gameStore.removeSocketListener("playerAnswersRevealed");
|
||||
gameStore.removeSocketListener("questionAnswered");
|
||||
gameStore.removeSocketListener("questionNotAnswered");
|
||||
gameStore.removeSocketListener("playerLeft");
|
||||
}
|
||||
|
||||
function showBoard(){
|
||||
gameStore.sendEvent( "selectBoard", {} );
|
||||
}
|
||||
function boardEntryClicked( cIndex, entryIndex ){
|
||||
if( gameStore.isHost ){
|
||||
gameStore.sendEvent( "selectBoardEntry", { categoryIndex: cIndex, boardEntryIndex: entryIndex } );
|
||||
}
|
||||
}
|
||||
|
||||
function buzzerPressed(){
|
||||
if( gameStore.acceptAnswers ){
|
||||
gameStore.sendEvent( "pressBuzzer", {} );
|
||||
}
|
||||
}
|
||||
|
||||
function answerTextUpdated( updatedText ){
|
||||
if( gameStore.acceptAnswers ){
|
||||
gameStore.sendEvent( "updateAnswerText", { updatedText: updatedText } );
|
||||
}
|
||||
}
|
||||
|
||||
function playAudio( _cIndex, _bEIndex, qIndex ){
|
||||
questionIndexForAudio.value = Number(qIndex);
|
||||
gameStore.sendEvent("playAudioForQuestion", {} );
|
||||
}
|
||||
|
||||
function stopAudio(){
|
||||
if( gameStore.isHost ){
|
||||
gameStore.sendEvent("stopAudioForQuestion", {} );
|
||||
}
|
||||
}
|
||||
|
||||
function showQuestion(){
|
||||
if( gameStore.isHost ){
|
||||
gameStore.sendEvent( "showQuestion", {} );
|
||||
}
|
||||
}
|
||||
function showAnswer(){
|
||||
if( gameStore.isHost ){
|
||||
gameStore.sendEvent("showAnswer", {} );
|
||||
}
|
||||
}
|
||||
function hideQuestion(){
|
||||
if( gameStore.isHost ){
|
||||
gameStore.sendEvent("hideQuestion", {} );
|
||||
}
|
||||
}
|
||||
function hideAnswer(){
|
||||
if( gameStore.isHost ){
|
||||
gameStore.sendEvent("hideAnswer", {} );
|
||||
}
|
||||
}
|
||||
|
||||
function questionAnswered( cIndex, bEIndex ){
|
||||
let payload = {
|
||||
categoryIndex: cIndex,
|
||||
boardEntryIndex: bEIndex,
|
||||
}
|
||||
gameStore.sendEvent("questionAnswered", payload );
|
||||
}
|
||||
function questionAnsweredRevert( cIndex, bEIndex ){
|
||||
let payload = {
|
||||
categoryIndex: cIndex,
|
||||
boardEntryIndex: bEIndex,
|
||||
}
|
||||
gameStore.sendEvent("questionAnsweredRevert", payload );
|
||||
}
|
||||
|
||||
function manualPointsAdjustment( playerId, playerName, points ){
|
||||
let payload = {
|
||||
reopenQuestion: false,
|
||||
playerId: playerId,
|
||||
playerName: playerName,
|
||||
pointsAdjustment: points,
|
||||
}
|
||||
gameStore.sendEvent( "addPointsToPlayer", payload );
|
||||
}
|
||||
function answerRuled( playerId, playerName, points, reopenQuestion ){
|
||||
let payload = {
|
||||
reopenQuestion: reopenQuestion,
|
||||
playerId: playerId,
|
||||
playerName: playerName,
|
||||
pointsAdjustment: points,
|
||||
}
|
||||
gameStore.sendEvent( "addPointsToPlayer", payload );
|
||||
}
|
||||
|
||||
function lockQuestion(){
|
||||
gameStore.sendEvent("lockQuestion", {});
|
||||
}
|
||||
|
||||
function revealPlayerAnswers( playerIds ){
|
||||
let payload = [];
|
||||
let ids;
|
||||
if( playerIds ){
|
||||
ids = playerIds;
|
||||
} else {
|
||||
ids = gameStore.players.map( playerEntry => playerEntry._id );
|
||||
}
|
||||
for( let playerId of ids ){
|
||||
let player = gameStore.players.find( playerEntry => playerEntry._id === playerId );
|
||||
if( player ){
|
||||
payload.push({
|
||||
playerId: player._id,
|
||||
answer: player.currentTextAnswer,
|
||||
});
|
||||
}
|
||||
}
|
||||
gameStore.sendEvent("revealPlayerAnswers", payload);
|
||||
}
|
||||
|
||||
gameStore.getBoardToGame( route.params.gameId )
|
||||
.then( () => {
|
||||
selectedObject.value = gameStore.board;
|
||||
})
|
||||
.catch( ( err ) => {
|
||||
console.debug( err );
|
||||
alert("An error occured while loading the board");
|
||||
})
|
||||
.finally( () => {
|
||||
boardIsLoading.value = false;
|
||||
});
|
||||
|
||||
onMounted(()=>{
|
||||
setUpListeners();
|
||||
navbarHeight.value = document.getElementById("navbar").clientHeight;
|
||||
});
|
||||
|
||||
onUnmounted( () => {
|
||||
removeListeners();
|
||||
});
|
||||
|
||||
onBeforeRouteLeave((to, from) => {
|
||||
const answer = window.confirm(
|
||||
'Do you really want to leave the lobby?'
|
||||
)
|
||||
// cancel the navigation and stay on the same page
|
||||
if (!answer) {
|
||||
return false
|
||||
} else {
|
||||
gameStore.closeWebSocket();
|
||||
}
|
||||
});
|
||||
|
||||
//TODO List:
|
||||
// -Buzzer sound
|
||||
// -Profile Pic
|
||||
// -More Question Types
|
||||
// -Players selecting BoardEntry
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container-fluid px-0" :style="{'height': 'calc(100vh - ' + navbarHeight + 'px)'}">
|
||||
<div v-if="boardIsLoading" class="h-100 w-100 d-flex justify-content-center align-items-center">
|
||||
<font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-spinner" spin size="4x"/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="row h-100 w-100 mx-0">
|
||||
<div class="col-9 px-0 position-relative">
|
||||
<div class="d-flex flex-column w-100">
|
||||
<GameView
|
||||
:objToDisplay="getSelectedObjectType"
|
||||
:isQuestionRevealed="showingQuestion"
|
||||
:isAnswerRevealed="showingAnswer"
|
||||
:board="gameStore.board"
|
||||
:cIndex="categoryIndex"
|
||||
:bEIndex="boardEntryIndex"
|
||||
:showingBottomView="true"
|
||||
:isHost="gameStore.isHost"
|
||||
:anyPlayerIsAnswering="anyPlayerIsAnswering"
|
||||
:isBeingPlayed="isBeingPlayed"
|
||||
@showBoard="showBoard"
|
||||
@showQuestion="showQuestion"
|
||||
@showAnswer="showAnswer"
|
||||
@hideQuestion="hideQuestion"
|
||||
@hideAnswer="hideAnswer"
|
||||
@boardEntryClicked="boardEntryClicked"
|
||||
@playerBuzzered="playerBuzzered"
|
||||
@playAudio="playAudio"
|
||||
@stopAudio="stopAudio"
|
||||
@questionAnswered="questionAnswered"
|
||||
@questionAnsweredRevert="questionAnsweredRevert"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 border-start border-2 border-pink-accent-primary px-0 h-100">
|
||||
<div class="d-flex flex-column w-100 justify-content-between h-100">
|
||||
<div class="overflow-auto">
|
||||
<PlayersView
|
||||
:players="gameStore.players"
|
||||
:questionPoints="(isBoardSelected ? 0 : Number(selectedObject.points) )"
|
||||
:answerInteraction="(isBoardSelected ? '' : selectedObject.answer.answerInteraction )"
|
||||
:isHost="gameStore.isHost"
|
||||
:acceptAnswers="gameStore.acceptAnswers && !isBoardSelected"
|
||||
@manualPointsAdjustment="manualPointsAdjustment"
|
||||
@answerRuled="answerRuled"
|
||||
@revealPlayerAnswers="revealPlayerAnswers"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PlayerInteractionView
|
||||
v-if="!gameStore.isHost"
|
||||
:objToDisplay="getSelectedObjectType"
|
||||
:board="gameStore.board"
|
||||
:cIndex="categoryIndex"
|
||||
:bEIndex="boardEntryIndex"
|
||||
:playerIsAnswering="playerIsAnswering"
|
||||
:acceptAnswers="gameStore.acceptAnswers"
|
||||
@buzzerPressed="buzzerPressed"
|
||||
@answerTextUpdated="answerTextUpdated"
|
||||
/>
|
||||
<HostInteractionView
|
||||
v-if="gameStore.isHost"
|
||||
:objToDisplay="getSelectedObjectType"
|
||||
:board="gameStore.board"
|
||||
:cIndex="categoryIndex"
|
||||
:bEIndex="boardEntryIndex"
|
||||
:playerIsAnswering="playerIsAnswering"
|
||||
:acceptAnswers="gameStore.acceptAnswers"
|
||||
@lockQuestion="lockQuestion"
|
||||
@revealPlayerAnswers="revealPlayerAnswers"
|
||||
@questionAnswered="questionAnswered"
|
||||
@questionAnsweredRevert="questionAnsweredRevert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<script setup>
|
||||
import { useGameStore } from "@/stores/GameStore";
|
||||
import { useUserStore } from "@/stores/UserStore";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ref } from "vue";
|
||||
|
||||
const gameStore = useGameStore();
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
|
||||
let errorMessageJoin = ref("");
|
||||
let errorMessageHost = ref("");
|
||||
let joinRequest = ref(false);
|
||||
let hostRequest = ref(false);
|
||||
|
||||
let gameCodeInput = ref("");
|
||||
|
||||
function hostButtonClicked(_event) {
|
||||
if( !userStore.loggedIn ){
|
||||
router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
hostRequest.value = true;
|
||||
|
||||
gameStore.setupNewHostGame()
|
||||
.then( (res) => {
|
||||
return gameStore.setupWebsocket();
|
||||
})
|
||||
.then( () => {
|
||||
return gameStore.hostNewGame()
|
||||
})
|
||||
.then( ( gameId ) => {
|
||||
router.push("/lobby/" + gameId);
|
||||
})
|
||||
.catch( (err) => {
|
||||
console.error( err );
|
||||
errorMessageHost.value = "An unexpected error occured: " + err;
|
||||
setTimeout( () => {
|
||||
errorMessageHost.value = "";
|
||||
}, 2500);
|
||||
})
|
||||
.finally( () => {
|
||||
hostRequest.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function joinButtonClicked(_event) {
|
||||
joinRequest.value = true;
|
||||
gameStore.prepareGameWithCode( gameCodeInput.value )
|
||||
.then( () => {
|
||||
return gameStore.setupWebsocket();
|
||||
})
|
||||
.then( res => {
|
||||
router.push("/join");
|
||||
})
|
||||
.catch( err => {
|
||||
errorMessageJoin.value = err.message;
|
||||
setTimeout( () => {
|
||||
errorMessageJoin.value = "";
|
||||
}, 2500);
|
||||
console.error(err);
|
||||
})
|
||||
.finally( () => {
|
||||
joinRequest.value = true;
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container pt-5">
|
||||
<div class="row pt-3 mb-5">
|
||||
<div class="col">
|
||||
<h1 class="text-center">Welcome to Jeobeardy!</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- <div class="d-flex h-100 justify-content-evenly align-items-top w-100"> -->
|
||||
<div class="col-12 col-md-6 mb-5 mb-md-0 d-flex flex-column justify-content-start align-items-center">
|
||||
<!-- <RouterLink to="/join" class="text-decoration-none fw-bold"> -->
|
||||
<div class="card bg-primary home-card">
|
||||
<div class="card-header">
|
||||
<h2 class="m-2">Join a Game</h2>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div class="d-flex flex-column h-100">
|
||||
<div class="fs-4 flex-grow-1 d-flex align-items-center justify-content-center">
|
||||
Enter the Code you get from your host and join the lobby
|
||||
</div>
|
||||
<div class="d-flex px-3">
|
||||
<div class="flex-grow me-3">
|
||||
<input v-model="gameCodeInput" class="form-control form-control-lg bg-gray text-center text-dark" type="text" name="game-id" id="game-id" />
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-lg btn-pink-accent-primary text-nowrap" @click="joinButtonClicked">
|
||||
Join<font-awesome-icon class="ps-1" icon="fa-solid fa-right-to-bracket" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-warning mt-3">
|
||||
{{ errorMessageJoin }}
|
||||
</div>
|
||||
<!-- </RouterLink> -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6 d-flex flex-column justify-content-start align-items-center">
|
||||
<div class="card bg-primary home-card">
|
||||
<div class="card-header">
|
||||
<h2 class="m-2">Host a Game</h2>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div class="d-flex flex-column h-100">
|
||||
<div class="fs-4 flex-grow-1 d-flex align-items-center justify-content-center">
|
||||
Create a Lobby for your friends to join. You host the game!
|
||||
</div>
|
||||
<div class="px-3">
|
||||
<button class="btn btn-lg btn-pink-accent-primary" @click="hostButtonClicked">
|
||||
Host
|
||||
<font-awesome-icon v-if="!hostRequest" class="ms-1" icon="fa-solid fa-users" />
|
||||
<font-awesome-icon v-else class="ms-1" icon="fa-solid fa-spinner" spin />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-warning mt-3">
|
||||
{{ errorMessageHost }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-card {
|
||||
height: 20rem;
|
||||
width: 25rem;
|
||||
max-width: 90vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,132 @@
|
||||
<script setup>
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useUserStore } from "@/stores/UserStore";
|
||||
import { useGameStore } from "@/stores/GameStore";
|
||||
import { ref } from "vue";
|
||||
|
||||
let errorMessage = ref("");
|
||||
let playerName = ref("");
|
||||
let joinRequest = ref(false);
|
||||
let forwardTo = { name: "gameLobby", params: { gameId: -1 } };
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const gameStore = useGameStore();
|
||||
|
||||
function joinButtonClicked(_event) {
|
||||
if( joinRequest.value === true ){
|
||||
return;
|
||||
}
|
||||
joinRequest.value = true;
|
||||
gameStore.joinGame( playerName.value )
|
||||
.then( ( gameId ) => {
|
||||
forwardTo.params.gameId = gameId;
|
||||
router.push( forwardTo );
|
||||
})
|
||||
.catch( ( err ) => {
|
||||
errorMessage.value = err.message;
|
||||
})
|
||||
.finally( () => {
|
||||
joinRequest.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
let gameId = route.params.gameId;
|
||||
if( gameId ){
|
||||
joinRequest.value = true;
|
||||
let localIsHost = false;
|
||||
gameStore.checkExistingGame( gameId )
|
||||
.then( ( data ) => {
|
||||
localIsHost = data.isHost;
|
||||
switch( data.gameState ){
|
||||
case "IN_LOBBY":
|
||||
forwardTo.name = "gameLobby";
|
||||
break;
|
||||
case "IN_PROGRESS":
|
||||
forwardTo.name = "gameWithGameId";
|
||||
break;
|
||||
case "ENDED":
|
||||
throw new Error("Game already ended");
|
||||
case "CREATED":
|
||||
throw new Error("Game is not yet ready to accept join requests");
|
||||
}
|
||||
return gameStore.setupWebsocket();
|
||||
})
|
||||
.then( () => {
|
||||
if( localIsHost ){
|
||||
return gameStore.continueHosting();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.then( ( gameId ) => {
|
||||
if( gameId !== false ){
|
||||
router.push( { name: "gameWithGameId", params: { gameId: gameId } } );
|
||||
}
|
||||
})
|
||||
.catch( ( err ) => {
|
||||
console.debug( err );
|
||||
alert(err);
|
||||
})
|
||||
.finally( () => {
|
||||
joinRequest.value = false;
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container pt-5">
|
||||
<div class="row pt-3">
|
||||
<div class="col">
|
||||
<h1 class="text-center">Choose your username for this Jeobeardy game!</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex h-100 justify-content-evenly align-items-center w-100">
|
||||
<div class="d-flex w-100 m-5 justify-content-center">
|
||||
<div class="card bg-primary join-card">
|
||||
<div class="card-header text-center">
|
||||
<h2 class="m-2">Choose a Username</h2>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div class="d-flex flex-column h-100 w-100 align-items-center justify-content-center">
|
||||
<div class="d-flex px-3 w-100">
|
||||
<div class="w-100 text-start">
|
||||
<label for="username" class="fs-5 mb-1">Username</label>
|
||||
<input
|
||||
v-model="playerName"
|
||||
v-focus
|
||||
class="form-control form-control-lg bg-gray text-left mb-2 text-dark"
|
||||
type="text"
|
||||
name="playername"
|
||||
id="playername"
|
||||
placeholder="Username"
|
||||
@keyup.enter="joinButtonClicked"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center w-100 px-3">
|
||||
<button class="btn btn-lg btn-pink-accent-primary text-nowrap" @click="joinButtonClicked">
|
||||
Join
|
||||
<font-awesome-icon v-if="!joinRequest" class="ms-1" icon="fa-solid fa-right-to-bracket" />
|
||||
<font-awesome-icon v-else class="ms-1" icon="fa-solid fa-spinner" spin />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-warning">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.join-card {
|
||||
min-height: 20rem;
|
||||
min-width: 25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,132 @@
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useRouter, onBeforeRouteLeave, useRoute } from 'vue-router';
|
||||
|
||||
import { useGameStore } from '@/stores/GameStore';
|
||||
|
||||
import BoardListView from "@/components/views/BoardListView.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const gameStore = useGameStore();
|
||||
|
||||
let selectedBoardId = ref("0");
|
||||
let showBoardMessage = ref( false );
|
||||
|
||||
|
||||
function startGame(){
|
||||
if( selectedBoardId.value !== "0" ){
|
||||
gameStore.sendEvent( "startGame", {} );
|
||||
} else {
|
||||
showBoardMessage.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
function boardSelected( id ){
|
||||
showBoardMessage.value = false;
|
||||
gameStore.sendEvent( "selectBoardForGame", { boardId: id } );
|
||||
}
|
||||
|
||||
onMounted( () => {
|
||||
gameStore.addSocketListener("gameStarted", ( data ) => {
|
||||
router.push( { name: "gameWithGameId", params: { gameId: route.params.gameId } } );
|
||||
});
|
||||
|
||||
gameStore.addSocketListener("boardSelectedForGame", ( data ) => {
|
||||
selectedBoardId.value = data.payload.boardId;
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted( () => {
|
||||
gameStore.removeSocketListener("boardSelectedForGame");
|
||||
gameStore.removeSocketListener("gameStarted");
|
||||
})
|
||||
|
||||
onBeforeRouteLeave((to, from) => {
|
||||
if( ["game", "gameWithGameId", "gameWithGameIdAndBoardId" ].includes( to.name ) ){
|
||||
return true;
|
||||
}
|
||||
const answer = window.confirm(
|
||||
'Do you really want to leave the lobby?'
|
||||
)
|
||||
// cancel the navigation and stay on the same page
|
||||
if (!answer) {
|
||||
return false
|
||||
} else {
|
||||
gameStore.closeWebSocket();
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col d-flex justify-content-center align-items-center">
|
||||
<span class="fs-4">Gamecode: <span class="fs-3" @click="log">{{ gameStore.gameCode }}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-3">
|
||||
<div class="col text-center">
|
||||
Waiting for host to start
|
||||
<font-awesome-icon class="ms-1" icon="fa-solid fa-spinner" spin />
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="gameStore.isHost" >
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<BoardListView
|
||||
:selectedBoard="selectedBoardId"
|
||||
@boardSelected="boardSelected"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="showBoardMessage" class="row">
|
||||
<div class="col">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<div class="d-flex justify-content-center align-items-center bg-wrong-accent-primary px-2 py-1 rounded">
|
||||
<font-awesome-icon class="me-1" icon="fa-solid fa-circle-exclamation" />
|
||||
<span>
|
||||
Please select a board before starting the game
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="gameStore.isHost" class="row my-3">
|
||||
<div class="col text-center">
|
||||
<button class="btn btn-pink-accent-primary" @click="startGame">
|
||||
<span class="align-middle">
|
||||
Start Game
|
||||
</span>
|
||||
<font-awesome-layers class="ms-1" fixed-width>
|
||||
<font-awesome-icon icon="fa-solid fa-square" size="xl" />
|
||||
<font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-play" size="sm" />
|
||||
<!-- <font-awesome-icon class="align-middle border-dark rounded" icon="fa-solid fa-play" border /> -->
|
||||
</font-awesome-layers>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="gameStore.players.length === 0" class="row">
|
||||
<div class="col">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
No Players in the lobby, yet.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row">
|
||||
<template v-for="(player, playerIdx) in gameStore.players" :key="player.id">
|
||||
<div class="col-4 my-3">
|
||||
<div class="card bg-primary">
|
||||
<div class="card-body fs-4 text-center">
|
||||
{{ playerIdx + 1 }} - {{ player.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
import { useUserStore } from "@/stores/UserStore";
|
||||
import { ref } from "vue";
|
||||
|
||||
let username = ref("");
|
||||
let password = ref("");
|
||||
let loginRequest = ref(false);
|
||||
let errorMessage = ref("");
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
|
||||
function signUpButtonClicked(_event) {
|
||||
router.push("/signup");
|
||||
}
|
||||
|
||||
function loginButtonClicked(_event) {
|
||||
loginRequest.value = true;
|
||||
userStore
|
||||
.login(username.value, password.value)
|
||||
.then((response) => {
|
||||
loginRequest.value = false;
|
||||
if (response.data.success === false) {
|
||||
errorMessage.value = response.data.error;
|
||||
setTimeout(() => {
|
||||
errorMessage.value = "";
|
||||
}, 2500);
|
||||
} else {
|
||||
userStore.setUser(response.data.user);
|
||||
router.push("/profile");
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
loginRequest.value = false;
|
||||
errorMessage.value = "An error occured while logging you in";
|
||||
setTimeout(() => {
|
||||
errorMessage.value = "";
|
||||
}, 2500);
|
||||
console.debug(err);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container pt-5">
|
||||
<div class="row pt-3">
|
||||
<div class="col">
|
||||
<h1 class="text-center">Login to your Jeobeardy Account!</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex h-100 justify-content-evenly align-items-center w-100">
|
||||
<div class="d-flex flex-column m-5 justify-content-center align-items-center">
|
||||
<div class="card bg-primary login-card">
|
||||
<div class="card-header">
|
||||
<h2 class="m-2">Login</h2>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div class="d-flex flex-column h-100 w-100 align-items-center justify-content-center">
|
||||
<div class="d-flex px-3 w-100">
|
||||
<div class="w-100 text-start">
|
||||
<label for="username" class="fs-5 mb-1">Username</label>
|
||||
<input
|
||||
v-model="username"
|
||||
v-focus
|
||||
class="form-control form-control-lg bg-gray text-left mb-2 text-dark"
|
||||
type="text"
|
||||
name="username"
|
||||
id="username"
|
||||
placeholder="Username"
|
||||
@keyup.enter="loginButtonClicked"
|
||||
/>
|
||||
<label for="password" class="fs-5 mb-1">Password</label>
|
||||
<input
|
||||
v-model="password"
|
||||
class="form-control form-control-lg bg-gray text-left mb-3 text-dark"
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
placeholder="Password"
|
||||
@keyup.enter="loginButtonClicked"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between w-100 px-3">
|
||||
<button class="btn btn-sm btn-primary text-nowrap" @click="signUpButtonClicked">Sign Up</button>
|
||||
<button class="btn btn-lg btn-pink-accent-primary text-nowrap" @click="loginButtonClicked">
|
||||
Login
|
||||
<font-awesome-icon v-if="!loginRequest" class="ms-1" icon="fa-solid fa-right-to-bracket" />
|
||||
<font-awesome-icon v-else class="ms-1" icon="fa-solid fa-spinner" spin />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-warning mt-3">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-card {
|
||||
min-height: 20rem;
|
||||
width: 25rem;
|
||||
max-width: 90vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<script setup>
|
||||
|
||||
import BoardListView from '@/components/views/BoardListView.vue';
|
||||
import { useUserStore } from "@/stores/UserStore";
|
||||
import { useLoginCheck } from "@/composables/loginCheck";
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
useLoginCheck();
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
|
||||
function boardSelected( boardId ){
|
||||
if( boardId ){
|
||||
router.push({
|
||||
name: "createBoardWithParams",
|
||||
params: { boardId: boardId },
|
||||
});
|
||||
} else {
|
||||
router.push( { name: "createBoard" });
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container pt-5">
|
||||
<div class="row pt-3">
|
||||
<div class="col">
|
||||
<h1 class="text-center">Hi, {{ userStore.username }}!</h1>
|
||||
</div>
|
||||
</div>
|
||||
<BoardListView @boardSelected="boardSelected"/>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="btn btn-pink-accent-primary" @click="boardSelected()">
|
||||
New Board
|
||||
<font-awesome-icon icon="fa-solid fa-plus-square" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,146 @@
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router";
|
||||
import { useUserStore } from "@/stores/UserStore";
|
||||
import { ref } from "vue";
|
||||
|
||||
let username = ref("");
|
||||
let password = ref("");
|
||||
let passwordCheck = ref("");
|
||||
let signupRequest = ref(false);
|
||||
let errorMessage = ref("");
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
|
||||
function singUpButtonClicked(_event) {
|
||||
if( !areInputsValid() ){
|
||||
return;
|
||||
}
|
||||
|
||||
signupRequest.value = true;
|
||||
userStore.signup(username.value, password.value)
|
||||
.then((response) => {
|
||||
signupRequest.value = false;
|
||||
if (response.data.success === false) {
|
||||
errorMessage.value = response.data.error;
|
||||
setTimeout(() => {
|
||||
errorMessage.value = "";
|
||||
}, 2500);
|
||||
} else {
|
||||
userStore.setUser(response.data.user);
|
||||
router.push("/");
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
signupRequest.value = false;
|
||||
errorMessage.value = "Something went wrong while Signing you up!";
|
||||
setTimeout(() => {
|
||||
errorMessage.value = "";
|
||||
}, 2500);
|
||||
console.debug(err);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function areInputsValid(){
|
||||
let isValid = true;
|
||||
if( password.value !== passwordCheck.value){
|
||||
isValid = false;
|
||||
errorMessage.value = "Passwords are not identical";
|
||||
}
|
||||
if( passwordCheck.value === "" ){
|
||||
isValid = false;
|
||||
errorMessage.value = "Password check is empty";
|
||||
}
|
||||
if( password.value === "" ){
|
||||
isValid = false;
|
||||
errorMessage.value = "Password is empty";
|
||||
}
|
||||
if( username.value === "" ){
|
||||
isValid = false;
|
||||
errorMessage.value = "Username is empty";
|
||||
}
|
||||
if( !isValid ){
|
||||
setTimeout(() => {
|
||||
errorMessage.value = "";
|
||||
}, 2500);
|
||||
}
|
||||
return isValid;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container pt-5">
|
||||
<div class="row pt-3">
|
||||
<div class="col">
|
||||
<h1 class="text-center">Sign up to Jeobeardy!</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex h-100 justify-content-evenly align-items-center w-100">
|
||||
<div class="d-flex flex-column m-5 justify-content-center align-items-center">
|
||||
<div class="card bg-primary signup-card">
|
||||
<div class="card-header">
|
||||
<h2 class="m-2">Create User</h2>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div class="d-flex flex-column h-100 w-100 align-items-center justify-content-center">
|
||||
<div class="d-flex px-3 w-100">
|
||||
<div class="w-100 text-start">
|
||||
<label for="username" class="fs-5 mb-1">Username</label>
|
||||
<input
|
||||
v-model="username"
|
||||
v-focus
|
||||
class="form-control form-control-lg bg-gray text-left mb-2 text-dark"
|
||||
type="text"
|
||||
name="username"
|
||||
id="username"
|
||||
placeholder="Username"
|
||||
@keyup.enter="singUpButtonClicked"
|
||||
/>
|
||||
<label for="password" class="fs-5 mb-1">Password</label>
|
||||
<input
|
||||
v-model="password"
|
||||
class="form-control form-control-lg bg-gray text-left mb-3 text-dark"
|
||||
type="password"
|
||||
name="password"
|
||||
id="password"
|
||||
placeholder="Password"
|
||||
@keyup.enter="singUpButtonClicked"
|
||||
/>
|
||||
<input
|
||||
v-model="passwordCheck"
|
||||
class="form-control form-control-lg bg-gray text-left mb-3 text-dark"
|
||||
type="password"
|
||||
name="passwordCheck"
|
||||
id="passwordCheck"
|
||||
placeholder="Re-Enter Password"
|
||||
@keyup.enter="singUpButtonClicked"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end w-100 px-3">
|
||||
<button class="btn btn-lg btn-pink-accent-primary text-nowrap" @click="singUpButtonClicked">
|
||||
Sign Up
|
||||
<font-awesome-icon v-if="!signupRequest" class="ms-1" icon="fa-solid fa-user-plus" />
|
||||
<font-awesome-icon v-else class="ms-1" icon="fa-solid fa-spinner" spin />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-warning mt-3">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.signup-card {
|
||||
min-height: 20rem;
|
||||
width: 25rem;
|
||||
max-width: 90vw;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
|
||||
import { useGameCreationStore } from "@/stores/GameCreationStore";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
answer: Object,
|
||||
board: Object,
|
||||
cIndex: Number,
|
||||
bEIndex: Number,
|
||||
});
|
||||
|
||||
let route = useRoute();
|
||||
|
||||
const imageRef = ref(null);
|
||||
let gameCreationStore = useGameCreationStore();
|
||||
|
||||
let getImageInGameCreationStore = computed( () => {
|
||||
return gameCreationStore.answerImages.find( imageEntry => imageEntry.cIndex === props.cIndex && imageEntry.bEIndex === props.bEIndex );
|
||||
});
|
||||
|
||||
|
||||
let protocol = ('https:' == document.location.protocol ? 'https://' : 'http://');
|
||||
let hostname = window.location.hostname;
|
||||
if( window.location.hostname.includes("localhost" ) ){
|
||||
hostname += ':3000';
|
||||
}
|
||||
const API_URL = `${protocol}${hostname}/api`;
|
||||
|
||||
|
||||
onMounted( () => {
|
||||
if( imageRef.value ){
|
||||
imageRef.value.src = API_URL + '/game/file/' + props.answer.filename;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="answer.answerType === 'imageAnswer'">
|
||||
<div class="d-flex justify-content-center align-items-center position-absolute bottom-0 start-0 h-100 w-100 bg-dark-primary">
|
||||
<template v-if="route.path.includes('create') && getImageInGameCreationStore !== undefined">
|
||||
<div class="h-75 w-100 text-center">
|
||||
<img class="h-100" :src="getImageInGameCreationStore.url" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="answer.filename">
|
||||
<div class="h-75 w-100 text-center">
|
||||
<img ref="imageRef" class="h-100" src="" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="d-flex justify-content-center align-items-center position-absolute bottom-0 start-50 translate-middle mt-5">
|
||||
<h3 class="bg-primary rounded-1 px-2 py-1">
|
||||
{{ props.answer.answerText }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="d-flex justify-content-center align-items-center position-absolute bottom-0 start-50 translate-middle mt-5">
|
||||
<h3 class="bg-primary rounded-1 px-2 py-1">
|
||||
{{ props.answer.answerText }}
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
|
||||
import CategoryCard from '@/components/blocks/CategoryCard.vue';
|
||||
|
||||
const props = defineProps({
|
||||
categories: Array,
|
||||
selectedCategoryIndex: Number,
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(["categorySelected"]);
|
||||
|
||||
function changeSelectedCategory( boardEntryIndex ) {
|
||||
emit("categorySelected", boardEntryIndex );
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="props.selectedCategoryIndex === -1">
|
||||
<template v-for="( categoryEntry, categoryEntryIndex ) in props.categories" :key="categoryEntry.categoryName">
|
||||
<CategoryCard
|
||||
:category="categoryEntry"
|
||||
:isSelected="props.isSelected"
|
||||
@categoryCardClicked=" () => changeSelectedCategory( categoryEntryIndex )"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<CategoryCard
|
||||
:category="props.categories[selectedCategoryIndex]"
|
||||
:isSelected="props.isSelected"
|
||||
@categoryCardClicked=" () => changeSelectedCategory( props.selectedCategoryIndex )"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import Draggable from "vue3-draggable";
|
||||
import { onMounted } from "vue";
|
||||
|
||||
import { useGameCreationStore } from '@/stores/GameCreationStore';
|
||||
import CustomTextSaveOrCancel from '@/components/blocks/CustomTextSaveOrCancel.vue';
|
||||
import Category from "@/models/Category";
|
||||
|
||||
|
||||
const gameCreationStore = useGameCreationStore();
|
||||
let buttonDivHeight = ref("3rem");
|
||||
let navbarHeight = ref("4rem");
|
||||
|
||||
let newCategoryName = ref("");
|
||||
|
||||
function addCategoryButtonClicked(_event){
|
||||
if( newCategoryName.value === "" ){
|
||||
return;
|
||||
}
|
||||
let category = new Category( newCategoryName.value, "New Category", [] );
|
||||
gameCreationStore.$patch((state)=>{
|
||||
state.board.categories.push( category );
|
||||
})
|
||||
newCategoryName.value = "";
|
||||
// gameCreationStore.board.categories.push( category );
|
||||
}
|
||||
function deleteCategoryButtonClicked( cIndex ){
|
||||
gameCreationStore.$patch((state)=>{
|
||||
state.board.categories.splice( cIndex, 1 );
|
||||
})
|
||||
}
|
||||
|
||||
onMounted( () => {
|
||||
buttonDivHeight.value = document.getElementById("save-cancel-button-div").offsetHeight;
|
||||
navbarHeight.value = document.getElementById("board-entry-edit-view-container").offsetHeight;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="board-entry-edit-view-container" class="container-fluid h-100 px-0">
|
||||
<div class="d-flex flex-column px-3" :style="[{'height': 'calc( 100vh - ' + (navbarHeight - buttonDivHeight) + 'px)' }]">
|
||||
<div class="my-3">
|
||||
<h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Board</h3>
|
||||
<div>
|
||||
<label class="form-label fs-4 mt-3" for="question-type">Name</label>
|
||||
<input v-model="gameCreationStore.board.boardName" class="form-control bg-dark-blue" type="text">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label fs-4 mt-3">Categories</label>
|
||||
<div v-if="gameCreationStore.board.categories.length === 0">No categories yet</div>
|
||||
<template v-else>
|
||||
<div v-for="( category, categoryListIndex ) in gameCreationStore.board.categories" :key="category.categoryName">
|
||||
<div class="input-group mb-1">
|
||||
<span class="form-control border-pink-accent-primary">{{ category.categoryName }}</span>
|
||||
<button tabindex="-1" class="btn btn-pink-accent-primary" @click="deleteCategoryButtonClicked(categoryListIndex)">
|
||||
<font-awesome-icon icon="fa-solid fa-trash" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<label class="form-label fs-5" for="new-category">Add category</label>
|
||||
<div class="input-group">
|
||||
<input v-model="newCategoryName" class="form-control bg-dark-blue" type="text" id="new-category" name="new-category" @keydown.enter="addCategoryButtonClicked">
|
||||
<button class="btn btn-pink-accent-primary" @click="addCategoryButtonClicked">
|
||||
<font-awesome-icon icon="fa-solid fa-square-plus" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-card {
|
||||
height: 20rem;
|
||||
width: 25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<script setup>
|
||||
import { ref, watch, nextTick } from "vue";
|
||||
|
||||
import { QUESTION_TYPES } from "@/services/GameService";
|
||||
import { ANSWER_TYPES } from "@/services/GameService";
|
||||
import { ANSWER_INTERACTION } from "@/services/GameService";
|
||||
import { useGameCreationStore } from '@/stores/GameCreationStore';
|
||||
|
||||
const props = defineProps({
|
||||
categoryIndex: Number,
|
||||
boardEntryIndex: Number,
|
||||
questionIndex: Number,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["questionIndexChanged"]);
|
||||
|
||||
const gameCreationStore = useGameCreationStore();
|
||||
let buttonDivHeight = ref("3rem");
|
||||
let navbarHeight = ref("4rem");
|
||||
let accordionButtons = ref([]);
|
||||
let accordionCollapses = ref([]);
|
||||
|
||||
|
||||
let answerImageInput = ref(null);
|
||||
let questionImageInput = ref(null);
|
||||
|
||||
|
||||
function addQuestionAbove( insertIndex ){
|
||||
gameCreationStore.addEmptyQuestionToBoardEntry( props.categoryIndex, props.boardEntryIndex, insertIndex );
|
||||
}
|
||||
function addQuestionBelow( insertIndex ){
|
||||
let insertIndexBelow = insertIndex + 1;
|
||||
gameCreationStore.addEmptyQuestionToBoardEntry( props.categoryIndex, props.boardEntryIndex, insertIndexBelow );
|
||||
nextTick( () => {
|
||||
setQuestionIndex( insertIndexBelow );
|
||||
})
|
||||
}
|
||||
|
||||
function removeQuestion( removeIndex ){
|
||||
gameCreationStore.removeQuestionFromBoardEntry( props.categoryIndex, props.boardEntryIndex, removeIndex );
|
||||
if( 1 <= gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].questions.length && gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].questions.length <= removeIndex ){
|
||||
nextTick( () => {
|
||||
setQuestionIndex( removeIndex - 1 );
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function questionTypeChanged( event, qIndex ){
|
||||
let newQuestionType = event.target.selectedOptions[0].value;
|
||||
gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].questions[qIndex].questionType = newQuestionType;
|
||||
}
|
||||
|
||||
function onQuestionImageChanged( questionIndex, event ){
|
||||
let files = event.target.files || event.dataTransfer.files;
|
||||
if (!files.length){
|
||||
return;
|
||||
}
|
||||
|
||||
gameCreationStore.addImageToQuestion( props.categoryIndex, props.boardEntryIndex, questionIndex, files[0]);
|
||||
}
|
||||
|
||||
function onAnswerImageChanged( event ){
|
||||
let files = event.target.files || event.dataTransfer.files;
|
||||
if (!files.length){
|
||||
return;
|
||||
}
|
||||
|
||||
gameCreationStore.addImageToAnswer( props.categoryIndex, props.boardEntryIndex, files[0]);
|
||||
}
|
||||
|
||||
function onQuestionAudioChanged( questionIndex, event ){
|
||||
let files = event.target.files || event.dataTransfer.files;
|
||||
if (!files.length){
|
||||
return;
|
||||
}
|
||||
|
||||
gameCreationStore.addAudioToQuestion( props.categoryIndex, props.boardEntryIndex, questionIndex, files[0]);
|
||||
}
|
||||
|
||||
function setQuestionIndex( questionIndex ){
|
||||
emit("questionIndexChanged", questionIndex)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.questionIndex,
|
||||
( newVal, oldVal ) => {
|
||||
if( !accordionCollapses.value[newVal].classList.contains("show") ){
|
||||
accordionButtons.value[newVal].click();
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => props.boardEntryIndex,
|
||||
( newVal, oldVal ) => {
|
||||
answerImageInput.value.value = "";
|
||||
questionImageInput.value.value = "";
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="board-entry-edit-view-container">
|
||||
<div class="d-flex flex-column px-3" :style="[{'height': 'calc( 100vh - ' + (navbarHeight - buttonDivHeight) + 'px)' }]">
|
||||
<div class="my-3">
|
||||
<h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">General</h3>
|
||||
<div>
|
||||
<label class="form-label fs-4 mt-3" for="question-type">Points</label>
|
||||
<input v-model="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].points" class="form-control bg-dark-blue" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Question</h3>
|
||||
<div class="accordion" id="questionAccordion">
|
||||
<template v-for="(question, questionIndex) in gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].questions" :key="questionIndex">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" :id="'questionCollapseHeading' + questionIndex">
|
||||
<button
|
||||
ref="accordionButtons"
|
||||
class="accordion-button"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
:data-bs-target="'#questionCollapse' + questionIndex"
|
||||
:aria-expanded="(questionIndex === props.questionIndex ? 'true' : 'false')"
|
||||
:aria-controls="'questionCollapse' + questionIndex"
|
||||
@click="setQuestionIndex(questionIndex)"
|
||||
>
|
||||
Question Layer {{ 1 + questionIndex }}
|
||||
</button>
|
||||
</h2>
|
||||
<div ref="accordionCollapses" :id="'questionCollapse' + questionIndex" class="accordion-collapse collapse" :class="[{'show': questionIndex === 0 }]" :aria-labelledby="'questionCollapseHeading' + questionIndex" data-bs-parent="#questionAccordion">
|
||||
<div class="accordion-body">
|
||||
<div>
|
||||
<label class="form-label fs-4" for="question-type">Question Type</label>
|
||||
<select @change="questionTypeChanged($event, questionIndex)" v-model="question.questionType" class="form-select bg-dark-blue" aria-label="Question Type" name="question-type" id="question-type">
|
||||
<option v-for="(questionText, questionTypeKey) in QUESTION_TYPES" :key="questionTypeKey" :value="questionTypeKey">{{ questionText }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label fs-4 mt-3" for="question-type">Question Text</label>
|
||||
<template v-if="question.questionType === 'multilineQuestion'">
|
||||
<textarea class="form-control bg-dark-blue" v-model="question.questionText">
|
||||
</textarea>
|
||||
</template>
|
||||
<template v-else>
|
||||
<input v-model="question.questionText" class="form-control bg-dark-blue" type="text">
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="question.questionType === 'imageQuestion'">
|
||||
<label class="form-label fs-4 mt-3" for="question-image">Question Image</label>
|
||||
<input class="form-control bg-dark-blue" type="file" name="question-image" id="question-image" @change="onQuestionImageChanged( questionIndex, $event )" accept="image/*">
|
||||
</div>
|
||||
<div v-if="question.questionType === 'audioQuestion'">
|
||||
<label class="form-label fs-4 mt-3" for="question-audio">Question Audio</label>
|
||||
<input ref="questionImageInput" class="form-control bg-dark-blue" type="file" name="question-audio" id="question-audio" @change="onQuestionAudioChanged( questionIndex, $event )" accept="audio/mpeg">
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-xxl-4 col-12 mb-1 px-1">
|
||||
<button class="btn btn-pink-accent-primary w-100 h-100" @click="addQuestionAbove(questionIndex)">Insert Above</button>
|
||||
</div>
|
||||
<div class="col-xxl-4 col-12 mb-1 px-1">
|
||||
<button class="btn btn-pink-accent-primary w-100 h-100" @click="addQuestionBelow(questionIndex)">Insert Below</button>
|
||||
</div>
|
||||
<div class="col-xxl-4 col-12 mb-1 px-1">
|
||||
<button class="btn btn-pink-accent-primary w-100 h-100" @click="removeQuestion(questionIndex)" :disabled="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].questions.length <= 1">Remove Layer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-3 pb-3">
|
||||
<h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Answer</h3>
|
||||
<div>
|
||||
<label class="form-label fs-4" for="answer-type">Answer Type</label>
|
||||
<select v-model="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].answer.answerType" class="form-select bg-dark-blue" aria-label="Answer Type" name="answer-type" id="answer-type">
|
||||
<option v-for="(answerText, answerTypeKey) in ANSWER_TYPES" :key="answerTypeKey" :value="answerTypeKey">{{ answerText }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label fs-4" for="answer-type">Answer Interaction</label>
|
||||
<select v-model="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].answer.answerInteraction" class="form-select bg-dark-blue" aria-label="Answer Interaction" name="answer-interaction" id="answer-interaction">
|
||||
<option v-for="(answerInteraction, answerInteractionKey) in ANSWER_INTERACTION" :key="answerInteractionKey" :value="answerInteractionKey">{{ answerInteraction }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label fs-4 mt-3" for="answer-type">Answer Text</label>
|
||||
<input v-model="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].answer.answerText" class="form-control bg-dark-blue" type="text">
|
||||
</div>
|
||||
<div v-if="gameCreationStore.board.categories[props.categoryIndex].boardEntries[props.boardEntryIndex].answer.answerType === 'imageAnswer'">
|
||||
<label class="form-label fs-4 mt-3" for="answer-image">Answer Image</label>
|
||||
<input ref="answerImageInput" class="form-control bg-dark-blue" type="file" name="answer-image" id="answer-image" @change="onAnswerImageChanged" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,142 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import QuestionView from "@/components/views/QuestionView.vue"
|
||||
import AnswerView from "@/components/views/AnswerView.vue"
|
||||
|
||||
const props = defineProps({
|
||||
board: Object,
|
||||
categoryName: String,
|
||||
cIndex: Number,
|
||||
bEIndex: Number,
|
||||
isHost: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isQuestionRevealed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isAnswerRevealed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
anyPlayerIsAnswering: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isBeingPlayed: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["specificQuestionLayerSelected", "backToBoard", "playerBuzzered", "playAudio", "stopAudio", "showQuestion", "showAnswer", "hideQuestion", "hideAnswer" ]);
|
||||
|
||||
let boardEntry = computed( () => {
|
||||
return props.board.categories[props.cIndex].boardEntries[props.bEIndex];
|
||||
})
|
||||
|
||||
const showingQuestion = computed( () => {
|
||||
return props.isAnswerRevealed || ( props.isQuestionRevealed && !props.anyPlayerIsAnswering );
|
||||
});
|
||||
|
||||
function showQuestion(){
|
||||
emit("showQuestion");
|
||||
}
|
||||
|
||||
function hideQuestion(){
|
||||
emit("hideQuestion");
|
||||
}
|
||||
function showAnswer(){
|
||||
emit("showAnswer");
|
||||
}
|
||||
|
||||
function hideAnswer(){
|
||||
emit("hideAnswer");
|
||||
}
|
||||
|
||||
function backToBoard(){
|
||||
emit("backToBoard");
|
||||
}
|
||||
|
||||
function specificQuestionLayerSelected( index ){
|
||||
emit("specificQuestionLayerSelected", index );
|
||||
}
|
||||
|
||||
function playAudio( cIndex, bEIndex, qIndex ){
|
||||
emit("playAudio", cIndex, bEIndex, qIndex );
|
||||
}
|
||||
|
||||
function stopAudio(){
|
||||
emit( "stopAudio" );
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container-fluid h-100 d-flex justify-content-center align-items-center">
|
||||
<div v-show="showingQuestion" class="w-100 h-100">
|
||||
<QuestionView
|
||||
:cIndex="props.cIndex"
|
||||
:bEIndex="props.bEIndex"
|
||||
:questions="boardEntry.questions"
|
||||
:board="props.board"
|
||||
:isHost="props.isHost"
|
||||
@specificQuestionLayerSelected="specificQuestionLayerSelected"
|
||||
@playAudio="playAudio"
|
||||
@stopAudio="stopAudio"
|
||||
/>
|
||||
</div>
|
||||
<div v-show="props.isAnswerRevealed">
|
||||
<AnswerView
|
||||
:answer="boardEntry.answer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="position-absolute bottom-0 end-0 mb-2">
|
||||
<span class="fs-2 fw-bold">
|
||||
{{ boardEntry.points }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="position-absolute top-0 start-0 mt-2">
|
||||
<span class="fs-2 fw-bold">
|
||||
{{ props.board.categories[props.cIndex].categoryName }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="props.isHost" class="position-absolute top-0 start-50 translate-middle-x mt-2">
|
||||
<button class="btn btn-sm btn-outline-pink-accent-primary" @click="backToBoard">
|
||||
Back to Board
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="props.isHost" class="position-absolute top-0 end-0 mt-2">
|
||||
<div class="me-3 d-inline-block">
|
||||
<template v-if="!props.isQuestionRevealed">
|
||||
<button class="btn btn-sm btn-outline-pink-accent-primary" @click="showQuestion">
|
||||
Show Question
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="btn btn-sm btn-outline-pink-accent-primary" @click="hideQuestion">
|
||||
Hide Question
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
<div class="d-inline-block">
|
||||
<template v-if="!props.isAnswerRevealed">
|
||||
<button class="btn btn-sm btn-outline-pink-accent-primary" @click="showAnswer">
|
||||
Show Answer
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="btn btn-sm btn-outline-pink-accent-primary" @click="hideAnswer">
|
||||
Hide Answer
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
import { useUserStore } from "@/stores/UserStore";
|
||||
import BoardListCard from "@/components/blocks/BoardListCard.vue";
|
||||
|
||||
const props = defineProps({
|
||||
selectedBoard: {
|
||||
type: String,
|
||||
default: "",
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(["boardSelected"]);
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userBoards = ref([]);
|
||||
let boardRequestDone = ref(false);
|
||||
|
||||
userStore.userService.getUserBoards()
|
||||
.then( ( response ) => {
|
||||
if( !response.data.success ){
|
||||
console.error( response.data.message );
|
||||
return;
|
||||
}
|
||||
userBoards.value = response.data.boards;
|
||||
})
|
||||
.catch( ( err ) => {
|
||||
console.error( err );
|
||||
})
|
||||
.finally( () => {
|
||||
boardRequestDone.value = true;
|
||||
});
|
||||
|
||||
function boardSelected( id ){
|
||||
emit( "boardSelected", id );
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex h-100 justify-content-start align-items-start w-100 flex-column">
|
||||
<h2>Your Boards</h2>
|
||||
<template v-if="!boardRequestDone">
|
||||
Loading...
|
||||
</template>
|
||||
<template v-else-if="userBoards.length === 0">
|
||||
<div class="d-flex align-items-center min-card-height-board-list">
|
||||
No Boards
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="row">
|
||||
<template v-for="board in userBoards" :key="board.name">
|
||||
<div class="col-auto">
|
||||
<BoardListCard
|
||||
:boardName="board.name"
|
||||
:isSelected="board._id === props.selectedBoard"
|
||||
@boardCardClicked="boardSelected(board._id)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.min-card-height-board-list{
|
||||
min-height: 9em;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script setup>
|
||||
import CategoryHeaderCard from '@/components/blocks/CategoryHeaderCard.vue';
|
||||
import BoardEntryCard from '@/components/blocks/BoardEntryCard.vue';
|
||||
|
||||
const props = defineProps({
|
||||
board: Object,
|
||||
isHost: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isBeingPlayed: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["boardEntryClicked", "questionAnswered", "questionAnsweredRevert" ])
|
||||
|
||||
function boardEntryCardClicked( categoryIndex, boardEntryIndex ){
|
||||
if( props.isHost ){
|
||||
emit("boardEntryClicked", categoryIndex, boardEntryIndex);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container-fluid h-100 d-flex justify-content-center align-items-center">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center mt-3 h-100 w-100">
|
||||
<h2>
|
||||
{{ board.boardName }}
|
||||
</h2>
|
||||
|
||||
<div class="row w-100 h-100">
|
||||
<template v-for="( category, categoryIndex ) of board.categories" :key="category.name">
|
||||
<div class="col">
|
||||
<div class="d-flex flex-column h-100">
|
||||
<CategoryHeaderCard
|
||||
:categoryName="category.categoryName"
|
||||
:categoryDescription="category.categoryDescription"
|
||||
/>
|
||||
<template v-for="( boardEntry, boardEntryIndex ) of category.boardEntries" :key="boardEntryIndex">
|
||||
<BoardEntryCard
|
||||
:isHost="isHost"
|
||||
:isBeingPlayed="props.isBeingPlayed"
|
||||
:boardEntry="boardEntry"
|
||||
@boardEntryCardClicked="boardEntryCardClicked( categoryIndex, boardEntryIndex )"
|
||||
@boardEntryAnsweredClicked="emit( 'questionAnswered', categoryIndex, boardEntryIndex )"
|
||||
@boardEntryAnsweredRevertClicked="emit( 'questionAnsweredRevert', categoryIndex, boardEntryIndex )"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
import { useGameCreationStore } from '@/stores/GameCreationStore';
|
||||
import CustomTextSaveOrCancel from '@/components/blocks/CustomTextSaveOrCancel.vue';
|
||||
import { onMounted, watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
categoryIndex: Number,
|
||||
})
|
||||
|
||||
const gameCreationStore = useGameCreationStore();
|
||||
let buttonDivHeight = ref("3rem");
|
||||
let navbarHeight = ref("4rem");
|
||||
|
||||
|
||||
onMounted( () => {
|
||||
buttonDivHeight.value = document.getElementById("save-cancel-button-div").offsetHeight;
|
||||
navbarHeight.value = document.getElementById("board-entry-edit-view-container").offsetHeight;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="board-entry-edit-view-container" class="container-fluid h-100 px-0">
|
||||
<div class="d-flex flex-column px-3" :style="[{'height': 'calc( 100vh - ' + (navbarHeight - buttonDivHeight) + 'px)' }]">
|
||||
<div class="my-3 pb-3">
|
||||
<h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Category</h3>
|
||||
<div>
|
||||
<label class="form-label fs-4" for="category-name-input">Catogry Name</label>
|
||||
<input v-model="gameCreationStore.board.categories[props.categoryIndex].categoryName" class="form-control bg-dark-blue" type="text" name="category-name-input" id="category-name-input">
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label fs-4 mt-3" for="category-description-input">Category Description</label>
|
||||
<textarea v-model="gameCreationStore.board.categories[props.categoryIndex].categoryDescription" class="form-control bg-dark-blue" type="text" rows="3" name="category-description-input" id="category-description-input" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import QuestionCard from '@/components/blocks/QuestionCard.vue';
|
||||
import { useGameCreationStore } from '@/stores/GameCreationStore';
|
||||
|
||||
const props = defineProps({
|
||||
isEditable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
selectedEntryIndex: Number,
|
||||
entries: Object,
|
||||
})
|
||||
|
||||
const emit = defineEmits(["boardEntrySelected", "addNewBoardEntry", "deleteBoardEntry"]);
|
||||
|
||||
function addBoardEntryClicked(_event) {
|
||||
emit("addNewBoardEntry");
|
||||
}
|
||||
function changeSelectedBoardEntry( boardEntryIndex ) {
|
||||
emit("boardEntrySelected", boardEntryIndex );
|
||||
}
|
||||
function deleteBoardEntry( boardEntryIndex ){
|
||||
emit("deleteBoardEntry", boardEntryIndex );
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex overflow-auto">
|
||||
<div class="d-flex">
|
||||
<template v-for="( boardEntry, boardEntryIndex ) in props.entries" :key="boardEntryIndex">
|
||||
<QuestionCard
|
||||
:boardEntry="boardEntry"
|
||||
:isSelected="selectedEntryIndex === boardEntryIndex"
|
||||
@questionCardClicked="changeSelectedBoardEntry( boardEntryIndex )"
|
||||
@questionCardDeleteClicked="deleteBoardEntry( boardEntryIndex )"
|
||||
/>
|
||||
</template>
|
||||
<div v-if="isEditable" class="card bg-primary m-3 border-1 border-pink-accent-primary-hover question-card pointer" @click="addBoardEntryClicked">
|
||||
<div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
|
||||
<h4>
|
||||
Add Question
|
||||
</h4>
|
||||
<font-awesome-icon class="text-pink-accent-primary" icon="fa-solid fa-plus-square" size="3x"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.question-card {
|
||||
height: 9rem;
|
||||
width: 16rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,153 @@
|
||||
<script setup>
|
||||
import { nextTick, onMounted, ref, watch } from 'vue';
|
||||
|
||||
import BoardView from '@/components/views/BoardView.vue';
|
||||
import BoardEntryView from '@/components/views/BoardEntryView.vue';
|
||||
|
||||
const props = defineProps({
|
||||
objToDisplay: String,
|
||||
board: Object,
|
||||
cIndex: Number,
|
||||
bEIndex: Number,
|
||||
showingBottomView: Boolean,
|
||||
isHost: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isQuestionRevealed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isAnswerRevealed: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
anyPlayerIsAnswering: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isBeingPlayed: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(["boardEntryClicked", "specificQuestionLayerSelected", "showBoard", "playerBuzzered", "playAudio", "stopAudio",
|
||||
"showQuestion", "showAnswer", "hideQuestion", "hideAnswer", "questionAnswered", "questionAnsweredRevert" ]);
|
||||
|
||||
let navbarHeight = document.getElementById("navbar").offsetHeight;
|
||||
let bottomViewHeight = ref("10rem");
|
||||
|
||||
function boardEntryClicked( categoryIndex, boardEntryIndex ){
|
||||
emit("boardEntryClicked", categoryIndex, boardEntryIndex );
|
||||
}
|
||||
|
||||
function specificQuestionLayerSelected( qIndex ){
|
||||
emit("specificQuestionLayerSelected", qIndex );
|
||||
}
|
||||
|
||||
function showBoard(){
|
||||
emit("showBoard");
|
||||
}
|
||||
|
||||
function playerBuzzered( data ){
|
||||
emit("playerBuzzered", data );
|
||||
}
|
||||
|
||||
function playAudio( cIndex, bEIndex, qIndex ){
|
||||
emit( "playAudio", cIndex, bEIndex, qIndex );
|
||||
}
|
||||
|
||||
function stopAudio(){
|
||||
emit( "stopAudio" );
|
||||
}
|
||||
|
||||
function showQuestion(){
|
||||
emit( "showQuestion" );
|
||||
}
|
||||
function showAnswer(){
|
||||
emit( "showAnswer" );
|
||||
}
|
||||
function hideQuestion(){
|
||||
emit( "hideQuestion" );
|
||||
}
|
||||
function hideAnswer(){
|
||||
emit( "hideAnswer" );
|
||||
}
|
||||
|
||||
function questionAnswered( cIndex, bEIndex ){
|
||||
emit( "questionAnswered", cIndex, bEIndex );
|
||||
}
|
||||
function questionAnsweredRevert( cIndex, bEIndex ){
|
||||
emit( "questionAnsweredRevert", cIndex, bEIndex );
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
let bottomViewElement = document.getElementById("bottom-view");
|
||||
if( bottomViewElement ){
|
||||
bottomViewHeight.value = document.getElementById("bottom-view").offsetHeight;
|
||||
} else {
|
||||
bottomViewHeight.value = 0;
|
||||
}
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.showingBottomView,
|
||||
( newVal, oldVal ) => {
|
||||
if( newVal ){
|
||||
nextTick( () => {
|
||||
let bottomViewElement = document.getElementById("bottom-view");
|
||||
if( bottomViewElement ){
|
||||
bottomViewHeight.value = document.getElementById("bottom-view").offsetHeight;
|
||||
} else {
|
||||
bottomViewHeight.value = 0;
|
||||
}
|
||||
})
|
||||
} else {
|
||||
bottomViewHeight.value = 0;
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container-fluid overflow-auto" :style="[ {'height': 'calc(100vh - (' + navbarHeight + 'px + ' + bottomViewHeight + 'px ) )'}]">
|
||||
<div class="ratio ratio-16x9">
|
||||
<div v-if="objToDisplay === 'Board'">
|
||||
<BoardView
|
||||
:board="props.board"
|
||||
:isHost="props.isHost"
|
||||
:isBeingPlayed="props.isBeingPlayed"
|
||||
@boardEntryClicked="boardEntryClicked"
|
||||
@questionAnswered="questionAnswered"
|
||||
@questionAnsweredRevert="questionAnsweredRevert"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<BoardEntryView
|
||||
:cIndex="props.cIndex"
|
||||
:bEIndex="props.bEIndex"
|
||||
:board="props.board"
|
||||
:isHost="props.isHost"
|
||||
:isQuestionRevealed="props.isQuestionRevealed"
|
||||
:isAnswerRevealed="props.isAnswerRevealed"
|
||||
:anyPlayerIsAnswering="props.anyPlayerIsAnswering"
|
||||
:isBeingPlayed="props.isBeingPlayed"
|
||||
@showQuestion="showQuestion"
|
||||
@showAnswer="showAnswer"
|
||||
@hideQuestion="hideQuestion"
|
||||
@hideAnswer="hideAnswer"
|
||||
@backToBoard="showBoard"
|
||||
@specificQuestionLayerSelected="specificQuestionLayerSelected"
|
||||
@playAudio="playAudio"
|
||||
@stopAudio="stopAudio"
|
||||
@playerBuzzered="playerBuzzered"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<script setup>
|
||||
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
hasTitle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "Info",
|
||||
},
|
||||
modalText: {
|
||||
type: String,
|
||||
default: "Are you sure?",
|
||||
},
|
||||
buttonList: {
|
||||
type: Array,
|
||||
default(){
|
||||
return [
|
||||
{
|
||||
text: "Ok",
|
||||
emitsEvent: "b1Clicked",
|
||||
bgColorClass: "btn-pink-accent-primary",
|
||||
},
|
||||
{
|
||||
text: "Cancel",
|
||||
emitsEvent: "b2Clicked",
|
||||
bgColorClass: "btn-outline-danger",
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["buttonClicked"]);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="modal fade" :id="props.id" tabindex="-1" aria-labelledby="twoBtnModalTitle" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div v-if="props.hasTitle" class="modal-header">
|
||||
<h1 class="modal-title fs-5" :id="'twoBtnModalTitle'+props.title">{{ props.title }}</h1>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{{ modalText }}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="d-flex" :class="[ { 'flex-column': props.buttonList.length > 2 } ]">
|
||||
<template v-for="(button, buttonIndex) of props.buttonList" :key="button.text">
|
||||
<button type="button" class="btn ms-3" :class="[ button.bgColorClass, { 'w-100': props.buttonList.length > 2 } ]" data-bs-dismiss="modal" @click="emit('buttonClicked', buttonIndex)">{{ button.text }}</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,63 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
objToDisplay: String,
|
||||
board: Object,
|
||||
cIndex: Number,
|
||||
bEIndex: Number,
|
||||
acceptAnswers: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits( "lockQuestion", "revealPlayerAnswers" );
|
||||
|
||||
let boardEntry = computed( () => {
|
||||
if( props.objToDisplay === "BoardEntry" ){
|
||||
return props.board.categories[props.cIndex].boardEntries[props.bEIndex];
|
||||
}
|
||||
return undefined
|
||||
})
|
||||
|
||||
function lockQuestion(){
|
||||
emit("lockQuestion");
|
||||
}
|
||||
|
||||
function revealPlayerAnswers(){
|
||||
emit("revealPlayerAnswers");
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="boardEntry !== undefined"
|
||||
class="d-flex flex-column justify-content-center border-top border-pink-accent-primary interaction-size"
|
||||
>
|
||||
<div class="row mx-2">
|
||||
<div class="col-12 text-center text-truncate">
|
||||
Answer: {{ boardEntry.answer.answerText }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mx-2 mt-2" v-show="['freeTextInteraction'].includes( boardEntry.answer.answerInteraction )">
|
||||
<div class="col-xl-6 col-12">
|
||||
<button class="btn btn-pink-accent-primary w-100 h-100" @click="lockQuestion">Lock Question</button>
|
||||
</div>
|
||||
<div class="col-xl-6 col-12">
|
||||
<button class="btn btn-pink-accent-primary w-100 h-100" @click="revealPlayerAnswers" :disabled="props.acceptAnswers">Reveal All Answers</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.interaction-size{
|
||||
height: 6rem;
|
||||
}
|
||||
.no-resize{
|
||||
resize: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
objToDisplay: String,
|
||||
board: Object,
|
||||
cIndex: Number,
|
||||
bEIndex: Number,
|
||||
playerIsAnswering: Boolean,
|
||||
acceptAnswers: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(["buzzerPressed", "answerTextUpdated"]);
|
||||
|
||||
let userText = ref("");
|
||||
|
||||
|
||||
let boardEntry = computed( () => {
|
||||
if( props.objToDisplay === "BoardEntry" ){
|
||||
return props.board.categories[props.cIndex].boardEntries[props.bEIndex];
|
||||
}
|
||||
return undefined
|
||||
})
|
||||
|
||||
function buzzeredTheBuzzBuzz(){
|
||||
emit("buzzerPressed");
|
||||
}
|
||||
function answerTextUpdated(){
|
||||
emit("answerTextUpdated", userText.value);
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="boardEntry !== undefined" class="d-flex justify-content-center align-items-center border-top border-pink-accent-primary interaction-size">
|
||||
<div
|
||||
v-if="boardEntry.answer.answerInteraction === 'buzzerInteraction'"
|
||||
class="buzzer d-flex justify-content-center align-items-center rounded-circle shadow m-2"
|
||||
:class="[ { 'buzzer-answering': props.playerIsAnswering }, { 'bg-gray': !props.acceptAnswers && !props.playerIsAnswering } ]"
|
||||
@click="buzzeredTheBuzzBuzz"
|
||||
>
|
||||
Buzzer
|
||||
</div>
|
||||
<div v-else class="d-flex justify-content-center align-items-center w-100 h-100 m-3">
|
||||
<div class="w-100">
|
||||
<label for="textarea-player-input" class="form-label">Answer:</label>
|
||||
<textarea
|
||||
v-model="userText"
|
||||
type="text"
|
||||
name="textarea-player-input"
|
||||
class="form-control no-resize"
|
||||
:class="[ { 'border-pink-accent-primary': props.acceptAnswers }, { 'border-0': !props.acceptAnswers }, ]"
|
||||
rows="4"
|
||||
@input="answerTextUpdated"
|
||||
:disabled="!props.acceptAnswers"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.interaction-size{
|
||||
height: 12rem;
|
||||
}
|
||||
.no-resize{
|
||||
resize: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
import PlayerListEntry from "@/components/blocks/PlayerListEntry.vue";
|
||||
|
||||
const props = defineProps({
|
||||
players: Object,
|
||||
isHost: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
questionPoints: Number,
|
||||
answerInteraction: {
|
||||
type: String,
|
||||
default: "buzzerInteraction"
|
||||
},
|
||||
acceptAnswers: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits( "manualPointsAdjustment", "answerRuled", "revealPlayerAnswers" );
|
||||
|
||||
let buttonDivHeight = ref("3rem");
|
||||
let navbarHeight = ref("4rem");
|
||||
let manualAdjustmentValue = ref( 100 );
|
||||
|
||||
function manualPointsAdjustment( playerId, playerName, arePointsAdded ) {
|
||||
let points = ( arePointsAdded ? manualAdjustmentValue.value : -1 * manualAdjustmentValue.value );
|
||||
emit("manualPointsAdjustment", playerId, playerName, points );
|
||||
}
|
||||
|
||||
function answerRuled( playerId, playerName, isAnswerCorrect ){
|
||||
let points = ( isAnswerCorrect ? props.questionPoints : 0 );
|
||||
let reopenQuestion;
|
||||
if( ["buzzerInteraction"].includes( props.answerInteraction ) ){
|
||||
reopenQuestion = !isAnswerCorrect;
|
||||
} else {
|
||||
reopenQuestion = false;
|
||||
}
|
||||
emit("answerRuled", playerId, playerName, points, reopenQuestion );
|
||||
}
|
||||
|
||||
function revealPlayerAnswer( playerId ){
|
||||
emit("revealPlayerAnswers", [playerId] );
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="board-entry-edit-view-container">
|
||||
<div class="d-flex flex-column px-3" :style="[{'height': 'calc( 100vh - ' + (navbarHeight - buttonDivHeight) + 'px)' }]">
|
||||
<div class="my-3">
|
||||
<h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Players</h3>
|
||||
<div v-if="props.isHost" class="row mb-3">
|
||||
<div class="col">
|
||||
<label for="manual-adjustment-value">Manual Adjustment Value</label>
|
||||
<input v-model="manualAdjustmentValue" id="manual-adjustment-value" type="text" name="manual-adjustment-value" class="form-control form-control-sm border-pink-accent-primary">
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="(player) in props.players" :key="player._id">
|
||||
<PlayerListEntry
|
||||
:player="player"
|
||||
:isHost="props.isHost"
|
||||
:acceptAnswers="props.acceptAnswers"
|
||||
@manualPointsAdjustment="( arePointsAdded ) => manualPointsAdjustment( player._id, player.name, arePointsAdded )"
|
||||
@answerRuled="( isAnswerCorrect ) => answerRuled( player._id, player.name, isAnswerCorrect )"
|
||||
@revealPlayerAnswer="revealPlayerAnswer"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,121 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, onMounted, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useGameCreationStore } from "@/stores/GameCreationStore";
|
||||
|
||||
const props = defineProps({
|
||||
questions: Array,
|
||||
board: Object,
|
||||
cIndex: Number,
|
||||
bEIndex: Number,
|
||||
isHost: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
});
|
||||
|
||||
let emit = defineEmits(["specificQuestionLayerSelected", "playAudio", "stopAudio"])
|
||||
|
||||
let selectedIndex = ref(0);
|
||||
const imageRef = ref([]);
|
||||
let route = useRoute();
|
||||
let gameCreationStore = useGameCreationStore();
|
||||
|
||||
let protocol = ('https:' == document.location.protocol ? 'https://' : 'http://');
|
||||
let hostname = window.location.hostname;
|
||||
if( window.location.hostname.includes("localhost" ) ){
|
||||
hostname += ':3000';
|
||||
}
|
||||
|
||||
const API_URL = `${protocol}${hostname}/api`;
|
||||
|
||||
|
||||
let getImageInGameCreationStore = computed( () => {
|
||||
return gameCreationStore.images.find( imageEntry => imageEntry.cIndex === props.cIndex && imageEntry.bEIndex === props.bEIndex && imageEntry.qIndex === selectedIndex.value );
|
||||
})
|
||||
|
||||
function specificLayerSelected( index ){
|
||||
selectedIndex.value = index;
|
||||
nextTick( () => {
|
||||
if( imageRef.value[0] ){
|
||||
imageRef.value[0].src = API_URL + '/game/file/' + props.questions[selectedIndex.value].filename;
|
||||
}
|
||||
});
|
||||
emit("specificQuestionLayerSelected", index );
|
||||
}
|
||||
|
||||
function playAudio(){
|
||||
emit("playAudio", props.cIndex, props.bEIndex, selectedIndex.value );
|
||||
}
|
||||
|
||||
|
||||
function stopAudio(){
|
||||
emit("stopAudio");
|
||||
}
|
||||
|
||||
|
||||
onMounted( () => {
|
||||
if( imageRef.value[0] ){
|
||||
imageRef.value[0].src = API_URL + '/game/file/' + props.questions[selectedIndex.value].filename;
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.bEIndex,
|
||||
( _newVal, _oldVal ) => {
|
||||
selectedIndex.value = 0;
|
||||
nextTick( () => {
|
||||
if( imageRef.value[0] ){
|
||||
imageRef.value[0].src = API_URL + '/game/file/' + props.questions[selectedIndex.value].filename;
|
||||
}
|
||||
});
|
||||
}
|
||||
)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-for="(question, questionIndex) in props.questions" :key="questionIndex">
|
||||
<div v-if="selectedIndex === questionIndex" class="d-flex flex-column justify-content-center align-items-center h-100 w-100">
|
||||
<h1 class="text-center" :class="[{ 'white-space-show-nl': question.questionType === 'multilineQuestion'}]">
|
||||
{{ question.questionText }}
|
||||
</h1>
|
||||
<template v-if="question.questionType === 'imageQuestion'">
|
||||
<template v-if="route.path.includes('create') && getImageInGameCreationStore !== undefined">
|
||||
<div class="h-75 w-100 text-center">
|
||||
<img class="h-100" :src="getImageInGameCreationStore.url" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="question.filename">
|
||||
<div class="h-75 w-100 text-center">
|
||||
<img ref="imageRef" class="h-100" src="" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="question.questionType === 'audioQuestion'">
|
||||
<div class="w-50 d-flex flex-column align-items-center justify-content-between">
|
||||
<img class="w-100" src="../../assets/images/soundform.svg" alt="Audio waveform">
|
||||
<div class="d-flex">
|
||||
<button v-if="props.isHost" class="btn btn-pink-accent-primary me-3" @click="playAudio">Play</button>
|
||||
<button v-if="props.isHost" class="btn btn-pink-accent-primary" @click="stopAudio">Stop</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="props.questions.length > 1 && props.isHost" class="d-flex justify-content-start align-items-center position-absolute bottom-0 start-0 ms-3 mb-3">
|
||||
<template v-for="(question, questionIndex) in props.questions" :key="questionIndex">
|
||||
<div>
|
||||
<button class="btn btn-sm m-1 py-1" :class="[{'btn-pink-accent-primary': selectedIndex === questionIndex }, {'btn-outline-pink-accent-primary': selectedIndex !== questionIndex }]" :disabled="selectedIndex === questionIndex" @click="specificLayerSelected( questionIndex )">
|
||||
{{ questionIndex + 1 }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.white-space-show-nl{
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
// mouse.js
|
||||
import { watch } from 'vue'
|
||||
|
||||
import { useUserStore } from '@/stores/UserStore';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
export function useLoginCheck() {
|
||||
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
|
||||
watch(
|
||||
() => userStore.loggedIn,
|
||||
( newVal ) => {
|
||||
if( newVal === false ){
|
||||
router.push( "/" );
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import { createApp, markRaw } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
|
||||
import { FontAwesomeIcon, FontAwesomeLayers } from "@fortawesome/vue-fontawesome";
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import { faDragon, faRightToBracket, faUsers, faUserPlus, faSpinner, faPlusSquare, faBorderAll, faPen, faTrash, faAngleDown, faAngleUp,
|
||||
faPlus, faMinus, faAngleRight, faSquare, faPlay, faCircleExclamation, faSquareCheck, faSquareMinus } from "@fortawesome/free-solid-svg-icons";
|
||||
import { faCircleUser, faSquarePlus } from "@fortawesome/free-regular-svg-icons";
|
||||
|
||||
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
|
||||
// Import our custom CSS
|
||||
import "./assets/scss/styles.scss";
|
||||
|
||||
// Import all of Bootstrap's JS
|
||||
import "bootstrap";
|
||||
|
||||
library.add({
|
||||
faDragon,
|
||||
faSquarePlus,
|
||||
faRightToBracket,
|
||||
faCircleUser,
|
||||
faUsers,
|
||||
faUserPlus,
|
||||
faSpinner,
|
||||
faPlusSquare,
|
||||
faBorderAll,
|
||||
faPen,
|
||||
faTrash,
|
||||
faAngleDown,
|
||||
faAngleUp,
|
||||
faPlus,
|
||||
faMinus,
|
||||
faAngleRight,
|
||||
faSquare,
|
||||
faSquareCheck,
|
||||
faSquareMinus,
|
||||
faPlay,
|
||||
faCircleExclamation,
|
||||
});
|
||||
|
||||
|
||||
const pinia = createPinia();
|
||||
|
||||
pinia.use( ( { store } ) => {
|
||||
store.router = markRaw(router);
|
||||
});
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.component('font-awesome-icon', FontAwesomeIcon);
|
||||
app.component('font-awesome-layers', FontAwesomeLayers);
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
|
||||
app.directive('focus', {
|
||||
mounted: ( element ) => element.focus()
|
||||
})
|
||||
|
||||
app.mount("#app");
|
||||
@@ -0,0 +1,18 @@
|
||||
import { ANSWER_TYPES } from "../services/GameService";
|
||||
|
||||
export default class Answer{
|
||||
constructor( text, answerTypeOpt = "textAnswer", answerInteraction = "buzzerInteraction" ){
|
||||
this.answerText = text;
|
||||
this.answerType = answerTypeOpt;
|
||||
this.answerInteraction = answerInteraction;
|
||||
}
|
||||
|
||||
// get answerText(){
|
||||
// return this.answerText;
|
||||
// }
|
||||
|
||||
// get answerType(){
|
||||
// return this.answerType;
|
||||
// }
|
||||
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export default class Board{
|
||||
|
||||
constructor( id, name, categories ){
|
||||
this.boardId = id;
|
||||
this.boardName = name;
|
||||
this.categories = categories;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
export default class BoardEntry{
|
||||
|
||||
constructor( questionArray, answer, points ){
|
||||
this.questions = questionArray;
|
||||
this.answer = answer;
|
||||
this.points = points;
|
||||
this.isAnswered = false;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
export default class Category{
|
||||
constructor( name, description, entries ){
|
||||
this.categoryName = name;
|
||||
this.categoryDescription = description;
|
||||
this.boardEntries = entries;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { QUESTION_TYPES } from "@/services/GameService";
|
||||
|
||||
export default class Question{
|
||||
constructor( text, questionTypeOpt = QUESTION_TYPES.textQuestion ){
|
||||
this.questionText = text;
|
||||
this.questionType = questionTypeOpt;
|
||||
}
|
||||
|
||||
// get questionText(){
|
||||
// return this.questionText;
|
||||
// }
|
||||
|
||||
// set questionText( newQuestionText ){
|
||||
// this.questionText = newQuestionText;
|
||||
// }
|
||||
|
||||
// get questionType(){
|
||||
// return this.questionType;
|
||||
// }
|
||||
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
import { createRouter, createWebHistory } from "vue-router";
|
||||
import { useUserStore } from "@/stores/UserStore";
|
||||
import { useGameStore } from "@/stores/GameStore";
|
||||
import { GAME_STATES } from "@/services/GameService";
|
||||
import Home from "@/components/pages/Home.vue";
|
||||
import Lobby from "@/components/pages/Lobby.vue";
|
||||
import Join from "@/components/pages/Join.vue";
|
||||
import Game from "@/components/pages/Game.vue";
|
||||
import Create from "@/components/pages/Create.vue";
|
||||
import Login from "@/components/pages/Login.vue";
|
||||
import Signup from "@/components/pages/Signup.vue";
|
||||
import About from "@/components/pages/About.vue";
|
||||
import Profile from "@/components/pages/Profile.vue";
|
||||
|
||||
const TEST_WOUT_WEBSOCKET = false;
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: "/",
|
||||
name: "home",
|
||||
component: Home,
|
||||
meta: { requiresAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/about",
|
||||
name: "about",
|
||||
component: About,
|
||||
meta: { requiresAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/lobby/:gameId",
|
||||
name: "gameLobby",
|
||||
component: Lobby,
|
||||
meta: { requiresAuth: false },
|
||||
beforeEnter: async (to, from)=>{
|
||||
const gameStore = useGameStore();
|
||||
if( gameStore.websocketConnection instanceof WebSocket ){
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/join",
|
||||
name: "joinGame",
|
||||
component: Join,
|
||||
meta: { requiresAuth: false },
|
||||
beforeEnter: async (to, from)=>{
|
||||
const gameStore = useGameStore();
|
||||
if( gameStore.gameState === GAME_STATES.INIT ){
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/join/:gameId",
|
||||
name: "joinExistingGame",
|
||||
component: Join,
|
||||
meta: { requiresAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/game/:gameId",
|
||||
name: "gameWithGameId",
|
||||
component: Game,
|
||||
meta: { requiresAuth: false },
|
||||
beforeEnter: async (to, from)=>{
|
||||
console.debug("about to enter /game/:gameId");
|
||||
if( TEST_WOUT_WEBSOCKET ){
|
||||
return true;
|
||||
}
|
||||
const gameStore = useGameStore();
|
||||
if( gameStore.websocketConnection instanceof WebSocket ){
|
||||
return true;
|
||||
} else {
|
||||
return { name: "joinExistingGame", params: { gameId: to.params.gameId } };
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/create/:boardId",
|
||||
name: "createBoardWithParams",
|
||||
component: Create,
|
||||
meta: { requiresAuth: true },
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: "/create",
|
||||
name: "createBoard",
|
||||
component: Create,
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
name: "login",
|
||||
component: Login,
|
||||
meta: { requiresAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/signup",
|
||||
name: "signup",
|
||||
component: Signup,
|
||||
meta: { requiresAuth: false },
|
||||
},
|
||||
{
|
||||
path: "/profile",
|
||||
name: "profile",
|
||||
component: Profile,
|
||||
meta: { requiresAuth: true },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
router.beforeEach( async ( to, from ) => {
|
||||
const canAccess = await canUserAccess(to);
|
||||
if (!canAccess) return '/login';
|
||||
});
|
||||
|
||||
async function canUserAccess( to ){
|
||||
if( to.meta.requiresAuth && !["login", "signup"].includes( to.name ) ){
|
||||
const userStore = useUserStore();
|
||||
try{
|
||||
await userStore.initialUserPromise;
|
||||
return userStore.loggedIn;
|
||||
} catch (err){
|
||||
return userStore.loggedIn;
|
||||
}
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
export default router;
|
||||
@@ -0,0 +1,85 @@
|
||||
import axios from "axios";
|
||||
|
||||
let protocol = ('https:' == document.location.protocol ? 'https://' : 'http://');
|
||||
let hostname = window.location.hostname;
|
||||
if( window.location.hostname.includes("localhost" ) ){
|
||||
hostname += ':3000';
|
||||
}
|
||||
|
||||
const API_URL = `${protocol}${hostname}/api`;
|
||||
|
||||
export default class GameService{
|
||||
|
||||
checkExistingGame( gameId ){
|
||||
return axios.get(
|
||||
API_URL + `/game/check/${gameId}`,
|
||||
{
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type":"application/json",
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
setupNewHostGame(){
|
||||
return axios.post(
|
||||
API_URL + "/game/host",
|
||||
{},
|
||||
{
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type":"application/json",
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
setupJoinGame( code ){
|
||||
return axios.get(
|
||||
API_URL + "/game/join/setup/" + code,
|
||||
{
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type":"application/json",
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
getBoardToGame( gameId ){
|
||||
return axios.get(
|
||||
API_URL + `/game/${gameId}/board`,
|
||||
{
|
||||
withCredentials: true,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export const GAME_STATES = Object.freeze({
|
||||
none: "gameUndefined",
|
||||
init: "initializing",
|
||||
joining: "joining",
|
||||
waiting: "waiting",
|
||||
inProgress: "inProgress",
|
||||
ended: "ended",
|
||||
});
|
||||
|
||||
export const QUESTION_TYPES = Object.freeze({
|
||||
textQuestion: "Simple question with text",
|
||||
multilineQuestion: "Question with multiline text",
|
||||
imageQuestion: "Question with text and image(s)",
|
||||
audioQuestion: "Question with text and audio",
|
||||
})
|
||||
|
||||
export const ANSWER_TYPES = Object.freeze({
|
||||
textAnswer: "Answer with text",
|
||||
imageAnswer: "Answer with text and image",
|
||||
})
|
||||
|
||||
export const ANSWER_INTERACTION = Object.freeze({
|
||||
buzzerInteraction: "Buzzer",
|
||||
freeTextInteraction: "Free Text",
|
||||
})
|
||||
@@ -0,0 +1,104 @@
|
||||
import axios from "axios";
|
||||
|
||||
let protocol = ('https:' == document.location.protocol ? 'https://' : 'http://');
|
||||
let hostname = window.location.hostname;
|
||||
if( window.location.hostname.includes("localhost" ) ){
|
||||
hostname += ':3000';
|
||||
}
|
||||
|
||||
const API_URL = `${protocol}${hostname}/api`;
|
||||
|
||||
export default class UserService{
|
||||
|
||||
signupUser(username, password){
|
||||
return axios.post(
|
||||
API_URL + "/user/signup",
|
||||
{
|
||||
username: username,
|
||||
password: password,
|
||||
},
|
||||
{
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type":"application/json",
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
loginUser(username, password){
|
||||
return axios.post(
|
||||
API_URL + "/user/login",
|
||||
{
|
||||
username: username,
|
||||
password: password,
|
||||
},
|
||||
{
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type":"application/json",
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
getUserFromSession(){
|
||||
return axios.get(
|
||||
API_URL + "/user",
|
||||
{
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type":"application/json",
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
logoutUser(){
|
||||
return axios.post(
|
||||
API_URL + "/user/logout",
|
||||
{},
|
||||
{
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type":"application/json",
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
getUserBoards(){
|
||||
return axios.get(
|
||||
API_URL + "/user/boards",
|
||||
{
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type":"application/json",
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
saveUserBoard( boardFormData ){
|
||||
return axios.post(
|
||||
API_URL + "/user/boards/save",
|
||||
boardFormData,
|
||||
{
|
||||
withCredentials: true,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
getBoardFromUser( boardId ){
|
||||
return axios.get(
|
||||
API_URL + "/user/boards/" + boardId,
|
||||
{
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type":"application/json",
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import BoardEntry from "@/models/BoardEntry";
|
||||
import Category from "@/models/Category";
|
||||
import Board from "@/models/Board";
|
||||
|
||||
export function boardResponseToBoardModel( boardResponse ){
|
||||
let categories = [];
|
||||
|
||||
for( let cResponseIndex in boardResponse.categories ){
|
||||
let categoriesResponse = boardResponse.categories[cResponseIndex];
|
||||
let boardEntriesTmp = [];
|
||||
for( let bEResponseIndex in categoriesResponse.boardEntries ){
|
||||
let boardEntriesResponse = categoriesResponse.boardEntries[bEResponseIndex];
|
||||
boardEntriesTmp.push(
|
||||
new BoardEntry(
|
||||
boardEntriesResponse.questions,
|
||||
boardEntriesResponse.answer,
|
||||
boardEntriesResponse.points,
|
||||
)
|
||||
);
|
||||
}
|
||||
categories.push(
|
||||
new Category(
|
||||
categoriesResponse.categoryName,
|
||||
categoriesResponse.categoryDescription,
|
||||
boardEntriesTmp,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return new Board( boardResponse._id, boardResponse.name, categories );
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
import Question from "@/models/Question";
|
||||
import UserService from "@/services/UserService";
|
||||
import Answer from "@/models/Answer";
|
||||
import BoardEntry from "../models/BoardEntry";
|
||||
import Board from "@/models/Board";
|
||||
import Category from "@/models/Category";
|
||||
import { boardResponseToBoardModel } from "@/services/util";
|
||||
|
||||
const uService = new UserService();
|
||||
|
||||
|
||||
export const useGameCreationStore = defineStore('gameCreation', {
|
||||
state: ()=>{
|
||||
return {
|
||||
board: new Board( undefined, "New Board", []),
|
||||
images: [],
|
||||
audios: [],
|
||||
answerImages: [],
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
addNewCategory(){
|
||||
let newCategory = new Category("Category " + ( this.board.categories.length + 1 ), "", [] );
|
||||
this.board.categories.push( newCategory );
|
||||
},
|
||||
deleteCategoryOnIndex( index ){
|
||||
this.board.splice( index, 1 );
|
||||
},
|
||||
addEmptyBoardEntryToCategoryOnIndex( cIndex ){
|
||||
let question = new Question( "", "textQuestion" );
|
||||
let answer = new Answer( "", "textAnswer", "buzzerInteraction");
|
||||
let questions = []
|
||||
questions.push( question );
|
||||
this.board.categories[cIndex].boardEntries.push( new BoardEntry( questions, answer, 100, false ) );
|
||||
},
|
||||
addEmptyQuestionToBoardEntry( cIndex, boardEntryIndex, insertIndex ){
|
||||
let question = new Question( "", "textQuestion" );
|
||||
this.board.categories[cIndex].boardEntries[boardEntryIndex].questions.splice( insertIndex, 0, question );
|
||||
},
|
||||
removeQuestionFromBoardEntry( cIndex, boardEntryIndex, removeIndex ){
|
||||
if( this.board.categories[cIndex].boardEntries[boardEntryIndex].questions.length > 1 ){
|
||||
this.board.categories[cIndex].boardEntries[boardEntryIndex].questions.splice( removeIndex, 1 );
|
||||
}
|
||||
},
|
||||
addBoardEntryToCategoryOnIndex( boardEntry, cIndex ){
|
||||
this.board.categories[cIndex].boardEntries.push( boardEntry );
|
||||
},
|
||||
setBoardEntryOnCategoryOnIndex( index, boardEntry, cIndex ){
|
||||
if( index >= this.board.categories[cIndex].boardEntries.length || index < 0 ){
|
||||
return false;
|
||||
}
|
||||
this.board.categories[cIndex].boardEntries[index] = boardEntry;
|
||||
},
|
||||
deleteBoardEntry( cIndex, boardEntryIndex ){
|
||||
this.board.categories[cIndex].boardEntries.splice( boardEntryIndex, 1 );
|
||||
},
|
||||
addImageToQuestion( cIndex, bEIndex, questionIndex, file ){
|
||||
let fileObj = {
|
||||
cIndex: cIndex,
|
||||
bEIndex: bEIndex,
|
||||
qIndex: questionIndex,
|
||||
data: file,
|
||||
url: URL.createObjectURL( file ),
|
||||
};
|
||||
let imageIndex = this.images.findIndex( imageEntry => imageEntry.cIndex === cIndex && imageEntry.bEIndex === bEIndex && imageEntry.qIndex === questionIndex )
|
||||
if( imageIndex === -1 ){
|
||||
this.images.push( fileObj );
|
||||
} else {
|
||||
this.images.splice( imageIndex, 1, fileObj );
|
||||
}
|
||||
},
|
||||
addImageToAnswer( cIndex, bEIndex, file ){
|
||||
let fileObj = {
|
||||
cIndex: cIndex,
|
||||
bEIndex: bEIndex,
|
||||
data: file,
|
||||
url: URL.createObjectURL( file ),
|
||||
};
|
||||
let imageIndex = this.answerImages.findIndex( imageEntry => imageEntry.cIndex === cIndex && imageEntry.bEIndex === bEIndex );
|
||||
if( imageIndex === -1 ){
|
||||
this.answerImages.push( fileObj );
|
||||
} else {
|
||||
this.answerImages.splice( imageIndex, 1, fileObj );
|
||||
}
|
||||
},
|
||||
addAudioToQuestion( cIndex, bEIndex, questionIndex, file ){
|
||||
let fileObj = {
|
||||
cIndex: cIndex,
|
||||
bEIndex: bEIndex,
|
||||
qIndex: questionIndex,
|
||||
data: file,
|
||||
url: URL.createObjectURL( file ),
|
||||
};
|
||||
let audioIndex = this.audios.findIndex( imageEntry => imageEntry.cIndex === cIndex && imageEntry.bEIndex === bEIndex && imageEntry.qIndex === questionIndex )
|
||||
if( audioIndex === -1 ){
|
||||
|
||||
this.audios.push( fileObj );
|
||||
} else {
|
||||
this.audios.splice( audioIndex, 1, fileObj );
|
||||
}
|
||||
},
|
||||
setBoardWithConversion( board ){
|
||||
this.board = boardResponseToBoardModel( board );
|
||||
},
|
||||
|
||||
saveBoard(){
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
let saveBoard = JSON.parse( JSON.stringify( this.board ) );
|
||||
let formData = new FormData();
|
||||
formData.set("board", JSON.stringify( saveBoard ) );
|
||||
for( let imageData of this.images ){
|
||||
let formDataName = imageData.cIndex + ":" + imageData.bEIndex + ":" + imageData.qIndex;
|
||||
formData.append( "images", imageData.data, formDataName );
|
||||
}
|
||||
for( let imageData of this.answerImages ){
|
||||
let formDataName = imageData.cIndex + ":" + imageData.bEIndex + ":answer";
|
||||
formData.append( "images", imageData.data, formDataName );
|
||||
}
|
||||
for( let audioData of this.audios ){
|
||||
let formDataName = audioData.cIndex + ":" + audioData.bEIndex + ":" + audioData.qIndex;
|
||||
formData.append( "audio", audioData.data, formDataName );
|
||||
}
|
||||
uService.saveUserBoard( formData )
|
||||
.then( ( response ) => {
|
||||
if( !response.data.success ){
|
||||
throw new Error( response.data );
|
||||
} else {
|
||||
this.setBoardWithConversion( response.data.board );
|
||||
this.images = [];
|
||||
this.answerImages = [];
|
||||
this.audios = [];
|
||||
resolve();
|
||||
}
|
||||
})
|
||||
.catch( ( error ) => {
|
||||
reject( error );
|
||||
});
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
saveImagesOfBoard(){
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,300 @@
|
||||
import { defineStore } from "pinia";
|
||||
import GameService from "@/services/GameService";
|
||||
import { useUserStore } from "@/stores/UserStore";
|
||||
import { GAME_STATES } from "@/services/GameService";
|
||||
import Board from "@/models/Board";
|
||||
import { boardResponseToBoardModel } from "@/services/util";
|
||||
|
||||
const gService = new GameService();
|
||||
|
||||
export const useGameStore = defineStore('game', {
|
||||
state: ()=>{
|
||||
return {
|
||||
gameState: GAME_STATES.NONE,
|
||||
gameCode: "",
|
||||
playerName: "",
|
||||
playerId: -1,
|
||||
isHost: false,
|
||||
websocketConnection: {},
|
||||
players: [],
|
||||
socketListeners: [],
|
||||
gameService: gService,
|
||||
//concrete Game Data
|
||||
currentQuestion: {},
|
||||
board: new Board( undefined, "New Board", []),
|
||||
acceptAnswers: false,
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setBoardWithConversion( board ){
|
||||
this.board = boardResponseToBoardModel( board );
|
||||
},
|
||||
setAnswersForPlayers( revealingAnswers ){
|
||||
for( let reveal of revealingAnswers ){
|
||||
let playerIndex = this.players.findIndex( playerEntry => playerEntry._id === reveal.playerId );
|
||||
if( playerIndex !== -1 ){
|
||||
this.players[playerIndex].answer = reveal.answer;
|
||||
}
|
||||
}
|
||||
},
|
||||
checkExistingGame( gameId ){
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
this.gameService.checkExistingGame( gameId )
|
||||
.then( ( res ) => {
|
||||
if( res.data.success ){
|
||||
let data = {
|
||||
isHost: res.data.isHost,
|
||||
gameState: res.data.gameState,
|
||||
}
|
||||
this.gameCode = res.data.gameCode;
|
||||
resolve( data );
|
||||
} else {
|
||||
throw new Error("Request not successfull");
|
||||
}
|
||||
})
|
||||
.catch( ( err ) => {
|
||||
console.debug(err);
|
||||
reject("An Error occured while joining this game! You will be forwarded to the main page");
|
||||
})
|
||||
});
|
||||
},
|
||||
setupNewHostGame(){
|
||||
return new Promise( ( resolve, reject ) =>{
|
||||
this.gameService.setupNewHostGame()
|
||||
.then( res =>{
|
||||
if( res.data.success ){
|
||||
this.gameState = GAME_STATES.INIT;
|
||||
this.gameCode = res.data.code;
|
||||
this.isHost = true;
|
||||
resolve();
|
||||
} else {
|
||||
reject( res.data.error );
|
||||
}
|
||||
})
|
||||
.catch( ( _err ) =>{
|
||||
reject( { error: "catch", message: "Something went wrong while starting the lobby" } );
|
||||
});
|
||||
});
|
||||
},
|
||||
hostNewGame(){
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
this.addSocketListener("noUser", ( data ) => {
|
||||
this.removeSocketListener("noUser");
|
||||
this.removeSocketListener("gameCreated");
|
||||
this.gameState = GAME_STATES.NONE;
|
||||
reject( data.message );
|
||||
});
|
||||
this.addSocketListener("gameCreated", ( data ) => {
|
||||
this.removeSocketListener("gameCreated");
|
||||
this.removeSocketListener("noUser");
|
||||
this.players = data.payload.players;
|
||||
this.gameState = GAME_STATES.NONE;
|
||||
resolve( data.payload.gameId );
|
||||
});
|
||||
|
||||
let sendObj = { event: "host", message: "Host a new Game" };
|
||||
this.websocketConnection.send( JSON.stringify( sendObj ) );
|
||||
})
|
||||
},
|
||||
prepareGameWithCode( enteredGameCode ){
|
||||
return new Promise( ( resolve, reject ) =>{
|
||||
let isGameCodeValid = this.validateGameCode( enteredGameCode );
|
||||
if( isGameCodeValid === true ){
|
||||
this.gameCode = enteredGameCode;
|
||||
this.gameService.setupJoinGame( this.gameCode )
|
||||
.then( res =>{
|
||||
if( res.data.success ){
|
||||
this.gameState = GAME_STATES.INIT;
|
||||
resolve();
|
||||
} else {
|
||||
reject( res.data.error );
|
||||
}
|
||||
})
|
||||
.catch( ( _err ) =>{
|
||||
reject( "Something went wrong while joining" );
|
||||
});
|
||||
} else {
|
||||
reject( isGameCodeValid );
|
||||
}
|
||||
});
|
||||
},
|
||||
joinGame( playerName ){
|
||||
return new Promise( ( resolve, reject ) =>{
|
||||
if( this.websocketConnection.readyState === 1 ){
|
||||
|
||||
this.addSocketListener("joinSuccess", ( data ) => {
|
||||
this.removeSocketListener("joinSuccess");
|
||||
this.removeSocketListener("joinFail");
|
||||
this.gameState = GAME_STATES.INIT;
|
||||
this.playerId = data.payload.playerId;
|
||||
resolve( data.payload.gameId );
|
||||
});
|
||||
this.addSocketListener("joinFail", ( data ) => {
|
||||
this.removeSocketListener("joinSuccess");
|
||||
this.removeSocketListener("joinFail");
|
||||
this.gameState = GAME_STATES.NONE;
|
||||
reject( data );
|
||||
});
|
||||
|
||||
this.playerName = playerName;
|
||||
let sendObj = {
|
||||
event: "joinGame",
|
||||
message: "Joining Game",
|
||||
payload: {
|
||||
gameCode: this.gameCode,
|
||||
playerName: this.playerName,
|
||||
}
|
||||
}
|
||||
this.websocketConnection.send( JSON.stringify( sendObj ) );
|
||||
} else {
|
||||
reject( "Comunication failed. Make sure you joined via the \"Join Game\" functionality" );
|
||||
}
|
||||
});
|
||||
},
|
||||
continueHosting(){
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
this.addSocketListener("noUser", ( data ) => {
|
||||
this.removeSocketListener("noUser");
|
||||
this.removeSocketListener("hostRejoined");
|
||||
this.gameState = GAME_STATES.NONE;
|
||||
reject( data.message );
|
||||
});
|
||||
this.addSocketListener("hostRejoined", ( data ) => {
|
||||
this.removeSocketListener("hostRejoined");
|
||||
this.removeSocketListener("noUser");
|
||||
this.players = data.payload.players;
|
||||
this.isHost = true;
|
||||
resolve( data.payload.gameId );
|
||||
});
|
||||
|
||||
let sendObj = { event: "continueHost", message: "Host a new Game" };
|
||||
this.websocketConnection.send( JSON.stringify( sendObj ) );
|
||||
})
|
||||
},
|
||||
getBoardToGame( gameId ){
|
||||
return new Promise( ( resolve, reject ) => {
|
||||
|
||||
this.gameService.getBoardToGame( gameId )
|
||||
.then( ( res ) => {
|
||||
if( res.data.success ){
|
||||
this.setBoardWithConversion( res.data.board );
|
||||
resolve();
|
||||
} else {
|
||||
reject( res.data );
|
||||
}
|
||||
})
|
||||
.catch( ( err ) => {
|
||||
reject( err );
|
||||
})
|
||||
})
|
||||
},
|
||||
setupWebsocket(){
|
||||
return new Promise( ( resolve, reject) => {
|
||||
|
||||
this.setDefaultSocketListeners();
|
||||
|
||||
let protocol = ('https:' == document.location.protocol ? 'wss' : 'ws');
|
||||
let hostname = window.location.hostname;
|
||||
if( window.location.hostname.includes("localhost" ) ){
|
||||
hostname += ':3000';
|
||||
}
|
||||
|
||||
this.websocketConnection = new WebSocket(`${protocol}://${hostname}/ws`);
|
||||
|
||||
let timeout = setTimeout( () => {
|
||||
reject();
|
||||
}, 5000);
|
||||
|
||||
this.websocketConnection.onopen = ( _event ) => {
|
||||
clearTimeout(timeout);
|
||||
resolve();
|
||||
}
|
||||
|
||||
this.websocketConnection.onmessage = ( message ) => {
|
||||
console.debug("Got Message!", message);
|
||||
let dataRaw = message.data;
|
||||
if( dataRaw === undefined || typeof dataRaw !== "string" ){
|
||||
console.error("Data not parseable")
|
||||
return;
|
||||
}
|
||||
let data = JSON.parse( dataRaw );
|
||||
|
||||
this.socketListeners.forEach( x => {
|
||||
if( data.event === x.event){
|
||||
x.callback(data);
|
||||
console.debug( x.event + " callback called");
|
||||
}
|
||||
});
|
||||
};
|
||||
this.websocketConnection.onerror = ( _event ) => {
|
||||
console.error("Websocket Error");
|
||||
};
|
||||
this.websocketConnection.onclose = ( event ) => {
|
||||
const userStore = useUserStore();
|
||||
userStore.resetInitialUserDataPromise();
|
||||
userStore.initialUserPromise
|
||||
.then( ( userData ) => {
|
||||
userStore.setUser( userData );
|
||||
})
|
||||
.catch( ( err ) => {
|
||||
console.error( err );
|
||||
});
|
||||
|
||||
this.resetGameState();
|
||||
|
||||
this.router.push( { name: "home" } );
|
||||
}
|
||||
});
|
||||
},
|
||||
resetGameState(){
|
||||
this.gameState = GAME_STATES.NONE;
|
||||
this.gameCode = "";
|
||||
this.playerName = "";
|
||||
this.playerId = -1;
|
||||
this.isHost = false;
|
||||
this.players = [];
|
||||
this.board = new Board( undefined, "New Board", []);
|
||||
this.acceptAnswers = false;
|
||||
},
|
||||
closeWebSocket(){
|
||||
this.websocketConnection.close();
|
||||
},
|
||||
validateGameCode( gameCode ){
|
||||
if( gameCode.length !== 8 ){
|
||||
return "Code is 8 characters long";
|
||||
}
|
||||
return true;
|
||||
},
|
||||
addSocketListener( eventName, callback ){
|
||||
if( this.socketListeners.find( x => x.event === eventName) ){
|
||||
return false;
|
||||
}
|
||||
this.socketListeners.push({
|
||||
event: eventName,
|
||||
callback: callback,
|
||||
});
|
||||
return true;
|
||||
},
|
||||
removeSocketListener( eventName ){
|
||||
let deleteIndex = this.socketListeners.findIndex( x => x.event === eventName);
|
||||
if( deleteIndex !== -1 ){
|
||||
this.socketListeners.splice( deleteIndex, 1 );
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
sendEvent( eventName, payload ){
|
||||
if( this.websocketConnection ){
|
||||
this.websocketConnection.send( JSON.stringify( { event: eventName, payload: payload } ) );
|
||||
}
|
||||
},
|
||||
setDefaultSocketListeners(){
|
||||
this.addSocketListener("playersUpdated", ( data ) => {
|
||||
if( data.payload !== undefined ){
|
||||
this.players = data.payload.players;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,64 @@
|
||||
import { defineStore } from "pinia";
|
||||
import UserService from "@/services/UserService";
|
||||
|
||||
const uService = new UserService();
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: ()=>{
|
||||
return {
|
||||
loggedIn: false,
|
||||
username: "",
|
||||
admin: false,
|
||||
initialUserPromise: new Promise( (resolve, reject ) => {
|
||||
uService.getUserFromSession()
|
||||
.then( res => {
|
||||
if( res.data.success ){
|
||||
resolve( res.data.user );
|
||||
} else {
|
||||
reject( false );
|
||||
}
|
||||
})
|
||||
.catch( err => {
|
||||
console.debug(err);
|
||||
reject( err );
|
||||
})
|
||||
}),
|
||||
userService: uService,
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
login( username, password ) {
|
||||
return this.userService.loginUser(username, password);
|
||||
},
|
||||
signup( username, password ) {
|
||||
return this.userService.signupUser(username, password);
|
||||
},
|
||||
logout(){
|
||||
if( this.loggedIn ){
|
||||
return this.userService.logoutUser();
|
||||
} else {
|
||||
return Promise.reject("Not logged in");
|
||||
}
|
||||
},
|
||||
setUser( user ){
|
||||
this.loggedIn = true;
|
||||
this.username = user.username;
|
||||
},
|
||||
resetInitialUserDataPromise(){
|
||||
this.initialUserPromise = new Promise( (resolve, reject ) => {
|
||||
this.userService.getUserFromSession()
|
||||
.then( res => {
|
||||
if( res.data.success ){
|
||||
resolve( res.data.user );
|
||||
} else {
|
||||
reject( false );
|
||||
}
|
||||
})
|
||||
.catch( err => {
|
||||
console.debug(err);
|
||||
reject( err );
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
})
|
||||
Reference in new issue
Block a user