✨ Challenges Modification

application/components/problem/solution/program.vue

@@ -1,11 +1,70 @@
 <template>
+  <client-only>
+    <vue-monaco-editor
+      :options="options"
+      :language="answers.language ?? 'text'"
+      v-model:value="answers.code"
+      class="min-h-[360px] code-editor"
+    />
+  </client-only>
 
+  <n-divider class="mx-[-24px] w-[calc(100%+48px)] divider-below-code" />
+
+  <section>
+    <n-space>
+      <n-select
+        :options="languages"
+        v-model:value="answers.language"
+        placeholder="Programming Language"
+        class="w-120"
+      />
+    </n-space>
+  </section>
 </template>
 
 <script setup lang="ts">
+import { NDivider, NSpace, NSelect } from "naive-ui";
+import { VueMonacoEditor } from "@guolao/vue-monaco-editor";
 
+const props = defineProps<{
+  challenge: any,
+  problem: any,
+  answers: any,
+}>();
+const emits = defineEmits(["update:answers"]);
+
+const answers = ref(props.challenge?.answers ?? {});
+
+watch(answers, (v) => {
+  emits("update:answers", v);
+});
+
+const options = {
+  minimap: { enabled: false }
+};
+
+const languageWhitelist: string[] = props.problem?.languageWhitelist ?? [];
+const languageBlacklist: string[] = props.problem?.languageBlacklist ?? [];
+
+const languages = [
+  { label: "C", value: "c" },
+  { label: "C++", value: "cpp" },
+  { label: "JSON", value: "json" }, // Huh?
+].filter((item) => {
+  return languageWhitelist.filter((x) => new RegExp(x, item.value)).length > 0 ||
+    !(languageBlacklist.filter((x) => new RegExp(x, item.value)).length > 0);
+});
 </script>
 
 <style scoped>
+.code-editor {
+  min-width: calc(100% + 48px);
+  margin-top: -20px;
+  margin-left: -24px;
+  margin-right: -24px;
+}
 
-</style>
+.divider-below-code {
+  margin-top: 0 !important;
+}
+</style>