rob
/
cyberegg2077
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

new game page layout and directional button icon SVGs

develop
Rob Colbert 2 years ago
parent
9944df238b
commit
136817fb2d
11 changed files with 360 additions and 110 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      bundle-build
  2. 97
      game/assets/img/btn-left.svg
  3. 99
      game/assets/img/btn-right.svg
  4. BIN
      game/assets/img/mystery-nigga.large.png
  5. BIN
      game/assets/img/mystery-nigga.png
  6. 238
      game/less/style.less
  7. 10
      game/views/game-view.pug
  8. 10
      game/views/layout.pug
  9. 7
      minigame-engine.js
  10. 6
      package.json
  11. BIN
      platform/img/nicecrew-banner.png

3
bundle-build
View File

@ -32,7 +32,8 @@ echo ""
echo "Game distributables:"
tree -L 1 dist
rm -Rf dist
echo ""
echo "Game bundle file:"
ls -lh ./bundle/${FILENAME}
ls -lh ./bundle/${FILENAME}

97
game/assets/img/btn-left.svg
View File

@ -0,0 +1,97 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="99.008713mm"
height="114.32541mm"
viewBox="0 0 99.008713 114.32541"
version="1.1"
id="svg8"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
sodipodi:docname="btn-left.svg">
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient821">
<stop
style="stop-color:#ffeb00;stop-opacity:1"
offset="0"
id="stop817" />
<stop
style="stop-color:#00eb00;stop-opacity:0"
offset="1"
id="stop819" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient821"
id="linearGradient827"
x1="57.113201"
y1="138.24998"
x2="152.34212"
y2="138.25"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-730.1465"
inkscape:cy="176.04802"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1051"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-54.089355,-81.087297)">
<path
sodipodi:type="star"
style="opacity:1;fill:url(#linearGradient827);fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path815"
sodipodi:sides="3"
sodipodi:cx="120.09516"
sodipodi:cy="138.25"
sodipodi:r1="65.005806"
sodipodi:r2="26.214222"
sodipodi:arg1="-3.1415926"
sodipodi:arg2="-2.5294017"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 55.089355,138.25 97.508715,-56.296678 -1e-5,112.593358 z"
inkscape:transform-center-x="5.4868062"
inkscape:transform-center-y="7.8457385" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

99
game/assets/img/btn-right.svg
View File

@ -0,0 +1,99 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="99.008713mm"
height="114.32541mm"
viewBox="0 0 99.008713 114.32541"
version="1.1"
id="svg8"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
sodipodi:docname="btn-right.svg">
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient821">
<stop
style="stop-color:#ffeb00;stop-opacity:1"
offset="0"
id="stop817" />
<stop
style="stop-color:#00eb00;stop-opacity:0"
offset="1"
id="stop819" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient821"
id="linearGradient827"
x1="57.113201"
y1="138.24998"
x2="152.34212"
y2="138.25"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(-207.18742)" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-730.1465"
inkscape:cy="176.04802"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1051"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-54.089355,-81.087297)">
<path
sodipodi:type="star"
style="opacity:1;fill:url(#linearGradient827);fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path815"
sodipodi:sides="3"
sodipodi:cx="-87.092262"
sodipodi:cy="138.25"
sodipodi:r1="65.005806"
sodipodi:r2="26.214222"
sodipodi:arg1="-3.1415926"
sodipodi:arg2="-2.5294017"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m -152.09807,138.25 97.508714,-56.296678 -6e-6,112.593358 z"
inkscape:transform-center-x="-5.486807"
inkscape:transform-center-y="7.8457385"
transform="scale(-1,1)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
game/assets/img/mystery-nigga.large.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
game/assets/img/mystery-nigga.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

238
game/less/style.less
View File

