Breakout some scss

buildstyle.sh

@@ -0,0 +1,2 @@
+scss client/scss/main.scss dist/www/style.css
+rm -rf .sass-cache

client/scss/canvas.scss

@@ -0,0 +1,11 @@
+canvas {
+  -webkit-user-select: none;  /* Chrome all / Safari all */
+  -moz-user-select: none;     /* Firefox all */
+  -ms-user-select: none;      /* IE 10+ */
+  -o-user-select: none;
+  user-select: none;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -webkit-crisp-edges;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}

client/scss/createGame.scss

@@ -0,0 +1,42 @@
+
+span.button > img {
+  pointer-events: none;
+  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
+  image-rendering: -moz-crisp-edges;          /* Firefox                        */
+  image-rendering: -o-crisp-edges;            /* Opera                          */
+  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
+  image-rendering: pixelated;                 /* Chrome                         */
+  width: 70px;
+  height: 70px;
+  transform: translate(0, 10px);
+  background: lightgray;
+}
+
+span.button.wide {
+  width: 128px;
+  height: 128px;
+}
+
+span.button.wide > img {
+  width: 108px;
+  height: 108px;
+}
+
+span.button {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: inline-block;
+  background: lightgray;
+  width:90px;
+  height:90px;
+  margin: 5px 5px 5px 5px;
+  border-radius: 1px;
+  cursor: pointer;
+
+}
+
+span.button:hover {
+  background: gray;
+}

client/scss/font.scss

@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "moderndos";
+  src: url('fonts/moderndos.woff2') format('woff2'),
+       url('fonts/moderndos.ttf') format('truetype');
+}
+
+* {
+  font-family: moderndos;
+}

client/scss/joinGame.scss

@@ -0,0 +1,14 @@
+input.codeInput {
+  width: inherit !important;
+  text-align: center;
+  padding-top: 20px !important;
+  padding-bottom: 20px !important;
+  border-radius: 2px;
+  outline: solid gray 2px;
+  font-size: 4.8em;
+  }
+
+.codeContainer > button {
+  max-width: auto !important;
+  width: inherit !important;
+}

client/scss/main.scss

@@ -1,13 +1,9 @@
-@font-face {
+@import "createGame.scss";
-  /* font-weight: 500; */
+@import "font.scss";
-  font-family: "moderndos";
+@import "canvas.scss";
-  src: url('fonts/moderndos.woff2') format('woff2'),
+@import "slider.scss";
-       url('fonts/moderndos.ttf') format('truetype');
+@import "joinGame.scss";
-}
 
-* {
-  font-family: moderndos;
-}
 
 h1, h2, h3 {
   margin: 0px;
@@ -91,61 +87,8 @@ input {
   text-align: center;
 }
 
-input.codeInput {
-  width: inherit !important;
-  text-align: center;
-  padding-top: 20px !important;
-  padding-bottom: 20px !important;
-  border-radius: 2px;
-  outline: solid gray 2px;
-  font-size: 4.8em;
-  }
 
-.codeContainer > button {
-  max-width: auto !important;
-  width: inherit !important;
-}
 
-.sliderNumber {
-  position: absolute;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  color: black;
-  font-size: 1.7em;
-  pointer-events: none;
-}
-
-.sliderContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.slider {
-  -webkit-appearance: none;
-  appearance: none;
-  height: 55px;
-  width: 300px;
-  background-color: lightgray;
-}
-
-.slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 20px;
-  height: 60px;
-  background: #f1f8t6;
-  cursor: pointer;
-}
-.slider::-moz-range-thumb {
-  width: 20px;
-  height: 60px;
-  border-radius: 0px;
-  background: #f1f8t6;
-  cursor: pointer;
-}
 
 input[type=button], button, .buttonLink {
   width: 50%;
@@ -167,83 +110,17 @@ input[type=button], button, .buttonLink {
   background-color: lightgray; }
 
 
-
-span.button > img {
-  pointer-events: none;
-  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
-  image-rendering: -moz-crisp-edges;          /* Firefox                        */
-  image-rendering: -o-crisp-edges;            /* Opera                          */
-  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
-  image-rendering: pixelated;                 /* Chrome                         */
-  width: 70px;
-  height: 70px;
-  transform: translate(0, 10px);
-  background: lightgray;
-}
-
-span.button.wide {
-  width: 128px;
-  height: 128px;
-}
-
-span.button.wide > img {
-  width: 108px;
-  height: 108px;
-}
-
-span.button {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  display: inline-block;
-  background: lightgray;
-  width:90px;
-  height:90px;
-  margin: 5px 5px 5px 5px;
-  border-radius: 1px;
-  cursor: pointer;
-
-}
-
-span.button:hover {
-  background: gray;
-}
-
-.canvas1{
-  z-index: 0;
-}
-
-.canvas3 {
-  z-index: 2;
-}
-
 .canvasStack {
-
-  /* top: 50px; */
-
   background: darkslategray;
-
 }
 
 
 main {
-
   margin-left: auto;
   margin-right: auto;
 }
 
-canvas {
+
-  -webkit-user-select: none;  /* Chrome all / Safari all */
-  -moz-user-select: none;     /* Firefox all */
-  -ms-user-select: none;      /* IE 10+ */
-  -o-user-select: none;
-  user-select: none;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: -webkit-crisp-edges;
-  image-rendering: pixelated;
-  image-rendering: crisp-edges;
-}
 
 
 .hidden {

client/scss/slider.scss

@@ -0,0 +1,40 @@
+.sliderNumber {
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  color: black;
+  font-size: 1.7em;
+  pointer-events: none;
+}
+
+.sliderContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 55px;
+  width: 300px;
+  background-color: lightgray;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 60px;
+  background: #f1f8t6;
+  cursor: pointer;
+}
+.slider::-moz-range-thumb {
+  width: 20px;
+  height: 60px;
+  border-radius: 0px;
+  background: #f1f8t6;
+  cursor: pointer;
+}

package-lock.json

@@ -10,6 +10,7 @@
       "license": "UNLICENSED",
       "dependencies": {
         "express": "^4.18.1",
+        "rollup": "^2.75.7",
         "sass": "^1.52.3",
         "socket.io": "^4.5.0",
         "ts-node": "^10.8.1",
@@ -901,6 +902,20 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/rollup": {
+      "version": "2.75.7",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz",
+      "integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==",
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -1905,6 +1920,14 @@
         "picomatch": "^2.2.1"
       }
     },
+    "rollup": {
+      "version": "2.75.7",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.7.tgz",
+      "integrity": "sha512-VSE1iy0eaAYNCxEXaleThdFXqZJ42qDBatAwrfnPlENEZ8erQ+0LYX4JXOLPceWfZpV1VtZwZ3dFCuOZiSyFtQ==",
+      "requires": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",

package.json

@@ -16,6 +16,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "express": "^4.18.1",
+    "rollup": "^2.75.7",
     "sass": "^1.52.3",
     "socket.io": "^4.5.0",
     "ts-node": "^10.8.1",