dolpen dolpen

イカ向け Tom Clancy's Rainbow Six® Siege

このゲームは何？

ケイドロを FPS でやるようなゲームである。ただし、シージ(Siege)というのは包囲戦のことで、このゲームでは立てこもって防衛する方がテロリスト、突入して攻撃する側が警察や軍隊の突入部隊という構図になっている。

ステージ

民家や訓練基地、領事館やクラブハウス、山荘やら国境警備拠点など様々なステージがある。どのステージでも共通なのが、立てこもるための建造物があることだ。

#複数のコンポーネント

単一コンポーネントだった一覧/詳細画面をそれぞれ別のコンポーネントに分割する。

アプリケーションが成長してきている。コンポーネントを使いまわしたり、データを受け渡したり、再利用可能な資源を作ったりするなどでユースケース(コンポーネントの利用パターン)が移り変わっていく。ヒーローの一覧部分と詳細情報を、それぞれを再利用できるように分割してみよう。

今回作るもののデモ

ルーティング

Angular のルーター(Router/Component Router) を追加し、異なる画面間を移動する。

ルーティングをする。

このアプリケーションに新たな機能が要求された。

ダッシュボード画面を追加してほしい
ヒーロー一覧画面とダッシュボード画面を行き来できるようにしたい

サービス

再利用可能な**サービス(Services)**を作り、ヒーローのデータ呼び出しを管理する

サービスとは

アプリケーションは進化を続けている。近いうち、たくさんのコンポーネントを追加することになるだろう。それらのコンポーネントはヒーローのデータへアクセスする必要があるだろう。しかし、その度にヒーローのデータをコピー&ペーストはしたくない。その代わりに、今回は単一、かつ再利用できるサービスを作り、データが必要なコンポーネントに注入する方法を学ぶ。

#一覧画面と詳細画面

ヒーローの一覧について、一覧と詳細の画面を作る。

たくさんのヒーロー達

我々にはたくさんのヒーローが必要である。このアプリケーションを、ヒーローの一覧を表示できるように拡張し、ユーザーがヒーローを選択できるように、そして選択されたヒーローの詳細情報を表示できるようにしよう。

	[
	{"name": "わかばシューター","sub": "スプラッシュボム","special": "バリア","type": "シューター","option": "オリジナル","manufacturer": "スプライカ","id": 1},
	{"name": "もみじシューター","sub": "ポイズンボール","special": "スーパーセンサー","type": "シューター","option": "アナザー","manufacturer": "スプライカ","id": 2},
	{"name": "スプラシューター","sub": "クイックボム","special": "ボムラッシュ","type": "シューター","option": "オリジナル","manufacturer": "スプライカ","id": 3},
	{"name": "スプラシューターコラボ","sub": "キューバンボム","special": "スーパーショット","type": "シューター","option": "アナザー","manufacturer": "スプライカ","id": 4},
	{"name": "プロモデラーMG","sub": "チェイスボム","special": "スーパーショット","type": "シューター","option": "オリジナル","manufacturer": "カンブリアームズ","id": 5},
	{"name": "プロモデラーRG","sub": "トラップ","special": "トルネード","type": "シューター","option": "アナザー","manufacturer": "カンブリアームズ","id": 6},
	{"name": "プライムシューター","sub": "スプラッシュボム","special": "トルネード","type": "シューター","option": "オリジナル","manufacturer": "スプライカ","id": 7},
	{"name": "プライムシューターコラボ","sub": "ポイントセンサー","special": "スーパーショット","type": "シューター","option": "アナザー","manufacturer": "スプライカ","id":

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	</head>
	<body>
	<div id="app">

	// Windowsの4色窓合わせゲーム
	// 探索範囲の行と列に、連続した4セルに4色が1個ずつあれば消える


	(function (d, w) {
	var config = {
	game: {
	depth: 4,
	mask: 0x0f,
	states: {MENU: 0, MAIN: 1, PAUSE: 2, OVER: 3},

	#app {
	width : 600px;
	}
	#click {
	min-height:200px;
	}
	#lists {
	overflow: hidden;
	}
	#equip {

	[
	{"id":0, "label":"アタリメイド", "strong":0, "weak":0},
	{"id":1, "label":"バトロイカ", "strong":1, "weak":4},
	{"id":2, "label":"アイロニック", "strong":13, "weak":12},
	{"id":3, "label":"クラーゲス", "strong":8, "weak":2},
	{"id":4, "label":"ロッケンベルグ", "strong":7, "weak":8},
	{"id":5, "label":"エゾッコ", "strong":10, "weak":9},
	{"id":6, "label":"フォーリマ", "strong":11, "weak":5},
	{"id":7, "label":"ホッコリー", "strong":5, "weak":6},
	{"id":8, "label":"ホタックス", "strong":12, "weak":10},