fureweb-com/app.html

## app.html
<html>
<head></head>
<body>
  <section id="stage">

  </section>

  <nav id="controller">
    <button class="up"></button>
    <button class="down"></button>
    <button class="left"></button>
    <button class="right"></button>
    <button class="space"></button>
  </nav>

  <section id="title" style="display:none">
    <h1>TETRIS</h1>
    <button class="start">START</button>
  </section>

  <section id="stageIntro" style="display:none">
    STAGE
    <section class="stage"></section>
  </section>

  <section id="game" style="display:none">
    <section class="next"></section>
    <section class="play"></section>
    <section class="stage">
      STAGE
      <section class="stage"></section>
    </section>
    <section class="score">
      <div>SCORE</div>
      <div>current: <span class="curr"></span></div>
      <div>total: <span class="total"></span></div>
    </section>
  </section>

  <section id="stageEnd" style="display:none">
    <div>Stage: <span class="stage"></span></div>
    <div>Current: <span class="curr"></span></div>
    <div>Total: <span class="total"></span></div>
    <button class="next">NEXT</button>
  </section>

  <section id="clear" style="display:none">
    Thank you!
    <button class="rank">Rank</button>
    <button class="title">Title</button>
  </section>

  <section id="dead" style="display:none">
    You are dead.
    <button class="rank">Rank</button>
    <button class="title">Title</button>
  </section>


  <ul id="ranking" style="display:none"></ul>

  <script src="setting.js"></script>
  <script src="app.js"></script>
</body>
</html>

## app.js
const APP = (SET=>{

'use strict';

const repeat = (count, ...arg) => {
  const f = arg.pop();
  for(let i = 0; i < count; i++) f(i, ...arg);
};
const PROP = (self, ...v) => Object.assign(self, ...v);
const ERR = v => { throw v; };
const IS_OVERRIDE = _ => ERR('override!');
const TMPL = (self, method, ...arg) => '_' + method in self ? self['_' + method](arg) : ERR();
const HOOK = (p, method) => typeof p.prototype[method] === 'function' ? '_' + method : ERR();

const SubData = class{
  constructor(listener) { PROP(this, {listener}); }
  notify() { if(this.listener) this.listener(); }
  clear() {
    TMPL(this, 'clear');
  }
}
const Stage = class extends SubData {
  [HOOK(SubData, 'clear')]() {
    this.stage = 0;
    this.isNext();
  }
  isNext() {
    if(this.stage++ === SET.stage.max) return false;
    else {
      this.notify();
      return true;
    }
  }
  get speed() {
    const {stage: {speed: [min, max], max: stageMax}} = SET;
    return min - (min - max) * (this.stage - 1) / stageMax;
  }
  get count() {
    const {stage: {count: [max, inc]}} = SET;
    return max + inc * (this.stage - 1);
  }
}
const Score = class extends SubData {
  [HOOK(SubData, 'clear')]() {
    this.curr = this.total = 0;
    this.notify();
  }
  add(line, stage) {
    //...
  }
}
const Block = class {
  static get() {}
  constructor() {}
  left() {}
  right() {}
  get block() {}
}
const Data = class extends Array {
  constructor(row, col) {
    super(row);
    this.fill([]);
    PROP(this, {col});
  }
  cell() {}
  row() {}
  all() {}
}
const Renderer = class {
  constructor() {}
  clear() {
    IS_OVERRIDE();
  }
  render(v) {
    TMPL(this, 'render', v);
  }
}
const TableRenderer = class extends Renderer {
  [HOOK(Renderer, 'render')]() {}
  [OVERRIDE(Renderer, 'clear')]() {}
}
const Panel = class {
  constructor(game, _init, _render) {
    PROP(this, {game, _init, _render});
  }
  init(...arg) {
    return this.base = this._init(this.game, ...arg);
  }
  render(...arg) {
    this._render(this.base, this.game, ...arg);
  }
}
const Game = class {
  constructor(col, row, basePanel) {

  }
  addState(state, {init, render}, f) {
    this.state[state] = f;
    this.panel[panel] = new Panel(this, init, render);
  }
}
return {
  init() {
    const game = new Game(10, 20, {
      init: ()=> sel('#stage'),
      render: (base, game, panel, {base: el = panel.init()}) => {
        base.innerHTML = '';
        base.appendChild(el);
      }
    });
    game.addState(Game.title, {
      init: (game, ...arg) => {
        sel('#title').style.display = 'block';
        sel('#title.start').onclick =_=>game.setState(Game.stageIntro);
        return sel('#title');
      },
      render: null
    }, (_, {stage, score}) => {
      stage.clear();
      score.clear();
    });

  }
}
})(SET);

APP.init();

