Skip to content

Instantly share code, notes, and snippets.

@asm-jaime

asm-jaime/index.html

Last active May 10, 2018 08:14
Show Gist options
  • Save asm-jaime/3135fd9520dfabf2e3d8ecbdb77a0f87 to your computer and use it in GitHub Desktop.
Save asm-jaime/3135fd9520dfabf2e3d8ecbdb77a0f87 to your computer and use it in GitHub Desktop.
Download ZIP
one file MVC
Raw
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>pistonizator</title>
</head>
<body style="text-align: center; font-size: 24px;">
<p>MVC</p>
<img id="mainv" src="http://fb.ru/misc/i/gallery/51506/2272349.jpg"></img>
<br/>
<button id="left">налево</button>
<button id="right">направо</button>
<br/>
<div id="showStatus"></div>
<script>
// ========== view
const view = {
showStatus: function (message) {
const status = document.getElementById("showStatus");
status.innerHTML = message;
},
showImg: function (img) {
const img_elem = document.getElementById("mainv");
img_elem.src = img;
},
showMode: function(mode) {
if(mode === 0 || mode === 3){
const btn_left = document.getElementById("left");
const btn_right = document.getElementById("right");
btn_left.disabled = true;
btn_right.disabled = true;
}
}
};
// ========== model
const model = {
modes: {
0: 'fail',
1: 'await',
2: 'good',
3: 'win',
},
state: {
right_array: [0,1,0,0,1,0],
mode: 1,
imgs: [
'https://i.ytimg.com/vi/Z1RInh88-B0/hqdefault.jpg',
'http://fb.ru/misc/i/gallery/51506/2272349.jpg',
'https://www.meme-arsenal.com/memes/37e4a80e1352f22420f2fbdda1cf74b1.jpg',
'https://coubsecure-s.akamaihd.net/get/b29/p/coub/simple/cw_timeline_pic/0838f33c207/8ac717c2644df173890d6/med_1453780295_image.jpg'
],
msgs: ['нахуй!', 'епта!', 'еба..!', 'ебать!', 'маня маня', 'петух'],
counter: 0,
message: '',
},
fail: function() {
const state = this.state;
state.mode = 0;
state.counter = 0;
const rnd = Math.floor(Math.random()*(state.msgs.length - 1));
this.state.message = `готовь туза, ${state.msgs[rnd]}!`;
},
good: function() {
const state = this.state;
state.mode = 2;
const rnd = Math.floor(Math.random()*(state.msgs.length - 1));
console.log(state.msgs[rnd]);
this.state.counter++;
this.state.message = `а ты прав, ${state.msgs[rnd]}!`;
},
win: function() {
const state = this.state;
state.mode = 3;
state.counter = 0;
const rnd = Math.floor(Math.random()*(state.msgs.length - 1));
this.state.message = `да ты же победил!! ${state.msgs[rnd]}!`;
},
on_left: function(){
if(this.state.right_array[this.state.counter] === 0) {
if(this.state.counter === this.state.right_array.length - 1) {
this.win();
} else {
this.good();
}
} else {
this.fail();
}
return this.state;
},
on_right: function() {
if(this.state.right_array[this.state.counter] === 1){
if(this.state.counter === this.state.right_array.length - 1) {
this.win();
} else {
this.good();
}
} else {
this.fail();
}
return this.state;
},
};
// ========== controller
const controller = {
click_left: function() {
const state = model.on_left();
view.showStatus(state.message);
view.showImg(state.imgs[state.mode]);
view.showMode(state.mode);
},
click_right: function() {
const state = model.on_right();
view.showStatus(state.message);
view.showImg(state.imgs[state.mode]);
view.showMode(state.mode);
}
};
// ========== initit
(function() {
const app = {
init: function () {
this.main();
this.event();
},
main: function () {
},
event: function () {
const btn_left = document.getElementById("left");
btn_left.onclick = controller.click_left;
const btn_right = document.getElementById("right");
btn_right.onclick = controller.click_right;
}
};
app.init();
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment