From 9810f06330bce7d769327e09c28d71bfc5ea7fe6 Mon Sep 17 00:00:00 2001 From: Ben Frankel Date: Sun, 17 Dec 2023 18:50:06 -0800 Subject: [PATCH] Add CSS loader --- LICENSE-APACHE => LICENSE-Apache-2.0 | 0 README.md | 23 +++++-- web/index.html | 99 +++++++++++++++------------- web/style.css | 42 +++++++++++- 4 files changed, 112 insertions(+), 52 deletions(-) rename LICENSE-APACHE => LICENSE-Apache-2.0 (100%) diff --git a/LICENSE-APACHE b/LICENSE-Apache-2.0 similarity index 100% rename from LICENSE-APACHE rename to LICENSE-Apache-2.0 diff --git a/README.md b/README.md index 3d20790..d4ca87c 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,9 @@ This is our submission to Bevy Jam #4. The game can be played [on web here](https://pyrious.itch.io/bevy-jam-simulator). -Type, click, and put on your programming socks as a Bevy Jam #4 participant in this gamedev simulating incremental game! Spawn entities to unlock better upgrades, and spend lines of code to install them. +Type, click, and put on your programming socks as a **Bevy Jam #4** participant in this gamedev simulating incremental game! Spawn entities to unlock better upgrades, and spend lines of code to install them. + +Technical debt will make changes to the codebase more expensive, so make sure to follow good programming practices. You can listen to [the soundtrack here](https://youtu.be/0JXQqLwuy6E). @@ -11,20 +13,27 @@ You can listen to [the soundtrack here](https://youtu.be/0JXQqLwuy6E). - Type to code. - Click to spawn entities and buy upgrades. -## License +## Licenses -The code is written by [Pyrious](https://github.com/benfrankel) and [necrashter](https://github.com/necrashter/), and it is dual-licensed under Apache License Version 2.0 and MIT License. +### Code +- The CSS loader / spinner is MIT ([https://github.com/vineethtrv/css-loader]). +- The CSS background pattern is MIT ([https://github.com/Afif13/CSS-Pattern]). +- The remainder of the code is written by [Pyrious](https://github.com/benfrankel) and [necrashter](https://github.com/necrashter/), and is dual-licensed under MIT and Apache 2.0. +### Audio The following assets are made by [necrashter](https://github.com/necrashter/): - The music (`ingame.ogg`) is licensed under [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/). - `backspace0.ogg`, `keyboard*.ogg`, and `guitar*.ogg` were recorded from scratch and are licensed under CC0. - `upgrade0.ogg` is edited from [this CC0 sound](https://freesound.org/people/deleted_user_958643/sounds/254980/). `upgrade0.ogg` itself is also CC0. - `upgrade1.ogg` is [this CC0 sound](https://freesound.org/people/the_semen_incident/sounds/39013/). +### Fonts The following assets are made by [Pyrious](https://github.com/benfrankel/): - The fonts (`PyriousPixel-R.ttf`, `PyriousPixel-B.ttf`, and `PyriousBlocky.ttf`) are licensed under [CC0](https://creativecommons.org/public-domain/cc0/). -Other assets: -- Sprites (1-bit): https://v3x3d.itch.io/bit-bonanza -- Sprites (RPG): https://merchant-shade.itch.io/16x16-mixed-rpg-icons -- Sprites (Ninja): https://pixel-boy.itch.io/ninja-adventure-asset-pack +### Images +- The splash screen image belongs to Bevy and is not covered by any of the licenses in this repository. +- The 1-bit sprite pack is CC0: https://v3x3d.itch.io/bit-bonanza +- The RPG sprite pack is CC0: https://merchant-shade.itch.io/16x16-mixed-rpg-icons +- The Ninja sprite pack is CC0: https://pixel-boy.itch.io/ninja-adventure-asset-pack +- The cover art (`cover.png`) was made by Pyrious and is CC0. diff --git a/web/index.html b/web/index.html index 4a424d7..c07afaf 100644 --- a/web/index.html +++ b/web/index.html @@ -8,6 +8,15 @@ +
+ + Javascript and canvas support is required + +
+ +
+
+ -
- - Javascript and canvas support is required - -
+ // Hide loading screen when the game starts + const bevy = document.getElementById('bevy'); + const loading = document.getElementById('loading'); + const observer = new MutationObserver(() => { + if (bevy.height > 1) { + loading.style.display = 'none'; + } + }); + observer.observe(bevy, { attributes: true }); - - + \ No newline at end of file diff --git a/web/style.css b/web/style.css index 63798d3..9ab9ae7 100644 --- a/web/style.css +++ b/web/style.css @@ -4,13 +4,53 @@ border: 0; } -html, body, .game-container { +html, +body { width: 100%; height: 100%; } .game-container { + width: 100%; + height: 100%; display: flex; justify-content: center; align-items: center; + flex-direction: column; + + /* Background pattern from https://css-pattern.com/ */ + --s: 200px; + --c1: #1d1d1d; + --c2: #4e4f51; + --c3: #3c3c3c; + background: + repeating-conic-gradient(from 30deg, #0000 0 120deg, var(--c3) 0 180deg) calc(.5*var(--s)) calc(.5*var(--s)*0.577), + repeating-conic-gradient(from 29.5deg, var(--c1) 0 60deg, var(--c2) 0 120deg, var(--c3) 0 180deg); + background-size: var(--s) calc(var(--s)*0.577); +} + +#bevy { + height: 0; +} + +/* Loader from https://cssloaders.github.io/ */ +.loader { + width: 128px; + height: 128px; + border: 16px solid #FFF; + border-bottom-color: #FF3D00; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; +} + +@keyframes rotation { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } } \ No newline at end of file