Version 1.0

.env_example

@@ -0,0 +1,3 @@
+VITE_API_URL=http://localhost:3000
+API_MONGO_CONN_URI=mongodb://mongodb_user:mongodb_password@127.0.0.1:27017/jeobeardy
+API_SESSION_STORE_SECRET=S3Cr3T

.eslintrc.cjs

@@ -0,0 +1,24 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+  rules: {
+    "no-unused-vars": ["warn", { "argsIgnorePattern": "_.*"}],
+    "vue/multi-word-component-names": "off",
+    "prettier/prettier": "off",
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+};

.gitignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+public/uploads/*
+docker-compose.yml
+mongo-init.js
+
+*.env
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+    "printWidth": 150
+}

Dockerfile

@@ -0,0 +1,8 @@
+# syntax=docker/dockerfile:1
+
+FROM node:19.9.0-alpine
+WORKDIR /app
+COPY . .
+RUN npm install --production
+CMD ["npm", "start"]
+EXPOSE 3000

LICENSE

@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

README.md

@@ -0,0 +1,32 @@
+# Jeobeardy
+
+Jeobeardy (/dʒebeərdi/) is similiar to but not quite like Jeopardy. It is a quiz game where you can create your own boards with categories and then make your friends compete in a fun and interactive way
+
+## Code Structure
+
+- Server-side code can be found inside the ./src/server directory
+- Client-side code can be found inside the ./src/webapp directory
+
+To install the necessary dependencies for the project, clone the repository and run
+
+```sh
+npm install
+```
+## Run Server-side code
+
+```sh
+node ./src/server/server.js
+```
+or
+```sh
+npm start
+```
+to also build the client side code to be served by express (without Hot-Reload).
+
+## Run Client-side code
+
+### Compile with Hot-Reload for Development
+
+```sh
+npm run dev
+```

example_docker-compose.yml

@@ -0,0 +1,35 @@
+version: "3"
+
+services:
+  jeobeardy:
+    build: .
+    restart: always
+    ports:
+      - "3000:3000"
+    networks:
+      - mongo_db
+    image: jeobeardy
+    depends_on:
+      - mongodb
+  mongodb:
+    image: mongo:6.0.6
+    restart: always
+    ports:
+      - "27017:27017"
+    networks:
+      - mongo_db
+    environment:
+      - MONGO_INITDB_ROOT_USERNAME=database_admin
+      - MONGO_INITDB_ROOT_PASSWORD=database_admin_password
+      - MONGO_INITDB_DATABASE=jeobeardy
+    volumes:
+      - jeobeardy_data:/data/db
+      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:ro
+
+volumes:
+  jeobeardy_data:
+    external: true
+
+networks:
+  mongo_db:
+    driver: bridge

example_mongo-init.js

@@ -0,0 +1,12 @@
+db.createUser(
+    {
+            user: "database_user",
+            pwd: "database_user_password",
+            roles: [
+                    {
+                            role: "readWrite",
+                            db: "jeobeardy"
+                    }
+            ]
+    }
+);

index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#e86a92ff">
+    <meta name="msapplication-TileColor" content="#2b5797">
+    <meta name="theme-color" content="#0b3954ff">
+
+    <link rel="preload" as="font" href="./src/webapp/assets/fonts/Urbanist-Regular.woff2" type="font/woff2" crossorigin="anonymous">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jeobeardy</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/webapp/main.js"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "jeobeardy",
+  "version": "1.0.0",
+  "description": "Jeobeardy (/dʒebeərdi/) is similiar to but not quite like Jeopardy. It is a quiz game where you can create your own boards with categories and then make your friends compete in a fun and interactive way",
+  "keywords": ["jeobeardy", "quiz", "jeopardy", "game"],
+  "bugs": {
+    "url": "https://github.com/EisiBaer/Jeobeardy/issues",
+    "email": "jeobeardy@proton.me"
+  },
+  "license": "GPL-3.0-or-later",
+  "author": {
+    "name" : "Manuel Eisinger"
+  },
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/EisiBaer/Jeobeardy"
+  },
+  "private": true,
+  "scripts": {
+    "start": "npm run build && node ./src/server/server.js",
+    "dev": "vite dev --mode development",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@popperjs/core": "^2.11.6",
+    "axios": "^1.3.3",
+    "bcryptjs": "^2.4.3",
+    "body-parser": "^1.20.1",
+    "bootstrap": "^5.2.3",
+    "connect-history-api-fallback": "^2.0.0",
+    "connect-mongodb-session": "^3.1.1",
+    "cors": "^2.8.5",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2",
+    "express-session": "^1.17.3",
+    "helmet": "^7.0.0",
+    "mongoose": "^6.10.0",
+    "morgan": "^1.10.0",
+    "multer": "^1.4.5-lts.1",
+    "pinia": "^2.0.28",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6",
+    "vue3-draggable": "^2.0.9",
+    "ws": "^8.12.1",
+    "vite": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "prettier": "^2.7.1",
+    "sass": "^1.58.3"
+  }
+}

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/safari-pinned-tab.svg

@@ -0,0 +1,59 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="782.000000pt" height="782.000000pt" viewBox="0 0 782.000000 782.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,782.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3148 6955 c-2 -2 -25 -5 -53 -9 -80 -9 -147 -33 -211 -74 -142 -92
+-202 -217 -200 -420 l1 -102 -175 -1 c-204 -1 -488 -5 -895 -13 -159 -3 -404
+-8 -544 -11 -140 -3 -256 -7 -258 -9 -2 -2 24 -20 59 -40 35 -20 70 -41 78
+-46 8 -5 55 -33 103 -61 49 -28 87 -52 85 -54 -3 -3 -151 -12 -323 -20 -73 -3
+-311 -16 -380 -20 -22 -2 -51 -3 -65 -4 -22 -1 -18 -5 25 -30 28 -16 70 -39
+95 -52 25 -12 47 -25 50 -28 3 -3 14 -11 25 -17 203 -112 264 -148 258 -154
+-4 -3 -39 -19 -78 -35 -209 -85 -470 -253 -651 -420 -6 -5 -29 -25 -52 -44
+l-42 -34 37 -31 c54 -46 260 -221 321 -273 29 -25 66 -58 81 -72 15 -14 42
+-37 58 -51 46 -38 153 -132 179 -157 30 -30 42 -29 73 5 34 37 150 132 161
+132 5 0 15 6 22 13 21 22 145 87 152 80 3 -4 6 -2 6 4 0 9 20 18 45 22 3 0 19
+8 35 16 16 8 31 15 32 15 2 0 35 10 73 23 39 13 75 25 80 27 6 1 15 4 20 6 26
+7 165 35 200 39 22 3 51 8 65 10 97 18 355 23 490 10 293 -28 499 -163 550
+-360 2 -5 11 -33 21 -62 9 -28 15 -53 13 -56 -3 -2 -1 -23 4 -45 6 -23 7 -43
+5 -46 -3 -3 -6 -26 -8 -53 -4 -64 -14 -116 -30 -164 -8 -21 -12 -39 -10 -39 8
+0 -72 -178 -85 -190 -7 -7 -28 -41 -37 -60 -4 -8 -11 -19 -15 -25 -4 -5 -34
+-44 -65 -85 -31 -41 -61 -80 -67 -86 -6 -6 -26 -29 -44 -52 -19 -23 -43 -51
+-54 -64 -11 -13 -34 -40 -51 -62 -18 -21 -37 -43 -43 -50 -64 -68 -213 -305
+-235 -375 -6 -20 -15 -40 -19 -46 -7 -9 -28 -75 -30 -97 -1 -4 -6 -22 -11 -40
+-20 -68 -23 -107 -24 -248 0 -188 8 -233 90 -530 7 -26 46 -133 60 -165 73
+-169 122 -274 161 -350 26 -49 55 -105 63 -122 8 -18 19 -33 23 -33 4 0 8 -6
+8 -14 0 -14 94 -201 112 -223 6 -7 7 -13 3 -13 -4 0 -3 -6 3 -12 22 -27 74
+-130 78 -156 9 -51 57 -135 103 -181 161 -159 416 -139 540 43 38 56 70 155
+60 184 -5 12 -5 22 0 22 4 0 6 13 3 28 -2 20 8 48 34 93 21 35 41 65 46 67 4
+2 8 8 8 14 0 10 69 111 106 155 11 12 30 36 43 53 24 30 59 66 148 147 23 22
+68 56 100 77 32 22 70 47 84 57 41 28 190 100 199 97 5 -2 3 -16 -5 -33 -29
+-60 -55 -128 -52 -131 2 -2 28 6 58 17 30 11 74 27 99 36 25 8 54 19 65 24 20
+9 80 31 314 114 68 25 136 51 152 59 38 19 37 9 -6 -79 -18 -38 -32 -71 -30
+-73 1 -2 70 16 151 38 82 23 154 43 159 44 6 1 28 8 50 14 22 6 51 13 65 16
+14 3 57 14 95 26 39 11 81 23 95 26 14 3 30 6 35 8 6 1 28 8 50 14 22 6 51 13
+65 16 38 8 72 15 105 23 17 4 39 7 50 8 11 0 25 3 30 7 13 8 261 3 300 -6 111
+-26 220 -61 333 -106 l80 -32 39 18 c21 10 54 27 73 39 47 28 544 246 570 250
+11 2 190 94 228 119 23 14 44 26 48 26 3 0 38 24 77 54 153 115 278 258 358
+406 13 25 26 47 29 50 3 3 18 34 33 70 16 36 32 73 38 83 8 15 53 144 65 187
+2 8 11 40 19 70 33 113 8 233 -69 335 -27 36 -137 148 -183 185 -32 26 -166
+125 -218 160 -27 19 -60 43 -72 54 -13 11 -23 16 -23 12 0 -4 -7 -1 -15 6 -26
+24 -40 34 -55 41 -8 4 -34 20 -57 35 -23 15 -63 40 -90 56 -26 16 -71 44 -100
+62 -28 19 -56 34 -62 34 -6 0 -11 5 -11 10 0 6 -4 10 -10 10 -5 0 -38 17 -72
+38 -35 21 -90 54 -123 72 -33 18 -65 38 -71 45 -6 6 -14 43 -18 82 -4 39 -9
+79 -11 89 -2 11 -11 48 -20 84 -9 36 -17 74 -19 85 -7 33 -57 167 -81 215 -13
+25 -58 79 -102 120 -88 83 -163 150 -168 150 -2 0 -14 10 -27 23 -13 12 -36
+31 -52 42 -16 11 -37 28 -48 38 -10 9 -21 17 -26 17 -4 0 -19 10 -33 23 -14
+12 -34 27 -45 34 -183 115 -204 127 -324 190 -71 37 -101 50 -215 95 -81 32
+-270 92 -324 103 -9 2 -47 10 -86 19 -38 8 -83 17 -100 20 -16 2 -59 9 -95 14
+-36 6 -94 14 -130 17 -155 16 -202 26 -240 51 -72 47 -171 157 -231 258 -19
+31 -37 56 -41 56 -5 0 -8 5 -8 10 0 14 -113 183 -164 245 -118 142 -267 235
+-413 258 -17 3 -35 7 -40 10 -27 17 -352 54 -365 42z"/>
+</g>
+</svg>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/server/controllers/BoardController.js

@@ -0,0 +1,24 @@
+const GameModel = require("../models/GameModel");
+const UserModel = require("../models/UserModel")
+const BoardModel = require("../models/BoardModel")
+
+const BoardController = require("./BoardController");
+
+exports.game_list = (req, res) => {
+    GameModel.find((err, games) => {
+        res.send(JSON.stringify(games));
+      });
+};
+
+exports.board_read = (req, res) => {
+    BoardModel.findOne({name: boardName, ownerId: username})
+  res.send(`NOT IMPLEMENTED: User detail: ${req.params.id}`);
+};
+
+exports.game_create = (req, res) => {
+    let newGame = new GameModel();
+    newGame.host = UserModel.findOne({username: req.params.username});
+    newGame.boardId = BoardModel.findOne({name: req.params.board}, "");
+    newGame.save();
+    res.send("{success:true}");
+};

src/server/controllers/BoardControllerMongoose.js

@@ -0,0 +1,99 @@
+
+const BoardModel = require("../models/BoardModel");
+const ImageModel = require("../models/ImageModel");
+
+exports.listBoards = (req, res) => {
+  return new Promise((resolve, reject) => {
+    BoardModel.find({})
+      .then((boards) => {
+        resolve(boards);
+      })
+      .catch((err) => {
+        reject( err );
+      });
+  });
+};
+
+exports.findBoard = ( boardId ) => {
+  return new Promise((resolve, reject) => {
+    BoardModel.findOne({ _id: boardId })
+      .then( ( board ) => {
+        if( board === null ){
+          let userNotFoundError = new Error(`No board found with id "${boardId}"`);
+          userNotFoundError.name = "NotFoundError";
+          throw userNotFoundError;
+        } else {
+          resolve( board );
+        }
+      })
+      .catch( ( err ) => {
+        reject ( err );
+      });
+  });
+};
+
+exports.isBoardFromUser = ( boardId, userId ) => {
+  return new Promise((resolve, reject) => {
+    BoardModel.findOne({ _id: boardId, ownerId: userId })
+      .then( ( board ) => {
+        resolve( board !== null );
+      })
+      .catch( ( err ) => {
+        reject ( err );
+      });
+  });
+};
+
+exports.addBoard = ( postObject, ownerId ) => {
+  return new Promise((resolve, reject) => {
+    BoardModel.findOne({ _id: postObject.boardId })
+      .then( ( board ) => {
+        if ( board === null ) {
+          //TODO validate postObject at some point!
+          let newBoard = new BoardModel({
+            ownerId: ownerId,
+            name: postObject.boardName,
+            categories: postObject.categories,
+          });
+          return newBoard.save();
+        } else {
+          board.setFromPostObject = postObject;
+          return board.save();
+        }
+      })
+      .then( ( board ) => {
+        resolve( board );
+      })
+      .catch((err) => {
+        reject( err );
+      });
+  });
+};
+
+exports.addUploadedImages = ( imagesArray, ownerId ) => {
+  return new Promise((resolve, reject) => {
+    let imageArray = [];
+    for( let iIdx in imagesArray ){
+      let imageIndex = Number(iIdx);
+      let indices = imagesArray[imageIndex].originalname.split(":");
+      let image = new ImageModel({
+        ownerId: ownerId,
+        categoryIndex: indices[0],
+        boardEntryIndex: indices[1],
+        questionIndex: indices[2],
+        filename: imagesArray[imageIndex].filename,
+      });
+      imageArray.push( image );
+    }
+    ImageModel.bulkSave( imageArray )
+    .then( ( images ) => {
+      if( images ){
+        resolve( images );
+      }
+      reject( new Error("Error while persisting image References") );
+    } )
+    .catch( ( err ) => {
+      reject( err );
+    })
+  });
+};

src/server/controllers/GameControllerMongoose.js

@@ -0,0 +1,383 @@
+const mongoose = require("mongoose");
+
+const util = require("../util");
+const GameModel = require("../models/GameModel");
+const PlayerModel = require("../models/PlayerModel");
+const UserModel = require("../models/UserModel");
+
+exports.listGames = () => {
+  return new Promise((resolve, reject) => {
+    GameModel.find({})
+      .then((games) => {
+        resolve(games);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its code and resolves with it
+ * @param {String} code 
+ * @returns A promise
+ */
+exports.findGameWithCode = (code) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findOne({ code: code })
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with code "${code}"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve(game);
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its code and resolves with it
+ * @param {String} code 
+ * @returns A promise
+ */
+exports.findGameByHostId = ( hostId ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findOne({ host: hostId })
+      .then((game) => {
+        resolve(game);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its id and resolves with it
+ * @param {String} id _id
+ * @returns A promise
+ */
+exports.findGameById = (id) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findById( id ).populate("players")
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with code "${id}"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve(game);
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its id and resolves with it with board populated
+ * @param {String} id _id
+ * @returns A promise
+ */
+exports.findGameByIdAndPopulateBoard = (id) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findById( id ).populate("board")
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with id "${id}"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve(game);
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its id and sets its state and then resolves with it with board populated
+ * @param {String} id _id
+ * @returns A promise
+ */
+exports.findGameByIdAndSetStateAndPopulateBoard = ( id, state ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findByIdAndUpdate( id, { $set: { state: state } } ).populate("board")
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with id "${id}"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve(game);
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its id and resolves with its board
+ * @param {String} id _id
+ * @returns A promise
+ */
+exports.findBoardForGameId = ( id, state ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findById( id ).populate("board")
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with id "${id}"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve(game.board);
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+/**
+ * Finds a game by its id and resolves with it with board populated
+ * @param {String} id _id
+ * @param {Number} categoryIndex Index of Category of Board Entry to be marked as answered
+ * @param {Number} boardEntryIndex Index of BoardEntry in category to be marked as answered
+ * @returns A promise
+ */
+exports.findGameAndAddAnsweredEntry = ( id, categoryIndex, boardEntryIndex ) => {
+  return new Promise((resolve, reject) => {
+    let dbEntry = {
+      categoryIndex: categoryIndex,
+      boardEntryIndex: boardEntryIndex,
+    }
+    GameModel.findByIdAndUpdate(id, { $addToSet: { "answeredBoardEntries": dbEntry } }, { new: true } ).populate("board")
+    .then( ( game ) => {
+      if( game === null ){
+        let gameNotFoundError = new Error(`No game found with id "${id}"`);
+        gameNotFoundError.name = "NotFoundError";
+        reject(gameNotFoundError);
+      } else {
+        resolve(game);
+      }
+    })
+    .catch( ( err ) => {
+      reject(err);
+    });
+  });
+};
+
+/**
+ * Finds a game by its id and resolves with it with board populated
+ * @param {String} id _id
+ * @param {Number} categoryIndex Index of Category of Board Entry to be marked as NOT answered
+ * @param {Number} boardEntryIndex Index of BoardEntry in category to be marked as NOT answered
+ * @returns A promise
+ */
+exports.findGameAndRemoveAnsweredEntry = ( id, categoryIndex, boardEntryIndex ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findByIdAndUpdate(id, { $pull: { answeredBoardEntries: { categoryIndex: categoryIndex, boardEntryIndex: boardEntryIndex } } }, { new: true } ).populate("board")
+    .then( ( game ) => {
+      if( game === null ){
+        let gameNotFoundError = new Error(`No game found with id "${id}"`);
+        gameNotFoundError.name = "NotFoundError";
+        reject(gameNotFoundError);
+      } else {
+        resolve(game);
+      }
+    })
+    .catch( ( err ) => {
+      reject(err);
+    });
+  });
+};
+
+exports.findAcceptingGameAndSetNotAccepting = ( id ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findOneAndUpdate({ _id : id, acceptAnswers: true }, { acceptAnswers: false }, { new: true })
+      .then((game) => {
+        if( game === null){
+          resolve( false );
+        } else {
+          resolve( true );
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+exports.findGameAndSetAccepting = ( id, isAccepting ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findByIdAndUpdate( id, { acceptAnswers: isAccepting }, { new: true }).populate("players")
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with code "${id}"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve( game );
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+exports.findGameAcceptingAnswers = ( id ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findOne({ _id : id, acceptAnswers: true } )
+      .then((game) => {
+        if( game === null){
+          let gameNotFoundError = new Error(`No game found with code "${id}" and acceptAnswers "true"`);
+          gameNotFoundError.name = "NotFoundError";
+          reject(gameNotFoundError);
+        } else {
+          resolve( game );
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+exports.setPlayerPointsAndReturnGame = ( gameId, playerId, pointsAdjusted ) => {
+  return new Promise((resolve, reject) => {
+    PlayerModel.findByIdAndUpdate(
+      mongoose.Types.ObjectId( playerId ),
+      { 
+        $set: {
+          points: pointsAdjusted,
+        }
+      },
+      { new: true }
+    )
+    .then( ( player ) => {
+      if( player === null ){
+        let playerNotFoundError = new Error(`No player found with id "${playerId}"`);
+        playerNotFoundError.name = "NotFoundError";
+        throw playerNotFoundError;
+      }
+      return this.findGameById( gameId );
+    })
+    .then( ( game ) => {
+      if( game === null){
+        let gameNotFoundError = new Error(`No game found with id "${gameId}"`);
+        gameNotFoundError.name = "NotFoundError";
+        reject(gameNotFoundError);
+      } else {
+        resolve( game );
+      }
+    })
+    .catch((err) => {
+      reject(err);
+    });
+  });
+};
+
+/**
+ * Creates a new Game and adds the user with username of "hostName" as the host
+ * @param {String} hostName 
+ * @returns A promise which resolves when a new game has been created. Rejects if an error occurs or host is not found.
+ */
+exports.addGame = (hostId) => {
+  return new Promise((resolve, reject) => {
+    UserModel.findById( hostId, '-password' )
+    .then( (host) => {
+      if( host === null ){
+        return null;
+      }
+      let newGame = new GameModel({
+        code: util.makeid(8),
+        host: host,
+        state: "CREATED",
+      });
+      return newGame.save();
+    })
+    .then( ( game ) => {
+      if( game === null ){
+        reject( "No User found" );
+      } else {
+        resolve( game );
+      }
+    })
+    .catch( (err) => {
+      reject( err );
+    });
+  });
+};
+
+/**
+ * Deletes a Game
+ * @param {String} hostName 
+ * @returns A promise which resolves when a new game has been created. Rejects if an error occurs or host is not found.
+ */
+exports.deleteGame = ( gameId ) => {
+  return new Promise((resolve, reject) => {
+    GameModel.findByIdAndRemove( gameId )
+    .then( ( game ) => {
+      if( game === null ){
+        throw new Error( "No Game found for deletion" );
+      } else {
+        return PlayerModel.deleteMany( { _id: { $in: game.players } } )
+      }
+    })
+    .then( ( _deletedCount ) => {
+      resolve();
+    })
+    .catch( (err) => {
+      reject( err );
+    });
+  });
+};
+
+exports.addPlayerToGame = ( gameCode, player ) => {
+  return new Promise( (resolve, reject) => {
+    GameModel.findOne(
+      { code: gameCode },
+    )
+    .then( game => {
+      if( game === null ){
+        throw new Error( "Game not found" );
+      } else {
+        game.players.push( player._id );
+        return game.save();
+      }
+    })
+    .then( ( gameSaved ) => {
+      return gameSaved.populate( "players" );
+    })
+    .then( ( gamePopulated ) => {
+      resolve( gamePopulated );
+    })
+    .catch( err => {
+      reject( err );
+    });
+  })
+}
+
+exports.removePlayerFromGame = ( gameId, playerId ) => {
+  return new Promise( (resolve, reject) => {
+    GameModel.findByIdAndUpdate( gameId, { $pull: { players: { playerId } } } )
+    .then( _game => {
+      resolve();  
+    })
+    .catch( err => {
+      reject( err );
+    });
+  })
+}

src/server/controllers/GameControllerNonPersistent.js

@@ -0,0 +1,58 @@
+let games = [{
+  id: "123456",
+  hostId: 1,
+  players: [],
+}];
+
+exports.listGames = (req, res) => {
+  return games;
+};
+
+exports.findGameWithid = ( id ) => {
+  return new Promise( (resolve, reject) =>{
+    let game = games.find( x => x.id === id );
+    if( game !== undefined ){
+        resolve( game );
+    }else{
+        reject( "Not Found " );
+    }
+  });
+};
+
+exports.addGame = ( hostId ) => {
+  return new Promise( ( resolve, reject ) => {
+    let id = getIdForNewGame();
+    if( id === false ){
+      reject( "Too many games are being currently played. Try again later" );
+    }
+    let newGame = {
+      id: id,
+      host: hostId,
+      board: null,
+      players: [],
+    };
+    games.push( newGame );
+    resolve(newGame);
+});
+
+function getIdForNewGame(){
+  let newid;
+  if( games.length <= 10000 ){
+    newid = Math.floor(Math.random() * 1000000);
+    while( games.findIndex( game => game.id !== newid ) ){
+      newid = Math.floor(Math.random() * 1000000);
+    }
+  } else {
+    if( games.length >= 899999 ){
+      return false;
+    } else {
+      games.sort( (a, b) => a.id - b.id );
+      newid = games[games.length-1].id + 1;
+      if( newid >= 1000000 ){
+        newid = 100000
+      }
+    }
+  }
+  return newid;
+}
+};

src/server/controllers/PlayerControllerMongoose.js

@@ -0,0 +1,110 @@
+const GameModel = require("../models/GameModel");
+const PlayerModel = require("../models/PlayerModel");
+
+/**
+ * Creates a new Player and resolves with it
+ * @param {String} hostName
+ * @returns A promise which resolves when a new player has been created. Rejects if an error occurs
+ */
+exports.addPlayer = (playerName) => {
+  return new Promise((resolve, reject) => {
+    let newPlayer = new PlayerModel({
+      name: playerName,
+      points: 0,
+    });
+
+    newPlayer.save()
+    .then( ( user ) => {
+        resolve( user );
+    })
+    .catch( ( err ) => {
+        reject( err );
+    });
+  });
+}
+
+/**
+ * Deletes a player
+ * @param {String} hostName
+ * @returns A promise which resolves when the player has been deleted
+ */
+exports.deletePlayer = ( playerId ) => {
+  return new Promise((resolve, reject) => {
+    PlayerModel.findByIdAndRemove( playerId )
+    .then( ( deletedUser ) => {
+        resolve( deletedUser );
+    })
+    .catch( ( err ) => {
+        reject( err );
+    });
+  });
+}
+
+/**
+ * Checks if a player is allowed to currently answer a question
+ * @param {String} playerId
+ * @returns A promise which resolves with wheter the player is allowed to answer or not. Rejects if an error occurs or host is not found.
+ */
+exports.setAllPlayersAcceptAnswers = ( playerIds, acceptAnswersValue ) => {
+  return new Promise((resolve, reject) => {
+    PlayerModel.updateMany( { _id: { $in : playerIds } }, { acceptAnswers: acceptAnswersValue } )
+    .then( ( players ) => {
+      if( players ){
+        resolve();
+      } else {
+        let playerNotFoundError = new Error(`No players found with any id of "${playerIds}"`);
+        playerNotFoundError.name = "NotFoundError";
+        reject(playerNotFoundError);
+      }
+    })
+    .catch( ( err ) => {
+      reject( err );
+    })
+  });
+}
+
+/**
+ * Checks if a player is allowed to currently answer a question
+ * @param {String} playerId
+ * @returns A promise which resolves with wheter the player is allowed to answer or not. Rejects if an error occurs or host is not found.
+ */
+exports.checkPlayerAcceptAnswers = ( playerId ) => {
+  return new Promise((resolve, reject) => {
+    PlayerModel.findById( playerId )
+    .then( ( player ) => {
+      if( player ){
+        resolve( player.acceptAnswers );
+      } else {
+        let playerNotFoundError = new Error(`No player found with id "${playerId}"`);
+        playerNotFoundError.name = "NotFoundError";
+        reject(playerNotFoundError);
+      }
+    })
+    .catch( ( err ) => {
+      reject( err );
+    })
+  });
+}
+
+/**
+ * Checks if a player is allowed to currently answer a question and sets it to the specified value
+ * @param {String} playerId
+ * @returns A promise which resolves with wheter the player is allowed to answer or not. Rejects if an error occurs or host is not found.
+ */
+exports.checkPlayerAcceptAnswersAndSetAccepting = ( playerId, canAcceptAfter ) => {
+  return new Promise((resolve, reject) => {
+    PlayerModel.findByIdAndUpdate( playerId, { acceptAnswers: canAcceptAfter }, { new: false } )
+    .then( ( player ) => {
+      if( player ){
+        resolve( player.acceptAnswers );
+      } else {
+        let playerNotFoundError = new Error(`No player found with id "${playerId}"`);
+        playerNotFoundError.name = "NotFoundError";
+        reject(playerNotFoundError);
+      }
+    })
+    .catch( ( err ) => {
+      reject( err );
+    })
+  });
+}

src/server/controllers/UserControllerMongoose.js

@@ -0,0 +1,143 @@
+const bcrypt = require("bcryptjs");
+
+const UserModel = require("../models/UserModel");
+const BoardModel = require("../models/BoardModel");
+
+exports.listUsers = (req, res) => {
+  return new Promise((resolve, reject) => {
+    UserModel.find({}, "-password")
+      .then((users) => {
+        resolve(users);
+      })
+      .catch((err) => {
+        reject( err );
+      });
+  });
+};
+
+exports.findUser = (username) => {
+  return new Promise((resolve, reject) => {
+    UserModel.findOne({ _id: username }, "-password")
+      .then((user) => {
+        if( user === null ){
+          let userNotFoundError = new Error(`No user found with username "${username}"`);
+          userNotFoundError.name = "NotFoundError";
+          throw userNotFoundError;
+        } else {
+          resolve(user);
+        }
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+exports.addUser = (username, password) => {
+  return new Promise((resolve, reject) => {
+    //Check if username is already taken before hashing the password
+    UserModel.findOne({ username: username }, "-password")
+      .then((user) => {
+        if ( user === null ) {
+          return bcrypt.hash(password, 12);
+        } else {
+          let userTakenError = new Error( "Username is taken!" );
+          userTakenError.name = "UserTakenError";
+          throw userTakenError;
+        }
+      })
+      .then((hash) => {
+        let newUser = new UserModel({
+          username: username,
+          password: hash,
+        });
+        return newUser.save();
+      })
+      .then((user) => {
+        user.password = undefined;
+        resolve(user);
+      })
+      .catch((err) => {
+        reject( err );
+      });
+  });
+};
+
+exports.loginUser = (username, password) => {
+  return new Promise((resolve, reject) => {
+    let retUser;
+    UserModel.findOne({ username: username })
+      .then((user) => {
+        if( user === null ){
+          let userNotFoundError = new Error(`No user found with username "${username}"`);
+          userNotFoundError.name = "NotFoundError";
+          throw userNotFoundError;
+        } else {
+          retUser = user;
+          return bcrypt.compare(password, user.password);
+        }
+      })
+      .then((res) => {
+        if (res) {
+          retUser.password = undefined;
+          resolve( retUser );
+        } else {
+          let wrongCredentialsError = new Error("Password did not match");
+          wrongCredentialsError.name = "WrongCredentialsError";
+          throw wrongCredentialsError;
+        }
+      })
+      .catch((err) => {
+        reject( err );
+      });
+  });
+};
+
+exports.getUserBoards = ( userId ) => {
+  return new Promise( ( resolve, reject ) => {
+    UserModel.findById( userId, "username boards").populate("boards")
+      .then( ( user ) => {
+        if( user === null ){
+          let userNotFoundError = new Error(`No user found in session"`);
+          userNotFoundError.name = "NotFoundError";
+          throw userNotFoundError;
+        }
+        resolve( user.boards );
+      })
+      .catch( ( err ) => {
+        reject( err );
+      })
+  });
+};
+
+exports.addBoardToUser = ( board ) => {
+  let boardId;
+  return new Promise( ( resolve, reject ) => {
+    UserModel.findById( board.ownerId)
+      .then( ( user ) => {
+        if( user === null ){
+          let userNotFoundError = new Error(`No user found in session"`);
+          userNotFoundError.name = "NotFoundError";
+          throw userNotFoundError;
+        }
+        if( !user.boards.includes( board._id ) ){
+          user.boards.push( board._id );
+        }
+        boardId = board._id;
+        return user.save();
+      })
+      .then( ( _user ) => {
+        return BoardModel.findById( boardId );
+      })
+      .then( ( board ) => {
+        if( board === null ){
+          reject();
+        } else {
+          resolve( board );
+        }
+      })
+      .catch( ( err ) => {
+        reject( err );
+      })
+  });
+};

src/server/controllers/UserControllerNonPersistent.js

@@ -0,0 +1,62 @@
+
+const bcrypt = require("bcryptjs");
+
+let users = [];
+
+exports.listUsers = (req, res) => {
+    return users;
+};
+
+exports.findUser = (username) => {
+    return new Promise( (resolve, reject) =>{
+        let user = users.find( x => x.username === username );
+        if( user !== undefined ){
+            resolve( user );
+        }else{
+            reject( "Not Found " );
+        }
+    });
+};
+
+exports.addUser = (username, password) => {
+    return new Promise( (resolve, reject) => {
+        if( users.some( x => x.username === username ) ){
+            reject({
+                userTaken: true,
+                message: "Username Already Taken",
+            });
+        } else {
+            bcrypt.hash(password, 13).then( hash => {
+                let newUser = {
+                    username: username,
+                    password: hash,
+                }
+                users.push(newUser);
+                resolve(newUser);
+            })
+            .catch( err => {
+                reject(err);
+            })
+        }
+    });
+};
+
+exports.loginUser = (username, password) => {
+    return new Promise( (resolve, reject) => {
+        let retUser;
+        this.findUser(username).then( user => {
+            retUser = user;
+            return bcrypt.compare(password, user.password)
+        })
+        .then( res => {
+            if(res){
+                resolve(retUser);
+            }else{
+                reject( "Wrong Credentials" );
+            }
+        })
+        .catch( err =>{
+            reject( "Wrong Credentials" );
+        })
+    });
+};

src/server/models/AnswerModel.js

@@ -0,0 +1,16 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const AnswerSchema = new Schema({
+    value: { type: String, required: true, maxLength: 255 },
+});
+
+// Virtual for player's URL
+AnswerSchema.virtual("url").get(function () {
+  // We don't use an arrow function as we'll need the this object
+  return `/answer/${this._id}`;
+});
+
+// Export model
+module.exports = mongoose.model("Answer", AnswerSchema);

src/server/models/BoardEntryModel.js

@@ -0,0 +1,21 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const BoardEntrySchema = new Schema({
+    name: { type: String, required: true, maxLength: 100 },
+    orderValue: { type: Number },
+    boardId: { type: Schema.Types.ObjectId, ref: "Board", required: true },
+    entryType: { type: String, required: true, enum: ["SimpleQuestion", "PictureQuestion", "MultipleChoice"] },
+    questionId: { type: Schema.Types.ObjectId, ref: "Question", required: true },
+    answerId: { type: Schema.Types.ObjectId, ref: "Answer", required: true },
+});
+
+// Virtual for player's URL
+BoardEntrySchema.virtual("url").get(function () {
+  // We don't use an arrow function as we'll need the this object
+  return `/board/entry/${this._id}`;
+});
+
+// Export model
+module.exports = mongoose.model("BoardEntry", BoardEntrySchema);

src/server/models/BoardModel.js

@@ -0,0 +1,23 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const BoardSchema = new Schema({
+  ownerId: { type: Schema.Types.ObjectId, ref: "User", required: true },
+  name: { type: String, required: true, maxLength: 100 },
+  categories: { type: [Object], required: false, default: [] },
+});
+
+// Virtual for player's URL
+BoardSchema.virtual("url").get(function () {
+  // We don't use an arrow function as we'll need the this object
+  return `/board/${this._id}`;
+});
+
+BoardSchema.virtual("setFromPostObject").set( function( postObject ){
+  this.name = postObject.boardName;
+  this.categories = postObject.categories;
+})
+
+// Export model
+module.exports = mongoose.model("Board", BoardSchema);

src/server/models/GameModel.js

@@ -0,0 +1,23 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const GameSchema = new Schema({
+  code: { type: String, required: true },
+  host: { type: Schema.Types.ObjectId, ref: "User", required: true },
+  board: { type: Schema.Types.ObjectId, ref: "Board", required: false },
+  players: { type: [Schema.Types.ObjectId], ref: "Player", required: true },
+  acceptAnswers: { type: Boolean, required: true, default: false },
+  answeredBoardEntries: { type: [Object], default: [] },
+  state: { type: String, required: true, default: "CREATED" },
+  createdTimestamp: { type: Date, required: true, default: new Date() },
+});
+
+// Virtual for player's URL
+GameSchema.virtual("url").get(function () {
+  // We don't use an arrow function as we'll need the this object
+  return `/game/${this._id}`;
+});
+
+// Export model
+module.exports = mongoose.model("Game", GameSchema);

src/server/models/ImageModel.js

@@ -0,0 +1,14 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const ImageSchema = new Schema({
+  ownerId: { type: Schema.Types.ObjectId, ref: "User", required: true },
+  categoryIndex: { type: Number, required: true },
+  boardEntryIndex: { type: Number, required: true },
+  questionIndex: { type: Number, required: true },
+  filename: { type: String, required: true, },
+});
+
+// Export model
+module.exports = mongoose.model("Image", ImageSchema);

src/server/models/PlayerModel.js

@@ -0,0 +1,12 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const PlayerSchema = new Schema({
+  name: { type: String, required: true, maxLength: 100 },
+  points: { type: Number },
+  acceptAnswers: { type: Boolean, default: false }
+});
+
+// Export model
+module.exports = mongoose.model("Player", PlayerSchema);

src/server/models/QuestionModel.js

@@ -0,0 +1,16 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const QuestionSchema = new Schema({
+    value: { type: String, required: true, maxLength: 255 },
+});
+
+// Virtual for player's URL
+QuestionSchema.virtual("url").get(function () {
+  // We don't use an arrow function as we'll need the this object
+  return `/question/${this._id}`;
+});
+
+// Export model
+module.exports = mongoose.model("Question", QuestionSchema);

src/server/models/UserModel.js

@@ -0,0 +1,23 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+const UserSchema = new Schema({
+  username: { 
+    type: String,
+    required: true,
+    maxLength: 100,
+    unique: true,
+   },
+  password: { type: String, required: true, },
+  boards: [{ type: Schema.Types.ObjectId, ref: "Board" }],
+});
+
+// Virtual for player's URL
+UserSchema.virtual("url").get(function () {
+  // We don't use an arrow function as we'll need the this object
+  return `/user/${this._id}`;
+});
+
+// Export model
+module.exports = mongoose.model("User", UserSchema);

src/server/routes/GameRouter.js

@@ -0,0 +1,105 @@
+const express = require("express");
+const router = express.Router();
+
+const gameController = require("../controllers/GameControllerMongoose");
+
+router.get("/list", (req, res) => {
+  res.send(gameController.listGames());
+});
+
+// Add Game route.
+router.post("/host", (req, res) => {
+  if (req.session.user !== undefined) {
+    gameController.findGameByHostId( req.session.user )
+    .then( ( game ) => {
+      if( game ){
+        return game;
+      } else {
+        return gameController.addGame(req.session.user)
+      }
+    })
+    // gameController
+      // .addGame(req.session.user)
+      .then( ( game ) => {
+        return setSessionGame( req, game );
+      })
+      .then((game) => {
+        res.send({ success: true, code: game.code });
+      })
+      .catch((err) => {
+        res.send({ success: false, error: err });
+      });
+  } else {
+    res.send({ success: false, error: "To host a game you need to be logged in!" });
+  }
+});
+
+router.get("/join/setup/:code", (req, res) => {
+  console.log("Getting game with code: ", req.params.code);
+  gameController.findGameWithCode(req.params.code)
+    .then( ( game ) => {
+      return setSessionGame( req, game );
+    })
+		.then( ( game ) => {
+			res.send({ success: true, });
+		})
+    .catch((err) => {
+      res.status(200).send({ success: false, error: { name: err.name, message: err.message } });
+    });
+});
+
+router.get("/check/:gameId", (req, res) => {
+  console.log("Getting game with id: ", req.params.gameId);
+  let isHost = false;
+  gameController.findGameById( req.params.gameId )
+    .then( ( game ) => {
+      if( req.session.user !== undefined && game.host === req.session.user ){
+        isHost = true;
+      }
+      return setSessionGame( req, game );
+    })
+		.then( ( game ) => {
+			res.send({ success: true, gameCode: game.code, isHost: isHost, gameState: game.state });
+		})
+    .catch((err) => {
+      res.status(200).send({ success: false, error: { name: err.name, message: err.message } });
+    });
+});
+
+router.get("/:gameId/board", (req, res) => {
+  console.log("Getting board for game with id: ", req.params.gameId);
+  gameController.findBoardForGameId( req.params.gameId )
+    .then( ( board ) => {
+			res.send({ success: true, board: board, });
+		})
+    .catch((err) => {
+      res.status(200).send({ success: false, error: { name: err.name, message: err.message } });
+    });
+});
+
+router.get("/file/:filename", (req, res) => {
+  console.log("Getting file: ", req.params.filename);
+  let options = {
+    root: 'public/uploads',
+    dotfiles: 'deny',
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    }
+  }
+  res.sendFile( req.params.filename, options );
+});
+
+module.exports = router;
+
+function setSessionGame( req, game) {
+  return new Promise((resolve, reject) => {
+    req.session.game = game._id.toString();
+    req.session.save((errSave) => {
+      if (errSave) {
+        reject();
+      } else {
+        resolve( game );
+      }
+    });
+  });
+}

src/server/routes/UserRouter.js

@@ -0,0 +1,284 @@
+const express = require("express");
+const router = express.Router();
+
+const userController = require("../controllers/UserControllerMongoose");
+const boardController = require("../controllers/BoardControllerMongoose");
+const multer = require('multer');
+const fs = require("node:fs/promises");
+
+// Initialize Multer File Uplaod
+const storage = multer.diskStorage({
+    destination: (req, file, cb) => {
+        cb( null, 'public/uploads' )
+    },
+    filename: (req, file, cb) => {
+        let fileExtension = '.jpg';
+        if( file.mimetype === 'image/png' ){
+            fileExtension = '.png';
+        }
+        if( file.mimetype === 'image/gif' ){
+            fileExtension = '.gif';
+        }
+        if( file.mimetype === 'audio/mpeg' ){
+            fileExtension = '.mp3';
+        }
+
+        let board = JSON.parse( req.body.board );
+        let indices = file.originalname.split(":");
+        let filename = board.boardId + '_' +
+            indices[0] + '_' +
+            indices[1] + '_' +
+            indices[2] +
+            fileExtension;
+
+        fs.access( "public/uploads/" + filename, fs.constants.F_OK )
+        .then( ( ) =>{
+            return fs.rm( "public/uploads/" + filename );
+        })
+        .then( () => {
+
+        })
+        .catch( ( _err ) => {
+            //No need to delete, but need to catch it so it won't bubble
+        })
+        .finally( () => {
+            cb( null, filename );
+        });
+
+    }
+});
+
+const fileFilterFn = function( req, file, cb ){
+
+    if( req.session.user === undefined ){
+        cb( new Error( "Only logged in Users can upload pictures" ) );
+        return;
+    }
+
+    if( !["image/jpeg","image/jpg","image/png","image/gif","audio/mpeg"].includes( file.mimetype ) ){
+        cb( new Error( "MIME Type not supported!" ) );
+        return;
+    }
+    
+    if( file.size > 1024 * 1024 * 5){
+        cb( new Error( "File is too large! Must be less than 5MB" ) );
+        return;
+    }
+
+    let board = JSON.parse( req.body.board );
+
+    boardController.isBoardFromUser( board.boardId, req.session.user )
+    .then( ( isFromUser ) => {
+        if( !isFromUser && board.boardId !== undefined ){
+            cb( new Error( "The associated board is not the users" ) );
+        } else {
+            if( req.session.user === undefined ){
+                cb( new Error( "Only logged in Users can upload pictures" ) );
+                return;
+            }
+        
+            let indices = file.originalname.split(":");
+            if( indices.length !== 3 ){
+                cb( new Error( "Image index not found" ) );
+                return;
+            }
+            if(
+
+                board.categories[indices[0]] === undefined ||
+                board.categories[indices[0]].boardEntries[indices[1]] === undefined ||
+                ( 
+                    board.categories[indices[0]].boardEntries[indices[1]].questions[indices[2]] === undefined &&
+                    indices[2] !== 'answer'
+                )
+            ){
+                cb( new Error( "No entry found for image" ) );
+                return;
+            }
+
+            cb( null, true );
+        }
+    });
+
+}
+
+const upload = multer({ storage: storage, fileFilter: fileFilterFn });
+
+router.get("/", (req, res)=>{
+    if( req.session.user !== undefined ){
+        userController.findUser( req.session.user )
+        .then( user => {
+            res.send({success: true, user: { username: user.username } } );
+        })
+        .catch( err => {
+            console.debug(err);
+            res.send( { success: false, error: "No User found" } );
+        });
+    }else{
+        res.send( { success: false, error: "No User found" } );
+    }
+});
+
+router.get("/list", (req, res)=>{
+    res.send(userController.listUsers());
+});
+
+// Add User route.
+router.post("/signup", (req, res)=>{
+    userController.addUser(req.body.username, req.body.password)
+    .then( (user) => {
+        return setSessionUser( req, user );
+    })
+    .then( ( user ) => {
+        res.send({success: true, user: { username: user.username } } );
+    })
+    .catch( (err) => {
+        if( err.userTaken ){
+            res.send( { success: false, error: err.message } );
+        } else {
+            res.status(500).send({success:false, error: "Error while persisting data"})
+        }
+    })
+});
+
+router.post("/login", (req, res)=>{
+    if( req.session.user !== undefined ){
+        userController.findUser( req.session.user )
+        .then( ( res ) => {
+            res.send({success: true, user: { username: req.session.user } } );
+        })
+        .catch( ( err ) => {
+            res.send({success:false, error: "Error with logging you in" });
+        })
+    }else{
+        userController.loginUser(req.body.username, req.body.password)
+        .then( (user) => {
+            return setSessionUser( req, user );
+        })
+        .then( ( user ) => {
+            res.send({success: true, user: { username: user.username } } );
+        })
+        .catch( (err) => {
+            if( err.name === "WrongCredentialsError" ){
+                res.send({ success: false, error: "Wrong or unknown credentials" });
+            }else{
+                res.status(500).send({success:false, error: "Error while persisting data" });
+            }
+        })
+    }
+});
+
+router.post("/logout", (req, res)=>{
+    if( req.session.user === undefined ){
+        //Is not logged in
+        res.send({success: false, error: "Not logged in!" });
+    }else{
+        req.session.destroy( ( errDes )=>{
+            if( errDes ){
+                res.status( 500 ).send({success:false, error: "Error while logging out of session"});
+            } else {
+                res.send({success: true, message: "Successfully logged out"});
+            }
+        });
+    }
+});
+
+router.get("/boards", (req, res) => {
+    if( req.session.user === undefined ){
+        res.send( { success: false, error: "Not logged in!" } );
+    } else {
+        userController.getUserBoards( req.session.user )
+        .then( ( boards ) => {
+            res.send( { success: true, boards: boards } );
+        })
+        .catch( ( err ) => {
+            res.send( { success: false, error: err, message: err.message } );
+        });
+    }
+});
+
+router.post("/boards/save", upload.fields( [ { name: "images" }, { name: "audio" } ] ), (req, res) => {
+    if( req.session.user === undefined ){
+        res.send( { success: false, error: "Not logged in!" } );
+    } else {
+        let board = JSON.parse( req.body.board );
+        let imageFiles = [];
+        let audioFiles = [];
+        if( req.files["images"] ){
+            imageFiles = req.files["images"];
+        }
+        if( req.files["audio"] ){
+            audioFiles = req.files["audio"];
+        }
+        let filesCombined = imageFiles.concat( audioFiles );
+        for( let file of filesCombined ){
+            let indices = file.originalname.split(":");
+            let cIndex = Number(indices[0]);
+            let bEIndex = Number(indices[1]);
+            let qIndex = Number(indices[2]);
+            if( indices[2] === "answer" ){
+                board.categories[cIndex].boardEntries[bEIndex].answer.filename = file.filename;
+            } else {
+                board.categories[cIndex].boardEntries[bEIndex].questions[qIndex].filename = file.filename
+            }
+        }
+        return boardController.addBoard( board, req.session.user )
+        .then( ( board ) => {
+            return userController.addBoardToUser( board );
+        })
+        .then( ( board ) => {
+            res.send( { success: true, board: board } );
+        })
+        .catch( ( err ) => {
+            res.send( { success: false, error: err } );
+        });
+    }
+});
+
+router.get("/boards/:id", (req, res) => {
+    if( req.session.user === undefined ){
+        res.send( { success: false, error: "Not logged in!" } );
+    } else {
+        userController.findUser( req.session.user )
+        .then( ( user ) => {
+            let boardId;
+            for( let userBoard of user.boards ){
+                if( userBoard.toString() === req.params.id ){
+                    boardId = userBoard;
+                    break;
+                }
+            }
+            if( boardId !== undefined ){
+                return boardController.findBoard( boardId )
+            } else {
+                throw new Error("No board found with id " + req.params.id + " for user " + req.session.user );
+            }
+        })
+        .then( ( board ) => {
+            res.send( { success: true, board: board } );
+        })
+        .catch( ( err ) => {
+            res.send( { success: false, error: err } );
+        });
+    }
+});
+
+module.exports = router;
+
+function setSessionUser( req, user ){
+    return new Promise( ( resolve, reject ) => {
+        req.session.regenerate( ( errReg )=>{
+            if( errReg ){
+                reject();
+            }else{
+                req.session.user = user._id.toString();
+                req.session.save( ( errSave )=>{
+                    if( errSave ){
+                        reject();
+                    }else{
+                        resolve( user );
+                    }
+                } );
+            }
+        });
+    })
+}

src/server/server.js

@@ -0,0 +1,178 @@
+const express = require('express');
+const path = require('path');
+const WebSocketServer = require("ws").Server;
+const logger = require('morgan');
+const bodyParser = require('body-parser');
+const history = require('connect-history-api-fallback');
+const session = require("express-session");
+const cors = require("cors");
+const mongoose = require("mongoose");
+const MongoDBStore = require("connect-mongodb-session")(session);
+const helmet = require("helmet");
+
+require("dotenv").config();
+
+//Create Express app
+const app = express();
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({'extended':'false'}));
+app.use(cors({
+  origin: ["jeobeardy.com", "www.jeobeardy.com"],
+  credentials: true,
+}));
+
+app.use(helmet(
+  {
+    contentSecurityPolicy: {
+      // useDefaults: false,
+      directives: {
+        "default-src": ["'self'"],
+        "object-src": ["'none'"],
+        "script-src": ["'unsafe-inline'", "'unsafe-eval'", "'self'" ],
+        "base-uri": ["'none'"],
+        "frame-src": ["'none'"],
+        "media-src": ["'self'", "data:"],
+        "style-src-elem": ["'self'", "'unsafe-inline'"],
+        "connect-src": ["'self'", "ws:"],
+	"img-src": ["'self'", "blob:", "data:"],
+      }
+    }
+  }
+));
+
+
+const mongoDB = process.env.API_MONGO_CONN_URI;
+const storeSecret = process.env.API_SESSION_STORE_SECRET;
+const sessionSecureFlag = process.env.API_SESSION_COOKIE_SECURE === 'true';
+
+// Initialize sesssion storage.
+const store = new MongoDBStore({
+  uri: mongoDB,
+  collection: 'sessions',
+});
+
+store.on('error', function(error) {
+  console.log("Store Error: ", error);
+});
+
+//Setup Mongoose
+mongoose.set('strictQuery', false);
+
+main().then(()=> console.log("Connected to MongoDB")).catch(err => console.log(err));
+async function main() {
+  await mongoose.connect(mongoDB);
+}
+
+const sessionParser = session({
+  store: store,
+  secret: storeSecret,
+  cookie: {
+    secure: sessionSecureFlag,
+    httpOnly: true,
+    sameSite: true,
+  },
+  resave: false,
+  saveUninitialized: false
+})
+app.use(sessionParser);
+app.set("trust proxy", 1);
+
+
+//Setup WebSocketServer
+const webSocketHandler = require("./websocket/handler.js");
+let wsServerList = [];
+
+let wsServerOnConnectionCallback = ( socket, wsServer, sessionObjects  ) => {
+
+  console.log(sessionObjects.sessionUserId);
+  if( sessionObjects ) {
+    socket.locals = {};
+    socket.locals.user = sessionObjects.sessionUserId;
+    socket.locals.game = sessionObjects.sessionGameId;
+  }
+
+  socket.on("error", ( data ) => {
+    console.log("Got Error: ", data );
+  });
+  socket.on("message", ( data ) => {
+    let gameSocketList = wsServerList.find( wsServerEntry => wsServerEntry.game === socket.locals.game );
+    webSocketHandler.handleMessage( gameSocketList, socket, data )
+    .catch( ( err ) => {
+      console.error( err );
+    });
+  });
+  socket.on("open", ( ) => {
+    console.log("WS opened!");
+  });
+  socket.on("close", ( ) => {
+    let gameSocketList = wsServerList.find( wsServerEntry => wsServerEntry.game === socket.locals.game );
+    webSocketHandler.handleConnectionClose( gameSocketList, socket);
+    console.log("WS closed!");
+  });
+  console.log("WS Connected!");
+}
+
+function onSocketError( error ){
+  console.log( error );
+}
+
+
+//Import Routes
+const userRoutes = require("./routes/UserRouter");
+const gameRoutes = require("./routes/GameRouter");
+
+//API Endpoints
+app.use('/api/user', userRoutes);
+app.use('/api/game', gameRoutes);
+
+
+//Enable History for Vue Routes
+app.use(history());
+app.use(logger('dev'));
+app.use(express.static(path.join(__dirname, '/../../dist')));
+
+//Listen to port
+const port = 3000;
+const server = app.listen(port, () => {
+  console.log(`Listening on port ${port}!`);
+});
+
+server.on("upgrade", ( req, socket, head ) => {
+  sessionParser( req, {}, () => {
+    if( req.session.game === undefined ){
+      return;
+    }
+
+    let isNew = false;
+    let sessionObjects = {
+      sessionUserId: req.session.user,
+      sessionGameId: req.session.game,
+    }
+    
+    let wsServerEntryFound = wsServerList.find( wsServerEntry => wsServerEntry.game === req.session.game );
+    let wsServer;
+    if( wsServerEntryFound === undefined ){
+      wsServer = new WebSocketServer( { noServer: true } );
+      isNew = true;
+      wsServer.on( "connection", wsServerOnConnectionCallback );
+    } else {
+      wsServer = wsServerEntryFound.wsServer;
+    }
+
+    wsServer.handleUpgrade(req, socket, head, function(ws){
+        wsServer.emit('connection', ws, wsServer, sessionObjects);
+    });
+
+    if( isNew ){
+      wsServerList.push( {
+        game: req.session.game,
+        wsServer: wsServer,
+      } );
+    }
+
+
+  });
+
+  socket.on("error", onSocketError);
+
+});

src/server/util.js

@@ -0,0 +1,13 @@
+const crypto = require("crypto");
+
+exports.makeid = (length) => {
+  let result = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  let counter = 0;
+  while (counter < length) {
+    result += characters.charAt(crypto.randomInt(0, charactersLength) );
+    counter += 1;
+  }
+  return result.toUpperCase();
+}

src/server/websocket/handler.js

@@ -0,0 +1,429 @@
+const gameController = require("../controllers/GameControllerMongoose");
+const playerController = require("../controllers/PlayerControllerMongoose");
+
+
+exports.handleMessage = ( gameSocketList, socket, dataRaw ) => {
+  return new Promise( (resolve, reject) => {
+
+    if( dataRaw === undefined || !(dataRaw instanceof Object) ){
+      console.log("Data not parseable")
+      return false;
+    }
+    let data = JSON.parse( dataRaw );
+    
+    console.log(data)
+    let payload = data.payload;
+    console.log(payload)
+    let sendObj = {};
+
+    if( payload === undefined && !["host"].includes( data.event ) ){
+      sendObj = { event: "payloadIncomplete", message: "The sent event doesn't have all required attributes in the payload!" };
+      socket.send( JSON.stringify( sendObj ) );
+      socket.close();
+      reject( new Error("No payload sent"));
+    }
+
+    switch( data.event ){
+      case "joinGame":
+        if( payload.gameCode !== undefined && payload.playerName !== undefined ){
+          playerController.addPlayer( payload.playerName )
+          .then( ( player ) => {
+            if( socket.locals === undefined ){
+              socket.locals = {};
+            }
+            socket.locals.player = player._id.toString();
+            return gameController.addPlayerToGame( payload.gameCode, player );
+          })
+          .then( ( game ) => {
+            if( game === null ){
+              throw new Error("Game not found");
+            }
+            //TODO: GameState? InLobby, InGame?????
+            sendObj = { event: "joinSuccess", message: "Succesfully joined the game!", payload: { gameId: game._id, playerId: socket.locals.player, gameState: game.state }, };
+            socket.send( JSON.stringify( sendObj ) );
+            if( game.state === "IN_PROGRESS" ){
+              sendObj = { event: "gameStarted", message: "Game is starting", payload: { gameId: game._id, board: game.board }, };
+              socket.send( JSON.stringify( sendObj ) );
+            }
+            let message = `${payload.playerName} joined the Game`;
+            let sendingData = { players: game.players }
+            sendAllPlayers( socket, gameSocketList, "playersUpdated", message, sendingData )
+            resolve();
+          })
+          .catch( err => {
+            sendObj = { event: "joinFail", message: "Something went wrong while joining the game!" };
+            socket.send( JSON.stringify( sendObj ) );
+            reject( err );
+          });
+        } else {
+          sendObj = { event: "payloadIncomplete", message: "The sent event doesn't have all required attributes in the payload!" };
+          socket.send( JSON.stringify( sendObj ) );
+          socket.close();
+          resolve();
+        }
+        break;
+      case "host":
+        if( socket.locals === undefined || socket.locals.user === undefined || socket.locals.game === undefined ){
+          sendObj = { event: "noUser", message: "No User detected. Make sure you are logged in to host a game!" };
+          socket.send( JSON.stringify( sendObj ) );
+          socket.close();
+          resolve();
+        } else {
+          gameController.findGameByIdAndSetStateAndPopulateBoard( socket.locals.game, "IN_LOBBY" )
+          .then( ( game ) => {
+            console.log("Game successfully entered as host: ", game._id );
+            socket.locals.game = game._id.toString();
+            socket.locals.isHost = true;
+            sendObj = { event: "gameCreated", payload: { gameId: game._id, players: game.players }, message: "Game successfully created!" };
+            socket.send( JSON.stringify( sendObj ) );
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        }
+        break;
+      case "continueHost":
+        if( socket.locals === undefined || socket.locals.user === undefined || socket.locals.game === undefined ){
+          sendObj = { event: "noUser", message: "No User detected. Make sure you are logged in to host a game!" };
+          socket.send( JSON.stringify( sendObj ) );
+          socket.close();
+          resolve();
+        } else {
+          gameController.findGameById( socket.locals.game )
+          .then( ( game ) => {
+            console.log("Game successfully entered as host: ", game._id );
+            // socket.locals.game = game._id.toString();
+            socket.locals.isHost = true;
+            sendObj = { event: "hostRejoined", payload: { gameId: game._id, players: game.players }, message: "Host rejoined Game successfully!" };
+            socket.send( JSON.stringify( sendObj ) );
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        }
+        break;
+      case "selectBoardForGame":
+        if( socket.locals.isHost ){
+          gameController.findGameById( socket.locals.game )
+          .then( ( game ) => {
+            game.board = payload.boardId;
+            return game.save();
+          })
+          .then( ( savedGame ) => {
+            let message = "The board which will be played has been changed";
+            let sendingData = { boardId: savedGame.board };
+            sendAllPlayers( socket, gameSocketList, "boardSelectedForGame", message, sendingData);
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "startGame":
+        if( socket.locals.isHost ){
+          gameController.findGameByIdAndSetStateAndPopulateBoard( socket.locals.game, "IN_PROGRESS" )
+          .then( ( game ) => {
+            let message = "Game is starting";
+            let sendingData = { gameId: game._id, board: game.board };
+            sendAllPlayers( socket, gameSocketList, "gameStarted", message, sendingData);
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "selectBoardEntry":
+        if( socket.locals.isHost ){
+          let message = `BoardEntry ${payload.boardEntryIndex} selected`;
+          let sendingData = { categoryIndex: payload.categoryIndex, boardEntryIndex: payload.boardEntryIndex };
+          sendAllPlayers( socket, gameSocketList, "boardEntrySelected", message, sendingData );
+          resolve();
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "selectBoard":
+        if( socket.locals.isHost ){
+          let message = "Board selected";
+          sendAllPlayers( socket, gameSocketList, "boardSelected", message, {});
+          resolve();
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "showQuestion":
+        if( socket.locals.isHost ){
+          gameController.findGameAndSetAccepting( socket.locals.game, true )
+          .then( ( game ) => {
+            return playerController.setAllPlayersAcceptAnswers( game.players.map( playerEntry => playerEntry._id ), true )
+          })
+          .then( () => {
+            let message = "Question revealed";
+            sendAllPlayers( socket, gameSocketList, "questionRevealed", message, {});
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "playAudioForQuestion":
+        if( socket.locals.isHost ){
+          let message = "Audio started playing";
+          sendAllPlayers( socket, gameSocketList, "audioPlaying", message, {});
+          resolve();
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "stopAudioForQuestion":
+        if( socket.locals.isHost ){
+          let message = "Audio stopped playing";
+          sendAllPlayers( socket, gameSocketList, "audioStopped", message, {});
+          resolve();
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "hideQuestion":
+        if( socket.locals.isHost ){
+          gameController.findGameAndSetAccepting( socket.locals.game, false )
+          .then( ( _game ) => {
+            let message = "Question hidden";
+          sendAllPlayers( socket, gameSocketList, "questionHidden", message, {});
+          resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "selectQuestionLayer":
+        if( socket.locals.isHost ){
+          let message = `Question Layer ${payload.questionIndex} selected`;
+          let sendingData = { questionIndex: payload.questionIndex };
+          sendAllPlayers( socket, gameSocketList, "questionLayerSelected", message, sendingData );
+          resolve();
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "showAnswer":
+        if( socket.locals.isHost ){
+          gameController.findGameAndSetAccepting( socket.locals.game, false )
+          .then( ( _game ) => {
+            let message = "Answer revealed";
+            sendAllPlayers( socket, gameSocketList, "answerRevealed", message, {});
+            resolve();
+          })
+          .catch( ( err ) =>  {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "hideAnswer":
+        if( socket.locals.isHost ){
+          let message = "Answer hidden";
+          sendAllPlayers( socket, gameSocketList, "answerHidden", message, {});
+          resolve();
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "addPointsToPlayer":
+        if( socket.locals.isHost ){
+          gameController.findGameAndSetAccepting( socket.locals.game, payload.reopenQuestion )
+          .then( ( game ) => {
+            let playerIndex = game.players.findIndex( playerEntry => playerEntry._id.toString() === payload.playerId );
+            if( playerIndex === -1 ){
+              throw new Error("Player not found");
+            }
+            let adjustedPoints = Number(game.players[playerIndex].points) + Number(payload.pointsAdjustment);
+            return gameController.setPlayerPointsAndReturnGame( game._id, payload.playerId, adjustedPoints );
+          })
+          .then( ( game ) => {
+            let playerIndex = game.players.findIndex( playerEntry => playerEntry._id.toString() === payload.playerId );
+            if( playerIndex === -1 ){
+              throw new Error("Player not found");
+            } else {
+              let message = `Player ${payload.playerName} got ${payload.pointsAdjustment} points`;
+              let sendingData = { players: game.players, acceptAnswers: game.acceptAnswers }
+              sendAllPlayers( socket, gameSocketList, "pointsAdjusted", message, sendingData );
+              resolve();
+            };
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "questionAnswered":
+        if( socket.locals.isHost ){
+          gameController.findGameAndAddAnsweredEntry( socket.locals.game, payload.categoryIndex, payload.boardEntryIndex )
+          .then( ( _game ) => {
+            let message = `A question has been marked as answered`;
+            let sendingData = { categoryIndex: payload.categoryIndex, boardEntryIndex: payload.boardEntryIndex }
+            sendAllPlayers( socket, gameSocketList, "questionAnswered", message, sendingData );
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "questionAnsweredRevert":
+        if( socket.locals.isHost ){
+          gameController.findGameAndRemoveAnsweredEntry( socket.locals.game, payload.categoryIndex, payload.boardEntryIndex )
+          .then( ( _game ) => {
+            let message = `A answered question has been reverted to not answered`;
+            let sendingData = { categoryIndex: payload.categoryIndex, boardEntryIndex: payload.boardEntryIndex }
+            sendAllPlayers( socket, gameSocketList, "questionNotAnswered", message, sendingData );
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("Message not sent by host") );
+        }
+        break;
+      case "pressBuzzer":
+          if( socket.locals.player !== undefined ){
+            //maybe add game option if player can buzzer multiple times?
+            playerController.checkPlayerAcceptAnswersAndSetAccepting( socket.locals.player, false )
+            .then( ( isAcceptingAnswers ) => {
+              if( isAcceptingAnswers ){
+                return gameController.findAcceptingGameAndSetNotAccepting( socket.locals.game )
+              } else {
+                return false;
+              }
+            })
+            .then( ( foundGame ) => {
+              if( foundGame ){
+                sendAllPlayers( socket, gameSocketList, "playerBuzzered", "A player pressed the buzzer", { playerId: socket.locals.player });
+              }
+              resolve();
+            })
+            .catch( ( err ) => {
+              reject( err );
+            });
+          } else {
+            reject( new Error("No playerId found for connection") );
+          }
+        break;
+      case "updateAnswerText":
+        if( socket.locals.player !== undefined ){
+          gameController.findGameAcceptingAnswers( socket.locals.game )
+          .then( ( _game ) => {
+            sendToHost( socket, gameSocketList, "playerAnswerTextUpdated", "A player updated their answer text", { playerId: socket.locals.player, updatedText: payload.updatedText });
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          })
+        } else {
+          reject( new Error("No playerId found for connection") );
+        }
+        break;
+      case "lockQuestion":
+        if( socket.locals.isHost ){
+          gameController.findGameAndSetAccepting( socket.locals.game, false )
+          .then( ( _game ) => {
+            sendAllPlayers( socket, gameSocketList, "questionLocked", "Question was locked. Answers can no longer be changed", {});
+            resolve();
+          })
+          .catch( ( err ) => {
+            reject( err );
+          });
+        } else {
+          reject( new Error("No playerId found for connection") );
+        }
+        break;
+      case "revealPlayerAnswers":
+        if( socket.locals.isHost ){
+          sendAllPlayers( socket, gameSocketList, "playerAnswersRevealed", "Answers of one or more players revealed", { revealedAnswers: payload });
+          resolve();
+        } else {
+          reject( new Error("No playerId found for connection") );
+        }
+        break;
+    }
+  });
+}
+
+exports.handleConnectionClose = ( gameSocketList, socket) => {
+  if( gameSocketList.wsServer.clients.size === 0 ){
+    gameController.deleteGame( socket.locals.game )
+    .catch( ( err ) => {
+      console.error( "An error occured while deleting an unused game!" );
+      console.error( err );
+    })
+  }
+  if( socket.locals.isHost ){
+    //TODO implement for host
+  } else {
+    gameController.removePlayerFromGame( socket.locals.game, socket.locals.player )
+    .then( ( _updatedGame ) => {
+      return playerController.deletePlayer( socket.locals.player )
+    })
+    .then( ( player ) => {
+      if( player ){
+        sendAllPlayers( socket, gameSocketList, "playerLeft", "A player left the game", { player: player }, );
+      }else {
+        throw new Error(`Player not found for deletion: ${socket.locals.player}`);
+      }
+    })
+    .catch( ( err ) => {
+      console.error( err );
+    });
+  }
+}
+
+function sendAllPlayers( socket, gameSocketList, eventName, message, payload ){
+  if( gameSocketList === undefined ){
+    throw new Error("Game not Found in SocketList");
+  }
+  gameSocketList.wsServer.clients.forEach( playerSocket => {
+    let sendObj = {
+      event: eventName,
+      message: message,
+      payload: payload
+    };
+    playerSocket.send( JSON.stringify( sendObj ) );
+  });
+}
+
+function sendToHost( socket, gameSocketList, eventName, message, payload ){
+  if( gameSocketList === undefined ){
+    throw new Error("Game not Found in SocketList");
+  }
+  gameSocketList.wsServer.clients.forEach( playerSocket => {
+    if( playerSocket.locals.isHost ){
+      let sendObj = {
+        event: eventName,
+        message: message,
+        payload: payload
+      };
+      playerSocket.send( JSON.stringify( sendObj ) );
+      return;
+    }
+  });
+}

src/webapp/App.vue

@@ -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>

src/webapp/assets/images/soundform.svg

@@ -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>

src/webapp/assets/logo.svg

@@ -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>

src/webapp/assets/scss/styles.scss

@@ -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% );
+}

src/webapp/components/blocks/BoardCard.vue

@@ -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>

src/webapp/components/blocks/BoardEntryCard.vue

@@ -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>

src/webapp/components/blocks/BoardListCard.vue

@@ -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>

src/webapp/components/blocks/CategoryCard.vue

@@ -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>

src/webapp/components/blocks/CategoryHeaderCard.vue

@@ -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>

src/webapp/components/blocks/CreateActions.vue

@@ -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>

src/webapp/components/blocks/CustomTextSaveOrCancel.vue

@@ -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>

src/webapp/components/blocks/PlayerListEntry.vue

@@ -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>

src/webapp/components/blocks/QuestionCard.vue

@@ -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>

src/webapp/components/common/Navbar.vue

@@ -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>

src/webapp/components/pages/About.vue

@@ -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>

src/webapp/components/pages/Create.vue

@@ -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>

src/webapp/components/pages/Game.vue

@@ -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>

src/webapp/components/pages/Home.vue

@@ -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>

src/webapp/components/pages/Join.vue

@@ -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>

src/webapp/components/pages/Lobby.vue

@@ -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>

src/webapp/components/pages/Login.vue

@@ -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>

src/webapp/components/pages/Profile.vue

@@ -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>

src/webapp/components/pages/Signup.vue

@@ -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>

src/webapp/components/views/AnswerView.vue

@@ -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>

src/webapp/components/views/BoardCategoriesView.vue

@@ -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>

src/webapp/components/views/BoardEditView.vue

@@ -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>

src/webapp/components/views/BoardEntryEditView.vue

@@ -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>

src/webapp/components/views/BoardEntryView.vue

@@ -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>

src/webapp/components/views/BoardListView.vue

@@ -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>

src/webapp/components/views/BoardView.vue

@@ -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>

src/webapp/components/views/CategoryEditView.vue

@@ -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>

src/webapp/components/views/GameQuestionsView.vue

@@ -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>

src/webapp/components/views/GameView.vue

@@ -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>

src/webapp/components/views/GenericMultiButtonModal.vue

@@ -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>

src/webapp/components/views/HostInteractionView.vue

@@ -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>

src/webapp/components/views/PlayerInteractionView.vue

@@ -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>

src/webapp/components/views/PlayersView.vue

@@ -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>

src/webapp/components/views/QuestionView.vue

@@ -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>

src/webapp/composables/loginCheck.js

@@ -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( "/" );
+      }
+    }
+  );
+}

src/webapp/main.js

@@ -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");

src/webapp/models/Answer.js

@@ -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;
+  // }
+
+}

src/webapp/models/Board.js

@@ -0,0 +1,8 @@
+export default class Board{
+  
+  constructor( id, name, categories ){
+    this.boardId = id;
+    this.boardName = name;
+    this.categories = categories;
+  }
+}

src/webapp/models/BoardEntry.js

@@ -0,0 +1,10 @@
+export default class BoardEntry{
+
+  constructor( questionArray, answer, points ){
+    this.questions = questionArray;
+    this.answer = answer;
+    this.points = points;
+    this.isAnswered = false;
+  }
+
+}

src/webapp/models/Category.js

@@ -0,0 +1,8 @@
+export default class Category{
+  constructor( name, description, entries ){
+    this.categoryName = name;
+    this.categoryDescription = description;
+    this.boardEntries = entries;
+  }
+
+}

src/webapp/models/Question.js

@@ -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;
+  // }
+
+}

src/webapp/router/index.js

@@ -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;

src/webapp/services/GameService.js

@@ -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",
+})

src/webapp/services/UserService.js

@@ -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",
+                }
+            }
+        );
+    }
+
+}

src/webapp/services/util.js

@@ -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 );
+}

src/webapp/stores/GameCreationStore.js

@@ -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 ) => {
+      });
+    }
+  }
+})

src/webapp/stores/GameStore.js

@@ -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;
+        }
+      });
+    }
+  },
+})