Skip to content

Commit 43934cf

Browse files
lgkonlinelgkonline
committed
new model design
1 parent 9d4db4f commit 43934cf

File tree

10 files changed

+119
-113
lines changed

10 files changed

+119
-113
lines changed

‎README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,13 @@ A cute little tactics game realized using HTML, CSS, JavaScript and Vue.js.<br>
33
Checkout the live demo at https://lgkonline.github.io/tactics/
44

55
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
6+
7+
## Set things up
8+
9+
This project is pretty simple. There is no compiling or bundling with Webpack or something.
10+
11+
You can use following command to start a simple web server to host the application:
12+
13+
```
14+
npx http-server .
15+
```

‎image/Soldier-big.png

26.4 KB
Loading

‎image/Soldier-big2.png

-33.5 KB
Binary file not shown.

‎image/_Soldier-big.png

7.01 KB
Loading

‎image/wizard-big.png

62.8 KB
Loading

‎image/wizard.png

23.9 KB
Loading

‎index.html

Lines changed: 98 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,123 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
7-
<title>Tactics</title>
83

9-
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
10-
<link href="style/main.css" rel="stylesheet">
11-
</head>
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
8+
<title>Tactics</title>
129

13-
<body>
14-
<div id="app">
15-
<span style="background:gray">
16-
Editor's note: In this scenario we have three teams. Two of them are bot controlled. And the one you control has only one member. Let's see how long you can survive...
17-
</span>
18-
<button type="button" id="start-button" v-if="!gameStarted" v-on:click="startGame()">start</button>
19-
<div id="field-outer">
20-
<div id="field">
21-
<div v-for="(r, rIndex) in rows" v-for="p in patterns" class="row">
22-
<div v-for="(c, cIndex) in cols" class="col"
23-
v-bind:class="[{'selectable': selectedFigure && isColSelectable(rIndex, cIndex) && !selectedFigure.moveDirection }, 'pattern-' + getId(rIndex, cIndex, 'patterns')]"
24-
v-bind:id="'col-r' + rIndex + '-c' + cIndex"
25-
v-on:click="selectCol(rIndex, cIndex)">
26-
<!--<span style="color:white;background:black">r{{rIndex}} c{{cIndex}}</span>-->
27-
<template v-for="(f, fIndex) in figures">
28-
<div v-if="f.coordination.r == rIndex && f.coordination.c == cIndex && f.teamObj"
29-
v-bind:class="[{'active': currentFigure && currentFigure.id == f.id,
10+
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
11+
<link href="style/main.css" rel="stylesheet">
12+
</head>
13+
14+
<body>
15+
<div id="app">
16+
<span style="background:gray">
17+
Editor's note: In this scenario we have three teams. Two of them are bot controlled. And the one you control
18+
has only one member. Let's see how long you can survive...
19+
</span>
20+
<button type="button" id="start-button" v-if="!gameStarted" v-on:click="startGame()">start</button>
21+
<div id="field-outer">
22+
<div id="field">
23+
<div v-for="(r, rIndex) in rows" v-for="p in patterns" class="row">
24+
<div v-for="(c, cIndex) in cols" class="col"
25+
v-bind:class="[{'selectable': selectedFigure && isColSelectable(rIndex, cIndex) && !selectedFigure.moveDirection }, 'pattern-' + getId(rIndex, cIndex, 'patterns')]"
26+
v-bind:id="'col-r' + rIndex + '-c' + cIndex" v-on:click="selectCol(rIndex, cIndex)">
27+
<!--<span style="color:white;background:black">r{{rIndex}} c{{cIndex}}</span>-->
28+
<template v-for="(f, fIndex) in figures">
29+
<div v-if="f.coordination.r == rIndex && f.coordination.c == cIndex && f.teamObj"
30+
v-bind:class="[{'active': currentFigure && currentFigure.id == f.id,
3031
'focus': focusedFigure && focusedFigure.id == f.id,
3132
'show-damage': f.deviation < 0,
3233
'show-heal': f.deviation > 0 },
3334
'team-' + f.team, 'orientation-' + f.orientation,
3435
'move-' + f.moveDirection]"
35-
v-bind:style="{ 'background-color': f.tp > (0.25 * f.maxTp) ? '#34A853' : '#EA4335' }"
36-
v-bind:data-tp="f.tp"
37-
v-bind:data-index="fIndex"
38-
v-on:click="focusFigure(f)"
39-
class="figure">
40-
<div class="deviation">{{f.deviation}}</div>
41-
<div class="figure-after" v-bind:style="{ 'filter': 'hue-rotate(' + f.teamObj.hueRotation + ')' }"></div>
36+
v-bind:style="{ 'background-color': f.tp > (0.25 * f.maxTp) ? '#34A853' : '#EA4335' }"
37+
v-bind:data-tp="f.tp" v-bind:data-index="fIndex" v-on:click="focusFigure(f)"
38+
class="figure">
39+
<div class="deviation">{{f.deviation}}</div>
40+
<div class="figure-after"
41+
v-bind:style="{ 'filter': 'hue-rotate(' + f.teamObj.hueRotation + ')', 'background-image': 'url(image/' + (f.job || 'soldier') + '.png)', 'transform': f.job === 'wizard' ? 'scale(2)' : '' }">
4242
</div>
43-
</template>
43+
</div>
44+
</template>
4445

