Last active
May 25, 2023 21:29
-
-
Save bersling/ebe95f7918b3169b3d36b0b13272daf9 to your computer and use it in GitHub Desktop.
EmojiLetter for Mobile
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script lang="ts"> | |
import { Capacitor } from '@capacitor/core'; | |
let emojis = [ | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π ', | |
'π', | |
'π€£', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π€©', | |
'π₯³', | |
'π€', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'β£οΈ', | |
'π', | |
'β€οΈ', | |
'π§‘', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π€', | |
'π€', | |
'π€', | |
'π―', | |
'π’', | |
'π₯', | |
'π«', | |
'π¦', | |
'π¨', | |
'π³οΈ', | |
'π£', | |
'π¬', | |
'π¨οΈ', | |
'π―οΈ', | |
'π', | |
'π€', | |
'π', | |
'π€', | |
'ποΈ', | |
'β', | |
'π', | |
'π', | |
'π€', | |
'βοΈ', | |
'π€', | |
'π€', | |
'π€', | |
'π€', | |
'π', | |
'π', | |
'π', | |
'π', | |
'π', | |
'βοΈ', | |
'π', | |
'π', | |
'β', | |
'π', | |
'π€', | |
'π€', | |
'π', | |
'π', | |
'π', | |
'π€²', | |
'π€', | |
'π', | |
'βοΈ', | |
'π ', | |
'π€³', | |
'πͺ', | |
'π¦Ύ', | |
'π¦Ώ', | |
'π¦΅', | |
'π¦Ά', | |
'π', | |
'π¦»', | |
'π', | |
'π§ ', | |
'π¦·', | |
'π¦΄', | |
'π', | |
'ποΈ', | |
'π ', | |
'π', | |
'β¨', | |
'π', | |
'π«', | |
'π₯', | |
'π₯', | |
'πͺοΈ', | |
'π', | |
'π' | |
]; | |
let isIos = Capacitor.getPlatform() === 'ios'; | |
let emojiRows = [ | |
['β', 'β', 'β'], | |
['β', 'β', 'β'], | |
['β', 'β', 'β'] | |
]; | |
const selectRandomEmoji = (row: number, col: number) => () => { | |
emojiRows[row][col] = emojis[Math.floor(Math.random() * emojis.length)]; | |
}; | |
</script> | |
<div class="container"> | |
<div class="board"> | |
{#each emojiRows as emojiRow, row} | |
{#each emojiRow as emoji, col} | |
<button on:click={selectRandomEmoji(row, col)} class="emoji-button {isIos ? 'ios' : ''}"> | |
{emoji} | |
</button> | |
{/each} | |
{/each} | |
</div> | |
</div> | |
<style> | |
.container { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 100vh; | |
flex-direction: column; | |
} | |
.board { | |
display: grid; | |
grid-template-columns: 1fr 1fr 1fr; | |
grid-template-rows: 1fr 1fr 1fr; | |
width: min(90vw, 90vh); | |
height: min(90vw, 90vh); | |
} | |
.emoji-button { | |
background: white; | |
border-radius: 3%; | |
border: none; | |
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; | |
cursor: pointer; | |
text-decoration: none; | |
outline: none; | |
width: 95%; | |
height: 95%; | |
font-size: min(20vw, 20vh); | |
} | |
.emoji-button.ios { | |
font-size: 35px; | |
} | |
.emoji-button:hover { | |
background: #fbfbfb; | |
} | |
.emoji-button:active { | |
background: #fbfbfb; | |
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px; | |
outline: none; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment