Choosing a modern JavaScript UI framework, Pokemon-style.

Overview

ChooseYourFramework

Code Style: Prettier TypeScript: Strict NPM version

Choosing a modern JavaScript UI framework, Pokemon-style.

Usage

This is a hacked-together fork of FullScreenShenanigans/FullScreenPokemon, which is itself very old code on the not-production-ready EightBittr game engine. No guarantees any of this stuff works.

Development

After forking the repo from GitHub:

git clone https://github.com/<your-name-here>/ChooseYourFramework
cd ChooseYourFramework
yarn
yarn run hydrate
yarn run compile
  • yarn run hydrate creates a few auto-generated setup files locally.
  • yarn run compile builds source code to lib/ with TypeScript

Tip: run yarn compile -w to keep TypeScript running in watch mode, so your output files stay up-to-date as you save source code.

Running Locally

Once you've run the setup commands above, lib/index.html will contain a working file you can directly open in a browser locally, such as with open lib/index.html on Mac or start lib/index.html on Windows.

Running Tests

yarn run test

Tests are written in Mocha and Chai. Their files are written using alongside source files under src/ and named *.test.ts?. Whenever you add, remove, or rename a *.test.t* file under src/, watch will re-run yarn run test:setup to regenerate the list of static test files in test/index.html. You can open that file in a browser to debug through the tests, or run yarn test:run to run them in headless Chrome.

Production Builds

yarn run dist

After running the dist command, the dist/ folder will contain project outputs optimized for running in production: i.e. versions of code that are concatenated into fewer files and minified. dist/index.html will be a more optimized version of lib/index.html.

