Giter Site home page Giter Site logo

emoji-gram's Introduction

Emoji-gram

A reactjs emoji word-art generator

Like ascii art, type a phrase and this app will render emoji letterforms. It's like, emoji replaces text with pictures, this replaces text with pictures, too... but better.

Check out the demo emojigram.ohnotype.co

screenshot

Install

First clone or download the app to your local machine, then install all dependencies with:

$ npm install

Run

Running the app is an easy few steps after you've installed it. First boot the express server that is included by running:

$ npm start

You should be able to view the app in your web browser at: http://localhost:8080.

Dev

Want to contribute? Great!

To develop, you'll need to make sure that webpack is watching for changes that you save so that it can auto bundle everything together. To set up a webpack watcher to bundle upon each save:

$ npm run dev

To bundle one time and NOT run a watch:

$ npm run build

Authors

emoji-gram's People

Contributors

ericbenjamin avatar miked1ck avatar amitava82 avatar

Stargazers

Enric Moreu avatar Joël Galeran avatar Allen Wang avatar nicolas avatar August Miller avatar Jonathan Simcoe avatar Gabriel Figueiredo avatar Studio Triple avatar Eric Lobdell avatar James T Edmondson avatar

Watchers

 avatar Joël Galeran avatar Eric Lobdell avatar

emoji-gram's Issues

Android specific emoji list

Emoji on android aren't all mono-width, causing some art to render poorly. Need to detect which browser is being used, and serve a different emoji list for android browsers.

AI: create a short list of Android friendly emoji
AI: create function to determine which browser is being used and serve appropriate emoji list.

img_0707

Feature Request: Swap Emoji Button

A button that flips the background / foreground emoji that are currently selected. This would also reposition the scrollers.

  1. Type a word
  2. Pick a left side emoji
  3. Pick a right side emoji
  4. Press [flip] and right side becomes left side / left side becomes right side

actual code2

Resolve Copy Paste Issue

When you copy the emoji art and then paste it into messenger, you get a result like this:

❄️❄️❄️❄️❄️❄️❄️❄️
/react-text react-text: 190 ❤️❤️❤️❤️❤️❤️❤️❤️
❤️❤️❄️❤️❤️❄️❤️❤️
❤️❄️❄️❤️❤️❄️❄️❤️
❄️❄️❄️❤️❤️❄️❄️❄️
❄️❄️❄️❤️❤️❄️❄️❄️
❄️❄️❄️❤️❤️❄️❄️❄️
❄️❄️❤️❤️❤️❤️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️
/react-text react-text: 191 ❤️❤️❤️❤️❤️❤️❤️❄️
❄️❤️❤️❄️❄️❤️❤️❄️
❄️❤️❤️❄️❄️❄️❄️❄️
❄️❤️❤️❤️❤️❤️❄️❄️
❄️❤️❤️❄️❄️❄️❄️❄️
❄️❤️❤️❄️❄️❤️❤️❄️
❤️❤️❤️❤️❤️❤️❤️❄️
❄️❄️❄️❄️❄️❄️❄️❄️
/react-text react-text: 192 ❄️❄️❤️❤️❤️❤️❤️❄️
❄️❤️❤️❄️❄️❤️❤️❄️
❄️❤️❤️❤️❄️❄️❄️❄️
❄️❄️❤️❤️❤️❤️❄️❄️
❄️❄️❄️❄️❤️❤️❤️❄️
❄️❤️❤️❄️❄️❤️❤️❄️
❄️❤️❤️❤️❤️❤️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️
/react-text react-text: 193 ❤️❤️❤️❤️❤️❤️❤️❤️
❤️❤️❄️❤️❤️❄️❤️❤️
❤️❄️❄️❤️❤️❄️❄️❤️
❄️❄️❄️❤️❤️❄️❄️❄️
❄️❄️❄️❤️❤️❄️❄️❄️
❄️❄️❄️❤️❤️❄️❄️❄️
❄️❄️❤️❤️❤️❤️❄️❄️
❄️❄️❄️❄️❄️❄️❄️❄️

Feature Request: Font Switcher

Buttons that toggle two different art libraries: "serifs" and "sans serifs"

Type a word
Pick a left side emoji
Pick a right side emoji
Press [A button] and the art would switch to using the Sans-Serif (here).
The currently selected font would change in opacity to reflect a "selected" state.

actual code

Select Button Won't Display

After packaging, the copy button isn't being revealed.

Top -- intended design.
Bottom -- current packaged code missing .footer div

button-missing

Backgrounding web app clears state

When you background emoji-gram it forces a reload when you re-open it causing emoji selections and phrase to be cleared.

  1. Type a phrase
  2. Change emoji selections
  3. Select and copy art
  4. Leave emoji-gran
  5. Paste art into messenger
  6. Return to emoji-gram
  7. Web app reloads and clears phrase and emoji selections.

Feature Request: Phrase Recognition

If you type pre-defined phrases, the art will swap the original defaults to a specific pair of emoji.

example: "Happy Birthday" = 🎉/🍰

It would be nice to be able to add phrases to a 'dictionary' .json file and add their emoji pair as the 'definition' or something.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.