Added few more games to CREATE and JR

index.html

@@ -79,12 +79,12 @@
       
               <div class="carousel col-start-1 row-start-1" x-ref="carousel">
                 
-                <div class="w-3/5 px-2">
+                <!-- <div class="w-3/5 px-2">
                   <img class="options" data-href="https://bit.ly/hackolantern2023" src="/img/options/hack-o-lantern.png" loading="lazy">
                 </div>
                 <div class="w-3/5 px-2">
                   <img class="options" data-href="https://bit.ly/hackolantern2023code" src="/img/options/hack-o-lantern-with-code.png" loading="lazy">
-                </div>
+                </div> -->
                 <div class="w-3/5 px-2">
                   <img class="options" data-href="https://impact.codeninjas.com" src="/img/options/create-impact.png" loading="lazy">
                 </div>
@@ -109,21 +109,45 @@
                     src="/img/options/dojo-makecode-arcade.png"
                     loading="lazy">
                 </div>
-                <div class="w-3/5 px-2">
+                <!-- <div class="w-3/5 px-2">
                   <img class="options" data-href="https://padlet.com/codeninjaslangleybrkuk/hackathon-2023-x1k1wkxnk5gdvlbo" src="/img/options/hack-o-lantern-submit.png" loading="lazy">
-                </div>
+                </div> -->
                 <div class="w-3/5 px-2">
                   <img class="options"
                   data-href="https://makecode.microbit.org/"
                     src="/img/options/dojo-makecode-microbit.png"
                     loading="lazy">
                 </div>
-                <!-- <div class="w-3/5 px-2">
+                <div class="w-3/5 px-2">
                   <img class="options"
                   data-href="https://forms.codeninjas.com/gamejamuk"
                     src="/img/options/dojo-gamejam.png"
                     loading="lazy">
-                </div> -->
+                </div>
+                <div class="w-3/5 px-2">
+                  <img class="options"
+                  data-href="https://mindmakers.cc/hourofcode/maps.html?lang=en"
+                    src="/img/options/create-mindmakers.png"
+                    loading="lazy">
+                </div>
+                <div class="w-3/5 px-2">
+                  <img class="options"
+                  data-href="https://codecombat.com/play/dungeon?hour_of_code=true"
+                    src="/img/options/create-codecombat-kithgard.png"
+                    loading="lazy">
+                </div>
+                <div class="w-3/5 px-2">
+                  <img class="options"
+                  data-href="https://codecombat.com/play/hoc-2018"
+                    src="/img/options/create-codecombat-hoc.png"
+                    loading="lazy">
+                </div>
+                <div class="w-3/5 px-2">
+                  <img class="options"
+                  data-href="https://codecombat.com/play/goblins-hoc?hour_of_code=true"
+                    src="/img/options/create-codecombat-goblinhoc.png"
+                    loading="lazy">
+                </div>
               </div>
             </div>
           </div>
@@ -139,54 +163,13 @@
                x-transition:leave-end="opacity-0 transform scale-90"
          >
             <div class="grid grid-cols-1 grid-rows-1" x-data="carousel()" x-init="init()">
-              <!-- <div class="col-start-1 row-start-1 relative z-20 flex items-center justify-center pointer-events-none">
-      
-                <h1 class="absolute text-5xl uppercase font-black tracking-widest"
-                    x-show="active == 0"
-                    x-transition:enter="transition ease-out duration-300"
-                    x-transition:enter-start="opacity-0 transform translate-y-12"
-                    x-transition:enter-end="opacity-100 transform translate-y-0"
-                    x-transition:leave="transition ease-out duration-300"
-                    x-transition:leave-start="opacity-100 transform translate-y-0"
-                    x-transition:leave-end="opacity-0 transform -translate-y-12"
-                >Beth</h1>
-                <h1 class="absolute text-5xl uppercase font-black tracking-widest"
-                    x-show="active == 1"
-                    x-transition:enter="transition ease-out duration-300"
-                    x-transition:enter-start="opacity-0 transform translate-y-12"
-                    x-transition:enter-end="opacity-100 transform translate-y-0"
-                    x-transition:leave="transition ease-out duration-300"
-                    x-transition:leave-start="opacity-100 transform translate-y-0"
-                    x-transition:leave-end="opacity-0 transform -translate-y-12"
-                >Lee</h1>
-                <h1 class="absolute text-5xl uppercase font-black tracking-widest"
-                    x-show="active == 2"
-                    x-transition:enter="transition ease-out duration-300"
-                    x-transition:enter-start="opacity-0 transform translate-y-12"
-                    x-transition:enter-end="opacity-100 transform translate-y-0"
-                    x-transition:leave="transition ease-out duration-300"
-                    x-transition:leave-start="opacity-100 transform translate-y-0"
-                    x-transition:leave-end="opacity-0 transform -translate-y-12"
-                >Jade</h1>
-                <h1 class="absolute text-5xl uppercase font-black tracking-widest"
-                    x-show="active == 3"
-                    x-transition:enter="transition ease-out duration-300"
-                    x-transition:enter-start="opacity-0 transform translate-y-12"
-                    x-transition:enter-end="opacity-100 transform translate-y-0"
-                    x-transition:leave="transition ease-out duration-300"
-                    x-transition:leave-start="opacity-100 transform translate-y-0"
-                    x-transition:leave-end="opacity-0 transform -translate-y-12"
-                >Drew</h1>
-              </div> -->
-      
-      
               <div class="carousel col-start-1 row-start-1" x-ref="carousel">