Comments
  • fix: text selection not disabled around game area

    fix: text selection not disabled around game area

    Overview

    What does this PR do? Why?

    • disable user text selection around the game area
    • prevent scenarios where text selection is triggered due to long-tapping buttons on mobile

    PR Checklist

    • [x] Fixes #26
    • [x] I have run this code to verify it works
    • [ ] This PR includes unit tests for the code change
    opened by ayoayco 2
  • fix: remove options title hover and correct margins

    fix: remove options title hover and correct margins

    This repo's part of https://github.com/FullScreenShenanigans/EightBittr/issues/186 & https://github.com/FullScreenShenanigans/EightBittr/issues/296.

    opened by JoshuaKGoldberg 2
  • chore: ignore vim temporary files

    chore: ignore vim temporary files

    Overview

    What does this PR do? Why?

    • a small change to .gitignore to ignore temporary files generated by vim
    • prevent these temporary files (*~, *.swp, *.swo) to be pushed
    • this should not affect any feature/logic

    PR Checklist

    • [ ] Fixes #
    • [x] I have run this code to verify it works
    • [x] This PR includes unit tests for the code change
    opened by ayoayco 1
  • feat: enhanced README.md development docs

    feat: enhanced README.md development docs

    Overview

    Adds information to the README.md about lib/ and dist/, most notably opening mentioning lib/index.html as something you can open.

    Also adds missing <!-- Development --> & <!-- /Development --> comments that are needed for shenanigans-manager's hydrate command to refresh the file.

    PR Checklist

    • [x] This repo's side of: https://github.com/FullScreenShenanigans/EightBittr/issues/336
    • [x] I have run this code to verify it works
    • [x] This PR includes unit tests for the code change
    opened by JoshuaKGoldberg 1
  • 🚀 Feature: Konami Code easter egg (likely: konamimojisplosion)

    🚀 Feature: Konami Code easter egg (likely: konamimojisplosion)

    Overview

    Despite the high relevancy of the Konami Code to this retro game project, there is no such easter egg in the game or on the site at all. Shame.

    I'm also the creator+maintainer of https://www.npmjs.com/package/konamimojisplosion so I'd like to include that script as a fun, quick easter egg.

    One complication is that https://unpkg.com/konamimojisplosion/dist/global.js takes up 11.7 kB uncompressed. This game's site is already at 254 kB uncompressed. I'd like to keep to a 256 kB performance budget if possible (it's announced on Twitter, even). So there has to be about 10 kB of savings somewhere to make this work.

    enhancement 
    opened by JoshuaKGoldberg 1
  • add libraries visited to itemsholder

    add libraries visited to itemsholder

    Overview

    What does this PR do? Why? It adds the libraries a user has visited to itemsholder and if all libraries have been visited they get a nice surprise ;)

    PR Checklist

    • [ ] Fixes #
    • [ ] I have run this code to verify it works
    • [ ] This PR includes unit tests for the code change
    opened by codewithjulie 1
  • feat: touchscreen buttons

    feat: touchscreen buttons

    Overview

    Brings in https://github.com/FullScreenShenanigans/EightBittr/pull/331 with some touchscreen buttons for mobile support.

    Also simplifies the interface settings a bit.

    PR Checklist

    • [x] Fixes #2
    • [x] I have run this code to verify it works
    • [ ] This PR includes unit tests for the code change 🥲
    opened by JoshuaKGoldberg 1
  • feat: replace ScenePlayr with a callback

    feat: replace ScenePlayr with a callback

    Overview

    Per #16, replaces the sceneplayr package with a single callback on Library actors.

    PR Checklist

    • [x] Fixes #1
    • [x] I have run this code to verify it works
    • ~[ ] This PR includes unit tests for the code change~
    opened by JoshuaKGoldberg 1
  • feat: friendly console log

    feat: friendly console log

    Overview

    What does this PR do? Why?

    Adds an nice little console log for people.

    PR Checklist

    • [x] Fixes https://github.com/FullScreenShenanigans/EightBittr/issues/315, just for this repo
    • [x] I have run this code to verify it works
    • ~[ ] This PR includes unit tests for the code change~
    opened by JoshuaKGoldberg 1
  • feat: use preview image during game load

    feat: use preview image during game load

    Overview

    Uses :empty to set up the preview.png added in #11 as the game element's background image.

    PR Checklist

    • [x] Fixes #3
    • [x] I have run this code to verify it works
    • ~[ ] This PR includes unit tests for the code change~
    opened by JoshuaKGoldberg 1
  • feat: add social media previews

    feat: add social media previews

    Overview

    Adds a bunch of meta tags for OpenGraph and Twitter, as well as a preview.png image used as the preview.

    PR Checklist

    • [x] Fixes #11
    • [x] I have run this code to verify it works
    • ~[ ] This PR includes unit tests for the code change~
    opened by JoshuaKGoldberg 1
  • Configure Renovate

    Configure Renovate

    Mend Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • .circleci/config.yml (circleci)
    • package.json (npm)

    Configuration

    🔡 Renovate has detected a custom config for this PR. Feel free to ask for help if you have any doubts and would like it reviewed.

    Important: Now that this branch is edited, Renovate can't rebase it from the base branch any more. If you make changes to the base branch that could impact this onboarding PR, please merge them manually.

    What to Expect

    With your current configuration, Renovate will create 9 Pull Requests:

    chore(deps): update cimg/node docker tag to v16.18
    • Schedule: ["at any time"]
    • Branch name: renovate/cimg-node-16.x
    • Merge into: main
    • Upgrade cimg/node to 16.18-browsers
    chore(deps): update dependency babel-loader to v8.3.0
    • Schedule: ["at any time"]
    • Branch name: renovate/babel-loader-8.x
    • Merge into: main
    • Upgrade babel-loader to 8.3.0
    chore(deps): update cimg/node docker tag to v19
    • Schedule: ["at any time"]
    • Branch name: renovate/cimg-node-19.x
    • Merge into: main
    • Upgrade cimg/node to 19.3-browsers
    chore(deps): update dependency @​sinonjs/fake-timers to v10
    • Schedule: ["at any time"]
    • Branch name: renovate/sinonjs-fake-timers-10.x
    • Merge into: main
    • Upgrade @sinonjs/fake-timers to ^10.0.0
    chore(deps): update dependency @​types/mocha to v10
    • Schedule: ["at any time"]
    • Branch name: renovate/mocha-10.x
    • Merge into: main
    • Upgrade @types/mocha to ^10.0.0
    chore(deps): update dependency babel-loader to v9
    • Schedule: ["at any time"]
    • Branch name: renovate/babel-loader-9.x
    • Merge into: main
    • Upgrade babel-loader to 9.1.0
    chore(deps): update dependency lerna to v6
    • Schedule: ["at any time"]
    • Branch name: renovate/lerna-6.x
    • Merge into: main
    • Upgrade lerna to ^6.0.0
    chore(deps): update dependency sinon to v15
    • Schedule: ["at any time"]
    • Branch name: renovate/sinon-15.x
    • Merge into: main
    • Upgrade sinon to ^15.0.0
    chore(deps): update dependency webpack-cli to v5
    • Schedule: ["at any time"]
    • Branch name: renovate/webpack-cli-5.x
    • Merge into: main
    • Upgrade webpack-cli to ^5.0.0

    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 1
  • Header text gets cropped off vertically on mobile

    Header text gets cropped off vertically on mobile

    Overview

    I noticed in #24's video report that the header looks like this:

    Mobile screenshot of chooseyourframework.dev where only 'Choose Your' is visible in the header

    The page should use a CSS media query to make the header's font size smaller on mobile devices. That way the full Choose Your Framework text will always be visible.

    As with #26, src/index.css is the place to write styles. They'll need to be copied to lib/index.css to be seen when running the game locally from lib/index.html.

    bug good first issue accepting prs 
    opened by JoshuaKGoldberg 0
  • 🚀 Feature: Background music and menu sound effects

    🚀 Feature: Background music and menu sound effects

    I know adding sound effect is tricky since the app starts right away, and browser requires user interaction before playing audio. Not sure "WASD" keypress consider interaction or not 🤔

    But this is just a "good to have" features 😁

    enhancement accepting prs 
    opened by zernonia 1
  • Bug: Some users can walk out of bounds

    Bug: Some users can walk out of bounds

    https://www.reddit.com/r/javascript/comments/wxrm7m/comment/ilthbwe/?utm_source=share&utm_medium=web2x&context=3:

    Walk to the table then walk all the way to the right

    https://www.reddit.com/r/javascript/comments/wxrm7m/comment/ilud77h/?utm_source=share&utm_medium=web2x&context=3:

    I was able to walk around the table to the right (out of frame), but Oak has no dialog assigned to him :(

    ...how are people doing this? It's a bug that should be fixed.

    bug accepting prs 
    opened by JoshuaKGoldberg 1
Owner
Josh Goldberg
Full time open open source 💖✨ prev @Codecademy @microsoft ✨ @typescript-eslint maintainer, occasional @typescript contributor, side of accessibility
Josh Goldberg
Base62-token.js - Generate & Verify GitHub-style & npm-style Base62 Tokens

base62-token.js Generate & Verify GitHub-style & npm-style Secure Base62 Tokens Works in Vanilla JS (Browsers), Node.js, and Webpack. Online Demo See

Root 4 Jun 11, 2022
A demo of LaunchDarkly, React, and Vite, using the Pokémon API!

Pokémon Feature Flags demo Here's a demo for integrating feature flags into a React project! Built with React, Vite, the PokeAPI, and LaunchDarkly! Wh

Cassidy Williams 15 Jan 5, 2022
An interactive encyclopedia of Pokémon.

Pokédex An interactive encyclopedia encompassing data on the various mythical creatures found throughout the world of the universally-loved, multimedi

Zane 18 Dec 9, 2022
pokedev.js is a tool make to help developers get info about a pokemon and use it in any project with ease.

pokedev.js pokedev.js is a tool make to help developers get info about a pokemon and use it in any project with ease. Quick Links pokedev.js Quick Lin

pokedev.js 4 Apr 4, 2022
Group project where, we have built a simple quiz to test your Pokemon knowledge

Pokemon-Project For our first team project we have built a Pokemon Quiz. The Team Damon Spriggle Chris Burton Fuji Sin Oscar Hurtado Christopher Lee A

Chris Burton 2 Apr 25, 2022
"Choose your Pokemon" is a Webpack project meant to fetch data from two different APIs: PokéAPI and Involvement API

"Choose your Pokemon" is a Webpack project meant to fetch data from two different APIs: PokéAPI and Involvement API. Here we display a list of 20 Pokemons for whom one can like, display more info, and comment; all based on the data from these two external resources.

Carlos HerverSolano 19 Mar 31, 2022
A pokemon-like project game where you level up by hacking your neighbor.

CTF BourgPalette A pokemon-like project game where you level up by hacking your neighbor. You play as a new hacker. You are not trying to capture all

VB 23 Dec 27, 2022
A pokemon card battle app that can evolve them and see their battle history.

BattlePoke ?? About An application of an Pokemon card battle game where each player initially receives 3 cards and can start to battle and gain evolut

Mateus Cruz Rossetto 3 Jun 17, 2022
PoGOEvents is a Scriptable widget that displays current and upcoming Pokemon GO events.

PoGOEvents PoGOEvents is a Scriptable widget that displays current and upcoming Pokemon GO events. All event data is gathered from from ScrapedDuck, w

Anthony 33 Nov 12, 2022
Este repositorio contendrá el proyecto final de Angular con temática de Pokemon Unite

ProyectoFinal This project was generated with Angular CLI version 14.0.2. Development server Run ng serve for a dev server. Navigate to http://localho

null 2 Jun 19, 2022
The official pokemon website is not that cool? Here is the alternative 😉

Pokemon Awesome Pokemon Data All Pokemon data used in this project comes from PokeAPI GraphQL Beta. Playground: https://beta.pokeapi.co/graphql/consol

Muhammad Afifudin 128 Dec 23, 2022
Pokémon: Duel Battle

Pokémon: Duel Battle Sebuah Web Apps yang dibuat sebagai syarat kelulusan Dicoding Submission Belajar Fundamental Front-End Web Development. Tech Proj

Ryan Aunur Rassyid 3 Sep 16, 2022
Jaksel Script, Programming language very modern and Indonesian style

Jaksel Script Jaksel Script is a new programming language, very modern, easy to learn, using Indonesia-slang language. No programming experience requi

Rio Chandra 823 Jan 3, 2023
📆 The modern, open source "Airbnb style" date picker.

Date Picker A pretty, modern date picker. Coming soon. ?? Get Started wip wip ?? Testing pnpm test ?? Changelog Please see our releases page for more

Open Web Foundation 8 Oct 11, 2022
Bun-Bakery is a web framework for Bun. It uses a file based router in style like svelte-kit. No need to define routes during runtime.

Bun Bakery Bun-Bakery is a web framework for Bun. It uses a file based router in style like svelte-kit. No need to define routes during runtime. Quick

Dennis Dudek 44 Dec 6, 2022
A Powerful and Elegant "alert" library for JavaScript that replaces that boring alert style of Javascript.

A Powerful , Elegant and fully customizable "alert" library using JavaScript that replaces that boring style of alert. Installation Place the below sc

Cosmogic 11 Aug 10, 2021
Fast & Robust Front-End Micro-framework based on modern standards

Chat on gitter Hello slim.js - your declarative web components library import { Slim } from 'slim-js'; import { tag, template } from 'slim-js/decorato

slim.js 942 Dec 30, 2022
LogTure - A minimal designed, fully customizable, and extensible modern personal blogging framework, built with Nextjs.

LogTure - A minimal designed, fully customizable, and extensible modern personal blogging framework, built with Nextjs.

Sam Zhang 14 Aug 26, 2022
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

Sortable Sortable is a JavaScript library for reorderable drag-and-drop lists. Demo: http://sortablejs.github.io/Sortable/ Features Supports touch dev

SortableJS 26.1k Jan 5, 2023