codeninjasuk/dojo
1
0
Fork 0
mirror of https://github.com/codeninjasuk/dojo.git synced 2024-11-21 23:17:49 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added few more games to CREATE and JR

Browse source
This commit is contained in:
elvistony 2023-11-02 20:03:28 +00:00
parent eb8efcec33
commit 357f279f11
8 changed files with 95 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
img/options/create-codecombat-goblinhoc.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 130 KiB

BIN
img/options/create-codecombat-hoc.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 MiB

After

Width:  |  Height:  |  Size: 134 KiB

BIN
img/options/create-codecombat-kithgard.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1,000 KiB

After

Width:  |  Height:  |  Size: 120 KiB

BIN
img/options/create-mindmakers.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 160 KiB

BIN
img/options/jr-tate-draw.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 390 KiB

After

Width:  |  Height:  |  Size: 82 KiB

BIN
img/options/jr-tate-paint.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2 MiB

After

Width:  |  Height:  |  Size: 255 KiB

148
index.html
View file

@ -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>

50
js/carousel.js Normal file
View file

@ -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)
})
})