Created
October 23, 2017 16:27
-
-
Save tokikanno/ce46a6a1be61879edce48b27e8775ab4 to your computer and use it in GitHub Desktop.
dVEXdY
This file contains hidden or 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
| <div id="main"> | |
| <div class="top"> | |
| <div class="row" v-for="(s, idx) in question_segments"> | |
| <div :style="{flex: s.flexs[0]}"></div> | |
| <div | |
| :class="{child: true, activated: s.activated}" | |
| @click="handleSegClick(s, idx)" | |
| style="flex: 10;" | |
| >{{s.seg}}</div> | |
| <div :style="{flex: s.flexs[1]}"></div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <div | |
| v-for="(s, idx) in answer_segments" | |
| :class="{child: true, wrong: s.seg != origin_segments[idx]}" | |
| >{{s.seg}}</div> | |
| </div> | |
| </div> |
This file contains hidden or 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
| const setences = [ | |
| "this is a good day to die", | |
| "that is a mokey to test" | |
| ].map(s => { | |
| return s.split(" "); | |
| }); | |
| function getRandomInt(min, max) { | |
| return Math.floor(Math.random() * (max - min + 1)) + min; | |
| } | |
| function shuffuleSetence(org) { | |
| const s = org.slice(); | |
| const r = []; | |
| while(s.length > 0) { | |
| let idx = getRandomInt(0, s.length - 1); | |
| let flex = getRandomInt(0, 90); | |
| r.push({ | |
| flexs: [flex, 90 - flex], | |
| seg: s[idx], | |
| activated: false, | |
| }); | |
| s.splice(idx, 1); | |
| } | |
| return r; | |
| } | |
| function prepareAppData() { | |
| const origin_segments = setences[getRandomInt(0, setences.length - 1)]; | |
| const question_segments = shuffuleSetence(origin_segments); | |
| return { | |
| origin_segments: origin_segments, | |
| question_segments: question_segments, | |
| answer_segments: [] | |
| }; | |
| } | |
| const app = new Vue({ | |
| el: "#main", | |
| data: prepareAppData(), | |
| methods: { | |
| handleSegClick: function(seg) { | |
| if (!seg.activated) { | |
| seg.activated = true; | |
| this.answer_segments.push(seg); | |
| setTimeout(() => { | |
| if ( | |
| this.answer_segments.length == this.origin_segments.length && | |
| this.answer_segments.every((item, idx) => {return item.seg == this.origin_segments[idx]}) | |
| ){ | |
| alert('恭喜全中! 按下確認後重新開始'); | |
| const newData = prepareAppData(); | |
| this.question_segments = newData.question_segments; | |
| this.origin_segments = newData.origin_segments; | |
| this.answer_segments = newData.answer_segments; | |
| } | |
| }, 100); | |
| } else { | |
| for (let i=0; i<this.answer_segments.length; i++){ | |
| if (this.answer_segments[i] === seg){ | |
| this.answer_segments.splice(i, 1); | |
| seg.activated = false; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); |
This file contains hidden or 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 src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> |
This file contains hidden or 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
| #main { | |
| width: 100%; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| .top { | |
| flex: 9; | |
| background-color: black; | |
| overflow: scroll-y; | |
| } | |
| .footer { | |
| flex: 1; | |
| min-height: 48px; | |
| max-height: 48px; | |
| background-color: #888; | |
| .child { | |
| padding: 0 10px; | |
| display: inline-block; | |
| cursor: pointer; | |
| font-size: 36px; | |
| height: 48px; | |
| line-height: 48px; | |
| background-color: lime; | |
| &.wrong { | |
| background-color: #F50057; | |
| } | |
| } | |
| .child+.child { | |
| margin-left: 20px; | |
| } | |
| } | |
| } | |
| .row { | |
| height: 48px; | |
| display: flex; | |
| // border-bottom: solid 1px #111; | |
| align-items: center; | |
| justify-content: center; | |
| .child { | |
| cursor: pointer; | |
| font-size: 36px; | |
| height: 40px; | |
| line-height: 40px; | |
| background-color: white; | |
| text-align: center; | |
| &.activated { | |
| background-color: #82B1FF; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment