vue-cli 测试
App Link: https://tekken-character-quiz.netlify.app/#/
应用链接： https : //tekken-character-quiz.netlify.app/#/
Since Tekken’s season 4 was announced, I decided to make personal project that would recommend an ideal character based on the player’s preferences. Hopefully this could serve as a guide for new players, and players who wanted to find a secondary character.
自从《铁拳》第4季宣布以来，我决定根据个人喜好制定个人项目，推荐一个理想的角色。 希望这可以为新玩家以及想要找到辅助角色的玩家提供指导。
I drew inspiration from the Guilty Gear community in that I could make this process a form of an interactive quiz.
我可以从Guilty Gear社区中汲取灵感，因为我可以使此过程成为交互式测验的形式。
I will start off by explaining the logic behind how the quiz works and how characters are recommended to the user, then go back to the beginning, explaining how I ended up using Vue JS, how my components were structured, and what I’d like to do moving forward.
首先，我将解释测验工作原理以及向用户推荐字符的背后逻辑，然后回到开头，解释我最终如何使用Vue JS，如何构造我的组件以及我想要什么做前进。
The Tekken 7 Character Selection Quiz (Tekken Character Quiz) aims to be a point of reference for newer users when they struggle to find a character they enjoy playing. It is composed of 14 questions with weighted answers that aim to draw out a character that best fits the user’s preference, taking in factors such as gender, game plan, offensive options, tier, and difficulty and considering them equally important.
《 Tekken 7角色选择测验》(Tekken Character Quiz)旨在成为新用户在难以找到喜欢玩的角色时的参考点。 它由14个带有加权答案的问题组成，目的是根据性别，游戏计划，进攻方式，等级和难度等因素，得出最适合用户喜好的角色，并认为它们同等重要。
Then, once the user chooses the answers, the function pointAssign() will take the user input, organize them into arrays by “prioritize”, “prefer”, and “only” and add points based on which characters fit the bill. Characters were put into their own json file to be handled by frontend like below.
然后，一旦用户选择了答案，函数pointAssign()将接受用户输入，通过“优先”，“偏好”和“仅”将它们组织成数组，并根据适合字符的字符添加分数。 字符被放入自己的json文件中，由前端处理，如下所示。
I initially wanted all the answers to be weighed equally, but upon feedback from communities, decided that some factors were more important than others. For example, if users chose a selective gender, there was a high chance that they wanted a selection only from that character pool, even if the playstyle they wanted didn’t 100% align. Based on this, I made certain questions have the weight ‘only’, which would act as a multiplier in addition to just extra points. This would make it so that characters that fit into some high importance categories would take heavy priority.
最初，我希望所有答案均等地权衡，但是在社区反馈的基础上，我决定某些因素比其他因素更重要。 例如，如果用户选择了选择性的性别，则即使他们想要的游戏风格未100％对齐，他们也极有可能只希望从该角色库中进行选择。 基于此，我提出了某些问题的权重为“ only”(仅)，除了加分外，还可以作为乘数。 这样一来，适合某些高重要性类别的角色将获得较高的优先级。
The current calculation algorithm is like this:
当前的计算算法如下：
(Only+1)* {(Only+Prioritize)*10 + Prefer*5)}
(仅+1)* {(仅+优先)* 10 +偏好* 5)}
Because I wanted this to be useful for both Korean and Western Tekken communities, I wanted to have an i18n option. It took some refactoring but with the advice of friends, I was able to figure out the best structure to support multiple languages. The frontend would read from ‘quiz.json’, and use its values as a ‘keypath’ for the vue-i18n plugin to read from its respective language jsons (kr.json and en.json). I implemented a translation icon in the navigation area so that people could switch between languages with the click of a button.
因为我希望这对韩国人和西方铁拳社区都有用，所以我希望有一个i18n选项。 进行了一些重构，但是在朋友的建议下，我得以找出支持多种语言的最佳结构。 前端将从“ quiz.json”读取，并将其值用作vue-i18n插件的“键路径”，以从其各自的语言json(kr.json和en.json)读取。 我在导航区域中实现了翻译图标，以便人们可以通过单击按钮在语言之间进行切换。
I received additional feedback from Merv saying that the quiz was difficult for colorblind people because of the (admittedly ugly) green/grey theme, so I changed the palette to make it a cooler dark tone.
我收到Merv的其他反馈，说色盲人很难进行测验，因为(令人讨厌的)绿色/灰色主题，所以我更改了调色板以使其更凉爽。
I also added an FAQ page.
我还添加了一个常见问题页面。
Since this was my first time looking for frontend in terms of reactive design, my mind went to React JS, but bigcookie recommended trying out the framework Vue JS. I believe using Vue CLI saved me a lot of frontend learning time as I could immediately start applying my code to their base setup. I have little design knowledge so it was nice having a template CSS laid out for me that I could theme my site around, although if I have time later I want to improve the CSS through a framework like Bulma.
由于这是我第一次在响应式设计方面寻找前端，因此我决定使用React JS，但是bigcookie建议尝试使用Vue JS框架。 我相信使用Vue CLI可以节省很多前端学习时间，因为我可以立即开始将代码应用于他们的基本设置。 我几乎没有设计知识，所以很高兴能为我布置一个模板CSS，以便可以围绕我的网站进行主题设计，尽管如果我以后有空，我想通过Bulma这样的框架来改进CSS。
After revising and redesigning with their sample site as an example of what I can do, I got to work designing the quiz.
在修改并重新设计了示例站点作为我可以做的事的示例之后，我开始设计测验。
The first thing to do was to know which questions to ask. I took inspiration from the Guilty Gear communities’ character quiz: https://arctice.github.io/XrdQuizRevamp/
首先要做的是知道要问哪些问题。 我从Guilty Gear社区的角色测验中获得了启发： https ： //arctice.github.io/XrdQuizRevamp/
But I was still at a loss on how to adapt this for Tekken. The 4o4Esports Discord and a few other friends assisted in breaking down characters into the following:
但是我仍然不知如何适应《铁拳》。 4 o4Esports Discord和其他一些朋友协助将角色分解为以下内容：
Later, I changed structure based on how compact I wanted the quiz to be. From a newcomer’s perspective, it would be hard to understand what ‘approaching the opponent’ meant versus ‘opening them up’, or the difference between difficulty created by game plan vs. execution.
后来，我根据测验的紧凑程度更改了结构。 从新手的角度来看，很难理解“接近对手”与“开放对手”是什么意思，或者很难理解游戏计划与执行所产生的难度之间的区别。
With these guides, I was able to successfully classify a character into data. In an attempt to make it less code-intensive, after classifying a character, I added a ‘tags’ array that would store all its information. If I wanted to change anything in the structure or traits, I would only have to edit the tags.
有了这些指南，我就能够成功地将字符分类为数据。 为了减少代码密集度，在对字符进行分类之后，我添加了一个“标签”数组来存储其所有信息。 如果我想更改结构或特征中的任何内容，则只需编辑标签。
Now, I only needed to go ahead and get reliable information for every playable Tekken character to classify — easier said than done. Thankfully, while I am in a low rank, LoseAgainMan (Lei TGP) and Merv (Julia TGP) was more than happy to help. Between the two, I was able to get opinions for almost every character, and Chanel, despite his busy match schedule, filled in the opinions for Eliza and Yoshimitsu, some of the rarer characters hard to classify. Combined with Fergus’ T7 Spreadsheet, this meant that I had at least 2~3 reliable opinions for each character I could compare and ask questions about.
现在，我只需要继续获取每个可玩的《铁拳》角色进行分类的可靠信息，说起来容易做起来难。 值得庆幸的是，虽然我的排名较低，但LoseAgainMan(雷伊·三藩市)和Merv(Julia·三藩市)非常乐于提供帮助。 在这两者之间，我几乎能够获得每个角色的意见，尽管香奈儿(Chanel)的比赛日程很忙，但仍填充了Eliza和Yoshimitsu的意见，其中一些难以分类的稀有角色。 结合Fergus的T7电子表格，这意味着对于每个我可以比较并提出问题的角色，我至少都有2〜3个可靠的观点。
I added a router and views ‘home’ ‘about’ and ‘quiz’, and a hidden 4th view ‘recommendations’ which would calculate and display the Top 3 characters, as well as a view for each.
我添加了一个路由器，并查看了“家”，“关于”和“测验”，以及一个隐藏的第四视图“建议”，该视图将计算并显示前3个字符，以及每个字符的视图。
While this isn’t a great example, we can have modularity in a view by splitting up the view contents into components. The view code itself is very simple, just calling the component I want, and specifying what components are in the view.
虽然这不是一个很好的示例，但是我们可以通过将视图内容拆分为组件来在视图中具有模块化。 视图代码本身非常简单，只需调用我想要的组件，然后指定视图中的组件即可。
Displaying the questions stored in quiz.json was done in a 2 part way.
显示存储在quiz.json中的问题分两个部分完成。
Because I had values I needed access from other components as well, I made a global store via questions.js that I could save relevant values that I needed access in later components. This way, a component could just access the store independently of other components for important values such as the current question, the list of questions/answers, and the traits the user has chosen until now.
因为我拥有值，所以我也需要从其他组件进行访问，所以我通过questions.js创建了一个全局存储，可以在以后的组件中保存需要访问的相关值。 这样，一个组件就可以独立于其他组件访问商店以获取重要值，例如当前问题，问题/答案列表以及用户到目前为止选择的特征。
And now, just by declaring this in the data of the relevant component, we have access,
现在，只需在相关组件的数据中声明这一点，我们就可以访问，
which lets us call in the relevant questions and answers with simple syntax.
这样我们就可以使用简单的语法来调用相关的问题和答案。
From the user’s perspective it would look something like this:
从用户的角度来看，它看起来像这样：
In order to give these guys actual values, I made an en.json and kr.json file with values set for the keypaths to overwrite the above picture.
为了给这些家伙提供实际值，我制作了一个en.json和kr.json文件，并为键路径设置了值，以覆盖上图。
Now, the syntax will trace the origin to the respective texts, giving the user the full question and answers instead of just the path. Of course, during actual development, I did not think of this initially, and initially only did the page in one language, making this step unnecessary. However, if I develop a site with i18n support next time as well, I think I will take the step listed above from the start — translating is fun but grueling work, I like doing it little by little, not in big batches at once like I had to do with this project. Anyway, with the locales and relevant text json attached the quiz should now look correct:
现在，语法会将原点追溯到各个文本，从而为用户提供完整的问题和答案，而不仅仅是路径。 当然，在实际开发中，我最初并没有想到这一点，起初只用一种语言编写了该页面，因此无需执行此步骤。 但是，如果我下次也开发一个具有i18n支持的网站，我想我将从一开始就采取上面列出的步骤-翻译很有趣但是很辛苦，我喜欢一点一点地做，而不是像大批那样我和这个项目有关。 无论如何，在附加了语言环境和相关文本json之后，测验现在应该看起来正确：
For displaying answers all in relevant to 1 question, I used the v-for. Because I wanted only one answer to be chosen per question, I kept them radio buttons. v-model provided binding for the radio button values to my ‘picked’ variable in the global storage, letting me update my chosenTraits[] array for later reference.
为了显示与1个问题相关的所有答案，我使用了v-for 。 因为每个问题只希望选择一个答案，所以我将其保留为单选按钮。 v模型为单选按钮值提供了绑定到全局存储中我的“已选择”变量的绑定，使我可以更新我的selectedTraits []数组以供以后参考。
The global storage handled computation functions as well, including the ones that computed final score. With the help of bigcookie, I was able to handle the results something like this.
全局存储也处理计算功能，包括计算最终分数的功能。 在bigcookie的帮助下，我能够处理类似这样的结果。
- All value as I’m taking the test are saved into ‘currentTraits’ array. 我参加考试时的所有值都保存到“ currentTraits”数组中。
- Create 3 arrays that will go through the traits and detect relevant parameters, the ‘prioritized’, ‘preferred’, and ‘only’ 创建3个将通过特征并检测相关参数的数组，“优先”，“优先”和“仅”
- Go into the list of characters (characters.json) and compare each characters’ traits to the ones in the 3 arrays. Find how many of each trait every character corresponds to and compute the score: 进入字符列表(characters.json)，并将每个字符的特征与3个数组中的特征进行比较。 查找每个字符对应的每个特征有多少，并计算分数：
(Only+1)* {(Only+Prioritize)*10 + Prefer*5)}
(仅+1)* {(仅+优先)* 10 +偏好* 5)}
We now have an array that has successfully mapped every character’s scores with their corresponding character information copied over from Characters.json
现在，我们有了一个数组，该数组已成功映射了每个字符的分数以及从Characters.json复制过来的对应字符信息
Finally, we can sort this array so that we know the points and placements of every character without having to iterate through next time.
最后，我们可以对该数组进行排序，以便我们知道每个字符的点和位置，而不必在下一次迭代。
Finally, this information is displayed via another v-for that will only display ‘3’ characters from the front.
最后，此信息通过另一个v-for显示，该v-for仅从正面显示“ 3”个字符。
At the end of the day, the user should see something like this:
在一天结束时，用户应该看到以下内容：
Most of the time regarding was structured around finding a clean navigation method and storing data. GenafurLy gave me great advice regarding UI that enabled me to work around what I had currently with minimal CSS changes as well and recommended me potential improvements once I finished the base functionalities. Now that the functionalities are largely complete I would love to find ways to vamp up the UI in more CSS intensive ways, such as a modal card for the results page. With the card, I could probably fit in character art as well as an unintrusive link to character specific tutorial videos.
大部分时间都是围绕着寻找一种干净的导航方法并存储数据来进行的。 GenafurLy给了我关于UI的很好的建议，使我能够以最小CSS更改解决当前的问题，并在完成基本功能后向我推荐可能的改进。 现在功能已基本完成，我很想找到以CSS密集型方式来增强UI的方法，例如结果页面的模式卡。 有了这张卡，我可能会适合角色艺术以及指向角色特定教程视频的非侵入式链接。
I also think it would be cool to detect the browser’s default language settings and align the initial language display, because I found that some Korean users missed the translation button entirely. I would also love to make the results page prettier, using a modal card style to display additional information on click. This could potentially give a user more information on their character of choice instead of lumping a playlist at the top. (Obligatory Gura TV is awesome and you must watch if you’re a new Korean player looking for specifics of a character.)
我还认为检测浏览器的默认语言设置并对齐初始语言显示会很不错，因为我发现一些韩国用户完全错过了翻译按钮。 我也想使结果页面更漂亮，使用模态卡片样式在点击时显示其他信息。 这有可能为用户提供有关其选择角色的更多信息，而不是将播放列表放在顶部。 (必选的Gura TV非常棒，如果您是韩国新玩家，则必须注意寻找角色的细节。)
Regardless, I had a lot of fun learning Vue JS and structuring a project from scratch. Vue 3 just came out so some things I learned may also be turned upside down, I don’t know.
无论如何，我在学习Vue JS和从头开始构建项目时都感到很有趣。 Vue 3刚问世，所以我学到的一些东西可能也被颠倒了，我不知道。
Once again, thank you for taking interest in the quiz as well as all the help.
再次感谢您对测验和所有帮助感兴趣。
All work can be found on my Github: https://github.com/orangegarage/tekken-character-quiz
所有工作都可以在我的Github上找到： https ： //github.com/orangegarage/tekken-character-quiz
vue-cli 测试
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
