add ticker to web page
This commit is contained in:
parent
5e012c8e73
commit
c18a6d18d4
|
|
@ -44,7 +44,7 @@ The original version of _Cakefoot_ was a free downloadable game created in 2019
|
|||
|
||||
An arcade mode was added when _Cakefoot_ was exhibited at [Derpy Con](https://derpycon.com) in 2023 as part of the Barnyardia pop-up arcade by diskmem and [snakesandrews](https://twitter.com/snakesandrews). Arcade mode gives the player limited time and records the farthest distance reached before time runs out. High scores are saved and displayed in the game. After the convention, the arcade cabinet returned with _Cakefoot_ to its owners at [Wonderville](https://wonderville.nyc) in Brooklyn, NY, where it is still available to play.
|
||||
|
||||
A custom game engine called [SPACE🪐BOX](https://open.shampoo.ooo/shampoo/spacebox) for exporting games to multiple platforms was developed alongside the game. The engine was used to add support for PC, Mac, Linux, Android, Raspberry Pi, and web browsers. _Cakefoot_ currently is available to play online at [💫dank.game💫](https://dank.game), a platform created by diskmem for _Cakefoot_ and other upcoming games built with the engine.
|
||||
A custom game engine called [SPACE🪐BOX](https://open.shampoo.ooo/shampoo/spacebox) for exporting games to multiple platforms was developed alongside the game. The engine was used to add support for PC, Mac, Linux, Android, Raspberry Pi, and web browsers. _Cakefoot_ currently is available to play online at [💫dank.game💫](https://dank.game), a platform created for _Cakefoot_ and other upcoming games built with the engine.
|
||||
|
||||
Features
|
||||
========
|
||||
|
|
|
|||
13
README.md
13
README.md
|
|
@ -4,7 +4,7 @@ _Cakefoot_ is an ultra-hard, single-button, minimalist avoid 'em up with natural
|
|||
|
||||
|
||||
|
||||
_Cakefoot_ is one of the first games made with the open-source [SPACE🪐BOX](https://open.shampoo.ooo/shampoo/spacebox) engine and is free to [play online](https://cakefoot.dank.game). It is the first game available for the [💫dank.game💫](https://dank.game) web games portal. The code is open-source, moddable, and modifications can be used commercially.
|
||||
_Cakefoot_ is one of the first games made with the open-source [SPACE🪐BOX](https://open.shampoo.ooo/shampoo/spacebox) engine and is free to [play online](https://cakefoot.dank.game). It is the first game available for the [dank.game](https://dank.game) web games portal.
|
||||
|
||||
Modding
|
||||
=======
|
||||
|
|
@ -57,8 +57,9 @@ Contact
|
|||
|
||||
Email or DM questions or [raise an issue](https://open.shampoo.ooo/shampoo/cakefoot/issues). Documentation and any other [pull requests](https://open.shampoo.ooo/shampoo/cakefoot/pulls) are welcome.
|
||||
|
||||
| Method | Contact information |
|
||||
| :------ | :----------------------- |
|
||||
| E-mail | cocktail.frank@dank.game |
|
||||
| Web | <https://dank.game> |
|
||||
| X | <https://x.com/diskmem> |
|
||||
| Method | Contact information |
|
||||
| :------ | :---------------------------- |
|
||||
| E-mail | cocktail.frank@dank.game |
|
||||
| Web | <https://dank.game> |
|
||||
| X | <https://x.com/diskmem> |
|
||||
| PayPal | <https://paypal.me/ohsqueezy> |
|
||||
|
|
|
|||
256
index.html
256
index.html
|
|
@ -3,14 +3,17 @@
|
|||
<html lang="en-US">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=0.8, user-scalable=yes" />
|
||||
|
||||
<link rel="icon" href="favicon.ico" />
|
||||
<link rel="canonical" href="https://cakefoot.dank.game" />
|
||||
|
||||
<title>Cakefoot 🍰😈 | Rage game | Wishlist now on Steam!</title>
|
||||
|
||||
<style>
|
||||
@import url("https://shampoo.ooo/lib/fonts/rounded-mplus/2m-medium/style.css");
|
||||
@import url("https://shampoo.ooo/lib/fonts/rounded-mplus/2p-thin/style.css ");
|
||||
@import url("https://shampoo.ooo/lib/fonts/notcouriersans/regular/style.css");
|
||||
|
||||
html
|
||||
{
|
||||
|
|
@ -24,12 +27,11 @@
|
|||
background: #000;
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: 94% 6%;
|
||||
height: 100%;
|
||||
font-family: RoundedMPlus2MMedium;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
canvas
|
||||
|
|
@ -42,9 +44,77 @@
|
|||
div#message
|
||||
{
|
||||
margin: 0px auto;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-gap: 15px;
|
||||
}
|
||||
|
||||
div#message a#wishlist
|
||||
{
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
/* background: radial-gradient(circle at 0% 100%, rgb(120, 80, 20), rgb(0, 0, 0) 50%); */
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
|
||||
div#message div#ticker
|
||||
{
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div#message div#ticker div.arrow
|
||||
{
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
div#message div#ticker div#left
|
||||
{
|
||||
justify-self: right;
|
||||
padding-left: 15px;
|
||||
border-left: 2px dotted white;
|
||||
}
|
||||
|
||||
div#message div#ticker div#right
|
||||
{
|
||||
justify-self: left;
|
||||
padding-right: 15px;
|
||||
border-right: 2px dotted white;
|
||||
}
|
||||
|
||||
div#message div#icons
|
||||
{
|
||||
background: radial-gradient(circle at 100% 100%, rgb(120, 80, 20), rgb(0, 0, 0) 50%);
|
||||
display: grid;
|
||||
justify-content: space-evenly;
|
||||
padding: 10px 10px 10px 0px;
|
||||
grid-gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div#message div#icons img
|
||||
{
|
||||
display: block;
|
||||
width: 32px;
|
||||
margin: auto;
|
||||
border-radius: 4px;
|
||||
filter: saturate(40%) brightness(130%);
|
||||
}
|
||||
|
||||
div#message div#icons img:hover
|
||||
{
|
||||
filter: saturate(100%) brightness(100%);
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
color: #999;
|
||||
|
|
@ -53,6 +123,7 @@
|
|||
p#loading
|
||||
{
|
||||
font-size: 72px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
span.bullet
|
||||
|
|
@ -61,22 +132,44 @@
|
|||
text-shadow: 0 0 0 #444;
|
||||
}
|
||||
|
||||
@media (orientation: portrait)
|
||||
@media (orientation: landscape)
|
||||
{
|
||||
body
|
||||
div#message div#ticker
|
||||
{
|
||||
grid-template-rows: 80% 20%;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.desktop
|
||||
{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
div#message div#icons
|
||||
{
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape)
|
||||
@media (orientation: portrait)
|
||||
{
|
||||
body
|
||||
div#message div#ticker
|
||||
{
|
||||
grid-template-rows: 94% 6%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.desktop
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
div#message div#icons
|
||||
{
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../lib/javascript/stable/Math.js" type="text/javascript"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -102,19 +195,150 @@
|
|||
<div>Visit the arcade cabinet
|
||||
<div>Cakefoot is powered by a custom game engine SPACE🪐BOX
|
||||
<div>Buy a 5-pack of Cakefoot pins
|
||||
-->
|
||||
-->
|
||||
|
||||
<div id="message">
|
||||
✨️ <a href="https://store.steampowered.com/app/2869020/Cakefoot/" target="new">WISHLIST NOW on Steam</a> ✨️
|
||||
<span class="bullet">🔸</span> Use ☝️, 🖱️, ⌨️ or 🎮 to play <span class="bullet">🔸</span>
|
||||
Visit the <a href="https://x.com/wondervillenyc/status/1735827245384572940" target="_new">arcade cabinet</a> 🕹️
|
||||
<span class="bullet">🔸</span> by <a href="https://ohsqueezy.itch.io">@ohsqueezy</a>👾️
|
||||
<a id="wishlist" href="https://store.steampowered.com/app/2869020/Cakefoot/" target="_blank">
|
||||
✨️
|
||||
<u>WISHLIST<span class="desktop"> NOW</span> on Steam</u>
|
||||
✨️
|
||||
</a>
|
||||
<div id="ticker">
|
||||
<div id="left" class="arrow">
|
||||
◀
|
||||
</div>
|
||||
<div id="content">
|
||||
Use ☝️, 🖱️, ⌨️ or 🎮 to play
|
||||
</div>
|
||||
<div id="right" class="arrow">
|
||||
▶
|
||||
</div>
|
||||
</div>
|
||||
<div id="icons">
|
||||
<a href="https://store.steampowered.com/app/2869020/Cakefoot/" target="_blank">
|
||||
<img src="https://dank.game/img/icon/steam_square_89px.png" />
|
||||
</a>
|
||||
<a href="https://ohsqueezy.itch.io/cakefoot" target="_blank">
|
||||
<img src="https://dank.game/img/icon/itch_square_89px.png" />
|
||||
</a>
|
||||
<a href="https://x.com/diskmem" target="_blank">
|
||||
<img src="https://dank.game/img/icon/X_square_89x89.png" />
|
||||
</a>
|
||||
<a href="https://youtube.com/@nuggetsselect" target="_blank">
|
||||
<img src="https://dank.game/img/icon/YouTube_square_89px.png" />
|
||||
</a>
|
||||
<a href="https://www.tiktok.com/@dankd0tgame" target="_blank">
|
||||
<img src="https://dank.game/img/icon/TikTok_square_89px.png" />
|
||||
</a>
|
||||
<a href="https://dank.game#email-box" target="_blank" class="desktop">
|
||||
<img src="https://dank.game/img/icon/Email_square_89px.png" />
|
||||
</a>
|
||||
<a href="https://open.shampoo.ooo/shampoo/cakefoot" target="_blank" class="desktop">
|
||||
<img src="https://dank.game/img/icon/GitHub_square_89px.png" />
|
||||
</a>
|
||||
<a href="https://dank.game/feed" target="_blank">
|
||||
<img src="https://dank.game/img/icon/RSS_square_89px.png" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
/* Create a ticker effect at div#message div#ticker */
|
||||
|
||||
var ticker_previous_frame_timestamp = 0;
|
||||
var ticker_index = 0;
|
||||
var ticker_delay_elapsed = 0;
|
||||
var ticker_ticking = true;
|
||||
var ticker_content = [
|
||||
"Use ☝️, 🖱️, ⌨️ or 🎮 to play",
|
||||
"🗓️ Releasing on <a href='https://store.steampowered.com/app/2869020/Cakefoot/' target='_blank'>Steam</a>, " +
|
||||
"<a href='https://ohsqueezy.itch.io/cakefoot' target='new'>itch.io</a>, Android & " +
|
||||
"<a href='https://coolmathgames.com' target='_blank'>Coolmath</a> May 10th",
|
||||
"<a href='https://youtu.be/xn-iNcUlIpo' target='_blank'>Watch the trailer</a> ▶️ and " +
|
||||
"<a href='https://store.steampowered.com/app/2869020/Cakefoot/'>wishlist on Steam</a>",
|
||||
"Visit the <a href='https://x.com/wondervillenyc/status/1735827245384572940' target='_new'>arcade cabinet</a> at " +
|
||||
"<a href='https://wonderville.nyc' target='_blank'>Wonderville</a> in Brooklyn, NY 🕹️",
|
||||
"There is a Cakefoot <a href='press.html'>press kit</a> 📝️ available",
|
||||
"Unlock BEEF CAKE 💪️ and BUFFALO BEEF CAKE 🔥️",
|
||||
"Collect every coin 💯️ for a different ending"
|
||||
];
|
||||
|
||||
function ticker_update()
|
||||
{
|
||||
ticker_delay_elapsed = 0;
|
||||
document.querySelector("div#message div#ticker div#content").innerHTML = ticker_content[ticker_index];
|
||||
}
|
||||
|
||||
function ticker_increment(amount)
|
||||
{
|
||||
ticker_index = Math.mod(ticker_index + amount, ticker_content.length);
|
||||
}
|
||||
|
||||
document.querySelector("div#message div#ticker div#left").addEventListener("click", function(e) {
|
||||
ticker_increment(-1);
|
||||
ticker_update();
|
||||
});
|
||||
|
||||
document.querySelector("div#message div#ticker div#right").addEventListener("click", function() {
|
||||
ticker_increment(1);
|
||||
ticker_update();
|
||||
});
|
||||
|
||||
var ticker_element = document.querySelector("div#message div#ticker");
|
||||
|
||||
ticker_element.addEventListener("mouseenter", function() {
|
||||
ticker_ticking = false;
|
||||
});
|
||||
|
||||
ticker_element.addEventListener("mouseleave", function() {
|
||||
ticker_previous_frame_timestamp = performance.now();
|
||||
ticker_ticking = true;
|
||||
});
|
||||
|
||||
function message_tick(timestamp)
|
||||
{
|
||||
if (ticker_ticking && timestamp - ticker_previous_frame_timestamp > 10000)
|
||||
{
|
||||
ticker_previous_frame_timestamp = timestamp;
|
||||
ticker_increment(1);
|
||||
ticker_update();
|
||||
}
|
||||
window.requestAnimationFrame(message_tick);
|
||||
}
|
||||
|
||||
window.addEventListener("load", function() {
|
||||
ticker_previous_frame_timestamp = performance.now();
|
||||
window.requestAnimationFrame(message_tick);
|
||||
});
|
||||
|
||||
/* Hue-cycle the wishlist button */
|
||||
|
||||
var hue_previous_frame_timestamp = performance.now();
|
||||
var wishlist_element = document.querySelector("div#message a#wishlist");
|
||||
var hue_rotation = 0;
|
||||
|
||||
function hue_cycle_wishlist(timestamp)
|
||||
{
|
||||
if (timestamp - hue_previous_frame_timestamp > 125)
|
||||
{
|
||||
hue_rotation = (hue_rotation + 25) % 360;
|
||||
wishlist_element.style.filter = "hue-rotate(" + hue_rotation + "deg) saturate(200%)";
|
||||
hue_previous_frame_timestamp = timestamp;
|
||||
}
|
||||
window.requestAnimationFrame(hue_cycle_wishlist);
|
||||
}
|
||||
|
||||
window.addEventListener("load", function() {
|
||||
hue_previous_frame_timestamp = performance.now();
|
||||
window.requestAnimationFrame(hue_cycle_wishlist);
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
/* Emscripten's Module object doesn't exist yet, so create it here */
|
||||
var Module = {
|
||||
/* Files are stored in a separate location on FOAM builds */
|
||||
/* Files are stored in a separate location on dank.game builds */
|
||||
locateFile: function(path, prefix)
|
||||
{
|
||||
console.log(path, prefix);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
"fluid resize": false,
|
||||
"use play button": true,
|
||||
"scoreboard wrap": 3200,
|
||||
"social media click": true
|
||||
"social media click": true,
|
||||
"title": "Cakefoot 🍰😈 | Rage game | Wishlist now on Steam!"
|
||||
},
|
||||
|
||||
"recording":
|
||||
|
|
|
|||
Loading…
Reference in New Issue