fix service worker and accessibility warnings

backend/__init__.py

@@ -1,3 +1,4 @@
+import os
 import json
 import random
 from typing import List
@@ -8,7 +9,7 @@ from bang.game import Game
 from bang.players import Player
 
 sio = socketio.Server(cors_allowed_origins="*")
-app = socketio.WSGIApp(sio, static_files={
+static_files={
     '/': {'content_type': 'text/html', 'filename': 'index.html'},
     '/game': {'content_type': 'text/html', 'filename': 'index.html'},
     '/robots.txt': {'content_type': 'text/html', 'filename': 'robots.txt'},
@@ -17,8 +18,11 @@ app = socketio.WSGIApp(sio, static_files={
     '/manifest.json': {'filename': 'manifest.json'},
     '/css': './css',
     '/js': './js',
-})
+}
+for file in [f for f in os.listdir('.') if '.js' in f or '.map' in f or '.html' in f]:
+    static_files[f'/{file}'] = f'./{file}'
 
+app = socketio.WSGIApp(sio, static_files=static_files)
 games: List[Game] = []
 online_players = 0
 

frontend/src/App.vue

@@ -7,7 +7,7 @@
 			<h2>{{$t("warning")}}</h2>
 			<p>{{$t("connection_error")}}</p>
 		</div>
-		<select style="position:fixed;bottom:4pt;right:4pt;" v-model="$i18n.locale" @change="storeLangPref">
+		<select id="lang" style="position:fixed;bottom:4pt;right:4pt;" v-model="$i18n.locale" @change="storeLangPref">
 			<option
 				v-for="(lang, i) in ['it.🇮🇹.Italiano', 'en.🇬🇧.English']"
 				:key="`lang-${i}`"
@@ -15,6 +15,7 @@
 					{{lang.split('.')[1]}} {{lang.split('.')[2]}}
 			</option>
 		</select>
+		<label for="lang" style="opacity:0" >Language</label>
 	</div>
 </template>
 

frontend/src/components/Menu.vue

@@ -8,7 +8,7 @@
 			<div v-if="!didSetUsername">
 				<p>{{$t("choose_username")}}</p>
 				<form @submit="setUsername">
-					<input v-model="username" />
+					<input id="username" v-model="username" />
 					<input type="submit" :value="$t('submit')"/>
 				</form>
 				<p>{{$t("online_players")}}{{onlinePlayers}}</p>
@@ -25,12 +25,14 @@
 					<form @submit="createLobby">
 						<h2>{{$t("create_lobby")}}</h2>
 						<p>{{$t("lobby_name")}}</p>
-						<input v-model="lobbyName"/>
+						<input id="lobbyname" v-model="lobbyName"/>
 						<input type="submit" :value="$t('submit')"/>
 					</form>
 				</div>
 			</div>
 		</div>
+		<label for="username" style="opacity:0">Username</label>
+		<label for="lobbyname" style="opacity:0">Lobby Name</label>
 	</div>
 </template>
 

frontend/vue.config.js

@@ -1,6 +1,7 @@
 const { GenerateSW } = require("workbox-webpack-plugin");
 
 module.exports = {
+	publicPath: "./",
 	pwa: {
 		name: 'PewPew!',
 		appleMobileWebAppCache: "yes",
@@ -8,7 +9,11 @@ module.exports = {
 		}
 	},
 	configureWebpack: {
-		plugins: [new GenerateSW()],
+		plugins: [new GenerateSW({
+			clientsClaim: true,
+			skipWaiting: true,
+			navigateFallback: 'index.html',
+		})],
 		output: {
 			crossOriginLoading: 'anonymous'
 		},