# "Guess Right" Code

## Overview and Background

"Guess Right" is a simplistic word-guessing game I wrote with [Vue.js](https://vuejs.org/)

I capitalized on Vue's reactive data, and fell in love with its templating system and state control.
Combined with some Laravel and MySQL on the backend made for quite a fun-thinking and manageable development environment.

The primary technologies I used whilst creating this little web app are as follows:
  * HTML5 (tags, data attributes) / CSS3 / ES2015 (ES6)
  * Vue.js 2.1.10 / Axios
  * vuex
  * vue-router
  * Sass (SCSS)
  * Laravel 5.2 / Blade
  * Gulp, webpack, npm, vue-loader, Babel, Laravel Elixir, Apache

## Screenshot

[![Link to Guess Right Screenshot](http://kdcinfo.com/guessright/guess-right-game-thumb.jpg "Link to Guess Right Screenshot")](http://kdcinfo.com/guessright/guess-right-game.jpg)

## Flowchart

The following link is to a flowchart diagram I created to help me analyze a particular flow in the game
(my flowchart containers are likely all wrong, but the flowchart tool is awesome!)
  * [Guess Right Flowchart](https://www.draw.io/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=GuessRight.xml#R7Vxbc5s4FP41nqQP8XATxo%2Bx03Yz02Y7zc50%2ByiDbNNgxIKc2PvrVwJxERIJdsDYu9vJTOEghHzOp3PTkUbmfLP7HMNo%2FRV7KBgZmrcbmXcjwzA026b%2FMco%2Bo%2BjalFNWse9xWkl49P9GeUNO3foeSoSGBOOA%2BJFIdHEYIpcINBjH%2BEVstsSB%2BNUIrpBEeHRhIFN%2F%2BB5ZZ1QHaCX9N%2BSv1vmXdY0%2FWUD3aRXjbci%2FNzLMZfove7yBeV%2B8fbKGHn6pkMyPI3MeY0yyq81ujgLG3Jxt2XufGp4W445RSFq9wMfxDIMtyoecDozsc2a8rH2CHiPosvsXKvGROVuTTUDvdHq59INgjgMcp63ZzzVcl9ITEuMnVHni2Qsb2PSJPEg%2B7mcUE7SrkPigPyO8QSTe0yb8qcnHzQFmgez2pRSWMeVN1hVBFb8XcoCsip5LJtELzic1z8Dk3TyDgb8K6bVLOYDioZhoiEw0J5rERUdXcNGedMBFowXy6OyI2GWICf1vdhFMtTSRq7ouc7XgdJWr%2BrQLbDoSE5FHVRu%2FxTFZ4xUOYfCxpM5SfYVYD5rIUcqFeP8no49BfvuTN0sIjMkt07WpgEKU0z75bHRpGxR6eQs3gEniuxmRN2Gf%2BIUI2XMDALcEU1I5yC8YR7xdo2QSvI1d%2FlM5gugoVijHakZiTHhVejEKIPGfRf3%2FLnwr4G0HdFQzz3%2Bmlyt2ObI0N%2FDdp7SB%2FdeWqf1ZjFZ%2BQhH8eYuS5DqgDELxh%2FJx3g0dQLWnAzVQB0h3RKBPZZzrjkp7dABzS2Lu1%2FvH%2BQA8sAwgznZTwQWg4ILZxWSXuEC7WGOPdnlL6aPJjPk%2B29B9gBt0TX8n3Hwo6OPxOL1mwIMbxplwkUQVfCURDAt0pc1y2AlPmnQ22qVYx9tF%2BkQX9Iz%2BtjbvQzhOS%2BFYXQhn%2Bl%2FWxLasiZ2hNHGucDqXhAWsqixutLFmFNL5hmKfDpU5IpckpclgUpKUWYMdPF99U7h6r%2BkboyeTqINT6ZtOITiRIahbQ2FQDuwSRO78BFJMzbaE4DCzrCSmz5uAGMXYpYA9CeJqYbCpKQBn9mTg8hl7YYBzZMAZgwHOeV3pZWjLNN9Z4K2IUYcA3FRi1hymDSgiDO3WJT6dn%2BfApbrfWfz6U%2Fidui6xaQSYw38bRGu4QGT8zJSXNgJ3ErNIZkQr3BBTJdxtqeZVOCnPvQRoyXpgvPJdGNxy8sb3vKAphbPEIcm1hiKBeUQGRuA%2BUDBfUzDf6IL5ZgPzYYrOZPwr%2BVezPregRUZxIvFemZbtgvVyTsDFm41PFGmX66u6Xb8aGfOmQLieaJG6i%2BA%2BwND70DIzU6gkGpAHAQrwigbmR6Q3O5CXLSoqy1DlcIAssC4SwLps%2FDIdnpwzx8DUEVimTPjoCpZ14nJNJNZ04XIVNz9F%2F6sewrb1wyphLNdRZQwrhcJloFuNhtunfPPlwbPw58y%2BUg0XkfRRymKwtI9l9CQLUxAGy%2FpQs39yiShn6NFiMo2uxZS%2BSn8s3FcaRNgPSVLp%2BRsjVFw3UPPduPEpRZ71WAKgGFo7BapwjhWrMpy0yAljskbh9ShPmlcN%2FaL%2B0hvGP17jzWLbIg7pw3gZjmi8gNJ4GbLx0rtYN1es2rzG%2FPgtzja%2B%2Bpoo4c7HyTjCCbk%2BRIpSx1cw8mkjd43cpx849jIHMltbadnFioX4yPuShfdpqJ%2BgALmkoL3aU2t2vM3JBncrISg6Aqi1ZXcPIMezpICGPnGMhWl3VcvQwpUtVsy6dmUVK3G33%2B4pIUtQdMvePpzYqSHrAVWiugsn1uzHidVkJ%2FYsfSRF%2FtEczl%2FtaZHygmUxWMGI1VPscMGyAIPJwvyXygLtfFKJKOndz%2FdKydK7ltJRoYNuig7AdKrVJP7O0EFOV7XxN8Uc5FGu5vWVsCj0wF1N0Vf8cLS3N4D%2FMRFFZduKMKSvdXLFMlIbOd4%2FzH%2F%2F%2Fv3j%2FI93ibKtkGKURDhMUArZcYDCFeUL5QgdbvZnaLK1eP8SQiHjgxYROgCEbooLB0CFCFuBCNABIiyrH2V%2FGUm7PPPTr0pv7ZAaZ6Jlf3Itm8%2FE3xe%2FLkrFWpoY4tmK4v7edKypWAZtIcVTalgUJHIJzwVrUNMx39SgqqXXLhSo2ZzYKwTo%2BUkEibt%2BTbitxFibshv8jG5Df%2FO4xi%2F3G7hCV43LsIctzratF%2Blj8uo1B2miytOqpNnJ5JWTWZI0%2F9qieP%2BYOqA4vmWvt5Lq9RW7AbMQbrKe8z0NlDzHlH8huTpgps9C9PKw3dCL9mnb8psjcEexAmasHGOcmtovVP2Poeddl40ghVZ513aF%2Fwwg46gqs3qDjFy8258CaGHJofdrm5AHfA%2BZ%2F8wseYaU4y34WaoFR2XT%2B5Ix%2BE%2Bnp3KPWPCSh0tPHbeM2ZGXzExulnS4%2FExE3U2enjIVYfW0EiIGnvq5TimgmFLDZd%2BbvZ7%2Fp9RBUwrUrNRpp9RJdt2d7ZRSbOiyhivAOjOvcBt5kKDPNPZ4JJBsk6sLdwcBaOEOqpKmnbiDnSZNz3IyKda6wGCJUat5%2BWmQyaQuoNeWMEjQpc%2BrvHI0z76otnGqquI7mVcn2cZ5rnMOKMIsYAw154AcZtVtSDOCh9%2BqYNc2QtnK4w%2F6wvFJdoeeLY4NBY7NoXBsH1PNkgN5GaAd512zfDyYrIuN9gcKZBFgdgBObY%2FI4QUtxqgsaCnLW%2BoV8jn2J2OH4tyxp8AGhj6xsgHwDxrjiTWpPDeyp%2FlRcLo1npqmY04sY6rrOjBFhNq2MxKSWpr2voJ9FZp6KtiXK%2FKnuqhEJrUuskHxt0pMHlz5X9tZbGtC5f%2Fb7fmZg43ta6XvtfbvLg%2By5TWwOxRR0KDQ3UvTT15ojFHi%2Fw2zsysYMDi%2FaGvAVipUJqJxiTGACxTMipMIxSPQ2FmEbCZT88X2S5t3N1M1EHOtIRmc4thFPtxR9ehClSGiM8DKi%2F%2FzimNuHt6Jzht9Ir6Cl0vqmUrK8TBZ5vOt940KhXfecldCN3si%2BNYFKuo5jmMqxyzJlHyFO3TMPobsfIKk6CwtVmLbGcTttGKzoqjp%2Fy0OreMSTYxLgCLeN%2FNdtV1vcQDNJR0DJnO%2BxdS%2FpoEiR62fMM%2F8PszJFx%2BI2oLALYUDb6iOkuzCgbebE%2BKRQo9VmJevlgd%2BiG7yYbHdTWnWF4yqJxkK3bDTCJQ9sQc3SeqbsX6oN7GTe8lOTDG07%2BkHXxN89h2JXGD1GoYe7WjBjsmgOIj2r%2BAIsjYxWgrjXRMSZYe3fKJ%2FT57rh0s8dvGG3qW7vuJsjJ%2FkX3HIq%2FnAoeLHRI3QHqrIqcEr4X13MF0sW3QJVYcCK09dAQfPFnpbntGceRjlSdjmx38A)

## Mockups:

  - [My initial 3-layout draft](http://framebox.org/AbDKz) (mobile; non-mobile test a, non-mobile test b)

  - [URL for my 2nd layout](http://framebox.org/AbmBG) (just a tad more defined)

## Tada!

Visit and Play **[Guess Right and Be Happy!](https://kdcinfo.com/guessright/)**

-Keith D Commiskey

## KDC-info Project Sites

As of March 2017

  - [Keep Track](https://kdcinfo.com/keeptrack/) An online personal inventory manager (`Laravel/Blade/MySQL/Bootstrap`)
  - [Pick-a-Meal](https://kdcinfo.com/pickameal/) Can't decide where or what to eat? (`Laravel/Blade/MySQL/Bootstrap`)
  - [Guess Right](https://kdcinfo.com/guessright/) A fun little word-guessing game (`Laravel/Vue/Vuex/Vue-router/ES2015(ES6)`)

## Internet Explorer Issues

The following were primarily related to IE11, but some affected Edge as well. I didn't analyze the differences between, and just fixed everything for IE11, which resulted in fixing Edge's subset of issues as well.

### _ Didn’t understand `.keys()`

  - Installed babel-polyfill: 6.23

    - Didn’t work for .keys(), but I think it fixed 1 or 2 other errors I didn’t log.

  - Code Fix

    - Didn’t Work
      ```
      for ( let div of document.getElementsByClassName('divContent') ) {
      ```

    - Works
      ```
      for ( let [key, div] of Object.entries( document.getElementsByClassName('divContent') ) ) {
      ```

### _ Shows ~20px tall white bar under the image and image frame.

  - Moved `<h2>Great Guessing !!!</h2>` into it’s sibling `<p>` with the 2 buttons

### _ Shows the next 'You Lost' background image when game is ‘played again’ (or reset)

  - Found IE11 doesn’t support multiple `classList` assignments

    - Didn’t Work
      ```
      div.classList.remove('anim', 'anim-none')
      ```

    - Works
      ```
      div.classList.remove('anim')
      div.classList.remove('anim-none')
      ```

### _ Pushed ‘Congratz’ background image off to the right side of the frame.

  - Image element is absolute, so I added `left: 0; right: 0;`

### _ IE11 shows "Great Guessing !!!" in extra-wide font that won’t center.

  - Haven’t figured this out yet (2017-04-29)