-                <div class="w-3/5 px-2">
+                <!-- <div class="w-3/5 px-2">
                   <img class="options" 
                   data-href="https://scratch.mit.edu/projects/911710531/" 
                   src="/img/options/hack-o-lantern-jr.png" 
                   loading="lazy">
-                </div>
+                </div> -->
                 <div class="w-3/5 px-2">
                   <img class="options"
                   data-href="https://scratch.mit.edu/"
@@ -211,6 +194,18 @@
                     src="/img/options/jr-thisissand.png"
                     loading="lazy">
                 </div>
+                <div class="w-3/5 px-2">
+                  <img class="options"
+                  data-href="https://draw.tate.org.uk/"
+                    src="/img/options/jr-tate-draw.png"
+                    loading="lazy">
+                </div>
+                <div class="w-3/5 px-2">
+                  <img class="options"
+                  data-href="https://www.tate.org.uk/games/tate-paint/index.html"
+                    src="/img/options/jr-tate-paint.png"
+                    loading="lazy">
+                </div>
               </div>
             </div>
           </div>
@@ -219,59 +214,6 @@
       </main>
       <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
       <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
+      <script src="js/carousel.js"></script>
 </body>
-<script>
-    function carousel() {
-  return {
-    active: 0,
-    init() {
-      var flkty = new Flickity(this.$refs.carousel, {
-        wrapAround: true
-      });
-      flkty.on('change', i => this.active = i);
-    }
-  }
-}
-
-function carouselFilter() {
-  return {
-    active: 0,
-    changeActive(i) {
-      this.active = i;
-      
-      this.$nextTick(() => {
-        let flkty = Flickity.data( this.$el.querySelectorAll('.carousel')[i] );
-        flkty.resize();
-        
-        console.log(flkty);
-      });
-    }
-  }
-}
-
-function openFullscreen() {
-    elem = document.body;
-    if (elem.requestFullscreen) {
-      elem.requestFullscreen();
-    } else if (elem.webkitRequestFullscreen) { /* Safari */
-      elem.webkitRequestFullscreen();
-    } else if (elem.msRequestFullscreen) { /* IE11 */
-      elem.msRequestFullscreen();
-    }
-  }
-
-
-
-Array.from(document.querySelectorAll('img.options')).forEach((ele)=>{
-    ele.addEventListener('click',()=>{
-        // openFullscreen();
-        abc = window.open(ele.dataset.href,'_blank',`height=${screen.height},width=${screen.width}`);
-        // setTimeout(()=>{
-        //   abc.location.reload();
-        // },2000)
-    })
-})
-
-
-</script>
 </html>

js/carousel.js

@@ -0,0 +1,50 @@
+function carousel() {
+    return {
+      active: 0,
+      init() {
+        var flkty = new Flickity(this.$refs.carousel, {
+          wrapAround: true
+        });
+        flkty.on('change', i => this.active = i);
+      }
+    }
+  }
+  
+  function carouselFilter() {
+    return {
+      active: 0,
+      changeActive(i) {
+        this.active = i;
+        
+        this.$nextTick(() => {
+          let flkty = Flickity.data( this.$el.querySelectorAll('.carousel')[i] );
+          flkty.resize();
+          
+          console.log(flkty);
+        });
+      }
+    }
+  }
+  
+  function openFullscreen() {
+      elem = document.body;
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.webkitRequestFullscreen) { /* Safari */
+        elem.webkitRequestFullscreen();
+      } else if (elem.msRequestFullscreen) { /* IE11 */
+        elem.msRequestFullscreen();
+      }
+    }
+  
+  
+  
+  Array.from(document.querySelectorAll('img.options')).forEach((ele)=>{
+      ele.addEventListener('click',()=>{
+          // openFullscreen();
+          abc = window.open(ele.dataset.href,'_blank',`height=${screen.height},width=${screen.width}`);
+          // setTimeout(()=>{
+          //   abc.location.reload();
+          // },2000)
+      })
+  })