Releasing changes

Gems.mjs

@@ -58,7 +58,7 @@ import {
     // Functions
     getStylesheetByFileName,
     addAdoptedStyleSheet,
-    parseCSSObject
+    JSONCSS,
 } from './vjsc/vanilla.mjs'
 import { Grid } from './grid/Grid.mjs'
 
@@ -76,96 +76,6 @@ const IMG =
     gray: './img/gray.svg'
 }
 
-const css = {
-    html: [
-        'background-color: #444',
-        'color: #fff'
-    ],
-    '.field': [
-        'width: 512px',
-        'margin: 0 auto'
-    ],
-    '.card': [
-        'background-color: #333',
-        'border-radius: 16px',
-        'box-shadow: 2px 2px 1px #000, inset 1px 1px 1px #fff'
-    ],
-    '.gem': [
-        'animation: fall 2s ease 0s 1 normal forwards'
-    ],
-    '@keyframes fall { 0%' : [
-        'animation-timing-function: ease-in',
-        'opacity: 0',
-        'transform: translateY(-800%)'
-    ],
-    '@keyframes fall { 38%' : [
-        'animation-timing-function: ease-out',
-        'opacity: 1',
-        'transform: translateY(0)',
-    ],
-    '@keyframes fall { 55%' : [
-        'animation-timing-function: ease-in',
-        'transform: translateY(-65px)'
-    ],
-    '@keyframes fall { 72%' : [
-        'animation-timing-function: ease-out',
-        'transform: translateY(0)'
-    ],
-    '@keyframes fall { 81%' : [
-            'animation-timing-function: ease-in',
-            'transform: translateY(-28px)'
-    ],
-    '@keyframes fall { 90%' : [
-        'animation-timing-function: ease-out',
-        'transform: translateY(0)'
-    ],
-    '@keyframes fall { 95%' : [
-        'animation-timing-function: ease-in',
-        'transform: translateY(-8px)'
-    ],
-    '@keyframes fall { 100%' : [
-        'animation-timing-function: ease-out',
-        'transform: translateY(0)'
-    ],
-}
-
-/*
-    '@keyframes fall { 0%' : [
-        'animation-timing-function: ease-in',
-        'opacity: 0',
-        'transform: translateY(-800%)'
-    ],
-    '@keyframes fall { 38%' : [
-        'animation-timing-function: ease-out',
-        'opacity: 1',
-        'transform: translateY(0)',
-    ],
-    '@keyframes fall { 55%' : [
-        'animation-timing-function: ease-in',
-        'transform: translateY(-65px)'
-    ],
-    '@keyframes fall { 72%' : [
-        'animation-timing-function: ease-out',
-        'transform: translateY(0)'
-    ],
-    '@keyframes fall { 81%' : [
-            'animation-timing-function: ease-in',
-            'transform: translateY(-28px)'
-    ],
-    '@keyframes fall { 90%' : [
-        'animation-timing-function: ease-out'
-        'transform: translateY(0)'
-    ],
-    '@keyframes fall { 95%' : [
-        'animation-timing-function: ease-in'
-        'transform: translateY(-8px)'
-    ],
-    '@keyframes fall { 100%' : [
-        'animation-timing-function: ease-out',
-        'transform: translateY(0)'
-    ],
-*/
-
 class Gem {
 
     constructor(img=null)
@@ -220,7 +130,7 @@ class Line
         for( let i = 0; i < 8; i++)
         {
             const gem = Gem.random(spot[i])
-            this.flexBox.element.appendChild(gem.img.element)
+            this.flexBox.element.appendChild(gem.img.element)            
         }
     }
 
@@ -275,10 +185,4 @@ class PlayField {
 
 const play = new PlayField(8)
 
-document.body.appendChild(play.field.container.element)
-
-// let blocka = document.body.querySelector('#line0').querySelector('#spot-c')
-// blocka.classList.add('gem1')
-// console.log(blocka)
-
-addAdoptedStyleSheet( parseCSSObject(css) )
+document.body.appendChild(play.field.container.element)

gems.css

@@ -0,0 +1,57 @@
+html {
+  background-color: #444;
+  color: #fff;
+}
+
+.field {
+  width: 512px;
+  margin: 0 auto;
+}
+
+.card {
+  background-color: #333;
+  border-radius: 16px;
+  box-shadow: 2px 2px 1px #000, inset 1px 1px 1px #fff;
+}
+
+.gem {
+  animation: fall 2s ease 0s 1 normal forwards;
+}
+
+@keyframes fall {
+      00% {
+          animation-timing-function: ease-in;
+          opacity: 0;
+          transform: translateY(-800%);
+      }
+      38% {
+          animation-timing-function: ease-out;
+          opacity: 1;
+          transform: translateY(0);
+      }
+      55% {
+          animation-timing-function: ease-in;
+          transform: translateY(-65px)
+      }
+      72% {
+          animation-timing-function: ease-out;
+          transform: translateY(0)
+      }
+      81% {
+          animation-timing-function: ease-in;
+          transform: translateY(-28px)
+      }
+      90% {
+          animation-timing-function: ease-out;
+          transform: translateY(0)
+      }
+      95% {
+          animation-timing-function: ease-in;
+          transform: translateY(-8px)
+      }
+      99% {
+          animation-timing-function: ease-out;
+          transform: translateY(0)
+      }
+}
+

index.html

@@ -4,6 +4,7 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="./gems.css">
         <title>Gems</title>
     </head>
     <body>

package.json

@@ -8,6 +8,7 @@
     "dev2beta": "bash sh/gitDev2Beta.sh",
     "beta2master": "bash sh/gitBeta2Master.sh",
     "dev2master": "bash sh/gitDev2Master.sh",
+    "submodule": "git submodule update --init --recursive",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {