-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (138 loc) · 6.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!doctype html>
<html lang="hu">
<head>
<title>Mastermind – a szójáték</title>
<meta charset="utf-8">
<meta name="author" content="Hanák Dávid">
<meta name="description" content="Mastermind - a szójáték">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.green-deep_orange.min.css"/>
<link rel="stylesheet" href="mastermind.css"/>
<!-- development version, includes helpful console warnings -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script defer src="mastermind.js"></script>
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header" id="app">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Mastermind – a szójáték</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout__right">
<a class="mdl-navigation__link" v-on:click.prevent="start" href="">új játék</a>
</nav>
</div>
</header>
<main class="mdl-layout__content"><div class="page-content">
<!-- welcome card -->
<div v-show="welcome" class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Üdvözöllek!</h1>
</div>
<div class="mdl-card__supporting-text">
<p>
Játsszunk egyet! Gondolj egy ötbetűs szóra, és én megpróbálom kitalálni, hogy mire
gondoltál! Tippelek egy másik ötbetűs szót, neked csak annyit kell megmondanod, hogy
hány betűt találtam el pontosan (<em>megfelelő betű a megfelelő helyen</em>), és hány
betű van ezeken kívül, ami megfelelő, csak <em>rossz helyen van.</em>
</p>
<p>
Ha például arra gondoltál, hogy "ablak", és én arra tippelek, hogy "kalap", akkor két
betű pontos (**la*), és további két, megfelelő betű van rossz helyen (<em>a</em>
és <em>k</em>). Csak értelmes magyar szavakra gondolhatsz!
</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" v-on:click="start" :disabled="!dictionary_loaded">
Kezdjük!
</a>
</div>
</div>
<!-- end of welcome card -->
<!-- final guess card -->
<div v-show="!won && n_best == 1" class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__supporting-text">
<p>Szerintem te arra gondoltál, hogy</p>
<div class="guess mdl-typography--display-1">{{ guess }}</div>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" v-on:click="win">
Talált!
</a>
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" v-on:click="keepGuessing">
Nem talált!
</a>
</div>
</div>
<!-- end of final guess card -->
<!-- victory card -->
<div v-show="won" class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__supporting-text">
<p>Köszönöm a játékot! A szavad az volt, hogy</p>
<div class="guess mdl-typography--display-1">{{ guess }}</div>
<p v-show="best_score > 0">
Nem mindig válaszoltál pontosan. A táblázatban bejelöltem, hogy hol tévesztettél,
és hogy mi lett volna a helyes válasz.
</p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" v-on:click="start">
Új játék!
</a>
</div>
</div>
<!-- end of victory card -->
<!-- main game area -->
<form v-show="!won && n_best > 1" action="javascript:submit()">
<div class="guess mdl-typography--display-1">{{ guess }}</div>
<div class="row">
<div v-for="type of ['exact', 'misplaced']" class="column">
<div class="column-title mdl-typography--title">
{{ { exact: 'pontos találat', misplaced: 'jó betűk rossz helyen'}[type] }}
</div>
<label v-for="i of [0,1,2,3,4,5]" class="mdl-radio mdl-js-radio mdl-js-ripple-effect" :for="`${type}-${i}`">
<input type="radio" :id="`${type}-${i}`" class="mdl-radio__button"
:name="type" :value="i" v-model="score[type]">
<span class="mdl-radio__label">{{ i }}</span>
</label>
</div>
</div>
<!-- Raised button with ripple -->
<div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Tovább!
</button>
</div>
</form>
<!-- end of main game area -->
<!-- history -->
<table v-show="history.length > 0" id="log">
<tr>
<th>tipp</th>
<th>pontos</th>
<th>rossz helyen</th>
</tr>
<tr v-for="h of history">
<td>
<span v-show="'bad' in h" class="material-icons">warning</span>
{{ h.guess }}
</td>
<td v-for="type of ['exact', 'misplaced']" :class="type">
<span v-show="('bad-' + type) in h">{{ h['bad-' + type] }} →</span>
{{ h[type] }}
</td>
</tr>
</table>
<!-- end of history -->
</div></main>
</div> <!-- .mdl-layout -->
</body>
</html>