This repository has been archived by the owner on Sep 19, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
56 lines (53 loc) · 3.42 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
<!DOCTYPE html>
<link rel = "stylesheet" href= "index.css"></link>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<html>
<body class="hidden">
<div id="Othello-Select" v-show="loaded" class="v-cloak--hidden" v-cloak>
<div id="header">Select AI difficulty for white team.</div>
<div id="levelSelect">
<div class="difficultyButton easy" data-code="1" v-on:click="select">Beginner</div>
<div class="difficultyButton med" data-code="2" v-on:click="select">Intermediate</div>
<div class="difficultyButton hard" data-code="3" v-on:click="depthSelect">Master</div>
</div>
</div>
<div id="Othello-Select2" v-show="loaded" class="v-cloak--hidden" v-cloak>
<div id="header">Who should play black team?</div>
<div class="difficultyButton" data-code="5" v-on:click="select">I want to play!</div>
<div id="levelSelect">
<div class="difficultyButton easy" data-code="1" v-on:click="select">Beginner AI</div>
<div class="difficultyButton med" data-code="2" v-on:click="select">Intermediate AI</div>
<div class="difficultyButton hard" data-code="3" v-on:click="depthSelect">Master AI</div>
</div>
</div>
<div id="Depth-Select" v-show="loaded" class="v-cloak--hidden" v-cloak>
<div class="header">Select your Depth! <br/>The higher the value, the harder the AI will be.</div>
<label v-for="d in depths">{{d}} <input @change="$emit('input', $event.target.value)" selected v-model="depthSel" v-bind:value="d" :checked="d == 3" type="radio" name="depth"></label>
<div class="difficultyButton" data-code="3" v-on:click="select" v-bind:value="depthSel" >Play with Depth {{depthSel}}</div>
</div>
<div id="Depth-Select2" v-show="loaded" class="v-cloak--hidden" v-cloak>
<div class="header">Select your Depth! <br/>The higher the value, the harder the AI will be.</div>
<label v-for="d in depths">{{d}} <input @change="$emit('input', $event.target.value)" selected v-model="depthSel" v-bind:value="d" :checked="d == 3" type="radio" name="depth"></label>
<div class="difficultyButton" data-code="3" v-on:click="select" v-bind:value="depthSel" >Play with Depth {{depthSel}}</div>
</div>
<div id="Othello-Message" v-show="loaded" class="v-cloak--hidden" v-cloak>{{text}}</div>
<div id="Othello-Board" v-show="loaded" class="v-cloak--hidden" v-cloak>
<div class="row" v-for="row in rows">
<div v-for="cell in row" class="cell" >
<div v-bind:class="{tileWrapper: true, selectable: cell.selectable == true }" v-bind:data-row="cell.row" v-bind:data-column="cell.column" v-on:click="select">
<div v-bind:class="{tile: true, white: cell.status == 1, black: cell.status == 0}"></div>
</div>
</div>
</div>
<div id="score">
<div class="scoreHolder black">
<div class="tile black"></div>{{blackScore}}
</div>
<div class="scoreHolder white">
<div class="tile white"></div>{{whiteScore}}
</div>
</div>
</div>
</body>
</html>
<script src="index.js"></script>