From 85b442f9c433a28ff8392799bbaf51e5f34b093a Mon Sep 17 00:00:00 2001 From: Brent Ward Date: Mon, 23 Dec 2024 11:53:47 -0500 Subject: [PATCH] feat: Adds website links. (#103) * fix: Updates gulp-sass package to remove install error. * feat: Includes script to update all packages. * feat: Updates packages, includes watch script. * feat: Updates packages. * feat: Runs npm audit. * chore: Updates README. * chore: Updates husky. * feat: Adds placeholder link. * feat: Adds logo images, hooks up logo. * feat: Styles logo link. * feat: Adds website link to gameplay UI. --- .husky/pre-commit | 1 + .husky/pre-push | 1 + README.md | 12 +- app/style/graphics/brent_ward_logo.png | Bin 0 -> 5972 bytes app/style/graphics/brent_ward_logo.svg | 18 + app/style/graphics/brent_ward_logo_black.png | Bin 0 -> 1904 bytes app/style/graphics/brent_ward_logo_black.svg | 9 + app/style/scss/mainPage.scss | 125 +- build/app.css | 414 +- gulpfile.js | 8 +- index.html | 6 + package-lock.json | 12897 +++++++++-------- package.json | 32 +- 13 files changed, 7235 insertions(+), 6288 deletions(-) create mode 100644 .husky/pre-commit create mode 100644 .husky/pre-push create mode 100644 app/style/graphics/brent_ward_logo.png create mode 100644 app/style/graphics/brent_ward_logo.svg create mode 100644 app/style/graphics/brent_ward_logo_black.png create mode 100644 app/style/graphics/brent_ward_logo_black.svg diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 00000000..3867a0fe --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1 @@ +npm run lint diff --git a/.husky/pre-push b/.husky/pre-push new file mode 100644 index 00000000..72c4429b --- /dev/null +++ b/.husky/pre-push @@ -0,0 +1 @@ +npm test diff --git a/README.md b/README.md index 7accdf64..baa6166c 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,25 @@ # pacman-js + [![Build Status](https://travis-ci.com/bward2/pacman-js.svg?branch=master)](https://travis-ci.com/bward2/pacman-js) [![Coverage Status](https://coveralls.io/repos/github/bward2/pacman-js/badge.svg?branch=master)](https://coveralls.io/github/bward2/pacman-js?branch=master) [![Code Style](https://img.shields.io/badge/code%20style-airbnb-brightgreen.svg)](https://github.com/airbnb/javascript) Pacman clone made with Javascript, HTML, and CSS. -### *__[Play it!](https://bward2.github.io/pacman-js/)__* +### _**[Play it!](https://bward2.github.io/pacman-js/)**_ πŸ’πŸ“πŸŠπŸŽπŸˆπŸ‘ΎπŸ””πŸ”‘ ## Development Instructions -This project makes use of *__[NodeJS](https://nodejs.org/en/)__*. Download it, then clone this repo and run the following commands: +This project makes use of _**[NodeJS](https://nodejs.org/en/)**_. Download it, then clone this repo and run the following commands: + 1. `npm i` (Installs necessary packages for development) -1. `gulp watch` (Watches changes to JS and SCSS files for continuous compilation) +1. `npm run watch` (Watches changes to JS and SCSS files for continuous compilation) 1. `npm run serve` (Hosts the files locally) -The game can now be accessed at *__http://127.0.0.1:8080/index__* +The game can now be accessed at _**http://127.0.0.1:8080/index**_ -This project also utilizes *__[Husky](https://github.com/typicode/husky)__* to enforce best coding practices. The current thresholds are 0 linting errors upon commits (following Airbnb's standard), and 100% unit test code coverage upon pushes. +This project also utilizes _**[Husky](https://github.com/typicode/husky)**_ to enforce best coding practices. The current thresholds are 0 linting errors upon commits (following Airbnb's standard), and 100% unit test code coverage upon pushes. Feel free to submit PRs and/or report any issues you find! πŸ˜ƒ diff --git a/app/style/graphics/brent_ward_logo.png b/app/style/graphics/brent_ward_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..fd290ba77231ed5f52c900c8ce7037bc37a8b496 GIT binary patch literal 5972 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 + + + + + + + + + + + + + + + + + diff --git a/app/style/graphics/brent_ward_logo_black.png b/app/style/graphics/brent_ward_logo_black.png new file mode 100644 index 0000000000000000000000000000000000000000..88586beca24e466c1fdd08c655bc83af3af18ea7 GIT binary patch literal 1904 zcmV-$2aouPP)00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPPXN(I>tavcb%AnL&Az;Xq5=|HYPbOlZaM^|8{0?`#nsX#f5$hjpB1l|Qd z&d&@+INbtEVzG+_$omO4cBgWK<#{=kuK%0Ep}zlb26+cNU0+z{j%8`AE_hwJJfF(( zRPIkjBHc2h-$(HHN*xFA2{pf0t#yeT^6`ui}9W+bv%G)kNSIg?XMBPfM=)b z9c&?@L(%P`{m5(ef&^j(W`pF7yN!+EkWp;qho6+B+mzo8rg<9qoVMn0p`Wex25 zzO}BQe2qSra7y+Fjw5W|>W%Von+Za#J?iw$$dg^9g=T!&)V0-RyX}ps6JMhL6*u5^`VKbf% z{Rcu`FupFQzx){-x2oP^dqTnzPnsq7n|oDn!6#!n(fF+(>oA^h4a&sV)uIADV;ru7 zU_1-&3i1w|=LyE^P^sS<9RX`t7G%6Gz-$%bG_@_r@4zKA9k?`E%eOe+M9K3yRhNvM zQ{Q)3XIT)86AdQS*Iw74((A%ZtX=q-666IO58$&d0k_awvpa^)FH5k zP&K><(UxM!G>TtsL*uc9qP|<9c*FQVLXOeuPYf(hd}0em?gx<@=VsL zkn`dG5Va>Pg0V3^5_0TbRC86YvmQp@!?wR0 zN;th?4Dl4TV`g*8^R(9;Gi^OGryD&tNRQE7be)1c9`-0icgUPNq@Ka$O1RkrIK%A| z?Q4v813vrHa?YS5a0H(f$GQ$6$%V~ZRc}$|JGgyXkn8X^A((LV9_bqr*wIhQJ4|1% zma`Hs38j$fvBE*Yk8l|M9^;uEdv}Rgmi4-0)YchvJYoZ{%OS80($WYn2Qb`Z9QLHp zkIqi-!G&DGWr%he`FO30Kj-kUt&J4claeI}hH>{Q*W`c>AtfS&yh+atK# z8aUXmE$*YV4yC-Vq$i~#7nW1)JQhS>NbP2LEs>HhNIL#QJq_{)&;vo{i~65s z0(Z!VK*55Kd}4G~_DIMdkq$Mb5@Ch~i0eyR zXxBz6K3bK2w_}Ya&jAmTg8e#_;@S!j8pyakRk>tf^S ztg%HIr|P8;JEezdrw!JrI`cF=$Tt(;c`WzNW^RHA#-8>83y|}?(xB>}<-UM3g2P*w zk^XZBZj$_t^mQ@6iOU(}ovOE}e*oHm_qrAfz1XW07Qy(3g>9kjF8Z8Xe+1+H2iP#B zb%pSJulg-9rNbfr=!Ol|K`xi52v*$J4OkDOb;@2-4&aEN=nMFy%7MH7)Wq}P5+jd1 zTF+;!gwE&=gnax#k$6A$v#s|OY&x-Ln`cyPwMnW?859X746?O8IjVNL8{ zLvZ=3_}t7huvhg4^IrCO*+|bMdN#k}dWX?5`Vjg_{eRB2O4NQgA?Lw)9;-*N5)R`{ z@Q*;4wNr!qg!)0zVfdJlbEMo9N6a%m&0#A=1UI-$h7OTTt??x4*JWfK>W$~Hk=F(E zEV;w=aJW3BZxV8~FGuZ>4#QK|Qfs`;ye^ + + + + + + + + diff --git a/app/style/scss/mainPage.scss b/app/style/scss/mainPage.scss index b4824d7f..866e9bfd 100644 --- a/app/style/scss/mainPage.scss +++ b/app/style/scss/mainPage.scss @@ -43,10 +43,23 @@ body { } .header-buttons { - margin: 16px; + padding: 2rem 3rem; position: absolute; - width: 100%; + top: 0; + left: 0; z-index: 2; + display: flex; + align-items: center; + gap: 1.5rem; + + a { + font-family: none; + display: inline-block; + } + + img { + height: 2rem; + } button { background: none; @@ -82,13 +95,19 @@ body { justify-content: center; .one-up { - animation: blink .6s infinite; + animation: blink 0.6s infinite; } @keyframes blink { - 0% {opacity: 0} - 49% {opacity: 0} - 50% {opacity: 1} + 0% { + opacity: 0; + } + 49% { + opacity: 0; + } + 50% { + opacity: 1; + } } .row { @@ -170,12 +189,22 @@ body { left: 0; opacity: 0; position: absolute; - transition: opacity .25s; + transition: opacity 0.25s; visibility: hidden; width: 100%; z-index: 5; } +.brent-ward-logo { + position: absolute; + top: 2rem; + left: 3rem; + + img { + height: 2rem; + } +} + .logo { height: 200px; margin-top: 25vh; @@ -217,7 +246,7 @@ body { } .loading-pacman { - animation: loading-animation .3s steps(4) infinite; + animation: loading-animation 0.3s steps(4) infinite; background-color: $black; background-image: url('../app/style/graphics/spriteSheets/characters/pacman/pacman_right.svg'); background-size: 192px; @@ -256,25 +285,63 @@ body { z-index: -2; } -._5 { left: 5%; } -._10 { left: 10%; } -._15 { left: 15%; } -._20 { left: 20%; } -._25 { left: 25%; } -._30 { left: 30%; } -._35 { left: 35%; } -._40 { left: 40%; } -._45 { left: 45%; } -._50 { left: 50%; } -._55 { left: 55%; } -._60 { left: 60%; } -._65 { left: 65%; } -._70 { left: 70%; } -._75 { left: 75%; } -._80 { left: 80%; } -._85 { left: 85%; } -._90 { left: 90%; } -._95 { left: 95%; } +._5 { + left: 5%; +} +._10 { + left: 10%; +} +._15 { + left: 15%; +} +._20 { + left: 20%; +} +._25 { + left: 25%; +} +._30 { + left: 30%; +} +._35 { + left: 35%; +} +._40 { + left: 40%; +} +._45 { + left: 45%; +} +._50 { + left: 50%; +} +._55 { + left: 55%; +} +._60 { + left: 60%; +} +._65 { + left: 65%; +} +._70 { + left: 70%; +} +._75 { + left: 75%; +} +._80 { + left: 80%; +} +._85 { + left: 85%; +} +._90 { + left: 90%; +} +._95 { + left: 95%; +} .movement-buttons { align-items: center; @@ -303,9 +370,7 @@ body { user-select: none; &:active { - background: radial-gradient( - closest-side, $transparent-gray, transparent, - ); + background: radial-gradient(closest-side, $transparent-gray, transparent); } } diff --git a/build/app.css b/build/app.css index d22c62c3..78f3671e 100644 --- a/build/app.css +++ b/build/app.css @@ -1,14 +1,16 @@ .ghost { margin: 0; position: absolute; - z-index: 2; } - + z-index: 2; +} * { - font-family: 'Press Start 2P', sans-serif; } + font-family: "Press Start 2P", sans-serif; +} body { margin: 0; - overflow: hidden; } + overflow: hidden; +} .overflow-mask { background-color: #000; @@ -19,17 +21,20 @@ body { margin: 0; overflow: hidden; position: relative; - touch-action: manipulation; } + touch-action: manipulation; +} .backdrop { position: absolute; - visibility: hidden; } + visibility: hidden; +} .fps-display { position: absolute; right: 10px; top: 10px; - visibility: hidden; } + visibility: hidden; +} .preload-div { align-items: baseline; @@ -37,22 +42,37 @@ body { display: flex; flex-wrap: wrap-reverse; position: absolute; - visibility: hidden; } + visibility: hidden; +} .header-buttons { - margin: 16px; + padding: 2rem 3rem; position: absolute; - width: 100%; - z-index: 2; } - .header-buttons button { - background: none; - border: 0; - color: #fff; - cursor: pointer; - outline: none; - padding: 0; } - .header-buttons button .material-icons { - font-size: 40px; } + top: 0; + left: 0; + z-index: 2; + display: flex; + align-items: center; + gap: 1.5rem; +} +.header-buttons a { + font-family: none; + display: inline-block; +} +.header-buttons img { + height: 2rem; +} +.header-buttons button { + background: none; + border: 0; + color: #fff; + cursor: pointer; + outline: none; + padding: 0; +} +.header-buttons button .material-icons { + font-size: 40px; +} .paused-text { align-items: center; @@ -65,65 +85,84 @@ body { user-select: none; visibility: hidden; width: 100%; - z-index: 1; } + z-index: 1; +} .game-ui { display: flex; flex-direction: column; - justify-content: center; } - .game-ui .one-up { - animation: blink .6s infinite; } - + justify-content: center; +} +.game-ui .one-up { + animation: blink 0.6s infinite; +} @keyframes blink { 0% { - opacity: 0; } + opacity: 0; + } 49% { - opacity: 0; } + opacity: 0; + } 50% { - opacity: 1; } } - .game-ui .row { - display: flex; } - .game-ui .top ._25 { - width: 25%; } - .game-ui .top ._50 { - width: 50%; } - .game-ui .top .column :first-child { - text-align: center; } - .game-ui .top .column :not(:first-child) { - margin-right: calc(50% - 3em); - text-align: right; } - .game-ui .bottom { - justify-content: space-between; } - .game-ui .bottom .extra-lives { - align-items: flex-start; - display: flex; } - .game-ui .bottom .fruit-display { - display: flex; - flex-direction: row-reverse; } + opacity: 1; + } +} +.game-ui .row { + display: flex; +} +.game-ui .top ._25 { + width: 25%; +} +.game-ui .top ._50 { + width: 50%; +} +.game-ui .top .column :first-child { + text-align: center; +} +.game-ui .top .column :not(:first-child) { + margin-right: calc(50% - 3em); + text-align: right; +} +.game-ui .bottom { + justify-content: space-between; +} +.game-ui .bottom .extra-lives { + align-items: flex-start; + display: flex; +} +.game-ui .bottom .fruit-display { + display: flex; + flex-direction: row-reverse; +} @media (orientation: landscape) { .game-ui { - height: 100%; } } - + height: 100%; + } +} @media (orientation: portrait) { .game-ui { - height: 66%; } } - + height: 66%; + } +} .loading-cover { background: #ffdf00; height: 100vh; position: absolute; top: 0; width: 50vw; - z-index: 4; } + z-index: 4; +} .left { left: 0; - transition: left 0.5s 0.5s; } + transition: left 0.5s 0.5s; +} .right { right: 0; - transition: right 0.5s 0.5s; } + transition: right 0.5s 0.5s; +} .main-menu-container { align-items: center; @@ -133,14 +172,25 @@ body { left: 0; opacity: 0; position: absolute; - transition: opacity .25s; + transition: opacity 0.25s; visibility: hidden; width: 100%; - z-index: 5; } + z-index: 5; +} + +.brent-ward-logo { + position: absolute; + top: 2rem; + left: 3rem; +} +.brent-ward-logo img { + height: 2rem; +} .logo { height: 200px; - margin-top: 25vh; } + margin-top: 25vh; +} .game-start { background-color: #fcc73f; @@ -151,12 +201,15 @@ body { cursor: pointer; font-size: 48px; outline: none; - padding: 16px; } - .game-start:active { - box-shadow: none; - transform: translateX(5px) translateY(5px); } - .game-start:disabled { - cursor: default; } + padding: 16px; +} +.game-start:active { + box-shadow: none; + transform: translateX(5px) translateY(5px); +} +.game-start:disabled { + cursor: default; +} .loading-container { background-color: #000; @@ -169,7 +222,8 @@ body { transform: translateX(-50%) translateY(-50%); transition: opacity 0.5s 1s; width: 500px; - z-index: 5; } + z-index: 5; +} .loading-pacman { animation: loading-animation 0.3s steps(4) infinite; @@ -181,12 +235,14 @@ body { position: absolute; transition: left 1s; width: 48px; - z-index: 6; } + z-index: 6; +} @keyframes loading-animation { 100% { - background-position: -192px; } } - + background-position: -192px; + } +} .loading-dot-mask { background-color: #000; border-radius: 10px; @@ -195,7 +251,8 @@ body { position: absolute; top: 0; transition: width 1s; - z-index: -1; } + z-index: -1; +} .loading-dot { background-image: url("../app/style/graphics/spriteSheets/pickups/pacdot.svg"); @@ -204,64 +261,84 @@ body { top: 50%; transform: translateY(-50%); width: 6px; - z-index: -2; } + z-index: -2; +} ._5 { - left: 5%; } + left: 5%; +} ._10 { - left: 10%; } + left: 10%; +} ._15 { - left: 15%; } + left: 15%; +} ._20 { - left: 20%; } + left: 20%; +} ._25 { - left: 25%; } + left: 25%; +} ._30 { - left: 30%; } + left: 30%; +} ._35 { - left: 35%; } + left: 35%; +} ._40 { - left: 40%; } + left: 40%; +} ._45 { - left: 45%; } + left: 45%; +} ._50 { - left: 50%; } + left: 50%; +} ._55 { - left: 55%; } + left: 55%; +} ._60 { - left: 60%; } + left: 60%; +} ._65 { - left: 65%; } + left: 65%; +} ._70 { - left: 70%; } + left: 70%; +} ._75 { - left: 75%; } + left: 75%; +} ._80 { - left: 80%; } + left: 80%; +} ._85 { - left: 85%; } + left: 85%; +} ._90 { - left: 90%; } + left: 90%; +} ._95 { - left: 95%; } + left: 95%; +} .movement-buttons { align-items: center; @@ -271,47 +348,57 @@ body { height: 34%; left: 0; position: fixed; - width: 100%; } - .movement-buttons .row { - display: flex; - justify-content: space-between; - margin-bottom: -3px; } - .movement-buttons button { - background: transparent; - border: 3px solid #2121ff; - border-radius: 5px; - color: #2121ff; - height: 7vh; - outline: none; - padding: 0; - user-select: none; } - .movement-buttons button:active { - background: radial-gradient(closest-side, rgba(255, 255, 255, 0.25), transparent); } - .movement-buttons .button-up { - border-bottom: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; } - .movement-buttons .button-left { - border-bottom-right-radius: 0; - border-right: 0; - border-top-right-radius: 0; - margin-right: calc(7vh - 6px); } - .movement-buttons .button-right { - border-bottom-left-radius: 0; - border-left: 0; - border-top-left-radius: 0; } - .movement-buttons .button-down { - border-top: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; } - .movement-buttons .material-icons { - font-size: 7vh; - margin: -3px; } + width: 100%; +} +.movement-buttons .row { + display: flex; + justify-content: space-between; + margin-bottom: -3px; +} +.movement-buttons button { + background: transparent; + border: 3px solid #2121ff; + border-radius: 5px; + color: #2121ff; + height: 7vh; + outline: none; + padding: 0; + user-select: none; +} +.movement-buttons button:active { + background: radial-gradient(closest-side, rgba(255, 255, 255, 0.25), transparent); +} +.movement-buttons .button-up { + border-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.movement-buttons .button-left { + border-bottom-right-radius: 0; + border-right: 0; + border-top-right-radius: 0; + margin-right: calc(7vh - 6px); +} +.movement-buttons .button-right { + border-bottom-left-radius: 0; + border-left: 0; + border-top-left-radius: 0; +} +.movement-buttons .button-down { + border-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.movement-buttons .material-icons { + font-size: 7vh; + margin: -3px; +} @media (orientation: landscape) { .movement-buttons { - visibility: hidden; } } - + visibility: hidden; + } +} .error-message { color: #231f20; opacity: 0; @@ -320,64 +407,77 @@ body { transition: opacity 0.5s; visibility: hidden; width: 50vw; - z-index: 4; } - .error-message .error-pacman { - animation: error-animation 1.5s steps(12) infinite; - background-image: url("../app/style/graphics/spriteSheets/characters/pacman/pacman_error.svg"); - background-size: 576px; - height: 48px; - margin-left: 10px; - width: 48px; - z-index: 6; } - + z-index: 4; +} +.error-message .error-pacman { + animation: error-animation 1.5s steps(12) infinite; + background-image: url("../app/style/graphics/spriteSheets/characters/pacman/pacman_error.svg"); + background-size: 576px; + height: 48px; + margin-left: 10px; + width: 48px; + z-index: 6; +} @keyframes error-animation { 100% { - background-position: -576px; } } - .error-message .header { - display: flex; - font-size: 50px; - margin-bottom: 30px; } - .error-message .body { - font-size: 20px; - line-height: 1.25; } - + background-position: -576px; + } +} +.error-message .header { + display: flex; + font-size: 50px; + margin-bottom: 30px; +} +.error-message .body { + font-size: 20px; + line-height: 1.25; +} .maze-cover { background: #000; height: 100%; position: absolute; visibility: hidden; width: 100%; - z-index: 3; } + z-index: 3; +} .maze { margin: 0 auto; - position: relative; } + position: relative; +} .maze-img { position: absolute; user-select: none; - width: 100%; } + width: 100%; +} .maze-row { - display: flex; } + display: flex; +} .dot-container { height: 100%; position: absolute; - width: 100%; } - + width: 100%; +} .pacman { margin: 0; position: absolute; - z-index: 1; } - + z-index: 1; +} .power-pellet { - animation: blink .3s infinite; } + animation: blink 0.3s infinite; +} @keyframes blink { 0% { - opacity: 0; } + opacity: 0; + } 49% { - opacity: 0; } + opacity: 0; + } 50% { - opacity: 1; } } + opacity: 1; + } +} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 750642b7..2680b276 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,17 +1,19 @@ const gulp = require('gulp'); -const sass = require('gulp-sass'); +const sass = require('gulp-sass')(require('sass')); const concat = require('gulp-concat'); const removeCode = require('gulp-remove-code'); function styles() { - return gulp.src('app/style/scss/**/*.scss') + return gulp + .src('app/style/scss/**/*.scss') .pipe(sass()) .pipe(concat('app.css')) .pipe(gulp.dest('build')); } function scripts() { - return gulp.src('app/scripts/**/*.js') + return gulp + .src('app/scripts/**/*.js') .pipe(removeCode({ production: true })) .pipe(concat('app.js')) .pipe(gulp.dest('build')); diff --git a/index.html b/index.html index c0708472..7d583ca6 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,9 @@
+ + +