From 66dc4cae4cd37e82d773dc30be046d82d380ec4d Mon Sep 17 00:00:00 2001 From: Ben Beltran Date: Sun, 26 Jan 2020 16:33:43 +0100 Subject: Add skeleton for topic Tested with VoiceOver --- app/components/forum_list/forum_list.svelte | 62 +++++++++++++++------ app/components/glyph/glyph.svelte | 38 +++++++++++++ app/components/header/header.svelte | 51 +++++++++++++---- app/components/topic/topic.svelte | 61 +++++++++++++++++++++ app/css/global.css | 7 +++ app/css/style.css | 0 app/forum.svelte | 29 +--------- app/index.html | 12 +++- app/manifest.json | 8 +++ app/manifest.webmanifest | 7 +++ app/models/forums.js | 85 ----------------------------- app/stores/forums.js | 85 +++++++++++++++++++++++++++++ app/utils/glyph_hash.js | 38 +++++++++++++ 13 files changed, 341 insertions(+), 142 deletions(-) create mode 100644 app/components/glyph/glyph.svelte create mode 100644 app/components/topic/topic.svelte create mode 100644 app/css/global.css delete mode 100644 app/css/style.css create mode 100644 app/manifest.json create mode 100644 app/manifest.webmanifest delete mode 100644 app/models/forums.js create mode 100644 app/stores/forums.js create mode 100644 app/utils/glyph_hash.js (limited to 'app') diff --git a/app/components/forum_list/forum_list.svelte b/app/components/forum_list/forum_list.svelte index 905421e..e49c8d8 100644 --- a/app/components/forum_list/forum_list.svelte +++ b/app/components/forum_list/forum_list.svelte @@ -1,21 +1,47 @@ - + + + diff --git a/app/components/glyph/glyph.svelte b/app/components/glyph/glyph.svelte new file mode 100644 index 0000000..45a415b --- /dev/null +++ b/app/components/glyph/glyph.svelte @@ -0,0 +1,38 @@ + + + + + diff --git a/app/components/header/header.svelte b/app/components/header/header.svelte index 15b75b8..edcbc79 100644 --- a/app/components/header/header.svelte +++ b/app/components/header/header.svelte @@ -1,11 +1,42 @@ -

- +

+ + diff --git a/app/components/topic/topic.svelte b/app/components/topic/topic.svelte new file mode 100644 index 0000000..367a5b8 --- /dev/null +++ b/app/components/topic/topic.svelte @@ -0,0 +1,61 @@ + + +

This is a post in the forum.

+ + + +

This is a main topic in the forum. Does that abstraction still even make sense?

Is this really it??

This might all be fake but at least the links look purple when visited

+ +

It's just how it is...

