X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftechniques%2FDetail.js;h=9d9534ed31f2d6831f883fa2ce043975e90958e7;hb=f1c8c3cc53a09d1c261875d2f482b6e19bc48a9a;hp=d955397399668d86d2d030f01c9cb2de8fb6d3b0;hpb=6f34dd7c00bf0bd152a97b175390be00c3a0ba31;p=alttp.git

diff --git a/resources/js/components/techniques/Detail.js b/resources/js/components/techniques/Detail.js
index d955397..9d9534e 100644
--- a/resources/js/components/techniques/Detail.js
+++ b/resources/js/components/techniques/Detail.js
@@ -1,18 +1,31 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Container } from 'react-bootstrap';
+import { Alert, Container } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
+import List from './List';
 import Outline from './Outline';
-import { getTranslation } from '../../helpers/Technique';
+import Requirements from './Requirements';
+import Rulesets from './Rulesets';
+import RawHTML from '../common/RawHTML';
+import {
+	getRelations,
+	getTranslation,
+	hasRelations,
+	sorted,
+} from '../../helpers/Technique';
 import i18n from '../../i18n';
 
 const Detail = ({ technique }) => <Container as="article">
-	<h1>{getTranslation(technique, 'title', i18n.language)}</h1>
+	<div className="d-flex align-items-center justify-content-between">
+		<h1>{getTranslation(technique, 'title', i18n.language)}</h1>
+		{technique && technique.rulesets ?
+			<Rulesets technique={technique} />
+		: null}
+	</div>
 	<Outline technique={technique} />
-	<div dangerouslySetInnerHTML={{
-		__html: getTranslation(technique, 'description', i18n.language),
-	}} />
+	<Requirements technique={technique} />
+	<RawHTML html={getTranslation(technique, 'description', i18n.language)} />
 	{technique.chapters ? technique.chapters.map(chapter =>
 		<section id={`c${chapter.id}`} key={`c${chapter.id}`}>
 			{chapter.pivot.level ?
@@ -22,11 +35,18 @@ const Detail = ({ technique }) => <Container as="article">
 					getTranslation(chapter, 'title', i18n.language),
 				)
 			: null}
-			<div dangerouslySetInnerHTML={{
-				__html: getTranslation(chapter, 'description', i18n.language),
-			}} />
+			<RawHTML html={getTranslation(chapter, 'description', i18n.language)} />
 		</section>
 	) : null}
+	{hasRelations(technique, 'related') ? <>
+		<h2 className="mt-5">{i18n.t('techniques.seeAlso')}</h2>
+		<List techniques={sorted(getRelations(technique, 'related'))} />
+	</> : null}
+	{getTranslation(technique, 'attribution', i18n.language) ?
+		<Alert variant="dark">
+			<RawHTML html={getTranslation(technique, 'attribution', i18n.language)} />
+		</Alert>
+	: null}
 </Container>;
 
 Detail.propTypes = {
@@ -34,6 +54,8 @@ Detail.propTypes = {
 		chapters: PropTypes.arrayOf(PropTypes.shape({
 		})),
 		description: PropTypes.string,
+		rulesets: PropTypes.shape({
+		}),
 		title: PropTypes.string,
 	}),
 };