Giter Club home page Giter Club logo

Comments (2)

dinoact avatar dinoact commented on June 13, 2024

It looks like it's expecting lowercase - so Horse (SG9yc2U=) will not work but horse (aG9yc2U=) will work.

from vue-wordle.

jxlstudio avatar jxlstudio commented on June 13, 2024

I worked around this by adding in a game link generator at the bottom of the app page that forces the word to be all lowercase before encoding: https://turdlegame.netlify.app/

In Game.vue, I put the component right under the Keyboard component.

LinkGenerator.vue:

<script>
export default {
    data () {
        return {
            word: '',
            link: ''
        }
    },
    methods: {
        getLink () {
            const wordLowerCase = this.word.toLowerCase()
            const encodedWord = btoa(wordLowerCase)
            this.link = `https://turdlegame.netlify.app/?${encodedWord}`
            navigator.clipboard.writeText(this.link)
        }
    }
}
</script>

<template>
    <div>
        <hr style="margin-top: 35px; margin-bottom: 35px;">
        <h3>Create Your Own Game</h3>
        <p>Enter your own 5 letter word and click "Create Game Link" to create your own Wordle to send to your friends:</p>
        <input type="text" name="word" v-model="word" maxlength="5" />
        <div>
            <button @click="getLink()">Create Game Link</button>
        </div>
        <div v-if="link !== ''">
            <p>Link: {{link}}</p>
            <p><strong>Link copied, ready to paste!</strong></p>
        </div>
    </div>
</template>

<style>
button {
    background: transparent;
    color: orange;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid orange;
    padding: 12px 10px;
    border-radius: 5px;
}
input {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 5px;
}
</style>

I also built in results sharing. I haven't made the repo public yet because this is my first time tinkering with Vue3 and Vite, the code is ugly, and I need to fork it correctly. But will post the repo link here when I do.

from vue-wordle.

Related Issues (9)

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.