GitVita
New repositoryImport repositoryNew issue
Your repositories Your dashboard Sign in

microsoft/qdk

Public

mirrored from https://github.com/microsoft/qdkAvailable

Watch0Fork0Star0
CodeCommitsIssuesPull requestsActionsInsightsSecurity
v1.19.0

Branches

Tags

  • No tags available.
0Branches0Tags
Go to file
Add file
Code

Clone

HTTPS

Download ZIP

qdk/source/playground/src

source/playground/src/kata.tsx

218lines · modecode

RawDownload
Latest commit unavailable.
1// Copyright (c) Microsoft Corporation.
2// Licensed under the MIT License.
3
4import { useState } from "preact/hooks";
5import { QscEventTarget } from "qsharp-lang";
6import { Editor, getProfile } from "./editor.js";
7import { OutputTabs } from "./tabs.js";
8import { Markdown } from "qsharp-lang/ux";
9
10import type {
11 CompilerState,
12 ICompilerWorker,
13 ILanguageServiceWorker,
14 VSDiagnostic,
15} from "qsharp-lang";
16
17import type {
18 ExplainedSolution,
19 Kata,
20 Question,
21 KataSection,
22} from "qsharp-lang/katas";
23
24type Props = {
25 kata: Kata;
26 compiler: ICompilerWorker;
27 compiler_worker_factory: () => ICompilerWorker;
28 compilerState: CompilerState;
29 onRestartCompiler: () => void;
30 languageService: ILanguageServiceWorker;
31};
32
33function ExplainedSolutionElem(props: { solution: ExplainedSolution }) {
34 return (
35 <details>
36 <summary>{"💡 Solution"}</summary>
37 {props.solution.items.map((item) => {
38 switch (item.type) {
39 case "example":
40 case "solution":
41 return (
42 <pre>
43 <code>{item.code}</code>
44 </pre>
45 );
46 case "text-content":
47 return <Markdown markdown={item.content}></Markdown>;
48 }
49 })}
50 </details>
51 );
52}
53
54function QuestionElem(props: { question: Question }) {
55 return (
56 <>
57 <h2>{"❓ Question:"}</h2>
58 <Markdown markdown={props.question.description.content}></Markdown>
59 <details>
60 <summary>
61 <strong>{"💡 Answer"}</strong>
62 </summary>
63 {props.question.answer.items.map((item) => {
64 switch (item.type) {
65 case "example":
66 return (
67 <pre>
68 <code>{item.code}</code>
69 </pre>
70 );
71 case "text-content":
72 return <Markdown markdown={item.content}></Markdown>;
73 }
74 })}
75 </details>
76 </>
77 );
78}
79
80function LessonElem(props: Props & { section: KataSection }) {
81 if (props.section.type !== "lesson") throw "Invalid section type";
82 const lesson = props.section;
83
84 const [shotError, setShotError] = useState<VSDiagnostic>();
85 const [evtHandler] = useState(() => new QscEventTarget(true));
86
87 return (
88 <div>
89 <div class="section-title">
90 <h1>
91 {"📖 Lesson: "}
92 <u>{lesson.title}</u>
93 </h1>
94 </div>
95 <div class="kata-text-content">
96 {lesson.items.map((item) => {
97 switch (item.type) {
98 case "example":
99 return (
100 <>
101 <Editor
102 code={item.code}
103 compiler={props.compiler}
104 compiler_worker_factory={props.compiler_worker_factory}
105 compilerState={props.compilerState}
106 onRestartCompiler={props.onRestartCompiler}
107 kataSection={lesson}
108 evtTarget={evtHandler}
109 defaultShots={1}
110 showShots={false}
111 showExpr={false}
112 shotError={shotError}
113 profile={getProfile()}
114 setAst={() => ({})}
115 setHir={() => ({})}
116 setRir={() => ({})}
117 setQir={() => ({})}
118 activeTab="results-tab"
119 languageService={props.languageService}
120 ></Editor>
121 <OutputTabs
122 evtTarget={evtHandler}
123 showPanel={false}
124 kataMode={true}
125 onShotError={(diag?: VSDiagnostic) => setShotError(diag)}
126 ast=""
127 hir=""
128 rir={["", ""]}
129 qir=""
130 activeTab="results-tab"
131 setActiveTab={() => undefined}
132 ></OutputTabs>
133 </>
134 );
135 case "text-content":
136 return <Markdown markdown={item.content}></Markdown>;
137 case "question":
138 return <QuestionElem question={item}></QuestionElem>;
139 }
140 })}
141 </div>
142 </div>
143 );
144}
145
146function ExerciseElem(props: Props & { section: KataSection }) {
147 if (props.section.type !== "exercise") throw "Invalid section type";
148 const exercise = props.section;
149
150 const [shotError, setShotError] = useState<VSDiagnostic>();
151 const [evtHandler] = useState(() => new QscEventTarget(true));
152
153 return (
154 <div>
155 <div class="section-title">
156 <h1>
157 {"⌨ Exercise: "}
158 <u>{exercise.title}</u>
159 </h1>
160 </div>
161 <Markdown
162 className="excercise-description"
163 markdown={exercise.description.content}
164 />
165 <div>
166 <Editor
167 defaultShots={1}
168 showExpr={false}
169 showShots={false}
170 shotError={shotError}
171 evtTarget={evtHandler}
172 compiler={props.compiler}
173 compilerState={props.compilerState}
174 compiler_worker_factory={props.compiler_worker_factory}
175 onRestartCompiler={props.onRestartCompiler}
176 code={exercise.placeholderCode}
177 kataSection={exercise}
178 profile={getProfile()}
179 setAst={() => ({})}
180 setHir={() => ({})}
181 setRir={() => ({})}
182 setQir={() => ({})}
183 activeTab="results-tab"
184 languageService={props.languageService}
185 ></Editor>
186 <OutputTabs
187 evtTarget={evtHandler}
188 showPanel={false}
189 kataMode={true}
190 onShotError={(diag?: VSDiagnostic) => setShotError(diag)}
191 ast=""
192 hir=""
193 rir={["", ""]}
194 qir=""
195 activeTab="results-tab"
196 setActiveTab={() => undefined}
197 ></OutputTabs>
198 </div>
199 <ExplainedSolutionElem
200 solution={exercise.explainedSolution}
201 ></ExplainedSolutionElem>
202 </div>
203 );
204}
205
206export function Kata(props: Props) {
207 return (
208 <div class="markdown-body kata-override">
209 {props.kata.sections.map((section) =>
210 section.type === "lesson" ? (
211 <LessonElem {...props} section={section}></LessonElem>
212 ) : (
213 <ExerciseElem {...props} section={section}></ExerciseElem>
214 ),
215 )}
216 </div>
217 );
218}
219