45-
<template v-for="o in objects">
46-
<div v-for="co in o.coordination" v-if="co.r == rIndex && co.c == cIndex"
47-
v-bind:class="'object-' + o.id"
48-
class="object"></div>
49-
</template>
50-
</div>
51-
</div>
46+
<template v-for="o in objects">
47+
<div v-for="co in o.coordination" v-if="co.r == rIndex && co.c == cIndex"
48+
v-bind:class="'object-' + o.id" class="object"></div>
49+
</template>
50+
</div>
5251
</div>
5352
</div>
53+
</div>
5454

55-
<div id="figure-info-outer">
56-
<div v-show="gameStarted" class="figure-info left" id="figure-info">
57-
<template v-if="currentFigure && currentFigure.teamObj">
58-
<div class="figure-info-profile"
59-
style="background-image:url(image/Soldier-big2.png)"
60-
v-bind:style="{'filter': 'hue-rotate(' + currentFigure.teamObj.hueRotation + ')'}"></div>
55+
<div id="figure-info-outer">
56+
<div v-show="gameStarted" class="figure-info left" id="figure-info">
57+
<template v-if="currentFigure && currentFigure.teamObj">
58+
<div class="figure-info-profile"
59+
v-bind:style="{'filter': 'hue-rotate(' + currentFigure.teamObj.hueRotation + ')', 'background-image': 'url(image/' + (currentFigure.job || 'soldier') + '-big.png)'}">
60+
</div>
6161

62-
<div class="figure-info-details">
63-
<strong>{{currentFigure.id}}</strong><br>
64-
TP {{currentFigure.tp}} / {{currentFigure.maxTp}}<br>
65-
MP {{currentFigure.mp}} / {{currentFigure.maxMp}}<br>
66-
Team {{currentFigure.teamObj.id}}
67-
</div>
68-
</template>
69-
</div>
70-
71-
<div v-show="focusedFigure" class="figure-info right" id="focused-figure-info">
72-
<template v-if="focusedFigure">
73-
<strong>{{focusedFigure.id}}</strong><br>
74-
TP {{focusedFigure.tp}} / {{focusedFigure.maxTp}}<br>
75-
MP {{focusedFigure.mp}} / {{focusedFigure.maxMp}}<br>
76-
Team {{focusedFigure.teamObj.id}}
77-
</template>
78-
</div>
62+
<div class="figure-info-details">
63+
<strong>{{currentFigure.id}}</strong><br>
64+
TP {{currentFigure.tp}} / {{currentFigure.maxTp}}<br>
65+
MP {{currentFigure.mp}} / {{currentFigure.maxMp}}<br>
66+
Team {{currentFigure.teamObj.id}}
67+
</div>
68+
</template>
7969
</div>
8070

81-
<div v-if="alertMessage" id="alert">
82-
{{alertMessage}}
71+
<div v-show="focusedFigure" class="figure-info right" id="focused-figure-info">
72+
<template v-if="focusedFigure">
73+
<strong>{{focusedFigure.id}}</strong><br>
74+
TP {{focusedFigure.tp}} / {{focusedFigure.maxTp}}<br>
75+
MP {{focusedFigure.mp}} / {{focusedFigure.maxMp}}<br>
76+
Team {{focusedFigure.teamObj.id}}
77+
</template>
8378
</div>
79+
</div>
8480

85-
<div id="control" v-show="showControls">
86-
<div id="action-buttons" v-if="currentFigure && !selectedAction">
87-
<button v-for="a in currentFigure.action" type="button"
88-
v-on:click="doAction(a)">
89-
{{a.id}}
90-
</button>
91-
</div>
92-
93-
<template v-if="currentFigure && selectedAction && !showOrientationControls && !isMoving">
94-
<button type="button"
95-
v-on:click="selectedAction = null;selectedFigure = null;showOrientationControls = false">
96-
cancel
97-
</button>
98-
</template>
81+
<div v-if="alertMessage" id="alert">
82+
{{alertMessage}}
83+
</div>
9984

100-
<template v-if="showOrientationControls">
101-
<label>Choose an orientation</label><br>
102-
<button type="button" class="arrow-button" v-on:click="chooseOrientation('top')">&uarr;</button><br><button
103-
type="button" class="arrow-button" v-on:click="chooseOrientation('left')">&larr;</button><span id="orientation-space"></span><button
104-
type="button" class="arrow-button" v-on:click="chooseOrientation('right')">&rarr;</button><br><button
105-
type="button" class="arrow-button" v-on:click="chooseOrientation('bottom')">&darr;</button>
106-
</template>
85+
<div id="control" v-show="showControls">
86+
<div id="action-buttons" v-if="currentFigure && !selectedAction">
87+
<button v-for="a in currentFigure.action" type="button" v-on:click="doAction(a)">
88+
{{a.id}}
89+
</button>
10790
</div>
10891

