[PR] Node 18 (#16)

* node 18

* should finish this up

.eslintrc.js

@@ -14,31 +14,27 @@ module.exports = {
     parser: 'babel-eslint'
   },
   env: {
-    browser: true,
+    browser: true
   },
   extends: [
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
     'plugin:vue/essential',
     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
     'standard'
-
   ],
   // required to lint *.vue files
-  plugins: [
-    'vue',
-    'strict-vue'
-  ],
+  plugins: ['vue', 'strict-vue'],
   // add your custom rules here
   rules: {
     // allow async-await
     'no-multi-spaces': 'off',
     'generator-star-spacing': 'off',
-    'camelcase' : [0, { 'properties': 'never' }],
-    "strict-vue/require-jsdoc": "off",
-		"strict-vue/no-root-store-calls": "error",
-    "strict-vue/no-root-store-assets": "error",
-    "vue/no-use-v-if-with-v-for": 'off',
+    camelcase: [0, { properties: 'never' }],
+    'strict-vue/require-jsdoc': 'off',
+    'strict-vue/no-root-store-calls': 'error',
+    'strict-vue/no-root-store-assets': 'error',
+    'vue/no-use-v-if-with-v-for': 'off',
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   }

.github/workflows/gh-deploy.yml

@@ -14,11 +14,13 @@ jobs:
       - name: Set-up Node
         uses: actions/setup-node@v1
         with:
-          node-version: 16
+          node-version: 18
       - name: npm install
         run: |
           npm install
       - name: npm build frontend
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
         run: |
           npm run build
       - name: deploy frontend to gh pages

.github/workflows/pr.yml

@@ -0,0 +1,25 @@
+name: test build
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build-deploy-gh-pages:
+    name: Build / Deploy to gh-pages
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set-up Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18
+      - name: npm install
+        run: |
+          npm install
+      - name: npm build frontend
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
+        run: |
+          npm run build

README.md

@@ -1,12 +1,15 @@
 ![Frontend Status](https://github.com/OSU-Sustainability-Office/sustainability_jeopardy/actions/workflows/gh-deploy.yml/badge.svg)
 
 # Sustainability Jeopardy
+
 This repository stores code for the OSU Sustainability Office's Sustainability Jeopardy game, used for tabling at various events. This repository used to store a previous version of jeopardy built with plain JS, PHP, HTML, and CSS. The current version has been updated to rely upon VueJS, and the rest of the standard OSU SO software stack.
 
 ## Installation Steps
+
 - Fork this repo
 - Change the package.json and backend/template.yaml to reflect correct project name
-- ```npm install```
+- `npm install`
 
 ### Other Notes
+
 - There is no "backend" for this app. This is because Jeopardy questions change so infrequently that I felt API infrastructure was overkill for this app. You will find all of the questions and answers hard-coded in the VueX store.

babel.config.js

@@ -8,9 +8,7 @@
 
 module.exports = function (api) {
   api.cache(true)
-  const presets = [
-    '@vue/app'
-  ]
+  const presets = ['@vue/app']
   return {
     presets
   }

old_jeopardy/README.md

@@ -1,81 +1,78 @@
 # sustainability_jeopardy
+
 A Jeopardy game made for the Sustainability Office. This was originally adapted from a quiz script written by Michal Nazarewicz. His original readme is below:
 
 # README.md from original Jeopardy Repo:
 
-Quiz script
-============
+# Quiz script
 
 Copyright 2013 Google Inc.
 Written by [Michał Nazarewicz](mailto:mina86@mina86.com).
 This is not a Google product.
 
-Overview
---------
+## Overview
 
 This is a simple quiz game which supports two players (or teams).
 
 The idea is that teams get questions alternately and if the first one
-does not give correct answer, the other gets a chance.  If neither
-answers correctly, that’s a tie.  Another way to play is to have teams
+does not give correct answer, the other gets a chance. If neither
+answers correctly, that’s a tie. Another way to play is to have teams
 use buzzers of some kind to determine which gets the first try at the
-question.  The way I’ve used the script is by having two asymmetric
+question. The way I’ve used the script is by having two asymmetric
 teams and the smaller one always getting the first chance.
 
-Configuration
--------------
+## Configuration
 
 Configuration is done mostly by modifying the `index.html` by changing
 content of the `TITLE` element which determines the title text shown
 at the top of the page, and the `#questions DIV` which determines
 categories and list of questions.
 
 Categories are defined by `H2` elements and each question and answer
-is specified as two `DIV` or `P` elements.  If question or answer is
+is specified as two `DIV` or `P` elements. If question or answer is
 a single paragraph a lone `P` element suffices, otherwise a `DIV` is
 necessary.
 
 Because of script’s limitations, at least two categories must be
-present.  There is no limit on number of questions per category, but
+present. There is no limit on number of questions per category, but
 if some categories have fewer questions, a greyed out box will be
 displayed.
 
 You can put almost any kind of HTML in either a question or an answer
-including images, embedded audio or video etc.  Beware that you may
+including images, embedded audio or video etc. Beware that you may
 need to add some styling for the elements to show up properly on the
 question board and when printing.
 
-Secondly, there is a `teams` variable in the `quiz.js` file.  It
+Secondly, there is a `teams` variable in the `quiz.js` file. It
 contains the names of the two teams that participate (and yes, there
-must be two teams).  Finally, if you want to localise the script to
+must be two teams). Finally, if you want to localise the script to
 a different language, you may change the value of `strTie` and
 `strClose` variables.
 
-Usage
------
+## Usage
 
 First of all, you should check print preview and print the web page as
-it will give you list of questions and answers for each category.  If
+it will give you list of questions and answers for each category. If
 your questions are not too long you should get one-page per category
-printout.  This may be helpful when hosting the game.
+printout. This may be helpful when hosting the game.
 
-Controls of the game itself should be straightforward.  As you open
+Controls of the game itself should be straightforward. As you open
 the site, a grid shows up with category names at the top and boxes
-indexed from 100 to 500 for each question in the category.  Clicking
+indexed from 100 to 500 for each question in the category. Clicking
 on a box brings up a question board with the question, an “x” link in
 top right corner and three links at the bottom: “Team 1”, “Tie” and
 “Team 2” (the text depends on values of configuration variables in
 `quiz.js` file).
 
 Pressing “x” hides the question board in case you’ve clicked it by
-mistake.  “Team 1” and “Team 2” links will hide the question board,
-add grant appropriate amount of points to given team.  The “Tie”
+mistake. “Team 1” and “Team 2” links will hide the question board,
+add grant appropriate amount of points to given team. The “Tie”
 button shows the answer to the question and replaces bottom links with
 a single “Close” link, which disables the question without adding
-points to either team.  Disabling the questions greys corresponding
+points to either team. Disabling the questions greys corresponding
 box out and makes it impossible to display the question board again.
 
-Lastly, team scores are displayed on the bottom.  If there was any
+Lastly, team scores are displayed on the bottom. If there was any
 kind of mix-up and scores need to be altered it’s enough to click on
 the number and a prompt will show up where one can enter new score for
 given team.

old_jeopardy/index.html

@@ -1,7 +1,11 @@
 <!DOCTYPE html>
 <html>
-	<title>Sustainability Jeopardy</title>
-    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
+  <head>
+    <title>Sustainability Jeopardy</title>
+    <meta
+      http-equiv="content-type"
+      content="application/xhtml+xml; charset=utf-8"
+    />
     <link rel="stylesheet" type="text/css" href="quiz.css" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script type="text/javascript" src="quiz.js"></script>
@@ -15,15 +19,14 @@
   </head>
   <body>
     <div id="questions">
-      <h1>FOSS Quiz!</h1><br />
-
+      <h1>FOSS Quiz!</h1>
+      <br />
 
       <h2></h2>
 
       <p></p>
       <p></p>
 
-
       <p></p>
       <p></p>
 
@@ -33,11 +36,9 @@ <h2></h2>
       <p></p>
       <p></p>
 
-
       <p></p>
       <p></p>
 
-
       <h2></h2>
 
       <p></p>
@@ -55,7 +56,6 @@ <h2></h2>
       <p></p>
       <p></p>
 
-
       <h2></h2>
 
       <p></p>
@@ -67,20 +67,35 @@ <h2></h2>
       <p></p>
       <p></p>
 
-
       <p></p>
       <p></p>
 
       <p></p>
       <p></p>
     </div>
     <div class="email_popup" id="popup">
-      <center><h2>Subscribe to the Sustainability Newsletter</h3><br />
-      Email: <input type="email" name="email" id="email" size="30" value="Your_Email@oregonstate.edu"><br />
-      Name: <input type="text" name="fullname" id="name" size="30" value="Your Name"><br /><br />
-      <button onclick="postToMailList()" class="btn_select" name="email-button">Subscribe</button>
+      <h2>Subscribe to the Sustainability Newsletter</h2>
+      <br />
+      Email:
+      <input
+        type="email"
+        name="email"
+        id="email"
+        size="30"
+        value="Your_Email@oregonstate.edu"
+      /><br />
+      Name:
+      <input
+        type="text"
+        name="fullname"
+        id="name"
+        size="30"
+        value="Your Name"
+      /><br /><br />
+      <button onclick="postToMailList()" class="btn_select" name="email-button">
+        Subscribe
+      </button>
       <button class="btn_select" onclick="closeEmailPopup()">No Thanks</button>
     </div>
-
   </body>
-</html>
+</html>