RevelaNetwork/Revela-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add more games, add fullscreen button, and remove testing marketplace items.

Browse source
This commit is contained in:
wearrrrr 2024-07-19 18:54:53 -05:00
parent 021b314e6b
commit 65de29cd92
7 changed files with 64 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/games

@ -1 +1 @@
Subproject commit 731e408a4b6802a99ff4916cc310199c8420ca45
Subproject commit 2beae2ca136865d7a78ce42fea0f590c24371a1f

4
public/img/games/fullscreen.svg Normal file
View file

@ -0,0 +1,4 @@
<svg stroke="#fff" fill="#fff" stroke-width="0" viewBox="0 0 256 256" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path d="M220,48V88a12,12,0,0,1-24,0V60H168a12,12,0,0,1,0-24h40A12,12,0,0,1,220,48ZM88,196H60V168a12,12,0,0,0-24,0v40a12,12,0,0,0,12,12H88a12,12,0,0,0,0-24Zm120-40a12,12,0,0,0-12,12v28H168a12,12,0,0,0,0,24h40a12,12,0,0,0,12-12V168A12,12,0,0,0,208,156ZM88,36H48A12,12,0,0,0,36,48V88a12,12,0,0,0,24,0V60H88a12,12,0,0,0,0-24Z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 477 B

15
src/components/GameItem.astro
View file

@ -3,30 +3,37 @@ const { game } = Astro.props;
---
<div class="game" data-name={game.name}>
<a href=`/game/${game.slug}`>
<a class="game-link" href=`/game/${game.slug}`>
<img class="game-img" src={game.image} alt="" />
<p class="game-title">{game.name}</p>
</a>
<p class="game-title">{game.name}</p>
</div>
<style>
.game {
border: 2px solid var(--text-color);
padding: 1rem;
padding-bottom: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 15px;
border-radius: 10px;
}
.game-img {
width: 128px;
height: 128px;
border-radius: 5px;
}
.game-link {
text-decoration: none;
}
.game-title {
color: var(--text-color);
text-align: center;
max-width: 125px;
font-size: 18px;
height: 48px;
}
</style>

22
src/json/games.json
View file

@ -22,6 +22,11 @@
"image": "/games/baldi/logo.png",
"slug": "baldi"
},
"basketball-stars": {
"name": "Basketball Stars",
"image": "/games/basketball-stars/logo.png",
"slug": "basketball-stars"
},
"cannon-basketball-4": {
"name": "Cannon Basketball 4",
"image": "/games/cannon-basketball-4/logo.png",
@ -213,6 +218,12 @@
"image": "/games/retro-bowl/logo.png",
"slug": "retro-bowl"
},
"rooftop-sniper": {
"name": "Rooftop Snipers",
"image": "/games/rooftop-sniper/logo.png",
"slug": "rooftop-sniper",
"unity": true
},
"sans-fight": {
"name": "Sans Fight",
"image": "/games/sans-fight/icon-256.png",
@ -228,11 +239,6 @@
"image": "/games/sm64/logo.png",
"slug": "sm64"
},
"solitaire": {
"name": "Solitaire",
"image": "/games/solitaire/logo.png",
"slug": "solitaire"
},
"suika-combination": {
"name": "Suika Combination",
"image": "/games/suika-combination/logo.webp",
@ -248,6 +254,12 @@
"image": "/games/there-is-no-game/logo.png",
"slug": "there-is-no-game"
},
"tunnelrush": {
"name": "Tunnel Rush",
"image": "/games/tunnelrush/logo.jpg",
"slug": "tunnelrush",
"unity": true
},
"ul6": {
"name": "Ultima 6",
"image": "/games/ul6/logo.png",

45
src/json/marketplace.json
View file

@ -17,50 +17,5 @@
"script": "/marketplace/oled-theme/theme.css",
"type": "theme",
"themeName": "oled"
},
"dev.wearr.oled-theme2": {
"title": "OLED Theme",
"description": "A beautiful OLED theme for Alu.",
"version": "0.0.1",
"image": "/marketplace/oled-theme/theme.png",
"script": "/marketplace/oled-theme/theme.css",
"type": "theme",
"themeName": "oled"
},
"dev.wearr.oled-theme3": {
"title": "OLED Theme",
"description": "A beautiful OLED theme for Alu.",
"version": "0.0.1",
"image": "/marketplace/oled-theme/theme.png",
"script": "/marketplace/oled-theme/theme.css",
"type": "theme",
"themeName": "oled"
},
"dev.wearr.oled-theme4": {
"title": "OLED Theme",
"description": "A beautiful OLED theme for Alu.",
"version": "0.0.1",
"image": "/marketplace/oled-theme/theme.png",
"script": "/marketplace/oled-theme/theme.css",
"type": "theme",
"themeName": "oled"
},
"dev.wearr.oled-theme5": {
"title": "OLED Theme",
"description": "A beautiful OLED theme for Alu.",
"version": "0.0.1",
"image": "/marketplace/oled-theme/theme.png",
"script": "/marketplace/oled-theme/theme.css",
"type": "theme",
"themeName": "oled"
},
"dev.wearr.oled-theme6": {
"title": "OLED Theme",
"description": "A beautiful OLED theme for Alu.",
"version": "0.0.1",
"image": "/marketplace/oled-theme/theme.png",
"script": "/marketplace/oled-theme/theme.css",
"type": "theme",
"themeName": "oled"
}
}

4
src/layouts/Layout.astro
View file

@ -88,6 +88,10 @@ const { title, optionalPreloads } = Astro.props;
color: var(--text-color);
}
h1, h2, h3, h4, h5, h6, p, span {
color: var(--text-color);
}
[data-theme="mocha"] {
/* Catppucin Mocha theme */
--background-color: #1e1e2e;

29
src/pages/game/[game].astro
View file

@ -32,8 +32,13 @@ if (!gameData) {
<iframe scrolling="no" src=`/games/${gameData.slug}` title={gameData.name} id="game-frame"/>
}
<div class="game-info">
<p class="game-title">{gameData.name}</p>
<p class="game-desc">{gameData.description}</p>
<div class="game-info-top">
<p class="game-title">{gameData.name}</p>
<img src="/img/games/fullscreen.svg" alt="Fullscreen" id="game-fullscreen" class="icn">
</div>
<div class="game-info-bottom">
<p class="game-desc">{gameData.description}</p>
</div>
</div>
</div>
</div>
@ -63,6 +68,17 @@ if (!gameData) {
background-color: var(--background-highlight);
width: 1350px;
padding: 1rem;
padding-top: 0;
}
.game-info-top {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
}
.icn {
width: 32px;
height: 32px;
cursor: pointer;
}
.game-title {
font-weight: bold;
@ -90,4 +106,13 @@ if (!gameData) {
let iframe = document.getElementById("game-frame") as HTMLIFrameElement;
iframe?.contentWindow?.focus();
})
let fullscreen = document.getElementById("game-fullscreen") as HTMLImageElement;
fullscreen.addEventListener("click", () => {
if (iframe.requestFullscreen) {
iframe.requestFullscreen();
iframe.focus();
}
});
</script>