## settings.js
const SET = {
  stage: {
    max: 10,
    count: [10, 3],
    speed: [500, 100]
  }
}
	<html>
	<head></head>
	<body>
	<section id="stage">

	</section>

	<nav id="controller">
	<button class="up"></button>
	<button class="down"></button>
	<button class="left"></button>
	<button class="right"></button>
	<button class="space"></button>
	</nav>

	<section id="title" style="display:none">
	<h1>TETRIS</h1>
	<button class="start">START</button>
	</section>

	<section id="stageIntro" style="display:none">
	STAGE
	<section class="stage"></section>
	</section>

	<section id="game" style="display:none">
	<section class="next"></section>
	<section class="play"></section>
	<section class="stage">
	STAGE
	<section class="stage"></section>
	</section>
	<section class="score">
	<div>SCORE</div>
	<div>current: <span class="curr"></span></div>
	<div>total: <span class="total"></span></div>
	</section>
	</section>

	<section id="stageEnd" style="display:none">
	<div>Stage: <span class="stage"></span></div>
	<div>Current: <span class="curr"></span></div>
	<div>Total: <span class="total"></span></div>
	<button class="next">NEXT</button>
	</section>

	<section id="clear" style="display:none">
	Thank you!
	<button class="rank">Rank</button>
	<button class="title">Title</button>
	</section>

	<section id="dead" style="display:none">
	You are dead.
	<button class="rank">Rank</button>
	<button class="title">Title</button>
	</section>


	<ul id="ranking" style="display:none"></ul>

	<script src="setting.js"></script>
	<script src="app.js"></script>
	</body>
	</html>
	const APP = (SET=>{

	'use strict';

	const repeat = (count, ...arg) => {
	const f = arg.pop();
	for(let i = 0; i < count; i++) f(i, ...arg);
	};
	const PROP = (self, ...v) => Object.assign(self, ...v);
	const ERR = v => { throw v; };
	const IS_OVERRIDE = _ => ERR('override!');
	const TMPL = (self, method, ...arg) => '_' + method in self ? self['_' + method](arg) : ERR();
	const HOOK = (p, method) => typeof p.prototype[method] === 'function' ? '_' + method : ERR();

	const SubData = class{
	constructor(listener) { PROP(this, {listener}); }
	notify() { if(this.listener) this.listener(); }
	clear() {
	TMPL(this, 'clear');
	}
	}
	const Stage = class extends SubData {
	[HOOK(SubData, 'clear')]() {
	this.stage = 0;
	this.isNext();
	}
	isNext() {
	if(this.stage++ === SET.stage.max) return false;
	else {
	this.notify();
	return true;
	}
	}
	get speed() {
	const {stage: {speed: [min, max], max: stageMax}} = SET;
	return min - (min - max) * (this.stage - 1) / stageMax;
	}
	get count() {
	const {stage: {count: [max, inc]}} = SET;
	return max + inc * (this.stage - 1);
	}
	}
	const Score = class extends SubData {
	[HOOK(SubData, 'clear')]() {
	this.curr = this.total = 0;
	this.notify();
	}
	add(line, stage) {
	//...
	}
	}
	const Block = class {
	static get() {}
	constructor() {}
	left() {}
	right() {}
	get block() {}
	}
	const Data = class extends Array {
	constructor(row, col) {
	super(row);
	this.fill([]);
	PROP(this, {col});
	}
	cell() {}
	row() {}
	all() {}
	}
	const Renderer = class {
	constructor() {}
	clear() {
	IS_OVERRIDE();
	}
	render(v) {
	TMPL(this, 'render', v);
	}
	}
	const TableRenderer = class extends Renderer {
	[HOOK(Renderer, 'render')]() {}
	[OVERRIDE(Renderer, 'clear')]() {}
	}
	const Panel = class {
	constructor(game, _init, _render) {
	PROP(this, {game, _init, _render});
	}
	init(...arg) {
	return this.base = this._init(this.game, ...arg);
	}
	render(...arg) {
	this._render(this.base, this.game, ...arg);
	}
	}
	const Game = class {
	constructor(col, row, basePanel) {

	}
	addState(state, {init, render}, f) {
	this.state[state] = f;
	this.panel[panel] = new Panel(this, init, render);
	}
	}
	return {
	init() {
	const game = new Game(10, 20, {
	init: ()=> sel('#stage'),
	render: (base, game, panel, {base: el = panel.init()}) => {
	base.innerHTML = '';
	base.appendChild(el);
	}
	});
	game.addState(Game.title, {
	init: (game, ...arg) => {
	sel('#title').style.display = 'block';
	sel('#title.start').onclick =_=>game.setState(Game.stageIntro);
	return sel('#title');
	},
	render: null
	}, (_, {stage, score}) => {
	stage.clear();
	score.clear();
	});

	}
	}
	})(SET);

	APP.init();
	const SET = {
	stage: {
	max: 10,
	count: [10, 3],
	speed: [500, 100]
	}
	}