feat(#25): Improve max wheel size on smaller viewports

.eslintrc.json

@@ -27,6 +27,7 @@
               "ts": "never",
               "tsx": "never"
             }
-        ]
+        ],
+        "quotes": [2, "single", { "avoidEscape": true }]
     }
 }

src/index.ts

@@ -12,7 +12,9 @@ require('./assets/apple-touch-icon.png');
 require('./assets/favicon-16x16.png');
 require('./assets/favicon-32x32.png');
 require('./styles/main.scss');
+require('./styles/buttons.scss');
 require('./styles/modal.scss');
+require('./styles/spinner.scss');
 
 const wheelSpinningSound = new Audio(spinnerMp3);
 const tadaSound = new Audio(tadaMp3);

src/styles/buttons.scss

@@ -0,0 +1,82 @@
+.button {
+  appearance: none;
+  border: 1px solid rgba(27, 31, 35, 0.15);
+  border-radius: 6px;
+  box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 6px 16px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.button:focus:not(:focus-visible):not(.focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+
+.button:disabled {
+  border-color: rgba(27, 31, 35, 0.1);
+  color: rgba(255, 255, 255, 0.8);
+  cursor: default;
+}
+
+.button:focus {
+  outline: none;
+}
+
+.button-green {
+  background-color: #2ea44f;
+}
+
+.button-green:hover {
+  background-color: #2c974b;
+}
+
+.button-green:focus {
+  box-shadow: rgba(46, 164, 79, 0.4) 0 0 0 3px;
+  outline: none;
+}
+
+.button-green:disabled {
+  background-color: #94d3a2;
+}
+
+.button-green:active {
+  background-color: #298e46;
+  box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset;
+}
+
+.button-black {
+  background-color: #423e37;
+}
+
+.button-black:hover {
+  background-color: #2e2b26;
+}
+
+.button-blue {
+  background-color: #388697;
+}
+
+.button-blue:hover {
+  background-color: #275d69;
+}
+
+.button-white {
+  background-color: #ffffff;
+  color: black;
+}

src/styles/main.scss

@@ -1,4 +1,4 @@
-body { 
+body {
   margin: 0;
   font-family: Arial, sans-serif;
 }
@@ -17,7 +17,7 @@ body {
 
 .topbar-container h1 {
   color: white;
-  font-family: 'Fuzzy Bubbles', cursive;
+  font-family: "Fuzzy Bubbles", cursive;
   font-weight: 700;
   margin-block-start: 0.2em;
   margin-block-end: 0.2em;
@@ -81,70 +81,6 @@ body {
   order: 0;
 }
 
-#input-lines {
-  max-width: 100%;
-}
-
-#start-over {
-  position: absolute;
-  top: 100px;
-  left: auto;
-}
-
-#mute {
-  position: absolute;
-  top: 140px;
-  left: auto;
-}
-
-#spinner-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: flex-start;
-  align-content: center;
-}
-
-.spinner-items:nth-child(1) {
-  display: block;
-  flex-grow: 0;
-  flex-shrink: 1;
-  flex-basis: 800px;
-  align-self: auto;
-  order: 0;
-}
-
-.spinner-items:nth-child(2) {
-  display: block;
-  flex-grow: 0;
-  flex-shrink: 1;
-  flex-basis: auto;
-  align-self: auto;
-  order: 0;
-  width: 100%;
-}
-
-text{
-  font-family: Arial, sans-serif;
-  font-size:35px;
-  pointer-events:none;
-}
-#chart{ 
-  max-width:800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-#selection h1{
-  font-size: 50px;
-  font-weight: bold;
-  font-family: Arial, sans-serif;
-  -webkit-transform:translate(0,-50%);
-          transform:translate(0,-50%);
-  text-align: center;
-}
-
 #install-app-btn-container {
   display: none;
 }
@@ -155,23 +91,25 @@ text{
   bottom: 0;
   width: 100%;
   text-align: center;
-  color: #423E37;
+  color: #423e37;
   padding-bottom: 10px;
   background-color: white;
 }
 
 .footer-container hr {
   max-width: 500px;
-  border-top: 0.5px solid #423E37;
+  border-top: 0.5px solid #423e37;
   margin-left: auto;
   margin-right: auto;
 }
 
-.footer-container a, #privacy-container a {
+.footer-container a,
-  color: #423E37;
+#privacy-container a {
+  color: #423e37;
 }
 
-.footer-container a:hover, #privacy-container a:hover {
+.footer-container a:hover,
+#privacy-container a:hover {
   color: #81796c;
 }
 
@@ -181,100 +119,3 @@ text{
   max-width: 800px;
   margin-bottom: 50px;
 }
-
-#fireworks-container {
-  display: none;
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
-#image{
-  width: 100%;
-}
-
-/* Buttons */
-
-.button {
-  appearance: none;
-  border: 1px solid rgba(27, 31, 35, .15);
-  border-radius: 6px;
-  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
-  box-sizing: border-box;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  padding: 6px 16px;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-.button:focus:not(:focus-visible):not(.focus-visible) {
-  box-shadow: none;
-  outline: none;
-}
-
-.button:disabled {
-  border-color: rgba(27, 31, 35, .1);
-  color: rgba(255, 255, 255, .8);
-  cursor: default;
-}
-
-.button:focus {
-  outline: none;
-}
-
-.button-green {
-  background-color: #2ea44f;
-}
-
-.button-green:hover {
-  background-color: #2c974b;
-}
-
-.button-green:focus {
-  box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
-  outline: none;
-}
-
-.button-green:disabled {
-  background-color: #94d3a2;
-}
-
-.button-green:active {
-  background-color: #298e46;
-  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
-}
-
-.button-black {
-  background-color: #423E37;
-}
-
-.button-black:hover {
-  background-color: #2e2b26;
-}
-
-.button-blue {
-  background-color: #388697;
-}
-
-.button-blue:hover {
-  background-color: #275d69;
-}
-
-.button-white {
-  background-color: #FFFFFF;
-  color: black;
-}

src/styles/spinner.scss

@@ -0,0 +1,92 @@
+#input-lines {
+  max-width: 100%;
+}
+
+#start-over {
+  position: absolute;
+  top: 100px;
+  left: auto;
+}
+
+#mute {
+  position: absolute;
+  top: 140px;
+  left: auto;
+}
+
+#spinner-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  align-content: center;
+}
+
+.spinner-items:nth-child(1) {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: 800px;
+  align-self: auto;
+  order: 0;
+}
+
+@media screen and ( max-height: 920px )
+{
+    .spinner-items:nth-child(1){
+        flex-basis: 650px;
+        flex-grow: 0;
+    }
+}
+
+.spinner-items:nth-child(2) {
+  display: block;
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: auto;
+  align-self: auto;
+  order: 0;
+  width: 100%;
+}
+
+text {
+  font-family: Arial, sans-serif;
+  font-size: 35px;
+  pointer-events: none;
+}
+
+#chart {
+  max-width: calc(50%);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media screen and ( min-width: 800px ) and ( max-height: 800px )
+{
+    #chart{
+        max-width: 650px;
+    }
+}
+
+#selection h1 {
+  font-size: 50px;
+  font-weight: bold;
+  font-family: Arial, sans-serif;
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  text-align: center;
+}
+
+#fireworks-container {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+#image {
+  width: 100%;
+}