109-
<div id="splash">
110-
<div>
111-
<div class="logo">Tactics</div>
112-
LOADING...
113-
</div>
92+
<template v-if="currentFigure && selectedAction && !showOrientationControls && !isMoving">
93+
<button type="button"
94+
v-on:click="selectedAction = null;selectedFigure = null;showOrientationControls = false">
95+
cancel
96+
</button>
97+
</template>
98+
99+
<template v-if="showOrientationControls">
100+
<label>Choose an orientation</label><br>
101+
<button type="button" class="arrow-button"
102+
v-on:click="chooseOrientation('top')">&uarr;</button><br><button type="button" class="arrow-button"
103+
v-on:click="chooseOrientation('left')">&larr;</button><span id="orientation-space"></span><button
104+
type="button" class="arrow-button"
105+
v-on:click="chooseOrientation('right')">&rarr;</button><br><button type="button"
106+
class="arrow-button" v-on:click="chooseOrientation('bottom')">&darr;</button>
107+
</template>
108+
</div>
109+
110+
<div id="splash">
111+
<div>
112+
<div class="logo">Tactics</div>
113+
LOADING...
114114
</div>
115115
</div>
116+
</div>
117+
118+
<script src="script/vue.min.js"></script>
119+
<script src="script/teams.js"></script>
120+
<script src="script/main.js"></script>
121+
</body>
116122

117-
<script src="script/vue.min.js"></script>
118-
<script src="script/teams.js"></script>
119-
<script src="script/main.js"></script>
120-
</body>
121-
</html>
123+
</html>

‎script/main.js

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -162,16 +162,6 @@ var app = new Vue({
162162
teams: teams.teams,
163163
figures: teams.figures,
164164
patterns: [
165-
{
166-
id: "nothing",
167-
coordination: [
168-
{ r: 0, c: 0 },
169-
{ r: 5, c: 0 },
170-
{ r: 0, c: 6 },
171-
{ r: 0, c: 7 },
172-
{ r: 1, c: 7 }
173-
]
174-
},
175165
{
176166
id: "grass",
177167
coordination: [

‎script/teams.js

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ var teams = {
1616
figures: [
1717
{
1818
id: "wizard2",
19+
job: "wizard",
1920
tp: 72,
2021
mp: 50,
2122
maxTp: null,
@@ -25,7 +26,7 @@ var teams = {
2526
c: 3
2627
},
2728
orientation: "top",
28-
action: [
29+
action: [
2930
{
3031
id: "move",
3132
range: 3
@@ -48,6 +49,7 @@ var teams = {
4849
},
4950
{
5051
id: "wizard3",
52+
job: "wizard",
5153
tp: 72,
5254
mp: 50,
5355
maxTp: null,
@@ -57,7 +59,7 @@ var teams = {
5759
c: 0
5860
},
5961
orientation: "right",
60-
action: [
62+
action: [
6163
{
6264
id: "move",
6365
range: 3
@@ -77,7 +79,7 @@ var teams = {
7779
}
7880
],
7981
team: 2
80-
},
82+
},
8183
{
8284
id: "boss2",
8385
tp: 130,
@@ -106,7 +108,7 @@ var teams = {
106108
tp: 20,
107109
mpCost: 6,
108110
missRange: 0
109-
}
111+
}
110112
],
111113
team: 1
112114
},
@@ -121,7 +123,7 @@ var teams = {
121123
c: 4
122124
},
123125
orientation: "bottom",
124-
action: [
126+
action: [
125127
{
126128
id: "move",
127129
range: 3
@@ -169,6 +171,7 @@ var teams = {
169171
},
170172
{
171173
id: "darkWizard2",
174+
job: "wizard",
172175
tp: 72,
173176
mp: 60,
174177
maxTp: null,
@@ -178,7 +181,7 @@ var teams = {
178181
c: 1
179182
},
180183
orientation: "top",
181-
action: [
184+
action: [
182185
{
183186
id: "move",
184187
range: 3
@@ -289,7 +292,7 @@ var teams = {
289292
maxMp: null,
290293
coordination: {
291294
r: 5,
292-
c: 3
295+
c: 3
293296
},
294297
orientation: "top",
295298
action: [

‎style/main.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@ button, input {
163163
height: 100%;
164164
background-image: url(../image/Soldier.png);
165165
background-position: -75px 0;
166+
background-size: 150px 50px;
166167
}
167168
.figure::before,
168169
.figure .figure-after {

0 commit comments

Comments
 (0)