chg: dev: replace webpack w/ vite & remove old, legacy jQuery from the code #4

assets/css/style.layout.scss

@@ -1,5 +1,4 @@
 @import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700&subset=latin-ext');
-@import "~bootstrap/dist/css/bootstrap.min.css";
 @import "style";
 @import "style.homepage";
 

assets/css/style.mineseeker.scss

@@ -1012,6 +1012,7 @@ main {
 
     #mine-wrapper .grid .field-wrapper {
         width: 6.25%;
+        aspect-ratio: 1;
     }
 
     #mine-wrapper .grid .field-wrapper > img.field-target {

assets/js/app.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+
 import MineSeeker from './mine-seeker/MineSeeker';
 
 const wrapper = document.getElementById('mine-wrapper');

assets/js/mine-seeker/hooks/useServerCommunication.jsx

@@ -24,16 +24,6 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
   const rpcUsersRef = useRef(null);
   const stepCacheRef = useRef([]);
 
-  /** HELPERS */
-
-  const correctGridSize = () => {
-    let $f = $('#mine-wrapper .grid');
-    $f.height($f.width());
-    $f = $('#mine-wrapper .grid .field-wrapper');
-    $f.height($f.width());
-    $('#mine-wrapper .grid .field-wrapper .field').height($f.width()).css('line-height', ($f.width() - 2) + 'px');
-  };
-
   /** REST mutations / queries */
 
   const connectQuery = useQuery({
@@ -112,8 +102,6 @@ const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
       syncWebPlayer(isBlue ? 'blue' : 'red');
     }
 
-    900 > $(document).width() && correctGridSize();
-
     if (
       2 === payload.userCnt
       && (!connectionLostRef.current