├── .vscode └── settings.json ├── README.md ├── allGames ├── assets │ ├── favicon.webp │ ├── pop.mp3 │ ├── portada-pacman.avif │ ├── portada-pong.avif │ ├── portada-retroid-or-arkanoid.avif │ ├── portada-snake.avif │ ├── portada-stack-tower.avif │ ├── portada-super-mario-land.avif │ ├── portada-tetris.avif │ ├── sound-no.svg │ ├── sound-yes.svg │ └── start-coin.mp3 ├── components │ ├── GameboyButton.js │ ├── GameboyConsole.js │ ├── GameboyCross.js │ ├── GameboyCrystal.js │ ├── GameboyOptionButton.js │ ├── GameboyScreen.js │ ├── GameboySpeaker.js │ └── GameboyTop.js ├── fonts │ ├── lato.ttf │ ├── lato.woff │ ├── lato.woff2 │ ├── pretendo.ttf │ ├── pretendo.woff │ └── pretendo.woff2 ├── index.html ├── script.js └── styles.css ├── index.html ├── intro ├── assets │ ├── favicon.webp │ ├── sound-no.svg │ ├── sound-yes.svg │ └── start-coin.mp3 ├── components │ ├── GameboyButton.js │ ├── GameboyConsole.js │ ├── GameboyCross.js │ ├── GameboyCrystal.js │ ├── GameboyOptionButton.js │ ├── GameboyScreen.js │ ├── GameboySpeaker.js │ └── GameboyTop.js ├── fonts │ ├── PressStart2p.ttf │ ├── lato.ttf │ ├── lato.woff │ ├── lato.woff2 │ ├── pretendo.ttf │ ├── pretendo.woff │ └── pretendo.woff2 ├── script.js └── styles.css ├── license.txt ├── pacman ├── assets │ ├── favicon.webp │ ├── pacman-game │ │ ├── eating.mp3 │ │ ├── fruit.png │ │ ├── ghost-normal-move.mp3 │ │ ├── ghost-turn-to-blue.mp3 │ │ ├── ghost.png │ │ ├── ghost2.png │ │ ├── ghotBlue.png │ │ ├── ghotEyes.png │ │ ├── pacman.gif │ │ └── start-music.mp3 │ ├── sound-no.svg │ └── sound-yes.svg ├── components │ ├── GameboyButton.js │ ├── GameboyConsole.js │ ├── GameboyCross.js │ ├── GameboyCrystal.js │ ├── GameboyOptionButton.js │ ├── GameboyScreen.js │ ├── GameboySpeaker.js │ └── GameboyTop.js ├── fonts │ ├── lato.ttf │ ├── lato.woff │ ├── lato.woff2 │ ├── pretendo.ttf │ ├── pretendo.woff │ └── pretendo.woff2 ├── index.html ├── licenses │ └── buttonOfUiverse.txt ├── script.js └── styles.css ├── pong ├── assets │ ├── favicon.webp │ ├── music │ │ └── pong.mp3 │ ├── pong │ │ └── Symtext.ttf │ ├── sound-no.svg │ └── sound-yes.svg ├── components │ ├── GameboyButton.js │ ├── GameboyConsole.js │ ├── GameboyCross.js │ ├── GameboyCrystal.js │ ├── GameboyOptionButton.js │ ├── GameboyScreen.js │ ├── GameboySpeaker.js │ └── GameboyTop.js ├── fonts │ ├── lato.ttf │ ├── lato.woff │ ├── lato.woff2 │ ├── pretendo.ttf │ ├── pretendo.woff │ └── pretendo.woff2 ├── index.html ├── script.js └── styles.css ├── preview └── n751.avif ├── reference.md ├── retroid ├── assets │ ├── favicon.webp │ ├── music │ │ └── retroid.mp3 │ ├── retroid │ │ ├── arkanoid-sprite.png │ │ └── bricks-sprite.png │ ├── sound-no.svg │ └── sound-yes.svg ├── components │ ├── GameboyButton.js │ ├── GameboyConsole.js │ ├── GameboyCross.js │ ├── GameboyCrystal.js │ ├── GameboyOptionButton.js │ ├── GameboyScreen.js │ ├── GameboySpeaker.js │ └── GameboyTop.js ├── fonts │ ├── lato.ttf │ ├── lato.woff │ ├── lato.woff2 │ ├── pretendo.ttf │ ├── pretendo.woff │ └── pretendo.woff2 ├── index.html ├── script.js └── styles.css ├── snake ├── assets │ ├── favicon.webp │ ├── music │ │ └── snake.mp3 │ ├── snake-game │ │ └── fruits.png │ ├── sound-no.svg │ └── sound-yes.svg ├── components │ ├── GameboyButton.js │ ├── GameboyConsole.js │ ├── GameboyCross.js │ ├── GameboyCrystal.js │ ├── GameboyOptionButton.js │ ├── GameboyScreen.js │ ├── GameboySpeaker.js │ └── GameboyTop.js ├── fonts │ ├── lato.ttf │ ├── lato.woff │ ├── lato.woff2 │ ├── pretendo.ttf │ ├── pretendo.woff │ └── pretendo.woff2 ├── index.html ├── script.js └── styles.css ├── stackTower ├── assets │ ├── favicon.webp │ ├── music │ │ └── tower.mp3 │ ├── sound-no.svg │ └── sound-yes.svg ├── components │ ├── GameboyButton.js │ ├── GameboyConsole.js │ ├── GameboyCross.js │ ├── GameboyCrystal.js │ ├── GameboyOptionButton.js │ ├── GameboyScreen.js │ ├── GameboySpeaker.js │ └── GameboyTop.js ├── fonts │ ├── PressStart2p.ttf │ ├── lato.ttf │ ├── lato.woff │ ├── lato.woff2 │ ├── pretendo.ttf │ ├── pretendo.woff │ └── pretendo.woff2 ├── index.html ├── script.js └── styles.css └── tetris ├── assets ├── favicon.webp ├── music │ └── tetris.mp3 ├── sound-no.svg ├── sound-yes.svg ├── start-coin.mp3 └── tetris │ ├── SCOREBOARD.ttf │ ├── again.png │ ├── arrow.png │ ├── bg-repeat.png │ ├── cubeBase.png │ ├── sound-no.svg │ ├── sound-yes.svg │ └── tetris-logo.avif ├── components ├── GameboyButton.js ├── GameboyConsole.js ├── GameboyCross.js ├── GameboyCrystal.js ├── GameboyOptionButton.js ├── GameboyScreen.js ├── GameboySpeaker.js └── GameboyTop.js ├── fonts ├── PressStart2p.ttf ├── lato.ttf ├── lato.woff ├── lato.woff2 ├── pretendo.ttf ├── pretendo.woff └── pretendo.woff2 ├── index.html ├── script.js └── styles.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "livePreview.defaultPreviewPath": "/index.html" 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Foto Preview](preview/n751.avif)](https://20essentials.github.io/project-000-751) 2 | 3 |
4 | ← 5 |    6 | → 7 |
8 | -------------------------------------------------------------------------------- /allGames/assets/favicon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/assets/favicon.webp -------------------------------------------------------------------------------- /allGames/assets/pop.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/assets/pop.mp3 -------------------------------------------------------------------------------- /allGames/assets/portada-pacman.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/assets/portada-pacman.avif -------------------------------------------------------------------------------- /allGames/assets/portada-pong.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/assets/portada-pong.avif -------------------------------------------------------------------------------- /allGames/assets/portada-retroid-or-arkanoid.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/assets/portada-retroid-or-arkanoid.avif -------------------------------------------------------------------------------- /allGames/assets/portada-snake.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/assets/portada-snake.avif -------------------------------------------------------------------------------- /allGames/assets/portada-stack-tower.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/assets/portada-stack-tower.avif -------------------------------------------------------------------------------- /allGames/assets/portada-super-mario-land.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/assets/portada-super-mario-land.avif -------------------------------------------------------------------------------- /allGames/assets/portada-tetris.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/assets/portada-tetris.avif -------------------------------------------------------------------------------- /allGames/assets/sound-no.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /allGames/assets/sound-yes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /allGames/assets/start-coin.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/assets/start-coin.mp3 -------------------------------------------------------------------------------- /allGames/components/GameboyButton.js: -------------------------------------------------------------------------------- 1 | class GameboyButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --size: 47px; 11 | } 12 | 13 | .container { 14 | width: var(--size); 15 | height: var(--size); 16 | background-color: #E66E94; 17 | border-radius: 50%; 18 | background: radial-gradient(26px 26px at 24px 27px, #6F0119 75%, #A20D37 90%,#EF94B2); 19 | box-shadow: 1px -4px 0 -3px #7c4b5b inset, -3px 7px 5px -2px #1e0009, 1px -1px 0 2px #53182b; 20 | transition: box-shadow .2s linear; 21 | 22 | &:active { 23 | box-shadow: 1px -4px 8px -3px #7c4b5b44 inset, -3px 7px 8px -2px #1e000944, 1px -1px 2px 2px #53182b44; 24 | } 25 | } 26 | 27 | .label { 28 | font-family: "Pretendo"; 29 | font-size: 12px; 30 | letter-spacing: 0.5px; 31 | color: #302058; 32 | transform: translate(35%, 450%); 33 | pointer-events: none; 34 | } 35 | `; 36 | } 37 | 38 | addListeners(params) { 39 | this.addEventListener('click', e => { 40 | if (this.name === 'B') { 41 | this.dispatchEvent( 42 | new CustomEvent('box-left', { 43 | bubbles: true, 44 | composed: true 45 | }) 46 | ); 47 | } else if (this.name === 'A') { 48 | this.dispatchEvent( 49 | new CustomEvent('box-right', { 50 | bubbles: true, 51 | composed: true 52 | }) 53 | ); 54 | } 55 | }); 56 | } 57 | 58 | connectedCallback() { 59 | this.name = this.getAttribute('name'); 60 | this.render(); 61 | this.addListeners(); 62 | } 63 | 64 | render() { 65 | this.shadowRoot.innerHTML = /* html */ ` 66 | 67 |
68 |
${this.name}
69 |
`; 70 | } 71 | } 72 | 73 | customElements.define('gameboy-button', GameboyButton); 74 | -------------------------------------------------------------------------------- /allGames/components/GameboyCross.js: -------------------------------------------------------------------------------- 1 | class GameboyCross extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --size: 120px; 11 | } 12 | 13 | .container { 14 | --large: 85px; 15 | --short: 22px; 16 | --dark-color: #060206; 17 | 18 | margin: 5px; 19 | width: var(--size); 20 | height: var(--size); 21 | background: #CFC8D1; 22 | background-image: 23 | radial-gradient(#0003 1%, transparent), 24 | linear-gradient(50deg, #E1DEEA 10%, #D9D2D5 90%); 25 | border-radius: 50%; 26 | position: relative; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | } 31 | 32 | .axis { 33 | background: var(--dark-color); 34 | border-radius: 2px; 35 | box-shadow: 36 | 0 0 1px 4px #000, 37 | 0 5px 2px 1px #0008; 38 | display: flex; 39 | justify-content: space-between; 40 | transition: transform .2s ease; 41 | } 42 | 43 | .axis::before, 44 | .axis::after { 45 | content: ""; 46 | display: block; 47 | background: #ddd; 48 | filter: 49 | drop-shadow(2px 5px 1px red) 50 | drop-shadow(-2px -5px 1px blue); 51 | width: 6px; 52 | height: 6px; 53 | clip-path: polygon(0 0, 50% 100%, 100% 0); 54 | position: absolute; 55 | } 56 | 57 | .axis.x::before, 58 | .axis.x::after { 59 | --x: 0; 60 | transform: translate(var(--x), 8px) rotate(var(--rotate)); 61 | } 62 | 63 | .axis.x::before { --x: -15px; --rotate: 90deg; } 64 | .axis.x::after { --x: 15px; --rotate: -90deg; } 65 | 66 | .axis.y::before, 67 | .axis.y::after { 68 | --y: 0; 69 | transform: translate(8px, var(--y)) rotate(var(--rotate)); 70 | } 71 | 72 | .axis.y::before { --y: -15px; --rotate: 180deg; } 73 | .axis.y::after { --y: 15px; --rotate: 0; } 74 | 75 | .axis.x::after { right: 0; } 76 | .axis.y::after { bottom: 0; } 77 | 78 | .axis.x { 79 | width: var(--large); 80 | height: var(--short); 81 | position: absolute; 82 | border: 2px solid #363439; 83 | border-top: 3px solid #B7BEC8; 84 | } 85 | 86 | .axis.y { 87 | width: var(--short); 88 | height: var(--large); 89 | position: absolute; 90 | border: 2px solid #363439; 91 | border-top: 3px solid #B7BEC8; 92 | flex-direction: column; 93 | } 94 | 95 | .axis .group { 96 | width: calc(var(--short) + 0px); 97 | height: calc(var(--short) - 5px); 98 | display: flex; 99 | position: relative; 100 | justify-content: center; 101 | align-items: center; 102 | gap: 0 3px; 103 | } 104 | 105 | .axis.y .group { 106 | transform: rotate(90deg); 107 | padding: 5px 1px; 108 | 109 | &::before { 110 | position: absolute; 111 | content: ''; 112 | width: 127%; 113 | height: 120%; 114 | background: blue; 115 | border-radius: 4px; 116 | z-index: -1; 117 | opacity: 0; 118 | background-color: black; 119 | transform: rotate(-90deg) scale(1); 120 | } 121 | 122 | &:active { 123 | transform: rotate(-90deg) scale(0.99); 124 | &::before { 125 | opacity: 1; 126 | } 127 | } 128 | } 129 | 130 | .axis.x .group { 131 | padding: 2px 1px; 132 | transition: transform .2s ease; 133 | 134 | &::before { 135 | position: absolute; 136 | content: ''; 137 | width: 122%; 138 | height: 152%; 139 | background: blue; 140 | border-radius: 4px; 141 | z-index: -1; 142 | opacity: 0; 143 | background-color: black; 144 | } 145 | 146 | &:active { 147 | transform: scale(0.99); 148 | &::before { 149 | opacity: 1; 150 | } 151 | } 152 | } 153 | 154 | .axis .group .band { 155 | width: 5px; 156 | height: 100%; 157 | background: #181818; 158 | border-radius: 5px; 159 | pointer-events: none; 160 | } 161 | 162 | .center { 163 | width: calc(var(--short) + 5px); 164 | height: calc(var(--short) + 5px); 165 | background: var(--dark-color); 166 | position: absolute; 167 | display: flex; 168 | justify-content: center; 169 | align-items: center; 170 | } 171 | 172 | .center .gap { 173 | width: 80%; 174 | height: 80%; 175 | background: 176 | conic-gradient( 177 | #DDE8F777 0 1%, 178 | transparent 10% 35%, 179 | #DDE8F7 50%, 180 | transparent 65% 90%, 181 | #DDE8F777 99% 182 | ); 183 | border-radius: 50%; 184 | } 185 | `; 186 | } 187 | 188 | addListeners() { 189 | const $ = el => this.shadowRoot.querySelector(el); 190 | const parentComponet = $('.container'); 191 | parentComponet.addEventListener('click', e => { 192 | if (e.target.matches('.button-top')) { 193 | this.dispatchEvent( 194 | new CustomEvent('box-up', { 195 | bubbles: true, 196 | composed: true 197 | }) 198 | ); 199 | } else if (e.target.matches('.button-right')) { 200 | this.dispatchEvent( 201 | new CustomEvent('box-right', { 202 | bubbles: true, 203 | composed: true 204 | }) 205 | ); 206 | } else if (e.target.matches('.button-left')) { 207 | this.dispatchEvent( 208 | new CustomEvent('box-left', { 209 | bubbles: true, 210 | composed: true 211 | }) 212 | ); 213 | } else if (e.target.matches('.button-bottom')) { 214 | this.dispatchEvent( 215 | new CustomEvent('box-down', { 216 | bubbles: true, 217 | composed: true 218 | }) 219 | ); 220 | } 221 | }); 222 | } 223 | 224 | connectedCallback() { 225 | this.render(); 226 | this.addListeners() 227 | } 228 | 229 | render() { 230 | this.shadowRoot.innerHTML = /* html */ ` 231 | 232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
`; 261 | } 262 | } 263 | 264 | customElements.define('gameboy-cross', GameboyCross); 265 | -------------------------------------------------------------------------------- /allGames/components/GameboyCrystal.js: -------------------------------------------------------------------------------- 1 | import './GameboyScreen.js'; 2 | 3 | class GameboyCrystal extends HTMLElement { 4 | constructor() { 5 | super(); 6 | this.attachShadow({ mode: 'open' }); 7 | } 8 | 9 | static get styles() { 10 | return /* css */ ` 11 | :host { 12 | --width: 330px; 13 | --height: 240px; 14 | } 15 | 16 | .container { 17 | background-color: #737488; 18 | width: var(--width); 19 | height: var(--height); 20 | border-radius: 10px 10px 35px 10px; 21 | border: 1px solid #666; 22 | border-width: 0 1px 0 1px; 23 | box-shadow: 24 | 0 0 2px #514c65, 25 | 0 -1px 1px #161118, 26 | 0 -2px 1px #A0939F, 27 | 0 -4px 1px #514c65, 28 | 0 0 2px 2px #9C99AC88 inset, 29 | 0 -1px 2px 1px #0006 inset; 30 | } 31 | 32 | .top { 33 | --gameboy-stripe-gradient: 34 | linear-gradient( 35 | transparent 10px, 36 | #7d1a4a 11px 12px, 37 | transparent 12px 16px, 38 | #35224e 16px 18px, 39 | transparent 18px 40 | ); 41 | 42 | background: var(--gameboy-stripe-gradient); 43 | position: relative; 44 | height: 26px; 45 | margin: 0 15px; 46 | top: 0; 47 | } 48 | 49 | .top span { 50 | padding: 0 8px; 51 | background: #767189; 52 | position: absolute; 53 | right: 40px; 54 | top: 8px; 55 | } 56 | 57 | .top .text { 58 | font-size: 9.5px; 59 | } 60 | 61 | .bottom { 62 | display: flex; 63 | } 64 | 65 | .battery { 66 | padding: 0 10px; 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | transform: translateY(-20px); 71 | } 72 | 73 | .battery .led { 74 | width: 10px; 75 | height: 10px; 76 | background: #4a4748; 77 | border-radius: 50%; 78 | margin: 6px; 79 | } 80 | 81 | .battery .led.on { 82 | background: #E11E0A; 83 | background-image: linear-gradient(0deg, transparent, #fff2); 84 | box-shadow: 0 0 2px 1.5px #d87473; 85 | } 86 | 87 | .battery .text { 88 | font-size: 8px; 89 | } 90 | 91 | .text { 92 | font-family: Arial, sans-serif; 93 | font-size: 10px; 94 | color: #eee; 95 | text-shadow: 0 0 2px #eee9; 96 | } 97 | 98 | gameboy-screen { 99 | transform: translate(2px, 2px); 100 | } 101 | `; 102 | } 103 | 104 | connectedCallback() { 105 | this.render(); 106 | } 107 | 108 | 109 | render() { 110 | this.shadowRoot.innerHTML = /* html */ ` 111 | 112 |
113 |
114 | DOT MATRIX WITH STEREO SOUND 115 |
116 |
117 |
118 |
119 |
BATTERY
120 |
121 | 122 |
123 |
`; 124 | } 125 | } 126 | 127 | customElements.define('gameboy-crystal', GameboyCrystal); 128 | -------------------------------------------------------------------------------- /allGames/components/GameboyOptionButton.js: -------------------------------------------------------------------------------- 1 | class GameboyOptionButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | addListeners() { 8 | this.addEventListener('click', e => { 9 | if (this.name === 'SELECT') { 10 | this.dispatchEvent( 11 | new CustomEvent('box-click', { 12 | composed: true, 13 | bubbles: true 14 | }) 15 | ); 16 | } else if (this.name === 'START') { 17 | } 18 | }); 19 | 20 | document.addEventListener('keydown', ({ key }) => { 21 | if (key === "Enter") { 22 | this.dispatchEvent( 23 | new CustomEvent('box-click', { 24 | composed: true, 25 | bubbles: true 26 | }) 27 | ); 28 | } 29 | }) 30 | } 31 | 32 | static get styles() { 33 | return /* css */ ` 34 | :host { 35 | --width: 50px; 36 | --height: 12px; 37 | } 38 | 39 | .container { 40 | background: linear-gradient(to top, #EFF2F0, #AE9FA6); 41 | box-shadow: 42 | -4px 4px 3px -3px #0005 inset, 43 | 4px -4px 3px -3px #fffc inset; 44 | transform: rotate(-28deg); 45 | border-radius: 15px; 46 | padding: 1px 0; 47 | 48 | } 49 | 50 | .button { 51 | background: #9e9baf; 52 | background-image: linear-gradient(#C0BECA, #7F7584); 53 | border-radius: 10px; 54 | box-shadow: 55 | -2px -2px 5px #0004 inset, 56 | 2px 2px 5px #fff3 inset, 57 | 2px 2px 6px #0007, 58 | -1px 2px 3px #000d; 59 | width: var(--width); 60 | height: var(--height); 61 | margin: 3px 6px; 62 | transition: box-shadow .2s ease; 63 | 64 | &:active { 65 | box-shadow: 66 | -2px -2px 5px #0004 inset, 67 | 2px 2px 5px #fff3 inset, 68 | 2px 2px 6px #0004, 69 | -1px 2px 3px #0004; 70 | } 71 | } 72 | 73 | .label { 74 | font-family: "Pretendo"; 75 | font-size: 10px; 76 | letter-spacing: 0.5px; 77 | color: #302058; 78 | transform: translate(10px, 2px) rotate(-28deg); 79 | text-align: center; 80 | } 81 | `; 82 | } 83 | 84 | connectedCallback() { 85 | this.name = this.getAttribute('name'); 86 | this.render(); 87 | this.addListeners(); 88 | } 89 | 90 | render() { 91 | this.shadowRoot.innerHTML = /* html */ ` 92 | 93 |
94 |
95 |
96 |
${this.name}
97 | `; 98 | } 99 | } 100 | 101 | customElements.define('gameboy-option-button', GameboyOptionButton); 102 | -------------------------------------------------------------------------------- /allGames/components/GameboyScreen.js: -------------------------------------------------------------------------------- 1 | class GameboyScreen extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | this.matriz = [ 6 | [1, 2, 3], 7 | [4, 5, 6] 8 | ]; 9 | this.posX = 0; 10 | this.posY = 0; 11 | this.temporalX = 0; 12 | this.temporalY = 0; 13 | } 14 | 15 | static get styles() { 16 | return /* css */ ` 17 | :host { 18 | --width: 210px; 19 | --height: 180px; 20 | } 21 | 22 | 23 | .container { 24 | background: #9ca04c; 25 | box-shadow: 26 | 5px 5px 10px #0008 inset, 27 | -2px -1px 10px #0005 inset, 28 | 0 0 4px 3px #aaa4; 29 | width: var(--width); 30 | height: var(--height); 31 | display: flex; 32 | position: relative; 33 | justify-content: center; 34 | align-items: flex-start; 35 | overflow: hidden; 36 | } 37 | 38 | .scene { 39 | display: grid; 40 | place-content: center; 41 | width: 100%; 42 | height: 100%; 43 | text-align: center; 44 | 45 | & span { 46 | font-family: "Press Start 2P", sans-serif; 47 | font-weight: bold; 48 | font-size: 16px; 49 | letter-spacing: -.7px; 50 | color: #0f380f; 51 | display: block; 52 | width: 100%; 53 | 54 | 55 | & sup { 56 | font-weight: normal; 57 | font-size: 10px; 58 | } 59 | } 60 | } 61 | 62 | .intro, 63 | .games { 64 | transform: translateY(-100%); 65 | transition: transform .5s ease, opacity .5s ease; 66 | opacity: 0; 67 | display: none; 68 | 69 | &.open { 70 | transform: translateY(0%); 71 | opacity: 1; 72 | display: grid; 73 | } 74 | } 75 | 76 | .games { 77 | display: none; 78 | grid-template-columns: repeat(3, 50px); 79 | gap: 8px; 80 | 81 | .game { 82 | width: 50px; 83 | heigth: 50px; 84 | box-shadow: inset -4px -4px 3px #fff, inset 4px 4px 3px #000, 0 0 3px 1px #0008; 85 | text-decoration: none; 86 | 87 | &:hover, 88 | &.box-active { 89 | filter: contrast(120%) brightness(110%) saturate(120%); 90 | box-shadow: inset -4px -4px 3px #fff, inset 4px 4px 3px #000, 0 0 5px 5px #0002; 91 | } 92 | 93 | &.box-active { 94 | outline: 3px solid #f008; 95 | } 96 | 97 | img { 98 | display: block; 99 | width: 100%; 100 | height: 100%; 101 | object-fit: cover; 102 | object-position: top; 103 | transition: filter .3s ease-in-out; 104 | pointer-events: none; 105 | cursor: pointer; 106 | } 107 | } 108 | } 109 | 110 | 111 | } 112 | `; 113 | } 114 | 115 | giveFocusToAnchor(bandera = false) { 116 | 117 | const $ = el => this.shadowRoot.querySelector(el); 118 | const $$ = el => this.shadowRoot.querySelectorAll(el); 119 | const matrizValue = this.matriz?.[this.posY]?.[this.posX]; 120 | let value = null; 121 | if (matrizValue) { 122 | [this.temporalX, this.temporalY] = [this.posX, this.posY]; 123 | value = matrizValue; 124 | const $audio = document.createElement('audio'); 125 | $audio.src = 'assets/pop.mp3'; 126 | $audio.volume = '0.5'; 127 | $audio.play(); 128 | } else { 129 | const prevMatrizValue = this.matriz?.[this.temporalY]?.[this.temporalX]; 130 | [this.posX, this.posY] = [this.temporalX, this.temporalY]; 131 | value = prevMatrizValue; 132 | } 133 | const $box = $(`.box-${value}`); 134 | $$('.box-active').forEach(el => el.classList.remove('box-active')); 135 | $box.classList.add('box-active'); 136 | if (bandera) { 137 | $box.click(); 138 | } 139 | } 140 | 141 | addListeners() { 142 | document.addEventListener('box-up', () => { 143 | this.posY--; 144 | this.giveFocusToAnchor(); 145 | }); 146 | document.addEventListener('box-down', () => { 147 | this.posY++; 148 | this.giveFocusToAnchor(); 149 | }); 150 | document.addEventListener('box-left', () => { 151 | this.posX--; 152 | this.giveFocusToAnchor(); 153 | }); 154 | document.addEventListener('box-right', () => { 155 | this.posX++; 156 | this.giveFocusToAnchor(); 157 | }); 158 | document.addEventListener('box-click', () => { 159 | let bandera = true; 160 | this.giveFocusToAnchor(bandera); 161 | 162 | }); 163 | } 164 | 165 | keyEvents() { 166 | document.addEventListener('keydown', ({ key }) => { 167 | if (key === 'ArrowRight' || key === 'd' || key === 'D') { 168 | this.posX++; 169 | this.giveFocusToAnchor(); 170 | } else if (key === 'ArrowLeft' || key === 'a' || key === 'A') { 171 | this.posX--; 172 | this.giveFocusToAnchor(); 173 | } else if (key === 'ArrowDown' || key === 's' || key === 'S') { 174 | this.posY++; 175 | this.giveFocusToAnchor(); 176 | } else if (key === 'ArrowUp' || key === 'w' || key === 'W') { 177 | this.posY--; 178 | this.giveFocusToAnchor(); 179 | } 180 | }); 181 | } 182 | 183 | connectedCallback() { 184 | this.render(); 185 | this.keyEvents(); 186 | this.addListeners(); 187 | this.shadowRoot.querySelector('.box-1').classList.add('box-active'); 188 | } 189 | 190 | render() { 191 | this.shadowRoot.innerHTML = /* html */ ` 192 | 193 |
194 | 214 |
`; 215 | } 216 | } 217 | 218 | customElements.define('gameboy-screen', GameboyScreen); 219 | -------------------------------------------------------------------------------- /allGames/components/GameboySpeaker.js: -------------------------------------------------------------------------------- 1 | class GameboySpeaker extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: "open" }); 5 | } 6 | 7 | 8 | static get styles() { 9 | return /* css */` 10 | .container { 11 | display: flex; 12 | width: 120px; 13 | justify-content: space-around; 14 | position: absolute; 15 | right: 10px; 16 | bottom: 35px; 17 | transform: rotate(-30deg); 18 | } 19 | 20 | .band { 21 | width: 8px; 22 | height: 60px; 23 | border-radius: 8px; 24 | box-shadow: 3px 6px 1px rgba(0, 0, 0, 0.6) inset; 25 | background: rgba(0, 0, 0, 0.35); 26 | } 27 | `; 28 | } 29 | 30 | connectedCallback() { 31 | this.render(); 32 | } 33 | 34 | render() { 35 | this.shadowRoot.innerHTML = /* html */` 36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
`; 45 | } 46 | } 47 | 48 | customElements.define("gameboy-speaker", GameboySpeaker); 49 | -------------------------------------------------------------------------------- /allGames/components/GameboyTop.js: -------------------------------------------------------------------------------- 1 | class GameboyTop extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --height: 25px; 11 | } 12 | 13 | 14 | .container { 15 | display: flex; 16 | padding-bottom: 5px; 17 | margin-bottom: 1px; 18 | height: var(--height); 19 | overflow: hidden; 20 | border-radius: 12px 12px 0 0; 21 | box-shadow: 0px 18px 5px -10px #fff inset; 22 | } 23 | 24 | .container > div { 25 | border-radius: 0 0 2px 2px; 26 | border: 1px solid #1111; 27 | box-shadow: 0 2px 2px #2f2725aa; 28 | } 29 | 30 | .corner { 31 | width: 25px; 32 | } 33 | 34 | .corner.left { 35 | margin-right: 5px; 36 | } 37 | 38 | .corner.right { 39 | margin-left: 5px; 40 | } 41 | 42 | .top { 43 | width: 100%; 44 | } 45 | 46 | .top span { 47 | display: inline-block; 48 | font-family: Arial, sans-serif; 49 | font-size: 12px; 50 | color: #eee; 51 | text-shadow: 52 | 1px 2px 2px #0006; 53 | border-radius: 15px; 54 | padding: 1px 4px; 55 | transform: translate(6px, 1px); 56 | box-shadow: 57 | 0px 1px 2px #0005 inset, 58 | 0px -1px 2px #fffc inset; 59 | opacity: 0.8; 60 | } 61 | `; 62 | } 63 | 64 | connectedCallback() { 65 | this.render(); 66 | } 67 | 68 | render() { 69 | this.shadowRoot.innerHTML = /* html */ ` 70 | 71 |
72 |
73 |
74 | ◁ OFF·ON ▷ 75 |
76 |
77 |
`; 78 | } 79 | } 80 | 81 | customElements.define('gameboy-top', GameboyTop); 82 | -------------------------------------------------------------------------------- /allGames/fonts/lato.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/fonts/lato.ttf -------------------------------------------------------------------------------- /allGames/fonts/lato.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/fonts/lato.woff -------------------------------------------------------------------------------- /allGames/fonts/lato.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/fonts/lato.woff2 -------------------------------------------------------------------------------- /allGames/fonts/pretendo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/fonts/pretendo.ttf -------------------------------------------------------------------------------- /allGames/fonts/pretendo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/fonts/pretendo.woff -------------------------------------------------------------------------------- /allGames/fonts/pretendo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/allGames/fonts/pretendo.woff2 -------------------------------------------------------------------------------- /allGames/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gameboy 7 | 8 | 9 | 10 | 11 | 28 | 29 | 30 |
31 | 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /allGames/script.js: -------------------------------------------------------------------------------- 1 | import "./components/GameboyConsole.js"; 2 | 3 | -------------------------------------------------------------------------------- /allGames/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | user-select: none; 8 | font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 9 | 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue'; 10 | -webkit-tap-highlight-color: transparent; 11 | } 12 | 13 | body { 14 | --sb-track-color: #60a4ff; 15 | --sb-thumb-color: linear-gradient(to bottom, #7debf2, #60a4ff); 16 | --sb-size: 10px; 17 | } 18 | 19 | body::-webkit-scrollbar { 20 | width: var(--sb-size); 21 | } 22 | 23 | body::-webkit-scrollbar-track { 24 | background: var(--sb-track-color); 25 | } 26 | 27 | body::-webkit-scrollbar-thumb { 28 | background: var(--sb-thumb-color); 29 | } 30 | 31 | @supports not selector(::-webkit-scrollbar) { 32 | body { 33 | scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); 34 | } 35 | } 36 | 37 | body { 38 | height: 100dvh; 39 | width: 100%; 40 | display: flex; 41 | flex-wrap: wrap; 42 | place-content: center; 43 | background: linear-gradient(90deg, #7debf2, #60a4ff); 44 | } 45 | 46 | @font-face { 47 | font-family: 'Pretendo'; 48 | src: url('fonts/pretendo.woff2') format('woff2'), 49 | url('fonts/pretendo.woff') format('woff'), 50 | url('fonts/pretendo.ttf') format('truetype'); 51 | } 52 | 53 | @font-face { 54 | font-family: 'Lato'; 55 | src: url('fonts/lato.woff2') format('woff2'), 56 | url('fonts/lato.woff') format('woff'), 57 | url('fonts/lato.ttf') format('truetype'); 58 | } 59 | 60 | :root { 61 | --sound-yes: url('assets/sound-yes.svg'); 62 | --sound-no: url('assets/sound-no.svg'); 63 | } 64 | 65 | /***************************VIEW TRANSITIONS***************************/ 66 | html { 67 | view-transition-name: squareView; 68 | background: linear-gradient(90deg, #7debf2, #60a4ff); 69 | } 70 | 71 | @view-transition { 72 | navigation: auto; 73 | } 74 | 75 | ::view-transition-old(squareView) { 76 | animation: myViewTransition 0.4s ease reverse forwards; 77 | } 78 | 79 | ::view-transition-new(squareView) { 80 | animation: myViewTransition 0.7s ease forwards; 81 | } 82 | 83 | @keyframes myViewTransition { 84 | 0% { 85 | clip-path: circle(0% at 50% 34%); 86 | } 87 | 100% { 88 | clip-path: circle(116% at 50% 34%); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gameboy 7 | 8 | 13 | 14 | 15 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /intro/assets/favicon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/intro/assets/favicon.webp -------------------------------------------------------------------------------- /intro/assets/sound-no.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /intro/assets/sound-yes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /intro/assets/start-coin.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/intro/assets/start-coin.mp3 -------------------------------------------------------------------------------- /intro/components/GameboyButton.js: -------------------------------------------------------------------------------- 1 | class GameboyButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --size: 47px; 11 | } 12 | 13 | .container { 14 | width: var(--size); 15 | height: var(--size); 16 | background-color: #E66E94; 17 | border-radius: 50%; 18 | background: radial-gradient(26px 26px at 24px 27px, #6F0119 75%, #A20D37 90%,#EF94B2); 19 | box-shadow: 1px -4px 0 -3px #7c4b5b inset, -3px 7px 5px -2px #1e0009, 1px -1px 0 2px #53182b; 20 | transition: box-shadow .2s linear; 21 | 22 | &:active { 23 | box-shadow: 1px -4px 8px -3px #7c4b5b44 inset, -3px 7px 8px -2px #1e000944, 1px -1px 2px 2px #53182b44; 24 | } 25 | } 26 | 27 | .label { 28 | font-family: "Pretendo"; 29 | font-size: 12px; 30 | letter-spacing: 0.5px; 31 | color: #302058; 32 | transform: translate(35%, 450%); 33 | pointer-events: none; 34 | } 35 | `; 36 | } 37 | 38 | addListeners(params) { 39 | this.addEventListener('click', e => { 40 | if (this.name === 'B') { 41 | } else if (this.name === 'A') { 42 | } 43 | }); 44 | } 45 | 46 | connectedCallback() { 47 | this.name = this.getAttribute('name'); 48 | this.render(); 49 | this.addListeners(); 50 | } 51 | 52 | render() { 53 | this.shadowRoot.innerHTML = /* html */ ` 54 | 55 |
56 |
${this.name}
57 |
`; 58 | } 59 | } 60 | 61 | customElements.define('gameboy-button', GameboyButton); 62 | -------------------------------------------------------------------------------- /intro/components/GameboyCross.js: -------------------------------------------------------------------------------- 1 | class GameboyCross extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --size: 120px; 11 | } 12 | 13 | .container { 14 | --large: 85px; 15 | --short: 22px; 16 | --dark-color: #060206; 17 | 18 | margin: 5px; 19 | width: var(--size); 20 | height: var(--size); 21 | background: #CFC8D1; 22 | background-image: 23 | radial-gradient(#0003 1%, transparent), 24 | linear-gradient(50deg, #E1DEEA 10%, #D9D2D5 90%); 25 | border-radius: 50%; 26 | position: relative; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | } 31 | 32 | .axis { 33 | background: var(--dark-color); 34 | border-radius: 2px; 35 | box-shadow: 36 | 0 0 1px 4px #000, 37 | 0 5px 2px 1px #0008; 38 | display: flex; 39 | justify-content: space-between; 40 | transition: transform .2s ease; 41 | } 42 | 43 | .axis::before, 44 | .axis::after { 45 | content: ""; 46 | display: block; 47 | background: #ddd; 48 | filter: 49 | drop-shadow(2px 5px 1px red) 50 | drop-shadow(-2px -5px 1px blue); 51 | width: 6px; 52 | height: 6px; 53 | clip-path: polygon(0 0, 50% 100%, 100% 0); 54 | position: absolute; 55 | } 56 | 57 | .axis.x::before, 58 | .axis.x::after { 59 | --x: 0; 60 | transform: translate(var(--x), 8px) rotate(var(--rotate)); 61 | } 62 | 63 | .axis.x::before { --x: -15px; --rotate: 90deg; } 64 | .axis.x::after { --x: 15px; --rotate: -90deg; } 65 | 66 | .axis.y::before, 67 | .axis.y::after { 68 | --y: 0; 69 | transform: translate(8px, var(--y)) rotate(var(--rotate)); 70 | } 71 | 72 | .axis.y::before { --y: -15px; --rotate: 180deg; } 73 | .axis.y::after { --y: 15px; --rotate: 0; } 74 | 75 | .axis.x::after { right: 0; } 76 | .axis.y::after { bottom: 0; } 77 | 78 | .axis.x { 79 | width: var(--large); 80 | height: var(--short); 81 | position: absolute; 82 | border: 2px solid #363439; 83 | border-top: 3px solid #B7BEC8; 84 | } 85 | 86 | .axis.y { 87 | width: var(--short); 88 | height: var(--large); 89 | position: absolute; 90 | border: 2px solid #363439; 91 | border-top: 3px solid #B7BEC8; 92 | flex-direction: column; 93 | } 94 | 95 | .axis .group { 96 | width: calc(var(--short) + 0px); 97 | height: calc(var(--short) - 5px); 98 | display: flex; 99 | position: relative; 100 | justify-content: center; 101 | align-items: center; 102 | gap: 0 3px; 103 | } 104 | 105 | .axis.y .group { 106 | transform: rotate(90deg); 107 | padding: 5px 1px; 108 | 109 | &::before { 110 | position: absolute; 111 | content: ''; 112 | width: 127%; 113 | height: 120%; 114 | background: blue; 115 | border-radius: 4px; 116 | z-index: -1; 117 | opacity: 0; 118 | background-color: black; 119 | transform: rotate(-90deg) scale(1); 120 | } 121 | 122 | &:active { 123 | transform: rotate(-90deg) scale(0.99); 124 | &::before { 125 | opacity: 1; 126 | } 127 | } 128 | } 129 | 130 | .axis.x .group { 131 | padding: 2px 1px; 132 | transition: transform .2s ease; 133 | 134 | &::before { 135 | position: absolute; 136 | content: ''; 137 | width: 122%; 138 | height: 152%; 139 | background: blue; 140 | border-radius: 4px; 141 | z-index: -1; 142 | opacity: 0; 143 | background-color: black; 144 | } 145 | 146 | &:active { 147 | transform: scale(0.99); 148 | &::before { 149 | opacity: 1; 150 | } 151 | } 152 | } 153 | 154 | .axis .group .band { 155 | width: 5px; 156 | height: 100%; 157 | background: #181818; 158 | border-radius: 5px; 159 | pointer-events: none; 160 | } 161 | 162 | .center { 163 | width: calc(var(--short) + 5px); 164 | height: calc(var(--short) + 5px); 165 | background: var(--dark-color); 166 | position: absolute; 167 | display: flex; 168 | justify-content: center; 169 | align-items: center; 170 | } 171 | 172 | .center .gap { 173 | width: 80%; 174 | height: 80%; 175 | background: 176 | conic-gradient( 177 | #DDE8F777 0 1%, 178 | transparent 10% 35%, 179 | #DDE8F7 50%, 180 | transparent 65% 90%, 181 | #DDE8F777 99% 182 | ); 183 | border-radius: 50%; 184 | } 185 | `; 186 | } 187 | 188 | connectedCallback() { 189 | this.render(); 190 | } 191 | 192 | render() { 193 | this.shadowRoot.innerHTML = /* html */ ` 194 | 195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
`; 224 | } 225 | } 226 | 227 | customElements.define('gameboy-cross', GameboyCross); 228 | -------------------------------------------------------------------------------- /intro/components/GameboyCrystal.js: -------------------------------------------------------------------------------- 1 | import './GameboyScreen.js'; 2 | 3 | class GameboyCrystal extends HTMLElement { 4 | constructor() { 5 | super(); 6 | this.attachShadow({ mode: 'open' }); 7 | } 8 | 9 | static get styles() { 10 | return /* css */ ` 11 | :host { 12 | --width: 330px; 13 | --height: 240px; 14 | } 15 | 16 | .container { 17 | background-color: #737488; 18 | width: var(--width); 19 | height: var(--height); 20 | border-radius: 10px 10px 35px 10px; 21 | border: 1px solid #666; 22 | border-width: 0 1px 0 1px; 23 | box-shadow: 24 | 0 0 2px #514c65, 25 | 0 -1px 1px #161118, 26 | 0 -2px 1px #A0939F, 27 | 0 -4px 1px #514c65, 28 | 0 0 2px 2px #9C99AC88 inset, 29 | 0 -1px 2px 1px #0006 inset; 30 | } 31 | 32 | .top { 33 | --gameboy-stripe-gradient: 34 | linear-gradient( 35 | transparent 10px, 36 | #7d1a4a 11px 12px, 37 | transparent 12px 16px, 38 | #35224e 16px 18px, 39 | transparent 18px 40 | ); 41 | 42 | background: var(--gameboy-stripe-gradient); 43 | position: relative; 44 | height: 26px; 45 | margin: 0 15px; 46 | top: 0; 47 | } 48 | 49 | .top span { 50 | padding: 0 8px; 51 | background: #767189; 52 | position: absolute; 53 | right: 40px; 54 | top: 8px; 55 | } 56 | 57 | .top .text { 58 | font-size: 9.5px; 59 | } 60 | 61 | .bottom { 62 | display: flex; 63 | } 64 | 65 | .battery { 66 | padding: 0 10px; 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | transform: translateY(-20px); 71 | } 72 | 73 | .battery .led { 74 | width: 10px; 75 | height: 10px; 76 | background: #4a4748; 77 | border-radius: 50%; 78 | margin: 6px; 79 | } 80 | 81 | .battery .led.on { 82 | background: #E11E0A; 83 | background-image: linear-gradient(0deg, transparent, #fff2); 84 | box-shadow: 0 0 2px 1.5px #d87473; 85 | } 86 | 87 | .battery .text { 88 | font-size: 8px; 89 | } 90 | 91 | .text { 92 | font-family: Arial, sans-serif; 93 | font-size: 10px; 94 | color: #eee; 95 | text-shadow: 0 0 2px #eee9; 96 | } 97 | 98 | gameboy-screen { 99 | transform: translate(2px, 2px); 100 | } 101 | `; 102 | } 103 | 104 | connectedCallback() { 105 | this.render(); 106 | } 107 | 108 | static get observedAttributes() { 109 | return ['power']; 110 | } 111 | 112 | attributeChangedCallback(name, oldValue, newValue) { 113 | if (name === 'power') { 114 | const $led = this.shadowRoot.querySelector('.led'); 115 | let boolean = newValue === 'true'; 116 | $led.classList.toggle('on', boolean); 117 | this.shadowRoot.querySelector('gameboy-screen').setAttribute('on', boolean) 118 | } 119 | } 120 | 121 | render() { 122 | this.shadowRoot.innerHTML = /* html */ ` 123 | 124 |
125 |
126 | DOT MATRIX WITH STEREO SOUND 127 |
128 |
129 |
130 |
131 |
BATTERY
132 |
133 | 134 |
135 |
`; 136 | } 137 | } 138 | 139 | customElements.define('gameboy-crystal', GameboyCrystal); 140 | -------------------------------------------------------------------------------- /intro/components/GameboyOptionButton.js: -------------------------------------------------------------------------------- 1 | class GameboyOptionButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | addListeners() { 8 | this.addEventListener('click', e => { 9 | if (this.name === 'SELECT') { 10 | 11 | } else if (this.name === 'START') { 12 | window.open('./allGames/', "_self"); 13 | } 14 | }) 15 | } 16 | 17 | static get styles() { 18 | return /* css */ ` 19 | :host { 20 | --width: 50px; 21 | --height: 12px; 22 | } 23 | 24 | .container { 25 | background: linear-gradient(to top, #EFF2F0, #AE9FA6); 26 | box-shadow: 27 | -4px 4px 3px -3px #0005 inset, 28 | 4px -4px 3px -3px #fffc inset; 29 | transform: rotate(-28deg); 30 | border-radius: 15px; 31 | padding: 1px 0; 32 | 33 | } 34 | 35 | .button { 36 | background: #9e9baf; 37 | background-image: linear-gradient(#C0BECA, #7F7584); 38 | border-radius: 10px; 39 | box-shadow: 40 | -2px -2px 5px #0004 inset, 41 | 2px 2px 5px #fff3 inset, 42 | 2px 2px 6px #0007, 43 | -1px 2px 3px #000d; 44 | width: var(--width); 45 | height: var(--height); 46 | margin: 3px 6px; 47 | transition: box-shadow .2s ease; 48 | 49 | &:active { 50 | box-shadow: 51 | -2px -2px 5px #0004 inset, 52 | 2px 2px 5px #fff3 inset, 53 | 2px 2px 6px #0004, 54 | -1px 2px 3px #0004; 55 | } 56 | } 57 | 58 | .label { 59 | font-family: "Pretendo"; 60 | font-size: 10px; 61 | letter-spacing: 0.5px; 62 | color: #302058; 63 | transform: translate(10px, 2px) rotate(-28deg); 64 | text-align: center; 65 | } 66 | `; 67 | } 68 | 69 | connectedCallback() { 70 | this.name = this.getAttribute('name'); 71 | this.render(); 72 | this.addListeners() 73 | } 74 | 75 | render() { 76 | this.shadowRoot.innerHTML = /* html */ ` 77 | 78 |
79 |
80 |
81 |
${this.name}
82 | `; 83 | } 84 | } 85 | 86 | customElements.define('gameboy-option-button', GameboyOptionButton); 87 | -------------------------------------------------------------------------------- /intro/components/GameboyScreen.js: -------------------------------------------------------------------------------- 1 | class GameboyScreen extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get observedAttributes() { 8 | return ['on']; 9 | } 10 | 11 | attributeChangedCallback(name, oldValue, newValue) { 12 | if (name === 'on') { 13 | const isON = newValue === 'true'; 14 | const $intro = this?.shadowRoot?.querySelector('.intro'); 15 | if ($intro) { 16 | $intro?.classList?.toggle('open', isON); 17 | } 18 | 19 | if (isON) { 20 | const $audio = document.createElement('audio'); 21 | $audio.src = 'intro/assets/start-coin.mp3'; 22 | $audio.play(); 23 | 24 | setTimeout(() => { 25 | $intro.classList.remove('open'); 26 | setTimeout(() => { 27 | window.open('./allGames/', '_self'); 28 | }, 500); 29 | }, 1000); 30 | } else { 31 | this.shadowRoot 32 | .querySelectorAll('.scene') 33 | .forEach(scene => scene?.classList?.remove('open')); 34 | this.shadowRoot 35 | .querySelectorAll('.active-game') 36 | .forEach(scene => scene?.classList?.remove('active-game')); 37 | } 38 | } 39 | 40 | document.addEventListener('close-all-games', e => { 41 | this.shadowRoot 42 | ?.querySelectorAll('.active-game') 43 | ?.forEach(scene => scene?.classList?.remove('active-game')); 44 | }); 45 | } 46 | 47 | static get styles() { 48 | return /* css */ ` 49 | :host { 50 | --width: 210px; 51 | --height: 180px; 52 | } 53 | .container { 54 | background: #9ca04c; 55 | box-shadow: 56 | 5px 5px 10px #0008 inset, 57 | -2px -1px 10px #0005 inset, 58 | 0 0 4px 3px #aaa4; 59 | width: var(--width); 60 | height: var(--height); 61 | display: flex; 62 | position: relative; 63 | justify-content: center; 64 | align-items: flex-start; 65 | overflow: hidden; 66 | } 67 | 68 | .scene { 69 | display: grid; 70 | place-content: center; 71 | width: 100%; 72 | height: 100%; 73 | text-align: center; 74 | 75 | & span { 76 | font-family: "Press Start 2P", sans-serif; 77 | font-weight: bold; 78 | font-size: 16px; 79 | letter-spacing: -.7px; 80 | color: #0f380f; 81 | display: block; 82 | width: 100%; 83 | 84 | 85 | & sup { 86 | font-weight: normal; 87 | font-size: 10px; 88 | } 89 | } 90 | } 91 | 92 | .intro, 93 | .games { 94 | transform: translateY(-100%); 95 | transition: transform .5s ease, opacity .5s ease; 96 | opacity: 0; 97 | display: none; 98 | 99 | &.open { 100 | transform: translateY(0%); 101 | opacity: 1; 102 | display: grid; 103 | } 104 | } 105 | 106 | 107 | 108 | 109 | } 110 | `; 111 | } 112 | 113 | connectedCallback() { 114 | this.render(); 115 | } 116 | 117 | render() { 118 | this.shadowRoot.innerHTML = /* html */ ` 119 | 120 |
121 | 124 |
`; 125 | } 126 | } 127 | 128 | customElements.define('gameboy-screen', GameboyScreen); 129 | -------------------------------------------------------------------------------- /intro/components/GameboySpeaker.js: -------------------------------------------------------------------------------- 1 | class GameboySpeaker extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: "open" }); 5 | } 6 | 7 | 8 | static get styles() { 9 | return /* css */` 10 | :host { 11 | 12 | } 13 | 14 | .container { 15 | display: flex; 16 | width: 120px; 17 | justify-content: space-around; 18 | position: absolute; 19 | right: 10px; 20 | bottom: 35px; 21 | transform: rotate(-30deg); 22 | } 23 | 24 | .band { 25 | width: 8px; 26 | height: 60px; 27 | border-radius: 8px; 28 | box-shadow: 3px 6px 1px rgba(0, 0, 0, 0.6) inset; 29 | background: rgba(0, 0, 0, 0.35); 30 | } 31 | `; 32 | } 33 | 34 | connectedCallback() { 35 | this.render(); 36 | } 37 | 38 | render() { 39 | this.shadowRoot.innerHTML = /* html */` 40 | 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
`; 49 | } 50 | } 51 | 52 | customElements.define("gameboy-speaker", GameboySpeaker); 53 | -------------------------------------------------------------------------------- /intro/components/GameboyTop.js: -------------------------------------------------------------------------------- 1 | class GameboyTop extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --height: 25px; 11 | 12 | } 13 | 14 | 15 | .container { 16 | display: flex; 17 | padding-bottom: 5px; 18 | margin-bottom: 1px; 19 | height: var(--height); 20 | overflow: hidden; 21 | border-radius: 12px 12px 0 0; 22 | box-shadow: 0px 18px 5px -10px #fff inset; 23 | } 24 | 25 | .container > div { 26 | border-radius: 0 0 2px 2px; 27 | border: 1px solid #1111; 28 | box-shadow: 0 2px 2px #2f2725aa; 29 | } 30 | 31 | .corner { 32 | width: 25px; 33 | } 34 | 35 | .corner.left { 36 | margin-right: 5px; 37 | } 38 | 39 | .corner.right { 40 | margin-left: 5px; 41 | } 42 | 43 | .top { 44 | width: 100%; 45 | } 46 | 47 | .top span { 48 | display: inline-block; 49 | font-family: Arial, sans-serif; 50 | font-size: 12px; 51 | color: #eee; 52 | text-shadow: 53 | 1px 2px 2px #0006; 54 | border-radius: 15px; 55 | padding: 1px 4px; 56 | transform: translate(6px, 1px); 57 | box-shadow: 58 | 0px 1px 2px #0005 inset, 59 | 0px -1px 2px #fffc inset; 60 | opacity: 0.8; 61 | } 62 | `; 63 | } 64 | 65 | connectedCallback() { 66 | this.render(); 67 | } 68 | 69 | render() { 70 | this.shadowRoot.innerHTML = /* html */ ` 71 | 72 |
73 |
74 |
75 | ◁ OFF·ON ▷ 76 |
77 |
78 |
`; 79 | } 80 | } 81 | 82 | customElements.define('gameboy-top', GameboyTop); 83 | -------------------------------------------------------------------------------- /intro/fonts/PressStart2p.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/intro/fonts/PressStart2p.ttf -------------------------------------------------------------------------------- /intro/fonts/lato.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/intro/fonts/lato.ttf -------------------------------------------------------------------------------- /intro/fonts/lato.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/intro/fonts/lato.woff -------------------------------------------------------------------------------- /intro/fonts/lato.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/intro/fonts/lato.woff2 -------------------------------------------------------------------------------- /intro/fonts/pretendo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/intro/fonts/pretendo.ttf -------------------------------------------------------------------------------- /intro/fonts/pretendo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/intro/fonts/pretendo.woff -------------------------------------------------------------------------------- /intro/fonts/pretendo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/intro/fonts/pretendo.woff2 -------------------------------------------------------------------------------- /intro/script.js: -------------------------------------------------------------------------------- 1 | import "./components/GameboyConsole.js"; 2 | 3 | -------------------------------------------------------------------------------- /intro/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | user-select: none; 8 | font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 9 | 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue'; 10 | -webkit-tap-highlight-color: transparent; 11 | } 12 | 13 | body { 14 | --sb-track-color: #60a4ff; 15 | --sb-thumb-color: linear-gradient(to bottom, #7debf2, #60a4ff); 16 | --sb-size: 10px; 17 | } 18 | 19 | body::-webkit-scrollbar { 20 | width: var(--sb-size); 21 | } 22 | 23 | body::-webkit-scrollbar-track { 24 | background: var(--sb-track-color); 25 | } 26 | 27 | body::-webkit-scrollbar-thumb { 28 | background: var(--sb-thumb-color); 29 | } 30 | 31 | @supports not selector(::-webkit-scrollbar) { 32 | body { 33 | scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); 34 | } 35 | } 36 | 37 | body { 38 | height: 100dvh; 39 | width: 100%; 40 | display: flex; 41 | flex-wrap: wrap; 42 | place-content: center; 43 | background: linear-gradient(90deg, #7debf2, #60a4ff); 44 | } 45 | 46 | @font-face { 47 | font-family: 'Pretendo'; 48 | src: url('fonts/pretendo.woff2') format('woff2'), 49 | url('fonts/pretendo.woff') format('woff'), 50 | url('fonts/pretendo.ttf') format('truetype'); 51 | } 52 | 53 | @font-face { 54 | font-family: 'Lato'; 55 | src: url('fonts/lato.woff2') format('woff2'), 56 | url('fonts/lato.woff') format('woff'), 57 | url('fonts/lato.ttf') format('truetype'); 58 | } 59 | @font-face { 60 | font-family: 'Press Start 2P'; 61 | src: url('fonts/PressStart2p.ttf') format('truetype'); 62 | } 63 | 64 | /***************************VIEW TRANSITIONS***************************/ 65 | html { 66 | view-transition-name: squareView; 67 | background: linear-gradient(90deg, #7debf2, #60a4ff); 68 | } 69 | 70 | @view-transition { 71 | navigation: auto; 72 | } 73 | 74 | ::view-transition-old(squareView) { 75 | animation: myViewTransition 0.4s ease reverse forwards; 76 | } 77 | 78 | ::view-transition-new(squareView) { 79 | animation: myViewTransition 0.7s ease forwards; 80 | } 81 | 82 | @keyframes myViewTransition { 83 | 0% { 84 | clip-path: circle(0% at 50% 34%); 85 | } 86 | 100% { 87 | clip-path: circle(116% at 50% 34%); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /license.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /pacman/assets/favicon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/assets/favicon.webp -------------------------------------------------------------------------------- /pacman/assets/pacman-game/eating.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/assets/pacman-game/eating.mp3 -------------------------------------------------------------------------------- /pacman/assets/pacman-game/fruit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/assets/pacman-game/fruit.png -------------------------------------------------------------------------------- /pacman/assets/pacman-game/ghost-normal-move.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/assets/pacman-game/ghost-normal-move.mp3 -------------------------------------------------------------------------------- /pacman/assets/pacman-game/ghost-turn-to-blue.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/assets/pacman-game/ghost-turn-to-blue.mp3 -------------------------------------------------------------------------------- /pacman/assets/pacman-game/ghost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/assets/pacman-game/ghost.png -------------------------------------------------------------------------------- /pacman/assets/pacman-game/ghost2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/assets/pacman-game/ghost2.png -------------------------------------------------------------------------------- /pacman/assets/pacman-game/ghotBlue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/assets/pacman-game/ghotBlue.png -------------------------------------------------------------------------------- /pacman/assets/pacman-game/ghotEyes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/assets/pacman-game/ghotEyes.png -------------------------------------------------------------------------------- /pacman/assets/pacman-game/pacman.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/assets/pacman-game/pacman.gif -------------------------------------------------------------------------------- /pacman/assets/pacman-game/start-music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/assets/pacman-game/start-music.mp3 -------------------------------------------------------------------------------- /pacman/assets/sound-no.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /pacman/assets/sound-yes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /pacman/components/GameboyButton.js: -------------------------------------------------------------------------------- 1 | class GameboyButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --size: 47px; 11 | } 12 | 13 | .container { 14 | width: var(--size); 15 | height: var(--size); 16 | background-color: #E66E94; 17 | border-radius: 50%; 18 | background: radial-gradient(26px 26px at 24px 27px, #6F0119 75%, #A20D37 90%,#EF94B2); 19 | box-shadow: 1px -4px 0 -3px #7c4b5b inset, -3px 7px 5px -2px #1e0009, 1px -1px 0 2px #53182b; 20 | transition: box-shadow .2s linear; 21 | 22 | &:active { 23 | box-shadow: 1px -4px 8px -3px #7c4b5b44 inset, -3px 7px 8px -2px #1e000944, 1px -1px 2px 2px #53182b44; 24 | } 25 | } 26 | 27 | .label { 28 | font-family: "Pretendo"; 29 | font-size: 12px; 30 | letter-spacing: 0.5px; 31 | color: #302058; 32 | transform: translate(35%, 450%); 33 | pointer-events: none; 34 | } 35 | `; 36 | } 37 | 38 | addListeners(params) { 39 | this.addEventListener('click', e => { 40 | if (this.name === 'B') { 41 | 42 | } else if (this.name === 'A') { 43 | this.dispatchEvent( 44 | new CustomEvent('pacman-to-right', { 45 | bubbles: true, 46 | composed: true 47 | }) 48 | ); 49 | } 50 | }) 51 | } 52 | 53 | connectedCallback() { 54 | this.name = this.getAttribute('name'); 55 | this.render(); 56 | this.addListeners() 57 | } 58 | 59 | render() { 60 | this.shadowRoot.innerHTML = /* html */ ` 61 | 62 |
63 |
${this.name}
64 |
`; 65 | } 66 | } 67 | 68 | customElements.define('gameboy-button', GameboyButton); 69 | -------------------------------------------------------------------------------- /pacman/components/GameboyCross.js: -------------------------------------------------------------------------------- 1 | class GameboyCross extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --size: 120px; 11 | } 12 | 13 | .container { 14 | --large: 85px; 15 | --short: 22px; 16 | --dark-color: #060206; 17 | 18 | margin: 5px; 19 | width: var(--size); 20 | height: var(--size); 21 | background: #CFC8D1; 22 | background-image: 23 | radial-gradient(#0003 1%, transparent), 24 | linear-gradient(50deg, #E1DEEA 10%, #D9D2D5 90%); 25 | border-radius: 50%; 26 | position: relative; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | } 31 | 32 | .axis { 33 | background: var(--dark-color); 34 | border-radius: 2px; 35 | box-shadow: 36 | 0 0 1px 4px #000, 37 | 0 5px 2px 1px #0008; 38 | display: flex; 39 | justify-content: space-between; 40 | transition: transform .2s ease; 41 | } 42 | 43 | .axis::before, 44 | .axis::after { 45 | content: ""; 46 | display: block; 47 | background: #ddd; 48 | filter: 49 | drop-shadow(2px 5px 1px red) 50 | drop-shadow(-2px -5px 1px blue); 51 | width: 6px; 52 | height: 6px; 53 | clip-path: polygon(0 0, 50% 100%, 100% 0); 54 | position: absolute; 55 | } 56 | 57 | .axis.x::before, 58 | .axis.x::after { 59 | --x: 0; 60 | transform: translate(var(--x), 8px) rotate(var(--rotate)); 61 | } 62 | 63 | .axis.x::before { --x: -15px; --rotate: 90deg; } 64 | .axis.x::after { --x: 15px; --rotate: -90deg; } 65 | 66 | .axis.y::before, 67 | .axis.y::after { 68 | --y: 0; 69 | transform: translate(8px, var(--y)) rotate(var(--rotate)); 70 | } 71 | 72 | .axis.y::before { --y: -15px; --rotate: 180deg; } 73 | .axis.y::after { --y: 15px; --rotate: 0; } 74 | 75 | .axis.x::after { right: 0; } 76 | .axis.y::after { bottom: 0; } 77 | 78 | .axis.x { 79 | width: var(--large); 80 | height: var(--short); 81 | position: absolute; 82 | border: 2px solid #363439; 83 | border-top: 3px solid #B7BEC8; 84 | } 85 | 86 | .axis.y { 87 | width: var(--short); 88 | height: var(--large); 89 | position: absolute; 90 | border: 2px solid #363439; 91 | border-top: 3px solid #B7BEC8; 92 | flex-direction: column; 93 | } 94 | 95 | .axis .group { 96 | width: calc(var(--short) + 0px); 97 | height: calc(var(--short) - 5px); 98 | display: flex; 99 | position: relative; 100 | justify-content: center; 101 | align-items: center; 102 | gap: 0 3px; 103 | } 104 | 105 | .axis.y .group { 106 | transform: rotate(90deg); 107 | padding: 5px 1px; 108 | 109 | &::before { 110 | position: absolute; 111 | content: ''; 112 | width: 127%; 113 | height: 120%; 114 | background: blue; 115 | border-radius: 4px; 116 | z-index: -1; 117 | opacity: 0; 118 | background-color: black; 119 | transform: rotate(-90deg) scale(1); 120 | } 121 | 122 | &:active { 123 | transform: rotate(-90deg) scale(0.99); 124 | &::before { 125 | opacity: 1; 126 | } 127 | } 128 | } 129 | 130 | .axis.x .group { 131 | padding: 2px 1px; 132 | transition: transform .2s ease; 133 | 134 | &::before { 135 | position: absolute; 136 | content: ''; 137 | width: 122%; 138 | height: 152%; 139 | background: blue; 140 | border-radius: 4px; 141 | z-index: -1; 142 | opacity: 0; 143 | background-color: black; 144 | } 145 | 146 | &:active { 147 | transform: scale(0.99); 148 | &::before { 149 | opacity: 1; 150 | } 151 | } 152 | } 153 | 154 | .axis .group .band { 155 | width: 5px; 156 | height: 100%; 157 | background: #181818; 158 | border-radius: 5px; 159 | pointer-events: none; 160 | } 161 | 162 | .center { 163 | width: calc(var(--short) + 5px); 164 | height: calc(var(--short) + 5px); 165 | background: var(--dark-color); 166 | position: absolute; 167 | display: flex; 168 | justify-content: center; 169 | align-items: center; 170 | } 171 | 172 | .center .gap { 173 | width: 80%; 174 | height: 80%; 175 | background: 176 | conic-gradient( 177 | #DDE8F777 0 1%, 178 | transparent 10% 35%, 179 | #DDE8F7 50%, 180 | transparent 65% 90%, 181 | #DDE8F777 99% 182 | ); 183 | border-radius: 50%; 184 | } 185 | `; 186 | } 187 | 188 | addListeners() { 189 | const $ = el => this.shadowRoot.querySelector(el); 190 | const parentComponet = $('.container'); 191 | parentComponet.addEventListener('click', e => { 192 | if (e.target.matches('.button-top')) { 193 | this.dispatchEvent( 194 | new CustomEvent('pacman-to-up', { 195 | bubbles: true, 196 | composed: true 197 | }) 198 | ); 199 | } else if (e.target.matches('.button-right')) { 200 | this.dispatchEvent( 201 | new CustomEvent('pacman-to-right', { 202 | bubbles: true, 203 | composed: true 204 | }) 205 | ); 206 | } else if (e.target.matches('.button-left')) { 207 | this.dispatchEvent( 208 | new CustomEvent('pacman-to-left', { 209 | bubbles: true, 210 | composed: true 211 | }) 212 | ); 213 | } else if (e.target.matches('.button-bottom')) { 214 | this.dispatchEvent( 215 | new CustomEvent('pacman-to-down', { 216 | bubbles: true, 217 | composed: true 218 | }) 219 | ); 220 | } 221 | }); 222 | } 223 | 224 | connectedCallback() { 225 | this.render(); 226 | this.addListeners() 227 | } 228 | 229 | render() { 230 | this.shadowRoot.innerHTML = /* html */ ` 231 | 232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
`; 261 | } 262 | } 263 | 264 | customElements.define('gameboy-cross', GameboyCross); 265 | -------------------------------------------------------------------------------- /pacman/components/GameboyCrystal.js: -------------------------------------------------------------------------------- 1 | import './GameboyScreen.js'; 2 | 3 | class GameboyCrystal extends HTMLElement { 4 | constructor() { 5 | super(); 6 | this.attachShadow({ mode: 'open' }); 7 | } 8 | 9 | static get styles() { 10 | return /* css */ ` 11 | :host { 12 | --width: 330px; 13 | --height: 240px; 14 | } 15 | 16 | .container { 17 | background-color: #737488; 18 | width: var(--width); 19 | height: var(--height); 20 | border-radius: 10px 10px 35px 10px; 21 | border: 1px solid #666; 22 | border-width: 0 1px 0 1px; 23 | box-shadow: 24 | 0 0 2px #514c65, 25 | 0 -1px 1px #161118, 26 | 0 -2px 1px #A0939F, 27 | 0 -4px 1px #514c65, 28 | 0 0 2px 2px #9C99AC88 inset, 29 | 0 -1px 2px 1px #0006 inset; 30 | } 31 | 32 | .top { 33 | --gameboy-stripe-gradient: 34 | linear-gradient( 35 | transparent 10px, 36 | #7d1a4a 11px 12px, 37 | transparent 12px 16px, 38 | #35224e 16px 18px, 39 | transparent 18px 40 | ); 41 | 42 | background: var(--gameboy-stripe-gradient); 43 | position: relative; 44 | height: 26px; 45 | margin: 0 15px; 46 | top: 0; 47 | } 48 | 49 | .top span { 50 | padding: 0 8px; 51 | background: #767189; 52 | position: absolute; 53 | right: 40px; 54 | top: 8px; 55 | } 56 | 57 | .top .text { 58 | font-size: 9.5px; 59 | } 60 | 61 | .bottom { 62 | display: flex; 63 | } 64 | 65 | .battery { 66 | padding: 0 10px; 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | transform: translateY(-20px); 71 | } 72 | 73 | .battery .led { 74 | width: 10px; 75 | height: 10px; 76 | background: #4a4748; 77 | border-radius: 50%; 78 | margin: 6px; 79 | } 80 | 81 | .battery .led.on { 82 | background: #E11E0A; 83 | background-image: linear-gradient(0deg, transparent, #fff2); 84 | box-shadow: 0 0 2px 1.5px #d87473; 85 | } 86 | 87 | .battery .text { 88 | font-size: 8px; 89 | } 90 | 91 | .text { 92 | font-family: Arial, sans-serif; 93 | font-size: 10px; 94 | color: #eee; 95 | text-shadow: 0 0 2px #eee9; 96 | } 97 | 98 | gameboy-screen { 99 | transform: translate(2px, 2px); 100 | } 101 | `; 102 | } 103 | 104 | connectedCallback() { 105 | this.render(); 106 | } 107 | 108 | render() { 109 | this.shadowRoot.innerHTML = /* html */ ` 110 | 111 |
112 |
113 | DOT MATRIX WITH STEREO SOUND 114 |
115 |
116 |
117 |
118 |
BATTERY
119 |
120 | 121 |
122 |
`; 123 | } 124 | } 125 | 126 | customElements.define('gameboy-crystal', GameboyCrystal); 127 | -------------------------------------------------------------------------------- /pacman/components/GameboyOptionButton.js: -------------------------------------------------------------------------------- 1 | class GameboyOptionButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | addListeners() { 8 | this.addEventListener('click', e => { 9 | if (this.name === 'SELECT') { 10 | this.dispatchEvent( 11 | new CustomEvent('again-pacman', { bubbles: true, composed: true }) 12 | ); 13 | } else if (this.name === 'START') { 14 | window.open('../allGames/', '_self'); 15 | } 16 | }) 17 | } 18 | 19 | static get styles() { 20 | return /* css */ ` 21 | :host { 22 | --width: 50px; 23 | --height: 12px; 24 | } 25 | 26 | .container { 27 | background: linear-gradient(to top, #EFF2F0, #AE9FA6); 28 | box-shadow: 29 | -4px 4px 3px -3px #0005 inset, 30 | 4px -4px 3px -3px #fffc inset; 31 | transform: rotate(-28deg); 32 | border-radius: 15px; 33 | padding: 1px 0; 34 | 35 | } 36 | 37 | .button { 38 | background: #9e9baf; 39 | background-image: linear-gradient(#C0BECA, #7F7584); 40 | border-radius: 10px; 41 | box-shadow: 42 | -2px -2px 5px #0004 inset, 43 | 2px 2px 5px #fff3 inset, 44 | 2px 2px 6px #0007, 45 | -1px 2px 3px #000d; 46 | width: var(--width); 47 | height: var(--height); 48 | margin: 3px 6px; 49 | transition: box-shadow .2s ease; 50 | 51 | &:active { 52 | box-shadow: 53 | -2px -2px 5px #0004 inset, 54 | 2px 2px 5px #fff3 inset, 55 | 2px 2px 6px #0004, 56 | -1px 2px 3px #0004; 57 | } 58 | } 59 | 60 | .label { 61 | font-family: "Pretendo"; 62 | font-size: 10px; 63 | letter-spacing: 0.5px; 64 | color: #302058; 65 | transform: translate(10px, 2px) rotate(-28deg); 66 | text-align: center; 67 | } 68 | `; 69 | } 70 | 71 | connectedCallback() { 72 | this.name = this.getAttribute('name'); 73 | this.render(); 74 | this.addListeners() 75 | } 76 | 77 | render() { 78 | this.shadowRoot.innerHTML = /* html */ ` 79 | 80 |
81 |
82 |
83 |
${this.name}
84 | `; 85 | } 86 | } 87 | 88 | customElements.define('gameboy-option-button', GameboyOptionButton); 89 | -------------------------------------------------------------------------------- /pacman/components/GameboySpeaker.js: -------------------------------------------------------------------------------- 1 | class GameboySpeaker extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: "open" }); 5 | } 6 | 7 | 8 | static get styles() { 9 | return /* css */` 10 | :host { 11 | 12 | } 13 | 14 | .container { 15 | display: flex; 16 | width: 120px; 17 | justify-content: space-around; 18 | position: absolute; 19 | right: 10px; 20 | bottom: 35px; 21 | transform: rotate(-30deg); 22 | } 23 | 24 | .band { 25 | width: 8px; 26 | height: 60px; 27 | border-radius: 8px; 28 | box-shadow: 3px 6px 1px rgba(0, 0, 0, 0.6) inset; 29 | background: rgba(0, 0, 0, 0.35); 30 | } 31 | `; 32 | } 33 | 34 | connectedCallback() { 35 | this.render(); 36 | } 37 | 38 | render() { 39 | this.shadowRoot.innerHTML = /* html */` 40 | 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
`; 49 | } 50 | } 51 | 52 | customElements.define("gameboy-speaker", GameboySpeaker); 53 | -------------------------------------------------------------------------------- /pacman/components/GameboyTop.js: -------------------------------------------------------------------------------- 1 | class GameboyTop extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --height: 25px; 11 | 12 | } 13 | 14 | 15 | .container { 16 | display: flex; 17 | padding-bottom: 5px; 18 | margin-bottom: 1px; 19 | height: var(--height); 20 | overflow: hidden; 21 | border-radius: 12px 12px 0 0; 22 | box-shadow: 0px 18px 5px -10px #fff inset; 23 | } 24 | 25 | .container > div { 26 | border-radius: 0 0 2px 2px; 27 | border: 1px solid #1111; 28 | box-shadow: 0 2px 2px #2f2725aa; 29 | } 30 | 31 | .corner { 32 | width: 25px; 33 | } 34 | 35 | .corner.left { 36 | margin-right: 5px; 37 | } 38 | 39 | .corner.right { 40 | margin-left: 5px; 41 | } 42 | 43 | .top { 44 | width: 100%; 45 | } 46 | 47 | .top span { 48 | display: inline-block; 49 | font-family: Arial, sans-serif; 50 | font-size: 12px; 51 | color: #eee; 52 | text-shadow: 53 | 1px 2px 2px #0006; 54 | border-radius: 15px; 55 | padding: 1px 4px; 56 | transform: translate(6px, 1px); 57 | box-shadow: 58 | 0px 1px 2px #0005 inset, 59 | 0px -1px 2px #fffc inset; 60 | opacity: 0.8; 61 | } 62 | `; 63 | } 64 | 65 | connectedCallback() { 66 | this.render(); 67 | } 68 | 69 | render() { 70 | this.shadowRoot.innerHTML = /* html */ ` 71 | 72 |
73 |
74 |
75 | ◁ OFF·ON ▷ 76 |
77 |
78 |
`; 79 | } 80 | } 81 | 82 | customElements.define('gameboy-top', GameboyTop); 83 | -------------------------------------------------------------------------------- /pacman/fonts/lato.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/fonts/lato.ttf -------------------------------------------------------------------------------- /pacman/fonts/lato.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/fonts/lato.woff -------------------------------------------------------------------------------- /pacman/fonts/lato.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/fonts/lato.woff2 -------------------------------------------------------------------------------- /pacman/fonts/pretendo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/fonts/pretendo.ttf -------------------------------------------------------------------------------- /pacman/fonts/pretendo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/fonts/pretendo.woff -------------------------------------------------------------------------------- /pacman/fonts/pretendo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pacman/fonts/pretendo.woff2 -------------------------------------------------------------------------------- /pacman/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gameboy 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /pacman/licenses/buttonOfUiverse.txt: -------------------------------------------------------------------------------- 1 | https://uiverse.io/Ashon-G/mean-mayfly-77 2 | 3 | 4 | Copyright - 2025 Ashon-G (Vashon Gonzales) 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 7 | 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 9 | 10 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 11 | 12 | -------------------------------------------------------------------------------- /pacman/script.js: -------------------------------------------------------------------------------- 1 | import "./components/GameboyConsole.js"; 2 | 3 | -------------------------------------------------------------------------------- /pacman/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | user-select: none; 8 | font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 9 | 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue'; 10 | -webkit-tap-highlight-color: transparent; 11 | } 12 | 13 | body { 14 | --sb-track-color: #60a4ff; 15 | --sb-thumb-color: linear-gradient(to bottom, #7debf2, #60a4ff); 16 | --sb-size: 10px; 17 | } 18 | 19 | body::-webkit-scrollbar { 20 | width: var(--sb-size); 21 | } 22 | 23 | body::-webkit-scrollbar-track { 24 | background: var(--sb-track-color); 25 | } 26 | 27 | body::-webkit-scrollbar-thumb { 28 | background: var(--sb-thumb-color); 29 | } 30 | 31 | @supports not selector(::-webkit-scrollbar) { 32 | body { 33 | scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); 34 | } 35 | } 36 | 37 | body { 38 | height: 100dvh; 39 | width: 100%; 40 | display: flex; 41 | flex-wrap: wrap; 42 | place-content: center; 43 | background: linear-gradient(90deg, #7debf2, #60a4ff); 44 | } 45 | 46 | @font-face { 47 | font-family: 'Pretendo'; 48 | src: url('fonts/pretendo.woff2') format('woff2'), 49 | url('fonts/pretendo.woff') format('woff'), 50 | url('fonts/pretendo.ttf') format('truetype'); 51 | } 52 | 53 | @font-face { 54 | font-family: 'Lato'; 55 | src: url('fonts/lato.woff2') format('woff2'), 56 | url('fonts/lato.woff') format('woff'), 57 | url('fonts/lato.ttf') format('truetype'); 58 | } 59 | 60 | :root { 61 | --sound-yes: url('assets/sound-yes.svg'); 62 | --sound-no: url('assets/sound-no.svg'); 63 | } 64 | 65 | /***************************VIEW TRANSITIONS***************************/ 66 | html { 67 | view-transition-name: squareView; 68 | background: linear-gradient(90deg, #7debf2, #60a4ff); 69 | } 70 | 71 | @view-transition { 72 | navigation: auto; 73 | } 74 | 75 | ::view-transition-old(squareView) { 76 | animation: myViewTransition 0.4s ease reverse forwards; 77 | } 78 | 79 | ::view-transition-new(squareView) { 80 | animation: myViewTransition 0.7s ease forwards; 81 | } 82 | 83 | @keyframes myViewTransition { 84 | 0% { 85 | clip-path: circle(0% at 50% 34%); 86 | } 87 | 100% { 88 | clip-path: circle(116% at 50% 34%); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /pong/assets/favicon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pong/assets/favicon.webp -------------------------------------------------------------------------------- /pong/assets/music/pong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pong/assets/music/pong.mp3 -------------------------------------------------------------------------------- /pong/assets/pong/Symtext.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pong/assets/pong/Symtext.ttf -------------------------------------------------------------------------------- /pong/assets/sound-no.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /pong/assets/sound-yes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /pong/components/GameboyButton.js: -------------------------------------------------------------------------------- 1 | class GameboyButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | this.interval = null; 6 | } 7 | 8 | static get styles() { 9 | return /* css */ ` 10 | :host { 11 | --size: 47px; 12 | } 13 | 14 | .container { 15 | width: var(--size); 16 | height: var(--size); 17 | background-color: #E66E94; 18 | border-radius: 50%; 19 | background: radial-gradient(26px 26px at 24px 27px, #6F0119 75%, #A20D37 90%,#EF94B2); 20 | box-shadow: 1px -4px 0 -3px #7c4b5b inset, -3px 7px 5px -2px #1e0009, 1px -1px 0 2px #53182b; 21 | transition: box-shadow .2s linear; 22 | 23 | &:active { 24 | box-shadow: 1px -4px 8px -3px #7c4b5b44 inset, -3px 7px 8px -2px #1e000944, 1px -1px 2px 2px #53182b44; 25 | } 26 | } 27 | 28 | .label { 29 | font-family: "Pretendo"; 30 | font-size: 12px; 31 | letter-spacing: 0.5px; 32 | color: #302058; 33 | transform: translate(35%, 450%); 34 | pointer-events: none; 35 | } 36 | `; 37 | } 38 | 39 | addListeners() { 40 | const parentComponent = this.shadowRoot.querySelector('.container'); 41 | const startPress = e => { 42 | if (this.name === 'A' && e.target.classList.contains('container')) { 43 | if (!this.interval) { 44 | this.interval = setInterval(() => { 45 | this.dispatchEvent( 46 | new CustomEvent('pong-paddel-to-bottom', { 47 | bubbles: true, 48 | composed: true 49 | }) 50 | ); 51 | }, 20); 52 | } 53 | } else if (this.name === 'B' && e.target.classList.contains('container')) { 54 | if (!this.interval) { 55 | this.interval = setInterval(() => { 56 | this.dispatchEvent( 57 | new CustomEvent('pong-paddel-to-top', { 58 | bubbles: true, 59 | composed: true 60 | }) 61 | ); 62 | }, 20); 63 | } 64 | } 65 | }; 66 | 67 | const stopPress = () => { 68 | if (this.interval) { 69 | clearInterval(this.interval); 70 | this.interval = null; 71 | } 72 | this.dispatchEvent( 73 | new CustomEvent('pong-paddel-to-top-mouseup', { 74 | bubbles: true, 75 | composed: true 76 | }) 77 | ); 78 | 79 | this.dispatchEvent( 80 | new CustomEvent('pong-paddel-to-bottom-mouseup', { 81 | bubbles: true, 82 | composed: true 83 | }) 84 | ); 85 | }; 86 | 87 | parentComponent.addEventListener('touchstart', startPress, { 88 | passive: false 89 | }); 90 | parentComponent.addEventListener('touchend', stopPress); 91 | parentComponent.addEventListener('touchcancel', stopPress); 92 | parentComponent.addEventListener('mousedown', startPress, { passive: false }); 93 | parentComponent.addEventListener('mouseup', stopPress); 94 | 95 | this.addEventListener('click', e => { 96 | if (this.name === 'B') { 97 | this.dispatchEvent( 98 | new CustomEvent('pong-paddel-to-top-click', { 99 | bubbles: true, 100 | composed: true 101 | }) 102 | ); 103 | } else if (this.name === 'A') { 104 | this.dispatchEvent( 105 | new CustomEvent('pong-paddel-to-bottom-click', { 106 | bubbles: true, 107 | composed: true 108 | }) 109 | ); 110 | } 111 | }); 112 | } 113 | 114 | connectedCallback() { 115 | this.name = this.getAttribute('name'); 116 | this.render(); 117 | this.addListeners(); 118 | } 119 | 120 | render() { 121 | this.shadowRoot.innerHTML = /* html */ ` 122 | 123 |
124 |
${this.name}
125 |
`; 126 | } 127 | } 128 | 129 | customElements.define('gameboy-button', GameboyButton); 130 | -------------------------------------------------------------------------------- /pong/components/GameboyCrystal.js: -------------------------------------------------------------------------------- 1 | import './GameboyScreen.js'; 2 | 3 | class GameboyCrystal extends HTMLElement { 4 | constructor() { 5 | super(); 6 | this.attachShadow({ mode: 'open' }); 7 | } 8 | 9 | static get styles() { 10 | return /* css */ ` 11 | :host { 12 | --width: 330px; 13 | --height: 240px; 14 | } 15 | 16 | .container { 17 | background-color: #737488; 18 | width: var(--width); 19 | height: var(--height); 20 | border-radius: 10px 10px 35px 10px; 21 | border: 1px solid #666; 22 | border-width: 0 1px 0 1px; 23 | box-shadow: 24 | 0 0 2px #514c65, 25 | 0 -1px 1px #161118, 26 | 0 -2px 1px #A0939F, 27 | 0 -4px 1px #514c65, 28 | 0 0 2px 2px #9C99AC88 inset, 29 | 0 -1px 2px 1px #0006 inset; 30 | } 31 | 32 | .top { 33 | --gameboy-stripe-gradient: 34 | linear-gradient( 35 | transparent 10px, 36 | #7d1a4a 11px 12px, 37 | transparent 12px 16px, 38 | #35224e 16px 18px, 39 | transparent 18px 40 | ); 41 | 42 | background: var(--gameboy-stripe-gradient); 43 | position: relative; 44 | height: 26px; 45 | margin: 0 15px; 46 | top: 0; 47 | } 48 | 49 | .top span { 50 | padding: 0 8px; 51 | background: #767189; 52 | position: absolute; 53 | right: 40px; 54 | top: 8px; 55 | } 56 | 57 | .top .text { 58 | font-size: 9.5px; 59 | } 60 | 61 | .bottom { 62 | display: flex; 63 | } 64 | 65 | .battery { 66 | padding: 0 10px; 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | transform: translateY(-20px); 71 | } 72 | 73 | .battery .led { 74 | width: 10px; 75 | height: 10px; 76 | background: #4a4748; 77 | border-radius: 50%; 78 | margin: 6px; 79 | } 80 | 81 | .battery .led.on { 82 | background: #E11E0A; 83 | background-image: linear-gradient(0deg, transparent, #fff2); 84 | box-shadow: 0 0 2px 1.5px #d87473; 85 | } 86 | 87 | .battery .text { 88 | font-size: 8px; 89 | } 90 | 91 | .text { 92 | font-family: Arial, sans-serif; 93 | font-size: 10px; 94 | color: #eee; 95 | text-shadow: 0 0 2px #eee9; 96 | } 97 | 98 | gameboy-screen { 99 | transform: translate(2px, 2px); 100 | } 101 | `; 102 | } 103 | 104 | connectedCallback() { 105 | this.render(); 106 | } 107 | 108 | 109 | render() { 110 | this.shadowRoot.innerHTML = /* html */ ` 111 | 112 |
113 |
114 | DOT MATRIX WITH STEREO SOUND 115 |
116 |
117 |
118 |
119 |
BATTERY
120 |
121 | 122 |
123 |
`; 124 | } 125 | } 126 | 127 | customElements.define('gameboy-crystal', GameboyCrystal); 128 | -------------------------------------------------------------------------------- /pong/components/GameboyOptionButton.js: -------------------------------------------------------------------------------- 1 | class GameboyOptionButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | addListeners() { 8 | this.addEventListener('click', e => { 9 | if (this.name === 'SELECT') { 10 | } else if (this.name === 'START') { 11 | window.open('../allGames/', '_self'); 12 | } 13 | }); 14 | } 15 | 16 | static get styles() { 17 | return /* css */ ` 18 | :host { 19 | --width: 50px; 20 | --height: 12px; 21 | } 22 | 23 | .container { 24 | background: linear-gradient(to top, #EFF2F0, #AE9FA6); 25 | box-shadow: 26 | -4px 4px 3px -3px #0005 inset, 27 | 4px -4px 3px -3px #fffc inset; 28 | transform: rotate(-28deg); 29 | border-radius: 15px; 30 | padding: 1px 0; 31 | 32 | } 33 | 34 | .button { 35 | background: #9e9baf; 36 | background-image: linear-gradient(#C0BECA, #7F7584); 37 | border-radius: 10px; 38 | box-shadow: 39 | -2px -2px 5px #0004 inset, 40 | 2px 2px 5px #fff3 inset, 41 | 2px 2px 6px #0007, 42 | -1px 2px 3px #000d; 43 | width: var(--width); 44 | height: var(--height); 45 | margin: 3px 6px; 46 | transition: box-shadow .2s ease; 47 | 48 | &:active { 49 | box-shadow: 50 | -2px -2px 5px #0004 inset, 51 | 2px 2px 5px #fff3 inset, 52 | 2px 2px 6px #0004, 53 | -1px 2px 3px #0004; 54 | } 55 | } 56 | 57 | .label { 58 | font-family: "Pretendo"; 59 | font-size: 10px; 60 | letter-spacing: 0.5px; 61 | color: #302058; 62 | transform: translate(10px, 2px) rotate(-28deg); 63 | text-align: center; 64 | } 65 | `; 66 | } 67 | 68 | connectedCallback() { 69 | this.name = this.getAttribute('name'); 70 | this.render(); 71 | this.addListeners(); 72 | } 73 | 74 | render() { 75 | this.shadowRoot.innerHTML = /* html */ ` 76 | 77 |
78 |
79 |
80 |
${this.name}
81 | `; 82 | } 83 | } 84 | 85 | customElements.define('gameboy-option-button', GameboyOptionButton); 86 | -------------------------------------------------------------------------------- /pong/components/GameboySpeaker.js: -------------------------------------------------------------------------------- 1 | class GameboySpeaker extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: "open" }); 5 | } 6 | 7 | 8 | static get styles() { 9 | return /* css */` 10 | :host { 11 | 12 | } 13 | 14 | .container { 15 | display: flex; 16 | width: 120px; 17 | justify-content: space-around; 18 | position: absolute; 19 | right: 10px; 20 | bottom: 35px; 21 | transform: rotate(-30deg); 22 | } 23 | 24 | .band { 25 | width: 8px; 26 | height: 60px; 27 | border-radius: 8px; 28 | box-shadow: 3px 6px 1px rgba(0, 0, 0, 0.6) inset; 29 | background: rgba(0, 0, 0, 0.35); 30 | } 31 | `; 32 | } 33 | 34 | connectedCallback() { 35 | this.render(); 36 | } 37 | 38 | render() { 39 | this.shadowRoot.innerHTML = /* html */` 40 | 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
`; 49 | } 50 | } 51 | 52 | customElements.define("gameboy-speaker", GameboySpeaker); 53 | -------------------------------------------------------------------------------- /pong/components/GameboyTop.js: -------------------------------------------------------------------------------- 1 | class GameboyTop extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --height: 25px; 11 | 12 | } 13 | 14 | 15 | .container { 16 | display: flex; 17 | padding-bottom: 5px; 18 | margin-bottom: 1px; 19 | height: var(--height); 20 | overflow: hidden; 21 | border-radius: 12px 12px 0 0; 22 | box-shadow: 0px 18px 5px -10px #fff inset; 23 | } 24 | 25 | .container > div { 26 | border-radius: 0 0 2px 2px; 27 | border: 1px solid #1111; 28 | box-shadow: 0 2px 2px #2f2725aa; 29 | } 30 | 31 | .corner { 32 | width: 25px; 33 | } 34 | 35 | .corner.left { 36 | margin-right: 5px; 37 | } 38 | 39 | .corner.right { 40 | margin-left: 5px; 41 | } 42 | 43 | .top { 44 | width: 100%; 45 | } 46 | 47 | .top span { 48 | display: inline-block; 49 | font-family: Arial, sans-serif; 50 | font-size: 12px; 51 | color: #eee; 52 | text-shadow: 53 | 1px 2px 2px #0006; 54 | border-radius: 15px; 55 | padding: 1px 4px; 56 | transform: translate(6px, 1px); 57 | box-shadow: 58 | 0px 1px 2px #0005 inset, 59 | 0px -1px 2px #fffc inset; 60 | opacity: 0.8; 61 | } 62 | `; 63 | } 64 | 65 | connectedCallback() { 66 | this.render(); 67 | } 68 | 69 | render() { 70 | this.shadowRoot.innerHTML = /* html */ ` 71 | 72 |
73 |
74 |
75 | ◁ OFF·ON ▷ 76 |
77 |
78 |
`; 79 | } 80 | } 81 | 82 | customElements.define('gameboy-top', GameboyTop); 83 | -------------------------------------------------------------------------------- /pong/fonts/lato.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pong/fonts/lato.ttf -------------------------------------------------------------------------------- /pong/fonts/lato.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pong/fonts/lato.woff -------------------------------------------------------------------------------- /pong/fonts/lato.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pong/fonts/lato.woff2 -------------------------------------------------------------------------------- /pong/fonts/pretendo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pong/fonts/pretendo.ttf -------------------------------------------------------------------------------- /pong/fonts/pretendo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pong/fonts/pretendo.woff -------------------------------------------------------------------------------- /pong/fonts/pretendo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/pong/fonts/pretendo.woff2 -------------------------------------------------------------------------------- /pong/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gameboy 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /pong/script.js: -------------------------------------------------------------------------------- 1 | import "./components/GameboyConsole.js"; 2 | 3 | -------------------------------------------------------------------------------- /pong/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | user-select: none; 8 | font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 9 | 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue'; 10 | -webkit-tap-highlight-color: transparent; 11 | } 12 | 13 | body { 14 | --sb-track-color: #60a4ff; 15 | --sb-thumb-color: linear-gradient(to bottom, #7debf2, #60a4ff); 16 | --sb-size: 10px; 17 | } 18 | 19 | body::-webkit-scrollbar { 20 | width: var(--sb-size); 21 | } 22 | 23 | body::-webkit-scrollbar-track { 24 | background: var(--sb-track-color); 25 | } 26 | 27 | body::-webkit-scrollbar-thumb { 28 | background: var(--sb-thumb-color); 29 | } 30 | 31 | @supports not selector(::-webkit-scrollbar) { 32 | body { 33 | scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); 34 | } 35 | } 36 | 37 | body { 38 | height: 100dvh; 39 | width: 100%; 40 | display: flex; 41 | flex-wrap: wrap; 42 | place-content: center; 43 | background: linear-gradient(90deg, #7debf2, #60a4ff); 44 | } 45 | 46 | @font-face { 47 | font-family: 'Pretendo'; 48 | src: url('fonts/pretendo.woff2') format('woff2'), 49 | url('fonts/pretendo.woff') format('woff'), 50 | url('fonts/pretendo.ttf') format('truetype'); 51 | } 52 | 53 | @font-face { 54 | font-family: 'Lato'; 55 | src: url('fonts/lato.woff2') format('woff2'), 56 | url('fonts/lato.woff') format('woff'), 57 | url('fonts/lato.ttf') format('truetype'); 58 | } 59 | 60 | /*****************************TETRIS*****************************/ 61 | 62 | @font-face { 63 | font-family: 'Score'; 64 | src: url('assets/tetris/SCOREBOARD.ttf') format('truetype'); 65 | font-display: swap; 66 | } 67 | 68 | :root { 69 | --barra: url('assets/tetris/bg-repeat.png'); 70 | --sound-yes: url(assets/tetris/sound-yes.svg); 71 | --sound-no: url(assets/tetris/sound-no.svg); 72 | --tetris-logo: url('assets/tetris/tetris-logo.avif'); 73 | } 74 | 75 | 76 | /*****************************PONG*****************************/ 77 | @font-face { 78 | font-family: 'Symtext'; 79 | src: url('assets/pong/Symtext.ttf') format('truetype'); 80 | font-display: swap; 81 | } 82 | -------------------------------------------------------------------------------- /preview/n751.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/preview/n751.avif -------------------------------------------------------------------------------- /reference.md: -------------------------------------------------------------------------------- 1 | ### **References and Inspiration ⬇️** 2 | - 🎮 [Gameboy Design 2024 – @Manzdev (my teacher)](https://manzdev.github.io/twitch-gameboy-css/) 3 | - 🎨 [es6-string-css extension](https://marketplace.visualstudio.com/items?itemName=bashmish.es6-string-css) 4 | - ✅ [Checkbox design](https://uiverse.io/Shoh2008/cowardly-catfish-27) 5 | - 🎵 [Pop Song sound effect](https://creatorassets.com/a/modern-user-interface-sound-effects) 6 | - 🕹️ [Arkanoid theme – @midudev (my teacher)](https://www.javascript100.dev/02-arkanoid-game) 7 | - 🏗️ [Stack Tower design – @midudev (my teacher)](https://www.javascript100.dev/10-stack-game) 8 | -------------------------------------------------------------------------------- /retroid/assets/favicon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/retroid/assets/favicon.webp -------------------------------------------------------------------------------- /retroid/assets/music/retroid.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/retroid/assets/music/retroid.mp3 -------------------------------------------------------------------------------- /retroid/assets/retroid/arkanoid-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/retroid/assets/retroid/arkanoid-sprite.png -------------------------------------------------------------------------------- /retroid/assets/retroid/bricks-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/retroid/assets/retroid/bricks-sprite.png -------------------------------------------------------------------------------- /retroid/assets/sound-no.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /retroid/assets/sound-yes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /retroid/components/GameboyButton.js: -------------------------------------------------------------------------------- 1 | class GameboyButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | this.interval = null; 6 | } 7 | 8 | static get styles() { 9 | return /* css */ ` 10 | :host { 11 | --size: 47px; 12 | } 13 | 14 | .container { 15 | width: var(--size); 16 | height: var(--size); 17 | background-color: #E66E94; 18 | border-radius: 50%; 19 | background: radial-gradient(26px 26px at 24px 27px, #6F0119 75%, #A20D37 90%,#EF94B2); 20 | box-shadow: 1px -4px 0 -3px #7c4b5b inset, -3px 7px 5px -2px #1e0009, 1px -1px 0 2px #53182b; 21 | transition: box-shadow .2s linear; 22 | 23 | &:active { 24 | box-shadow: 1px -4px 8px -3px #7c4b5b44 inset, -3px 7px 8px -2px #1e000944, 1px -1px 2px 2px #53182b44; 25 | } 26 | } 27 | 28 | .label { 29 | font-family: "Pretendo"; 30 | font-size: 12px; 31 | letter-spacing: 0.5px; 32 | color: #302058; 33 | transform: translate(35%, 450%); 34 | pointer-events: none; 35 | } 36 | `; 37 | } 38 | 39 | addListeners(params) { 40 | const parentComponent = this.shadowRoot.querySelector('.container'); 41 | const startPress = e => { 42 | if (this.name === 'A' && e.target.classList.contains('container')) { 43 | if (!this.interval) { 44 | this.interval = setInterval(() => { 45 | this.dispatchEvent( 46 | new CustomEvent('retroid-button-right', { 47 | bubbles: true, 48 | composed: true 49 | }) 50 | ); 51 | }, 20); 52 | } 53 | } else if (this.name === 'B' && e.target.classList.contains('container')) { 54 | if (!this.interval) { 55 | this.interval = setInterval(() => { 56 | this.dispatchEvent( 57 | new CustomEvent('retroid-button-left', { 58 | bubbles: true, 59 | composed: true 60 | }) 61 | ); 62 | }, 20); 63 | } 64 | } 65 | }; 66 | 67 | const stopPress = () => { 68 | if (this.interval) { 69 | clearInterval(this.interval); 70 | this.interval = null; 71 | } 72 | this.dispatchEvent( 73 | new CustomEvent('retroid-button-right-mouseup', { 74 | bubbles: true, 75 | composed: true 76 | }) 77 | ); 78 | this.dispatchEvent( 79 | new CustomEvent('retroid-button-left-mouseup', { 80 | bubbles: true, 81 | composed: true 82 | }) 83 | ); 84 | }; 85 | 86 | parentComponent.addEventListener('touchstart', startPress, { 87 | passive: false 88 | }); 89 | parentComponent.addEventListener('touchend', stopPress); 90 | parentComponent.addEventListener('touchcancel', stopPress); 91 | parentComponent.addEventListener('mousedown', startPress, { passive: false }); 92 | parentComponent.addEventListener('mouseup', stopPress); 93 | 94 | this.addEventListener('click', e => { 95 | if (this.name === 'B') { 96 | this.dispatchEvent( 97 | new CustomEvent('retroid-button-left-click', { 98 | bubbles: true, 99 | composed: true 100 | }) 101 | ); 102 | } else if (this.name === 'A') { 103 | this.dispatchEvent( 104 | new CustomEvent('retroid-button-right-click', { 105 | bubbles: true, 106 | composed: true 107 | }) 108 | ); 109 | } 110 | }); 111 | } 112 | 113 | connectedCallback() { 114 | this.name = this.getAttribute('name'); 115 | this.render(); 116 | this.addListeners(); 117 | } 118 | 119 | render() { 120 | this.shadowRoot.innerHTML = /* html */ ` 121 | 122 |
123 |
${this.name}
124 |
`; 125 | } 126 | } 127 | 128 | customElements.define('gameboy-button', GameboyButton); 129 | -------------------------------------------------------------------------------- /retroid/components/GameboyCrystal.js: -------------------------------------------------------------------------------- 1 | import './GameboyScreen.js'; 2 | 3 | class GameboyCrystal extends HTMLElement { 4 | constructor() { 5 | super(); 6 | this.attachShadow({ mode: 'open' }); 7 | } 8 | 9 | static get styles() { 10 | return /* css */ ` 11 | :host { 12 | --width: 330px; 13 | --height: 240px; 14 | } 15 | 16 | .container { 17 | background-color: #737488; 18 | width: var(--width); 19 | height: var(--height); 20 | border-radius: 10px 10px 35px 10px; 21 | border: 1px solid #666; 22 | border-width: 0 1px 0 1px; 23 | box-shadow: 24 | 0 0 2px #514c65, 25 | 0 -1px 1px #161118, 26 | 0 -2px 1px #A0939F, 27 | 0 -4px 1px #514c65, 28 | 0 0 2px 2px #9C99AC88 inset, 29 | 0 -1px 2px 1px #0006 inset; 30 | } 31 | 32 | .top { 33 | --gameboy-stripe-gradient: 34 | linear-gradient( 35 | transparent 10px, 36 | #7d1a4a 11px 12px, 37 | transparent 12px 16px, 38 | #35224e 16px 18px, 39 | transparent 18px 40 | ); 41 | 42 | background: var(--gameboy-stripe-gradient); 43 | position: relative; 44 | height: 26px; 45 | margin: 0 15px; 46 | top: 0; 47 | } 48 | 49 | .top span { 50 | padding: 0 8px; 51 | background: #767189; 52 | position: absolute; 53 | right: 40px; 54 | top: 8px; 55 | } 56 | 57 | .top .text { 58 | font-size: 9.5px; 59 | } 60 | 61 | .bottom { 62 | display: flex; 63 | } 64 | 65 | .battery { 66 | padding: 0 10px; 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | transform: translateY(-20px); 71 | } 72 | 73 | .battery .led { 74 | width: 10px; 75 | height: 10px; 76 | background: #4a4748; 77 | border-radius: 50%; 78 | margin: 6px; 79 | } 80 | 81 | .battery .led.on { 82 | background: #E11E0A; 83 | background-image: linear-gradient(0deg, transparent, #fff2); 84 | box-shadow: 0 0 2px 1.5px #d87473; 85 | } 86 | 87 | .battery .text { 88 | font-size: 8px; 89 | } 90 | 91 | .text { 92 | font-family: Arial, sans-serif; 93 | font-size: 10px; 94 | color: #eee; 95 | text-shadow: 0 0 2px #eee9; 96 | } 97 | 98 | gameboy-screen { 99 | transform: translate(2px, 2px); 100 | } 101 | `; 102 | } 103 | 104 | connectedCallback() { 105 | this.render(); 106 | } 107 | 108 | render() { 109 | this.shadowRoot.innerHTML = /* html */ ` 110 | 111 |
112 |
113 | DOT MATRIX WITH STEREO SOUND 114 |
115 |
116 |
117 |
118 |
BATTERY
119 |
120 | 121 |
122 |
`; 123 | } 124 | } 125 | 126 | customElements.define('gameboy-crystal', GameboyCrystal); 127 | -------------------------------------------------------------------------------- /retroid/components/GameboyOptionButton.js: -------------------------------------------------------------------------------- 1 | class GameboyOptionButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | addListeners() { 8 | this.addEventListener('click', e => { 9 | if (this.name === 'SELECT') { 10 | this.dispatchEvent( 11 | new CustomEvent('again-retroid', { bubbles: true, composed: true }) 12 | ); 13 | } else if (this.name === 'START') { 14 | window.open('../allGames/', '_self'); 15 | } 16 | }); 17 | } 18 | 19 | static get styles() { 20 | return /* css */ ` 21 | :host { 22 | --width: 50px; 23 | --height: 12px; 24 | } 25 | 26 | .container { 27 | background: linear-gradient(to top, #EFF2F0, #AE9FA6); 28 | box-shadow: 29 | -4px 4px 3px -3px #0005 inset, 30 | 4px -4px 3px -3px #fffc inset; 31 | transform: rotate(-28deg); 32 | border-radius: 15px; 33 | padding: 1px 0; 34 | 35 | } 36 | 37 | .button { 38 | background: #9e9baf; 39 | background-image: linear-gradient(#C0BECA, #7F7584); 40 | border-radius: 10px; 41 | box-shadow: 42 | -2px -2px 5px #0004 inset, 43 | 2px 2px 5px #fff3 inset, 44 | 2px 2px 6px #0007, 45 | -1px 2px 3px #000d; 46 | width: var(--width); 47 | height: var(--height); 48 | margin: 3px 6px; 49 | transition: box-shadow .2s ease; 50 | 51 | &:active { 52 | box-shadow: 53 | -2px -2px 5px #0004 inset, 54 | 2px 2px 5px #fff3 inset, 55 | 2px 2px 6px #0004, 56 | -1px 2px 3px #0004; 57 | } 58 | } 59 | 60 | .label { 61 | font-family: "Pretendo"; 62 | font-size: 10px; 63 | letter-spacing: 0.5px; 64 | color: #302058; 65 | transform: translate(10px, 2px) rotate(-28deg); 66 | text-align: center; 67 | } 68 | `; 69 | } 70 | 71 | connectedCallback() { 72 | this.name = this.getAttribute('name'); 73 | this.render(); 74 | this.addListeners(); 75 | } 76 | 77 | render() { 78 | this.shadowRoot.innerHTML = /* html */ ` 79 | 80 |
81 |
82 |
83 |
${this.name}
84 | `; 85 | } 86 | } 87 | 88 | customElements.define('gameboy-option-button', GameboyOptionButton); 89 | -------------------------------------------------------------------------------- /retroid/components/GameboySpeaker.js: -------------------------------------------------------------------------------- 1 | class GameboySpeaker extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: "open" }); 5 | } 6 | 7 | 8 | static get styles() { 9 | return /* css */` 10 | :host { 11 | 12 | } 13 | 14 | .container { 15 | display: flex; 16 | width: 120px; 17 | justify-content: space-around; 18 | position: absolute; 19 | right: 10px; 20 | bottom: 35px; 21 | transform: rotate(-30deg); 22 | } 23 | 24 | .band { 25 | width: 8px; 26 | height: 60px; 27 | border-radius: 8px; 28 | box-shadow: 3px 6px 1px rgba(0, 0, 0, 0.6) inset; 29 | background: rgba(0, 0, 0, 0.35); 30 | } 31 | `; 32 | } 33 | 34 | connectedCallback() { 35 | this.render(); 36 | } 37 | 38 | render() { 39 | this.shadowRoot.innerHTML = /* html */` 40 | 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
`; 49 | } 50 | } 51 | 52 | customElements.define("gameboy-speaker", GameboySpeaker); 53 | -------------------------------------------------------------------------------- /retroid/components/GameboyTop.js: -------------------------------------------------------------------------------- 1 | class GameboyTop extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --height: 25px; 11 | 12 | } 13 | 14 | 15 | .container { 16 | display: flex; 17 | padding-bottom: 5px; 18 | margin-bottom: 1px; 19 | height: var(--height); 20 | overflow: hidden; 21 | border-radius: 12px 12px 0 0; 22 | box-shadow: 0px 18px 5px -10px #fff inset; 23 | } 24 | 25 | .container > div { 26 | border-radius: 0 0 2px 2px; 27 | border: 1px solid #1111; 28 | box-shadow: 0 2px 2px #2f2725aa; 29 | } 30 | 31 | .corner { 32 | width: 25px; 33 | } 34 | 35 | .corner.left { 36 | margin-right: 5px; 37 | } 38 | 39 | .corner.right { 40 | margin-left: 5px; 41 | } 42 | 43 | .top { 44 | width: 100%; 45 | } 46 | 47 | .top span { 48 | display: inline-block; 49 | font-family: Arial, sans-serif; 50 | font-size: 12px; 51 | color: #eee; 52 | text-shadow: 53 | 1px 2px 2px #0006; 54 | border-radius: 15px; 55 | padding: 1px 4px; 56 | transform: translate(6px, 1px); 57 | box-shadow: 58 | 0px 1px 2px #0005 inset, 59 | 0px -1px 2px #fffc inset; 60 | opacity: 0.8; 61 | } 62 | `; 63 | } 64 | 65 | connectedCallback() { 66 | this.render(); 67 | } 68 | 69 | render() { 70 | this.shadowRoot.innerHTML = /* html */ ` 71 | 72 |
73 |
74 |
75 | ◁ OFF·ON ▷ 76 |
77 |
78 |
`; 79 | } 80 | } 81 | 82 | customElements.define('gameboy-top', GameboyTop); 83 | -------------------------------------------------------------------------------- /retroid/fonts/lato.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/retroid/fonts/lato.ttf -------------------------------------------------------------------------------- /retroid/fonts/lato.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/retroid/fonts/lato.woff -------------------------------------------------------------------------------- /retroid/fonts/lato.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/retroid/fonts/lato.woff2 -------------------------------------------------------------------------------- /retroid/fonts/pretendo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/retroid/fonts/pretendo.ttf -------------------------------------------------------------------------------- /retroid/fonts/pretendo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/retroid/fonts/pretendo.woff -------------------------------------------------------------------------------- /retroid/fonts/pretendo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/retroid/fonts/pretendo.woff2 -------------------------------------------------------------------------------- /retroid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gameboy 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /retroid/script.js: -------------------------------------------------------------------------------- 1 | import "./components/GameboyConsole.js"; 2 | 3 | -------------------------------------------------------------------------------- /retroid/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | user-select: none; 8 | font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 9 | 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue'; 10 | -webkit-tap-highlight-color: transparent; 11 | } 12 | 13 | body { 14 | --sb-track-color: #60a4ff; 15 | --sb-thumb-color: linear-gradient(to bottom, #7debf2, #60a4ff); 16 | --sb-size: 10px; 17 | } 18 | 19 | body::-webkit-scrollbar { 20 | width: var(--sb-size); 21 | } 22 | 23 | body::-webkit-scrollbar-track { 24 | background: var(--sb-track-color); 25 | } 26 | 27 | body::-webkit-scrollbar-thumb { 28 | background: var(--sb-thumb-color); 29 | } 30 | 31 | @supports not selector(::-webkit-scrollbar) { 32 | body { 33 | scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); 34 | } 35 | } 36 | 37 | body { 38 | height: 100dvh; 39 | width: 100%; 40 | display: flex; 41 | flex-wrap: wrap; 42 | place-content: center; 43 | background: linear-gradient(90deg, #7debf2, #60a4ff); 44 | } 45 | 46 | @font-face { 47 | font-family: 'Pretendo'; 48 | src: url('fonts/pretendo.woff2') format('woff2'), 49 | url('fonts/pretendo.woff') format('woff'), 50 | url('fonts/pretendo.ttf') format('truetype'); 51 | } 52 | 53 | @font-face { 54 | font-family: 'Lato'; 55 | src: url('fonts/lato.woff2') format('woff2'), 56 | url('fonts/lato.woff') format('woff'), 57 | url('fonts/lato.ttf') format('truetype'); 58 | } 59 | 60 | 61 | :root { 62 | --sound-yes: url('assets/sound-yes.svg'); 63 | --sound-no: url('assets/sound-no.svg'); 64 | } 65 | 66 | /***************************VIEW TRANSITIONS***************************/ 67 | html { 68 | view-transition-name: squareView; 69 | background: linear-gradient(90deg, #7debf2, #60a4ff); 70 | } 71 | 72 | @view-transition { 73 | navigation: auto; 74 | } 75 | 76 | ::view-transition-old(squareView) { 77 | animation: myViewTransition 0.4s ease reverse forwards; 78 | } 79 | 80 | ::view-transition-new(squareView) { 81 | animation: myViewTransition 0.7s ease forwards; 82 | } 83 | 84 | @keyframes myViewTransition { 85 | 0% { 86 | clip-path: circle(0% at 50% 34%); 87 | } 88 | 100% { 89 | clip-path: circle(116% at 50% 34%); 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /snake/assets/favicon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/snake/assets/favicon.webp -------------------------------------------------------------------------------- /snake/assets/music/snake.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/snake/assets/music/snake.mp3 -------------------------------------------------------------------------------- /snake/assets/snake-game/fruits.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/snake/assets/snake-game/fruits.png -------------------------------------------------------------------------------- /snake/assets/sound-no.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /snake/assets/sound-yes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /snake/components/GameboyButton.js: -------------------------------------------------------------------------------- 1 | class GameboyButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --size: 47px; 11 | } 12 | 13 | .container { 14 | width: var(--size); 15 | height: var(--size); 16 | background-color: #E66E94; 17 | border-radius: 50%; 18 | background: radial-gradient(26px 26px at 24px 27px, #6F0119 75%, #A20D37 90%,#EF94B2); 19 | box-shadow: 1px -4px 0 -3px #7c4b5b inset, -3px 7px 5px -2px #1e0009, 1px -1px 0 2px #53182b; 20 | transition: box-shadow .2s linear; 21 | 22 | &:active { 23 | box-shadow: 1px -4px 8px -3px #7c4b5b44 inset, -3px 7px 8px -2px #1e000944, 1px -1px 2px 2px #53182b44; 24 | } 25 | } 26 | 27 | .label { 28 | font-family: "Pretendo"; 29 | font-size: 12px; 30 | letter-spacing: 0.5px; 31 | color: #302058; 32 | transform: translate(35%, 450%); 33 | pointer-events: none; 34 | } 35 | `; 36 | } 37 | 38 | addListeners(params) { 39 | this.addEventListener('click', e => { 40 | if (this.name === 'B') { 41 | } else if (this.name === 'A') { 42 | this.dispatchEvent( 43 | new CustomEvent('snake-to-right', { bubbles: true, composed: true }) 44 | ); 45 | } 46 | }); 47 | } 48 | 49 | connectedCallback() { 50 | this.name = this.getAttribute('name'); 51 | this.render(); 52 | this.addListeners(); 53 | } 54 | 55 | render() { 56 | this.shadowRoot.innerHTML = /* html */ ` 57 | 58 |
59 |
${this.name}
60 |
`; 61 | } 62 | } 63 | 64 | customElements.define('gameboy-button', GameboyButton); 65 | -------------------------------------------------------------------------------- /snake/components/GameboyCross.js: -------------------------------------------------------------------------------- 1 | class GameboyCross extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --size: 120px; 11 | } 12 | 13 | .container { 14 | --large: 85px; 15 | --short: 22px; 16 | --dark-color: #060206; 17 | 18 | margin: 5px; 19 | width: var(--size); 20 | height: var(--size); 21 | background: #CFC8D1; 22 | background-image: 23 | radial-gradient(#0003 1%, transparent), 24 | linear-gradient(50deg, #E1DEEA 10%, #D9D2D5 90%); 25 | border-radius: 50%; 26 | position: relative; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | } 31 | 32 | .axis { 33 | background: var(--dark-color); 34 | border-radius: 2px; 35 | box-shadow: 36 | 0 0 1px 4px #000, 37 | 0 5px 2px 1px #0008; 38 | display: flex; 39 | justify-content: space-between; 40 | transition: transform .2s ease; 41 | } 42 | 43 | .axis::before, 44 | .axis::after { 45 | content: ""; 46 | display: block; 47 | background: #ddd; 48 | filter: 49 | drop-shadow(2px 5px 1px red) 50 | drop-shadow(-2px -5px 1px blue); 51 | width: 6px; 52 | height: 6px; 53 | clip-path: polygon(0 0, 50% 100%, 100% 0); 54 | position: absolute; 55 | } 56 | 57 | .axis.x::before, 58 | .axis.x::after { 59 | --x: 0; 60 | transform: translate(var(--x), 8px) rotate(var(--rotate)); 61 | } 62 | 63 | .axis.x::before { --x: -15px; --rotate: 90deg; } 64 | .axis.x::after { --x: 15px; --rotate: -90deg; } 65 | 66 | .axis.y::before, 67 | .axis.y::after { 68 | --y: 0; 69 | transform: translate(8px, var(--y)) rotate(var(--rotate)); 70 | } 71 | 72 | .axis.y::before { --y: -15px; --rotate: 180deg; } 73 | .axis.y::after { --y: 15px; --rotate: 0; } 74 | 75 | .axis.x::after { right: 0; } 76 | .axis.y::after { bottom: 0; } 77 | 78 | .axis.x { 79 | width: var(--large); 80 | height: var(--short); 81 | position: absolute; 82 | border: 2px solid #363439; 83 | border-top: 3px solid #B7BEC8; 84 | } 85 | 86 | .axis.y { 87 | width: var(--short); 88 | height: var(--large); 89 | position: absolute; 90 | border: 2px solid #363439; 91 | border-top: 3px solid #B7BEC8; 92 | flex-direction: column; 93 | } 94 | 95 | .axis .group { 96 | width: calc(var(--short) + 0px); 97 | height: calc(var(--short) - 5px); 98 | display: flex; 99 | position: relative; 100 | justify-content: center; 101 | align-items: center; 102 | gap: 0 3px; 103 | } 104 | 105 | .axis.y .group { 106 | transform: rotate(90deg); 107 | padding: 5px 1px; 108 | 109 | &::before { 110 | position: absolute; 111 | content: ''; 112 | width: 127%; 113 | height: 120%; 114 | background: blue; 115 | border-radius: 4px; 116 | z-index: -1; 117 | opacity: 0; 118 | background-color: black; 119 | transform: rotate(-90deg) scale(1); 120 | } 121 | 122 | &:active { 123 | transform: rotate(-90deg) scale(0.99); 124 | &::before { 125 | opacity: 1; 126 | } 127 | } 128 | } 129 | 130 | .axis.x .group { 131 | padding: 2px 1px; 132 | transition: transform .2s ease; 133 | 134 | &::before { 135 | position: absolute; 136 | content: ''; 137 | width: 122%; 138 | height: 152%; 139 | background: blue; 140 | border-radius: 4px; 141 | z-index: -1; 142 | opacity: 0; 143 | background-color: black; 144 | } 145 | 146 | &:active { 147 | transform: scale(0.99); 148 | &::before { 149 | opacity: 1; 150 | } 151 | } 152 | } 153 | 154 | .axis .group .band { 155 | width: 5px; 156 | height: 100%; 157 | background: #181818; 158 | border-radius: 5px; 159 | pointer-events: none; 160 | } 161 | 162 | .center { 163 | width: calc(var(--short) + 5px); 164 | height: calc(var(--short) + 5px); 165 | background: var(--dark-color); 166 | position: absolute; 167 | display: flex; 168 | justify-content: center; 169 | align-items: center; 170 | } 171 | 172 | .center .gap { 173 | width: 80%; 174 | height: 80%; 175 | background: 176 | conic-gradient( 177 | #DDE8F777 0 1%, 178 | transparent 10% 35%, 179 | #DDE8F7 50%, 180 | transparent 65% 90%, 181 | #DDE8F777 99% 182 | ); 183 | border-radius: 50%; 184 | } 185 | `; 186 | } 187 | 188 | addListeners() { 189 | const $ = el => this.shadowRoot.querySelector(el); 190 | const parentComponet = $('.container'); 191 | parentComponet.addEventListener('click', e => { 192 | if (e.target.matches('.button-top')) { 193 | this.dispatchEvent( 194 | new CustomEvent('snake-to-top', { bubbles: true, composed: true }) 195 | ); 196 | } else if (e.target.matches('.button-right')) { 197 | this.dispatchEvent( 198 | new CustomEvent('snake-to-right', { bubbles: true, composed: true }) 199 | ); 200 | } else if (e.target.matches('.button-left')) { 201 | this.dispatchEvent( 202 | new CustomEvent('snake-to-left', { bubbles: true, composed: true }) 203 | ); 204 | } else if (e.target.matches('.button-bottom')) { 205 | this.dispatchEvent( 206 | new CustomEvent('snake-to-bottom', { bubbles: true, composed: true }) 207 | ); 208 | } 209 | }); 210 | } 211 | 212 | connectedCallback() { 213 | this.render(); 214 | this.addListeners(); 215 | } 216 | 217 | render() { 218 | this.shadowRoot.innerHTML = /* html */ ` 219 | 220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
`; 249 | } 250 | } 251 | 252 | customElements.define('gameboy-cross', GameboyCross); 253 | -------------------------------------------------------------------------------- /snake/components/GameboyCrystal.js: -------------------------------------------------------------------------------- 1 | import './GameboyScreen.js'; 2 | 3 | class GameboyCrystal extends HTMLElement { 4 | constructor() { 5 | super(); 6 | this.attachShadow({ mode: 'open' }); 7 | } 8 | 9 | static get styles() { 10 | return /* css */ ` 11 | :host { 12 | --width: 330px; 13 | --height: 240px; 14 | } 15 | 16 | .container { 17 | background-color: #737488; 18 | width: var(--width); 19 | height: var(--height); 20 | border-radius: 10px 10px 35px 10px; 21 | border: 1px solid #666; 22 | border-width: 0 1px 0 1px; 23 | box-shadow: 24 | 0 0 2px #514c65, 25 | 0 -1px 1px #161118, 26 | 0 -2px 1px #A0939F, 27 | 0 -4px 1px #514c65, 28 | 0 0 2px 2px #9C99AC88 inset, 29 | 0 -1px 2px 1px #0006 inset; 30 | } 31 | 32 | .top { 33 | --gameboy-stripe-gradient: 34 | linear-gradient( 35 | transparent 10px, 36 | #7d1a4a 11px 12px, 37 | transparent 12px 16px, 38 | #35224e 16px 18px, 39 | transparent 18px 40 | ); 41 | 42 | background: var(--gameboy-stripe-gradient); 43 | position: relative; 44 | height: 26px; 45 | margin: 0 15px; 46 | top: 0; 47 | } 48 | 49 | .top span { 50 | padding: 0 8px; 51 | background: #767189; 52 | position: absolute; 53 | right: 40px; 54 | top: 8px; 55 | } 56 | 57 | .top .text { 58 | font-size: 9.5px; 59 | } 60 | 61 | .bottom { 62 | display: flex; 63 | } 64 | 65 | .battery { 66 | padding: 0 10px; 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | transform: translateY(-20px); 71 | } 72 | 73 | .battery .led { 74 | width: 10px; 75 | height: 10px; 76 | background: #4a4748; 77 | border-radius: 50%; 78 | margin: 6px; 79 | } 80 | 81 | .battery .led.on { 82 | background: #E11E0A; 83 | background-image: linear-gradient(0deg, transparent, #fff2); 84 | box-shadow: 0 0 2px 1.5px #d87473; 85 | } 86 | 87 | .battery .text { 88 | font-size: 8px; 89 | } 90 | 91 | .text { 92 | font-family: Arial, sans-serif; 93 | font-size: 10px; 94 | color: #eee; 95 | text-shadow: 0 0 2px #eee9; 96 | } 97 | 98 | gameboy-screen { 99 | transform: translate(2px, 2px); 100 | } 101 | `; 102 | } 103 | 104 | connectedCallback() { 105 | this.render(); 106 | } 107 | 108 | render() { 109 | this.shadowRoot.innerHTML = /* html */ ` 110 | 111 |
112 |
113 | DOT MATRIX WITH STEREO SOUND 114 |
115 |
116 |
117 |
118 |
BATTERY
119 |
120 | 121 |
122 |
`; 123 | } 124 | } 125 | 126 | customElements.define('gameboy-crystal', GameboyCrystal); 127 | -------------------------------------------------------------------------------- /snake/components/GameboyOptionButton.js: -------------------------------------------------------------------------------- 1 | class GameboyOptionButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | addListeners() { 8 | this.addEventListener('click', e => { 9 | if (this.name === 'SELECT') { 10 | this.dispatchEvent( 11 | new CustomEvent("again-snake-game", { bubbles: true, composed: true }) 12 | ); 13 | } else if (this.name === 'START') { 14 | window.open('../allGames/', '_self'); 15 | } 16 | }) 17 | } 18 | 19 | static get styles() { 20 | return /* css */ ` 21 | :host { 22 | --width: 50px; 23 | --height: 12px; 24 | } 25 | 26 | .container { 27 | background: linear-gradient(to top, #EFF2F0, #AE9FA6); 28 | box-shadow: 29 | -4px 4px 3px -3px #0005 inset, 30 | 4px -4px 3px -3px #fffc inset; 31 | transform: rotate(-28deg); 32 | border-radius: 15px; 33 | padding: 1px 0; 34 | 35 | } 36 | 37 | .button { 38 | background: #9e9baf; 39 | background-image: linear-gradient(#C0BECA, #7F7584); 40 | border-radius: 10px; 41 | box-shadow: 42 | -2px -2px 5px #0004 inset, 43 | 2px 2px 5px #fff3 inset, 44 | 2px 2px 6px #0007, 45 | -1px 2px 3px #000d; 46 | width: var(--width); 47 | height: var(--height); 48 | margin: 3px 6px; 49 | transition: box-shadow .2s ease; 50 | 51 | &:active { 52 | box-shadow: 53 | -2px -2px 5px #0004 inset, 54 | 2px 2px 5px #fff3 inset, 55 | 2px 2px 6px #0004, 56 | -1px 2px 3px #0004; 57 | } 58 | } 59 | 60 | .label { 61 | font-family: "Pretendo"; 62 | font-size: 10px; 63 | letter-spacing: 0.5px; 64 | color: #302058; 65 | transform: translate(10px, 2px) rotate(-28deg); 66 | text-align: center; 67 | } 68 | `; 69 | } 70 | 71 | connectedCallback() { 72 | this.name = this.getAttribute('name'); 73 | this.render(); 74 | this.addListeners() 75 | } 76 | 77 | render() { 78 | this.shadowRoot.innerHTML = /* html */ ` 79 | 80 |
81 |
82 |
83 |
${this.name}
84 | `; 85 | } 86 | } 87 | 88 | customElements.define('gameboy-option-button', GameboyOptionButton); 89 | -------------------------------------------------------------------------------- /snake/components/GameboySpeaker.js: -------------------------------------------------------------------------------- 1 | class GameboySpeaker extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: "open" }); 5 | } 6 | 7 | 8 | static get styles() { 9 | return /* css */` 10 | :host { 11 | 12 | } 13 | 14 | .container { 15 | display: flex; 16 | width: 120px; 17 | justify-content: space-around; 18 | position: absolute; 19 | right: 10px; 20 | bottom: 35px; 21 | transform: rotate(-30deg); 22 | } 23 | 24 | .band { 25 | width: 8px; 26 | height: 60px; 27 | border-radius: 8px; 28 | box-shadow: 3px 6px 1px rgba(0, 0, 0, 0.6) inset; 29 | background: rgba(0, 0, 0, 0.35); 30 | } 31 | `; 32 | } 33 | 34 | connectedCallback() { 35 | this.render(); 36 | } 37 | 38 | render() { 39 | this.shadowRoot.innerHTML = /* html */` 40 | 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
`; 49 | } 50 | } 51 | 52 | customElements.define("gameboy-speaker", GameboySpeaker); 53 | -------------------------------------------------------------------------------- /snake/components/GameboyTop.js: -------------------------------------------------------------------------------- 1 | class GameboyTop extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --height: 25px; 11 | 12 | } 13 | 14 | 15 | .container { 16 | display: flex; 17 | padding-bottom: 5px; 18 | margin-bottom: 1px; 19 | height: var(--height); 20 | overflow: hidden; 21 | border-radius: 12px 12px 0 0; 22 | box-shadow: 0px 18px 5px -10px #fff inset; 23 | } 24 | 25 | .container > div { 26 | border-radius: 0 0 2px 2px; 27 | border: 1px solid #1111; 28 | box-shadow: 0 2px 2px #2f2725aa; 29 | } 30 | 31 | .corner { 32 | width: 25px; 33 | } 34 | 35 | .corner.left { 36 | margin-right: 5px; 37 | } 38 | 39 | .corner.right { 40 | margin-left: 5px; 41 | } 42 | 43 | .top { 44 | width: 100%; 45 | } 46 | 47 | .top span { 48 | display: inline-block; 49 | font-family: Arial, sans-serif; 50 | font-size: 12px; 51 | color: #eee; 52 | text-shadow: 53 | 1px 2px 2px #0006; 54 | border-radius: 15px; 55 | padding: 1px 4px; 56 | transform: translate(6px, 1px); 57 | box-shadow: 58 | 0px 1px 2px #0005 inset, 59 | 0px -1px 2px #fffc inset; 60 | opacity: 0.8; 61 | } 62 | `; 63 | } 64 | 65 | connectedCallback() { 66 | this.render(); 67 | } 68 | 69 | render() { 70 | this.shadowRoot.innerHTML = /* html */ ` 71 | 72 |
73 |
74 |
75 | ◁ OFF·ON ▷ 76 |
77 |
78 |
`; 79 | } 80 | } 81 | 82 | customElements.define('gameboy-top', GameboyTop); 83 | -------------------------------------------------------------------------------- /snake/fonts/lato.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/snake/fonts/lato.ttf -------------------------------------------------------------------------------- /snake/fonts/lato.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/snake/fonts/lato.woff -------------------------------------------------------------------------------- /snake/fonts/lato.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/snake/fonts/lato.woff2 -------------------------------------------------------------------------------- /snake/fonts/pretendo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/snake/fonts/pretendo.ttf -------------------------------------------------------------------------------- /snake/fonts/pretendo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/snake/fonts/pretendo.woff -------------------------------------------------------------------------------- /snake/fonts/pretendo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/snake/fonts/pretendo.woff2 -------------------------------------------------------------------------------- /snake/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gameboy 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /snake/script.js: -------------------------------------------------------------------------------- 1 | import "./components/GameboyConsole.js"; 2 | 3 | -------------------------------------------------------------------------------- /snake/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | user-select: none; 8 | font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 9 | 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue'; 10 | -webkit-tap-highlight-color: transparent; 11 | } 12 | 13 | body { 14 | --sb-track-color: #60a4ff; 15 | --sb-thumb-color: linear-gradient(to bottom, #7debf2, #60a4ff); 16 | --sb-size: 10px; 17 | } 18 | 19 | body::-webkit-scrollbar { 20 | width: var(--sb-size); 21 | } 22 | 23 | body::-webkit-scrollbar-track { 24 | background: var(--sb-track-color); 25 | } 26 | 27 | body::-webkit-scrollbar-thumb { 28 | background: var(--sb-thumb-color); 29 | } 30 | 31 | @supports not selector(::-webkit-scrollbar) { 32 | body { 33 | scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); 34 | } 35 | } 36 | 37 | body { 38 | height: 100dvh; 39 | width: 100%; 40 | display: flex; 41 | flex-wrap: wrap; 42 | place-content: center; 43 | background: linear-gradient(90deg, #7debf2, #60a4ff); 44 | } 45 | 46 | @font-face { 47 | font-family: 'Pretendo'; 48 | src: url('fonts/pretendo.woff2') format('woff2'), 49 | url('fonts/pretendo.woff') format('woff'), 50 | url('fonts/pretendo.ttf') format('truetype'); 51 | } 52 | 53 | @font-face { 54 | font-family: 'Lato'; 55 | src: url('fonts/lato.woff2') format('woff2'), 56 | url('fonts/lato.woff') format('woff'), 57 | url('fonts/lato.ttf') format('truetype'); 58 | } 59 | 60 | :root { 61 | --sound-yes: url('assets/sound-yes.svg'); 62 | --sound-no: url('assets/sound-no.svg'); 63 | } 64 | 65 | /***************************VIEW TRANSITIONS***************************/ 66 | html { 67 | view-transition-name: squareView; 68 | background: linear-gradient(90deg, #7debf2, #60a4ff); 69 | } 70 | 71 | @view-transition { 72 | navigation: auto; 73 | } 74 | 75 | ::view-transition-old(squareView) { 76 | animation: myViewTransition 0.4s ease reverse forwards; 77 | } 78 | 79 | ::view-transition-new(squareView) { 80 | animation: myViewTransition 0.7s ease forwards; 81 | } 82 | 83 | @keyframes myViewTransition { 84 | 0% { 85 | clip-path: circle(0% at 50% 34%); 86 | } 87 | 100% { 88 | clip-path: circle(116% at 50% 34%); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /stackTower/assets/favicon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/stackTower/assets/favicon.webp -------------------------------------------------------------------------------- /stackTower/assets/music/tower.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/stackTower/assets/music/tower.mp3 -------------------------------------------------------------------------------- /stackTower/assets/sound-no.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /stackTower/assets/sound-yes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /stackTower/components/GameboyButton.js: -------------------------------------------------------------------------------- 1 | class GameboyButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --size: 47px; 11 | } 12 | 13 | .container { 14 | width: var(--size); 15 | height: var(--size); 16 | background-color: #E66E94; 17 | border-radius: 50%; 18 | background: radial-gradient(26px 26px at 24px 27px, #6F0119 75%, #A20D37 90%,#EF94B2); 19 | box-shadow: 1px -4px 0 -3px #7c4b5b inset, -3px 7px 5px -2px #1e0009, 1px -1px 0 2px #53182b; 20 | transition: box-shadow .2s linear; 21 | 22 | &:active { 23 | box-shadow: 1px -4px 8px -3px #7c4b5b44 inset, -3px 7px 8px -2px #1e000944, 1px -1px 2px 2px #53182b44; 24 | } 25 | } 26 | 27 | .label { 28 | font-family: "Pretendo"; 29 | font-size: 12px; 30 | letter-spacing: 0.5px; 31 | color: #302058; 32 | transform: translate(35%, 450%); 33 | pointer-events: none; 34 | } 35 | `; 36 | } 37 | 38 | addListeners(params) { 39 | this.addEventListener('click', e => { 40 | if (this.name === 'B') { 41 | this.dispatchEvent( 42 | new CustomEvent("stack-tower-piece-fall", { bubbles: true, composed: true }) 43 | ); 44 | } else if (this.name === 'A') { 45 | 46 | } 47 | }) 48 | } 49 | 50 | connectedCallback() { 51 | this.name = this.getAttribute('name'); 52 | this.render(); 53 | this.addListeners() 54 | } 55 | 56 | render() { 57 | this.shadowRoot.innerHTML = /* html */ ` 58 | 59 |
60 |
${this.name}
61 |
`; 62 | } 63 | } 64 | 65 | customElements.define('gameboy-button', GameboyButton); 66 | -------------------------------------------------------------------------------- /stackTower/components/GameboyCross.js: -------------------------------------------------------------------------------- 1 | class GameboyCross extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --size: 120px; 11 | } 12 | 13 | .container { 14 | --large: 85px; 15 | --short: 22px; 16 | --dark-color: #060206; 17 | 18 | margin: 5px; 19 | width: var(--size); 20 | height: var(--size); 21 | background: #CFC8D1; 22 | background-image: 23 | radial-gradient(#0003 1%, transparent), 24 | linear-gradient(50deg, #E1DEEA 10%, #D9D2D5 90%); 25 | border-radius: 50%; 26 | position: relative; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | } 31 | 32 | .axis { 33 | background: var(--dark-color); 34 | border-radius: 2px; 35 | box-shadow: 36 | 0 0 1px 4px #000, 37 | 0 5px 2px 1px #0008; 38 | display: flex; 39 | justify-content: space-between; 40 | transition: transform .2s ease; 41 | } 42 | 43 | .axis::before, 44 | .axis::after { 45 | content: ""; 46 | display: block; 47 | background: #ddd; 48 | filter: 49 | drop-shadow(2px 5px 1px red) 50 | drop-shadow(-2px -5px 1px blue); 51 | width: 6px; 52 | height: 6px; 53 | clip-path: polygon(0 0, 50% 100%, 100% 0); 54 | position: absolute; 55 | } 56 | 57 | .axis.x::before, 58 | .axis.x::after { 59 | --x: 0; 60 | transform: translate(var(--x), 8px) rotate(var(--rotate)); 61 | } 62 | 63 | .axis.x::before { --x: -15px; --rotate: 90deg; } 64 | .axis.x::after { --x: 15px; --rotate: -90deg; } 65 | 66 | .axis.y::before, 67 | .axis.y::after { 68 | --y: 0; 69 | transform: translate(8px, var(--y)) rotate(var(--rotate)); 70 | } 71 | 72 | .axis.y::before { --y: -15px; --rotate: 180deg; } 73 | .axis.y::after { --y: 15px; --rotate: 0; } 74 | 75 | .axis.x::after { right: 0; } 76 | .axis.y::after { bottom: 0; } 77 | 78 | .axis.x { 79 | width: var(--large); 80 | height: var(--short); 81 | position: absolute; 82 | border: 2px solid #363439; 83 | border-top: 3px solid #B7BEC8; 84 | } 85 | 86 | .axis.y { 87 | width: var(--short); 88 | height: var(--large); 89 | position: absolute; 90 | border: 2px solid #363439; 91 | border-top: 3px solid #B7BEC8; 92 | flex-direction: column; 93 | } 94 | 95 | .axis .group { 96 | width: calc(var(--short) + 0px); 97 | height: calc(var(--short) - 5px); 98 | display: flex; 99 | position: relative; 100 | justify-content: center; 101 | align-items: center; 102 | gap: 0 3px; 103 | } 104 | 105 | .axis.y .group { 106 | transform: rotate(90deg); 107 | padding: 5px 1px; 108 | 109 | &::before { 110 | position: absolute; 111 | content: ''; 112 | width: 127%; 113 | height: 120%; 114 | background: blue; 115 | border-radius: 4px; 116 | z-index: -1; 117 | opacity: 0; 118 | background-color: black; 119 | transform: rotate(-90deg) scale(1); 120 | } 121 | 122 | &:active { 123 | transform: rotate(-90deg) scale(0.99); 124 | &::before { 125 | opacity: 1; 126 | } 127 | } 128 | } 129 | 130 | .axis.x .group { 131 | padding: 2px 1px; 132 | transition: transform .2s ease; 133 | 134 | &::before { 135 | position: absolute; 136 | content: ''; 137 | width: 122%; 138 | height: 152%; 139 | background: blue; 140 | border-radius: 4px; 141 | z-index: -1; 142 | opacity: 0; 143 | background-color: black; 144 | } 145 | 146 | &:active { 147 | transform: scale(0.99); 148 | &::before { 149 | opacity: 1; 150 | } 151 | } 152 | } 153 | 154 | .axis .group .band { 155 | width: 5px; 156 | height: 100%; 157 | background: #181818; 158 | border-radius: 5px; 159 | pointer-events: none; 160 | } 161 | 162 | .center { 163 | width: calc(var(--short) + 5px); 164 | height: calc(var(--short) + 5px); 165 | background: var(--dark-color); 166 | position: absolute; 167 | display: flex; 168 | justify-content: center; 169 | align-items: center; 170 | } 171 | 172 | .center .gap { 173 | width: 80%; 174 | height: 80%; 175 | background: 176 | conic-gradient( 177 | #DDE8F777 0 1%, 178 | transparent 10% 35%, 179 | #DDE8F7 50%, 180 | transparent 65% 90%, 181 | #DDE8F777 99% 182 | ); 183 | border-radius: 50%; 184 | } 185 | `; 186 | } 187 | 188 | addListeners() { 189 | const $ = el => this.shadowRoot.querySelector(el); 190 | const parentComponet = $('.container'); 191 | parentComponet.addEventListener('click', e => { 192 | if (e.target.matches('.button-top')) { 193 | } else if (e.target.matches('.button-right')) { 194 | } else if (e.target.matches('.button-left')) { 195 | } else if (e.target.matches('.button-bottom')) { 196 | this.dispatchEvent( 197 | new CustomEvent('stack-tower-piece-fall', { 198 | bubbles: true, 199 | composed: true 200 | }) 201 | ); 202 | } 203 | }); 204 | } 205 | 206 | connectedCallback() { 207 | this.render(); 208 | this.addListeners(); 209 | } 210 | 211 | render() { 212 | this.shadowRoot.innerHTML = /* html */ ` 213 | 214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
`; 243 | } 244 | } 245 | 246 | customElements.define('gameboy-cross', GameboyCross); 247 | -------------------------------------------------------------------------------- /stackTower/components/GameboyCrystal.js: -------------------------------------------------------------------------------- 1 | import './GameboyScreen.js'; 2 | 3 | class GameboyCrystal extends HTMLElement { 4 | constructor() { 5 | super(); 6 | this.attachShadow({ mode: 'open' }); 7 | } 8 | 9 | static get styles() { 10 | return /* css */ ` 11 | :host { 12 | --width: 330px; 13 | --height: 240px; 14 | } 15 | 16 | .container { 17 | background-color: #737488; 18 | width: var(--width); 19 | height: var(--height); 20 | border-radius: 10px 10px 35px 10px; 21 | border: 1px solid #666; 22 | border-width: 0 1px 0 1px; 23 | box-shadow: 24 | 0 0 2px #514c65, 25 | 0 -1px 1px #161118, 26 | 0 -2px 1px #A0939F, 27 | 0 -4px 1px #514c65, 28 | 0 0 2px 2px #9C99AC88 inset, 29 | 0 -1px 2px 1px #0006 inset; 30 | } 31 | 32 | .top { 33 | --gameboy-stripe-gradient: 34 | linear-gradient( 35 | transparent 10px, 36 | #7d1a4a 11px 12px, 37 | transparent 12px 16px, 38 | #35224e 16px 18px, 39 | transparent 18px 40 | ); 41 | 42 | background: var(--gameboy-stripe-gradient); 43 | position: relative; 44 | height: 26px; 45 | margin: 0 15px; 46 | top: 0; 47 | } 48 | 49 | .top span { 50 | padding: 0 8px; 51 | background: #767189; 52 | position: absolute; 53 | right: 40px; 54 | top: 8px; 55 | } 56 | 57 | .top .text { 58 | font-size: 9.5px; 59 | } 60 | 61 | .bottom { 62 | display: flex; 63 | } 64 | 65 | .battery { 66 | padding: 0 10px; 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | transform: translateY(-20px); 71 | } 72 | 73 | .battery .led { 74 | width: 10px; 75 | height: 10px; 76 | background: #4a4748; 77 | border-radius: 50%; 78 | margin: 6px; 79 | } 80 | 81 | .battery .led.on { 82 | background: #E11E0A; 83 | background-image: linear-gradient(0deg, transparent, #fff2); 84 | box-shadow: 0 0 2px 1.5px #d87473; 85 | } 86 | 87 | .battery .text { 88 | font-size: 8px; 89 | } 90 | 91 | .text { 92 | font-family: Arial, sans-serif; 93 | font-size: 10px; 94 | color: #eee; 95 | text-shadow: 0 0 2px #eee9; 96 | } 97 | 98 | gameboy-screen { 99 | transform: translate(2px, 2px); 100 | } 101 | `; 102 | } 103 | 104 | connectedCallback() { 105 | this.render(); 106 | } 107 | 108 | render() { 109 | this.shadowRoot.innerHTML = /* html */ ` 110 | 111 |
112 |
113 | DOT MATRIX WITH STEREO SOUND 114 |
115 |
116 |
117 |
118 |
BATTERY
119 |
120 | 121 |
122 |
`; 123 | } 124 | } 125 | 126 | customElements.define('gameboy-crystal', GameboyCrystal); 127 | -------------------------------------------------------------------------------- /stackTower/components/GameboyOptionButton.js: -------------------------------------------------------------------------------- 1 | class GameboyOptionButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | addListeners() { 8 | this.addEventListener('click', e => { 9 | if (this.name === 'SELECT') { 10 | this.dispatchEvent( 11 | new CustomEvent('again-stack-tower', { bubbles: true, composed: true }) 12 | ); 13 | } else if (this.name === 'START') { 14 | window.open('../allGames/', '_self'); 15 | } 16 | }); 17 | } 18 | 19 | static get styles() { 20 | return /* css */ ` 21 | :host { 22 | --width: 50px; 23 | --height: 12px; 24 | } 25 | 26 | .container { 27 | background: linear-gradient(to top, #EFF2F0, #AE9FA6); 28 | box-shadow: 29 | -4px 4px 3px -3px #0005 inset, 30 | 4px -4px 3px -3px #fffc inset; 31 | transform: rotate(-28deg); 32 | border-radius: 15px; 33 | padding: 1px 0; 34 | 35 | } 36 | 37 | .button { 38 | background: #9e9baf; 39 | background-image: linear-gradient(#C0BECA, #7F7584); 40 | border-radius: 10px; 41 | box-shadow: 42 | -2px -2px 5px #0004 inset, 43 | 2px 2px 5px #fff3 inset, 44 | 2px 2px 6px #0007, 45 | -1px 2px 3px #000d; 46 | width: var(--width); 47 | height: var(--height); 48 | margin: 3px 6px; 49 | transition: box-shadow .2s ease; 50 | 51 | &:active { 52 | box-shadow: 53 | -2px -2px 5px #0004 inset, 54 | 2px 2px 5px #fff3 inset, 55 | 2px 2px 6px #0004, 56 | -1px 2px 3px #0004; 57 | } 58 | } 59 | 60 | .label { 61 | font-family: "Pretendo"; 62 | font-size: 10px; 63 | letter-spacing: 0.5px; 64 | color: #302058; 65 | transform: translate(10px, 2px) rotate(-28deg); 66 | text-align: center; 67 | } 68 | `; 69 | } 70 | 71 | connectedCallback() { 72 | this.name = this.getAttribute('name'); 73 | this.render(); 74 | this.addListeners(); 75 | } 76 | 77 | render() { 78 | this.shadowRoot.innerHTML = /* html */ ` 79 | 80 |
81 |
82 |
83 |
${this.name}
84 | `; 85 | } 86 | } 87 | 88 | customElements.define('gameboy-option-button', GameboyOptionButton); 89 | -------------------------------------------------------------------------------- /stackTower/components/GameboySpeaker.js: -------------------------------------------------------------------------------- 1 | class GameboySpeaker extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: "open" }); 5 | } 6 | 7 | 8 | static get styles() { 9 | return /* css */` 10 | :host { 11 | 12 | } 13 | 14 | .container { 15 | display: flex; 16 | width: 120px; 17 | justify-content: space-around; 18 | position: absolute; 19 | right: 10px; 20 | bottom: 35px; 21 | transform: rotate(-30deg); 22 | } 23 | 24 | .band { 25 | width: 8px; 26 | height: 60px; 27 | border-radius: 8px; 28 | box-shadow: 3px 6px 1px rgba(0, 0, 0, 0.6) inset; 29 | background: rgba(0, 0, 0, 0.35); 30 | } 31 | `; 32 | } 33 | 34 | connectedCallback() { 35 | this.render(); 36 | } 37 | 38 | render() { 39 | this.shadowRoot.innerHTML = /* html */` 40 | 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
`; 49 | } 50 | } 51 | 52 | customElements.define("gameboy-speaker", GameboySpeaker); 53 | -------------------------------------------------------------------------------- /stackTower/components/GameboyTop.js: -------------------------------------------------------------------------------- 1 | class GameboyTop extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --height: 25px; 11 | 12 | } 13 | 14 | 15 | .container { 16 | display: flex; 17 | padding-bottom: 5px; 18 | margin-bottom: 1px; 19 | height: var(--height); 20 | overflow: hidden; 21 | border-radius: 12px 12px 0 0; 22 | box-shadow: 0px 18px 5px -10px #fff inset; 23 | } 24 | 25 | .container > div { 26 | border-radius: 0 0 2px 2px; 27 | border: 1px solid #1111; 28 | box-shadow: 0 2px 2px #2f2725aa; 29 | } 30 | 31 | .corner { 32 | width: 25px; 33 | } 34 | 35 | .corner.left { 36 | margin-right: 5px; 37 | } 38 | 39 | .corner.right { 40 | margin-left: 5px; 41 | } 42 | 43 | .top { 44 | width: 100%; 45 | } 46 | 47 | .top span { 48 | display: inline-block; 49 | font-family: Arial, sans-serif; 50 | font-size: 12px; 51 | color: #eee; 52 | text-shadow: 53 | 1px 2px 2px #0006; 54 | border-radius: 15px; 55 | padding: 1px 4px; 56 | transform: translate(6px, 1px); 57 | box-shadow: 58 | 0px 1px 2px #0005 inset, 59 | 0px -1px 2px #fffc inset; 60 | opacity: 0.8; 61 | } 62 | `; 63 | } 64 | 65 | connectedCallback() { 66 | this.render(); 67 | } 68 | 69 | render() { 70 | this.shadowRoot.innerHTML = /* html */ ` 71 | 72 |
73 |
74 |
75 | ◁ OFF·ON ▷ 76 |
77 |
78 |
`; 79 | } 80 | } 81 | 82 | customElements.define('gameboy-top', GameboyTop); 83 | -------------------------------------------------------------------------------- /stackTower/fonts/PressStart2p.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/stackTower/fonts/PressStart2p.ttf -------------------------------------------------------------------------------- /stackTower/fonts/lato.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/stackTower/fonts/lato.ttf -------------------------------------------------------------------------------- /stackTower/fonts/lato.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/stackTower/fonts/lato.woff -------------------------------------------------------------------------------- /stackTower/fonts/lato.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/stackTower/fonts/lato.woff2 -------------------------------------------------------------------------------- /stackTower/fonts/pretendo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/stackTower/fonts/pretendo.ttf -------------------------------------------------------------------------------- /stackTower/fonts/pretendo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/stackTower/fonts/pretendo.woff -------------------------------------------------------------------------------- /stackTower/fonts/pretendo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/stackTower/fonts/pretendo.woff2 -------------------------------------------------------------------------------- /stackTower/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gameboy 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /stackTower/script.js: -------------------------------------------------------------------------------- 1 | import "./components/GameboyConsole.js"; 2 | 3 | -------------------------------------------------------------------------------- /stackTower/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | user-select: none; 8 | font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 9 | 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue'; 10 | -webkit-tap-highlight-color: transparent; 11 | } 12 | 13 | body { 14 | --sb-track-color: #60a4ff; 15 | --sb-thumb-color: linear-gradient(to bottom, #7debf2, #60a4ff); 16 | --sb-size: 10px; 17 | } 18 | 19 | body::-webkit-scrollbar { 20 | width: var(--sb-size); 21 | } 22 | 23 | body::-webkit-scrollbar-track { 24 | background: var(--sb-track-color); 25 | } 26 | 27 | body::-webkit-scrollbar-thumb { 28 | background: var(--sb-thumb-color); 29 | } 30 | 31 | @supports not selector(::-webkit-scrollbar) { 32 | body { 33 | scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); 34 | } 35 | } 36 | 37 | body { 38 | height: 100dvh; 39 | width: 100%; 40 | display: flex; 41 | flex-wrap: wrap; 42 | place-content: center; 43 | background: linear-gradient(90deg, #7debf2, #60a4ff); 44 | } 45 | 46 | @font-face { 47 | font-family: 'Pretendo'; 48 | src: url('fonts/pretendo.woff2') format('woff2'), 49 | url('fonts/pretendo.woff') format('woff'), 50 | url('fonts/pretendo.ttf') format('truetype'); 51 | } 52 | 53 | @font-face { 54 | font-family: 'Lato'; 55 | src: url('fonts/lato.woff2') format('woff2'), 56 | url('fonts/lato.woff') format('woff'), 57 | url('fonts/lato.ttf') format('truetype'); 58 | } 59 | 60 | @font-face { 61 | font-family: 'Press Start 2P'; 62 | src: url('fonts/PressStart2p.ttf') format('truetype'); 63 | } 64 | 65 | :root { 66 | --sound-yes: url('assets/sound-yes.svg'); 67 | --sound-no: url('assets/sound-no.svg'); 68 | } 69 | 70 | /***************************VIEW TRANSITIONS***************************/ 71 | html { 72 | view-transition-name: squareView; 73 | background: linear-gradient(90deg, #7debf2, #60a4ff); 74 | } 75 | 76 | @view-transition { 77 | navigation: auto; 78 | } 79 | 80 | ::view-transition-old(squareView) { 81 | animation: myViewTransition 0.4s ease reverse forwards; 82 | } 83 | 84 | ::view-transition-new(squareView) { 85 | animation: myViewTransition 0.7s ease forwards; 86 | } 87 | 88 | @keyframes myViewTransition { 89 | 0% { 90 | clip-path: circle(0% at 50% 34%); 91 | } 92 | 100% { 93 | clip-path: circle(116% at 50% 34%); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /tetris/assets/favicon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/assets/favicon.webp -------------------------------------------------------------------------------- /tetris/assets/music/tetris.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/assets/music/tetris.mp3 -------------------------------------------------------------------------------- /tetris/assets/sound-no.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /tetris/assets/sound-yes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /tetris/assets/start-coin.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/assets/start-coin.mp3 -------------------------------------------------------------------------------- /tetris/assets/tetris/SCOREBOARD.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/assets/tetris/SCOREBOARD.ttf -------------------------------------------------------------------------------- /tetris/assets/tetris/again.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/assets/tetris/again.png -------------------------------------------------------------------------------- /tetris/assets/tetris/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/assets/tetris/arrow.png -------------------------------------------------------------------------------- /tetris/assets/tetris/bg-repeat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/assets/tetris/bg-repeat.png -------------------------------------------------------------------------------- /tetris/assets/tetris/cubeBase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/assets/tetris/cubeBase.png -------------------------------------------------------------------------------- /tetris/assets/tetris/sound-no.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /tetris/assets/tetris/sound-yes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /tetris/assets/tetris/tetris-logo.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/assets/tetris/tetris-logo.avif -------------------------------------------------------------------------------- /tetris/components/GameboyButton.js: -------------------------------------------------------------------------------- 1 | class GameboyButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | this.interval = null; 6 | } 7 | 8 | static get styles() { 9 | return /* css */ ` 10 | :host { 11 | --size: 47px; 12 | } 13 | 14 | .container { 15 | width: var(--size); 16 | height: var(--size); 17 | background-color: #E66E94; 18 | border-radius: 50%; 19 | background: radial-gradient(26px 26px at 24px 27px, #6F0119 75%, #A20D37 90%,#EF94B2); 20 | box-shadow: 1px -4px 0 -3px #7c4b5b inset, -3px 7px 5px -2px #1e0009, 1px -1px 0 2px #53182b; 21 | transition: box-shadow .2s linear; 22 | 23 | &:active { 24 | box-shadow: 1px -4px 8px -3px #7c4b5b44 inset, -3px 7px 8px -2px #1e000944, 1px -1px 2px 2px #53182b44; 25 | } 26 | } 27 | 28 | .label { 29 | font-family: "Pretendo"; 30 | font-size: 12px; 31 | letter-spacing: 0.5px; 32 | color: #302058; 33 | transform: translate(35%, 450%); 34 | pointer-events: none; 35 | } 36 | `; 37 | } 38 | 39 | addListeners(params) { 40 | const parentComponent = this.shadowRoot.querySelector('.container'); 41 | const startPress = (e) => { 42 | if (this.name === 'A' && e.target.classList.contains('container')) { 43 | if (!this.interval) { 44 | this.interval = setInterval(() => { 45 | this.dispatchEvent( 46 | new CustomEvent("tetris-button-bottom", { 47 | bubbles: true, 48 | composed: true, 49 | }) 50 | ); 51 | }, 50); 52 | } 53 | } 54 | }; 55 | 56 | const stopPress = () => { 57 | if (this.interval) { 58 | clearInterval(this.interval); 59 | this.interval = null; 60 | } 61 | }; 62 | 63 | parentComponent.addEventListener("touchstart", startPress, { passive: false }); 64 | parentComponent.addEventListener("touchend", stopPress); 65 | parentComponent.addEventListener("touchcancel", stopPress); 66 | parentComponent.addEventListener("mousedown", startPress, { passive: false }); 67 | parentComponent.addEventListener("mouseup", stopPress); 68 | 69 | 70 | this.addEventListener('click', e => { 71 | if (this.name === 'B') { 72 | this.dispatchEvent( 73 | new CustomEvent('tetris-rotate-piece', { 74 | bubbles: true, 75 | composed: true 76 | }) 77 | ); 78 | } else if (this.name === 'A') { 79 | this.dispatchEvent( 80 | new CustomEvent('tetris-button-bottom', { 81 | bubbles: true, 82 | composed: true 83 | }) 84 | ); 85 | } 86 | }); 87 | } 88 | 89 | connectedCallback() { 90 | this.name = this.getAttribute('name'); 91 | this.render(); 92 | this.addListeners(); 93 | } 94 | 95 | render() { 96 | this.shadowRoot.innerHTML = /* html */ ` 97 | 98 |
99 |
${this.name}
100 |
`; 101 | } 102 | } 103 | 104 | customElements.define('gameboy-button', GameboyButton); 105 | -------------------------------------------------------------------------------- /tetris/components/GameboyCrystal.js: -------------------------------------------------------------------------------- 1 | import './GameboyScreen.js'; 2 | 3 | class GameboyCrystal extends HTMLElement { 4 | constructor() { 5 | super(); 6 | this.attachShadow({ mode: 'open' }); 7 | } 8 | 9 | static get styles() { 10 | return /* css */ ` 11 | :host { 12 | --width: 330px; 13 | --height: 240px; 14 | } 15 | 16 | .container { 17 | background-color: #737488; 18 | width: var(--width); 19 | height: var(--height); 20 | border-radius: 10px 10px 35px 10px; 21 | border: 1px solid #666; 22 | border-width: 0 1px 0 1px; 23 | box-shadow: 24 | 0 0 2px #514c65, 25 | 0 -1px 1px #161118, 26 | 0 -2px 1px #A0939F, 27 | 0 -4px 1px #514c65, 28 | 0 0 2px 2px #9C99AC88 inset, 29 | 0 -1px 2px 1px #0006 inset; 30 | } 31 | 32 | .top { 33 | --gameboy-stripe-gradient: 34 | linear-gradient( 35 | transparent 10px, 36 | #7d1a4a 11px 12px, 37 | transparent 12px 16px, 38 | #35224e 16px 18px, 39 | transparent 18px 40 | ); 41 | 42 | background: var(--gameboy-stripe-gradient); 43 | position: relative; 44 | height: 26px; 45 | margin: 0 15px; 46 | top: 0; 47 | } 48 | 49 | .top span { 50 | padding: 0 8px; 51 | background: #767189; 52 | position: absolute; 53 | right: 40px; 54 | top: 8px; 55 | } 56 | 57 | .top .text { 58 | font-size: 9.5px; 59 | } 60 | 61 | .bottom { 62 | display: flex; 63 | } 64 | 65 | .battery { 66 | padding: 0 10px; 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | transform: translateY(-20px); 71 | } 72 | 73 | .battery .led { 74 | width: 10px; 75 | height: 10px; 76 | background: #4a4748; 77 | border-radius: 50%; 78 | margin: 6px; 79 | } 80 | 81 | .battery .led.on { 82 | background: #E11E0A; 83 | background-image: linear-gradient(0deg, transparent, #fff2); 84 | box-shadow: 0 0 2px 1.5px #d87473; 85 | } 86 | 87 | .battery .text { 88 | font-size: 8px; 89 | } 90 | 91 | .text { 92 | font-family: Arial, sans-serif; 93 | font-size: 10px; 94 | color: #eee; 95 | text-shadow: 0 0 2px #eee9; 96 | } 97 | 98 | gameboy-screen { 99 | transform: translate(2px, 2px); 100 | } 101 | `; 102 | } 103 | 104 | connectedCallback() { 105 | this.render(); 106 | } 107 | 108 | 109 | render() { 110 | this.shadowRoot.innerHTML = /* html */ ` 111 | 112 |
113 |
114 | DOT MATRIX WITH STEREO SOUND 115 |
116 |
117 |
118 |
119 |
BATTERY
120 |
121 | 122 |
123 |
`; 124 | } 125 | } 126 | 127 | customElements.define('gameboy-crystal', GameboyCrystal); 128 | -------------------------------------------------------------------------------- /tetris/components/GameboyOptionButton.js: -------------------------------------------------------------------------------- 1 | class GameboyOptionButton extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | addListenersToTetris() { 8 | this.addEventListener('click', e => { 9 | if (this.name === 'SELECT') { 10 | this.dispatchEvent( 11 | new CustomEvent('again-tetris', { bubbles: true, composed: true }) 12 | ); 13 | } else if (this.name === 'START') { 14 | window.open('../allGames/', '_self'); 15 | } 16 | }); 17 | } 18 | 19 | static get styles() { 20 | return /* css */ ` 21 | :host { 22 | --width: 50px; 23 | --height: 12px; 24 | } 25 | 26 | .container { 27 | background: linear-gradient(to top, #EFF2F0, #AE9FA6); 28 | box-shadow: 29 | -4px 4px 3px -3px #0005 inset, 30 | 4px -4px 3px -3px #fffc inset; 31 | transform: rotate(-28deg); 32 | border-radius: 15px; 33 | padding: 1px 0; 34 | 35 | } 36 | 37 | .button { 38 | background: #9e9baf; 39 | background-image: linear-gradient(#C0BECA, #7F7584); 40 | border-radius: 10px; 41 | box-shadow: 42 | -2px -2px 5px #0004 inset, 43 | 2px 2px 5px #fff3 inset, 44 | 2px 2px 6px #0007, 45 | -1px 2px 3px #000d; 46 | width: var(--width); 47 | height: var(--height); 48 | margin: 3px 6px; 49 | transition: box-shadow .2s ease; 50 | 51 | &:active { 52 | box-shadow: 53 | -2px -2px 5px #0004 inset, 54 | 2px 2px 5px #fff3 inset, 55 | 2px 2px 6px #0004, 56 | -1px 2px 3px #0004; 57 | } 58 | } 59 | 60 | .label { 61 | font-family: "Pretendo"; 62 | font-size: 10px; 63 | letter-spacing: 0.5px; 64 | color: #302058; 65 | transform: translate(10px, 2px) rotate(-28deg); 66 | text-align: center; 67 | } 68 | `; 69 | } 70 | 71 | connectedCallback() { 72 | this.name = this.getAttribute('name'); 73 | this.render(); 74 | this.addListenersToTetris(); 75 | } 76 | 77 | render() { 78 | this.shadowRoot.innerHTML = /* html */ ` 79 | 80 |
81 |
82 |
83 |
${this.name}
84 | `; 85 | } 86 | } 87 | 88 | customElements.define('gameboy-option-button', GameboyOptionButton); 89 | -------------------------------------------------------------------------------- /tetris/components/GameboySpeaker.js: -------------------------------------------------------------------------------- 1 | class GameboySpeaker extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | 11 | } 12 | 13 | .container { 14 | display: flex; 15 | width: 120px; 16 | justify-content: space-around; 17 | position: absolute; 18 | right: 10px; 19 | bottom: 35px; 20 | transform: rotate(-30deg); 21 | } 22 | 23 | .band { 24 | width: 8px; 25 | height: 60px; 26 | border-radius: 8px; 27 | box-shadow: 3px 6px 1px rgba(0, 0, 0, 0.6) inset; 28 | background: rgba(0, 0, 0, 0.35); 29 | } 30 | `; 31 | } 32 | 33 | connectedCallback() { 34 | this.render(); 35 | } 36 | 37 | render() { 38 | this.shadowRoot.innerHTML = /* html */ ` 39 | 40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
`; 48 | } 49 | } 50 | 51 | customElements.define('gameboy-speaker', GameboySpeaker); 52 | -------------------------------------------------------------------------------- /tetris/components/GameboyTop.js: -------------------------------------------------------------------------------- 1 | class GameboyTop extends HTMLElement { 2 | constructor() { 3 | super(); 4 | this.attachShadow({ mode: 'open' }); 5 | } 6 | 7 | static get styles() { 8 | return /* css */ ` 9 | :host { 10 | --height: 25px; 11 | 12 | } 13 | 14 | .container { 15 | display: flex; 16 | padding-bottom: 5px; 17 | margin-bottom: 1px; 18 | height: var(--height); 19 | overflow: hidden; 20 | border-radius: 12px 12px 0 0; 21 | box-shadow: 0px 18px 5px -10px #fff inset; 22 | } 23 | 24 | .container > div { 25 | border-radius: 0 0 2px 2px; 26 | border: 1px solid #1111; 27 | box-shadow: 0 2px 2px #2f2725aa; 28 | } 29 | 30 | .corner { 31 | width: 25px; 32 | } 33 | 34 | .corner.left { 35 | margin-right: 5px; 36 | } 37 | 38 | .corner.right { 39 | margin-left: 5px; 40 | } 41 | 42 | .top { 43 | width: 100%; 44 | } 45 | 46 | .top span { 47 | display: inline-block; 48 | font-family: Arial, sans-serif; 49 | font-size: 12px; 50 | color: #eee; 51 | text-shadow: 52 | 1px 2px 2px #0006; 53 | border-radius: 15px; 54 | padding: 1px 4px; 55 | transform: translate(6px, 1px); 56 | box-shadow: 57 | 0px 1px 2px #0005 inset, 58 | 0px -1px 2px #fffc inset; 59 | opacity: 0.8; 60 | } 61 | `; 62 | } 63 | 64 | connectedCallback() { 65 | this.render(); 66 | } 67 | 68 | render() { 69 | this.shadowRoot.innerHTML = /* html */ ` 70 | 71 |
72 |
73 |
74 | ◁ OFF·ON ▷ 75 |
76 |
77 |
`; 78 | } 79 | } 80 | 81 | customElements.define('gameboy-top', GameboyTop); 82 | -------------------------------------------------------------------------------- /tetris/fonts/PressStart2p.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/fonts/PressStart2p.ttf -------------------------------------------------------------------------------- /tetris/fonts/lato.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/fonts/lato.ttf -------------------------------------------------------------------------------- /tetris/fonts/lato.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/fonts/lato.woff -------------------------------------------------------------------------------- /tetris/fonts/lato.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/fonts/lato.woff2 -------------------------------------------------------------------------------- /tetris/fonts/pretendo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/fonts/pretendo.ttf -------------------------------------------------------------------------------- /tetris/fonts/pretendo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/fonts/pretendo.woff -------------------------------------------------------------------------------- /tetris/fonts/pretendo.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/20essentials/project-000-751/07e1c4599a116d1cc4603f87e28c3590eccc76e9/tetris/fonts/pretendo.woff2 -------------------------------------------------------------------------------- /tetris/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gameboy 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /tetris/script.js: -------------------------------------------------------------------------------- 1 | import "./components/GameboyConsole.js"; 2 | 3 | -------------------------------------------------------------------------------- /tetris/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | user-select: none; 8 | font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 9 | 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue'; 10 | -webkit-tap-highlight-color: transparent; 11 | } 12 | 13 | body { 14 | --sb-track-color: #60a4ff; 15 | --sb-thumb-color: linear-gradient(to bottom, #7debf2, #60a4ff); 16 | --sb-size: 10px; 17 | } 18 | 19 | body::-webkit-scrollbar { 20 | width: var(--sb-size); 21 | } 22 | 23 | body::-webkit-scrollbar-track { 24 | background: var(--sb-track-color); 25 | } 26 | 27 | body::-webkit-scrollbar-thumb { 28 | background: var(--sb-thumb-color); 29 | } 30 | 31 | @supports not selector(::-webkit-scrollbar) { 32 | body { 33 | scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); 34 | } 35 | } 36 | 37 | body { 38 | height: 100dvh; 39 | width: 100%; 40 | display: flex; 41 | flex-wrap: wrap; 42 | place-content: center; 43 | background: linear-gradient(90deg, #7debf2, #60a4ff); 44 | } 45 | 46 | @font-face { 47 | font-family: 'Pretendo'; 48 | src: url('fonts/pretendo.woff2') format('woff2'), 49 | url('fonts/pretendo.woff') format('woff'), 50 | url('fonts/pretendo.ttf') format('truetype'); 51 | } 52 | 53 | @font-face { 54 | font-family: 'Lato'; 55 | src: url('fonts/lato.woff2') format('woff2'), 56 | url('fonts/lato.woff') format('woff'), 57 | url('fonts/lato.ttf') format('truetype'); 58 | } 59 | @font-face { 60 | font-family: 'Press Start 2P'; 61 | src: url('fonts/PressStart2p.ttf') format('truetype'); 62 | } 63 | 64 | :root { 65 | --sound-yes: url('assets/sound-yes.svg'); 66 | --sound-no: url('assets/sound-no.svg'); 67 | } 68 | 69 | /***************************VIEW TRANSITIONS***************************/ 70 | html { 71 | view-transition-name: squareView; 72 | background: linear-gradient(90deg, #7debf2, #60a4ff); 73 | } 74 | 75 | @view-transition { 76 | navigation: auto; 77 | } 78 | 79 | ::view-transition-old(squareView) { 80 | animation: myViewTransition 0.4s ease reverse forwards; 81 | } 82 | 83 | ::view-transition-new(squareView) { 84 | animation: myViewTransition 0.7s ease forwards; 85 | } 86 | 87 | @keyframes myViewTransition { 88 | 0% { 89 | clip-path: circle(0% at 50% 34%); 90 | } 91 | 100% { 92 | clip-path: circle(116% at 50% 34%); 93 | } 94 | } 95 | 96 | /*****************************TETRIS*****************************/ 97 | 98 | @font-face { 99 | font-family: 'Score'; 100 | src: url('assets/tetris/SCOREBOARD.ttf') format('truetype'); 101 | font-display: swap; 102 | } 103 | 104 | :root { 105 | --barra: url('assets/tetris/bg-repeat.png'); 106 | --sound-yes: url(assets/tetris/sound-yes.svg); 107 | --sound-no: url(assets/tetris/sound-no.svg); 108 | --tetris-logo: url('assets/tetris/tetris-logo.avif'); 109 | } 110 | --------------------------------------------------------------------------------