+ + diff --git a/app/css/global.css b/app/css/global.css new file mode 100644 index 0000000..84e9f8c --- /dev/null +++ b/app/css/global.css @@ -0,0 +1,7 @@ +body { + display: grid; + font-family : 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'ＭＳ明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif; + grid-template-columns: repeat(12, [col-start] 1fr); + grid-gap: 20px; + grid-auto-rows: minmax(24px, auto); +} diff --git a/app/css/style.css b/app/css/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/app/forum.svelte b/app/forum.svelte index 99ce5a8..d944d8e 100644 --- a/app/forum.svelte +++ b/app/forum.svelte @@ -1,35 +1,10 @@ -

Is this really what the forum looks like?

- Posted on Interaction. - 3 days remaining. -

- Tags: - question(5) - meta(34) - carrots(1) - tpbo(2) -

- -

+ - - diff --git a/app/index.html b/app/index.html index 7dad472..7c4d601 100644 --- a/app/index.html +++ b/app/index.html @@ -1,16 +1,24 @@ - + + + Forum. + + - + + diff --git a/app/manifest.json b/app/manifest.json new file mode 100644 index 0000000..dbeaa18 --- /dev/null +++ b/app/manifest.json @@ -0,0 +1,8 @@ +{ + "name": "Forum", + "short_name": "Forum", + start_url": "/", +"background_color": "#ffffff", + "display": "standalone", + "theme_color": "#ffffff" +} diff --git a/app/manifest.webmanifest b/app/manifest.webmanifest new file mode 100644 index 0000000..68a60f7 --- /dev/null +++ b/app/manifest.webmanifest @@ -0,0 +1,7 @@ +{ + "name": "Forum", + "start_url": "/", + "background_color": "#ffffff", + "display": "standalone", + "theme_color": "#ffffff" +} diff --git a/app/models/forums.js b/app/models/forums.js deleted file mode 100644 index 211181e..0000000 --- a/app/models/forums.js +++ /dev/null @@ -1,85 +0,0 @@ -import { writable } from 'svelte/store'; - -const internals = {}; - -internals.forums = [ - { - id: 'life', - kanji: '命', - label: 'Life' - }, - { - id: 'the-world', - kanji: '世', - label: 'The World' - }, - { - id: 'online', - kanji: '直結', - label: 'Online' - }, - { - id: 'experience', - kanji: '体験', - label: 'Experience' - }, - { - id: 'belief', - kanji: '信念', - label: 'Belief' - }, - { - id: 'movement', - kanji: '動', - label: 'Movement' - }, - { - id: 'emotion', - kanji: '情', - label: 'Emotion' - }, - { - id: 'interaction', - kanji: '交流', - label: 'Interaction' - }, - { - id: 'structure', - kanji: '構造', - label: 'Structure' - }, - { - id: 'sound', - kanji: '音', - label: 'Sound' - }, - { - id: 'words', - kanji: '言葉', - label: 'Words' - }, - { - id: 'us', - kanji: '一同', - label: 'Us' - }, - { - id: 'everything', - kanji: '何事も', - label: 'Everything' - } -]; - -export const forums = writable(internals.forums); - -export function addForum() { - const id = Math.random(); - - forums.update((forums) => ([...forums, - { - id, - kanji: 'の', - label: `Woah ${id}` - } - ])); -}; diff --git a/app/stores/forums.js b/app/stores/forums.js new file mode 100644 index 0000000..adc8758 --- /dev/null +++ b/app/stores/forums.js @@ -0,0 +1,85 @@ +import { writable } from 'svelte/store'; + +const internals = {}; + +internals.forums = [ + { + id: 'life', + glyph: '☆', + label: 'Life' + }, + { + id: 'the-world', + glyph: '◯', + label: 'The World' + }, + { + id: 'online', + glyph: '⏀', + label: 'Online' + }, + { + id: 'experience', + glyph: '♢', + label: 'Experience' + }, + { + id: 'belief', + glyph: '⏃', + label: 'Belief' + }, + { + id: 'movement', + glyph: '▷', + label: 'Movement' + }, + { + id: 'emotion', + glyph: '☽', + label: 'Emotion' + }, + { + id: 'interaction', + glyph: '〒', + label: 'Interaction' + }, + { + id: 'structure', + glyph: '▢', + label: 'Structure' + }, + { + id: 'sound', + glyph: '〰', + label: 'Sound' + }, + { + id: 'words', + glyph: '╳', + label: 'Words' + }, + { + id: 'us', + glyph: '╱', + label: 'Us' + }, + { + id: 'everything', + glyph: '♡', + label: 'Everything' + } +]; + +export const forums = writable(internals.forums); + +export function addForum() { + const id = Math.random(); + + forums.update((forums) => ([...forums, + { + id, + glyph: 'の', + label: `Woah ${id}` + } + ])); +}; diff --git a/app/utils/glyph_hash.js b/app/utils/glyph_hash.js new file mode 100644 index 0000000..c074376 --- /dev/null +++ b/app/utils/glyph_hash.js @@ -0,0 +1,38 @@ +const internals = { + kSplitterRegex: /.{1,8}/g, + kGlyphs: [ + "☽", + "☆", + "♢", + "♡", + "╱", + "╲", + "╳", + "〰", + "▷", + "⏊", + "〒", + "▢", + "◯", + "⏃", + "⏀", + "⏆" + ] +}; + +// Return a glyph with color based on a 4 byte fragment of a UUIDv4 +const getGlyphHashFragment = function (uuidFragment) { + + const glyphIndex = parseInt(uuidFragment.substring(0,2), 16) % 16; + return { + glyph: internals.kGlyphs[glyphIndex], + color: `#${uuidFragment.substring(2,8)}` + } +}; + +// Return an array of glyphs based on a UUIDv4 +export const getGlyphHash = function (uuid) { + + const hashFragments = uuid.match(internals.kSplitterRegex); + return hashFragments.map(getGlyphHashFragment); +}; -- cgit