@ -3,6 +3,9 @@ html, body {
padding: 0;
--brand-color: rgb(252, 98, 0);
--background-color: rgb(0,0,0);
--text-color: #e8e8e8;
--default-margin: 30px;
}
body {
@ -10,8 +13,10 @@ body {
top: 0; right: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
background-color: #1a1a1a;
color: #e8e8e8;
padding: var(--default-margin) 0;
background-color: var(--background-color);
color: var(--text-color);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
a, a:visited {
@ -19,125 +24,127 @@ a, a:visited {
}
.container {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
max-width: 1280px;
max-width: 960px;
margin: 0 auto;
background-color: #000000;
color: #e8e8e8;
.text-center {
text-align: center;
}
.margin-block {
display: block;
position: relative;
width: 100%;
margin: 2em 0;
}
background-color: var(--background-color);
color: var(--text-color);
}
.game-title {
font-size: 2.5em;
font-weight: bold;
color: var(--brand-color);
}
.text-center {
text-align: center;
}
.margin-block {
display: block;
position: relative;
width: 100%;
margin: var(--default-margin) 0;
}
.game-title {
font-size: 2.25em;
font-weight: bold;
color: var(--brand-color);
}
.game-subtitle {
margin: 8px 0;
color: var(--brand-color);
font-style: italic;
}
.game-subtitle {
margin: 8px 0;
color: var(--brand-color);
font-style: italic;
}
.game-display-wrapper {
.game-display-wrapper {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
canvas.game-display {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 960px;
margin: 0 auto;
canvas.game-display {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 960px;
margin: 0 auto;
height: auto;
border: solid 1px #4a4a4a;
border-radius: 8px;
}
button.start-button {
position: absolute;
left: calc(50% - 120px);
top: calc(50% - 32px);
width: 240px;
height: 64px;
padding: 10px 20px;
background-color: var(--brand-color);
color: white;
border: solid 3px white;
border-radius: 8px;
font-size: 24px;
font-weight: bold;
}
}
button {
border: solid 3px;
border-color: rgba(255,255,255, 0);
height: auto;
border: solid 1px #4a4a4a;
border-radius: 8px;
width: 80px;
height: 80px;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button.direction-button {
background: rgba(0,0,0, 0.6);
button.start-button {
position: absolute;
left: calc(50% - 120px);
top: calc(50% - 32px);
width: 240px;
height: 64px;
padding: 10px 20px;
background-color: var(--brand-color);
color: white;
font-size: 4em;
border: solid 3px white;
border-radius: 8px;
font-size: 24px;
font-weight: bold;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
}
button.action-button {
background: rgba(255,0,0, 0.6);
color: white;
font-size: 3em;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
}
button.action-button.active,
button.direction-button.active {
border-color: white;
}
button.direction-button#btn-move-left {
position: absolute;
bottom: 20px;
left: 20px;
}
button.direction-button#btn-move-right {
position: absolute;
bottom: 20px;
right: 20px;
}
}
button.action-button#btn-throw-egg {
position: absolute;
bottom: 120px;
right: 20px;
button {
border: solid 3px;
border-color: rgba(255,255,255, 0);
border-radius: 8px;
width: 80px;
height: 80px;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
button.direction-button {
display: block;
background: rgba(0,0,0, 0.6);
color: white;
font-size: 4em;
font-weight: bold;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
img.button-icon {
display: block;
height: 0.8em;
margin: 0 auto;
}
}
button.action-button {
background: rgba(255,0,0, 0.6);
color: white;
font-size: 3em;
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
}
button.action-button.active,
button.direction-button.active {
border-color: white;
}
button.direction-button#btn-move-left {
position: absolute;
bottom: 20px;
left: 20px;
}
button.direction-button#btn-move-right {
position: absolute;
bottom: 20px;
right: 20px;
}
button.action-button#btn-throw-egg {
position: absolute;
bottom: 120px;
right: 20px;
}
@media only screen and (max-width: 480px) {
.container .game-display-wrapper button.start-button {
@ -169,4 +176,29 @@ a, a:visited {
.container button.action-button#btn-throw-egg {
bottom: 80px;
}
}
.page-footer {
display: flex;
.game-data {
flex-grow: 1;
}
}
.brand-link {
display: block;
width: 240px;
img.brand-header {
display: block;
width: 100%;
max-width: 960px;
height: auto;
margin: 0 auto;
}
.brand-prompt {
text-align: center;
}
}

10
game/views/game-view.pug
View File

@ -11,8 +11,8 @@ block game-view
.game-display-wrapper
canvas(id="game-display" width="960" height="540").game-display
button(type="button").start-button#start-button Start Game
button(type="button").direction-button#btn-move-left <
button(type="button").direction-button#btn-move-right >
button(type="button").action-button#btn-throw-egg 🥚
.notice a #[a(href="https://nicecrew.digital") #nicecrew] exclusive
button(type="button").direction-button#btn-move-left
img(src='/dist/assets/img/btn-left.svg', alt='Left button icon').button-icon
button(type="button").direction-button#btn-move-right
img(src='/dist/assets/img/btn-right.svg', alt='Left button icon').button-icon
button(type="button").action-button#btn-throw-egg 🥚

10
game/views/layout.pug
View File

@ -6,8 +6,18 @@ html(lang="en")
title CyberEgg 2077
body
.container
block game-view
.page-footer
.game-data
.game-title= pkg.niceGame.title
.game-subtitle= pkg.niceGame.description
.brand-link
a(href="https://nicecrew.digital", target="_blank")
img(src="/platform/img/nicecrew-banner.png", alt="NiceCrew Banner").brand-header
script(src=`/dist/game-style.bundle.js?v=${pkg.version}`, type="module")
script(src=`${gameModuleUrl}?v=${pkg.version}`, type="module")

7
minigame-engine.js
View File

@ -48,10 +48,17 @@ async function getHomeView (req, res) {
harness.app.set('view engine', 'pug');
harness.app.set('views', path.join(__dirname, 'game', 'views'));
// expose ./game/assets locally as /dist/assets
harness.app.use('/dist/assets', express.static(path.join(__dirname, 'game', 'assets')));
// expose the local ./platform as /platform to fill in for static assets
// commonly provided by the Nice Arcade platform (shell).
harness.app.use('/platform', express.static(path.join(__dirname, 'platform')));
// let Webpack provide /dist with live updates
harness.app.use(webpackDevMiddleware(compiler, { publicPath: '/dist' }));
// provide the "home" page to serve out the game
harness.app.get('/', getHomeView);
harness.app.listen(3000, ( ) => {

6
package.json
View File

@ -2,7 +2,11 @@
"name": "cyberegg2077",
"type": "module",
"version": "1.0.0",
"description": "CyberEgg 2077",
"description": "CyberEgg 2077: Interstellar Food Fight",
"niceGame": {
"title": "CyberEgg 2077: Interstellar Food Fight",
"description": "In a world where memes come to life, a pineapple takes on evil and wins!"
},
"scripts": {
"start": "node minigame-engine.js"
},

BIN
platform/img/nicecrew-banner.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

Write Preview
Loading…
Cancel
Save